系列文章目录

提示：这里可以添加系列文章的所有文章的目录，目录需要自己手动添加
例如：第一章 Python 机器学习入门之pandas的使用

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

文章目录

系列文章目录
前言
一、前期准备
二、关于GUI-GUIDER
- 1.软件安装
- 2.软件使用
三、建立Gui-Guider Demo示例
四、Gui-Guider 生成的工程
五、将Gui-Guider 生成的工程导入到EPS32工程
六、添加应用
总结

前言

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

首先感谢Wireless_Link的ESP32教程，本文是在其以下教程基础上导入GUI-GUIDER的工程。这样后面的UI开发会变得非常简单，也无需太关注LVGL底层的接口。

参考教程：
https://wlink.blog.csdn.net/article/details/124137559。

软件下载：
Gui-Guider-Setup-1.4.0-GA
链接：https://pan.baidu.com/s/1zsH5iZXSMK8E_92W-AAuEA
提取码：6zmz

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

一、前期准备

按照参考教程，新建一个示例Demo，然后添加LVGL和LVGL_ESP32_DRIVERS。按照教程中的添加Examples，然后配置好LVGL的驱动。首先让Music这个示例在你的板子上跑起来。如果出现显示的颜色不对，可以选择数据的格式变化和SPI配置里面的颜色翻转。
. 在这里插入图片描述

二、关于GUI-GUIDER

应该是NXP和LVGL合作推出的，最近NXP也推出了很多可以做显示驱动应用的低成本方案，如LPC54系列。光有硬件没有软件咋行呢，一看LVGL小巧玲珑，大佬甚是喜欢，于是就是拉拢了过来。——以上都是瞎猜的。不过NXP对于中国市场一直以来相对重视一点，做的软件也是有中文模式，很是友好。

1.软件安装

这里需要注意的是，在Windows环境除了要安装Gui-Guider主程序外，还要配置JAVA的环境。我第一次安装之后模拟老是不成功，把Gui-Guider卸载了重新安装一遍也就好了。

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.软件使用

在这里插入图片描述
切换到中文以后，也是比较容易上手了。
1.选择文件，点击新建；
2.选择LVGL版本，这里用的是V8.2.0；
3.之后选择Simulator，如果你是用NXP官方的DEMO板的话，也可以直接到你的硬件板子；
4.之后选择模板，我这里用的是Empty（空模板），一开始你也可以选择MusicPlayer那个体验一下；
5.然后选择色彩深度，分辨率。分辨率可以自己进行定义。

三、建立Gui-Guider Demo示例

下面构建我们的Demo，做一个GIF的显示。我的屏幕的分辨率是240*240。1、选择合适的GIF动画，下载下来，尽量分辨率一致，不需要再转换；
2、再GUI-Guider，资源中，导入GIF动画；
3、界面编辑页面，将组件中的动画拖拽到页面中；
4、点击组件，在右边栏中，设置好动画组件的位置；
5、右下方图片，点击添加资源中的GIF动画。
这样简单的一个示例就做好了，然后点击绿色三角箭头，选择模拟器类型，就可以看到模拟的效果了。
点击绿色箭头右边的符号，就可以将工程生成代码了。

四、Gui-Guider 生成的工程

在这里插入图片描述
这是Gui-Guider生成的目录。

custom和generated是生成的实际运行代码，包含图片转换成的.c也在这个目录下面；
import是导入的字体，图片的源文件；
lib可能是系统平台支持库；
lvgl就是源代码了
lvgl-simulator 包含一些lvgl的配置和底层硬件的驱动
sdk和temp都不太相关。
综上，对于我们移到ESP32工程有用的，就只有custom和generated 。（import 需要看原图片的可以留着）

五、将Gui-Guider 生成的工程导入到EPS32工程

算不上导入，就是复制到ESP32工程的components下面。注意将不需要的部分删掉。
下面是我所建的文件目录。在components里面建了一个Ui目录，然后将Gui-Guider的工程复制到该目录下，工程里面只保留custom和generated两个目录。
在这里插入图片描述

之后在Ui目录下面创建CMakeLists.txt，可以将main目录下的直接复制过去。
然后更改里面的内容

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)

关于CMakeList.txt的语法我也不懂，算是现学现用，肯定不是最佳的，但是凑合能用。
简单分析一下吧，CMakeList用来指示工程要编译的源文件和头文件，也就是我们这里的.c和.h。当然也还有其他类型的。如果没有CMakeList或者CMakeList出错，那么在编译的过程中就会提示找不到头文件之类的错误，或者提示缺少某些变量、或者函数导致的错误。

首先创建一个UI_SOURCE_DIR 变量，指向我们的工程目录。实际是XXXX.\Ui\HelloWorld 。这里的HelloWorld可以随着工程目录的名称进行变化。

set(UI_SOURCE_DIR ${
    
    CMAKE_CURRENT_LIST_DIR}/HelloWorld)

将……/custom ……/generated 和 ……/generated/images下所有的.c文件包含到SOURCES 变量中。
这个也不是固定的，看工程中需要用到那些就添加那些。另外这条指令只遍历指示目录中的.c文件，不包含子目录中的.c文件。也有一些别的语法可以支持，不过这个工程比较简单就凑合一下了。

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

这条语句是将工程所用到的头文件目录添加到变量include_dirs 中。需要注意的是除了Gui-Guider工程目录下的文件，还添加了几个lvgl组件的目录。因为发现从Gui-Guider工程中删掉lvgl和其他目录下，编译的时候提示没有找到lvgl.h和front.h等头文件。尝试过几次没有什么好办法，就用了笨办法，直接把目录包含进来

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  
    )

这样处理完之后。项目就可以编译通过了。

六、添加应用

剩下的就很简单了，在hello_world_main.c中添加相关的代码。
添加头文件

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

定义一个全局变量 guider_ui

lv_ui guider_ui;

用这段代码代替之前的 create_demo_application();

setup_ui(&guider_ui);

之后编译运行就可以在屏幕上显示出GIF动画了。

总结

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

关于CMakeList还有很多不懂得，理解也不够深入，欢迎大家指导交流。

【ESP32S3学习笔记】LVGL开发之导入GUI-GUIDER工程