【LVGL学习手札】（1）VSCode+GuiGuider搞定UI设计与调试

最新推荐文章于 2024-07-25 21:04:52 发布

coolouba

最新推荐文章于 2024-07-25 21:04:52 发布

阅读量1.4w

点赞数 27

分类专栏： LVGL学习手札文章标签： vscode ui

本文链接：https://blog.csdn.net/coolouba/article/details/130459069

版权

LVGL学习手札专栏收录该内容

1 篇文章 1 订阅

订阅专栏

文章介绍了如何使用LVGL图形库配合GuiGuider在VSCode环境下进行UI设计与调试。通过GuiGuider的拖拽式编辑器创建UI，然后在VSCode中配置CMakeList文件，实现与GuiGuider的结合，从而进行代码调试。作者提供了环境准备、开发流程及步骤，包括创建UI工程、编写事务代码、调试和移植到目标平台的过程。此外，还提供了一个简单的按钮计数器例子来展示使用方法。

摘要由CSDN通过智能技术生成

Alt

LVGL学习手札

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

笔者：Coolouba Alt

根植开源，学无止境

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);    //绑定回调函数
   }

再次点击运行按钮，新生成的界面就具备交互功能
在这里插入图片描述

在 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);    //绑定回调函数
}

点击运行按钮，点击按钮，显示按键状态
在这里插入图片描述