STM32单片机项目实例：基于TouchGFX的智能手表设计（2）UI交互逻辑的设计

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内核，运行频率可达160MHz，内部Flash容量为2MB，RAM容量786KB。核心板采用最小系统设计，板载16MB的Flash存储器，用于存储大容量数据，例如图片(分辨率240*320的16位彩色图片大小240*320*16=150KB)、升级的固件等等。供电端口采用USB TypeC接口，板载USB转UART芯片，用于ISP功能或串口调试。核心板提供复位、BOOT与用户按键，提供2.8寸电容触摸屏接口。核心板提供电源指示灯与运行指示灯（用户编程控制）。

 图 1-1 STM32U5核心板资源

  STM32开发板底板，支持5V电源适配器与TypeC供电。提供RTC时钟电源，提供三轴加速度与角速度传感器，用于姿态感知。板载ESP-12F无线模组，用于物联网云平台项目开发。提供1路五向按键，采用中断与A/D模式采样。提供1路有源蜂鸣器，1路2*17P扩展接口，用于资源扩展板的接入。核心板接口通过2.54mm间距的插针引出，方便用户外接其它设备。

图 1-2 STM32开发板底板

  电容触摸显示屏在很多智能设备上得到应用，提升了设备的交互感。在开发板套件中使用方型显示屏用来模拟圆形的一个手表项目。显示屏尺寸为2.8寸，分辨率320*240(RGB)。驱动IC采用ILI9341，自带172,800字节的 GRAM存储。电容触摸屏采用I2C接口，驱动IC采用FT6336G。

图 1-3 2.8寸显示屏

  资源扩展板提供基于I2C总线的温湿度传感器、环境光感知、心率/脉搏测量。基于模数转换接口的电压/电流采集。基于EXTI事件/中断控制类型的人体红外、光电开关、火焰感知传感器。基于SPI总线的数码管驱动电路。基于PWM控制的风扇、蜂鸣器、震动马达。基于GPIO的按键、LED指示灯。基于异步串行通信的485总线电平转换。基于控制器局域网总线的CAN电平转换等外设。资源扩展板主要用于微控制器入门外设的使用，硬件图纸原理以及项目案例的应用开发学习。

图 1-4 资源扩展板

  仿真器在单片机程序开发过程中起着重要的作用。通过仿真器，使开发者能够在计算机上运行和调试单片机程序，开发者可以逐步执行程序并观察变量的值、寄存器的状态以及程序的执行流程，从而快速发现和解决程序中的错误。推荐采用的仿真器：FS-DAP-Link或者ST-LINK V3.0，用于程序烧写和仿真调试。

图 1-5 华清远见DAP-Link/ST-Link仿真器

  基于TouchGFX的智能手表项目，硬件包含STM32U5核心板、底板、2.8寸显示屏、资源扩展板以及仿真器，进行智能手表的设计。手表主要功能包括健康监测、运动模式、环境检测、电池电量检测、RTC时钟、状态提醒、模式切换（运行/待机，LPBAM功能演示）和网络连接等功能。

​​​​​​​1.2 界面切换功能

  开发板套件包含了丰富的传感与控制资源，智能手表项目可以通过这些资源，实现许多有趣的功能。作为手表，时间的显示是必不可少的。项目设计了表盘页面，表盘界面主要负责时间的显示，除此之外，心率、步数、温度、日期等信息由于查看频率相对较高，且不需要太复杂的交互，在表盘页面上进行了这些信息的显示。

  运动功能是目前市面上的大部分智能手表的主打卖点之一，手表可以通过陀螺仪、心率传感器等等外设检测用户的运动状态与健康监测，并对其运动进行记录，符合现代人对健康的追求。因此本项目设计了运动模式页面。在该页面中，不同的运动功能以列表的形式展示。用户可以通过手指的上下滑动浏览不同的运动种类，且可以通过点击相应的运动图标切换到对应运动的记录页面。

  智能手表的应用程序很多，在项目中增加了应用页面，与实际手表不同的是，该页面下的应用程序主要用于UI控件的学习与使用。在该页面中，不同的应用程序图标以列表的形式展示。用户可以通过手指的上下滑动浏览不同的应用程序，且可以通过点击相应的应用程序图标切换到对应的应用程序页面。由于本项目为单片机裸机编程实现智能手表功能的项目，因此无法实现app的安装，在应用程序页面以操作不同的外设，实现对应用程序功能的模拟。

  在设置界面与工具页面，包含智能手表的常用小工具或快捷设置功能，在表盘页面通过物理按键的方式进行页面的切换。

  除此之外，需要设计在表盘页面、运动页面、工具界面、应用页面以及设置界面之间的切换方法。项目中使用开发板上的五向按键完成页面的切换。在表盘页面上按切换到应用界面，下按切换到设置页面；在应用程序中，通过五向按键的中间按键切换回应用界面。

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

​​​​​​​1.3 表盘界面

  智能手表的时间可以通MCU内部的RTC时钟功能产生，优点是成本低，缺点是时钟精度不高。也可以通过外置的RTC实时时钟芯片进行获取，缺点是成本会增加。在本项目中，采用STM32U575的内部RTC时钟功能与备份域寄存器，实现时间的设置与产生。

  项目中设计了两个时间显示的页面，分别是模拟时钟表盘页面与数字时钟表盘页面。这两种时钟表盘的设计是目前市面上绝大多数智能手表或传统手表采用的时间显示方法。采用左右滑动的方式进行表盘切换。

