搜索
ST MCU Finder
安装免费手机应用,
寻找理想的ST MCU

[应用相关] TouchGFX开发STM32界面应用入门篇(一)-软件安装与HelloWorld

[复制链接]
171|52
 楼主 | 2020-5-24 11:14 | 显示全部楼层 |阅读模式
2018年秋季,STM32正式收购了TouchGFX -- 嵌入式GUI界面中间件软件领先的开发商。用过TouchGFX的朋友都知道,TouchGFX在MCU系统上运行的界面非常炫,堪比手机的APP界面,此番STM32将其收购,广大开发者不必再使用TtouchGFX的试用版了,可以光明正大地使用正式版了!


作者:海东青电子
链接:https://www.jianshu.com/p/777c7a75ade7
来源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

使用特权

评论回复
 楼主 | 2020-5-24 11:16 | 显示全部楼层
总的来说,使用TouchGFX开发STM32界面,有2种方法:一是利用TouchGFX Designer软件,支持图片和控件拖拽、可快速生成在KEIL或IAR等IDE中可打开的项目工程;另一种方法是,STM32CUBEMX 5.0版本增加了对TouchGFX的支持,可以使用CubeMX开发TouchGFX应用(后续文章详述)。本文先介绍TouchGFX Designer的使用。

使用特权

评论回复
 楼主 | 2020-5-24 11:17 | 显示全部楼层
TouchGFX Designer下载地址:https://www.st.com/content/st_co ... uchgfxdesigner.html
需要在st官网上先注册一个用户名、然后login,下载页面的最下方是下载链接。
440165ec9e732d225d.png

使用特权

评论回复
 楼主 | 2020-5-24 11:17 | 显示全部楼层
下载完成后得到安装包 TouchGFX-4.10.0.msi,安装目录推荐使用默认路径,或者安装到D盘根目录也可以,注意:路径不要带空格!

使用特权

评论回复
 楼主 | 2020-5-24 11:19 | 显示全部楼层
启动 TouchGFX Designer ,初始画面如下:
886045ec9e774e2bf0.png

使用特权

评论回复
 楼主 | 2020-5-24 11:20 | 显示全部楼层
功能区主要分为2个部分:MY APPLICATION,创建自己的界面应用;ONLINE APPLICATION,应该是GFX预置好的项目文件,目前只有一个关于洗衣机的DEMO,本文不做描述。下面以STM32F769I-DISCO官方开发板为例来具体演示第一个图形界面例程。

使用特权

评论回复
 楼主 | 2020-5-24 11:22 | 显示全部楼层
首先在 APPLICATION TEMPLATE 中选择我们要使用的开发板。移动鼠标到Simulator那个画面位置,自动出现一个 CHANGE 按钮:
228585ec9e8148e48b.png

使用特权

评论回复
 楼主 | 2020-5-24 11:23 | 显示全部楼层
鼠标点击这个按钮:
967835ec9e88e5946e.png

使用特权

评论回复
 楼主 | 2020-5-24 11:25 | 显示全部楼层
选择 STM32F769I Discovery Kit ,修改项目文件存储路径(例如:D:\TouchGFXProjects),命名例程名称:MyTest,如图:
60885ec9e8dd36622.png

使用特权

评论回复
 楼主 | 2020-5-24 11:26 | 显示全部楼层
点击 CREATE ,
930295ec9e93897221.png

使用特权

评论回复
 楼主 | 2020-5-24 11:27 | 显示全部楼层
软件自动从网上下载本项目需要用到的GUI和模板代码(有时下载很慢;如果出现红字提示失败,就再尝试 create 一次、直到成功),出现软件的设计画面:
882075ec9e985def1c.png

使用特权

评论回复
 楼主 | 2020-5-24 11:28 | 显示全部楼层
为了设计此例程的界面,还需要先做一个准备工作:准备要显示的图片(png格式)、并放置到该项目的文件目录下。本例程只需要一个图片:
112965ec9e9b5926a3.png

使用特权

评论回复
 楼主 | 2020-5-24 11:33 | 显示全部楼层
这是一个预先画好的图片(可以使用画笔等制图工具,然后生成png格式的图片),STM32F769I-DISCO开发板的屏幕分辨率是800x480,所以图片也是要这个尺寸。TouchGFX Designer自动生成的项目文件包含一个子目录images,我们就把做好的图片放到这个目录下:

92775ec9e9da57549.png

使用特权

评论回复
 楼主 | 2020-5-24 11:34 | 显示全部楼层
回到TouchGFX Designer,点击左边中部的“图片资源”Tab:
946035ec9eb00bcae9.png

使用特权

评论回复
 楼主 | 2020-5-24 11:36 | 显示全部楼层
可以看到系统自动把我们刚才准备好的图片文件添加了进来:
610405ec9eb6669cfb.png

使用特权

评论回复
 楼主 | 2020-5-24 11:37 | 显示全部楼层
鼠标点击图片 stm32logo.png :
901935ec9ebc0f31ab.png

使用特权

评论回复
 楼主 | 2020-5-24 11:38 | 显示全部楼层
上面的操作等价于添加了一个IMAGE控件、并且将该控件的主要的“图片”属性设置成了 stm32logo.png (关于控件、属性等术语,将在后续文章中介绍),所以呈现出上面的图片。点击右上方的 Run Simulator ,系统将生成在PC上可运行的模拟画面:
667115ec9ec1ea11df.png

使用特权

评论回复
 楼主 | 2020-5-24 11:41 | 显示全部楼层
等待一会儿时间,电脑屏幕上出现模拟界面:
994945ec9ec3318fc7.png

使用特权

评论回复
 楼主 | 2020-5-24 11:44 | 显示全部楼层
这个模拟界面功能非常强大,还可以在PC上打印调试信息,后文还将对模拟器做详细介绍。模拟界面成功后,就可以生成代码并烧写到目标反上看实际运行结果了!

点击右上角的 Generate Code:
510955ec9ed0e6c596.png

使用特权

评论回复
 楼主 | 2020-5-24 11:45 | 显示全部楼层
此时,确认 STM32F769I-DISCO开发板 通过USB线已经与PC连接好了,然后点击 Run Target:
893115ec9ed961cd3d.png

使用特权

评论回复
扫描二维码,随时随地手机跟帖
您需要登录后才可以回帖 登录 | 注册

本版积分规则

我要发帖 投诉建议 创建版块 申请版主

快速回复

您需要登录后才可以回帖
登录 | 注册
高级模式

论坛热帖

在线客服 快速回复 返回顶部 返回列表