TouchGFX 是由STMicroelectronics 所提供的嵌入式系統設計的圖形用戶介面（GUI）開發框架，作用是針對STM32微控制器(MCU)的晶片，提供設計物件情境顯示的設計能力，協助STM MCU使用者能夠建構出流暢、精美、變化多樣的UI頁面。

以下範例用TouchGFX 版本4.23.2為例:

圖1. TouchGFX開啟畫面,能看到能選項Example, Demo, Create Board chip等頁面

TouchGFX 結構簡介

TouchGFX程式架構的部分，採用Model-View-Presenter（MVP）圖2這樣的模式做主軸，其特點有如下優勢:

各層分離(Separation of Concerns): 程式碼在各階段中有不同維護方式，便於使用者撰寫介面並與下層溝通，結構清晰易懂，可重複性高。

單元測試(Unit Testing): 在上層的View可與GFX產生的代碼直接作用，單獨驗證結果會更容易。

圖2. TouchGFX各階關係圖(MVP)

View: 為主軸由GFX產生的顯示頁面，為顯示介面的設計一階。通常為MVP的上層端的被動端，處理UI介面的一切設計資訊，也會在此根據使用物件的屬性，做出對應的顯示畫面。

Model: 是作為處理發送資料的主要核心位置。一些傳輸的通信封包，在判斷或處理後，會再透過Presenter往View去下達指令，去改變View現階段顯示的內容與物件狀態。

Presenter: 作為View與Model的溝通管道，可以從Model中索要資料，讓函式可以反覆被使用。

由於韌體（Firmware，簡稱 FW）設計理念，希望著重在 Model 作為命令處理的主站，所以可以繪製出這樣的一張圖（圖3）。

透過底層針對不同的介面（如 CAN bus、RS485、UART、Bluetooth、Wi-Fi 等）進行 Port 處理，將資料轉發給 Model 進行溝通，再透過 Presenter 傳遞給 View，最終實現物件狀態的切換。

圖3. Multiple interface與MVP架構的溝通

因此，我們可以透過兩個範例來說明資料交換的流程：

Sample 1: Host 發送 CANopen 指令給 Device（圖4）

當 Host 發送 CANopen 指令時，CANopen 協議會透過 Interface port 接收封包，並由 CAN task 解譯封包內容。解析後的資料將被傳送至 Model，由 Model 更新資料庫並執行對應的命令操作。接著，結果會經由 Presenter 傳遞至 View，以完成畫面的更新。

圖4. Host發送命令實例

Sample 2: 使用者觸控 Device UI 元件，並回傳 touch event 至 Host（圖5）

當使用者點選有觸碰效果的物件，View本身會有一個click event發送出來，而後View 會透過User Event 由Presenter來到Model。Model再根據現在所使用的Interface去回送到CAN task的代碼上，最後根據CAN port做出TX 發送的封包對Host送達通知。

圖5. User touch event送回host實例

View頁面的相關知識淺說

在TouchGFX軟體介面上，設計N頁便會產生對應N組的View及Presenter，但只會有一組Model，用來做所有view page的控制。

當使用者設計出UI情境，包含圖形,樣貌,座標,文字顯示等,在按下Generate Code後，會在對應名稱的view page產生程式碼。

產生的資料夾有分 ..\generated\ 與 ..\gui\, 的路徑，通常 ..\generated\ 是設計頁面顯示的情境， ..\gui\ 是加上物件互動的邏輯。

我們可以透過這樣的訊息，去拉取物件在各自頁面上，並參考能設計與使用的代碼。

以下是個簡單的說明步驟，講解上述描述的部分:

例如:

1. 若我們先開啟一個空專案，並按Create建立一個Project(圖6)。

圖6. GFX開啟專案畫面

2. 在TouchGFX 內會有預設的Screen1,我們新增一個新物件button，選擇想要切換的圖資後,執行Generate Code。(圖7)

