▲作品展示

在詳述實現(xiàn)過程之前，我們先看一下 ST 專家點評。

ST專家點評

從這個評測貼中我們可以看到這位同學(xué)給我們展示了如何使用STM32H750+TouchGFX開發(fā)平臺快速開發(fā)一個GUI產(chǎn)品-無線測溫集中器。

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

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

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

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

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

一、概述

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

整個項目的大體框架如下：

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

二、硬件

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

三、軟件

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

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

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

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

也可以按一下鈴鐺，進行靜音。

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

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

配置界面，可配置報警開關(guān)，與報警溫度的設(shè)置。溫度設(shè)置通過獨立設(shè)計的一個虛擬鍵盤來輸入。

時鐘界面用一個模擬時鐘，通過讀取RTC的數(shù)據(jù)來顯示時間。

報警記錄，通過方向鍵來切換要顯示的報警信息。

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

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

右上角有一根燈繩，只要點一下，會下拉一個界面。

四、總結(jié)

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

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

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

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

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

審核編輯 黃宇