點擊查看模擬器效果

在詳述實現過程之前，我們先看一下 ST 專家點評。

ST專家點評

從這個評測貼中我們可以看到這位同學給我們展示了如何使用STM32H750+TouchGFX開發平臺快速開發一個使用STM32H7對電機進行控制的應用。從UI設計的角度來看：UI的設計非常好，這位工程師對UI設計方面也是非常有心得的，由于UI設計的非常好，再加上TouchGFX Designer的布局和交互，設計出來的界面非常美觀。在UI設計方面，使用很多TouchGFX Designer自帶的控件進行UI設計，基礎控件:如圖片/文本/進度條控件進行基礎布局，使用滑動容器控件和靜態圖表控件用與實現子頁面滑動/圖表等功能；并通過TouchGFX 模擬器進行仿真測試，很方便的開發出一款界面美觀交互友好的嵌入式GUI產品。

從數據處理的角度看：UI設計好后，通過MVP機制對UI和后端數據處理進行分離對電機進行控制，前后端分離，方便未來增加和擴展更多功能。

從整體設計來看：設計的UI非常美觀，接近智能手機/手表的用戶體驗,功能實現比較完整. 是一個很好的的UI設計作品。

一、項目介紹

參加STM32論壇的STM32H750B-DK評測活動，利用提供的開發板做一個前期驗證項目。驗證項目是做一個手持的電機運動節點維護設備，方便攜帶到現場對電機進行維護，這里暫且稱為PAD。（實物演示視頻見本文上方作品展示）PAD通過UART與電機控制節點連接通訊（如下圖所示），當檢測到設備接入，PAD獲取其設備信息狀態，包括固件版本、PCB版本、運行日志等。通過PAD還可以控制電機做一些簡單的運動測試，配置電機的運動參數，如加速度、速度、電流等。由于時間有限，目前僅實現上述功能。

二、開發板STM32H750B-DK

開發板資源豐富，本項目比較關注的資源情況：

Arm? Cortex?-M7 內核（帶雙精度浮點單元），400MHz主頻

4.3英寸RGB LCD，電容屏

外擴2 x 512Mbit Flash

擴128 Mbit SDRAM

UART接口

持Chrom-ART圖形加速

三、設計工具

STM32CubeMX

STM32CubeIDE 1.9.0

TouchGFX Designer V4.20

項目中用到的TouchGFX資源

（1）控件（Widget）

Box

Button

Image

Slider

Static Graph

Swipe Container

Text Area

Texture Mapper

（2）實現UI動效使用到的TouchGFX內置的交互動作（Interactions Action）

Call new virtual function

Change screen

Move Widget

Fade Widget

Wait for

四、界面設計

不會UI設計的電子工程師不是好廚師，所以這一次親自操刀設計，整體設計風格采用我喜歡的“毛玻璃效果”。TouchGFX Designer的模擬器非常實用，大大提高了調試效率，以下圖片均來自模擬器的截圖。實際上，模擬器的顯示效果與直接目視比較接近，視頻拍出來的效果比實際差了不少，屏幕顏色不對，還有條紋。。。截圖只能看靜態效果，動態效果請大家觀看文章上方視頻演示。目前實現了5個界面：開機、連接、功能選擇、信息顯示、電機控制。

4.1 開機動畫

4.2 連接界面

4.3 功能選擇界面

4.4信息顯示界面

4.5電機控制界面

五、硬件交互

使用TouchGFX的MVP框架實現GUI與硬件的雙向交互。MVP的全稱為Model-View-Presenter，Model提供數據，View負責顯示，Controller/Presenter負責邏輯的處理。在本項目中主要是檢測用戶在觸摸屏上的操作，轉換成相應的UART命令發送至外部電機控制板；當外部電機控制板的狀態發生變化時，也會主動發送數據到開發板，此時GUI負責刷新界面顯示的相關內容。MVP框架應該是TouchGFX中不易掌握的部分，UI怎么和硬件交互？這個是根本，每個項目都會涉及到。這里以本項目中的UART為例說明一下，如何通過操作屏幕上的按鈕來控制UART發送數據。

