LVGL是一個(gè)開(kāi)源免費(fèi)（MIT許可）的嵌入式GUI組件，支持觸摸屏操作，移植簡(jiǎn)單方便，開(kāi)發(fā)者一直在不斷完善更新。

LVGL的作者是來(lái)自匈牙利的Gabor Kiss-Vamosikisvegabor，LVGL用C語(yǔ)言編寫(xiě)，以實(shí)現(xiàn)最大的兼容性（與C ++兼容），模擬器可在沒(méi)有嵌入式硬件的PC上啟動(dòng)嵌入式GUI設(shè)計(jì)，同時(shí)LVGL作為一個(gè)圖形庫(kù)，它自帶著接近三十多種小工具可以供開(kāi)發(fā)者使用。這些強(qiáng)大的構(gòu)建塊按鈕搭配上帶有非常絲滑的動(dòng)畫(huà)以及可以做到平滑滾動(dòng)的高級(jí)圖形，同時(shí)兼具著不高的配置要求以及開(kāi)源屬性，顯著的優(yōu)勢(shì)使得LVGL蔚然成風(fēng)，成為廣大開(kāi)發(fā)者在選擇GUI時(shí)的第一選擇。

LVGL自帶了豐富的控件：窗口、按鍵、標(biāo)簽、列表、圖表等，還可以自定義控 件；支持很多特效：透明、陰影、自動(dòng)顯示隱藏滾動(dòng)條、界面切換動(dòng)畫(huà)、圖標(biāo)打開(kāi)關(guān)閉動(dòng)畫(huà)、平滑的拖拽控件、分層顯示、反鋸齒、僅耗少量?jī)?nèi)存的字體等等。

同LVGL應(yīng)用場(chǎng)景類(lèi)似的主流的嵌入式GUI組件還有emWin、TouchGFX等，相比較而言，LVGL對(duì)于開(kāi)發(fā)者更加友好，對(duì)比典型指標(biāo)如表x所示。

表x 主流嵌入式GUI的關(guān)鍵指標(biāo)對(duì)比

由于LVGL被廣泛應(yīng)用，也衍生了一些以LVGL為基礎(chǔ)的開(kāi)發(fā)工具，便于嵌入式系統(tǒng)開(kāi)發(fā)者自定義自己的GUI應(yīng)用。例如 GUI Guider、Square Line Studio、LVGL Windows Simulater等。其中：

• Square Line Studio是LVGL官方開(kāi)發(fā)工具，面向個(gè)人和專(zhuān)業(yè)人士的UI編輯器，可快速輕松地為您的嵌入式設(shè)備設(shè)計(jì)和開(kāi)發(fā)漂亮的UI，便捷地設(shè)計(jì)界面并一鍵生成代碼導(dǎo)出，導(dǎo)出的代碼在模擬器和嵌入式設(shè)備上都適用，但該軟件商業(yè)使用需要付費(fèi)。
• LVGL Windows Simulater是LVGL官方提供的輕量級(jí)的仿真器，使用 GNU GCC 編譯器和 SDL 驅(qū)動(dòng)庫(kù)或 Windows API 在 PC 機(jī)上繪制界面，但需要用戶(hù)自行編寫(xiě)源碼設(shè)計(jì)UI。
• 相對(duì)而言，GUI Guider開(kāi)源，并且支持圖形環(huán)境的設(shè)計(jì)和仿真功能，最具符合開(kāi)發(fā)者全面需求。

表 x 常用LVGL模擬器的關(guān)鍵指標(biāo)對(duì)比

GUI Guider是恩智浦提供的用戶(hù)友好型圖形用戶(hù)界面開(kāi)發(fā)工具，可通過(guò)開(kāi)源LVGL圖形庫(kù)快速開(kāi)發(fā)高品質(zhì)的顯示。GUI Guider的拖放編輯器可以輕松利用LVGL的眾多特性，如小部件、動(dòng)畫(huà)和樣式來(lái)創(chuàng)建GUI，而只需少量代碼或根本無(wú)需任何代碼。單擊按鈕，您可以在模擬環(huán)境中運(yùn)行應(yīng)用或?qū)⑵鋵?dǎo)出到目標(biāo)項(xiàng)目?？梢院茌p松地將GUI Guider生成的代碼添加到MCUXpresso IDE或IAR Embedded Workbench項(xiàng)目中，從而加速開(kāi)發(fā)過(guò)程，并允許無(wú)縫地將嵌入式用戶(hù)界面添加到應(yīng)用中。

GUI Guider是NXP公司推出的一款用戶(hù)友好的嵌入式圖形應(yīng)用開(kāi)發(fā)工具。它使用開(kāi)源LVGL圖形庫(kù)作為底層圖形引擎，提供可視化所見(jiàn)即所得的拖放UI編輯器，能夠快速、輕松地為嵌入式應(yīng)用程序創(chuàng)建漂亮的圖形用戶(hù)界面。圖形設(shè)計(jì)師能夠直接使用GUI Guider創(chuàng)建UI，并將已經(jīng)工作的UI交付給軟件開(kāi)發(fā)人員，而軟件開(kāi)發(fā)人員只需專(zhuān)注于底層業(yè)務(wù)邏輯開(kāi)發(fā)。通過(guò)這種方式，GUI Guider可以支持個(gè)人或者團(tuán)隊(duì)高效地協(xié)同工作。GUI Guider的軟件界面，如圖x所示。

