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

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

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

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

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

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

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

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

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

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

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

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

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

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

在PC上安裝GUI Guider

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

本例中搭建嵌入式GUI開發(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ī)上沒有JDK，啟動GUI Guider后會有提示。如圖x所示。

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

可以使用開源的OpenJDK即可。

在安裝OpenJDK的過程中，切記要將JDK的可執(zhí)行文件的路徑添加到開發(fā)主機(jī)系統(tǒng)的環(huán)境變量中。如圖x所示。安裝OpenJDK的最后步驟中，可能也有自動添加系統(tǒng)環(huán)境變量的操作選項(xià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 啟動GUI Guider軟件

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