▲作品展示

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

ST專家點評

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

從設計思路角度來看：這位同學進行設計前，首先使用思維導圖工具對應用的需求進行模塊化梳理，這個設計思路是非常推薦的。

一方面有利于進行UI界面規劃和設計，另一方面有助于通過TouchGFX提供的MVP機制對UI和后端數據處理進行分離，可以分開調試。

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

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

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

一、概述

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

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

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

二、硬件

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

三、軟件

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

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

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

當發生報警時，會有彈窗。同時，最上面會有報警狀態顯示，桌面上，的鈴鐺會閃爍。當按復位后，報警狀態全部消失。

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

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

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

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

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

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

網絡界面，用于配置網絡地址，每一個數字都是通過滑輪的方式進行修改的。

“關于”界面，顯示一些基本的信息。

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

四、總結

經過一段時間的開發設計，對TouchGFX的架構有了一個比較深入的掌握，對于后續項目產品中使用TouchGFX奠定了基礎。

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

來源：STM32論壇網友jinyi7016 版權歸原作者所有

直接轉載來源：STM32

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

審核編輯 黃宇