6061|1

1万

帖子

204

TA的资源

管理员

 

使用TouchGFX开发STM32界面应用之入门篇(一)-- 软件安装与Hello World [复制链接]

使用TouchGFX开发STM32界面应用之入门篇(一)-- 软件安装与Hello World
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,下载页面的最下方是下载链接。

1.png

图一

下载完成后得到安装包 TouchGFX-4.10.0.msi,安装目录推荐使用默认路径,或者安装到D盘根目录也可以,注意:路径不要带空格
启动 TouchGFX Designer ,初始画面如下:

2.png

图二

功能区主要分为2个部分:MY APPLICATION,创建自己的界面应用;ONLINE APPLICATION,应该是GFX预置好的项目文件,目前只有一个关于洗衣机的DEMO,本文不做描述。下面以STM32F769I-DISCO官方开发板为例来具体演示第一个图形界面例程。
首先在 APPLICATION TEMPLATE 中选择我们要使用的开发板。移动鼠标到Simulator那个画面位置,自动出现一个 CHANGE 按钮:
3.png


图三

鼠标点击这个按钮:

4.png

图四

选择 STM32F769I Discovery Kit ,修改项目文件存储路径(例如:D:TouchGFXProjects),命名例程名称:MyTest,如图:
5.png


图五

点击 CREATE ,

6.png

图六

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

7.png


图七

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

8.png

图八

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

9.png

图九

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

10.png

图十

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

11.png

图十一

鼠标点击图片 stm32logo.png :


12.png

图十二

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

13.png

图十三

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

14.png

图十四

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


15.png
图十五

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


16.png
图十六

左下角显示提示信息:Compiling target code (时间较长,请耐心等待):


17.png
图十七

之后,提示信息变成:Flashing target code ,并且板子上ST-LINK的指示灯闪烁(正在烧写代码!):


18.png
图十八

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


19.png
图十九

正如你所看到的,整个显示图片的操作过程中,不需要敲入一行代码!这个 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社区版,是可以免费下载、使用的:


20.png
图二十


本讲到此结束,下一讲介绍人机交互功能的实现,从界面上的“按钮”开始一个新的例程!
进入第二讲:使用TouchGFX开发STM32界面应用之入门篇(二)-- 按钮与消息响应例程


作者:海东青电子
来源:简书



此帖出自stm32/stm8论坛
加EE小助手好友,
入技术交流群
EE服务号
精彩活动e手掌握
EE订阅号
热门资讯e网打尽

最新回复

写得超详细,顶一下  详情 回复 发表于 2019-4-15 09:58
个人签名

玩板看这里:

http://bbs.eeworld.com.cn/elecplay.html

EEWorld测评频道众多好板等你来玩,还可以来频道许愿树许愿说说你想要玩的板子,我们都在努力为大家实现!

 

回复
举报

1万

帖子

16

TA的资源

版主

 
写得超详细,顶一下
此帖出自stm32/stm8论坛
 
个人签名http://shop34182318.taobao.com/
https://shop436095304.taobao.com/?spm=a230r.7195193.1997079397.37.69fe60dfT705yr
 

回复
您需要登录后才可以回帖 登录 | 注册

猜你喜欢
随便看看
查找数据手册?

EEWorld Datasheet 技术支持

相关文章 更多>>
关闭
站长推荐上一条 1/8 下一条
电子工程世界版权所有 京B2-20211791 京ICP备10001474号-1 电信业务审批[2006]字第258号函 京公网安备 11010802033920号 Copyright © 2005-2024 EEWORLD.com.cn, Inc. All rights reserved
快速回复 返回顶部 返回列表