|
| 1 | +--- |
| 2 | +title: GIGA Display Shield app wizard Guide |
| 3 | +description: 'Learn how to use Seggers App Wizard with the GIGA Display Shield.' |
| 4 | +author: Benjamin Dannegård |
| 5 | +tags: [Display, appwizard, segger, GUI] |
| 6 | +--- |
| 7 | + |
| 8 | +## Introduction |
| 9 | + |
| 10 | +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. |
| 11 | + |
| 12 | + |
| 13 | + |
| 14 | +## Hardware & Software Needed |
| 15 | + |
| 16 | +- [Arduino GIGA R1 WiFi](https://store.arduino.cc/products/giga-r1-wifi) |
| 17 | +- [Arduino GIGA Display Shield](https://store.arduino.cc/products/giga-display-shield) |
| 18 | +- [Arduino IDE](https://www.arduino.cc/en/software) |
| 19 | +- [App Wizard](https://www.segger.com/products/user-interface/emwin/tools/appwizard/) |
| 20 | +- [emWin Arduino Library](https://github.com/SEGGERMicro/emWin-Arduino-Library/) |
| 21 | + |
| 22 | +## Downloading the Library and Core |
| 23 | + |
| 24 | +The GIGA R1 core includes the [Arduino_H7_Video](https://github.com/arduino/ArduinoCore-mbed/tree/main/libraries/Arduino_H7_Video) library that handles the display. |
| 25 | + |
| 26 | +In this guide, we will be using three different libraries: |
| 27 | +- [Arduino_H7_Video](https://github.com/arduino/ArduinoCore-mbed/tree/main/libraries/Arduino_H7_Video), this one is bundled with the core, so make sure you have the latest version of the [Mbed core](https://github.com/arduino/ArduinoCore-mbed) installed. |
| 28 | +- [Arduino_GigaDisplayTouch](https://www.arduino.cc/reference/en/libraries/arduino_gigadisplaytouch/), handles touch on the GIGA Display Shield |
| 29 | +- [emWin Arduino Library](https://github.com/SEGGERMicro/emWin-Arduino-Library/) |
| 30 | + |
| 31 | +To install this, open the library manager and install the latest version by searching for **"Arduino_GigaDisplayTouch"**. |
| 32 | + |
| 33 | +## Creating an App Wizard project |
| 34 | + |
| 35 | +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. |
| 36 | + |
| 37 | +![Create project settings]() |
| 38 | + |
| 39 | +## Adding elements to the project |
| 40 | + |
| 41 | +### Button |
| 42 | + |
| 43 | +### Slider |
| 44 | + |
| 45 | +### Gauge |
| 46 | + |
| 47 | +## Exporting the project |
| 48 | + |
| 49 | +## |
| 50 | + |
| 51 | +## Conclusion |
| 52 | + |
| 53 | +This guide went through the building blocks of the different components that can be implemented with emWin. To see these examples in a full running example sketch go to **File > Examples > Arduino_H7_Video > emWinDemo**. |
| 54 | + |
| 55 | + |
| 56 | + |
| 57 | +This demo sketch will show the different components using a screen manager in a 2x2 grid. |
| 58 | + |
| 59 | +## Next Step |
| 60 | +emWin is a comprehensive library and GUI framework that has a lot of customizability, if you are interested in playing around more with it, you can find many different examples and widgets on the official website for [Segger® emWin](https://wiki.segger.com/Main_Page). The code on the website can easily be adapted into a sketch for the GIGA Display Shield. |
0 commit comments