Beginner Embedded GUI Project using LVGL and RT-Thread

A. Using SquareLine Studio

I. Sign up and register a free account at the SquareLine Studio.

II. Open the SquareLine Studio. In this phase, we assume that you already have SquareLine Studio installed. If you still need to, kindly follow the steps in this Google Document file in downloading and installing the SquareLine Studio.

III. Input your credentials and log in to your registered account.

IV. Once logged in, click the "Create -> Nuvoton -> NuMaker-HMI-M467" button to get started with your GUI project using SquareLine Studio. Configure the “Project Name” and the “Save Location” to your preference. Once done, click the “Create” button as shown in Figure 1.0 below.

Figure 1.0 SquareLine Studio Create Project

V. Design your GUI project using SquareLine Studio according to your preference. For example, feel free to drag two buttons into the screen as shown in Figure 1.1 below.

Figure 1.1 SquareLine Studio Screen and Buttons

VI. Once you are done with your design, export your design to the desired location.

Figure 1.2 SquareLine Studio Export UI

B. Using RT-Thread Studio IDE

I. Open the RT-Thread Studio.

Figure 1.3 RT-Thread Studio IDE

II. Click on the “File” tab on the upper left portion of the RT-Thread Studio then click on the “New -> RT-Thread Project”.

Figure 1.4 Create a New Project in RT-Thread Studio

III. Select “Base on Board”. On the board selection portion, select "HMI-Board" with the type set to "Example" and the example set to “hmi-board-lvgl”. Kindly fill up the project name according to your preference. And once done, click the finish button.

Figure 1.5 Create a New Project in RT-Thread Studio

IV. Open the folder of the exported SquareLine Studio Project folder and copy all the files there.

V. Create a folder named “UI” in the location “packages -> lv_music_demo-v0.3.3” of your project and paste all the files you copied from the previous procedure into the “ui folder” as shown in figure 1.6 below.

Figure 1.6 Create a New Folder in Your Project in RT-Thread Studio

VI. Configure the file “lv_demo_rtt_music.c ” located at the “packages -> lv_music_demo-v0.3.3” in figure 1.7 below. Add the “#include ui/ui.h” in the program line #6 and change the “void lv_demo_music()” function into the same code shown in Figures 1.8 and 1.9 below.

Figure 1.7 lv_demo_rtt_music.c location in Your Project in RT-Thread Studio

📷

Figure 1.8 add “#included ui/ui.h” in Your Project in RT-Thread Studio

Figure 1.9 the void lv_demo_music() in Your Project in RT-Thread Studio

VII. Compile and build the project using the “Build Button” shown in Figure 1.10 below. In this step, you should be able to successfully build your project without problems as shown in Figure 1.11 below.

📷

Figure 1.10 Build Button in RT-Thread Studio

Figure 1.11 Console Output in Building the Project in RT-Thread Studio

VIII. Click the "Flash Download" button in between the "Window" and "Help" tab or press "CTRL+ALT+D" of the RT-Thread IDE to upload the project into your HMI board. This could take a while.

Figure 1.12 Build Project in RT-Thread Studio

IX. Once the project is uploaded into the HMI board, your SquareLine Studio project will run on the HMI board even when you reset it as shown in Figure 1.13 below.

Figure 1.13 First Embedded GUI Project in HMI-Board