▲作品展示

在詳述實(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è)GUI產(chǎn)品-無(wú)線測(cè)溫集中器。

從設(shè)計(jì)思路角度來(lái)看：這位同學(xué)進(jìn)行設(shè)計(jì)前，首先使用思維導(dǎo)圖工具對(duì)應(yīng)用的需求進(jìn)行模塊化梳理，這個(gè)設(shè)計(jì)思路是非常推薦的。

一方面有利于進(jìn)行UI界面規(guī)劃和設(shè)計(jì)，另一方面有助于通過(guò)TouchGFX提供的MVP機(jī)制對(duì)UI和后端數(shù)據(jù)處理進(jìn)行分離，可以分開(kāi)調(diào)試。

這位同學(xué)也提到，由于UI image/font資源多的時(shí)候，下載板卡會(huì)比較慢，因此UI開(kāi)發(fā)可以先使用TouchGFX Designer的模擬器進(jìn)行調(diào)試，當(dāng)后端數(shù)據(jù)處理部分調(diào)試好后然后再與UI部分通過(guò)MVP集成。

從數(shù)據(jù)處理的角度看：從功能實(shí)現(xiàn)的角度來(lái)看無(wú)線測(cè)溫集中器的應(yīng)用功能UI部分的實(shí)現(xiàn)比較完整，交互也比較友好。該設(shè)計(jì)包含了多個(gè)界面(主界面/實(shí)時(shí)曲線/歷史曲線/設(shè)備配置/時(shí)鐘顯示/關(guān)于)，這些界面的實(shí)現(xiàn)和界面間切換以及數(shù)據(jù)的展示和讀取。

從整體設(shè)計(jì)來(lái)看：看起來(lái)復(fù)雜的GUI+數(shù)據(jù)處理應(yīng)用,由于TouchGFX Designer提供了很多常用的控件，如:文本顯示/圖片顯示/容器/界面切換/動(dòng)態(tài)，靜態(tài)曲線/時(shí)鐘等控件，就非常容易的通過(guò)所見(jiàn)即所得+拖拽的方式進(jìn)行快速設(shè)計(jì)，通過(guò)交互配置就可以實(shí)現(xiàn)頁(yè)面切換，然后通過(guò)MVP進(jìn)行數(shù)據(jù)展示，是一個(gè)很好的參考設(shè)計(jì)。

一、概述

此項(xiàng)目實(shí)際應(yīng)用，并非使用STM32H750B芯片，顯示屏也是7寸的RGB屏，所以，此項(xiàng)目只是使用此開(kāi)發(fā)板實(shí)現(xiàn)GUI的功能，后期將GUI移植到具體的項(xiàng)目中。

整個(gè)項(xiàng)目的大體框架如下：

無(wú)線數(shù)據(jù)的讀取是通過(guò)一個(gè)SPI的Lora 模塊通訊的，讀取大量測(cè)溫模塊發(fā)出的溫度，由于全程都是無(wú)線的通訊方式，需要一臺(tái)可以顯示能進(jìn)行人機(jī)交互的設(shè)備來(lái)管理這些模塊。

二、硬件

GUI運(yùn)行硬件平臺(tái)為STM32H750B-DK開(kāi)發(fā)板。硬件層的程序最終是基于我司的平臺(tái)，所以，此次測(cè)評(píng)主要集中在GUI上。很多底層的程序移植過(guò)來(lái)也用不上，而且時(shí)間比較長(zhǎng)，邏輯也比較復(fù)雜。連接上隨開(kāi)始板送的傳感器與一個(gè)RTC模塊。

三、軟件

于是，本次的UI就采用仿win10桌面的一種方式。要美觀的話還是要大量的貼圖，所以先用一些簡(jiǎn)單的圖標(biāo)進(jìn)行代替?！白烂妗钡恼w布局使用自定義控件的方式，把任務(wù)欄與開(kāi)始菜單先做成自定義容器，在每個(gè)界面中添加這個(gè)容器。再實(shí)現(xiàn)每個(gè)界面 不同的功能。界面設(shè)計(jì)，大部分工作是使用TouchGFX 4.19.1 Designer 完成的，一些邏輯，要當(dāng)特定的源文件中修改代碼與添加相應(yīng)的函數(shù)實(shí)現(xiàn)的。

