GUI Guider 与 Visual Studio 模拟器助力 LVGL 开发

关键字 :NXPLVGL

一、LVGL 简介

1、什么是 LVGL

LVGL(Light and Versatile Embedded Graphics Library),官方介绍这是一款强大和易使用的嵌入式 GUI 库有着许多小部件,具有先进精美的视觉效果和消耗资源、小内存需求低、可移植度高等特点。

LVGL GUI 库全库采用纯 c语言开发,LVGL GUI 库更新速度非常迅速,目前已经是 V8.0 版,大版本之间功能相差还是很大的,由于精致的界面吸引众多开发者,官方资料也逐渐丰富起来。

  • LVGL 的特点
  • 强大的构建模块:按钮,图表,列表,滑块,图像等。
  • 高级图形引擎:动画、抗锯齿、不透明度、平滑滚动、混合模式等
  • 支持各种输入设备:触摸屏、鼠标、键盘、编码器、按钮等。
  • 支持多个显示
  • Micropython Binding在Micropython 中公开 LVGL API
  • 可在 PC 上无需嵌入式硬件基于模拟器开发


二、GUI Guider界面开发工具

1、什么是 GUI Guider ?

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

可在模拟环境中运行应用或将其导出到目标项目。可以很轻松地将 GUI Guider生成的代码添加到 MCUXpresso 项目中,从而加速开发过程,并允许无缝地将嵌入式用户界面添加到应用中。

 
2、GUI Guider SDK

NXP 已经将 LVGL 集成到 MCUXpresso SDK 包中,允许轻松评估和迁移到您的产品设计中。LVGL 项目,它完全配置了 LVGL(如果有模块,还支持 PXP),不需要额外的集成工作。


3、创建 GUI Guider LVGL 工程

打开 MCUXpresso,文件 -> 新建 -> Import SDK Examples

创建 littlevgl_examples -> littlevgl_guider_cm7 工程



4、GUI Guider 环境搭建

NXP GUI Guider :

     https://www.nxp.com/design/software/development-software/gui-guider:GUI-GUIDER?tab=Design_Tools_Tab

 

4.1、打开官方 GUI Guider 下载链接,下载 GUI Guider v1.1.0 Installer (Windows 10)



4.2、安装下载的程序,安装完成后运行 Gui-Guider,PROJECT DIRECTORY 选择创建的 GUI Guider LVGL 工程路径



4.3、BOARD TEMPLATES 开发板平台选择 i.MX RT 系列的 MIMXRT1176xxxx



4.4、Gui-Guider 界面

左边为组件窗口,可通过拖放的方式就能轻松设计 GUI 画面,可以通过代码窗口查看生成的代码,右上角包含生成代码、模拟器功能(画布过大时存在屏幕无法显示完全的情况),属性设置控件的细节功能,事件添加控件触发的回调函数,系统设置窗口配置图形库刷新率、使用加速引擎等设置


4.5 点击右上角 -> 生成代码,日志中打印成功 Log。回到 MCUXpresso 工程中,可以看到新生成的 gui_guider_demo 文件夹在工程中,但并没有被启用。




4.6 右键 gui_guider_demo -> Resource Configurations -> Exclude from Build -> 全部不选

同样的方法,右键选择 generated 和 custom -> Resource Configurations -> Exclude from Build -> 全部选中,禁用 generated

同样的方法,右键 gui_guider_demo 中的 deploy、import、lvgl、lvgl-simulator、temp -> Resource Configurations -> Exclude from Build -> 全部选中禁用。
如下图所示:



4.7 右键 gui_guider_demo -> 属性 -> C/C++ Build -> Settings -> Include -> 右上角添加 -> Workspace -> 添加 -> 应用


4.8 这样就搭建起了 gui-guider 界面开发工具与 MCUXpresso 联调的工程。





三、搭建 Visual Studio LVGL 模拟器

1、LVGL 模拟器简介

LVGL 可运行在 PC 上的模拟器,即没有任何开发板,在 PC 上模拟以下优点编写代码易于验证可在 PC 上直观快速地看到结果,目前任何 Windows、Linux 或 OSX PC 平台都支持运行PC模拟器,可移植性可以在使用嵌入式硬件时轻松地移植。


2、选择模拟器平台

随着 LVGL 的认知度越来越高,目前 LVGL 已可支持多个 IDE 平台搭建模拟器环境如 :

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

 

官方提示:如果你使用的是 Windows,通常最好使用 Visual Studio 或 CodeBlocks 项目。因为他们在不需要额外的步骤。

笔者在本文中介绍并搭建的模拟器平台为基于 VisualStudio 的模拟器。


3、模拟器资源下载

LVGL 官网 :https://lvgl.io/

LVGL 资源 :https://github.com/lvgl

LVGL PC Simulator using Visual Studio :https://github.com/lvgl/lv_sim_visual_studio

 

3.1 、打开 MCUXpresso,工程 gui_guider_demo -> littlevgl -> lvgl.h 可以看到目前 SDK 中 LVGL 版本为 7.10.1,目前官网已经更新到 8.0 以上版本。



3.2、 所以要选取与 SDK 相近版本的模拟器工程,并将工程中红框内标蓝工程相应版本补全,由于 LVGL GUI  库更新速度非常迅速,所以采用这种分开维护的方式。

3.3、模拟器运行

在 Visual Studio 中打开 LVGL.Simulator.sln 方案文件。设置 LVGL,单击顶部工具栏中的“本地 Windows 调试器”按钮。包含的项目将被构建并运行。模拟器工程中给出了很多 LVGL demo,供大家使用


4、SDK 工程移植

4.1、在工程 lv_sim_visual_studio-7.1.0\visual_studio_2017_sdl\lv_examples\src\ 下创建 lv_demoe_test 文件夹,并添加 SDK 工程中 \gui_guider_demo\generated 下的



4.2、在工程 lv_sim_visual_studio-7.1.0 -> main.c 文件添加头文件

#include "lv_examples/src/lv_demoe_test/gui_guider.h"

添加文件至 lv_sim_visual_studio-7.1.0 工程


4.3、在工程 lv_sim_visual_studio-7.1.0 -> lvconf.h 文件修改模拟器屏幕大小

/* Maximal horizontal and vertical resolution to support by the library.*/

#define LV_HOR_RES_MAX          (720)

#define LV_VER_RES_MAX          (1280)

 

4.4、这样就搭建起了 LVGL visual_studio 模拟器平台,该平台提供内存等信息监控。



四、总结

有了 gui-guider 界面开发工具界面式拖拽布局界面,与 visual_studio 模拟器平台 PC 上直接运行你的界面调试,这些都极大的方便了图形界面相关的开发,为 HMI 应用开发添上翅膀,加速开发。

 

五、参考资料

【GUI Guider为LVGL装上翅膀,加速开发】

https://www.wpgdadatong.com/blog/detail?BID=B3331

 

【LVGL 官网】

https://lvgl.io/

 
【LVGL PC Simulator using Visual Studio】

https://github.com/lvgl/lv_sim_visual_studio

 

★博文内容均由个人提供,与平台无关,如有违法或侵权,请与网站管理员联系。

★文明上网,请理性发言。内容一周内被举报5次,发文人进小黑屋喔~

评论