圖7. Create Button示意

3. 接下來切換到專案名稱的路徑底下會多兩個資料夾 gui 與 generated (圖8):

圖8. 專案資料夾內容

其中 generated 資料夾,下面放的是與GFX設計頁面的基礎代碼,存在著Screen1組成元件的有關Command及function。都是被TouchGFX 給Auto產生,不可被直接修改取代的。假如改動頁面的物件狀態再重建code，就會讓generated 資料夾下面的程式碼更新。

同樣的，可以發現GFX在執行Generate Code後，會在Screen1ViewBase.cpp 底下產 ..\generated\gui_generated\src\screen1_screen 的程式碼(圖9)

圖9. Screen1ViewBase.cpp位置

若將 Screen1ViewBase.cpp 用 Notepad++ 打開來看(圖10)。裡面是建構出Screen1頁面的屬性與button資料的內容

- 設置Button座標:
button1.setXY(63, 109);

- 設置Button圖片ID:
button1.setBitmaps(TouchGfx::Bitmap(BITMAP_BUTTON_00_00_ID),TouchGfx::Bitmap(BITMAP_BUTTON_00_00_ID));

- 將Button物件加入頁面使用:
Add(button1);

圖10. Screen1ViewBase.cpp內容

XXXBase.cpp 名稱的代碼,是會在Generate Code重建，修改掉變更的屬性資料。 因此,若我們調整Button的位置,圖片等,包括如上函式的Function都可能會變更。

至於 gui 資料夾,則是TouchGFX留給使用者去撰寫程式邏輯的位置(圖8)，所以MVP架構也建構在這之下(圖11)、(圖12)，我們可以透過自己規劃MVP的代碼溝通方式，實踐UI的設計方向。

圖11.Model 所在路徑

圖12. Presenter and View所在路徑

4. 我們可以設計出一個簡單情境來做更詳細的gui/generated設計說明:

- 撰寫一個button與 text互動的邏輯控制。
- 當點選button一次時，text數值增加。

以下是實現此功能的作法:

步驟一:

拖拉2個物件,一個button: button1與一個Text: textArea1物件(圖13)。

圖13.放置Button控制的UI設計專案

步驟二:

點選右側欄位的interactions，新增一個Button click Event， 並選擇當執行此動作後,會在程式裡呼叫 add_number 這個函式(圖14)

圖14.新增一個Interaction1 Event

步驟三:

觀察 Screen1ViewBase.cpp (圖15)可以發現有建立 button1 及 textArea1的相關屬性代碼。

並因為新增了interactions，產生了 buttonCallbackHandler 去承接button1觸碰的event,當點擊下去後，透過call back function尋找名稱為add_number的函式。

圖15: Screen1ViewBase.cpp

Screen1ViewBase.hpp 的內容(圖16)

圖16: Content of Screen1ViewBase.hpp

步驟四:

在gui底下添加的Screen1View.cpp 及 Screen1View.hpp.
新增程式add_number,利用count參數作數值的累加。(圖17)(圖18)

並用 Unicode: snprintf(textArea1Buffer, TEXTAREA1_SIZE, "%02d", count); 重新將改變後的count匯入到textArea1。

之後用textArea1.invalidate刷新資料。

圖17. Screen1View.cpp內容

圖18. Screen1View.hpp內容

執行模擬器後,即可確認每觸碰 button1, textArea1(count value)會從0開始添加數值(圖19)。

圖19.顯示模擬器結果

由此可以確認物件屬性的定義通常建立在generated路徑，使用者撰寫邏輯執行代碼則在 gui底下動作。

TouchGFX 與Builder參照的物件屬性範例

華凌提供的 Smart Display GUI Builder 是一款拖曳圖控物件UI/UX的介面設計工具，為客戶提供無需編程的使用服務，適合快速開發、設計有關的 ST MCU 產品；作為TouchGFX框架上的擴展延伸，GUI buidler整合了TouchGFX原有的Widget功能，其主要差異在支援多種不同的系統介面與通訊協議，讓使用者能夠直接觀察到指令是如何對Widget的控制變化。

