[ESP32S3 Study Notes] LVGL Development Import GUI-GUIDER Project

Series Article Directory

提示：这里可以添加系列文章的所有文章的目录，目录需要自己手动添加
For example: the use of pandas in Chapter 1 Introduction to Python Machine Learning

---

提示：写完文章后，目录可以自动生成，如何生成可参考右边的帮助文档

---

foreword

提示：这里可以添加本文要记录的大概内容：

First of all, thanks to Wireless_Link for the ESP32 tutorial, this article is based on the following tutorial to import GUI-GUIDER project. In this way, the subsequent UI development will become very simple, and there is no need to pay too much attention to the underlying interface of LVGL.

Reference tutorial:
https://wlink.blog.csdn.net/article/details/124137559.

Software download:
Gui-Guider-Setup-1.4.0-GA
Link: https://pan.baidu.com/s/1zsH5iZXSMK8E_92W-AAuEA
Extraction code: 6zmz

---

提示：以下是本篇文章正文内容，下面案例可供参考

1. Preliminary preparation

According to the reference tutorial, create a new sample Demo, and then add LVGL and LVGL_ESP32_DRIVERS. Add Examples according to the tutorial, and then configure the LVGL driver. First let the Music example run on your board. If the displayed color is wrong, you can choose the format change of the data and the color flip in the SPI configuration.
.

2. About GUI-GUIDER

It should be jointly launched by NXP and LVGL. Recently, NXP has also launched many low-cost solutions that can be used for display driver applications, such as the LPC54 series. How can it work with only hardware but no software? Seeing that LVGL is small and exquisite, the boss likes it very much, so he recruited it. ——The above are all guesswork. However, NXP has always paid more attention to the Chinese market, and the software it makes also has a Chinese model, which is very friendly.

1. Software installation

It should be noted here that in addition to installing the main program of Gui-Guider in the Windows environment, it is also necessary to configure the JAVA environment. After I installed it for the first time, the simulation was always unsuccessful, so I uninstalled Gui-Guider and reinstalled it again.

1. Get the OpenJDK source package from http://jdk.java.net/archive/.
2. Extract the zip file into a folder, for example, C:\Program Files\Java\. The
extraction creates a jdk-16 folder with a sub folder named bin. However, you may
require administrator privileges to extract the zip file to the location.
3. Set the PATH environment variable.
a. Select Control Panel.
b. Click System.
c. Select Advanced system settings.
d. Click the Advanced tab.
e. Click the Environment Variables button.
The Environment Variables dialog box appears.
f. Locate the PATH variable.
g. Click the Edit button.
h. Click the New button.
i. Add the location of the bin folder of the JDK installation. For example, C:
\WINDOWS\system32;C:\WINDOWS;” C:\Program Files\Java
\jdk-16\bin”.
4. Set a new system variable PATH as JAVA_HOME:
a. Under the System variables, click New.
The New System Variable dialog box appears.
b. Enter the Variable name as JAVA_HOME.
c. Enter the Variable value as the installation path of the JDK (without the bin
subfolder. For example, C:\WINDOWS\system32;C:\WINDOWS;” C:
\Program Files\Java\jdk-16”).
d. Click OK to save the changes.
e. Click OK to close the Environment Variables dialog box.
Your environment is set now.
5. Open the command prompt and type java -version and see if it prints the version
of the newly installed JDK.

2. Software use

After switching to Chinese, it is easier to get started.
1. Select the file and click New;
2. Select the LVGL version, here is V8.2.0;
3. Then select Simulator, if you are using the official NXP DEMO board, you can also directly go to your hardware board;
4. Then select the template, I use Empty (empty template) here, you can also choose MusicPlayer to experience it at the beginning;
5. Then select the color depth and resolution. Resolution can be defined by yourself.

3. Create an example of Gui-Guider Demo

Let's build our demo and make a GIF display. The resolution of my screen is 240*240. 1. Select the appropriate GIF animation, download it, try to keep the same resolution, no need to convert it again; 2.
Import GIF animation in GUI-Guider, resources;
3. Interface editing Page, drag the animation in the component to the page;
4. Click on the component, and set the position of the animation component in the right column;
5. On the bottom right picture, click to add the GIF animation in the resource.
Such a simple example is ready, then click the green triangle arrow, select the simulator type, and you can see the effect of the simulation.
Click the symbol to the right of the green arrow to generate code for the project.

4. The project generated by Gui-Guider

This is the directory generated by Gui-Guider.

