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

基于ST官方开发板的TouchGFX快速入门--Hello World

[复制链接]
奇迹 发布时间:2021-5-22 16:56
自从ST收购了TouchGFX之后,就不遗余力的去推广这个GUI,就算是ThreadX的免费开源也没有动摇ST的决定。可是由于资料少,官方文档不完善,入门相对困难,本次笔者以STM32H735 DK这一块板子实现一个Hello World的例子(注:TouchGFX的学习一切以demo与官方文档为主)。
# z2 O  @, r3 o# z  B! f- k
( Z/ m! z1 I- x本次需要安装两个软件,一个是TouchGFX Designer,另一个是STM32CubeProgrammer。
( e; w- x4 G6 ]) i6 ?% ^/ {TouchGFX Designer 下载链接:https://www.st.com/en/embedded-software/x-cube-touchgfx.html
2 [( K  G" _) Y0 c+ |$ {STM32CubeProgrammer 下载链接:https://www.st.com/en/development-tools/stm32cubeprog.html) y, W( P/ V: {" N: E' Y- w( w! Z
需要准备一张图片,需要png格式,名称不能出现全角字符(汉字)。/ d3 [3 ]3 O0 B, z
ST.png
; D& W4 G1 c/ g1 U+ ]9 ~- r打开TouchGFX Designer是这样一个界面,主要有两个大按键分别是APPLICATION TEMPLATE(应用模板)以及UI TEMPLATE(UI例子)。在这个界面也可以设置工程名称以及工程路径,点击那个上面有个屏幕的按钮。/ J# k, L$ s. E4 c, N: B) C% j
QQ截图20210522153550.png . e: U+ D6 I4 M
选择自己的板子(如果板子不在这里列表的,就需要自己去移植),这里笔者选择的是STM32H735G DK,选择之后点击SELECT。! }4 E7 K, z: ~6 n/ M% b. Z  ]
QQ截图20210522153847.png
- K$ W) u1 w* W* N配置好工程名称以及路径后,点击CREATE按钮,软件会自动去网上下载需要的文件(有时下载会很慢;如果提示失败,就再尝试一次)。" |0 x/ X1 u3 g2 j# y. C& ~
QQ截图20210522145521.png 8 S, ^0 X' h! @% j2 l% @
完成后界面如图:% f5 X4 j' W% }# w. o( N% m/ w# h$ S
QQ截图20210522154210.png
- w5 P1 U3 _) l先添加一个背景,点击+,选择box2 W! F: k% O$ v9 H8 v
QQ截图20210522154951.png ) `! o5 A, y4 v& \) p' c8 L- z9 h" h
点击图中的box控件,把它拖拉填充至整个屏幕。9 L1 @2 Q9 h- K, e) ?
QQ截图20210522145902.png 0 T1 p5 x* q4 X& a" C
接下面把准备好的图片添加到工程,点击上方的images按钮,点击+添加准备好的图片(png格式,名称不能出现全角字符)2 l/ r. n! G0 F# T$ @  w
QQ截图20210522145940.png 0 o6 E/ W  G% }0 z# ?+ y  A5 Z
添加好之后,点击可以在右面查看相关信息(如果变红,请检查文件格式以及文件名称)7 k% j8 S/ _2 ^& ^- X
QQ截图20210522155346.png 8 [7 u  ^# C9 ^7 W* P
点击Canvas回到画布,接下来添加一张图片,点击+,选择image。) b  e5 |: c1 [( p4 B
QQ截图20210522150117.png 4 h+ \- [+ y9 ]: M
点击右面已经添加好的图片控件,在右面选择使用的图片。- R& Z' U, @/ ]& q9 t1 a
QQ截图20210522150143.png
( j; _) p- [) V7 g% V) ?3 o* C接下来添加一张按钮(无功能,拿来测一下触摸屏),点击+,选择Button。
7 ^! `7 f) M% h8 v9 s% `% r# m2 B QQ截图20210522150221.png
: [) k* i9 g( ]0 S接下来添加一字符串,点击+,选择Text Area。
/ ^# T7 q/ `( g1 H QQ截图20210522150304.png
$ R8 v3 L- c  A2 l* g点击右面已经添加好的字符串控件,在右面选择输入想要显示的字符串。3 y* n$ j2 h5 G  X$ b8 T
QQ截图20210522150359.png
! T+ A: V8 i; l' T* e. \对界面排排版,界面右上角的三个按钮功能分别是运行仿真、下载到板子、生成代码。  O7 H5 L4 v( ]# |9 j
QQ截图20210522150415.png
2 X" v7 G3 ]# G3 v& }这里我们点击一下Run Simulator跑一下仿真(需要等一会,不要着急),屏幕会出现模拟的界面。
3 _. B$ C3 C* p" R QQ截图20210522150648.png
0 X8 [, a% o/ T5 A3 ?" M& H9 J关闭仿真界面,点击Run Target将程序下载到板子上(需安装STM32CubeProgrammer,也很慢,等到STlink灯闪烁就代表开始下载了)。这个界面与仿真出来的完全一模一样,非常漂亮。 IMG_20210522_150829 - 副本.jpg ! d+ L/ y" B2 Y+ ?
在整个操作过程中,没有输入一句代码,就完成了一个基础的TouchGFX的Hello World程序。  ]* q0 O" Q" m2 X
为了方便以后使用,建议安装Visual Studio软件(Visual Studio 2010以上版本)。有机会的笔者也会继续写与TouchGFX相关的教程。
1 s) W2 C1 k" T: u- Z! Q# }1 o8 k& g
! J- M8 F/ u  V7 v" q- h6 Q最后,感谢日天兄+ ~- Q9 t8 [" T5 M" r. r' {

' l9 Y1 N( D" d" I4 V# K, d% I( s6 Q# X$ a9 T) _1 x! _
收藏 评论1 发布时间:2021-5-22 16:56

举报

1个回答
STMCU-管管 回答时间:2021-5-24 12:38:49
这是一篇好的分享,顶顶顶!
- ]; }3 F+ T3 {0 W
关于意法半导体
我们是谁
投资者关系
意法半导体可持续发展举措
创新和工艺
招聘信息
联系我们
联系ST分支机构
寻找销售人员和分销渠道
社区
媒体中心
活动与培训
隐私策略
隐私策略
Cookies管理
行使您的权利
关注我们
st-img 微信公众号
st-img 手机版