以下是Builder的介紹:
https://www.winstar.com.tw/zh-tw/video/play/142.html

Smart Display GUI Builder 的設計與TouchGFX相關,包含fw撰寫是使用stm32 mcu建構出的MVP為基底，裡頭的物件都是用現有的item加上邏輯所設計而成。

因此從GUI Builder所開放的物件中,有些項目我們可以使用現有的TouchGFX UI Components去實現對應的顯示結果。

*補充說明片段

以下是一個簡單的例子,採用Builder的slider為說明(圖20):

圖20.Builder slider屬性頁面

Builder Slider的屬性如下:

Size:
- Width: 618
- Height: 20

Positions:
- Background Position (X): 0
- Background Position (Y): 4

Indicator Position:
- Min: 0
- Max: 580
- Pos: 0

 

這些參數是可以對應到TouchGFX裡面的Slider Component設定(圖21)。

圖21. TouchGFX的Slider屬性

TouchGFX Slider的屬性如下:

Location:
- Width: 618
- Height: 20

Positions:
- Background Position (X): 0
- Background Position (Y): 4

Indicator Position:
- Min: 0
- Max: 580
- Y: 0

使用者可以透過GFX調整Values的Start值去模擬它在Builder上面執行的結果(圖22)，若將值設為100，可在builder模擬出相同結果(圖23)。

圖22. TouchGFX中調整Start = 100

圖23. Builder中調整Test Value = 100

倘若我們將GFX generate code建構出的Screen1ViewBase.cpp拿來看(圖24)

圖24. Screen1ViewBase.cpp function

即可明白上列參數所用到的函式與程式可以如何被使用與修改 且這樣的數字是與GFX project的設計直接有關係。 也是當Builder upload project後,重新設定給Device的Slider初始參數。

假如Host對Device發送命令,去改變Slider的數值，則會在MVP架構中,在view 裡面執行slider1.setValue() 去完成物件的變化(圖25)。

圖 25: Host sends slider command

以上是簡易的Builder與TouchGFX的物件關聯說明。

未來Builder的物件延伸與開發評估

在確認TouchGFX有發表更新版本軟體:4.24.0,可以發現有一些新的物件與功能可供使用，倘若我們需要做Builder是否能導入評估的話,可以優先嘗試用GFX預設的範例來做Demo與研究(圖26):

圖26.各項範例Project

 

由於4.24.0版本有支援新的物件: QRcode
我們可以藉此評估若導入Builder可用的參數與函式

以下用QRcode做範例說明:

1. 選擇BlankUI
2. 拉取QRcode Container
3. 可觀察能設定使用的屬性有哪些(圖27):
Location: (X, Y)
Configuration:
- QRVersion
- Scale
- Text
- Error Correction Code…

圖27.QR code屬性畫面

相對的這些關於QRcode可以參考官網的說明圖(28)

圖28.官網說明

在 Screen1ViewBase.cpp產生的function中,確認屬性能動用與使用的參數與設定(圖29):

1.設定座標:qrCode1.setXY(208, 224);
2.設定QR code版本:qrCode1.setQRCodeVersion(3);
3.設定QR scale:qrCode1.setScale(5);
4.輸入文字產生QRcode圖碼:
qrCode1.convertStringToQRCode("https://www.winstar.com.tw/zh-tw/");

圖29. Screen1ViewBase.cpp產生碼

若未來Builder導入QRcode功能就可以開放這些能調整的參數給使用者設定。

參考資料:

https://support.TouchGfx.com/zh-TW/docs/category/introduction
https://www.eettaiwan.com/20200203np21/
https://zh.wikipedia.org/zh-tw/
https://www.winstar.com.tw/zh-tw/video/smartdisplay.html