以上述界面截圖中的STOP按鈕為例。在TouchGFX Designer中，我們給Screen1添加STOP按鈕，命名為con_stop（很多資料中介紹了這些基本操作，這里不再累述），我們要實現通過電擊此按鈕向UART發送數據。在界面右側的Interactions中添加con_stop按鈕的點擊事件。如圖上所示，觸發條件為按鈕點擊（序號1）；觸發源選擇為con_stop按鈕（序號2）；觸發執行的動作為調用一個虛函數，虛函數的名稱我們設定為con_stop_clicked（序號3）。然后按下F4執行Generate Code生成代碼。TouchGFX Designer會自動生成這個函數的定義，在STM32cubeIDE中查看Screen1VeiwBase.hpp文件，可以看到此虛函數的聲明：

virtual void con_stop_clicked() { }

（1）手動在Screen1View.hpp文件中給Screen1View類添加此虛函數：

virtual void con_stop_clicked();

手動在Screen1View.cpp中添加此虛函數的實現部分：

voidScreen1lView::con_stop_clicked()
{
presenter->con_stop_clicked();
}

上面這個函數調用了presenter中的con_stop_clicked()函數（函數名可以自己定），實際上這個函數我們還沒有實現，接下來給presenter添加這個函數。

（2）手動在Screen1Persenter.hpp中，給Screen1Persenter類中添加函數con_stop_clicked：

virtual void con_stop_clicked();

手動在Screen1Persenter.cpp中添加這個函的實現：

voidScreen1Presenter::con_stop_clicked()
{
model->con_stop_clicked();
}

（3）上面這個函數調用了model中的函數con_stop_clicked（這個函數名也可以自己定），好吧實際上這個函數我們也還沒實現，接下來繼續。

手動在model.hpp文件中給Model類添加這個函數：

void con_stop_clicked();

手動在model.cpp中添加上面函數的實現部分。

voidModel::con_stop_clicked()
{
uart_send_cmd_stop();
}

uart_send_cmd_stop()函數上就是發送UART數據的部分了，通常情況下是在uart.c中實現的，內容類似下面這個。

HAL_UART_Transmit( huart1, (const uint8_t*) str, len, 1000);

在model.cpp中我們把uart_send_cmd_stop()這個函數作為外部函數引入：

extern"C"
{
externvoiduart_send_cmd_stop();
}
#endif

實際上這里偷懶了。項目中使用了FreeRTOS，有一個Uart_Task任務，負責UART的數據收發處理。在多任務的情況下，多個任務涉及同一個硬件應該確保互斥訪問。所以這里應該使用信號量，改變信號量的狀態來通知Uart_Task任務實際發送數據到UART。

一波操作下來， View ---> Presenter ---> Model ---> UART，千山萬水有點麻煩，不過MVP的優點還是很多的，想要了解更多大家可以問問百度。

六、總結

之前一直用LVGL，做過一些項目，也算是比較熟悉了。最近半年才開始使用 TouchGFX。一番體驗下來不得不說，在 STM32上做 GUI 應用 TouchGFX 確實很有優勢，畢竟是 ST 親兒子，先天優勢，生態全、控件多，實現各種炫酷效果不在話下。最方便的是幾乎不需要怎么優化，不用操心什么 DMA2D、LDTC……，底層ST都幫你搞好了，跑起來效果就已經非常流暢。ST 新出的 NeoChrom GPU 看介紹更牛X，有機會到要試試到底有多牛。

來源：STM32論壇網友moticsoft 版權歸原作者所有

直接轉載來源：STM32公眾號

免責聲明：本文為轉載文章，轉載此文目的在于傳遞更多信息，版權歸原作者所有。本文所用視頻、圖片、文字如涉及作品版權問題，請聯系小編進行處理

審核編輯 黃宇