LVGL使用GUI Guider配置STM32界面详细笔记教程

0、说明

        接着前面几篇博客对LVGL的使用和介绍，这篇博客主要是使用和介绍快速配置LVGL图形界面编程的工具，GUI Guider。本文使用的工程代码，均是基于前几篇博客的基础上的，如需下载已配置好的LVGL-MCU工程环境，可通过如下链接进行跳转下载：

     LVGL移植到STM32 MCU平台详细经验笔记教程_lvgl适配-CSDN博客

   【免费】LVGL移植到STM32MCU平台通用程序源码_lvgl如何port到嵌入式资源-CSDN文库

    LVGL显示中文字体及其它语言文字详细笔记教程_lvgl 安装中文字库-CSDN博客

1、下载GUI Guider工具软件

        GUI Guider是NXP公司为LVGL开发的一个GUI设计工具，用户可以通过直接拖放控件来设计 LVGL的GUI页面，加速 GUI 的设计，并且可以导出与硬件平台无关的c语言、Python代码，非常简单方便的加入到项目中。

GUI Guider | NXP 半导体https://www.nxp.com.cn/design/design-center/software/development-software/gui-guider:GUI-GUIDER

进入GUI Guider官网，点击下载，选择对应开发平台的工具软件版本，并且安装GUI Guider应用程序。当前在NXP官网下载资料，需要注册账户登录。

2、GUI Guider工程配置

①、新建GUI Guider工程

        当前下载的为Gui-Guider-Setup-1.7.2-GA版本工具，支持LVGL的v7.10.1和v8.3.10两个版本。在本项目中使用的是v8.3版本。

②、选择模拟器作为目标设备

        根据需要进行选择设备，在本笔记教程中选用了模拟器作为设备模板

③、选择工程应用模板

根据需要进行选择，在本笔记教程中选择了空白的UI界面。

④、填写工程信息

        注意：在填写工程路径时，路径名中不能包含任何的空格，否则会报错

⑤、工程创建成功后操作主界面

2、GUI Guider图形界面编辑

①、创建容器

②、插入图片

        在图片插入后，剩余操作可以和上面的创建容器操作类似，设置图片的位置和大小等数据。

③、插入标签（文字）

        如果是显示汉字，需要选择为合适的字体，如思源宋体，如果字体选择不正确，会导致汉字显示异常。

        本教程设置字体为思源宋体，即SourceHanSerifSC_Regular

④、设置字体

        点击系统设置，在选择IDE，然后将默认字体修改为需要的字体，如图所示为修改字体为思源宋体。

⑤、插入线条

⑥、插入表格

        如需增加表格的行数或列数，点击属性内容右侧的加号按钮即可。

⑦、插入复选框

⑧、插入二维码

        选中二维码后，在属性下的文本中，输入文本数据，会自动转换生成对应二维码的图案。

⑨、插入按钮

⑩、事件设置

        在事件设置中，可以自定义事件触发操作代码，也可以直接进行加载屏幕或者其它操作。当是加载屏幕操作时，还可以设置屏幕切换动画。

⑪、代码导出

        在工具软件中的模拟器仿真运行无误后，点击工程-->代码导出，然后选择导出路径，即可将GUI Guider的界面程序代码导出到对应路径，进行使用或移植到其它平台操作。

3、STM32工程移植

①、源文件加入

        打开STM32的工程，新建GUIDER组，将GUI Guider工具导出程序（除了main.c外）全部加入到新建的GUIDER组目录下。

        打开GUI Guider导出的main.c文件，将main.c中的头文件，加入到工程main函数所在的头文件。

#include "../generated/gui_guider.h"
#include "../generated/events_init.h"

        并且MDK工程的main函数上方定义一个全局变量：

lv_ui guider_ui;

        在main函数中调用如下两个函数：

setup_ui(&guider_ui);
events_init(&guider_ui);

②、头文件加入

        将导出的工程中的所有包含.h头文件的路径，全部加入到MDK工程中。

③、解决编译报错

        提醒:因为不同用户，在GUI Guider的操作过程中，使用的对象不同，因此报错信息也并不都是一样的，请根据实际情况进行修改程序，解决编译报错问题。

        通过报错信息，可以看到，主要时报了两个头文件错误和一个程序未定义的错误。

        解决使用二维码未定义报错

        解决头文件报错

④、程序烧录效果