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

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

[复制链接]
奇迹 发布时间:2021-5-22 16:56
自从ST收购了TouchGFX之后,就不遗余力的去推广这个GUI,就算是ThreadX的免费开源也没有动摇ST的决定。可是由于资料少,官方文档不完善,入门相对困难,本次笔者以STM32H735 DK这一块板子实现一个Hello World的例子(注:TouchGFX的学习一切以demo与官方文档为主)。3 l  w! n3 N( E# x/ q" s0 b9 c9 |# t
( \" k/ Y& w+ P' T( l
本次需要安装两个软件,一个是TouchGFX Designer,另一个是STM32CubeProgrammer。# }: u2 E) S/ o0 U8 V2 o
TouchGFX Designer 下载链接:https://www.st.com/en/embedded-software/x-cube-touchgfx.html& `& _2 O8 U# f7 L/ k2 o; x
STM32CubeProgrammer 下载链接:https://www.st.com/en/development-tools/stm32cubeprog.html  F$ N# T4 }) Z- O! f* I+ G' R
需要准备一张图片,需要png格式,名称不能出现全角字符(汉字)。
9 R$ ]1 W% R0 |, ]1 f ST.png 5 o4 v) A# ]% L& l2 _# [
打开TouchGFX Designer是这样一个界面,主要有两个大按键分别是APPLICATION TEMPLATE(应用模板)以及UI TEMPLATE(UI例子)。在这个界面也可以设置工程名称以及工程路径,点击那个上面有个屏幕的按钮。
& c# E. u; i# V4 Z: I% i0 Y QQ截图20210522153550.png * v. b* _0 R0 O2 p5 U0 a( d
选择自己的板子(如果板子不在这里列表的,就需要自己去移植),这里笔者选择的是STM32H735G DK,选择之后点击SELECT。
1 a5 d  R  h9 S% { QQ截图20210522153847.png , A) t% S: I7 L/ D& p7 P! Z* n
配置好工程名称以及路径后,点击CREATE按钮,软件会自动去网上下载需要的文件(有时下载会很慢;如果提示失败,就再尝试一次)。
, y- k$ Y, _( K0 d6 o# z QQ截图20210522145521.png + s0 P; |# ]4 r2 x% r+ N! F6 g
完成后界面如图:
9 q8 X/ t5 z/ k0 z/ s QQ截图20210522154210.png 8 \% k9 M: b6 E$ K
先添加一个背景,点击+,选择box
5 ?. m( ~- n9 T% H QQ截图20210522154951.png 1 G/ V9 A- i% N" r+ ]) h4 D
点击图中的box控件,把它拖拉填充至整个屏幕。- M: o$ T/ n6 ~5 ]2 N2 `1 k5 h% d
QQ截图20210522145902.png , {7 Y" o. r+ F
接下面把准备好的图片添加到工程,点击上方的images按钮,点击+添加准备好的图片(png格式,名称不能出现全角字符)
4 t$ y7 L' M+ Z  j* V$ B QQ截图20210522145940.png 2 E1 |, P3 f* w: [3 H
添加好之后,点击可以在右面查看相关信息(如果变红,请检查文件格式以及文件名称)1 K& Z+ f' @8 F; o, T
QQ截图20210522155346.png
! B9 p# ?. {" G点击Canvas回到画布,接下来添加一张图片,点击+,选择image。
7 l% A& t4 D; @- X QQ截图20210522150117.png 1 \, ~* E' @8 e  I
点击右面已经添加好的图片控件,在右面选择使用的图片。' U7 }* V$ z, S; t
QQ截图20210522150143.png ) T) g& n# s2 {
接下来添加一张按钮(无功能,拿来测一下触摸屏),点击+,选择Button。
* z+ E& W9 S  k$ Z; m7 F QQ截图20210522150221.png . }( X0 N) G3 [
接下来添加一字符串,点击+,选择Text Area。- u7 m/ ]. i9 v8 S" l. B
QQ截图20210522150304.png 7 P$ C" A! U/ |0 v0 y4 m
点击右面已经添加好的字符串控件,在右面选择输入想要显示的字符串。
$ o9 m& |; i+ ? QQ截图20210522150359.png ) V& t1 n% j* a3 @0 x
对界面排排版,界面右上角的三个按钮功能分别是运行仿真、下载到板子、生成代码。! X% @6 w1 ~' N+ ^
QQ截图20210522150415.png - w. |( V0 x9 s2 w0 j
这里我们点击一下Run Simulator跑一下仿真(需要等一会,不要着急),屏幕会出现模拟的界面。
: T1 u/ R7 }2 N2 l QQ截图20210522150648.png 8 Y$ e( y0 o' |1 j3 t' S  e6 F
关闭仿真界面,点击Run Target将程序下载到板子上(需安装STM32CubeProgrammer,也很慢,等到STlink灯闪烁就代表开始下载了)。这个界面与仿真出来的完全一模一样,非常漂亮。 IMG_20210522_150829 - 副本.jpg
; d3 Z3 \( ^3 L6 C) i+ X1 ?' d6 @. r在整个操作过程中,没有输入一句代码,就完成了一个基础的TouchGFX的Hello World程序。
; o( c& ^! y% S3 [( d& I为了方便以后使用,建议安装Visual Studio软件(Visual Studio 2010以上版本)。有机会的笔者也会继续写与TouchGFX相关的教程。  s$ k2 q4 _; J9 G0 x$ B& x

0 n' Y* Z  W2 f: e' X4 r; b5 \) Y最后,感谢日天兄
0 W9 v5 d" R5 M3 T2 E( X) R1 F3 Y/ J# ~! ?

8 w  k+ @  J2 O! v' L
收藏 评论1 发布时间:2021-5-22 16:56

举报

1个回答
STMCU-管管 回答时间:2021-5-24 12:38:49
这是一篇好的分享,顶顶顶!+ O- i$ o: s% V1 ^4 y

所属标签

相似分享

官网相关资源

关于
我们是谁
投资者关系
意法半导体可持续发展举措
创新与技术
意法半导体官网
联系我们
联系ST分支机构
寻找销售人员和分销渠道
社区
媒体中心
活动与培训
隐私策略
隐私策略
Cookies管理
行使您的权利
官方最新发布
STM32N6 AI生态系统
STM32MCU,MPU高性能GUI
ST ACEPACK电源模块
意法半导体生物传感器
STM32Cube扩展软件包
关注我们
st-img 微信公众号
st-img 手机版