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

【2025·STM32峰会】GUI解决方案实训分享3-搭建空白TouchGFX例程并实现简单的功能(含硬件部分的串口打印)

[复制链接]
donatello1996 发布时间:2025-5-20 01:00
       实训的TouchGFX例程效果很炫酷,但是要学会用TouchGFX,还是必须要自行搭建空白例程从零开始学习的。1 _# z' g5 A1 u
由于线下实训已经提供了正点原子H7R7所需要的TPA文件,所以在初始化时不需要用到CubeMX,只需要直接选TPA文件创建空白TouchGFX例程即可:" X: S' C8 p: _* R& _
23.JPG
2 j; x9 B8 b! b! W在空白例程中,我打算加入几个功能:1.通过图片按钮切换界面,并且按钮的按下和释放图像是不同的两个图像;2.加入TextArea用于显示硬件代码那边传过来的数值,硬件代码还没开始写,就定义一个tick事件回调函数,这个回调函数是几十毫秒执行一次,用于更新TextArea的数值;3.屏幕来回切换都使用按钮实现,并且动画设置两个不同的。
6 A$ Y' M- A/ r( z1 f4 q 24.JPG
# ?5 x0 C! B  i  {  A9 z
$ K" x+ l: d' ~# d+ {6 l在创建添加任何控件之前,必须添加一个叫box的控件,可以理解为盒子或者容器,所有的交互控件,比如按钮和TextArea,都必须放在box上面:
$ y) m0 t; b3 L/ v5 d
25.jpg
. l; {8 o7 ^3 S( |; @* Y; ^# Y
; E9 J* }9 A  m# R首先是通过图片按钮切换界面这个功能,需要用到flexButton和Button的Interactions(交互),图片按钮也可以设置按下和释放:
* [9 Y, [  w& y5 k5 ?
26.jpg " Q# x" t1 Y0 p: P% U' L

5 q5 s- I7 Z& C# Z. u通过按钮(图片按钮)来切换界面,可以用TouchGFX自带的ChangeScreen事件,或者添加专属Callback回调函数,如果按钮只用来切换界面那就直接用ChangeScreen事件即可,如果在切换界面的同时还想要通过代码干别的事情,那就用Callback回调函数,但是有个注意点是,使用Callback回调函数来实现切换界面,在不使用Action控件的前提下,必须要注册一个假触发和假事件,如图,使用一个不存在的HardwareButton 0触发来触发ChangeScreen事件,由于硬件部分并没有搭建HardwareButton 0,所以这个触发是个假触发,永远不会发生:
$ r, t5 W. ?% C' g% W 27.jpg 2 m- U5 [; c8 R0 D: i) K( t* d

7 Z1 U( {- v6 |. r! ]# H$ K
在代码中注册fb_anon1的回调函数fb_anon1_Callback(),这个fb_anon1和相应回调函数的名字是可以自由取的,但是代码注册名和TouchGFX Designer注册名必须一致:% g' Q0 H" L9 v' ?- G
28.JPG 29.JPG application().gotoScreen2ScreenWipeTransitionEast()实现了从Screen1界面切换到Screen2界面的功能,getRootContainer().invalidate()是防止花屏的,刚刚提到了假触发的事情,因为前面注册假触发来触发ChangeScreen事件,所以才会注册application().gotoScreen2ScreenWipeTransitionEast()这个成员函数,切换界面的动作才能被fb_anon1按钮的回调函数调用。同理,Tick10和Tick1也是我注册的触发,意思是每10个节拍和每一个1节拍触发一次的事件,这个事件同样也能注册回调函数,我这里就是分别用两个TextArea来显示一个整数和浮点数的递增。
# p( }0 n! X* c4 w4 o) I# ?* M' _' V0 u& l3 N( k+ n
值得注意的是,要用TextArea显示变量,还需要注册Wildcard,可以理解为通配符字符串:
, U; Q3 W3 K- T5 N/ s' ]4 f8 y 30.jpg
  _7 {# n% G) W  l. m0 j% t) G5 T# H8 Z$ j9 H- `. l- O" h1 U
在typographies选项卡里面还需要填写TextArea所用字体的显示范围,我这里填写0x20-0xfe,表示可以显示所有ASCII码:
' J3 i+ |) F1 Z  ?0 u. @ 31.JPG
) j/ s) N( i7 t2 L! }- Y
# h  r* y% n+ m1 v2 ^
然后创建一个Screen2界面,同样是添加box和图片按钮flexButton,把这个flexButton的事件设置为切换为Screen1界面,那样,就实现两个界面通过按钮来回切换了:( Y: n) y( \6 l8 R' n$ W8 `: F
32.jpg
, e0 f% O9 S0 H
8 g! X+ ^( \- {& b' ?最后,在初始化代码处添加串口初始化代码以及重定义ioputchar代码,以实现串口打印:
' n) [. A6 A" Z9 L- M# |% O 33.JPG 34.JPG 35.JPG ' j6 J% X% d# t1 t. Y$ a

$ Q' v: Q! R- ]4 J在串口初始化完成之后打印一句UART1.\n:% D- N- c% U* A- D0 Z# D0 X" O
36.JPG
& _2 T" c+ V8 u: H; M5 S: t* o7 v& f9 G- S( [0 S
模拟器运行效果:
4 d9 O# O. m# s  ]" x; K
gif3.gif 1 U( f; q( N2 y/ u2 u) ~
: i+ t4 u& s9 o0 @2 n* c% S
开发板实测运行效果视频我做成gif放在二楼。7 F& O1 T& U; N. L1 Y8 d; P* ]4 ?$ A
23.JPG
24.JPG
25.jpg
26.jpg
27.jpg
28.JPG
29.JPG
30.jpg
31.JPG
32.jpg
33.JPG
34.JPG
35.JPG
36.JPG
gif3.gif
收藏 评论2 发布时间:2025-5-20 01:00

举报

2个回答
lugl 回答时间:2025-5-20 07:16:28

楼主,你这作品,优秀,感谢分享!

BinWin 回答时间:2025-5-21 11:05:02

优秀的鸭皮

所属标签

相似技术帖

官网相关资源

关于
我们是谁
投资者关系
意法半导体可持续发展举措
创新与技术
意法半导体官网
联系我们
联系ST分支机构
寻找销售人员和分销渠道
社区
媒体中心
活动与培训
隐私策略
隐私策略
Cookies管理
行使您的权利
官方最新发布
STM32N6 AI生态系统
STM32MCU,MPU高性能GUI
ST ACEPACK电源模块
意法半导体生物传感器
STM32Cube扩展软件包
关注我们
st-img 微信公众号
st-img 手机版