figure-gui-guider-layout-overview
圖x GUI Guider的軟件界面

準(zhǔn)備帶有顯示屏的開(kāi)發(fā)板

本例使用基于國(guó)產(chǎn)靈動(dòng)微電子“星辰”處理器內(nèi)核系列的MCU產(chǎn)品，MM32F5270/MM32F5280，設(shè)計(jì)的開(kāi)發(fā)板BIRD-F5，配合ST7796U的3.5寸TFT液晶顯示屏模塊。任何可以連接液晶顯示模塊的開(kāi)發(fā)板均可用于開(kāi)發(fā)LVGL，只要開(kāi)發(fā)者預(yù)先適配好具體的液晶屏驅(qū)動(dòng)，以及在具體開(kāi)發(fā)板上做好LVGL工程的移植，后續(xù)開(kāi)發(fā)圖形界面的工作將全部在GUI Guider環(huán)境中進(jìn)行開(kāi)發(fā)，同具體的開(kāi)發(fā)板和顯示模塊無(wú)關(guān)。

MM32F5270微控制器使用ArmChina的STAR-MC1處理器內(nèi)核（基本兼容Arm Cortex-M33內(nèi)核），最高主頻可達(dá)120MHz，片內(nèi)集成192KB的SRAM（128KB的SRAM、32KB的 ITCM 和32KB的 DTCM ）和 256KB 的 Flash，以及包括 FSMC 在內(nèi)的眾多外設(shè)模塊。MM32F5280在MM32F5270的基礎(chǔ)之上，在QSPI接口上合封了一塊2MB容量的qspiflash存儲(chǔ)芯片。

BIRD-F5開(kāi)發(fā)板以MM32F5277E9PV為主控芯片，集成了FPC插座，可以組裝TFT顯示屏模塊，將MM32F5270芯片上的FSMC接口同TFT液晶屏對(duì)接通信

在PC上安裝GUI Guider

理想情況下，基于MCU的UI應(yīng)用的開(kāi)發(fā)，重點(diǎn)應(yīng)該放在UI的設(shè)計(jì)上，而MCU相關(guān)的開(kāi)發(fā)工作，只是為UI軟件提供一個(gè)運(yùn)行環(huán)境。如此，在本例中搭建的軟件開(kāi)發(fā)環(huán)境，也主要分為兩個(gè)部分：搭建基于MCU的UI應(yīng)用運(yùn)行環(huán)境，搭建基于PC的UI應(yīng)用開(kāi)發(fā)環(huán)境。這里的準(zhǔn)備工作，需要?jiǎng)?chuàng)建一個(gè)包含了能夠支持GUI Guider源碼的MCU的源碼工程，當(dāng)在GUI Guider中編輯好UI素材，對(duì)應(yīng)生成的源碼可以被直接集成到MCU工程中，編譯并能夠在具體的開(kāi)發(fā)板上運(yùn)行。

本例中搭建嵌入式GUI開(kāi)發(fā)環(huán)境（基于Windows操作系統(tǒng)）需要安裝如下軟件工具包：

• Keil MDK - MCU源碼項(xiàng)目的編譯和下載工具
• 一個(gè)移植好LVGL的MCU源碼工程，可以點(diǎn)亮液晶屏
• GUI Guider - 基于PC機(jī)的生成UI源碼的軟件工具

登錄NXP官網(wǎng)，在搜索欄中輸入GUI Guider即可找到GUI Guider工具的軟件包，目前可以運(yùn)行在Windows、Linux和MacOS等多種操作系統(tǒng)。

運(yùn)行GUI Guider需要配置JDK，如果本機(jī)上沒(méi)有JDK，啟動(dòng)GUI Guider后會(huì)有提示。如圖x所示。

figure-gui-guider-startup-6
圖x GUI Guider提示安裝JDK

可以使用開(kāi)源的OpenJDK即可。

在安裝OpenJDK的過(guò)程中，切記要將JDK的可執(zhí)行文件的路徑添加到開(kāi)發(fā)主機(jī)系統(tǒng)的環(huán)境變量中。如圖x所示。安裝OpenJDK的最后步驟中，可能也有自動(dòng)添加系統(tǒng)環(huán)境變量的操作選項(xiàng)，也可勾選其中，自動(dòng)完成添加。

figure-gui-guider-install-openjdk-syspath
圖x 配置JDK路徑到系統(tǒng)環(huán)境變量

安裝GUI Guider和OpenJDK完畢后，運(yùn)行GUI Guider軟件，可以進(jìn)入圖形UI編輯界面。如圖x所示。

figure-gui-guider-startup-1
圖x 啟動(dòng)GUI Guider軟件

至此，安裝GUI Guider軟件的過(guò)程全部完成。在下文中將介紹如何準(zhǔn)備能夠適配GUI Guider軟件生成源碼的MCU工程。