點擊查看模擬器效果

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

ST專家點評

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

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

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

一、項目介紹

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

二、開發(fā)板STM32H750B-DK

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

Arm? Cortex?-M7 內(nèi)核（帶雙精度浮點單元），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）實現(xiàn)UI動效使用到的TouchGFX內(nèi)置的交互動作（Interactions Action）

Call new virtual function

Change screen

Move Widget

Fade Widget

Wait for

四、界面設計

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

4.1 開機動畫

4.2 連接界面

4.3 功能選擇界面

4.4信息顯示界面

4.5電機控制界面

五、硬件交互

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

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

virtual void con_stop_clicked() { }

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

virtual void con_stop_clicked();

手動在Screen1View.cpp中添加此虛函數(shù)的實現(xiàn)部分：

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

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

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

virtual void con_stop_clicked();

手動在Screen1Persenter.cpp中添加這個函的實現(xiàn)：

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

（3）上面這個函數(shù)調(diào)用了model中的函數(shù)con_stop_clicked（這個函數(shù)名也可以自己定），好吧實際上這個函數(shù)我們也還沒實現(xiàn)，接下來繼續(xù)。

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

void con_stop_clicked();

手動在model.cpp中添加上面函數(shù)的實現(xiàn)部分。

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

uart_send_cmd_stop()函數(shù)上就是發(fā)送UART數(shù)據(jù)的部分了，通常情況下是在uart.c中實現(xiàn)的，內(nèi)容類似下面這個。

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

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

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

實際上這里偷懶了。項目中使用了FreeRTOS，有一個Uart_Task任務，負責UART的數(shù)據(jù)收發(fā)處理。在多任務的情況下，多個任務涉及同一個硬件應該確?；コ庠L問。所以這里應該使用信號量，改變信號量的狀態(tài)來通知Uart_Task任務實際發(fā)送數(shù)據(jù)到UART。

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

六、總結(jié)

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

來源：STM32論壇網(wǎng)友moticsoft 版權(quán)歸原作者所有

直接轉(zhuǎn)載來源：STM32公眾號

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

審核編輯 黃宇