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

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

[复制链接]
奇迹 发布时间:2021-5-22 16:56
自从ST收购了TouchGFX之后,就不遗余力的去推广这个GUI,就算是ThreadX的免费开源也没有动摇ST的决定。可是由于资料少,官方文档不完善,入门相对困难,本次笔者以STM32H735 DK这一块板子实现一个Hello World的例子(注:TouchGFX的学习一切以demo与官方文档为主)。5 q1 h8 d6 }% U7 o

. c5 l) m; S/ j本次需要安装两个软件,一个是TouchGFX Designer,另一个是STM32CubeProgrammer。
- h; K7 g" J. X3 ]2 x$ \: HTouchGFX Designer 下载链接:https://www.st.com/en/embedded-software/x-cube-touchgfx.html
* O1 w' C* \- k9 s$ |: h7 lSTM32CubeProgrammer 下载链接:https://www.st.com/en/development-tools/stm32cubeprog.html
3 {. t0 _7 x( ^需要准备一张图片,需要png格式,名称不能出现全角字符(汉字)。
3 C0 \, v- @( W) \! e4 [5 o ST.png
3 ]' q) @/ l0 e4 X3 f2 N打开TouchGFX Designer是这样一个界面,主要有两个大按键分别是APPLICATION TEMPLATE(应用模板)以及UI TEMPLATE(UI例子)。在这个界面也可以设置工程名称以及工程路径,点击那个上面有个屏幕的按钮。
. h5 h* H% J. i. ]. ? QQ截图20210522153550.png 1 M. K3 Q4 P4 i
选择自己的板子(如果板子不在这里列表的,就需要自己去移植),这里笔者选择的是STM32H735G DK,选择之后点击SELECT。
& I: D: r& r  r, O: b0 z: A( R! I+ Y2 x QQ截图20210522153847.png & c: j- s6 L3 `$ {
配置好工程名称以及路径后,点击CREATE按钮,软件会自动去网上下载需要的文件(有时下载会很慢;如果提示失败,就再尝试一次)。7 L7 L, }, T& a' A; _# m) y
QQ截图20210522145521.png
) h0 F2 s/ v2 {完成后界面如图:& T. U% I  `  ?
QQ截图20210522154210.png   d1 _4 Y( r0 c
先添加一个背景,点击+,选择box; E1 U+ G& g9 T# n8 p9 B
QQ截图20210522154951.png
2 v9 I+ \* M# l# A点击图中的box控件,把它拖拉填充至整个屏幕。. y) M) ?  F* y
QQ截图20210522145902.png
1 q% L! L5 J$ G7 j* r5 R接下面把准备好的图片添加到工程,点击上方的images按钮,点击+添加准备好的图片(png格式,名称不能出现全角字符)! l1 W& E, C! o* t' R# r1 V
QQ截图20210522145940.png 1 f  X/ V1 `: @4 U& A4 S5 p9 _
添加好之后,点击可以在右面查看相关信息(如果变红,请检查文件格式以及文件名称)
) \; z# @& g0 P, _9 _! t4 D4 D" Y QQ截图20210522155346.png
" A1 T( R! b* U" ~% V, w1 Y点击Canvas回到画布,接下来添加一张图片,点击+,选择image。$ ^  M! \4 c+ r" U  ?
QQ截图20210522150117.png
- u9 X! `9 p; @9 C" c$ s点击右面已经添加好的图片控件,在右面选择使用的图片。
+ [5 A8 A. \  @' N1 X# ]2 A: M QQ截图20210522150143.png 0 ~' @$ \% k4 h, B6 _" K" P
接下来添加一张按钮(无功能,拿来测一下触摸屏),点击+,选择Button。( j( k0 ^4 |. i2 [  b8 T  O1 b
QQ截图20210522150221.png
( a$ P# q6 ]1 t接下来添加一字符串,点击+,选择Text Area。
. r* y9 h6 j8 ]: x( F: X+ ] QQ截图20210522150304.png " O5 C7 o& n' W! f; l7 R' {
点击右面已经添加好的字符串控件,在右面选择输入想要显示的字符串。7 a( U3 L( g) m* I( N* r
QQ截图20210522150359.png 9 L$ M+ Y/ l/ a+ s7 i
对界面排排版,界面右上角的三个按钮功能分别是运行仿真、下载到板子、生成代码。
! I) {. h- H* ^3 E QQ截图20210522150415.png - [* R5 M/ _- Z1 b: q
这里我们点击一下Run Simulator跑一下仿真(需要等一会,不要着急),屏幕会出现模拟的界面。; J- P4 c2 B9 J0 x
QQ截图20210522150648.png
8 X4 w# i4 S8 U0 _0 q关闭仿真界面,点击Run Target将程序下载到板子上(需安装STM32CubeProgrammer,也很慢,等到STlink灯闪烁就代表开始下载了)。这个界面与仿真出来的完全一模一样,非常漂亮。 IMG_20210522_150829 - 副本.jpg
: K. P8 b8 M2 s在整个操作过程中,没有输入一句代码,就完成了一个基础的TouchGFX的Hello World程序。7 `! ~+ d0 j* E/ L7 G* F/ x7 e
为了方便以后使用,建议安装Visual Studio软件(Visual Studio 2010以上版本)。有机会的笔者也会继续写与TouchGFX相关的教程。
/ S9 ?, g* u. C8 ?2 X; [/ @  y7 R9 y. C5 [; P1 x3 O+ f/ d9 w
最后,感谢日天兄
  `( O  G! h& o6 H/ @+ Q
: p- U- I. S6 E5 ^4 e8 _
' j& N  j* [/ q
收藏 评论1 发布时间:2021-5-22 16:56

举报

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