GUI神器 NXP GUI GUIDER开发工具入门教程

好记性不如烂笔头，既然不够聪明，就乖乖的做笔记，温故而知新。

本文档用于本人对知识点的梳理和记录

目录

一、前言

二、下载

三、演示

四、字体和图片/动画等资源

五、总结

---

一、前言

GUI Guider是恩智浦为LVGL开发了一个上位机GUI设计工具，可以通过拖放控件的图形化设计方式开发LVGL GUI页面，加速GUI的设计。

相比LVGL官方推出的付费工具 SquareLine Studio ，GUI Guider完全免费，它们甚至开发页面的布局都类似，但两者功能上，GUI Guider也相应的没有SquareLine Studio 细致和丰富，希望NXP能持续的优化更新

GUI Guider工具完成的GUI设计可在PC端仿真运行，实现无硬件开发，通过仿真调试完成后，可快速方便的整合到MCU的工程中。

本文将演示如何创建GUI项目并介绍生成的项目目录文件功能，移植整合到MCU工程将在下一篇博客中分享。

二、下载

NXP GUI Guider官方下载链接：最新版本可在此下载

本教程示例工程下载链接:

示例工程

三、演示

演示版本：GUI Guider 1.3.1

创建新项目或者打开一个已创建的项目，这里以创建新项目为例；

选择LVGL的版本，这里以V7为例；

这里是选择模板：

1：公用模板，第三方的MCU一般可选择此类

2：基于NXP i.MX系列的示例模板

3：基于NXP LPC低功耗系列的示例模板；

选择好模板后，然后点击下一布

这里是选择应用模板

1：是公用模板，包括空模板以及一些示例模板

2：是本地模板，可以选择已经在开发的项目模板

3：选择好应用模板后点击下一步

这里是项目配置

1：工程名称

2：存放工程的路径选择

3：画布分辨率的选择

4：画布色彩深度的选择，常见的小屏16bit比较多

至此，一个工程已创建完毕，此时画面会切换到开发界面

1：功能性控件区，可以拖放到画布上面

2：控件组件区，可以很方便的管理画布上的控件

3：控件属性设置以及事件管理，和系统设置

4：工具栏

5：开发完成后，点击绿色按钮生成并仿真工程

6：点击生成的语言类型，公共模板只支持C语言，NXP专用模板支持种类更丰富，不过一般不用

仿真器运行后的效果，注意，仿真器运行需要JAR支持，因此，需要安装JAVA JRE

此时可以在存放工程的路径目录中看到生成的代码

重要的文件已如图示列出了作用 ，下次有空再写一篇怎么移植到MCU的工程中运行；

四、字体和图片/动画等资源

导入图片资源

1：点击导入切换到资源界面

2：点击选择资源路径导入资源

3：已导入的资源显示在这里，当工程中需要插入图片时，可以看到已导入的资源

字体

1：点击文件

2：点击导入字体，可以选择磁盘上需要导入的字体文件

 点击生成字体可以将已支持的字体生成HEX文件，方便MCU成功引用，当然GUI工程中已添加的字体文件不需要手动生成

 

 最终生成的字体文件，可以在存放路径下的“guider_customer_fonts”中看到，如下图

五、总结

NXP GUI Guider工具操作简单，大大降低了GUI的开发难度，而且移植方便，具备通用性，个人很喜欢使用这个工具，目前最新版本的已经到1.6，细节上优化很多，但总体开发流程变化不大。