一、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 官网下载,网址如下:
(2)GUI Guider 相关资料可在 NXP 官网下载,网址如下:
https://www.nxp.com/design/software/development-software/gui-guider:GUI-GUIDER?tab=Design_Tools_Tab