恩智浦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屏示例工程的步驟痞子衡便介紹完畢了，掌聲在哪里~~~

審核編輯：黃飛

?