ESP32学习笔记 - ESP32使用GUI-Guider制作LVGL图形界面

上一篇文章讲述了如何移植嵌入式图形界面库LVGL到ESP32芯片平台，并成功在ESP32上面运行LVGL的官方demo，上一篇文章请参考以下链接。

截止至2021年11 月，LVGL官方尚未推出PC端的GUI设计工具，因此，在大多数情况下使用LVGL开发图形界面的时候，都是用代码的方式进行界面布局设计的，而不是使用拖曳控件的方式进行设计，这样会让工程师的工作量增加不少。

有痛点就有工程师想办法解决，恩智浦（NXP）为了方便广大工程师开发LVGL界面应用，推出了基于LVGL的拖曳式GUI编程辅助工具，GUI Guider，这个工具的链接地址，如下所示。

使用GUI Guider，可以通过拖放控件的方式进行LVGL的图形界面设计，并且设计完成后可以在PC上仿真运行，确认没问题后，再生成C语言代码，然后移植到自己的芯片平台。

关于GUI Guider的使用方法，可以查看该软件的使用手册，【Help】-->【User Guide】

以下是ESP32使用GUI Guider制作LVGL图形界面的具体过程。

1、安装GUI Guider成功后，双击运行软件，界面如下图所示。

①：LVGL界面工程的名称，可以自定义设置。

②：工程保存目录，可以自定义设置。

③：界面模板，可以选择仿真方式或者NXP推出的开发板。（针对ESP32选择仿真方式）

④：应用模板，里面提供了一些LVGL演示demo。（针对ESP32选择空白demo）

⑤：颜色深度，目前只有16位颜色深度。

⑥：屏幕尺寸，选择用户自定义。

⑦：自定义屏幕尺寸大小，目前我使用的是320x240的TFT-LCD屏幕。

⑧：创建工程按钮，点击即可一键创建工程。

2、创建工程后，界面如下图所示，整个软件界面主要分为控件界面，UI设计界面，控件属性界面，开发者可以拖放控件界面里面的控件到设计界面，进行UI设计，然后在属性界面修改每个界面的属性。

3、界面设计完成后，可以点击软件上面的【运行模拟器】按钮，在电脑上进行仿真运行，确认设计效果。

4、仿真运行确认界面设计无误后，可以点击软件上面的【生成代码】按钮，生成LVGL界面的C语言代码，软件自动生成的代码，保存在generated目录下，如下图所示。

5、把自动生成的generated目录，复制到上一篇文章移植好的lv_port_esp32工程里面，放在components文件夹，由于自动生成的代码没有CMakeLists.txt文件，而我们的编译环境需要依赖这个文件，因此需要手动创建一个，CMakeLists.txt内容如下图所示。

6、然后再修改main文件夹里面的CMakeLists.txt，把generated文件夹添加到编译环境里面，如下图所示。

7、因为在设计界面的时候，我们使用了.jpg图像格式的图片，而使用GUI Guider解码出来的图片格式直接在工程上面使用的时候，显示会出现问题。因此，我们需要使用LVGL官方提供的jpg解码库进行图片解码，解码库的下载地址如下。

8、把下载好的解码库，复制到lv_port_esp32/components文件夹里面，同时修改main文件夹里面的CMakeLists.txt文件，让其参与编译，过程如上面所述，此处不再重复描述。

9、在lv_lib_split_jpg/scripts路径下，有一个Python脚本jpg_to_sjpg.py，可以使用该脚本来生成jpg文件的C语言数组，把要转换的jpg图片放在该目录下，执行以下命令，即可生成jpg文件的C语言数组，如下图所示。

10、把上一步生成的C语言数组文件剪切（注意，是剪切，不要复制，不然工程会有两个同名的文件）到generated/images目录下，然后修改setup_scr_screen.c里面的关于图片初始化的代码，修改的内容如下图所示。

11、修改main.c文件，把LVGL的默认demo函数屏蔽，然后加入GUI Guider相关的函数初始化，以及添加jpeg解码库的初始化函数，具体请参考实现代码，如下图所示。

12、完成以上移植工作后，即可编译工程，并下载到开发板上运行，运行界面如下图所示。

13、关于GUI Guider生成的界面源码，目前还做不到直接移植无错误运行，把GUI Guider生成的C语言代码移植到ESP32工程里面，需要根据实际情况进行修改和适配，该软件可以辅助我们设计LVGL的图形界面，但最终还是需要开发者熟悉LVGL的源码接口，并且基于源代码去设计图形界面。

14、目前LVGL已经推出了官方的GUI界面设计器EdgeLine，该软件推出了Beta0.3版本供开发者尝鲜使用，下载链接如下：

对比使用后，个人觉得还是NXP推出的GUI Guider比较适合使用，期待LVGL官方推出完善的正式版的GUI界面设计工具。

版权声明：本文为CSDN博主「工程师进阶笔记」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/wenjs0620/article/details/121404964

打赏作者