总的来说,使用TouchGFX开发STM32界面,有2种方法:一是利用TouchGFX Designer软件,支持图片和控件拖拽、可快速生成在KEIL或IAR等IDE中可打开的项目工程;另一种方法是,STM32CUBEMX 5.0版本增加了对TouchGFX的支持,可以使用CubeMX开发TouchGFX应用(后续文章详述)。本文先介绍TouchGFX Designer的使用。
TouchGFX Designer下载地址:TouchGFX Designer下载地址 。 需要在st官网上先注册一个用户名、然后login,下载页面的最下方是下载链接。
![](http:////upload-images.jianshu.io/upload_images/13843161-b2ccf50098cb2ba1.PNG)
图一
下载完成后得到安装包 TouchGFX-4.10.0.msi,安装目录推荐使用默认路径,或者安装到D盘根目录也可以,注意:路径不要带空格!
启动 TouchGFX Designer ,初始画面如下:
![](http:////upload-images.jianshu.io/upload_images/13843161-6de9beb6dc7eecf5.PNG)
图二
功能区主要分为2个部分:MY APPLICATION,创建自己的界面应用;ONLINE APPLICATION,应该是GFX预置好的项目文件,目前只有一个关于洗衣机的DEMO,本文不做描述。下面以STM32F769I-DISCO官方开发板为例来具体演示第一个图形界面例程。
首先在 APPLICATION TEMPLATE 中选择我们要使用的开发板。移动鼠标到Simulator那个画面位置,自动出现一个 CHANGE 按钮:
![](http:////upload-images.jianshu.io/upload_images/13843161-d69b17ef1b640832.png)
图三
鼠标点击这个按钮:
![](http:////upload-images.jianshu.io/upload_images/13843161-55da632091b498d8.PNG)
图四
选择 STM32F769I Discovery Kit ,修改项目文件存储路径(例如:D:\TouchGFXProjects),命名例程名称:MyTest,如图:
![](http:////upload-images.jianshu.io/upload_images/13843161-261e0f53e7ca4f47.PNG)
图五
点击 CREATE ,
![](http:////upload-images.jianshu.io/upload_images/13843161-9f3a53d6b242c484.PNG)
图六
软件自动从网上下载本项目需要用到的GUI和模板代码(有时下载很慢;如果出现红字提示失败,就再尝试 create 一次、直到成功),出现软件的设计画面:
![](http:////upload-images.jianshu.io/upload_images/13843161-f1dff71018339ad2.PNG)
图七
为了设计此例程的界面,还需要先做一个准备工作:准备要显示的图片(png格式)、并放置到该项目的文件目录下。本例程只需要一个图片:
![](http:////upload-images.jianshu.io/upload_images/13843161-b10f821ccb58b96b.png)
图八
这是一个预先画好的图片(可以使用画笔等制图工具,然后生成png格式的图片),STM32F769I-DISCO开发板的屏幕分辨率是800x480,所以图片也是要这个尺寸。TouchGFX Designer自动生成的项目文件包含一个子目录images,我们就把做好的图片放到这个目录下:
![](http:////upload-images.jianshu.io/upload_images/13843161-48e9ac88f994e779.PNG)
图九
回到TouchGFX Designer,点击左边中部的“图片资源”Tab:
![](http:////upload-images.jianshu.io/upload_images/13843161-418f5064295714c4.PNG)
图十
可以看到系统自动把我们刚才准备好的图片文件添加了进来:
![](http:////upload-images.jianshu.io/upload_images/13843161-6ce4cddaca9f3e8b.PNG)
图十一
鼠标点击图片 stm32logo.png :
![](http:////upload-images.jianshu.io/upload_images/13843161-8668f13eba1a179d.PNG)
图十二
上面的操作等价于添加了一个IMAGE控件、并且将该控件的主要的“图片”属性设置成了 stm32logo.png (关于控件、属性等术语,将在后续文章中介绍),所以呈现出上面的图片。点击右上方的 Run Simulator ,系统将生成在PC上可运行的模拟画面:
![](http:////upload-images.jianshu.io/upload_images/13843161-631e4290ff53f004.PNG)
图十三
等待一会儿时间,电脑屏幕上出现模拟界面:
![](http:////upload-images.jianshu.io/upload_images/13843161-a47e62626df08f6d.PNG)
图十四
这个模拟界面功能非常强大,还可以在PC上打印调试信息,后文还将对模拟器做详细介绍。模拟界面成功后,就可以生成代码并烧写到目标反上看实际运行结果了!
点击右上角的 Generate Code:
![](http:////upload-images.jianshu.io/upload_images/13843161-02571d5b1df8822f.png)
图十五
此时,确认 STM32F769I-DISCO开发板 通过USB线已经与PC连接好了,然后点击 Run Target:
![](http:////upload-images.jianshu.io/upload_images/13843161-44840b0784c5885d.PNG)
图十六
左下角显示提示信息:Compiling target code (时间较长,请耐心等待):
![](http:////upload-images.jianshu.io/upload_images/13843161-9327d366661bd306.PNG)
图十七
之后,提示信息变成:Flashing target code ,并且板子上ST-LINK的指示灯闪烁(正在烧写代码!):
![](http:////upload-images.jianshu.io/upload_images/13843161-0addbf6ccc446d37.PNG)
图十八
几十秒钟之后,烧写完成,板子上正确显示出STM32的logo图片,这是GUI模式的 hello,world! 图片还是很漂亮的:
![](http:////upload-images.jianshu.io/upload_images/13843161-3c5c0b0a84070168.jpg)
图十九
正如你所看到的,整个显示图片的操作过程中,不需要敲入一行代码!这个 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社区版,是可以免费下载、使用的: