【LVGL学习手札】（1）VSCode+GuiGuider搞定UI设计与调试_lvgl界面编辑器

LVGL学习手札

（1）VSCode+GuiGuider搞定UI设计与调试

1、引子

LVGL（Light and Versatile Graphics Library）

LVGL is the most popular free and open-source embedded graphics library to create beautiful UIs for any MCU, MPU and display type.

LVGL是最受欢迎的免费开源嵌入式图形库，可为任何MCU、MPU和显示器类型创建漂亮的UI。

GuiGuider

GUI Guider是恩智浦提供的用户友好型图形用户界面开发工具，可通过开源LVGL图形库快速开发高品质的显示。GUI Guider的拖放编辑器可以轻松利用LVGL的众多特性，如小部件、动画和样式来创建GUI，而只需少量代码或根本无需任何代码。

VSCode

大名鼎鼎，无需多言。

通过GuiGuider可以很方便的进行拖拽式UI设计，工程架构主要包括了界面代码（generated文件夹）和事务代码（custom文件夹），移植到最后的目标平台非常方便，是LVGL辅助开发利器。
GuiGuider自带模拟器，可以脱离目标平台完成先期开发工作，提高效率；然而并 未集成调试功能 ，事务代码开发调试困难。
还好，LVGL官方支持VSCode下的仿真环境，经过一小番折腾，配置好了CMakeList文件，顺利将GuiGuider与VSCode结合，实现UI设计与仿真调试。笔者完成的工作只是将GuiGuider和VSCode结合，方便UI设计与事务代码调试穿插迭代。
当然，LVGL在PC端的仿真环境包括多种，理论上均可实现类似需求（也有可能有大佬已经用上了更便捷的方法），不中意VSCode的同学也可参考笔者的思路尝试匹配自己喜欢IDE：

LVGL Simulator on PC

• Eclipse with SDL driver: Recommended on Linux and Mac
• CodeBlocks: Recommended on Windows
• VisualStudio: with SDL driver: For Windows
• VSCode with SDL driver: Recommended on Linux and Mac
• PlatformIO with SDL driver: Recommended on Linux and Mac

2、环境准备

VSCode

安装VSCode软件，参考Windows环境下模拟LittlevGL，配置好LVGL在VSCode下的运行环境

笔者验证时使用版本

• VSCode: 1.77.3
• GCC: 12.2.8

GuiGuider

下载并安装GuiGuider。

笔者验证时使用版本：1.5.1-GA

LVGL_GuiGuider_V8_SimEnv

下载并解压LVGL_GuiGuider_V8_VSCodeSimEnv

3、开发流程及使用步骤

开发流程主要包括三个部分：创建可调试UI工程、事务代码调试、迭代，大抵如下：

4、一个小例子

使用一个小例子介绍使用方法：

• UI为一个按钮和一个文本标签
• 按钮处理计数值，文本标签显示计数值
• 单击按钮计数值加一，长按按钮计数值自减。

GuiGuider创建UI工程

打开GuiGuider软件，点击 创建新项目

选择LVGL版本（请选择V8版本）

选择Simulator

选择EmptyUI，创建空工程

填写工程保存路径及工程名称，以及分辨率等其它信息;

创建完成后会在工程保存路径下生成一个与工程名同名的文件夹

编辑UI，生成代码

点击控件工具栏中按钮控件 Button 和文本标签控件 label，在UI上会生成一个按钮 btn_1 和一个文本标签 label_1

点击 生成代码 或者 模拟器（C） ，生成代码，代码主要包括：

• custom文件夹： 用户事务代码入口，每次更新工程不会覆盖
• generated文件夹： UI代码，每次更新工程都会覆盖重写

后期目标平台移植也主要使用这两个文件夹内容。

拷贝仿真环境文件

将仿真环境文件夹 LVGL_GuiGuider_V8_SimEnv 下所有内容拷贝到生成的工程文件夹下（本例为 ButtonCounter ）

VSCode打开工程文件夹

工程文件夹右键，VSCode打开；或者打开VSCode后，File->Open Folder ，选择工程文件夹。

打开工程后，VSCode顶部会弹出提示，选择GCC编译器

如果未弹出提示或因为其它操作提示框消除，可点击VSCode左下状态栏中 No Kit Selected 再次选择

