使用GUI Guider工具在MCU上開發嵌入式GUI應用 (1)

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

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

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

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

表x 主流嵌入式GUI的關鍵指標對比

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

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

表 x 常用LVGL模擬器的關鍵指標對比

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

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

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

準備帶有顯示屏的開發板

本例使用基于國產靈動微電子“星辰”處理器內核系列的MCU產品，MM32F5270/MM32F5280，設計的開發板BIRD-F5，配合ST7796U的3.5寸TFT液晶顯示屏模塊。任何可以連接液晶顯示模塊的開發板均可用于開發LVGL，只要開發者預先適配好具體的液晶屏驅動，以及在具體開發板上做好LVGL工程的移植，后續開發圖形界面的工作將全部在GUI Guider環境中進行開發，同具體的開發板和顯示模塊無關。

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

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

在PC上安裝GUI Guider

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

本例中搭建嵌入式GUI開發環境（基于Windows操作系統）需要安裝如下軟件工具包：

• Keil MDK - MCU源碼項目的編譯和下載工具
• 一個移植好LVGL的MCU源碼工程，可以點亮液晶屏
• GUI Guider - 基于PC機的生成UI源碼的軟件工具

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

運行GUI Guider需要配置JDK，如果本機上沒有JDK，啟動GUI Guider后會有提示。如圖x所示。

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

可以使用開源的OpenJDK即可。

在安裝OpenJDK的過程中，切記要將JDK的可執行文件的路徑添加到開發主機系統的環境變量中。如圖x所示。安裝OpenJDK的最后步驟中，可能也有自動添加系統環境變量的操作選項，也可勾選其中，自動完成添加。

figure-gui-guider-install-openjdk-syspath
圖x 配置JDK路徑到系統環境變量

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

figure-gui-guider-startup-1
圖x 啟動GUI Guider軟件

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