恩智浦GUI Guider：LCD屏示例工程快速创建指南

今天痞子衡给大家分享的是使用恩智浦GUI Guider快速创建全新LCD屏示例工程的步骤。

在痞子衡旧文 《在i.MXRT1170上快速点亮一款全新LCD屏的方法与步骤》 里，痞子衡介绍了在官方 SDK 裸机驱动 elcdif 示例工程基础上做修改以支持一款全新 LCD 屏的方法，那篇文章主要涉及得是对于 LCD 驱动 IC 的底层适配改动。今天我们在其基础之上尝试用恩智浦 GUI Guider 工具快速创建这款 LCD 屏（深圳柯达科电子生产的 KD050FWFIA019-C019A）的 LVGL 框架下的示例工程。

一、GUI Guider简介

LVGL 是一个适用于各种嵌入式平台和显示器的开源且免费的 GUI 框架库，其第一个版本于 2016 年开源在 github 上。我们知道嵌入式 GUI 应用开发很大的工作量在于 UI 界面的设计，一个成熟的 GUI 框架通常都自带配套的 UI 界面编辑工具，但是 LVGL 在 UI 工具方面是比较匮乏的，直到 2022 年初官方才找了家第三方公司合作推出了 SquareLine Studio，并且不幸得是 2024 年 2 月，LVGL 已经结束了和 SquareLine Studio 的合作。

恩智浦作为 LVGL 官方合作伙伴，在 LVGL 的支持上投入了不少精力，正因为官方 UI 工具的匮乏，恩智浦便开发了 GUI Guider 工具（第一个版本发布于 2021 年初），借助 GUI Guider 的拖放编辑器可以轻松使能 LVGL 的众多特性，如小部件、动画和样式来创建 GUI，而只需少量代码或根本无需任何代码。

GUI Guider 下载地址: https://www.nxp.com/design/design-center/software/development-software/gui-guider:GUI-GUIDER

GUI Guider 支持了众多恩智浦 MCU 开发板以及一些官方指定的 LCD 屏，其生成的示例工程底层代码也是基于官方 SDK。其软件版本对应关系可以在工具菜单栏 Help->Release Note 下找到：

二、GUI Guider下创建工程

痞子衡安装得是最新的 GUI Guider v1.7.0-GA，让我们打开这个工具创建初始工程，前两步分别是选 LVGL 版本（v7/v8）以及 MCU 板卡（如果是自制板卡，只需要选对 MCU 型号即可），这里痞子衡选择了 LVGL v8 以及 MIMXRT1170-EVKB。

第三步选择模板的时候，有4种选择，EmptyUI 就是纯空界面，Widget 是一些典型的简单界面模板，Application 是一些复杂的综合应用界面模板，Local Projects 是导入本地已有的用户工程界面模板。因为只是做一个简单示例，痞子衡这里选择了 EmptyUI：

第四步（也是创建工程的最后一步）是设置 LCD 屏属性，因为我们用得是新屏，所以在 Panel Type 里需要选择 Custom，然后手动输入屏的名称（会在代码里生成相应宏 DEMO_PANEL_KD050FWFIA019）以及尺寸，最后点击 Create 按钮便能生成初始工程。

Note: 这里设置的 LCD 屏尺寸（宽高）在工程生成之后无法再更改。

三、GUI Guider里设计界面

现在来到了 GUI 设计主界面，因为只是简单示例，我们随便拖动一个 Label 控件，里面写入 Hello World 就算设计好界面了。界面设计完成需要在右上角点击 Generate Code -> C 以生成相应界面构建 C 代码。

四、修改MCU工程底层驱动

现在让我们打开创建 GUI 工程指定的文件路径，找到如下工程目录，rt1170_qsg_proj.guiguider 便是 GUI 设计工程文件，一级目录下都是跟 GUI 相关的文件夹（generated 存放工具生成的相关字库控件资源文件，custom 里可以自行添加用户界面响应相关逻辑代码），sdk 文件夹下则是最终 MCU 工程（MCUX/IAR/MDK/GCC 均支持）。

因为 GUI Guider 已经将所需的源文件全部聚合在这个目录下，所以我们不用额外再下载任何软件包。这时候你可以选择你擅长的 IDE 去做进一步开发，痞子衡用 IAR 比较多， 所以便打开了 GUI-Guider-Projects t1170_qsg_projsdkiarlvgl_guider_cm7.eww 工程。

Note：除了 MCUX 的工程可以在导入时另选官方 SDK 版本，其余 IDE 的 SDK 版本均是确定的。如需其它 SDK 版本，需要手动更新 GUI-Guider-Projects t1170_qsg_projsdkCore 里文件。

当前 GUI Guider 生成的 MCU 工程均是 FreeRTOS 版本，没有提供裸机版本。无论工程是否基于 RTOS，这并不影响我们移植全新 LCD 屏的驱动。按照痞子衡旧文 《在i.MXRT1170上快速点亮一款全新LCD屏的方法与步骤》 里的步骤，将对 elcdif_support.c/h 的改动全部放到 display_support.c/h 里，再添加 fsl_ili9806e.c/h 文件到 lvgl_guider_cm7 工程里便大功告成了。此外由于那篇文章只是点屏，没有涉及触摸 IC 的驱动，所以这里暂时也不用考虑使能触摸功能，可将 DEMO_InitTouch() 函数的调用先注释掉。

 

 

GUI-Guider-Projects
t1170_qsg_projsdkCoreoarddisplay_support.c
GUI-Guider-Projects
t1170_qsg_projsdkCoreoarddisplay_support.h
GUI-Guider-Projects
t1170_qsg_projsdkCorevideofsl_ili9806e.c
GUI-Guider-Projects
t1170_qsg_projsdkCorevideofsl_ili9806e.h

 

 

给板卡供电，连接上新屏 KD050FWFIA019，编译下载修改后的 lvgl_guider_cm7 工程，这时候就能看到 LVGL 版本的 hello world 正常显示了：

至此，使用恩智浦GUI Guider快速创建全新LCD屏示例工程的步骤痞子衡便介绍完毕了，掌声在哪里~~~

审核编辑：黄飞