點擊查看模擬器效果

在詳述實現(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 內核（帶雙精度浮點單元），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內置的交互動作（Interactions Action）

Call new virtual function

Change screen

Move Widget

Fade Widget

Wait for

四、界面設計

不會UI設計的電子工程師不是好廚師，所以這一次親自操刀設計，整體設計風格采用我喜歡的“毛玻璃效果”。TouchGFX Designer的模擬器非常實用，大大提高了調試效率，以下圖片均來自模擬器的截圖。實際上，模擬器的顯示效果與直接目視比較接近，視頻拍出來的效果比實際差了不少，屏幕顏色不對，還有條紋。。。截圖只能看靜態(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負責邏輯的處理。在本項目中主要是檢測用戶在觸摸屏上的操作，轉換成相應的UART命令發(fā)送至外部電機控制板；當外部電機控制板的狀態(tài)發(fā)生變化時，也會主動發(fā)送數(shù)據(jù)到開發(fā)板，此時GUI負責刷新界面顯示的相關內容。MVP框架應該是TouchGFX中不易掌握的部分，UI怎么和硬件交互？這個是根本，每個項目都會涉及到。這里以本項目中的UART為例說明一下，如何通過操作屏幕上的按鈕來控制UART發(fā)送數(shù)據(jù)。

以上述界面截圖中的STOP按鈕為例。在TouchGFX Designer中，我們給Screen1添加STOP按鈕，命名為con_stop（很多資料中介紹了這些基本操作，這里不再累述），我們要實現(xiàn)通過電擊此按鈕向UART發(fā)送數(shù)據(jù)。在界面右側的Interactions中添加con_stop按鈕的點擊事件。如圖上所示，觸發(fā)條件為按鈕點擊（序號1）；觸發(fā)源選擇為con_stop按鈕（序號2）；觸發(fā)執(zhí)行的動作為調用一個虛函數(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ù)調用了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ù)調用了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)的，內容類似下面這個。

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)點還是很多的，想要了解更多大家可以問問百度。

六、總結

之前一直用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 版權歸原作者所有

直接轉載來源：STM32公眾號

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

審核編輯 黃宇