STM32單片機(jī)項目實(shí)例：基于TouchGFX的智能手表設(shè)計（2）UI交互邏輯的設(shè)計

目錄

一、UI交互邏輯的設(shè)計

1.1?硬件平臺的資源

1.2?界面切換功能

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

1.4?運(yùn)動界面

???????1.6?設(shè)置界面

???????1.7?應(yīng)用界面

---

一、UI交互邏輯的設(shè)計

1.1?硬件平臺的資源

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

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

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

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

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

圖 1-3?2.8寸顯示屏

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

圖 1-4?資源擴(kuò)展板

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

圖 1-5?華清遠(yuǎn)見DAP-Link/ST-Link仿真器

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

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

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

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

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

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

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

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

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

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

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

圖 1-7?表盤界面

1.4?運(yùn)動界面

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

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

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

圖 1-8?運(yùn)動界面

1. 1. 工具界面

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

圖 1-9?工具界面

???????1.6?設(shè)置界面

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

?

圖 1-10?設(shè)置界面?

???????1.7?應(yīng)用界面

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

健康監(jiān)測

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

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

姿態(tài)信息

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

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

環(huán)境信息

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

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

芯片信息

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

圖 1-14?芯片信息頁面

設(shè)備控制

? 開發(fā)板與資源擴(kuò)展板搭載了振動馬達(dá)\蜂鳴器\風(fēng)扇，可以實(shí)現(xiàn)對震動馬達(dá)、蜂鳴器、風(fēng)扇控制的功能。如下圖所示，振動馬達(dá)及蜂鳴器頁面可以通過應(yīng)用頁面點(diǎn)擊相應(yīng)圖標(biāo)進(jìn)入?？梢栽谠擁撁婵刂普駝玉R達(dá)及蜂鳴器，點(diǎn)擊相應(yīng)按鈕即可打開或關(guān)閉相應(yīng)的外設(shè)，按鈕按下后會有狀態(tài)的變化。

圖 1-15?設(shè)備控制頁面

電源電壓

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

圖 1-16?電源電壓頁面

無線連接

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

圖 1-17?無線連接頁面