STM32F746_DISCO开发板TouchGFX+STM32CubeMX+STM32CubeIDE工程创建

最近发现一款适用于STM32的UI设计软件,界面炫酷,操作方便,经过几天的摸索,终于将TouchGFX+STM32CubeMX+STM32CubeIDE创建项目工程的全过程走通。
在安装TouchGFX时遇到电脑无法安装.net framework 4.5.2的问题,目前还没解决,换了台电脑。
在创建TouchGFX Application时,频繁出现下载Application Template失败,几乎浪费了一天的时间,建议大家在下载成功后,先保存一版原始版本,以备后用。
本人以前开发STM32采用的是keil MDK5,而TouchGFX、STM32CubeMX、STM32CubeIDE这些软件都是首次接触,有理解不到位的地方,欢迎大家指出,共同探讨学习!

相关软件,都可以在ST官网下载。

下面开始介绍创建项目的过程:
1.先通过TouchGFX创建空白UI模板工程,开发板选择STM32F746G Discovery Kit;
STM32F746_DISCO开发板TouchGFX+STM32CubeMX+STM32CubeIDE工程创建
STM32F746_DISCO开发板TouchGFX+STM32CubeMX+STM32CubeIDE工程创建
2.点击Generate code进行编译;
3.在工程文件夹内,点击STM32F746G_DISCO.ioc,通过STM32CubeMX打开;
STM32F746_DISCO开发板TouchGFX+STM32CubeMX+STM32CubeIDE工程创建
STM32F746_DISCO开发板TouchGFX+STM32CubeMX+STM32CubeIDE工程创建
4.如果遇到弹窗提示版本问题,点击Migrate,更新工程;
STM32F746_DISCO开发板TouchGFX+STM32CubeMX+STM32CubeIDE工程创建
5.进入配置界面,在Project Manager–Project中按下图进行配置,其它按默认配置;
STM32F746_DISCO开发板TouchGFX+STM32CubeMX+STM32CubeIDE工程创建
STM32F746_DISCO开发板TouchGFX+STM32CubeMX+STM32CubeIDE工程创建
6.在clock configuration中将时钟改为216,其余不变;
STM32F746_DISCO开发板TouchGFX+STM32CubeMX+STM32CubeIDE工程创建
7.点击GENERATE CODE,生成工程代码
STM32F746_DISCO开发板TouchGFX+STM32CubeMX+STM32CubeIDE工程创建
STM32F746_DISCO开发板TouchGFX+STM32CubeMX+STM32CubeIDE工程创建
8.结束后点击Open Project,在STM32CubeIDE中打开工程;
STM32F746_DISCO开发板TouchGFX+STM32CubeMX+STM32CubeIDE工程创建
STM32F746_DISCO开发板TouchGFX+STM32CubeMX+STM32CubeIDE工程创建
9.弹窗提示已经存在工程,是否移除?点NO(已经存在的工程实际上就是刚刚生成的工程);
STM32F746_DISCO开发板TouchGFX+STM32CubeMX+STM32CubeIDE工程创建
STM32F746_DISCO开发板TouchGFX+STM32CubeMX+STM32CubeIDE工程创建
10.此时,TouchGFX中提示Project Modified Externally,点击Yes,并重新Generate Code;同时在STM32CubeIDE中Refresh工程;(记得养成习惯:在TouchGFX中修改UI并generate code后,在STM32CubeIDE中一定要Refresh工程,反之亦然)
STM32F746_DISCO开发板TouchGFX+STM32CubeMX+STM32CubeIDE工程创建
STM32F746_DISCO开发板TouchGFX+STM32CubeMX+STM32CubeIDE工程创建
STM32F746_DISCO开发板TouchGFX+STM32CubeMX+STM32CubeIDE工程创建
11.在Project–Properties–C/C++ Build–Settings中勾选箭头所指位置,用于编译输出hex文件(如果不需要hex,这一步也可以跳过);
STM32F746_DISCO开发板TouchGFX+STM32CubeMX+STM32CubeIDE工程创建
STM32F746_DISCO开发板TouchGFX+STM32CubeMX+STM32CubeIDE工程创建
12.在STM32CubeIDE中点击Project–Build All编译工程,编译完成后,点击Debug调试,并点击Resume运行,此时板子开始运行代码,但是由于是空白工程,没有直观的现象;
STM32F746_DISCO开发板TouchGFX+STM32CubeMX+STM32CubeIDE工程创建
STM32F746_DISCO开发板TouchGFX+STM32CubeMX+STM32CubeIDE工程创建

13.回到TouchGFX,在UI上添加控件(image、button),并按图示设置(关键是为button添加一个interaction),然后重新generate code;

STM32F746_DISCO开发板TouchGFX+STM32CubeMX+STM32CubeIDE工程创建
STM32F746_DISCO开发板TouchGFX+STM32CubeMX+STM32CubeIDE工程创建
STM32F746_DISCO开发板TouchGFX+STM32CubeMX+STM32CubeIDE工程创建
14.在STM32CubeIDE中Refresh工程,可以看到相关控件已经出现在Screen1ViewBase.cpp和Screen1ViewBase.hpp的代码中,但这两个文件都是只读的,因此需要到Screen1View.hpp,Screen1View.cpp进行Override and implement;
STM32F746_DISCO开发板TouchGFX+STM32CubeMX+STM32CubeIDE工程创建
STM32F746_DISCO开发板TouchGFX+STM32CubeMX+STM32CubeIDE工程创建
15.将function1()加入Screen1View.hpp,Screen1View.cpp;
STM32F746_DISCO开发板TouchGFX+STM32CubeMX+STM32CubeIDE工程创建
STM32F746_DISCO开发板TouchGFX+STM32CubeMX+STM32CubeIDE工程创建
16.下面是将UI控件与硬件关联,在实际的项目中会常用:
17.定义一个按键,并初始化;
STM32F746_DISCO开发板TouchGFX+STM32CubeMX+STM32CubeIDE工程创建
STM32F746_DISCO开发板TouchGFX+STM32CubeMX+STM32CubeIDE工程创建
18.在Screen1View.cpp中添加动作代码,注意,需要添加main.h头文件
STM32F746_DISCO开发板TouchGFX+STM32CubeMX+STM32CubeIDE工程创建
19.最后,Build all、Debug、Resume,在开发板上运行程序;
20.测试:在屏幕上按下button1按钮,image1消失;先按住开发板上的B_USER按键再按下屏幕上button1按钮,image1出现;
STM32F746_DISCO开发板TouchGFX+STM32CubeMX+STM32CubeIDE工程创建
STM32F746_DISCO开发板TouchGFX+STM32CubeMX+STM32CubeIDE工程创建

21.PS:通过STM32CubeMX配置过工程后,再到TouchGFX上运行simulator或target,会报错,原因还未详查(在原始工程上则正常)。
STM32F746_DISCO开发板TouchGFX+STM32CubeMX+STM32CubeIDE工程创建