概述

GUI Guider是NXP推出的一款功能強大且對用戶非常友好的圖形界面開發(fā)工具。目前最新版本是1.6.1。

GUI Guider同時還是一款基于LVGL的圖形界面開發(fā)利器。LVGL是當今非常流行的免費開源嵌入式圖形庫之一，支持任何MCU、MPU及其他具有顯示接口的可編程器件。

GUI Guider的主要特性如下：

拖拽式所見即所得設計

靈活的定制代碼機制

32個LVGL v7控件，43個LVGLv8控件

10個高級控件，如analog clock, carouse, video, lottie, QR code,barcode, digital clock, radio button, text, progress bar

控件成組移動

中文輸入和顯示

事件添加

動畫添加

支持多種主機操作系統(tǒng)，包括Win10, Ubuntu 22.04,MacOS (Intel Core, Apple M2 core)

支持多個LVGL版本，如v7.10.1,v8.3.5

支持多種嵌入式操作系統(tǒng)，如RT-Thread, Zephyr, FreeRTOS,Linux, QNX

多種顏色深度，如1, 8 , 16，24

豐富的快捷鍵，如剪切、復制、粘貼、刪除、控件層次置頂和置底

預定義樣式

云模板

多種主題顏色

重要特性

工程創(chuàng)建

創(chuàng)建工程，是使用GUIGuider進行圖形界面開發(fā)的第一步，步驟如下：

1.啟動GUI Guider, 點擊Create a new project創(chuàng)建工程，進入Select LVGL Version窗口。

2.在Select LVGL Version窗口中，選擇LVGL版本。GUI Guider支持LVGL v7和LVGLv8, 這里選擇LVGL v8, 即v8.3.5。點擊Next,進入Select a Board Template窗口。

3.在Select a Board Template窗口，選擇評估板模板，選擇MIMXRT1060-EVKC。這里插播一個廣告，GUI Guider 1.6.1增加了一個新功能。新增的評估板模板，會在其右上角用New進行標記。選擇評估板模板之后，點擊Next，進入Select an Application Template窗口。

4. 在Select an Application Template窗口中，選擇應用模板，這里選擇CanvasChart。同樣，帶有New標記的CanvasChart是GUI Guider 1.6.1新增的應用模板。點擊Next，進入Project Settings窗口。

5. 在Project Settings窗口中，設置工程名、工程路徑、顏色深度、屏幕類型，然后點擊Create開始創(chuàng)建。這里請注意，同一個評估板有可能支持多種屏幕類型，而且有的屏幕支持多種顏色深度。因此，請根據您所使用的屏幕類型和顏色深度進行配置，否則GUI Guider生成的工程無法正常地在評估板上運行。

版本升級

相信很多用戶都會遇到這樣的問題，已有的工程是基于低版本的LVGL圖形庫和GUI Guider設計的，由于LVGL持續(xù)更新，不斷推出新的版本，增加了很多新的有用的特性。同時，為了支持持續(xù)更新的LVGL圖形庫，增加新的功能，修復已有的bug，GUI Guider也在不但升級，以給用戶帶來更好的使用體驗。

基于上述原因，用戶希望把已有的設計升級到最新的GUI Guider版本。但在升級的過程中可能會遇到問題。這里就給大家介紹GUIGuider目前的版本升級規(guī)則，助力大家順利完成升級。

目前GUI Guider的升級規(guī)則是：使用早于1.5.0版本所做的設計，先用1.5.0或者1.5.1版本升級導入，執(zhí)行generate code后，升級到1.5.0或者1.5.1版本。然后，再用最新的版本(當前是1.6.1)升級導入后，就把設計升級到最新的版本。

本文以一個GUI Guider1.3.1版本所做的設計為例，說明將低版本設計升級到高版本的過程，具體步驟如下：

1. 打開一個基于GUI Guider 1.3.1版本的設計。在GUI Guider生成的工程目錄中，找到擴展名為. guiguider的文件,該文件就是其工程文件。打開工程文件之后，使用version作為關鍵詞進行檢索。

2. 此時，如果直接使用GUI Guider 1.6.1打開由1.5.0以前版本所做的設計，就會得到如下版本升級提示。

3. 打開GUI Guider 1.5.1, 導入需要升級的設計。

