设为首页收藏本站
开启辅助访问

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

 您所在的位置：网站首页 › 嵌入式Gui库 › 【LVGL学习手札】（1）VSCode+GuiGuider搞定UI设计与调试

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

2023-12-19 13:03| 来源: 网络整理| 查看: 265

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 MacCodeBlocks: Recommended on WindowsVisualStudio: with SDL driver: For WindowsVSCode with SDL driver: Recommended on Linux and MacPlatformIO with SDL driver: Recommended on Linux and Mac 2、环境准备 VSCode

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

笔者验证时使用版本

VSCode: 1.77.3GCC: 12.2.8 GuiGuider

下载并安装GuiGuider。

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

LVGL_GuiGuider_V8_SimEnv

下载并解压LVGL_GuiGuider_V8_VSCodeSimEnv

3、开发流程及使用步骤

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

YES NO 创建UI工程GuiGuider 拷贝仿真文件夹LVGL_GuiGuider_V8_SimEnv 编写事务代码VSCode 调试事务代码VSCode 迭代UI设计GuiGuider 完成开发? 移植目标平台 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); //绑定回调函数 }

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

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

输出文件权限： 若未关闭程序界面，点击 Debug 或者 运行，会提示输出文件权限错误： 在这里插入图片描述

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

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

6、参考与鸣谢 simulateLiam： LVGL学习笔记|Windows环境下模拟LittlevGL：VSCode+MSYS2+Cmake搭建模拟环境

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



【本文地址】


今日新闻

推荐新闻

CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3