任務(wù)欄可以打開(kāi)開(kāi)始菜單，右側(cè)為顯示桌面功能。開(kāi)始菜單中的幾個(gè)圖標(biāo)，可以進(jìn)行不同的screen之間的切換。每個(gè)screen中都添加這個(gè)任務(wù)欄的容器，這樣每個(gè)sreen之間都可以自由的切換了。

桌面，顯示溫濕度傳感器的數(shù)據(jù)，顯示無(wú)線信號(hào)強(qiáng)度，顯示報(bào)警狀態(tài)，有消音功能。如果沒(méi)有有效的無(wú)線信號(hào)，信號(hào)強(qiáng)度圖標(biāo)會(huì)從低到高閃爍，以示在搜索信號(hào)。

當(dāng)發(fā)生報(bào)警時(shí)，會(huì)有彈窗。同時(shí)，最上面會(huì)有報(bào)警狀態(tài)顯示，桌面上，的鈴鐺會(huì)閃爍。當(dāng)按復(fù)位后，報(bào)警狀態(tài)全部消失。

也可以按一下鈴鐺，進(jìn)行靜音。

實(shí)時(shí)動(dòng)態(tài)顯示功能，這里分不同的線路，每條線路分為A，B，C三相，使用不同的顏色區(qū)分。中間增加一個(gè)滾輪，用于切換不同的線路號(hào)。這里顯示的應(yīng)該是溫度曲線，方便調(diào)試，增加了可修改周期的正弦曲線，線路號(hào)越大，周期越大。無(wú)線測(cè)溫一般測(cè)量電纜接頭或是斷路器的位置，所以，分三相顯示。

歷史記錄可顯示報(bào)警信息發(fā)生時(shí)前后的溫度記錄，也是通過(guò)滾輪來(lái)切換的。這里的數(shù)據(jù)，是暫時(shí)的，實(shí)際使用時(shí)，要先讀取存儲(chǔ)介質(zhì)上的數(shù)據(jù)再顯示的。

配置界面，可配置報(bào)警開(kāi)關(guān)，與報(bào)警溫度的設(shè)置。溫度設(shè)置通過(guò)獨(dú)立設(shè)計(jì)的一個(gè)虛擬鍵盤(pán)來(lái)輸入。

時(shí)鐘界面用一個(gè)模擬時(shí)鐘，通過(guò)讀取RTC的數(shù)據(jù)來(lái)顯示時(shí)間。

報(bào)警記錄，通過(guò)方向鍵來(lái)切換要顯示的報(bào)警信息。

網(wǎng)絡(luò)界面，用于配置網(wǎng)絡(luò)地址，每一個(gè)數(shù)字都是通過(guò)滑輪的方式進(jìn)行修改的。

“關(guān)于”界面，顯示一些基本的信息。

右上角有一根燈繩，只要點(diǎn)一下，會(huì)下拉一個(gè)界面。

四、總結(jié)

經(jīng)過(guò)一段時(shí)間的開(kāi)發(fā)設(shè)計(jì)，對(duì)TouchGFX的架構(gòu)有了一個(gè)比較深入的掌握，對(duì)于后續(xù)項(xiàng)目產(chǎn)品中使用TouchGFX奠定了基礎(chǔ)。

使用TouchGFX Designer進(jìn)行界面的設(shè)計(jì)，大大的減少了設(shè)計(jì)所用的時(shí)間，完整的PC仿真方案，不用每次燒寫(xiě)調(diào)度，進(jìn)一步減少了開(kāi)發(fā)周期。GUI的設(shè)計(jì)，大部分使用TouchGFX Designer就可以完成，TouchGFX Designer自帶的一些動(dòng)畫(huà)、關(guān)聯(lián)功能，不需要大量的美工，就可以做出比較完善、美觀的UI。幾乎適應(yīng)于任何應(yīng)用項(xiàng)目中。

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

直接轉(zhuǎn)載來(lái)源：STM32

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

審核編輯 黃宇