RT-Thread-【嵌入式 GUI 挑战赛】环境及健康监控设备RT-Thread问答社区

【嵌入式 GUI 挑战赛】环境及健康监控设备

发布于 2023-09-14 00:18:50 浏览：1973 订阅该版

[tocm]

# 一 项目简介

本项目是基于HMI-board实现的环境及健康监控设备。采集HMI-board开发板作为主控，RT-Thread OS作为试试操作系统，用HS3003温湿度传感器采集环境温湿度信息，MQ5可燃气体传感器检测空气中可燃气体浓度，MAX30102传感器监控人体血样心率，并基于LVGL提供丰富的GUI界面。

# 二 项目框图

![1694616818726.png](https://oss-club.rt-thread.org/uploads/20230914/bd10ef5d5cfea36f4f1381585a8a0f8e.png.webp)

# 三. 资源使用

## 3.1 硬件资源

使用到的硬件资源如下：

![1694617339735.png](https://oss-club.rt-thread.org/uploads/20230914/3595a813f53913656fa8a371029ab911.png)

除此之外，还使用了如下硬件资源：

- 硬件IIC来进行HS3003数据采集以及MAX30102数据采集。
- 硬件RTC用来做时间统计
- 外部硬件中断用来采集MAX30102的数据

## 3.2 软件资源

使用了Rt-Thread OS操作系统以及LVGL显示库，软件资源使用情况如下：

- LVGL：用于显示
- cJSON：用于解析获取的cjson天气数据，获取7天详细天气数据，支持城市设置
- nerutils：NTP，用于获取实时时间，更新本地时间
- rw007：用于网络连接
- WebClient：用于获取网络天气信息（支持当天以及未来6天天气获取）

![1694616926771.png](https://oss-club.rt-thread.org/uploads/20230914/72617fb6e7eeb6bdb1b3caa77f6aacbe.png)

# 四 项目介绍

该项目的界面主要是通过SquareLine进行设计，对于一些界面功能调试，则使用了VSCode的LVGL模拟环境，先在电脑上调试成功了界面功能，再移植到单片机中与功能结合使用。但是单片机性能比较弱，最开始加了很多动画功能，移植到HMI-Board上之后变得很卡，所以最后将大部分动画都删除了，勉强可以工作，但是界面之间的滑动操作还是不流畅。

下面是功能界面，详细介绍可以查看视频。

## 4.1 开机启动画面

该界面会有动画，显示logo信息以及设备信息。

在该界面下，会完成如下是事情：
 - 自动联网（会连接默认的AP，如果没有默认AP，可以在设备WIFI设置页面自行设置）
 - 自动校对网络时间（NTP）
 - 自动获取最新实时天气以及未来6天天气信息。

![1694619622908.png](https://oss-club.rt-thread.org/uploads/20230914/de9014248f15302cbbdcae9d4c31a51d.png.webp)

## 4.2 主显示界面

该界面下，会显示：

- 时间，日期
- HS3003采集的环境温湿度信息
- 天气信息（当前天气，室外温度以及空气质量）
- wifi连接信息以及按钮
- 心率采集按钮

并且每个控件都是支持触摸按键跳转到相应界面下。

![1694620236407.png](https://oss-club.rt-thread.org/uploads/20230914/9994c832e45ad09a1a52d3ae47f9b625.png.webp)

## 4.3 天气显示界面

该界面下会显示：

- 状态栏：包括当前年月日时分秒和温湿度
- 最新天气信息，显示天气的城市（城市支持切换，目前支持直辖市以及成都，可以增加其他城市，但是考虑到FLASH有限，没有使用全中文字库，目前只支持上述几个城市）
- 实时天气温湿度显示
- 风向以及级别
- 空气质量（AQI）数值以及污染程度显示
- 未来6天的天气以及温度范围

![1694620262556.png](https://oss-club.rt-thread.org/uploads/20230914/a77c6357d1f0a8fd2d4d2d32627ee875.png.webp)

## 4.4 时间设置界面

该界面下，可以设置时间，默认获取NTP网络时间，此时年月日时分秒都是不支持设置的。

可以将“网络时间”按钮设置为OFF，之后可以拖动年月日时分秒弧度按钮进行时间设置，设置的时候会实时同步到系统RTC。

如果再次将“网络时间”按钮设置为ON，则会自动获取NTP的网络时间并更新到系统RTC。

![1694622695804.png](https://oss-club.rt-thread.org/uploads/20230914/84d74febbb8ced76362eb4590ebdaadb.png.webp)

## 4.5 WIFI设置界面

该界面下，可以连接WIFI，切换到该界面之后，会自动扫描周边的WIFI AP，然后显示在界面列表中，可以手动选择需要连接的WIFI，在弹出的输入框中输入密码，点击键盘行的对钩就可以连接新的AP了。

![1694620442212.png](https://oss-club.rt-thread.org/uploads/20230914/27ce46d23fe1482fa7006437bb7eca28.png.webp)

![1694620968321.png](https://oss-club.rt-thread.org/uploads/20230914/b72abda957209283851485f5e90054b9.png.webp)

## 4.6 环境监控界面

该界面下会显示温湿度，以及空气中可燃气体浓度信息。主要用于监控环境信息。

![1694621119714.png](https://oss-club.rt-thread.org/uploads/20230914/bde22ca355808668fbfa287d142fa1da.png.webp)

## 4.7 心率监控

在该界面下可以监控心率值，当人体手指放上去之后，就可以自动开始测量并显示心率值，手指拿开之后会显示--，表示没有检测到有效信息。

下图为手指拿开：

![1694621230523.png](https://oss-club.rt-thread.org/uploads/20230914/630d9bc18f262a9e76b48dbfa47a5ecf.png.webp)

下图为手指放上，自动测量：

![1694621268840.png](https://oss-club.rt-thread.org/uploads/20230914/c01b2f82027ad022e1e017d61ba95d17.png.webp)

# 五 演示视频
演示视频上传到了bilibili：
下面是最新的视频（9/17日录制，修复了环境显示界面meter控件显示值没有刷新的bug）
[https://www.bilibili.com/video/BV1i34y1P75z/](https://www.bilibili.com/video/BV1i34y1P75z/)

下面是比赛截止日录制的视频（9/13录制，存在上述bug）：
[https://www.bilibili.com/video/BV1wj411y7zB/](https://www.bilibili.com/video/BV1wj411y7zB/)

# 六 代码
代码上传到了gitee：
[https://gitee.com/hehung/environment_-body-health-monitor-gui](https://gitee.com/hehung/environment_-body-health-monitor-gui)

# 七 总结

本次比赛，收货良多，第一次使用SquareLine，学习到了很多东西，同时也熟练了对LVGL的应用。本次比赛时间上确实比较紧，所以一些扩展功能目前没能实现。感谢RT-Thread，Renesas以及LVGL举办的活动。

# 后记

## SquareLine使用总结

LVGL如果手写的话，很浪费时间，所以我是使用squareline来开发的，说说这个软件的优点：

- 操作简单方便
- 可以实时预览
- 支持中文以及各种字体
- 属性设置丰富，满足各种需求
- 生成的代码简单，易读易改

但是缺点也不可忽视：

- 官网在国外，访问很慢
- 支持空间很少，只有几个基础的，像是我项目中使用到的meter控件以及list控件都是我手动添加的
- 时不时会出现不可以起的bug，比如突然花屏
- CTRL+Z返回，会返回很多步之前，然后再按CTRL+Y却不能返回最新的步骤
- 只支持png格式的图片
- 不支持awesome字体

虽然还存在很多不足，但是使用squareline开发确实事半功倍。

![1694617775981.png](https://oss-club.rt-thread.org/uploads/20230914/00ca861bdaff48037aa5e7cfc1357fac.png.webp)

## VSCode仿真调试LVGL总结

使用VSCode仿真调试是真的很方便。我在调试过程中，都是先在squareline中制作显示界面，然后通过VSCODE进行仿真调试，效果杠杠的。

只不过在Vscode上面运行很流畅，可以加很多动画，效果比较好，但是移植到HMI-board上之后就会很卡，所以我将动画都移除了，但是就算如此，还是很很卡，估计和RA6M3的主频有关。

下面是VsCode仿真的动画，可以看到很流畅：

[https://www.bilibili.com/video/BV1Uu4y167kK/](https://www.bilibili.com/video/BV1Uu4y167kK/)