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

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

[复制链接]
donatello1996 发布时间:2025-5-20 01:00
       实训的TouchGFX例程效果很炫酷,但是要学会用TouchGFX,还是必须要自行搭建空白例程从零开始学习的。! [7 l% f: b: P. G; V
由于线下实训已经提供了正点原子H7R7所需要的TPA文件,所以在初始化时不需要用到CubeMX,只需要直接选TPA文件创建空白TouchGFX例程即可:9 B  x* @& q, t# Z% U1 _3 ~
23.JPG ( X, i1 ~5 R' H! r7 H; q# L, ^
在空白例程中,我打算加入几个功能:1.通过图片按钮切换界面,并且按钮的按下和释放图像是不同的两个图像;2.加入TextArea用于显示硬件代码那边传过来的数值,硬件代码还没开始写,就定义一个tick事件回调函数,这个回调函数是几十毫秒执行一次,用于更新TextArea的数值;3.屏幕来回切换都使用按钮实现,并且动画设置两个不同的。+ L, j6 B5 N1 e
24.JPG
2 U3 q+ ^- S: y' d6 E8 e9 _3 ?9 N9 e. X% I) X3 ?
在创建添加任何控件之前,必须添加一个叫box的控件,可以理解为盒子或者容器,所有的交互控件,比如按钮和TextArea,都必须放在box上面:
+ w! [: R) q) V3 r# `0 f
25.jpg . S' w# R& Q3 K: W" g, D; G' c

! c: R, j9 z: [; b. U首先是通过图片按钮切换界面这个功能,需要用到flexButton和Button的Interactions(交互),图片按钮也可以设置按下和释放:8 E* s3 J& [/ j  v  b2 D) \
26.jpg
. D& f' w, y' l' u4 ]6 K8 i+ b. Y$ J& a3 S. I& s
通过按钮(图片按钮)来切换界面,可以用TouchGFX自带的ChangeScreen事件,或者添加专属Callback回调函数,如果按钮只用来切换界面那就直接用ChangeScreen事件即可,如果在切换界面的同时还想要通过代码干别的事情,那就用Callback回调函数,但是有个注意点是,使用Callback回调函数来实现切换界面,在不使用Action控件的前提下,必须要注册一个假触发和假事件,如图,使用一个不存在的HardwareButton 0触发来触发ChangeScreen事件,由于硬件部分并没有搭建HardwareButton 0,所以这个触发是个假触发,永远不会发生:( D; f- Y5 p1 g' l% h
27.jpg
: w% }6 I6 B! H7 x) G- V0 R: Q. t: \4 G9 q+ d* `1 D# m- r# |
在代码中注册fb_anon1的回调函数fb_anon1_Callback(),这个fb_anon1和相应回调函数的名字是可以自由取的,但是代码注册名和TouchGFX Designer注册名必须一致:8 c. m" V0 W  H' |6 f1 A3 y; G. E( h+ R8 P
28.JPG 29.JPG application().gotoScreen2ScreenWipeTransitionEast()实现了从Screen1界面切换到Screen2界面的功能,getRootContainer().invalidate()是防止花屏的,刚刚提到了假触发的事情,因为前面注册假触发来触发ChangeScreen事件,所以才会注册application().gotoScreen2ScreenWipeTransitionEast()这个成员函数,切换界面的动作才能被fb_anon1按钮的回调函数调用。同理,Tick10和Tick1也是我注册的触发,意思是每10个节拍和每一个1节拍触发一次的事件,这个事件同样也能注册回调函数,我这里就是分别用两个TextArea来显示一个整数和浮点数的递增。
* `$ `* b) B% [& y7 K- H/ S, [4 V, ]% X7 P% r7 q# e9 S
值得注意的是,要用TextArea显示变量,还需要注册Wildcard,可以理解为通配符字符串:# P3 W. {1 ~# z' T6 l3 J( ~3 n. L/ s
30.jpg
  c# T% B7 L4 T0 j) y6 x9 Q# g6 O! c8 ^" y. t) r2 \3 q' Y
在typographies选项卡里面还需要填写TextArea所用字体的显示范围,我这里填写0x20-0xfe,表示可以显示所有ASCII码:$ Z8 \8 x: ^* Y* b( H  O) Z
31.JPG $ M. Y* W  n/ P- S. H+ R( C
  E; u  N, [6 q7 P2 c
然后创建一个Screen2界面,同样是添加box和图片按钮flexButton,把这个flexButton的事件设置为切换为Screen1界面,那样,就实现两个界面通过按钮来回切换了:
" y: h! a+ n, D, R6 R1 z 32.jpg 7 n$ `  k; m  o0 a# x) ?

# P6 B0 d" i; K最后,在初始化代码处添加串口初始化代码以及重定义ioputchar代码,以实现串口打印:' I7 t! k/ |# R  q3 a/ K% J! L- U
33.JPG 34.JPG 35.JPG 3 @! v5 H* }1 l2 ^
* p4 D! ?: C3 _0 C: S
在串口初始化完成之后打印一句UART1.\n:
2 w; F% |; r6 z/ o4 k  `
36.JPG
6 E' {% C" r1 }% r  z
" d) O4 ]) M) `% B模拟器运行效果:
: `. @% a/ V: y3 \
gif3.gif
9 n  `1 e7 \; S0 }3 z3 K" S7 `. Z# E" [  e! {6 L) {4 e
开发板实测运行效果视频我做成gif放在二楼。5 W' `, t/ g9 Y
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 手机版