【每周分享】使用GUI Guider制作LVGL应用界面

@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;

        }

}

在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界面开发工具，以上只是简单介绍了一下使用方法，有兴趣的可以自己探索一下