1. custom and generated are the actual running code generated, and the .c converted from the image is also under this directory;
2. import is the imported font, the source file of the picture;
3. lib may be the system platform support library;
4. lvgl is the source code
5. lvgl-simulator contains some lvgl configuration and underlying hardware drivers
6. Neither sdk nor temp are quite relevant.
   In summary, only custom and generated are useful for us to move to the ESP32 project. (Import needs to see the original picture can be kept)

5. Import the project generated by Gui-Guider into the EPS32 project

It is not imported, it is copied to the components of the ESP32 project. Take care to delete unnecessary parts.
Below is the directory of the files I created. Create a Ui directory in components, and then copy the Gui-Guider project to this directory. Only the custom and generated directories are kept in the project.


After that, create CMakeLists.txt under the Ui directory, and you can copy it directly from the main directory.
Then change the content inside

set(UI_SOURCE_DIR ${
    
    CMAKE_CURRENT_LIST_DIR}/HelloWorld)

file(GLOB_RECURSE SOURCES ${
    
    UI_SOURCE_DIR}/custom/*.c ${UI_SOURCE_DIR}/generated/*.c ${UI_SOURCE_DIR}/generated/images/*.c)

set(include_dirs 
    ${UI_SOURCE_DIR}/custom
    ${UI_SOURCE_DIR}/generated
    ${UI_SOURCE_DIR}/generated/guider_customer_fonts
    ${UI_SOURCE_DIR}/generated/guider_fonts   
    ${CMAKE_CURRENT_LIST_DIR}/../lvgl
    ${CMAKE_CURRENT_LIST_DIR}/../lvgl/src/font  
    )
idf_component_register(SRCS ${SOURCES}
                    INCLUDE_DIRS ${include_dirs}
                    REQUIRES lvgl)

I don't understand the syntax of CMakeList.txt either. It's not the best, but it can be used.
For a brief analysis, CMakeList is used to indicate the source files and header files to be compiled by the project, that is, our .c and .h here. Of course there are other types. If there is no CMakeList or there is an error in CMakeList, then during the compilation process, it will prompt that the header file cannot be found, or it will prompt that some variables are missing, or errors caused by functions.

First create a UI_SOURCE_DIR variable pointing to our project directory. It is actually XXXX.\Ui\HelloWorld. The HelloWorld here can change with the name of the project directory.

set(UI_SOURCE_DIR ${
    
    CMAKE_CURRENT_LIST_DIR}/HelloWorld)

Include all .c files under .../custom .../generated and .../generated/images into the SOURCES variable.
This is not fixed, just add those that need to be used in the project. In addition, this instruction only traverses the .c files in the indicated directory, and does not include the .c files in the subdirectories. There are also some other grammars that can be supported, but this project is relatively simple and we can make do with it.

file(GLOB_RECURSE SOURCES ${
    
    UI_SOURCE_DIR}/custom/*.c ${UI_SOURCE_DIR}/generated/*.c ${UI_SOURCE_DIR}/generated/images/*.c)

This statement is to add the header file directory used by the project to the variable include_dirs. It should be noted that in addition to the files in the Gui-Guider project directory, several directories of lvgl components have been added. Because it was found that lvgl and other directories were deleted from the Gui-Guider project, when compiling, it was prompted that header files such as lvgl.h and front.h were not found. After trying several times, there was no good way, so I used a stupid way to directly include the directory

set(include_dirs 
    ${
    
    UI_SOURCE_DIR}/custom
    ${
    
    UI_SOURCE_DIR}/generated
    ${
    
    UI_SOURCE_DIR}/generated/guider_customer_fonts
    ${
    
    UI_SOURCE_DIR}/generated/guider_fonts   
    ${
    
    CMAKE_CURRENT_LIST_DIR}/../lvgl
    ${
    
    CMAKE_CURRENT_LIST_DIR}/../lvgl/src/font  
    )

After this is done. The project can be compiled and passed.

6. Add application

The rest is very simple, add the relevant code in hello_world_main.c.
add header file

 #include "gui_guider.h"
 #include "custom.h"

Define a global variable guider_ui

lv_ui guider_ui;

Replace the previous create_demo_application() with this code;

setup_ui(&guider_ui);

After compiling and running, the GIF animation can be displayed on the screen.

---

Summarize

提示：这里对文章进行总结：

There is still a lot that I don’t understand about CMakeList, and the understanding is not deep enough. Welcome everyone to guide and communicate.