返回列表 发新帖我要提问本帖赏金: 80.00元(功能说明)

[STM32H7] 基于STM32H7B3-DK的TouchGFX触控点亮LED

[复制链接]
3571|18
 楼主| 极致创客 发表于 2022-8-10 23:33 | 显示全部楼层 |阅读模式
本帖最后由 极致创客 于 2022-8-11 00:01 编辑

#申请原创#@21ic小管家 @21小跑堂

基于STM32H7B3-DK的TouchGFX触控点亮LED

工程链接:https://pan.baidu.com/s/1JQXI0kRBPyi471RFqcUK6Q?pwd=myi1
提取码:myi1
1 使用TouchGFX Designer生成MDK5工程

开发环境
  TouchGFX软件版本:4.20.0
  MDK5软件版本:5.37.0
  STM32CubeMX软件版本:6.6.1
  开发板:STM32H7B3-DK
  桌面系统:Window10


1.1 产生keil工程模板


为了快速GUI开发,使用TouchGFX生成基于STM32H7B3-DK的MDK5工程模板

打开TouchGFX,点击创建新工程

142498c0e52749f188eadbcdcdff371c

自动跳转开发板选择界面,按照1-5步骤新建工程,注意不要出现中文路径,不然会出现一些意外错误.

0041e2b4d0f8da6176dd2f9c23f48ce9

TouchGFX生成工程结构如下,(后续删除EWARM,gcc,STM32CubeIDE等与keil无关的文件夹)

2bee292df8766167e2474ecf3a4ff92d

生成的文件夹里面有一个STM32CubeMX的工程文件,由于默认配置中生成的是STM32CubeIDE工程代码,我们需要的是keil工程代码,所以需要切换IDE(除了这点,不改任何配置)

f0896fc6bd688e73c74eb541ed2393af

双击.ioc文件,如果出现如下提示,点击Migrate

5e9621a47f2203cae3e7f5aebe9fcad6

点击工程管理,IDE选为MDK-ARM,之后点击产生代码

7f4491c314c5f772f55330aea8b06a63

此时,keil工程模板基本建立,但此时如果直接打开keil工程,编译(此处选择V5编译器,因为V6编译器会出现
很多错误)会出现如下问题,是由于TouchGFX没有生成代码,导致确少界面相关源代码

5f424f7b7d5a76de926096daa97968fe

只需要回到TouchGFX,点击产生代码

3f4d25128d1c3ac1d6909168c3c3deee

此时,keil界面会弹出工程变更信息,点击是

b2df41cc34435b3d76e805b770e78e58

再次编译keil工程,无报错,如果有警告,再次编译后可消失,生成.hex文件

d9c98a65467ca60064c0831a72f20b14

打开STM32CubeProgrammer,连接开发板,点击EL,选择外部flash烧录算法

d40f0c9e4be27b719b41fc957e0b2ed9

之后点击下载,选择.hex文件,烧录

784caec90509851687d69310590f96f5

在开发板已经运行中烧录程序,如果出现如下错误,断开设备重新连接一次再烧录,烧录前出现白屏表示正常

8802b745e962c29463c6cdd0a9db6c44


使用由于生成的是空白模板,下载到开发板后为黑屏,此时回到TouchGFX,随便拖拽一个控件到界面,生成代码

1e84bf2cf5f4449e1e1cc59d9f1e5c05

之后在keil中编译,再次下载后正常显示

b81e0f24bd037d973915dc9cc809c1b5

2 keil环境下使用外部烧录脚本(stdlr)烧录QSPI

    在GUI设计中需要大存储空间,这时候我们需要将代码和数据放在外扩的QSPI存储空间,尽可能的使用调试工
具一键烧录工具

软件: keil5,STM32CubeProgrammerv2.10.0


烧录方法

      Keil调试环境下,有两种方式进行外部QSPI存储空间的烧录。一种是基于FLM算法,在keil.BSP包中提供算法。
第二种方法是调用第三方的脚本进行烧录,这里使用ST公司的STM32CubeProgrammer所提供的相应的.stdlr脚本。


设置环境变量

1.打开环境变量设置步骤

8ee990234fd46e7f5c158fb32f41e585

2.添加环境变量为STM32_Programmer_CLI.exe所在的安装目录。默认目录如下:

2d41b2a8d625824963b7b8a99df898a7

3验证环境变量是否添加成功。打开CMD命令提示符,输入“STM32_Programmer_CLI -version”,显示如下即为设置成功。

391ffb71cd0cdf07269d8f5ebcb4912d


Keil下载设置

Keil中,我们采用第三方的工具下载的方式进行下载,步骤如下

1. 配置下载工具如下图所示。最后第三步所填写的命令及参数如下:

4f77cdc5168d5a82f8406691bf9c787d

    命令中的.\STM32H7B3I-DK\STM32H7B3I-DK.hex是工程生成的Hex文件,需要按照所在的工程进行修改。烧录
