diff --git a/content/hardware/10.mega/shields/giga-display-shield/tutorials/10.square-line-tutorial/assets/button_label_gui.png b/content/hardware/10.mega/shields/giga-display-shield/tutorials/10.square-line-tutorial/assets/button_label_gui.png
new file mode 100644
index 0000000000..b8059840b1
Binary files /dev/null and b/content/hardware/10.mega/shields/giga-display-shield/tutorials/10.square-line-tutorial/assets/button_label_gui.png differ
diff --git a/content/hardware/10.mega/shields/giga-display-shield/tutorials/10.square-line-tutorial/assets/button_label_gui.svg b/content/hardware/10.mega/shields/giga-display-shield/tutorials/10.square-line-tutorial/assets/button_label_gui.svg
deleted file mode 100644
index af694c02f4..0000000000
--- a/content/hardware/10.mega/shields/giga-display-shield/tutorials/10.square-line-tutorial/assets/button_label_gui.svg
+++ /dev/null
@@ -1,15 +0,0 @@
-
diff --git a/content/hardware/10.mega/shields/giga-display-shield/tutorials/10.square-line-tutorial/assets/export_options.png b/content/hardware/10.mega/shields/giga-display-shield/tutorials/10.square-line-tutorial/assets/export_options.png
new file mode 100644
index 0000000000..1998857a32
Binary files /dev/null and b/content/hardware/10.mega/shields/giga-display-shield/tutorials/10.square-line-tutorial/assets/export_options.png differ
diff --git a/content/hardware/10.mega/shields/giga-display-shield/tutorials/10.square-line-tutorial/assets/export_options.svg b/content/hardware/10.mega/shields/giga-display-shield/tutorials/10.square-line-tutorial/assets/export_options.svg
deleted file mode 100644
index 9ef2e8173d..0000000000
--- a/content/hardware/10.mega/shields/giga-display-shield/tutorials/10.square-line-tutorial/assets/export_options.svg
+++ /dev/null
@@ -1,27 +0,0 @@
-
diff --git a/content/hardware/10.mega/shields/giga-display-shield/tutorials/10.square-line-tutorial/assets/folder_structure.png b/content/hardware/10.mega/shields/giga-display-shield/tutorials/10.square-line-tutorial/assets/folder_structure.png
new file mode 100644
index 0000000000..ab210c1322
Binary files /dev/null and b/content/hardware/10.mega/shields/giga-display-shield/tutorials/10.square-line-tutorial/assets/folder_structure.png differ
diff --git a/content/hardware/10.mega/shields/giga-display-shield/tutorials/10.square-line-tutorial/assets/folder_structure.svg b/content/hardware/10.mega/shields/giga-display-shield/tutorials/10.square-line-tutorial/assets/folder_structure.svg
deleted file mode 100644
index 9e6a21ac0d..0000000000
--- a/content/hardware/10.mega/shields/giga-display-shield/tutorials/10.square-line-tutorial/assets/folder_structure.svg
+++ /dev/null
@@ -1,31 +0,0 @@
-
diff --git a/content/hardware/10.mega/shields/giga-display-shield/tutorials/10.square-line-tutorial/assets/lv_config.png b/content/hardware/10.mega/shields/giga-display-shield/tutorials/10.square-line-tutorial/assets/lv_config.png
new file mode 100644
index 0000000000..b5fc44acd0
Binary files /dev/null and b/content/hardware/10.mega/shields/giga-display-shield/tutorials/10.square-line-tutorial/assets/lv_config.png differ
diff --git a/content/hardware/10.mega/shields/giga-display-shield/tutorials/10.square-line-tutorial/assets/lv_config.svg b/content/hardware/10.mega/shields/giga-display-shield/tutorials/10.square-line-tutorial/assets/lv_config.svg
deleted file mode 100644
index e2a0c54fba..0000000000
--- a/content/hardware/10.mega/shields/giga-display-shield/tutorials/10.square-line-tutorial/assets/lv_config.svg
+++ /dev/null
@@ -1,27 +0,0 @@
-
diff --git a/content/hardware/10.mega/shields/giga-display-shield/tutorials/10.square-line-tutorial/assets/names_highlight.png b/content/hardware/10.mega/shields/giga-display-shield/tutorials/10.square-line-tutorial/assets/names_highlight.png
new file mode 100644
index 0000000000..cd8d789421
Binary files /dev/null and b/content/hardware/10.mega/shields/giga-display-shield/tutorials/10.square-line-tutorial/assets/names_highlight.png differ
diff --git a/content/hardware/10.mega/shields/giga-display-shield/tutorials/10.square-line-tutorial/assets/names_highlight.svg b/content/hardware/10.mega/shields/giga-display-shield/tutorials/10.square-line-tutorial/assets/names_highlight.svg
deleted file mode 100644
index d6e14776a8..0000000000
--- a/content/hardware/10.mega/shields/giga-display-shield/tutorials/10.square-line-tutorial/assets/names_highlight.svg
+++ /dev/null
@@ -1,17 +0,0 @@
-
diff --git a/content/hardware/10.mega/shields/giga-display-shield/tutorials/10.square-line-tutorial/assets/project_settings.png b/content/hardware/10.mega/shields/giga-display-shield/tutorials/10.square-line-tutorial/assets/project_settings.png
new file mode 100644
index 0000000000..df0a6642eb
Binary files /dev/null and b/content/hardware/10.mega/shields/giga-display-shield/tutorials/10.square-line-tutorial/assets/project_settings.png differ
diff --git a/content/hardware/10.mega/shields/giga-display-shield/tutorials/10.square-line-tutorial/assets/project_settings.svg b/content/hardware/10.mega/shields/giga-display-shield/tutorials/10.square-line-tutorial/assets/project_settings.svg
deleted file mode 100644
index 3e97425b5d..0000000000
--- a/content/hardware/10.mega/shields/giga-display-shield/tutorials/10.square-line-tutorial/assets/project_settings.svg
+++ /dev/null
@@ -1,44 +0,0 @@
-
diff --git a/content/hardware/10.mega/shields/giga-display-shield/tutorials/10.square-line-tutorial/assets/squareline_studio_project.png b/content/hardware/10.mega/shields/giga-display-shield/tutorials/10.square-line-tutorial/assets/squareline_studio_project.png
new file mode 100644
index 0000000000..e57cd6eee2
Binary files /dev/null and b/content/hardware/10.mega/shields/giga-display-shield/tutorials/10.square-line-tutorial/assets/squareline_studio_project.png differ
diff --git a/content/hardware/10.mega/shields/giga-display-shield/tutorials/10.square-line-tutorial/assets/squareline_studio_project.svg b/content/hardware/10.mega/shields/giga-display-shield/tutorials/10.square-line-tutorial/assets/squareline_studio_project.svg
deleted file mode 100644
index 6c148aa6c4..0000000000
--- a/content/hardware/10.mega/shields/giga-display-shield/tutorials/10.square-line-tutorial/assets/squareline_studio_project.svg
+++ /dev/null
@@ -1,15 +0,0 @@
-
diff --git a/content/hardware/10.mega/shields/giga-display-shield/tutorials/10.square-line-tutorial/assets/text_font_size.png b/content/hardware/10.mega/shields/giga-display-shield/tutorials/10.square-line-tutorial/assets/text_font_size.png
new file mode 100644
index 0000000000..215de3f10f
Binary files /dev/null and b/content/hardware/10.mega/shields/giga-display-shield/tutorials/10.square-line-tutorial/assets/text_font_size.png differ
diff --git a/content/hardware/10.mega/shields/giga-display-shield/tutorials/10.square-line-tutorial/assets/text_font_size.svg b/content/hardware/10.mega/shields/giga-display-shield/tutorials/10.square-line-tutorial/assets/text_font_size.svg
deleted file mode 100644
index b5813c6642..0000000000
--- a/content/hardware/10.mega/shields/giga-display-shield/tutorials/10.square-line-tutorial/assets/text_font_size.svg
+++ /dev/null
@@ -1,16 +0,0 @@
-
diff --git a/content/hardware/10.mega/shields/giga-display-shield/tutorials/10.square-line-tutorial/content.md b/content/hardware/10.mega/shields/giga-display-shield/tutorials/10.square-line-tutorial/content.md
index 81e99ff311..593e1b1448 100644
--- a/content/hardware/10.mega/shields/giga-display-shield/tutorials/10.square-line-tutorial/content.md
+++ b/content/hardware/10.mega/shields/giga-display-shield/tutorials/10.square-line-tutorial/content.md
@@ -1,8 +1,8 @@
---
title: SquareLine Studio With the GIGA Display Shield
-description: "Learn how to use SquareLine Studio to create LVGL GUIs for the GIGA Display Shield"
+description: Learn how to use SquareLine Studio to create LVGL GUIs for the GIGA Display Shield
author: Benjamin Dannegård
-tags: [Display, squareline, LVGL]
+tags: [Display, SquareLine, LVGL]
---
The GIGA Display Shield with the GIGA R1 WiFi board can run LVGL which allows for the creation of advanced GUIs. To make the design of the GUI easier we can use the software SquareLine Studio. This will allow us to drag and drop different elements and then export it for usage on the display shield.
@@ -29,7 +29,7 @@ First download SquareLine Studio from the link above. Now in SquareLine Studio g
As show on this image:
-
+
Finally click on the "create" button.
@@ -37,13 +37,13 @@ Finally click on the "create" button.
Now it is time to create the GUI that will be on the display shield. Feel free to customize your GUI however you want. On the left there are plenty of handy widgets that can be drag and dropped. On the right you can set more specific options for the widgets.
-
+
### Exporting a Project From SquareLine Studio
Now that the project is ready it is time to export it. First click on the "Export" tab at the top, then select "Create Template Project" and select the destination for your exported files. When that is done click on the "Export UI Files" and wait for the process to finish.
-
+
Now all the files should be in the folder that you specified.
@@ -51,7 +51,7 @@ Now all the files should be in the folder that you specified.
In the folder that you exported the files to, go into the "libraries" folder and then copy the "ui" folder.
-
+
Place this folder in your **Libraries** folder found inside your **Arduino** folder. This is the same **Arduino** folder that contains your Arduino IDE sketches.
@@ -86,11 +86,11 @@ void loop() {
The project from SquareLine Studio is exported as a library, let's take a look at how we can reference a specific element in the GUI. To demonstrate this we will first create a simple GUI with a increase button, a decrease button and a label. The label will show the number that will decrease or increase depending on what button is pressed. Our GUI will look like this:
-
+
Pay attention to the names of the button and the label, which can be seen on the right side and the upper left side here:
-
+
Name the widgets accordingly:
@@ -100,11 +100,11 @@ Name the widgets accordingly:
Also pay attention to the size of the font set for the counter label. We set the size to 26, this then needs to be enabled in the lv_conf.h file. This file can be found in /mbed/libraries/Arduino_H7_Video/src.
-
+
And to enable the font size find the **FONT USAGE** section. If you want to enable any other size simply change the `0` next to any of the font sizes into a `1`:
-
+
Now export the project and put the library in the Arduino libraries folder, as shown in the previous section.