STM32單片機項目實例：基于TouchGFX的智能手表設計（2）UI交互邏輯的設計

目錄

一、UI交互邏輯的設計

1.1?硬件平臺的資源

1.2?界面切換功能

???????1.3?表盤界面

1.4?運動界面

???????1.6?設置界面

???????1.7?應用界面

---

一、UI交互邏輯的設計

1.1?硬件平臺的資源

STM32U5核心板采用STM32U575RIT6微控制器，基于32位Cortex-M33內(nèi)核，運行頻率可達160MHz，內(nèi)部Flash容量為2MB，RAM容量786KB。核心板采用最小系統(tǒng)設計，板載16MB的Flash存儲器，用于存儲大容量數(shù)據(jù)，例如圖片(分辨率240*320的16位彩色圖片大小240*320*16=150KB)、升級的固件等等。供電端口采用USB TypeC接口，板載USB轉(zhuǎn)UART芯片，用于ISP功能或串口調(diào)試。核心板提供復位、BOOT與用戶按鍵，提供2.8寸電容觸摸屏接口。核心板提供電源指示燈與運行指示燈（用戶編程控制）。

?圖 1-1?STM32U5核心板資源

? STM32開發(fā)板底板，支持5V電源適配器與TypeC供電。提供RTC時鐘電源，提供三軸加速度與角速度傳感器，用于姿態(tài)感知。板載ESP-12F無線模組，用于物聯(lián)網(wǎng)云平臺項目開發(fā)。提供1路五向按鍵，采用中斷與A/D模式采樣。提供1路有源蜂鳴器，1路2*17P擴展接口，用于資源擴展板的接入。核心板接口通過2.54mm間距的插針引出，方便用戶外接其它設備。

圖 1-2?STM32開發(fā)板底板

? 電容觸摸顯示屏在很多智能設備上得到應用，提升了設備的交互感。在開發(fā)板套件中使用方型顯示屏用來模擬圓形的一個手表項目。顯示屏尺寸為2.8寸，分辨率320*240(RGB)。驅(qū)動IC采用ILI9341，自帶172,800字節(jié)的 GRAM存儲。電容觸摸屏采用I2C接口，驅(qū)動IC采用FT6336G。

圖 1-3?2.8寸顯示屏

? 資源擴展板提供基于I2C總線的溫濕度傳感器、環(huán)境光感知、心率/脈搏測量?；谀?shù)轉(zhuǎn)換接口的電壓/電流采集?；贓XTI事件/中斷控制類型的人體紅外、光電開關(guān)、火焰感知傳感器?；赟PI總線的數(shù)碼管驅(qū)動電路。基于PWM控制的風扇、蜂鳴器、震動馬達?；贕PIO的按鍵、LED指示燈。基于異步串行通信的485總線電平轉(zhuǎn)換?；诳刂破骶钟蚓W(wǎng)總線的CAN電平轉(zhuǎn)換等外設。資源擴展板主要用于微控制器入門外設的使用，硬件圖紙原理以及項目案例的應用開發(fā)學習。

圖 1-4?資源擴展板

? 仿真器在單片機程序開發(fā)過程中起著重要的作用。通過仿真器，使開發(fā)者能夠在計算機上運行和調(diào)試單片機程序，開發(fā)者可以逐步執(zhí)行程序并觀察變量的值、寄存器的狀態(tài)以及程序的執(zhí)行流程，從而快速發(fā)現(xiàn)和解決程序中的錯誤。推薦采用的仿真器：FS-DAP-Link或者ST-LINK V3.0，用于程序燒寫和仿真調(diào)試。

圖 1-5?華清遠見DAP-Link/ST-Link仿真器

? 基于TouchGFX的智能手表項目，硬件包含STM32U5核心板、底板、2.8寸顯示屏、資源擴展板以及仿真器，進行智能手表的設計。手表主要功能包括健康監(jiān)測、運動模式、環(huán)境檢測、電池電量檢測、RTC時鐘、狀態(tài)提醒、模式切換（運行/待機，LPBAM功能演示）和網(wǎng)絡連接等功能。

???????1.2?界面切換功能

? 開發(fā)板套件包含了豐富的傳感與控制資源，智能手表項目可以通過這些資源，實現(xiàn)許多有趣的功能。作為手表，時間的顯示是必不可少的。項目設計了表盤頁面，表盤界面主要負責時間的顯示，除此之外，心率、步數(shù)、溫度、日期等信息由于查看頻率相對較高，且不需要太復雜的交互，在表盤頁面上進行了這些信息的顯示。

