Added images

Author: BenjaminDannegard

content/hardware/10.mega/shields/giga-display-shield/tutorials/13.appwizard-guide/assets/appwizard-button-text.png

@@ -7,7 +7,7 @@ tags: [Display, appwizard, segger, GUI]
 
 ## Introduction
 
-Segger's app wizard is a graphical framework for building powerful UIs, and is fully compatible with the GIGA Display Shield. It allows you to build UIs, using pre-made widgets like buttons, images, loading bars, sliders, checkboxes, etc. It also allows you to fully customize the screenspace on the display. In this guide, we will go through some of the different components, so you can learn how to best implement it in your projects.
+Segger's app wizard is a graphical framework for building powerful UIs, and is fully compatible with the GIGA Display Shield. It allows you to build UIs, using pre-made widgets like buttons, images, loading bars, sliders, checkboxes, etc. It also allows you to fully customize the screenspace on the display. In this guide, we will go through some of the different components and interactions, so you can learn how to best implement it in your projects.
 
 ![Appwizard full demo running on the GIGA Display Shield](assets/)
 
@@ -34,26 +34,22 @@ To install this, open the library manager and install the latest version by sear
 
 First go to  **File -> New Project** to start your new project. Here we need to configure certain settings so it will work on the GIGA Display Shield. Set the  display size x to **480** and display size y to **800**. Then we need to disable the **Enable simulation** and **Generate loop in MainTask()** options. It should look like the image below.
 
-![Create project settings]()
+![Create project settings](assets/start-project.png)
 
 ## 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.
+First add a **screen** element to your project, this will be the base that contains all the other elements of the project. To add a background color add the **Box** object and set the color on the right side properties menu.
 
-![Screen highlighted]()
-
-To add a background color add the **Box** object and set the color on the right side properties menu.
-
-![Box highlighted]()
+![Screen and Box highlighted](assets/appwizard-screen-box.png)
 
 ### Button
 
 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]()
+![Adding a button](assets/appwizard-button.png)
 
 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]()
+![Text objects box](assets/appwizard-button-text.png)
 
 ## Adding Interactions
 
@@ -63,15 +59,11 @@ Let's add a textbox which will display a value that will increase when the butto
 
 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]()
+![Textbox added](assets/appwizard-text-box.png)
 
-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".
+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. 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]()
+![Variables window highlighted in App Wizard](assets/appwizard-variable%20window.png)
 
 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.