@21小跑堂 #申请原创#
LVGL是一个轻量级通用型图形库，可以为任何MCU、MPU和显示器类型创建漂亮的UI，不过纯代码设计界面还是比较吃力的，这时候就要用到支持LVGL的界面编辑器了。
GUI Guider是恩智浦提供的用户友好型图形用户界面开发工具，可通过开源LVGL图形库快速开发高品质的显示。GUI Guider的拖放编辑器可以轻松利用LVGL的众多特性，如小部件、动画和样式来创建GUI，而只需少量代码或根本无需任何代码。 自带模拟器可以快速预览并验证交互逻辑。
下载地址：https://www.nxp.com.cn/design/design-center/software/development-software/gui-guider:GUI-GUIDER
下载需要登录恩智浦账号，目前最新版本是1.9.1支持LVGL9.2.1和LVGL8.3.10，如果有LVGL7的需求可以下载 1.7.2支持的版本是LVGL7.10.1，这是最后一版支持LVGL7的
安装后打开界面如图
软件本身是支持中文的，如果显示的是英文可以在创建一个工程后在右上角这里切换为中文
点击创建新项目会先弹出来一个LVGL版本选择窗口
点击下一步会跳出来设备模板选择界面
这里选择Simulator就行，其他的都是恩智浦的开发板，选好后点击下一步会跳出应用模板选择界面，这里恩智浦提供了很多的模板，方便用户快速创建应用
选择空模板后点击下一步，跳出工程配置界面，可以配置颜色深度和屏幕分辨率，修改与自己的LVGL工程设置一致
填好工程名字后点击创建，之后就能看到可视化的UI编辑界面
左边这一栏是控件选择栏，点击最下面那个4个箭头的图标可以展开
先点击一下图片这个控件，在屏幕上放一个图片作为背景
选中图片控件后在右边这里可以修改它的属性
修改坐标和大小让它铺满屏幕，然后点红框这里选择一张图片，注意图片名称不要有除数字字母外的特殊字符
接下来放一个开关和一个滑块到屏幕上，最终要实现的效果是用开关控制LED的亮灭，用滑块控制LED亮度
为开关和滑块添加事件，选中开关后点击左上角这个手指图标
选择ValueChanged
选择sw_1
勾选customer_code和自定义
对滑块也做同样的操作，之后设成代码时就会自动生成相应事件的处理代码框架，都做好后可以点击第一个红框处生成代码，或者点第二个红框在模拟器中预览，比较复杂的交互界面建议预览看到效果后再添加到自己的LGVL工程中
生成代码后打开工程文件夹，这里custom和generated是我们需要放到自己的LVGL工程里的
打开已经移植好的LVGL工程，把上面那两个文件夹放进去
打开MDK把两个文件夹中的.c文件添加进去，并且在头文件路径中也加进去
接下来打开events_init.c，在开关和滑块的事件处理中加入控制LED亮度的代码
- extern void RedLED_On(uint8_t on);
- extern void SetRedLEDLightness(uint16_t l);
- static void screen_sw_1_event_handler (lv_event_t *e)
- {
- lv_event_code_t code = lv_event_get_code(e);
- switch (code) {
- case LV_EVENT_VALUE_CHANGED:
- {
- lv_obj_t * status_obj = lv_event_get_target(e);
- int status = lv_obj_has_state(status_obj, LV_STATE_CHECKED) ? 1 : 0;
- RedLED_On(status);
- break;
- }
- default:
- break;
- }
- }
- static void screen_slider_1_event_handler (lv_event_t *e)
- {
- lv_event_code_t code = lv_event_get_code(e);
- switch (code) {
- case LV_EVENT_VALUE_CHANGED:
- {
- SetRedLEDLightness(lv_slider_get_value(guider_ui.screen_slider_1)*10);
- lv_obj_add_state(guider_ui.screen_sw_1,LV_STATE_CHECKED);
- break;
- }
- default:
- break;
- }
- }
- lv_ui guider_ui;
- int main(void)
- {
- ……
- lv_init();
- lv_port_disp_init();
- lv_port_indev_init();
- setup_ui(&guider_ui);
- events_init(&guider_ui);
- while (1)
- {
- ……
- }
- }
GUI Guider是一个十分好用的LVGL界面开发工具，以上只是简单介绍了一下使用方法，有兴趣的可以自己探索一下
| 
楼主