? 運動功能是目前市面上的大部分智能手表的主打賣點之一，手表可以通過陀螺儀、心率傳感器等等外設檢測用戶的運動狀態(tài)與健康監(jiān)測，并對其運動進行記錄，符合現(xiàn)代人對健康的追求。因此本項目設計了運動模式頁面。在該頁面中，不同的運動功能以列表的形式展示。用戶可以通過手指的上下滑動瀏覽不同的運動種類，且可以通過點擊相應的運動圖標切換到對應運動的記錄頁面。

? 智能手表的應用程序很多，在項目中增加了應用頁面，與實際手表不同的是，該頁面下的應用程序主要用于UI控件的學習與使用。在該頁面中，不同的應用程序圖標以列表的形式展示。用戶可以通過手指的上下滑動瀏覽不同的應用程序，且可以通過點擊相應的應用程序圖標切換到對應的應用程序頁面。由于本項目為單片機裸機編程實現(xiàn)智能手表功能的項目，因此無法實現(xiàn)app的安裝，在應用程序頁面以操作不同的外設，實現(xiàn)對應用程序功能的模擬。

? 在設置界面與工具頁面，包含智能手表的常用小工具或快捷設置功能，在表盤頁面通過物理按鍵的方式進行頁面的切換。

? 除此之外，需要設計在表盤頁面、運動頁面、工具界面、應用頁面以及設置界面之間的切換方法。項目中使用開發(fā)板上的五向按鍵完成頁面的切換。在表盤頁面上按切換到應用界面，下按切換到設置頁面；在應用程序中，通過五向按鍵的中間按鍵切換回應用界面。

圖 1-6?基于TouchGFX的智能手表界面

???????1.3?表盤界面

? 智能手表的時間可以通MCU內(nèi)部的RTC時鐘功能產(chǎn)生，優(yōu)點是成本低，缺點是時鐘精度不高。也可以通過外置的RTC實時時鐘芯片進行獲取，缺點是成本會增加。在本項目中，采用STM32U575的內(nèi)部RTC時鐘功能與備份域寄存器，實現(xiàn)時間的設置與產(chǎn)生。

? 項目中設計了兩個時間顯示的頁面，分別是模擬時鐘表盤頁面與數(shù)字時鐘表盤頁面。這兩種時鐘表盤的設計是目前市面上絕大多數(shù)智能手表或傳統(tǒng)手表采用的時間顯示方法。采用左右滑動的方式進行表盤切換。

圖 1-7?表盤界面

1.4?運動界面

? “智能可穿戴”這個理念現(xiàn)在深入人心，從智能手表、智能手環(huán)，到其他一系列智能可穿戴設備，都有著類似的功能，例如追蹤身體運動，監(jiān)測溫度、血氧飽和度、心率等等。在這些功能的背后，是傳感器技術(shù)的應用。以運動傳感器和生物傳感器為例，可穿戴設備的運動傳感器可以隨時隨地測量、記錄和分析人體的活動情況，用戶可以知道跑步步數(shù)、游泳圈數(shù)、騎車距離、能量消耗和睡眠時間等；而生物傳感器則可以通過動態(tài)的、非侵入性測量的方式對心率、血氧飽和度、心電、腦電波等狀況進行連續(xù)的、實時的監(jiān)測，用戶可以實時觀察“健康信號”，及時發(fā)現(xiàn)并處理身體出現(xiàn)的異常狀況。

? STM32開發(fā)板底板包含一個六軸運動傳感器MPU6050，MPU6050 是 InvenSense 公司推出的全球首款整合性 6 軸運動處理組件，相較于多組件方案，免除了組合陀螺儀與加速器時之軸間差的問題，減少了安裝空間。MPU6050 內(nèi)部整合了 3 軸陀螺儀和 3 軸加速度傳感器，并且含有一個第二 IIC 接口，可用于連接外部磁力傳感器，并利用自帶的數(shù)字運動處理器（DMP: Digital Motion Processor）硬件加速引擎，通過主 IIC 接口，向應用端輸出完整的 9 軸融合演算數(shù)據(jù)。有了 DMP，我們可以使用 InvenSense 公司提供的運動處理資料庫，非常方便的實現(xiàn)姿態(tài)解算，降低了運動處理運算對操作系統(tǒng)的負荷，同時大大降低了開發(fā)難度。

