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;}}在main.c中LVGL初始化后加入guider_ui初始化代码复制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界面开发工具以上只是简单介绍了一下使用方法有兴趣的可以自己探索一下。---------------------作者yuyy1989链接https://bbs.21ic.com/icview-3477284-1-1.html?_dsignd2fd3d1b来源21ic.com此文章已获得原创/原创奖标签著作权归21ic所有任何人未经允许禁止转载。