首页 论坛 嵌入式软件专区 touchgfx gui 转TouchGFX STM32界面应用之入门篇一软件安装与Hello world

发帖 回复

[转载] 转TouchGFX STM32界面应用之入门篇一软件安装与Hello world
1842 查看
9 回复
 楼主 | 发布于 2019-09-29 | 只看楼主
分享到:

转载自https://www.jianshu.com/p/777c7a75ade7

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社区版,是可以免费下载、使用的:

图二十
(2 ) (1 )

嵌入式学习

回复 举报

回复于 2019-09-30 沙发

(0 )
评论 (0) 举报

回复于 2019-09-30 2#

感谢分享
(0 )
评论 (0) 举报

回复于 2019-09-30 3#

谢谢分享!!!!
(0 )
评论 (0) 举报

回复于 2019-09-30 4#

谢谢分享
(0 )
评论 (0) 举报

回复于 2019-10-10 5#

谢谢分享!
(0 )
评论 (0) 举报

回复于 2019-10-20 6#

感谢分享
(0 )
评论 (0) 举报

回复于 2019-10-20 7#

感谢分享
(0 )
评论 (0) 举报

回复于 2020-04-06 8#

感谢分享
(0 )
评论 (0) 举报

回复于 2020-05-12 9#

谢谢分享!
(0 )
评论 (0) 举报
  • 发表回复
    0/3000





    举报

    请选择举报类别

    • 广告垃圾
    • 违规内容
    • 恶意灌水
    • 重复发帖

    全部板块

    返回顶部