概述

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

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

GUI Guider的主要特性如下：

拖拽式所見(jiàn)即所得設(shè)計(jì)

靈活的定制代碼機(jī)制

32個(gè)LVGL v7控件，43個(gè)LVGLv8控件

10個(gè)高級(jí)控件，如analog clock, carouse, video, lottie, QR code,barcode, digital clock, radio button, text, progress bar

控件成組移動(dòng)

中文輸入和顯示

事件添加

動(dòng)畫(huà)添加

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

支持多個(gè)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進(jìn)行圖形界面開(kāi)發(fā)的第一步，步驟如下：

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

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

3.在Select a Board Template窗口，選擇評(píng)估板模板，選擇MIMXRT1060-EVKC。這里插播一個(gè)廣告，GUI Guider 1.6.1增加了一個(gè)新功能。新增的評(píng)估板模板，會(huì)在其右上角用New進(jìn)行標(biāo)記。選擇評(píng)估板模板之后，點(diǎn)擊Next，進(jìn)入Select an Application Template窗口。

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

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

版本升級(jí)

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

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

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

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

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

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

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

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

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

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

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

定制代碼

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

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

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

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

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

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

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

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

選中控件，這里選擇一個(gè)button控件

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

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

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

3.其他類(lèi)型的定制代碼

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

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

小結(jié)

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

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

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

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

后面會(huì)陸續(xù)為大家?guī)?lái)GUI Guider經(jīng)典用法講解，敬請(qǐng)留意~

審核編輯：湯梓紅