你的浏览器版本过低,可能导致网站不能正常访问!
为了你能正常使用网站功能,请使用这些浏览器。

采用 STM32H750 探索套件的无线测温集中器的UI设计

[复制链接]
STMCU小助手 发布时间:2023-2-2 16:55
ST专家点评
从这个评测贴中我们可以看到这位同学给我们展示了如何使用STM32H750+TouchGFX开发平台快速开发一个GUI产品-无线测温集中器。- I& t1 E& z) \( a2 {
从设计思路角度来看:这位同学进行设计前,首先使用思维导图工具对应用的需求进行模块化梳理,这个设计思路是非常推荐的。
- k3 |$ F& b( h( l+ U- f+ f. v" u2 c% P/ B
# v6 ^' h* L5 ]. G5 ^/ h
一方面有利于进行UI界面规划和设计,另一方面有助于通过TouchGFX提供的MVP机制对UI和后端数据处理进行分离,可以分开调试。0 o4 T, N1 l9 V( N) [$ J  U) u& {

8 `3 _- a0 v& I  ^

9 a: E7 N6 @! d% \7 @0 N这位同学也提到,由于UI image/font资源多的时候,下载板卡会比较慢,因此UI开发可以先使用TouchGFX Designer的模拟器进行调试,当后端数据处理部分调试好后然后再与UI部分通过MVP集成。
' o0 u; y! j# h4 [  T
- q+ {: u" c4 \( t
1 u, |" ~7 W: x+ ^, S! A/ ?$ k
从数据处理的角度看:从功能实现的角度来看无线测温集中器的应用功能UI部分的实现比较完整,交互也比较友好。该设计包含了多个界面(主界面/实时曲线/历史曲线/设备配置/时钟显示/关于),这些界面的实现和界面间切换以及数据的展示和读取。  y1 z- \1 _6 v$ F1 E
# L* X# c6 W8 y* n% H; a* p) ]
, m1 v& B5 J2 ~& U
从整体设计来看:看起来复杂的GUI+数据处理应用,由于TouchGFX Designer提供了很多常用的控件,如:文本显示/图片显示/容器/界面切换/动态,静态曲线/时钟等控件,就非常容易的通过所见即所得+拖拽的方式进行快速设计,通过交互配置就可以实现页面切换,然后通过MVP进行数据展示,是一个很好的参考设计。8 |; _7 c! e- c' g7 M0 N
8 ]8 ^2 }3 j# p) n
  m0 g$ L- Z. G( E

( _, `2 _' v1 y# A
一、概述
此项目实际应用,并非使用STM32H750B芯片,显示屏也是7寸的RGB屏,所以,此项目只是使用此开发板实现GUI的功能,后期将GUI移植到具体的项目中。
+ C8 g  h* n, `; p
整个项目的大体框架如下:
微信图片_20230202165426.png
无线数据的读取是通过一个SPI的Lora 模块通讯的,读取大量测温模块发出的温度,由于全程都是无线的通讯方式,需要一台可以显示能进行人机交互的设备来管理这些模块。

$ G& v4 Q2 v" O* g- M) U& s# I
) i3 \& J3 `+ p/ \0 x* _7 C
二、硬件
GUI运行硬件平台为STM32H750B-DK开发板。
+ Z0 M' E( N4 b) o/ x; O/ G# x/ {/ m/ h

6 V4 q# G; `- ^0 g硬件层的程序最终是基于我司的平台,所以,此次测评主要集中在GUI上。很多底层的程序移植过来也用不上,而且时间比较长,逻辑也比较复杂。3 Y; W& B/ |( ~, ?% H& J1 I$ m! E$ n

" a5 M# V: Z6 a8 Z
, F* x$ }  Y, B* ~" i
连接上随开始板送的传感器与一个RTC模块。
, g6 M! }6 I2 p& L) K! ^) `! [* B% ]9 f* H/ B* m5 R) c1 K
微信图片_20230202165430.png

8 E* @; O" R6 @  ~2 Q, L* z3 C
三、软件
于是,本次的UI就采用仿win10桌面的一种方式。要美观的话还是要大量的贴图,所以先用一些简单的图标进行代替。“桌面”的整体布局使用自定义控件的方式,把任务栏与开始菜单先做成自定义容器,在每个界面中添加这个容器。再实现每个界面 不同的功能。界面设计,大部分工作是使用TouchGFX 4.19.1 Designer 完成的,一些逻辑,要当特定的源文件中修改代码与添加相应的函数实现的。4 U% l, V3 S- E

2 V, b6 _, E1 Q# u3 ?; Y

, X, \6 m- ?+ G3 {任务栏可以打开开始菜单,右侧为显示桌面功能。开始菜单中的几个图标,可以进行不同的screen之间的切换。每个screen中都添加这个任务栏的容器,这样每个sreen之间都可以自由的切换了。3 E% ?# Y5 h2 a& Z1 p4 m

, s2 Q- }+ C! R- y, Y4 i
微信图片_20230202165433.png

: v: ?. R$ `' k8 Y( U" _- u- k. y桌面,显示温湿度传感器的数据,显示无线信号强度,显示报警状态,有消音功能。如果没有有效的无线信号,信号强度图标会从低到高闪烁,以示在搜索信号。/ P; z( l6 E, g+ f: F+ h. O
2 V4 ]1 j% r' z  h' q/ _

