（提示：本篇编辑状态中，完成了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.net积分，可以尝试在csdn.net下载。
下面是最近更新的安装包链接，1积分，双赢 ，你懂~~
Gui Guider v1.7.1 -- csdn下载链接 (更新: 2024-04-07)
Gui Guider v1.7.0 -- csdn下载链接
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).
运行结果如下：
