點(diǎn)擊查看模擬器效果
在詳述實(shí)現(xiàn)過(guò)程之前,我們先看一下 ST 專(zhuān)家點(diǎn)評(píng)。
ST專(zhuān)家點(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ī)/手表的用戶(hù)體驗(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ù),這里暫且稱(chēng)為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
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的全稱(chēng)為Model-View-Presenter,Model提供數(shù)據(jù),View負(fù)責(zé)顯示,Controller/Presenter負(fù)責(zé)邏輯的處理。在本項(xiàng)目中主要是檢測(cè)用戶(hù)在觸摸屏上的操作,轉(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ù)的名稱(chēng)我們?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類(lèi)添加此虛函數(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類(lèi)中添加函數(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類(lèi)添加這個(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)容類(lè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)行處理
審核編輯 黃宇
-
電機(jī)控制
+關(guān)注
關(guān)注
3512文章
1811瀏覽量
267339 -
STM32H750
+關(guān)注
關(guān)注
1文章
16瀏覽量
1638
發(fā)布評(píng)論請(qǐng)先 登錄
相關(guān)推薦
評(píng)論