點(diǎn)擊查看模擬器效果
在詳述實(shí)現(xiàn)過程之前,我們先看一下 ST 專家點(diǎn)評。
ST專家點(diǎn)評
從這個(gè)評測貼中我們可以看到這位同學(xué)給我們展示了如何使用STM32H750+TouchGFX開發(fā)平臺快速開發(fā)一個(gè)使用STM32H7對電機(jī)進(jìn)行控制的應(yīng)用。從UI設(shè)計(jì)的角度來看:UI的設(shè)計(jì)非常好,這位工程師對UI設(shè)計(jì)方面也是非常有心得的,由于UI設(shè)計(jì)的非常好,再加上TouchGFX Designer的布局和交互,設(shè)計(jì)出來的界面非常美觀。在UI設(shè)計(jì)方面,使用很多TouchGFX Designer自帶的控件進(jìn)行UI設(shè)計(jì),基礎(chǔ)控件:如圖片/文本/進(jìn)度條控件進(jìn)行基礎(chǔ)布局,使用滑動容器控件和靜態(tài)圖表控件用與實(shí)現(xiàn)子頁面滑動/圖表等功能;并通過TouchGFX 模擬器進(jìn)行仿真測試,很方便的開發(fā)出一款界面美觀交互友好的嵌入式GUI產(chǎn)品。
從數(shù)據(jù)處理的角度看:UI設(shè)計(jì)好后,通過MVP機(jī)制對UI和后端數(shù)據(jù)處理進(jìn)行分離對電機(jī)進(jìn)行控制,前后端分離,方便未來增加和擴(kuò)展更多功能。
從整體設(shè)計(jì)來看:設(shè)計(jì)的UI非常美觀,接近智能手機(jī)/手表的用戶體驗(yàn),功能實(shí)現(xiàn)比較完整. 是一個(gè)很好的的UI設(shè)計(jì)作品。
一、項(xiàng)目介紹
參加STM32論壇的STM32H750B-DK評測活動,利用提供的開發(fā)板做一個(gè)前期驗(yàn)證項(xiàng)目。驗(yàn)證項(xiàng)目是做一個(gè)手持的電機(jī)運(yùn)動節(jié)點(diǎn)維護(hù)設(shè)備,方便攜帶到現(xiàn)場對電機(jī)進(jìn)行維護(hù),這里暫且稱為PAD。(實(shí)物演示視頻見本文上方作品展示)PAD通過UART與電機(jī)控制節(jié)點(diǎn)連接通訊(如下圖所示),當(dāng)檢測到設(shè)備接入,PAD獲取其設(shè)備信息狀態(tài),包括固件版本、PCB版本、運(yùn)行日志等。通過PAD還可以控制電機(jī)做一些簡單的運(yùn)動測試,配置電機(jī)的運(yùn)動參數(shù),如加速度、速度、電流等。由于時(shí)間有限,目前僅實(shí)現(xiàn)上述功能。
二、開發(fā)板STM32H750B-DK
開發(fā)板資源豐富,本項(xiàng)目比較關(guān)注的資源情況:
Arm? Cortex?-M7 內(nèi)核(帶雙精度浮點(diǎn)單元),400MHz主頻
4.3英寸RGB LCD,電容屏
外擴(kuò)2 x 512Mbit Flash
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動效使用到的TouchGFX內(nèi)置的交互動作(Interactions Action)
Call new virtual function
Change screen
Move Widget
Fade Widget
Wait for
四、界面設(shè)計(jì)
不會UI設(shè)計(jì)的電子工程師不是好廚師,所以這一次親自操刀設(shè)計(jì),整體設(shè)計(jì)風(fēng)格采用我喜歡的“毛玻璃效果”。TouchGFX Designer的模擬器非常實(shí)用,大大提高了調(diào)試效率,以下圖片均來自模擬器的截圖。實(shí)際上,模擬器的顯示效果與直接目視比較接近,視頻拍出來的效果比實(shí)際差了不少,屏幕顏色不對,還有條紋。。。截圖只能看靜態(tài)效果,動態(tài)效果請大家觀看文章上方視頻演示。目前實(shí)現(xiàn)了5個(gè)界面:開機(jī)、連接、功能選擇、信息顯示、電機(jī)控制。
4.1 開機(jī)動畫
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)目中主要是檢測用戶在觸摸屏上的操作,轉(zhuǎn)換成相應(yīng)的UART命令發(fā)送至外部電機(jī)控制板;當(dāng)外部電機(jī)控制板的狀態(tài)發(fā)生變化時(shí),也會主動發(fā)送數(shù)據(jù)到開發(fā)板,此時(shí)GUI負(fù)責(zé)刷新界面顯示的相關(guān)內(nèi)容。MVP框架應(yīng)該是TouchGFX中不易掌握的部分,UI怎么和硬件交互?這個(gè)是根本,每個(gè)項(xiàng)目都會涉及到。這里以本項(xiàng)目中的UART為例說明一下,如何通過操作屏幕上的按鈕來控制UART發(fā)送數(shù)據(jù)。
以上述界面截圖中的STOP按鈕為例。在TouchGFX Designer中,我們給Screen1添加STOP按鈕,命名為con_stop(很多資料中介紹了這些基本操作,這里不再累述),我們要實(shí)現(xiàn)通過電擊此按鈕向UART發(fā)送數(shù)據(jù)。在界面右側(cè)的Interactions中添加con_stop按鈕的點(diǎn)擊事件。如圖上所示,觸發(fā)條件為按鈕點(diǎn)擊(序號1);觸發(fā)源選擇為con_stop按鈕(序號2);觸發(fā)執(zhí)行的動作為調(diào)用一個(gè)虛函數(shù),虛函數(shù)的名稱我們設(shè)定為con_stop_clicked(序號3)。然后按下F4執(zhí)行Generate Code生成代碼。TouchGFX Designer會自動生成這個(gè)函數(shù)的定義,在STM32cubeIDE中查看Screen1VeiwBase.hpp文件,可以看到此虛函數(shù)的聲明:
virtual void con_stop_clicked() { }
(1)手動在Screen1View.hpp文件中給Screen1View類添加此虛函數(shù):
virtual void con_stop_clicked();
手動在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ù)我們還沒有實(shí)現(xiàn),接下來給presenter添加這個(gè)函數(shù)。
(2)手動在Screen1Persenter.hpp中,給Screen1Persenter類中添加函數(shù)con_stop_clicked:
virtual void con_stop_clicked();
手動在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ù)我們也還沒實(shí)現(xiàn),接下來繼續(xù)。
手動在model.hpp文件中給Model類添加這個(gè)函數(shù):
void con_stop_clicked();
手動在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問。所以這里應(yīng)該使用信號量,改變信號量的狀態(tài)來通知Uart_Task任務(wù)實(shí)際發(fā)送數(shù)據(jù)到UART。
一波操作下來, View ---> Presenter ---> Model ---> UART,千山萬水有點(diǎn)麻煩,不過MVP的優(yōu)點(diǎn)還是很多的,想要了解更多大家可以問問百度。
六、總結(jié)
之前一直用LVGL,做過一些項(xiàng)目,也算是比較熟悉了。最近半年才開始使用 TouchGFX。一番體驗(yàn)下來不得不說,在 STM32上做 GUI 應(yīng)用 TouchGFX 確實(shí)很有優(yōu)勢,畢竟是 ST 親兒子,先天優(yōu)勢,生態(tài)全、控件多,實(shí)現(xiàn)各種炫酷效果不在話下。最方便的是幾乎不需要怎么優(yōu)化,不用操心什么 DMA2D、LDTC……,底層ST都幫你搞好了,跑起來效果就已經(jīng)非常流暢。ST 新出的 NeoChrom GPU 看介紹更牛X,有機(jī)會到要試試到底有多牛。
來源:STM32論壇網(wǎng)友moticsoft 版權(quán)歸原作者所有
直接轉(zhuǎn)載來源:STM32公眾號
免責(zé)聲明:本文為轉(zhuǎn)載文章,轉(zhuǎn)載此文目的在于傳遞更多信息,版權(quán)歸原作者所有。本文所用視頻、圖片、文字如涉及作品版權(quán)問題,請聯(lián)系小編進(jìn)行處理
審核編輯 黃宇
-
電機(jī)控制
+關(guān)注
關(guān)注
3534文章
1879瀏覽量
268799 -
STM32H750
+關(guān)注
關(guān)注
1文章
16瀏覽量
1758
發(fā)布評論請先 登錄
相關(guān)推薦
評論