0 @& u! m* d* L- \' H2 t; F
微信图片_20230202165436.png
% d6 ]+ ~8 |% X7 Z
. ~3 I0 t1 u* a& g- M
当发生报警时,会有弹窗。同时,最上面会有报警状态显示,桌面上,的铃铛会闪烁。当按复位后,报警状态全部消失。
0 s+ I- ]2 V( i2 E6 y- D/ k
, M0 M. X5 w5 A. G) f$ ^& k

  u( A: q! z& v3 h( X
微信图片_20230202165439.png

! x7 G# `9 [1 y6 V& ?4 h  B8 o0 M- H9 }9 P: h4 ]
也可以按一下铃铛,进行静音。
微信图片_20230202165442.png

1 j, e7 o1 i+ E' S/ ]. u实时动态显示功能,这里分不同的线路,每条线路分为A,B,C三相,使用不同的颜色区分。中间增加一个滚轮,用于切换不同的线路号。这里显示的应该是温度曲线,方便调试,增加了可修改周期的正弦曲线,线路号越大,周期越大。无线测温一般测量电缆接头或是断路器的位置,所以,分三相显示。2 i: [7 s1 g! ^

* C* n/ a* M8 u! ]7 E/ S& T( m
微信图片_20230202165445.png
+ M- J# L9 ?; ^
历史记录可显示报警信息发生时前后的温度记录,也是通过滚轮来切换的。这里的数据,是暂时的,实际使用时,要先读取存储介质上的数据再显示的。/ v4 \" B1 Z5 Y  y) e7 D
9 o! u9 g) h# W
微信图片_20230202165450.png
4 H1 s$ K1 h- K% o% ~
配置界面,可配置报警开关,与报警温度的设置。温度设置通过独立设计的一个虚拟键盘来输入。
' {5 g9 L- R& R0 n
  j0 p& L+ \+ H$ i2 {0 K7 q
微信图片_20230202165453.png

+ T8 I' }& O7 g- t! ?- R) ^" F时钟界面用一个模拟时钟,通过读取RTC的数据来显示时间。
7 o& a  f9 w1 a* [% P1 i6 F
. W5 U0 ?) x7 ~' O8 H
微信图片_20230202165501.png

4 j& t2 d5 U' |
报警记录,通过方向键来切换要显示的报警信息。
! q9 v: \/ w6 Q. I8 `
微信图片_20230202165504.png
8 B0 Z- q4 P; T
网络界面,用于配置网络地址,每一个数字都是通过滑轮的方式进行修改的。
: I7 K) T7 H4 E2 J5 Z
' s3 d9 k# h0 N+ p3 `2 l0 Z5 T
微信图片_20230202165506.png
3 J5 y2 |$ P5 @( d2 s
“关于”界面,显示一些基本的信息。

- o( P0 w8 t+ ?" k* e( y/ t
微信图片_20230202165509.png

+ s# M* ~7 Z! H' e右上角有一根灯绳,只要点一下,会下拉一个界面。5 v0 ^* E% B' \

2 n; H* J9 Y( V6 A% |, n2 ~
微信图片_20230202165512.png

2 v7 Z' d2 ]- \1 M4 Q; E4 w
) g& l) Z: g: I
四、总结
经过一段时间的开发设计,对TouchGFX的架构有了一个比较深入的掌握,对于后续项目产品中使用TouchGFX奠定了基础。% D; t5 q- K3 `6 C* F0 H
* t# n& W" Q1 C& c0 K3 l3 O

/ m, Q" T6 H5 p) q. N使用TouchGFX Designer进行界面的设计,大大的减少了设计所用的时间,完整的PC仿真方案,不用每次烧写调度,进一步减少了开发周期。GUI的设计,大部分使用TouchGFX Designer就可以完成,TouchGFX Designer自带的一些动画、关联功能,不需要大量的美工,就可以做出比较完善、美观的UI。几乎适应于任何应用项目中。

; C$ H- K& p  H3 q' ^1 [4 f/ g, f
来源:STM32论坛网友jinyi7016

1 O' D( ^8 v  C1 J. l1 S
$ ]0 m6 y5 Q$ H' _( n3 C% o/ o% W' z/ i% K
收藏 评论0 发布时间:2023-2-2 16:55

举报

0个回答
关于意法半导体
我们是谁
投资者关系
意法半导体可持续发展举措
创新和工艺
招聘信息
联系我们
联系ST分支机构
寻找销售人员和分销渠道
社区
媒体中心
活动与培训
隐私策略
隐私策略
Cookies管理
行使您的权利
关注我们
st-img 微信公众号
st-img 手机版