（更多TouchGFX教程、资料、技术文章，请访问TouchGFX技术专辑）

2018年秋季，STM32正式收购了TouchGFX -- 嵌入式GUI界面中间件软件领先的开发商。用过TouchGFX的朋友都知道，TouchGFX在MCU系统上运行的界面非常炫，堪比手机的APP界面，此番STM32将其收购，广大开发者不必再使用TtouchGFX的试用版了，可以光明正大地使用正式版了！

总的来说，使用TouchGFX开发STM32界面，有2种方法：一是利用TouchGFX Designer软件，支持图片和控件拖拽、可快速生成在KEIL或IAR等IDE中可打开的项目工程；另一种方法是，STM32CUBEMX 5.0版本增加了对TouchGFX的支持，可以使用CubeMX开发TouchGFX应用（后续文章详述）。本文先介绍TouchGFX Designer的使用。

TouchGFX Designer下载地址：TouchGFX Designer下载地址 。  需要在st官网上先注册一个用户名、然后login，下载页面的最下方是下载链接。

图一

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

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

图二

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

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

图三

鼠标点击这个按钮：

图四

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

图五

点击 CREATE ，

图六

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

图七

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

图八

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

图九

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

图十

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

图十一

鼠标点击图片 stm32logo.png ：

图十二

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

图十三

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

图十四

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

点击右上角的 Generate Code：

图十五

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

图十六

左下角显示提示信息：Compiling target code （时间较长，请耐心等待）：

图十七

之后，提示信息变成：Flashing target code ，并且板子上ST-LINK的指示灯闪烁（正在烧写代码！）：

图十八

几十秒钟之后，烧写完成，板子上正确显示出STM32的logo图片，这是GUI模式的 hello，world！  图片还是很漂亮的：

图十九

正如你所看到的，整个显示图片的操作过程中，不需要敲入一行代码！这个 TouchGFX Designer 不一般吧？！

小结：

系统配置与版本：

1）宿主机：win10

2）TouchGFX Designer 版本4.10

3）目标板： STM32F769I-DISCO开发板，主芯片为 STM32F769NIH6U

4）ST-LINK-V2.1的驱动是必不可少的

5）最好预装 Visual Studio 2013（或VS的其他版本），后面的 TouchGFX Designer 进阶文章中就要用到VS来添加、修改代码了，VS是TouchGFX Designer 开发必备的IDE开发环境。本人安装的是VS社区版，是可以免费下载、使用的：

图二十

本讲到此结束，下一讲介绍人机交互功能的实现，从界面上的“按钮”开始一个新的例程！

进入第二讲：使用TouchGFX开发STM32界面应用之入门篇（二）-- 按钮与消息响应例程。