脚本stldr的目标也需要对应的按照实际进行修改。STM_Programmmer_CLI.exe会根据STM32H7B3I-DK.hex中的地
址信息决定将代码烧录到哪个地址,所以编译之前,必须在分散加载文件(*.sct)中说明将代码放到外部QSPI Flash的地址范围。

b4c390214240a5972439ea34b54b4dda

2下载结果

下载完成后按一次复位按钮就可正常显示

2b0e75f21e1108319b71861350940763

3 TouchGFX触控点亮LED

TouchGFX用MVP架构将UI界面,界面逻辑,硬件系统三者分离

View: 负责描述UI界面,比如包含哪些控件、控件如何布局等,Touchgfx Designer软件里的工作就是在构建View
Model: 保存与UI界面有关的数据;有个tick()函数,每秒执行60次,实现与硬件系统交互,相当于硬件与Touchgfx之间的桥梁
Presenter:在Model与View之间起传话筒的作用
System:Touchgfx以外所有的其它部分都属于System的范畴

2ff77443757ab162233887b2f97b8d9c

我们也完全可以在View的点击事件回调函数里直接调用HAL_GPIO_TogglePin函数,但是这样会破坏MVP结构,不推荐这样做。
所以还是按官方的方法,一层一层剥套娃吧。之所以使用MVP架构是为了把代码功能分离开来,增强系统的可移植性和可阅读性。


1. 通过STM32CUBMX配置LED3

2. Touchgfx Designer里放一个按键,并为它添加交互函数btnClicked:

6dfea097e32b498e5f1f6dacc35c5993

3打开keil,然后在Screen1View中实现btnClicked:

62f3f8de7b35b330dc0c66a627cbca93

09eddc7a900a80a8f9714135d2a0a704

4由于presenter里没有btnClicked这个方法,所以需要为它添加一个:

12ef8650080864849ad7c1f6a469de43

6eab38ace008348a0e0127f60b2b4ab8

5、同样,Model里也没有toggleLED方法,依然需要为它添加。

7f723172a804925003f7564367a44684

5f92ce26b66bceb16993e699f08ba40d

6编译无报错就可下载到开发板

补充说明
V6编译器下编译出错问题
8c3408ab360b4b4f91e6ad515b71a735

第一次发技术贴,不足之处还望各位大佬提意见









6c136f96d3b1345d1b09a085774e3f30

打赏榜单

21小跑堂 打赏了 80.00 元 2022-08-12
理由:恭喜通过原创文章审核!请多多加油哦!

评论

手把手教你完成第一个TouchGFX的试验,配置过程完整详细,思路较为清晰,完成度较好,若配上最终实现效果的视频或动图更佳。 备注:这方面的资料或者说教程网络很完善,介于第一个在本论坛发表该类原创,同时对ST的开发板测评有一定帮助,稍微提高了点奖励~请作者大大再接再厉哦!  发表于 2022-8-12 15:20
skyred 发表于 2022-8-11 21:28 | 显示全部楼层
这个好高级,学习了
过两天还来
 楼主| 极致创客 发表于 2022-8-12 15:23 | 显示全部楼层
捉虫天师 发表于 2022-8-12 17:38 | 显示全部楼层
过程详细,思路清晰,楼主厉害
suncat0504 发表于 2022-8-17 09:31 | 显示全部楼层
学习了,谢谢楼主分享知识。
duo点 发表于 2022-8-17 11:06 来自手机 | 显示全部楼层
这逻辑思维也太强了
tpgf 发表于 2022-9-8 11:38 | 显示全部楼层
多软件协同合作啊
jf101 发表于 2022-9-8 11:42 | 显示全部楼层
操作提示明确,思路清晰,适合新手一步一步开发!
晓伍 发表于 2022-9-8 11:48 | 显示全部楼层
被这个界面吸引到了 非常感兴趣啊
八层楼 发表于 2022-9-8 11:56 | 显示全部楼层
使用手册可以去哪里下载呢
观海 发表于 2022-9-8 12:08 | 显示全部楼层
btnClicked这个方法,只需要添加一个函数声明就可以吗
guanjiaer 发表于 2022-9-8 12:17 | 显示全部楼层
逻辑性非常的强啊
heimaojingzhang 发表于 2022-9-8 13:13 | 显示全部楼层
除了这俩编译器  还可以使用其他种类的编译器吗
lzbf 发表于 2022-10-20 11:47 | 显示全部楼层
stm32f103能运行touchgfx吗     
xxmmi 发表于 2022-10-20 22:18 | 显示全部楼层
btnClicked这个方法,只需要添加一个函数声明就可以吗
pixhw 发表于 2022-10-21 22:31 | 显示全部楼层
TouchGFX充分利用了STM32的硬件图形外设
sdlls 发表于 2022-10-22 09:06 | 显示全部楼层
TouchGFX应用程序的视觉外观不错。  
youtome 发表于 2022-10-22 14:58 | 显示全部楼层
想学一些简单的C++做GUI,推荐什么书?  
您需要登录后才可以回帖 登录 | 注册

本版积分规则

3

主题

88

帖子

2

粉丝
快速回复 在线客服 返回列表 返回顶部