? 運動界面采用物理按鍵觸發(fā)進入。在運動界面采用上下滑屏的方式，實現(xiàn)戶外步行、戶外跑步、室內(nèi)游泳、自由訓練與戶外騎行模式間的切換，上下滑屏的邏輯部分采用C++代碼編寫，五種運動模式，主要實現(xiàn)戶外步行模式的應用。

圖 1-8?運動界面

1. 1. 工具界面

? 工具界面主要包含倒計時、呼吸訓練、壓力訓練以及快捷支付等。該界面不涉及太復雜的UI交互邏輯，主要用到TouchGFX的按鈕控件與界面的交互設置。在快捷支付方面，實現(xiàn)了二維碼頁面的彈出與返回。

圖 1-9?工具界面

???????1.6?設置界面

? 設置界面用于系統(tǒng)的便捷設置，例如靜音、排水、低功耗、信息等功能，設置界面通過物理按鍵進行切換，設置界面根據(jù)開發(fā)板的資源，實現(xiàn)靜音、背光亮度、排水以及低功耗模式的應用?？旖菰O置界面實現(xiàn)排水功能，點擊排水后，振動電機啟動4秒后停止。

?

圖 1-10?設置界面?

???????1.7?應用界面

? 應用界面主要包含健康監(jiān)測、姿態(tài)信息、環(huán)境信息、芯片信息、設備控制、電源電壓以及無線連接七個應用，應用界面中采用上下滑動的交互方式，通過點擊應用的圖標進入應用程序。在應用程序中，通過物理按鍵切換回應用界面。

健康監(jiān)測

? 資源擴展板上搭載了心率血氧傳感器MAX30102?？梢詫崿F(xiàn)心率、血氧數(shù)據(jù)的讀取。在表盤頁面設計了心率信息的實時顯示。如下圖所示，心率血氧檢測頁面可以通過應用頁面點擊相應圖標進入。

圖 1-11?健康監(jiān)測頁面

姿態(tài)信息

? 開發(fā)板上搭載了MPU6050陀螺儀，通過陀螺儀可以實現(xiàn)歐拉角的讀取以及步數(shù)信息的讀取。在表盤頁面設計了步數(shù)信息的實時顯示。如下圖所示，陀螺儀頁面可以通過應用頁面點擊陀螺儀圖標切換進入。在該頁面可以完成歐拉角的實時顯示（包括橫滾、俯仰、偏航角）。

圖 1-12?姿態(tài)感知頁面

環(huán)境信息

? ?開發(fā)板上搭載了光照傳感器AP3216C、溫濕度傳感器SI7006/SHT20?？梢詫崿F(xiàn)溫濕度以及光照的信息讀取。在表盤頁面設計了溫度信息的實時顯示。如下圖所示，溫濕度光照可以通過應用頁面點擊相應圖標進入。在該頁面中可以完成溫度、濕度、光照度信息的實時更新和顯示。

圖 1-13?環(huán)境信息頁面

芯片信息

? 通過ADC內(nèi)部/外部通道，可以實時監(jiān)測芯片溫度、VREF、RTC等數(shù)據(jù)。如下圖所示，芯片電壓測量頁面可以通過應用頁面點擊相應圖標進入?？梢栽谠擁撁鎸崟r顯示芯片溫度、VREF、RTC電池等數(shù)據(jù)。

圖 1-14?芯片信息頁面

設備控制

? 開發(fā)板與資源擴展板搭載了振動馬達\蜂鳴器\風扇，可以實現(xiàn)對震動馬達、蜂鳴器、風扇控制的功能。如下圖所示，振動馬達及蜂鳴器頁面可以通過應用頁面點擊相應圖標進入。可以在該頁面控制振動馬達及蜂鳴器，點擊相應按鈕即可打開或關(guān)閉相應的外設，按鈕按下后會有狀態(tài)的變化。

圖 1-15?設備控制頁面

電源電壓

? 可以通過ADC測量資源擴展板的電位器電壓，資源擴展板的電流來模擬電池電量的采集與顯示，該頁面的電池圖標與顯示電位器的實時電壓，采集的電流進行動態(tài)顯示與繪制波形。

圖 1-16?電源電壓頁面

無線連接

? 開發(fā)板上搭載了ESP8266無線WIFI模塊，可以實現(xiàn)WIFI連接的功能。通過手機生成熱點，熱點名稱HQYJ-YF，密碼STM32G070，點擊下面的無線連接后，文本框顯示連接信息，連接成功，獲取連接的RSSI值，并進行顯示。

圖 1-17?無線連接頁面