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

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

[复制链接]
donatello1996 发布时间:2025-5-20 01:00
       实训的TouchGFX例程效果很炫酷,但是要学会用TouchGFX,还是必须要自行搭建空白例程从零开始学习的。
" ^* h  z" @2 T/ U7 g( h3 v) F由于线下实训已经提供了正点原子H7R7所需要的TPA文件,所以在初始化时不需要用到CubeMX,只需要直接选TPA文件创建空白TouchGFX例程即可:& b2 o. U+ Y2 g0 j+ V  N
23.JPG
( z4 D; j' s- v3 u在空白例程中,我打算加入几个功能:1.通过图片按钮切换界面,并且按钮的按下和释放图像是不同的两个图像;2.加入TextArea用于显示硬件代码那边传过来的数值,硬件代码还没开始写,就定义一个tick事件回调函数,这个回调函数是几十毫秒执行一次,用于更新TextArea的数值;3.屏幕来回切换都使用按钮实现,并且动画设置两个不同的。5 A( J% {- U! ~  G, N
24.JPG
, g- r7 o) o, @, f7 J  _5 F! U% M5 r) |
在创建添加任何控件之前,必须添加一个叫box的控件,可以理解为盒子或者容器,所有的交互控件,比如按钮和TextArea,都必须放在box上面:  x& W  G5 r5 e3 I% [; u" w! b: K
25.jpg 0 R' Q6 @5 o4 T, G: Y
! w+ d$ u# y/ c
首先是通过图片按钮切换界面这个功能,需要用到flexButton和Button的Interactions(交互),图片按钮也可以设置按下和释放:* E/ F" g7 i  u% n# T6 J0 [
26.jpg - Y& d: {# H! v- D

, t, p% h1 f( I+ f7 Q3 ?通过按钮(图片按钮)来切换界面,可以用TouchGFX自带的ChangeScreen事件,或者添加专属Callback回调函数,如果按钮只用来切换界面那就直接用ChangeScreen事件即可,如果在切换界面的同时还想要通过代码干别的事情,那就用Callback回调函数,但是有个注意点是,使用Callback回调函数来实现切换界面,在不使用Action控件的前提下,必须要注册一个假触发和假事件,如图,使用一个不存在的HardwareButton 0触发来触发ChangeScreen事件,由于硬件部分并没有搭建HardwareButton 0,所以这个触发是个假触发,永远不会发生:: o2 X8 w3 J9 `1 J9 h  b! j6 o
27.jpg
2 Q, X5 j. o! J7 g2 Y/ A* ?4 i& u! }
( ]2 W* V  w  ]5 ~- W( d% u2 t  \
在代码中注册fb_anon1的回调函数fb_anon1_Callback(),这个fb_anon1和相应回调函数的名字是可以自由取的,但是代码注册名和TouchGFX Designer注册名必须一致:
; T7 q( o, A; N( @6 ]9 U 28.JPG 29.JPG application().gotoScreen2ScreenWipeTransitionEast()实现了从Screen1界面切换到Screen2界面的功能,getRootContainer().invalidate()是防止花屏的,刚刚提到了假触发的事情,因为前面注册假触发来触发ChangeScreen事件,所以才会注册application().gotoScreen2ScreenWipeTransitionEast()这个成员函数,切换界面的动作才能被fb_anon1按钮的回调函数调用。同理,Tick10和Tick1也是我注册的触发,意思是每10个节拍和每一个1节拍触发一次的事件,这个事件同样也能注册回调函数,我这里就是分别用两个TextArea来显示一个整数和浮点数的递增。
( d4 z  s' I  X% M+ E) X9 [" _
值得注意的是,要用TextArea显示变量,还需要注册Wildcard,可以理解为通配符字符串:
0 I0 F; E/ c8 q. C 30.jpg
* |: ~( M6 |* s
3 h$ N8 I3 ?/ d5 j3 p, U  X# z7 j
在typographies选项卡里面还需要填写TextArea所用字体的显示范围,我这里填写0x20-0xfe,表示可以显示所有ASCII码:4 _  E7 _; i- a5 S
31.JPG
7 |: l  }) E- a& l3 Z! F8 I) E% Q3 h: q; f1 Q
然后创建一个Screen2界面,同样是添加box和图片按钮flexButton,把这个flexButton的事件设置为切换为Screen1界面,那样,就实现两个界面通过按钮来回切换了:& x2 i8 f, a4 \$ ]) M" Z
32.jpg 3 b. V+ V9 l% t5 Y
+ w# @6 T) H6 k
最后,在初始化代码处添加串口初始化代码以及重定义ioputchar代码,以实现串口打印:  A- H! g; H# h0 c/ r: E4 C
33.JPG 34.JPG 35.JPG
* n- y* }3 m  H% }5 w' e
( f3 }+ t" i/ u7 F' _  ]! T7 z在串口初始化完成之后打印一句UART1.\n:
: L, k; }4 l  J  H7 I; d
36.JPG
4 D; Y: k* R" R$ C2 \& ^; [# W  s8 D- j
模拟器运行效果:4 M  ^, F, ?# g7 b  _# T
gif3.gif : Q, C2 F0 w0 i7 _) d- e
" k7 Y) S" {* \: l
开发板实测运行效果视频我做成gif放在二楼。$ f% p5 J. |: X" U' I3 n
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 手机版