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

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

[复制链接]
donatello1996 发布时间:2025-5-20 01:00
       实训的TouchGFX例程效果很炫酷,但是要学会用TouchGFX,还是必须要自行搭建空白例程从零开始学习的。* j" C8 f$ U1 U3 F( U! P
由于线下实训已经提供了正点原子H7R7所需要的TPA文件,所以在初始化时不需要用到CubeMX,只需要直接选TPA文件创建空白TouchGFX例程即可:
1 u& |0 V+ U" h" w
23.JPG
: q' z0 J0 p. h( p8 Q在空白例程中,我打算加入几个功能:1.通过图片按钮切换界面,并且按钮的按下和释放图像是不同的两个图像;2.加入TextArea用于显示硬件代码那边传过来的数值,硬件代码还没开始写,就定义一个tick事件回调函数,这个回调函数是几十毫秒执行一次,用于更新TextArea的数值;3.屏幕来回切换都使用按钮实现,并且动画设置两个不同的。
( H8 B; G' p0 a4 H& c$ {! H 24.JPG
4 \3 j! k+ J! j! g
- i. i9 \. ~  b1 ?在创建添加任何控件之前,必须添加一个叫box的控件,可以理解为盒子或者容器,所有的交互控件,比如按钮和TextArea,都必须放在box上面:
5 R6 C2 X) \. p  ^$ X; H, Q( Z+ @
25.jpg : M/ @7 u+ Y/ L2 S  _

( y( T, M2 ~, e' L1 x. U4 v* M- V首先是通过图片按钮切换界面这个功能,需要用到flexButton和Button的Interactions(交互),图片按钮也可以设置按下和释放:2 F3 l- s; Z, j7 ~6 F
26.jpg
% r7 {4 f: F" c" W$ n2 I  {
2 o6 \" `' l  t5 g6 C* h1 k通过按钮(图片按钮)来切换界面,可以用TouchGFX自带的ChangeScreen事件,或者添加专属Callback回调函数,如果按钮只用来切换界面那就直接用ChangeScreen事件即可,如果在切换界面的同时还想要通过代码干别的事情,那就用Callback回调函数,但是有个注意点是,使用Callback回调函数来实现切换界面,在不使用Action控件的前提下,必须要注册一个假触发和假事件,如图,使用一个不存在的HardwareButton 0触发来触发ChangeScreen事件,由于硬件部分并没有搭建HardwareButton 0,所以这个触发是个假触发,永远不会发生:4 y* A1 M3 v6 G6 p9 g7 W' |
27.jpg
) z) Z% _' v  B1 p0 X
3 t# [/ g. _" m' [$ `: d
在代码中注册fb_anon1的回调函数fb_anon1_Callback(),这个fb_anon1和相应回调函数的名字是可以自由取的,但是代码注册名和TouchGFX Designer注册名必须一致:2 x+ R7 {7 s  \3 F! T
28.JPG 29.JPG application().gotoScreen2ScreenWipeTransitionEast()实现了从Screen1界面切换到Screen2界面的功能,getRootContainer().invalidate()是防止花屏的,刚刚提到了假触发的事情,因为前面注册假触发来触发ChangeScreen事件,所以才会注册application().gotoScreen2ScreenWipeTransitionEast()这个成员函数,切换界面的动作才能被fb_anon1按钮的回调函数调用。同理,Tick10和Tick1也是我注册的触发,意思是每10个节拍和每一个1节拍触发一次的事件,这个事件同样也能注册回调函数,我这里就是分别用两个TextArea来显示一个整数和浮点数的递增。
( E$ X) |# h$ X  E! a8 s1 P5 o& }3 T$ ~# `! }) @3 U0 J! m
值得注意的是,要用TextArea显示变量,还需要注册Wildcard,可以理解为通配符字符串:
, _/ l% }# A( s, s5 i 30.jpg
4 M, N2 |$ A  b6 |7 g" J
; ~' W& E  w$ M8 I( X- }
在typographies选项卡里面还需要填写TextArea所用字体的显示范围,我这里填写0x20-0xfe,表示可以显示所有ASCII码:. s, w+ T' ~; m1 @/ E3 F% T* U6 I
31.JPG 0 x3 g1 ~4 I% @
" ?; X9 k# c# L; N5 }
然后创建一个Screen2界面,同样是添加box和图片按钮flexButton,把这个flexButton的事件设置为切换为Screen1界面,那样,就实现两个界面通过按钮来回切换了:
2 i/ @9 H/ W' m+ _1 m 32.jpg ' Q* |2 f* s* W" |: r$ g0 W

! A6 q) ?, f1 r% k# X最后,在初始化代码处添加串口初始化代码以及重定义ioputchar代码,以实现串口打印:9 ?4 U% e, |/ E6 P( b
33.JPG 34.JPG 35.JPG - I/ h6 [, G/ a& Z) G. h
) m2 }3 i3 r' `. C7 I" r
在串口初始化完成之后打印一句UART1.\n:
* G, J( ^; B9 I. a+ M
36.JPG 1 |+ E* _7 D" y4 k* f1 O

# \) s6 W4 @+ L% J% {模拟器运行效果:- H7 d) d6 O! [7 ?' _
gif3.gif
- o. |" c, u$ O* p
! T2 E! i+ N  I) A8 d5 X& p开发板实测运行效果视频我做成gif放在二楼。
0 N+ m5 E, |! j6 m4 B
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管理
行使您的权利
官方最新发布
人形机器人运动控制、感知与智能配电
半导体创新技术与应用方向
EE架构与软件定义汽车
12V/48V 汽车智能配电(SPD)
区域控制单元(ZCU)与分区架构
关注我们
st-img 微信公众号
st-img 手机版