状态栏主要的操作图标（图中黄色框标记）依次是 编译 、全部配置 、Debug 和 运行 ；当文件修改后，重新编译、Debug或者运行都将自动开始编译。在build文件夹中有缓存文件CMakeCache.txt记录上次编译情况，针对代码变化情况增量编译，因此第一次编译时间较长，后续调试时编译很快。

点击 运行 按钮，待编译完成后，正常情况下就会出现刚才设计的界面：

这个时候点击按钮是没有任何功能的，需要添加事务代码，实现按钮计数的功能。

编写事务代码并调试

在custom.c中添加按键回调函数btn_cb，在custom_init函数中添加回调函数绑定代码。

   //按键回调函数
   static void btn_cb(lv_event_t* e)
   {
      static int cnt = 0; //静态计数值
      lv_event_code_t code = lv_event_get_code(e);    //获取按键值
      switch (code)
      {
      case LV_EVENT_SHORT_CLICKED:    //单击加计数
         cnt++;  
         break;
      case LV_EVENT_LONG_PRESSED:
      case LV_EVENT_LONG_PRESSED_REPEAT:  //长按减计数
         cnt--;
         break;
      default:
         break;
      }
      lv_label_set_text_fmt(guider_ui.screen_label_1, "%d", cnt); //设置文本标签
   }

   void custom_init(lv_ui *ui)
   {
      /* Add your codes here */
      lv_obj_add_event_cb(guider_ui.screen_btn_1, btn_cb, LV_EVENT_ALL, NULL);    //绑定回调函数
   }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

再次点击 运行 按钮，新生成的界面就具备交互功能

在 btn_cb 函数中，行号左侧单击，添加断点（小红点），点击 Debug 按钮，进入调试模式，生成的界面里点击按钮，进入断点，此时可以单步运行、查看变量等

开发迭代

现在增加一个功能：

显示按键状态

GuiGuider打开ButtonCounter工程，UI添加一个新文本标签 label_2

设置标签背景颜色白色、字体黑色、左对齐

点击快捷工具栏中 生成代码 ，更新UI代码
回到VSCode，在custom.c中增加label_2相关代码（行号10、行号14）

//按键回调函数
static void btn_cb(lv_event_t* e)
{
    static int cnt = 0; //静态计数值
    lv_event_code_t code = lv_event_get_code(e);    //获取按键值
    switch (code)
    {
    case LV_EVENT_SHORT_CLICKED:    //单击加计数
        cnt++;  
        lv_label_set_text_fmt(guider_ui.screen_label_2, "Button Status: %s","CLICKED"); //设置文本标签
        break;
    case LV_EVENT_LONG_PRESSED:
    case LV_EVENT_LONG_PRESSED_REPEAT:  //长按减计数
        lv_label_set_text_fmt(guider_ui.screen_label_2, "Button Status: %s", "LONG PRESSED"); //设置文本标签
        cnt--;
        break;
    default:
        break;
    }
    lv_label_set_text_fmt(guider_ui.screen_label_1, "%d", cnt); //设置文本标签
}

void custom_init(lv_ui *ui)
{
    /* Add your codes here */
    lv_obj_add_event_cb(guider_ui.screen_btn_1, btn_cb, LV_EVENT_ALL, NULL);    //绑定回调函数
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

点击 运行 按钮，点击按钮，显示按键状态

5、Tips

• 缓存：

1. 工程更换路径后，编译时提示错误，路径与缓存路径不一致，可删除 build 文件夹下CMakeCache.txt文件重新编译
2. 出现缓存无法载入错误，可以删除 build 文件夹，重新拷贝 LVGL_GuiGuider_V8_SimEnv/build 文件夹

• 输出文件权限：
  若未关闭程序界面，点击 Debug 或者 运行，会提示输出文件权限错误：

• LVGL版本： 当前只支持V8版本，测试时为V8.3.2

• 生成代码： 迭代UI后，需要重新生成代码以更新

6、参考与鸣谢

• simulateLiam： LVGL学习笔记|Windows环境下模拟LittlevGL：VSCode+MSYS2+Cmake搭建模拟环境

最后，笔者精力有限，未能作太多工程测试，可能有未趟到的坑，可留言告知，一同完善；若有V7版本需求，也可共同努力实现O(∩_∩)O