恩智浦GUI Guider：LCD屏示例工程快速創(chuàng)建指南

今天痞子衡給大家分享的是使用恩智浦GUI Guider快速創(chuàng)建全新LCD屏示例工程的步驟。

在痞子衡舊文 《在i.MXRT1170上快速點(diǎn)亮一款全新LCD屏的方法與步驟》 里，痞子衡介紹了在官方 SDK 裸機(jī)驅(qū)動(dòng) elcdif 示例工程基礎(chǔ)上做修改以支持一款全新 LCD 屏的方法，那篇文章主要涉及得是對于 LCD 驅(qū)動(dòng) IC 的底層適配改動(dòng)。今天我們在其基礎(chǔ)之上嘗試用恩智浦 GUI Guider 工具快速創(chuàng)建這款 LCD 屏（深圳柯達(dá)科電子生產(chǎn)的 KD050FWFIA019-C019A）的 LVGL 框架下的示例工程。

一、GUI Guider簡介

LVGL 是一個(gè)適用于各種嵌入式平臺和顯示器的開源且免費(fèi)的 GUI 框架庫，其第一個(gè)版本于 2016 年開源在 github 上。我們知道嵌入式 GUI 應(yīng)用開發(fā)很大的工作量在于 UI 界面的設(shè)計(jì)，一個(gè)成熟的 GUI 框架通常都自帶配套的 UI 界面編輯工具，但是 LVGL 在 UI 工具方面是比較匱乏的，直到 2022 年初官方才找了家第三方公司合作推出了 SquareLine Studio，并且不幸得是 2024 年 2 月，LVGL 已經(jīng)結(jié)束了和 SquareLine Studio 的合作。

恩智浦作為 LVGL 官方合作伙伴，在 LVGL 的支持上投入了不少精力，正因?yàn)楣俜?UI 工具的匱乏，恩智浦便開發(fā)了 GUI Guider 工具（第一個(gè)版本發(fā)布于 2021 年初），借助 GUI Guider 的拖放編輯器可以輕松使能 LVGL 的眾多特性，如小部件、動(dòng)畫和樣式來創(chuàng)建 GUI，而只需少量代碼或根本無需任何代碼。

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

GUI Guider 支持了眾多恩智浦 MCU 開發(fā)板以及一些官方指定的 LCD 屏，其生成的示例工程底層代碼也是基于官方 SDK。其軟件版本對應(yīng)關(guān)系可以在工具菜單欄 Help->Release Note 下找到：

二、GUI Guider下創(chuàng)建工程

痞子衡安裝得是最新的 GUI Guider v1.7.0-GA，讓我們打開這個(gè)工具創(chuàng)建初始工程，前兩步分別是選 LVGL 版本（v7/v8）以及 MCU 板卡（如果是自制板卡，只需要選對 MCU 型號即可），這里痞子衡選擇了 LVGL v8 以及 MIMXRT1170-EVKB。

第三步選擇模板的時(shí)候，有4種選擇，EmptyUI 就是純空界面，Widget 是一些典型的簡單界面模板，Application 是一些復(fù)雜的綜合應(yīng)用界面模板，Local Projects 是導(dǎo)入本地已有的用戶工程界面模板。因?yàn)橹皇亲鲆粋€(gè)簡單示例，痞子衡這里選擇了 EmptyUI：

第四步（也是創(chuàng)建工程的最后一步）是設(shè)置 LCD 屏屬性，因?yàn)槲覀冇玫檬切缕粒栽?Panel Type 里需要選擇 Custom，然后手動(dòng)輸入屏的名稱（會在代碼里生成相應(yīng)宏 DEMO_PANEL_KD050FWFIA019）以及尺寸，最后點(diǎn)擊 Create 按鈕便能生成初始工程。

Note: 這里設(shè)置的 LCD 屏尺寸（寬高）在工程生成之后無法再更改。

三、GUI Guider里設(shè)計(jì)界面

現(xiàn)在來到了 GUI 設(shè)計(jì)主界面，因?yàn)橹皇呛唵问纠覀冸S便拖動(dòng)一個(gè) Label 控件，里面寫入 Hello World 就算設(shè)計(jì)好界面了。界面設(shè)計(jì)完成需要在右上角點(diǎn)擊 Generate Code -> C 以生成相應(yīng)界面構(gòu)建 C 代碼。

四、修改MCU工程底層驅(qū)動(dòng)

現(xiàn)在讓我們打開創(chuàng)建 GUI 工程指定的文件路徑，找到如下工程目錄，rt1170_qsg_proj.guiguider 便是 GUI 設(shè)計(jì)工程文件，一級目錄下都是跟 GUI 相關(guān)的文件夾（generated 存放工具生成的相關(guān)字庫控件資源文件，custom 里可以自行添加用戶界面響應(yīng)相關(guān)邏輯代碼），sdk 文件夾下則是最終 MCU 工程（MCUX/IAR/MDK/GCC 均支持）。

因?yàn)?GUI Guider 已經(jīng)將所需的源文件全部聚合在這個(gè)目錄下，所以我們不用額外再下載任何軟件包。這時(shí)候你可以選擇你擅長的 IDE 去做進(jìn)一步開發(fā)，痞子衡用 IAR 比較多， 所以便打開了 GUI-Guider-Projects t1170_qsg_projsdkiarlvgl_guider_cm7.eww 工程。

Note：除了 MCUX 的工程可以在導(dǎo)入時(shí)另選官方 SDK 版本，其余 IDE 的 SDK 版本均是確定的。如需其它 SDK 版本，需要手動(dòng)更新 GUI-Guider-Projects t1170_qsg_projsdkCore 里文件。

當(dāng)前 GUI Guider 生成的 MCU 工程均是 FreeRTOS 版本，沒有提供裸機(jī)版本。無論工程是否基于 RTOS，這并不影響我們移植全新 LCD 屏的驅(qū)動(dòng)。按照痞子衡舊文 《在i.MXRT1170上快速點(diǎn)亮一款全新LCD屏的方法與步驟》 里的步驟，將對 elcdif_support.c/h 的改動(dòng)全部放到 display_support.c/h 里，再添加 fsl_ili9806e.c/h 文件到 lvgl_guider_cm7 工程里便大功告成了。此外由于那篇文章只是點(diǎn)屏，沒有涉及觸摸 IC 的驅(qū)動(dòng)，所以這里暫時(shí)也不用考慮使能觸摸功能，可將 DEMO_InitTouch() 函數(shù)的調(diào)用先注釋掉。

?

?

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 工程，這時(shí)候就能看到 LVGL 版本的 hello world 正常顯示了：

至此，使用恩智浦GUI Guider快速創(chuàng)建全新LCD屏示例工程的步驟痞子衡便介紹完畢了，掌聲在哪里~~~

審核編輯：黃飛

?