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

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

[复制链接]
奇迹 发布时间:2021-5-22 16:56
自从ST收购了TouchGFX之后,就不遗余力的去推广这个GUI,就算是ThreadX的免费开源也没有动摇ST的决定。可是由于资料少,官方文档不完善,入门相对困难,本次笔者以STM32H735 DK这一块板子实现一个Hello World的例子(注:TouchGFX的学习一切以demo与官方文档为主)。, m6 [1 p% [' L, D
6 i- l9 F- `1 W( e! A3 G, y
本次需要安装两个软件,一个是TouchGFX Designer,另一个是STM32CubeProgrammer。9 [2 K+ G3 j+ y$ t$ J, x( P
TouchGFX Designer 下载链接:https://www.st.com/en/embedded-software/x-cube-touchgfx.html
8 ^; v. V8 X, r6 aSTM32CubeProgrammer 下载链接:https://www.st.com/en/development-tools/stm32cubeprog.html
0 l6 I$ u* l; Z7 {; k9 ~/ h需要准备一张图片,需要png格式,名称不能出现全角字符(汉字)。4 J2 j0 d8 F- l2 \; ]
ST.png ! Q0 H- I5 l# D% Z+ z5 M
打开TouchGFX Designer是这样一个界面,主要有两个大按键分别是APPLICATION TEMPLATE(应用模板)以及UI TEMPLATE(UI例子)。在这个界面也可以设置工程名称以及工程路径,点击那个上面有个屏幕的按钮。& f: \  r/ n0 p" H7 z
QQ截图20210522153550.png
6 k. w9 P2 z4 Z- W选择自己的板子(如果板子不在这里列表的,就需要自己去移植),这里笔者选择的是STM32H735G DK,选择之后点击SELECT。) b: w" _) [  u$ P; N
QQ截图20210522153847.png ' V8 J, q) s  b0 f) m5 z# n
配置好工程名称以及路径后,点击CREATE按钮,软件会自动去网上下载需要的文件(有时下载会很慢;如果提示失败,就再尝试一次)。6 h3 [: J! [8 G1 C5 E
QQ截图20210522145521.png
% C2 F8 w$ i5 O/ m! i完成后界面如图:1 Y7 w1 o3 A0 w& ]! W+ g, j
QQ截图20210522154210.png
- s( c: @2 o, b& b先添加一个背景,点击+,选择box
# h* @) A* X! ]2 A( f QQ截图20210522154951.png - Q& p' s, n( b: @
点击图中的box控件,把它拖拉填充至整个屏幕。
2 t& i/ j! z6 b7 A9 v9 L6 l$ @ QQ截图20210522145902.png + s! H8 X& |$ c) |
接下面把准备好的图片添加到工程,点击上方的images按钮,点击+添加准备好的图片(png格式,名称不能出现全角字符)
; u4 u5 m/ j1 c- d. i' O1 m/ { QQ截图20210522145940.png
* s* O; L7 \8 b% Q- ]$ x/ Y! r: [添加好之后,点击可以在右面查看相关信息(如果变红,请检查文件格式以及文件名称)
7 @1 R( V2 T! u! b7 \ QQ截图20210522155346.png 3 e3 f2 z* [( k- O- J3 W
点击Canvas回到画布,接下来添加一张图片,点击+,选择image。
5 Q2 X: ^* _1 t  C$ z8 E QQ截图20210522150117.png
) ^2 d" Y3 D# X3 W+ H- b2 M点击右面已经添加好的图片控件,在右面选择使用的图片。
9 {4 x3 E# i; E2 } QQ截图20210522150143.png
5 y. ~( n. ]8 i! n1 {接下来添加一张按钮(无功能,拿来测一下触摸屏),点击+,选择Button。
  c/ Y2 D# ?: i QQ截图20210522150221.png
! Z3 l6 b# E. W% p( I接下来添加一字符串,点击+,选择Text Area。
& p9 G' S1 Q2 L3 ?* \. A QQ截图20210522150304.png : O9 E, P5 K& g8 u7 `/ _
点击右面已经添加好的字符串控件,在右面选择输入想要显示的字符串。
: h: O& r, G9 V QQ截图20210522150359.png - ]4 K# l7 g1 l: ?4 C: a
对界面排排版,界面右上角的三个按钮功能分别是运行仿真、下载到板子、生成代码。5 r5 a" Z: V- `
QQ截图20210522150415.png
8 j! J9 j$ A& r+ a这里我们点击一下Run Simulator跑一下仿真(需要等一会,不要着急),屏幕会出现模拟的界面。
0 i* Z& C. Y1 ]/ K0 R+ X QQ截图20210522150648.png
  A) Z+ y- Y& v关闭仿真界面,点击Run Target将程序下载到板子上(需安装STM32CubeProgrammer,也很慢,等到STlink灯闪烁就代表开始下载了)。这个界面与仿真出来的完全一模一样,非常漂亮。 IMG_20210522_150829 - 副本.jpg
( k7 O; F, c9 j  Q5 k- @在整个操作过程中,没有输入一句代码,就完成了一个基础的TouchGFX的Hello World程序。# k' @4 m( h4 d- F1 d2 i, a
为了方便以后使用,建议安装Visual Studio软件(Visual Studio 2010以上版本)。有机会的笔者也会继续写与TouchGFX相关的教程。
2 w: R' a/ `8 _
; c8 R1 R: m$ h最后,感谢日天兄  ]: j" i6 l7 [
: P' a* W  _4 U& \  c

$ j) y) E# v" i0 L
收藏 评论1 发布时间:2021-5-22 16:56

举报

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