图 1-7 表盘界面

1.4 运动界面

  “智能可穿戴”这个理念现在深入人心，从智能手表、智能手环，到其他一系列智能可穿戴设备，都有着类似的功能，例如追踪身体运动，监测温度、血氧饱和度、心率等等。在这些功能的背后，是传感器技术的应用。以运动传感器和生物传感器为例，可穿戴设备的运动传感器可以随时随地测量、记录和分析人体的活动情况，用户可以知道跑步步数、游泳圈数、骑车距离、能量消耗和睡眠时间等；而生物传感器则可以通过动态的、非侵入性测量的方式对心率、血氧饱和度、心电、脑电波等状况进行连续的、实时的监测，用户可以实时观察“健康信号”，及时发现并处理身体出现的异常状况。

  STM32开发板底板包含一个六轴运动传感器MPU6050，MPU6050 是 InvenSense 公司推出的全球首款整合性 6 轴运动处理组件，相较于多组件方案，免除了组合陀螺仪与加速器时之轴间差的问题，减少了安装空间。MPU6050 内部整合了 3 轴陀螺仪和 3 轴加速度传感器，并且含有一个第二 IIC 接口，可用于连接外部磁力传感器，并利用自带的数字运动处理器（DMP: Digital Motion Processor）硬件加速引擎，通过主 IIC 接口，向应用端输出完整的 9 轴融合演算数据。有了 DMP，我们可以使用 InvenSense 公司提供的运动处理资料库，非常方便的实现姿态解算，降低了运动处理运算对操作系统的负荷，同时大大降低了开发难度。

  运动界面采用物理按键触发进入。在运动界面采用上下滑屏的方式，实现户外步行、户外跑步、室内游泳、自由训练与户外骑行模式间的切换，上下滑屏的逻辑部分采用C++代码编写，五种运动模式，主要实现户外步行模式的应用。

图 1-8 运动界面

1. 1. 工具界面

  工具界面主要包含倒计时、呼吸训练、压力训练以及快捷支付等。该界面不涉及太复杂的UI交互逻辑，主要用到TouchGFX的按钮控件与界面的交互设置。在快捷支付方面，实现了二维码页面的弹出与返回。

图 1-9 工具界面

​​​​​​​1.6 设置界面

  设置界面用于系统的便捷设置，例如静音、排水、低功耗、信息等功能，设置界面通过物理按键进行切换，设置界面根据开发板的资源，实现静音、背光亮度、排水以及低功耗模式的应用。快捷设置界面实现排水功能，点击排水后，振动电机启动4秒后停止。

 

图 1-10 设置界面 

​​​​​​​1.7 应用界面

  应用界面主要包含健康监测、姿态信息、环境信息、芯片信息、设备控制、电源电压以及无线连接七个应用，应用界面中采用上下滑动的交互方式，通过点击应用的图标进入应用程序。在应用程序中，通过物理按键切换回应用界面。

健康监测

  资源扩展板上搭载了心率血氧传感器MAX30102。可以实现心率、血氧数据的读取。在表盘页面设计了心率信息的实时显示。如下图所示，心率血氧检测页面可以通过应用页面点击相应图标进入。

图 1-11 健康监测页面

姿态信息

  开发板上搭载了MPU6050陀螺仪，通过陀螺仪可以实现欧拉角的读取以及步数信息的读取。在表盘页面设计了步数信息的实时显示。如下图所示，陀螺仪页面可以通过应用页面点击陀螺仪图标切换进入。在该页面可以完成欧拉角的实时显示（包括横滚、俯仰、偏航角）。

图 1-12 姿态感知页面

环境信息

   开发板上搭载了光照传感器AP3216C、温湿度传感器SI7006/SHT20。可以实现温湿度以及光照的信息读取。在表盘页面设计了温度信息的实时显示。如下图所示，温湿度光照可以通过应用页面点击相应图标进入。在该页面中可以完成温度、湿度、光照度信息的实时更新和显示。

图 1-13 环境信息页面

芯片信息

  通过ADC内部/外部通道，可以实时监测芯片温度、VREF、RTC等数据。如下图所示，芯片电压测量页面可以通过应用页面点击相应图标进入。可以在该页面实时显示芯片温度、VREF、RTC电池等数据。

图 1-14 芯片信息页面

设备控制

  开发板与资源扩展板搭载了振动马达\蜂鸣器\风扇，可以实现对震动马达、蜂鸣器、风扇控制的功能。如下图所示，振动马达及蜂鸣器页面可以通过应用页面点击相应图标进入。可以在该页面控制振动马达及蜂鸣器，点击相应按钮即可打开或关闭相应的外设，按钮按下后会有状态的变化。

图 1-15 设备控制页面

电源电压

  可以通过ADC测量资源扩展板的电位器电压，资源扩展板的电流来模拟电池电量的采集与显示，该页面的电池图标与显示电位器的实时电压，采集的电流进行动态显示与绘制波形。

图 1-16 电源电压页面

无线连接

  开发板上搭载了ESP8266无线WIFI模块，可以实现WIFI连接的功能。通过手机生成热点，热点名称HQYJ-YF，密码STM32G070，点击下面的无线连接后，文本框显示连接信息，连接成功，获取连接的RSSI值，并进行显示。

图 1-17 无线连接页面