4. 在彈出的Update Project提示框中，點擊OK，啟動升級。這里說下Backup before update復選框的作用。因為，版本升級過程可能會出現錯誤，這是任何GUI設計工具都不可避免的。一旦出現版本升級錯誤，原始的設計就會被破壞。為了避免這種情況發(fā)生，GUI Guider提供Backup before update選項，在版本升級之前對您的設計進行備份。

5. 升級完成后，重新打開GUI Guider工程文件，可以看到設計已經升級到1.5.1。

6. 執(zhí)行代碼生成功能。

7. 打開GUI Guider 1.6.1，重復執(zhí)行3、4步驟，將設計從1.5.1升級到1.6.1。完成升級后，查看GUI Guider工程文件，可以看到GUI Guider已經升級到1.6.1。

定制代碼

如何在GUI Guider中添加定制代碼也是很多用戶都關心的問題。目前，GUI Guider支持三種添加定制代碼的場景：

1. 屏幕創(chuàng)建時添加定制代碼

如果用戶想要設置某個小部件(widget)的屬性，而當前版本的GUIGuider還未支持該屬性的設置。那么，用戶可以在小部件所在的屏幕創(chuàng)建函數中通過添加定制代碼來實現這個需求。

舉例：用戶在GUI Guider中已經創(chuàng)建了一個屏幕，叫做screen。那么，如何在screen的創(chuàng)建函數中添加定制代碼呢？具體步驟如下圖所示，并可以概括為選中屏幕，選擇定制代碼的編程語言，在彈出的 Edit Code窗口中添加代碼。

代碼定制完成并執(zhí)行generate code操作后，定制的代碼就會被添加在setup_scr_screen.c文件中的setup_scr_screen函數中。

這里簡單說明，GUI Guider中的屏幕名稱、屏幕初始化函數及屏幕初始化函數所在文件的關系。以上圖所示的屏幕為例，它的名稱是screen, 在這個名稱前面添加setup_scr_前綴，就得到setup_scr_screen。setup_scr_screen就是屏幕初始化函數及屏幕初始化函數所在文件的名稱。

2.事件觸發(fā)時添加定制代碼

有時，用戶希望在控件被觸發(fā)時執(zhí)行自定義操作。舉個例子，在智能家居應用中，用戶希望點擊智能終端控制界面的一個按鈕實現客廳燈光的控制。那么燈光控制的代碼就是用戶定制代碼。在GUI Guider中為事件添加定制代碼的步驟如下：

選中控件，這里選擇一個button控件

點擊事件設置按鈕或者右鍵點擊控件，執(zhí)行Add event操作

選擇觸發(fā)源，這里選擇Clicked

執(zhí)行如下操作進入Edit Code窗口編輯定制代碼

3.其他類型的定制代碼

通常情況下，用戶的應用代碼并不局限于屏幕創(chuàng)建和事件觸發(fā)。如果用戶的業(yè)務邏輯很多，那么勢必會有很多源文件和頭文件。用戶不可能把全部邏輯代碼都寫到GUI Guider的Edit Code窗口中。另一方面，用戶也不希望更新界面相關代碼的時候將自己的業(yè)務邏輯覆蓋。

那有什么解決辦法嗎？是的，GUI Guider已經考慮到這種情況，在工程目錄中的custom目錄，只要放置在這個目錄下的文件都不會被覆蓋，而且在執(zhí)行Run Target操作后，custom目錄下的所有源文件都將被編譯，很好的解決這個問題。

小結

本文介紹了GUI Guider的三個重要特性：工程創(chuàng)建、版本升級和定制代碼。

工程創(chuàng)建雖然在很多文章中都有提及，本文還加入了溫馨提示，比如選擇正確的顯示屏面板和顏色深度，目的是幫助GUI Guider的用戶規(guī)避一些應用問題。

版本升級，是很多圖形界面開發(fā)工具都會遇到的問題。畢竟，用戶不可能因為升級圖形界面開發(fā)工具和圖形庫版本就要重新設計已有的設計，這樣效率并不高。GUI Guider充分考慮了這一點，提供了完善的版本升級功能。

定制代碼，同樣是圖形界面開發(fā)人員都會遇到的問題。畢竟，一個產品級的應用并不是只有界面，還包括驅動、算法、通信等非界面邏輯。GUI Guider提供的定制代碼機制，將界面相關代碼和用戶應用邏輯有機融合，同時實現了清晰的應用框架結構。

后面會陸續(xù)為大家?guī)鞧UI Guider經典用法講解，敬請留意~

審核編輯：湯梓紅