LVGL可视化设计-Gui Guider

（提示：本篇编辑状态中，完成了70%左右，争取4-8前完成)

一、Gui Guider 概述

• 免费！免费！免费！
• 支持 LVGL v7、 v8.3
• 很方便的：安装、使用  (另一种主流的visual studio模拟，省心程度完全无法相比)
• 很方便的：界面可视化设计（各种控件已自带多种美化效果供选择）
• 很方便的：事件添加（注意：先不要在事件里写执行代码，可以用注释行代替）
• 很方便的：中文显示（选择一下字体即可，完全无需操心转换的问题）
• 很方便的：代码移植（一两分钟的事） 

---

二、下载 Gui Guider

1、网址

GUI Guider 下载链接：

http://www.nxp.com.cn/design/software/development-software/gui-guider:GUI-GUIDER

2、选择版本

然后....
你会发现，网页相当的卡顿，卡顿中发现还需要进行注册......

直接关闭网页吧！安装包已上传到csdn！能减少你痛苦，小编很开心（为了赚积分~）。

Gui Guider v1.7.0 -- csdn下载链接

当然，如果你需要下载更新的版本（2024-03最新版本: v1.7.0)，还是需要经历上述卡顿！

3、安装

安装过程比较简单。注意：

• 安装路径不能带有非ASCII码表中的字符，如中文等。
• 安装路径不宜太深。

---

三、新建 Gui Guider 工程

1、打开Gui Guider，创建一个新工程

2、选择LVGL版本

2、 选择开发板的模板：模拟器

3、选择应用的模板：空白UI

4、设置工程名称、显示屏参数

5、进入到编辑界面，右上角，可以修改软件的主题

6、还可以选择语言

7、尝试添加控件

8、点击控件栏下方的四方框，能展开全部控件

9、为控件选择更美观的效果

9、运行模拟效果

点击右上角的"绿色三角形"，选择“C"作为生成的代码。

然后，会有一个弹窗：

点击确认后，就会开始生成代码，第一次生成的，时间会比较长，大约30秒左右，耐心等待即可。

代码生成完成后，会自动运行效果：

至此，示范工程先完成简单的效果，保存一下。

---

四、控件事件、响应

这里以按钮的单击事件添加、编写响应代码，作为示例。

1、右击控件 > Add Event

2、选择事件类型

• 选择：Clicked (单击)

3、事件添加方式 

• 自定义代码 > 自定义 > C

4、编写代码

5、如何再次编辑事件代码

当上面第4步，点击保存后，想再次编辑本控件的事件代码：

右击控件 > Add Event > 弹出窗口的右侧，点击相关代码尾部的编辑图标，即可再次编辑。

6、如何查看完整的事件代码

运行一次模拟器，刚才编辑的事件代码，才会生成到工程的 c 文件中。

另一种方式，点击模拟器旁边的浅蓝色按钮，生成代码而不运行模拟，能节省不少时间哦！

点击左上角的 "代码编辑" ，可以切换到代码编辑页面。

找到：events_init.c，双击打开：控件的事件代码，都可以在找到、查看。

注意 1：

虽然这个页面叫：“代码编辑”，但是无法在这里进行代码编辑的。

想再次编辑事件代码，必须通过上面 步骤5 的方法。

注意 2：

编写代码时，不要使用这个Guider以外的代码;

如: #include "bsp_UART.h", 或者：LCD_DrapPoint(12, 50, BLACK);

也不要写任何运行代码，如：C = A + B;

这些，都会在重新生成代码时，产生错误。

可以先预留注释替代行，等后面把Guider工程移植到STM32工程后，在Keil里面进行补充。

生成代码后，是这个样子的：

---

五、移植到STM32工程

1、 打开之前已移植好LVGL的 STM32 工程。

• 保留LVGL初始化的3行代码;
• 删除之前的控件测试代码;
• 编译一次，确保已: 0 Error(s);

2、在STM32工程目录的文件夹 LVGL 里，新建文件夹：apps， 用来存放用户自己的界面文件。

也可以使用自己喜欢的名称。

完成后，LVGL文件夹，是这个样子的：

3、在apps文件夹里，新建文件夹 guiderApp; 当然，也可以使用自己喜欢的名称。

4、打开 Gui Guider工程，把文件夹 custom, 和 generated, 复制到：STM32工程 / LVGL /  apps / guiderApp。

完成后，LVGL / apps / myGuider 文件夹，是这个样子的：

 

5、进入到 Keil 工程。 新建Ground: myGuider

6、为 myGuider添加文件: 文件类型选择: All files(*.*),  才能显示h文件。

7、添加 LVGL / apps / myGuider 下所有子文件夹的： c和h文件，不包括mk文件。

注意1：一定要添加generated文件夹里那几个子文件夹里面的c、h文件。

注意2：记得点OK，才能保存。直接右上角叉掉窗口，是取消操作，不会保存。

完成后，是这个样子的：

8、添加头文件路径

需要添加三个头文件路径：

• LVGL / apps / myGuider / custom
• LVGL / apps / myGuider / generated
• LVGL / apps / myGuider / generated / guider_customer_fonts

步骤、操作如下：

9、编译一次，如果添加正确：0 Error(s);

如果编译有错，多是头文件路径添加这一步出错了，细心再检查、操作一遍。

10、在main.c中，添加Gui Guider的头文件引用、声明变量

• #include "gui_guider.h"           // Gui Guider 生成的界面和控件的声明
• #include "events_init.h"          // Gui Guider 生成的初始化事件、回调函数
• lv_ui  guider_ui;                     // 用于整个用户界面UI的状态和管理 

完成后，是这个样子的：

11、初始化Gui Guider生成的UI、事件

main.c中，在LVGL的初始化之后，添加：

• setup_ui(&guider_ui);           // 初始化 Gui Guider 生成的界面
• events_init(&guider_ui);       // 初始化 Gui Guider 生成的事件

完成后，是这个样子的：

12、编译、烧录

至此，已完成移植、初始化了。

编译吧，如果操作正常，编译后是：0 Error(s).

运行结果如下：

---

六、编译事件回调函数