點(diǎn)擊查看模擬器效果

在詳述實(shí)現(xiàn)過(guò)程之前，我們先看一下 ST 專家點(diǎn)評(píng)。

ST專家點(diǎn)評(píng)

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

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

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

一、項(xiàng)目介紹

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

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

開(kāi)發(fā)板資源豐富，本項(xiàng)目比較關(guān)注的資源情況：

Arm? Cortex?-M7 內(nèi)核（帶雙精度浮點(diǎn)單元），400MHz主頻

4.3英寸RGB LCD，電容屏

外擴(kuò)2 x 512Mbit Flash

擴(kuò)128 Mbit SDRAM

UART接口

持Chrom-ART圖形加速

三、設(shè)計(jì)工具

STM32CubeMX

STM32CubeIDE 1.9.0

TouchGFX Designer V4.20

項(xiàng)目中用到的TouchGFX資源

（1）控件（Widget）

Box

Button

Image

Slider

Static Graph

Swipe Container

Text Area

Texture Mapper

（2）實(shí)現(xiàn)UI動(dòng)效使用到的TouchGFX內(nèi)置的交互動(dòng)作（Interactions Action）

Call new virtual function

Change screen

Move Widget

Fade Widget

Wait for

四、界面設(shè)計(jì)

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

4.1 開(kāi)機(jī)動(dòng)畫(huà)

4.2 連接界面

4.3 功能選擇界面

4.4信息顯示界面

4.5電機(jī)控制界面

五、硬件交互

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

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

virtual void con_stop_clicked() { }

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

virtual void con_stop_clicked();

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

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

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

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

virtual void con_stop_clicked();

手動(dòng)在Screen1Persenter.cpp中添加這個(gè)函的實(shí)現(xiàn)：

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

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

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

void con_stop_clicked();

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

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

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

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

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

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

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

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

六、總結(jié)

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

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

直接轉(zhuǎn)載來(lái)源：STM32公眾號(hào)

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

審核編輯 黃宇