TouchGFX开发STM32界面应用入门篇（一）-软件安装与HelloWorld

只看该作者 · 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，下载页面的最下方是下载链接。

只看该作者 · 2020-5-24 11:17

下载完成后得到安装包 TouchGFX-4.10.0.msi，安装目录推荐使用默认路径，或者安装到D盘根目录也可以，注意：路径不要带空格！

只看该作者 · 2020-5-24 11:19

启动 TouchGFX Designer ，初始画面如下：

只看该作者 · 2020-5-24 11:20

功能区主要分为2个部分：MY APPLICATION，创建自己的界面应用；ONLINE APPLICATION，应该是GFX预置好的项目文件，目前只有一个关于洗衣机的DEMO，本文不做描述。下面以STM32F769I-DISCO官方开发板为例来具体演示第一个图形界面例程。

只看该作者 · 2020-5-24 11:22

首先在 APPLICATION TEMPLATE 中选择我们要使用的开发板。移动鼠标到Simulator那个画面位置，自动出现一个 CHANGE 按钮：

只看该作者 · 2020-5-24 11:23

鼠标点击这个按钮：

只看该作者 · 2020-5-24 11:25

选择 STM32F769I Discovery Kit ，修改项目文件存储路径（例如：D:\TouchGFXProjects），命名例程名称：MyTest，如图：

只看该作者 · 2020-5-24 11:26

点击 CREATE ，

只看该作者 · 2020-5-24 11:27

软件自动从网上下载本项目需要用到的GUI和模板代码（有时下载很慢；如果出现红字提示失败，就再尝试 create 一次、直到成功），出现软件的设计画面：

只看该作者 · 2020-5-24 11:28

为了设计此例程的界面，还需要先做一个准备工作：准备要显示的图片（png格式）、并放置到该项目的文件目录下。本例程只需要一个图片：

只看该作者 · 2020-5-24 11:33

这是一个预先画好的图片（可以使用画笔等制图工具，然后生成png格式的图片），STM32F769I-DISCO开发板的屏幕分辨率是800x480，所以图片也是要这个尺寸。TouchGFX Designer自动生成的项目文件包含一个子目录images，我们就把做好的图片放到这个目录下：

只看该作者 · 2020-5-24 11:34

回到TouchGFX Designer，点击左边中部的“图片资源”Tab：

只看该作者 · 2020-5-24 11:36

可以看到系统自动把我们刚才准备好的图片文件添加了进来：

只看该作者 · 2020-5-24 11:37

鼠标点击图片 stm32**.png ：

只看该作者 · 2020-5-24 11:38

上面的操作等价于添加了一个IMAGE控件、并且将该控件的主要的“图片”属性设置成了 stm32**.png （关于控件、属性等术语，将在后续**中介绍），所以呈现出上面的图片。点击右上方的 Run Simulator ，系统将生成在PC上可运行的模拟画面：

只看该作者 · 2020-5-24 11:41

等待一会儿时间，电脑屏幕上出现模拟界面：

只看该作者 · 2020-5-24 11:44

这个模拟界面功能非常强大，还可以在PC上打印调试信息，后文还将对模拟器做详细介绍。模拟界面成功后，就可以生成代码并烧写到目标反上看实际运行结果了！

点击右上角的 Generate Code：

只看该作者 · 2020-5-24 11:45

此时，确认 STM32F769I-DISCO开发板通过USB线已经与PC连接好了，然后点击 Run Target：