LVGL 之从 GUI Guider 到 MCUXpresso

一、GUI Guider 简介

GUI Guider 是 NXP 公司的一款友好的图形用户界面开发工具,可以用于开的 LVGL 图形库的快速开发高质量。 GUI Guider 的拖放编辑器可以很容易地利用 LVGL 的许多特性,如小部件、动画和样式,能快速搭建自己的 GUI 界面。 


图 1. GUI Guider

 

二、GUI Guider 安装

2.1 下载 GUI Guider 安装包

GUI Guider 的安装包和手册可以在 NXP 官网下载,具体网址:https://www.nxp.com/design/software/development-software/gui-guider:GUI-GUIDER?tab=Design_Tools_Tab



图 2. 安装包



图 3. 手册

2.2 安装 GUI Guider

以 Win10 系统为例,介绍 GUI Guider 的安装过程。


图 4. 安装 GUI Guider

2.3 设置 GUI Guider 运行环境(安装 JRE)

安装之后要安装 Java Runtime Environment 并设置环境变量,步骤可参考手册,JRE 安装包下载网址:http://jdk.java.net/archive/


图 5. 配置 JRE 环境变量

这一步很重要,如果未安装 JRE,GUI Guider 是无法正常运行的,确保这里安装和配置都设置完成。

 

三、GUI Guider 的使用

3.1 创建 GUI Guider 工程

以 LPC54608 EVK 为例,创建工程的时候各项设置如下。


图 6. 设置工程名 & 选择工程路径



图 7. 选择板子型号



图 8. 选择 Demo

这里需要注意的是,创建的工程所在的路径名不要包含各种符号以及空格等,如不要包含“: \ 、”等。

3.2 设计界面


创建完成后就会看到如下界面,左边是各种控件选择,右边是控件的外观、属性、事件设置,具体每个控件怎样用这里不做详细介绍,这里可以设计、修改界面的各个部分。


图 9. 设计 UI 界面

3.3 生成代码、运行模拟器

界面设计完成后我们可以点击“Generate Code”生成代码,代码可在“Code Viewer”中查看。


图 10. 生成代码

点击“Run Simulator”运行模拟器,可查看界面运行效果,有需要修改的地方可以继续修改、模拟运行查看效果。


图 11. 运行模拟器

3.4 导出代码到 MCUXpresso

先在 MCUXpresso 中导入一个 SDK 例程“littlevgl_guider”。


图 12. 生成代码

点击 GUI Guider 左上角“File -> Export Code -> MCUx Code”导出代码,导出到的目标工程路径选择刚刚 MCUXpresso 例程“littlevgl_guider”的路径。


图 13. 导出 GUI Guider 代码到 MCUXpresso 工程

3.5 下载到开发板运行

完成上面的导出之后,就可以编译、下载程序到开发板了。


图 14. 编译下载 MCUXpresso 工程



图 15. EVK 运行效果 

 

 

四、参考资料

(1)LPC546XX 系列相关资料均可在 NXP 官网下载,网址如下:

https://www.nxp.com/products/processors-and-microcontrollers/arm-microcontrollers/general-purpose-mcus/lpc54000-cortex-m4-/power-efficient-microcontrollers-mcus-with-advanced-peripherals-based-on-arm-cortex-m4-core:LPC546XX?&tid=vanLPC546XX

(2)GUI Guider 相关资料可在 NXP 官网下载,网址如下:

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

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

★博文作者未开放评论功能