概述

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

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

GUI Guider的主要特性如下：

拖拽式所見即所得設(shè)計

靈活的定制代碼機制

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

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

預(yù)定義樣式

云模板

多種主題顏色

重要特性

工程創(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進行標(biāo)記。選擇評估板模板之后，點擊Next，進入Select an Application Template窗口。

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

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

版本升級

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

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

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

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

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

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

3. 打開GUI Guider 1.5.1, 導(dǎo)入需要升級的設(shè)計。

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

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

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

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

定制代碼

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

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

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

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

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

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

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

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

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

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

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

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

3.其他類型的定制代碼

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

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

小結(jié)

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

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

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

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

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

審核編輯：湯梓紅