1 使用TouchGFX Designer生成MDK5工程
% m) s& I$ _0 E4 }  j6 X' |: J( j9 J
+ ?! y$ |: u# F7 u# p开发环境

  TouchGFX软件版本：4.20.0

  MDK5软件版本：5.37.0

  STM32CubeMX软件版本：6.6.1

  开发板：STM32H7B3-DK

  桌面系统：Window10

' l) Z/ R% B2 ~5 g# j
/ Y6 n8 K$ a% V1 d) O( Q/ g! r* s1.1 产生keil工程模板

5 R' @% A3 L/ Q2 q, @& \为了快速GUI开发，使用TouchGFX生成基于STM32H7B3-DK的MDK5工程模板

打开TouchGFX，点击创建新工程


3 S7 \* e; i3 c. z3 B, J+ `9 z
" `1 |7 n, ^# V) Q自动跳转开发板选择界面，按照1-5步骤新建工程，注意不要出现中文路径，不然会出现一些意外错误.
2 b2 N2 G) B$ j) _, s" J2 _4 z. S
: Z) Q) o: y% }$ T. Q$ }

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


9 a- P, [" U  t; m7 K4 n
生成的文件夹里面有一个STM32CubeMX的工程文件，由于默认配置中生成的是STM32CubeIDE工程代码，我们需要的是keil工程代码，所以需要切换IDE（除了这点，不改任何配置）


* k/ f- q6 e5 m% ?9 E
双击.ioc文件，如果出现如下提示，点击Migrate
5 \  J1 N6 g  u! o  W
3 J' N8 d4 m3 P4 R

! G8 O5 S+ u  ]5 g点击工程管理，IDE选为MDK-ARM，之后点击产生代码
3 ]$ \: r% e* A: o+ W- z# W6 |


1 w+ [; o% @7 u* u# U' j0 \% h/ g2 x此时，keil工程模板基本建立，但此时如果直接打开keil工程，编译（此处选择V5编译器，因为V6编译器会出现
很多错误）会出现如下问题，是由于TouchGFX没有生成代码，导致确少界面相关源代码

0 K% q' B' K, h, A# Z
+ `- }! F  N' R% q- S
) [+ e" Q' |+ z! O. T只需要回到TouchGFX，点击产生代码



此时，keil界面会弹出工程变更信息，点击是
7 ~) e5 L  w6 S- K) ?
- S- i1 @& T; Q* ~% D

5 `8 E; k1 N) {* R再次编译keil工程，无报错，如果有警告，再次编译后可消失，生成.hex文件
; X& f7 }, }5 R


3 i( Y' s7 w! w  t" s# w* D1 T打开STM32CubeProgrammer，连接开发板，点击EL，选择外部flash烧录算法


8 w. y& e9 S+ Z5 _3 s" ^
" x. \. z, L0 R& V. |& A( l之后点击下载，选择.hex文件，烧录

& ^' g. B9 d. ?! k" _

在开发板已经运行中烧录程序，如果出现如下错误，断开设备重新连接一次再烧录，烧录前出现白屏表示正常
8 h3 h+ ~2 ]+ \- G6 ?
: m' W6 M6 h1 w! P


使用由于生成的是空白模板，下载到开发板后为黑屏，此时回到TouchGFX,随便拖拽一个控件到界面，生成代码
- y; @6 ^/ [, f8 y
5 c3 H2 m! }: B  H. O

$ a" m) I7 v: v6 R5 @- M7 a! V% A之后在keil中编译，再次下载后正常显示


8 q. Z( c9 w# D, H/ |; @" ]
. r9 ]; I; {7 g& g' \2 keil环境下使用外部烧录脚本（stdlr）烧录QSPI
0 \( d1 ^" t' O% B
- W6 B/ v* F5 K7 }/ u    在GUI设计中需要大存储空间，这时候我们需要将代码和数据放在外扩的QSPI存储空间，尽可能的使用调试工
9 N- c( A* S! u5 M具一键烧录工具

软件： keil5，STM32CubeProgrammerv2.10.0

' F0 ~0 Y) Y: _7 }
: _+ Y# ]) I1 T% w烧录方法
& z- `- L4 T+ x) J9 r8 V  n% ]
      Keil调试环境下，有两种方式进行外部QSPI存储空间的烧录。一种是基于FLM算法，在keil.BSP包中提供算法。
第二种方法是调用第三方的脚本进行烧录，这里使用ST公司的STM32CubeProgrammer所提供的相应的.stdlr脚本。


8 I4 U! T; u5 v/ C# d) b4 h4 e设置环境变量

: a: a* _2 T* t4 G' k  b2 y3 d1.打开环境变量设置步骤



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

6 r; ?1 j+ G0 o# U* P
1 g, f  _, k! b9 V% \
3验证环境变量是否添加成功。打开CMD命令提示符，输入“STM32_Programmer_CLI -version”，显示如下即为设置成功。

8 ~; k9 g2 v- u4 K
8 o7 d( S9 W: ^3 G5 B% w

5 e) O$ a) i  b! r4 v- }Keil下载设置

Keil中，我们采用第三方的工具下载的方式进行下载，步骤如下
0 d' @. _. F5 |" }# c9 b7 ~. _
1. 配置下载工具如下图所示。最后第三步所填写的命令及参数如下：
3 }& W. m) _, ?- R' d- k
4 J& I, O/ M' N2 r

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


2下载结果
; o$ k# Q; P- X/ L& {
8 Z$ A# [* v, |) \& n7 h下载完成后按一次复位按钮就可正常显示



/ K0 P) g$ D8 n! J' h2 {( |3 TouchGFX触控点亮LED
! n* w' Z2 a0 ^5 F" P
TouchGFX用MVP架构将UI界面，界面逻辑，硬件系统三者分离

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


8 |) I( ]( i8 }7 |
, g* ~& j2 O2 ?& p我们也完全可以在View的点击事件回调函数里直接调用HAL_GPIO_TogglePin函数，但是这样会破坏MVP结构，不推荐这样做。
所以还是按官方的方法，一层一层剥套娃吧。之所以使用MVP架构是为了把代码功能分离开来，增强系统的可移植性和可阅读性。
% v* ~2 J  k$ j! ~0 I/ A& f" Q7 y* A
# ?# b3 P" j  B
& x( h- o2 c8 ?5 s4 Z1 ~1. 通过STM32CUBMX配置LED3

/ x  ?. D) r, Y% j, P4 @$ J+ f2. Touchgfx Designer里放一个按键，并为它添加交互函数btnClicked：

# ]' d6 N- |: c6 |- Z, \

. e4 k$ i- q. \" [) q) ]6 |; f1 A8 d3打开keil，然后在Screen1View中实现btnClicked：





7 R; A7 u# }, Y3 g" t4由于presenter里没有btnClicked这个方法，所以需要为它添加一个：

5 C: m- [4 q2 f, _% f


2 N) E. l5 b( w* |3 `1 u+ u9 U
0 P, \% Y8 W5 K' ]5 T* ~5、同样，Model里也没有toggleLED方法，依然需要为它添加。

, S6 ~0 t. h( _# `7 p

作者：极致创客