Added interaction section

Author: BenjaminDannegard

content/hardware/10.mega/shields/giga-display-shield/tutorials/13.appwizard-guide/content.md

@@ -36,14 +36,58 @@ First go to  **File -> New Project** to start your new project. Here we need to
 
 ![Create project settings]()
 
-## Adding elements to the project
+## Setting Up The Project
+First add a **screen** element to your project, this will be the base that contains all the other elements of the project.
+
+![Screen highlighted]()
+
+To add a background color add the **Box** object and set the color on the right side properties menu.
+
+![Box highlighted]()
 
 ### Button
 
-### Slider
+Add a button from the object menu. On the right hand properties menu you can set the color of the button when it is unpressed and pressed.
+
+![Adding a button]()
+
+In the right hand properties menu you can also add text to the button. Press the **set text** option. This will bring up a window that contains all the text elements in the project. Press **add text**, this will create a new text object with a unique id. Now to set the text that will be displayed press **New language** and enter **En**, we will be using English in this tutorial. Under the new **En** tab you can set the text that will be visible, change the **-** to **Button** and this text will be displayed on the button.
+
+[Text objects box]()
+
+## Adding Interactions
+
+### Textbox
+
+Let's add a textbox which will display a value that will increase when the button is pressed.
+
+First add a textbox by clicking the **Text** box in the "Add objects" section. Then feel free to set the text color and background color to your desired color in the properties menu. Here the textbox needs to be set to decimal mode, do that by clicking the "Set decimal mode" button and then putting a "0" in the mask box.
+
+[Textbox added]()
+
+Next a variable is needed to keep track of the value. In the bottom left "Rescoureces" section press the **Open variables window** button. This will open a window where variables can be managed.
+
+[Variables window highlighted in App Wizard]()
+
+Press **Add variable** and then rename the variable to something relevant so it is easier to keep track of later, here we will name it "ID_BUTTON_VAR".
+
+[Image of variable window]()
+
+Now we need to add interactions for the button and text. Press the **+** button in the interactions box to add an interaction. Set the variable as the "Emitter", the signal should be "VALUE_CHANGED", job should be "SETVALUE" and the receiver should be the text box which here is "ID_TEXT_00". Now the text will be set to the same value as the variable.
+
+To add the buttons interaction, set the emitter as the button, the signal should be "RELEASED", so that the value increses when the button is released. The job should be "ADDVALUE" and the receiver should be the variable, so the value gets added to the variable. In the window that pops up the increment of the value added to the variable, here we set it to "1". You can try out the interaction by pressing the **Start play mode** in the upper right corner of the "Editor" window.
+
+### Progress Bar
+
+Now lets try adding a progress bar to the previous interaction. Start by pressing the **progbar** button and set the initial value to "0". 
+
 
 ### Gauge
 
+### Slider
+
+
+
 ## Exporting the project
 
 ##