一、TouchGFX安装
1.从stm32Cubemx下载TouchGFX
2 [( L0 [$ l4 v7 A9 Y
; w$ e( \5 j$ @4 J; E

& V- _2 [5 L* R: K# l$ b2.找到下载路径
这个路径是可以更改的，默认在C盘。
在stm32Cubemx的上方工具栏里依次选择Help->Updater settings(快捷键Alt+S)找到touchGFX的下载目录。
. g# g, K- ]% j. K9 K3 v7 C1 D+ J6 q
9 ^/ I9 y5 H5 n( i

3.为MDK5安装touchGFX插件
2 k1 `# Z2 \. S& j% f找到MDK5的TouchGFX安装包位置,具体位置在第2步的Packs文件夹下。...\Packs\STMicroelectronics\X-CUBE-TOUCHGFX\4.15.0\STMicroelectronics.X-CUBE-TOUCHGFX.4.15.0.exe



安装完成后可以在 keil5的Pack Installer里看到已经安装好了。

, b% P$ T) }* x* B/ V
$ {$ I5 I" M; G6 F% @& t" W% ?% Q
4.安装touchGFX
& s  _- i6 P. v7 {安装包目录：...\Packs\STMicroelectronics\X-CUBE-TOUCHGFX\4.15.0\Utilities\PC_Software\TouchGFXDesigner\TouchGFX-4.15.0.exe。
也是在第2步的下载目录下。
# c: p0 b6 J( U" B* ]4 ?

$ g' a. v% G! i
' @# `# r7 w2 ^6 `至此，安装工作已经完成。

/ m' o( b! E/ a# S, F4 y; K二、创建第一个示例工程
1.创建工程
9 m* D* `% M* R5 m7 c! w创建工程，选择Blank UI，并设置你需要的屏幕大小。这里屏幕设置为480*272


+ l: @9 V& N3 S- X; E
4 v9 k* G( v6 ?6 y2.添加背景
1、TouchGFX 应用程序由多个屏幕组成。屏幕包含许多组成用户界面的小部件。屏幕覆盖整个显示器，因此一次只向用户显示一个屏幕。要做的第一件事是将初始屏幕的名称更改为Main，如下图所示。这样做的目的是以后有多屏幕应用的时候可以很好区分，对于程序维护和开发来说非常适合。
2、通常，用Box或Image给屏幕添加一个背景。此例子中，我们将使用Image给屏幕添加一个背景。TouchGFX支持BMP和PNG，尽量使用PNG，因为PNG更小而且支持透明度

* J: X% w; s9 e' W
4 s+ g; l$ O* d7 v
; k& N% y/ L+ @, \0 V: n" F  x工具栏左侧点击Add Widget 选择添加一个Image插件，同时别忘记更改控件名称

/ _. k: G* \& Y
/ @- ~8 H* @8 O' y
: g! ]. `( S9 a1 Y1、选择"Image"选项卡并单击蓝色加号图标。
  ^9 Y8 C6 \. _% o+ U* Y; {. }2、找到下载的图片素材并选择"background.png"，为了防止重复工作把其他需要的图片一起添加进去。可以多选一起添加。
3、导入后左侧会显示添加的图片

# r+ ?4 L! l' j$ ?- u) p3 R! F

1、回到画布视图
7 N, {8 }$ X6 ~2、右侧选择image给控件添加背景图片

6 W, _5 }1 W3 l6 D$ f
) o# B: i" d6 y# q' G7 e' w
3.添加按钮
1、单击"小部件"选项卡中的"按钮"小部件，向屏幕添加两个按钮，并更改名字为        ButtonUp和ButtonDown
- |6 T8 J$ ?# K0 y" k" M; v3 J2、ButtonUp定位在 x=40，y=60。
3、ButtonDown定位在 x=40，y=150。
- \2 N) C) L( ~; N) c/ {3 [& l
! P2 _, N. |4 ]* m
  r' d; U( V  o3 N/ f3 t
更改按钮的外观。在右侧更改按钮松开和按下时的背景图片。
: R6 |( a9 k8 p2 ]! ]$ H& N' y8 z
6 e, g/ c5 c. N' P' A

8 K  G+ y& G  K7 c# @1 H添加完成后，运行simulator，在PC模拟一下界面是否有问题。

2 R% B' d& c  b3 Y' Y/ X2 j

# T, |( `# q3 S8 g# u0 |, o2 w; y" [4.添加文本
! S# v6 c2 p$ [1、添加一个Image 控件
2、给它添加背景图片"counter_box.png"
3、坐标：x=250，y=59。
4、名字改为：counter_box



1、添加文本控件
2、坐标：x=250，y=90
3、右侧AutoSize取消勾选，设置W=152  H=90（必须先取消Autosize否则没法改宽度和高度）
4、名字设置countTxt
  d, x0 y8 Y7 n5 P8 f# _- @7 g' `5、对其方式设置：center

% C0 A6 I7 ~" U
9 a! V8 l0 J2 o' H3 r$ d) o) W# H
- T' l1 ?# I: Q! P4 U按照下图设置TextArea的字体



我们希望 TextArea 显示一个数字，我们可以用按钮更改该数字。
为此，更改文本以包括"通配符"。通配符是文本中的标记<d>，在运行时用其他内容替换。我们只想显示一个数字，因此我们
- h! I8 n' j* j3 ?$ }& G将文本更改为"<d>"。在其他项目中，可以将动态部件与固定文本相结合，例如"温度：<temp> °C"。另外，<...> 通配符是可选的。
& I2 G0 U: [- N) v0 g# d: c1、添加通配符
2、设置通配符符号
3、设置初始化值
# [: z+ f" `0 W2 @! E4、设置buffer
3 C* Z/ b. |$ r) G$ u8 M+ l9 p


" x! V: S- W3 P运行模拟器
- g0 a' t3 f6 b* v- c4 L  y) x
) l3 y$ H4 l& G3 D

5.添加代码
7 `3 [9 n1 r3 H" h* [4 j6 X: T我们将创建两个InterActions，每个按钮一个。
. |5 _+ l' ]! B% W% W2 q. N9 Y1、添加交互
2、设置触发方式
+ ^/ ?+ h* `4 q' _4 e3、设置触发源
4、设置触发时调用虚函数
9 v: @+ F3 {6 ~5 C8 K: g/ W% \( z5、增加虚函数名称，方便区分维护
# r! ?8 G6 }6 O- p) M2 q" ^  g- n4 o: V3 t: A6、为"交互"提供信息性名称，以便以后可以识别它，也可以默认不修改它
) ^, m) }. Y4 |5 k5 Z

+ Y/ p5 S* w& a3 k; S0 c8 i
检查无误后点击右上角Generate Code生成代码
# w7 S9 s8 S/ j8 }  w$ @

& O5 L8 t6 u5 E% J. c* q' O
然后依次找到simulator\msvs\Application.sln并打开代码
1 b: n0 H) g0 {0 L

- n( {6 h9 x' @
直接编译工程或者按快捷键F5，中间有任何提示均选择是。


% r" F+ N0 M3 F+ b
( X% [" S6 ?% X9 F- b最终结果和TouchGfx仿真结果一样
% J* C$ Y7 c" \- {. `
/ h! i# p+ N( B; F; i( h, C( q% i

5 e" T  o- \: r  L- M3 }6.生成的代码
虚方法位于类MainViewBase.hpp的公共部分。生成的方法具有空实现，需要重写。此文件不要更改，有touchGFX自动生成
3 T1 k2 |- P2 n( c

1. /*********************************************************************************/
   
2. /********** THIS FILE IS GENERATED BY TOUCHGFX DESIGNER, DO NOT MODIFY ***********/
   ! r2 R6 j, h  n6 F# y7 O% a
3. /*********************************************************************************/
   8 ~4 I7 n( g' B: e0 ~+ K
4. #ifndef MAINVIEWBASE_HPP
   
5. #define MAINVIEWBASE_HPP
   
6. 
   
7. #include <gui/common/FrontendApplication.hpp>
   
8. #include <mvp/View.hpp>
   / A0 d/ |, g7 h/ z, b. Y
9. #include <gui/main_screen/MainPresenter.hpp>
   ' R  F& u5 \: m1 S0 P5 H" m
10. #include <touchgfx/widgets/Box.hpp>
    ; C: R+ J6 i( }8 }! @/ o
11. #include <touchgfx/widgets/Image.hpp>
    
12. #include <touchgfx/widgets/Button.hpp>
    
13. #include <touchgfx/widgets/TextAreaWithWildcard.hpp>
    / U" d1 u. U( _+ d, ?- ~& V
14. 
    
15. class MainViewBase : public touchgfx::View<MainPresenter>
    . k, V+ C2 i' h6 t
16. {
    
17. public:
    
18.     MainViewBase();
    
19.     virtual ~MainViewBase() {}
    ( t7 u6 w- [: I& ~2 S$ H
20.     virtual void setupScreen();
    : }* ^" R8 ~* x
21. 
    1 x  B2 a4 O, q5 S
22.     /*
    
23.      * Virtual Action Handlers
    
24.      */
    ' [/ P) }; U( Y& [  b, w. V
25.     virtual void ButtonUpClick()
    0 {- T; |, E" }$ F! p
26.     {
    ( m" X8 J, I7 f9 n5 c/ }
27.         // Override and implement this function in Main
    / r, {  e/ j3 n7 T
28.         //需要重写
    & y3 O( |/ Q( d% K1 i
29.     }
    
30. 
    + g3 X* Z4 e9 g" J! c: R+ Q. i
31.     virtual void ButtonDownClick()
    % j* ]2 G- z2 K- |* o
32.     {
    
33.         // Override and implement this function in Main
    " @: O/ H# D$ {' Q! z
34.         //需要重写
    # U& d, q4 k* f/ C$ B9 B- t) Q
35.     }
    
36. 
    
37. protected:
    ( m  Y( H& T. _$ P3 i  v
38.     FrontendApplication& application() {
    
39.         return *static_cast<FrontendApplication*>(touchgfx::Application::getInstance());
    7 o: ?" R* a& }6 _
40.     }
    
41. 
    * X1 l! ~. _2 R9 c
42.     /*
    
43.      * Member Declarations
    
44.      */
    0 b$ w8 v! G) S& j( ]( E" ]" h1 j5 R
45.     touchgfx::Box __background;
    * r( K( B8 g; V7 G1 B
46.     touchgfx::Image Background;
    
47.     touchgfx::Button ButtonUp;
    
48.     touchgfx::Button ButtonDown;
    
49.     touchgfx::Image counter_box;
    " j; F* a& M6 k, g& d
50.     touchgfx::TextAreaWithOneWildcard countTxt;
    / B0 s! s) }/ |% T. ]: [0 b
51. 
    
52.     /*
    
53.      * Wildcard Buffers
    
54.      */
    ; M. Y' j4 S) j' ~' q5 d# @
55.     static const uint16_t COUNTTXT_SIZE = 10;
    . m2 z9 G- |0 t% N1 _! T
56.     touchgfx::Unicode::UnicodeChar countTxtBuffer[COUNTTXT_SIZE];
    
57. 
    2 `$ f( P4 v/ t( @6 i- t+ ?: u5 K, k
58. private:
    
59. 
    ( q7 s8 C8 v2 u9 E0 N
60.     /*
    1 O/ {. J3 r3 @; {8 E" a( V
61.      * Callback Declarations
    
62.      */
    
63.     touchgfx::Callback<MainViewBase, const touchgfx::AbstractButton&> buttonCallback;
    6 F3 ?8 r; Z0 M* N- k( M3 Y
64. 
    ' j. d; s( ]+ u& t8 c9 c4 m  H
65.     /*
    , y3 Q/ e% {: L0 i+ P4 |
66.      * Callback Handler Declarations
    
67.      */
    
68.     void buttonCallbackHandler(const touchgfx::AbstractButton& src);
    
69. 
    
70. };
    
71. 
    
72. #endif // MAINVIEWBASE_HPP
    

复制代码

7.实现虚方法

1. 在MainView.hpp中手动增加虚方法声明
   
2. virtual void ButtonUpClick();//添加
   + j4 m3 e" a, Z* h' l2 k9 H
3. virtual void ButtonDownClick();//添加

复制代码

1. #ifndef MAIN_VIEW_HPP
   
2. #define MAIN_VIEW_HPP
   
3. 
   
4. #include <gui_generated/main_screen/MainViewBase.hpp>
   1 t! q$ \  K5 I* ?2 T. A
5. #include <gui/main_screen/MainPresenter.hpp>
   3 L" F5 Q- r! Z* @
6. 
   , Q$ N% E# y" Q0 @1 P
7. class MainView : public MainViewBase
   ' A1 e* a6 }1 x2 G
8. {
   
9. public:
   
10.   MainView();
    2 `' o" j: p5 |1 P4 v! r- @  [
11.   virtual ~MainView() {}
    % A' v- c( h* h& z* V7 b
12.   virtual void setupScreen();
    & `- R# v' |/ J* r' P2 K
13.   virtual void tearDownScreen();
    : @+ Y9 Z: F* C  s5 f% C" o4 N
14.   virtual void ButtonUpClick();//添加
    
15.   virtual void ButtonDownClick();//添加
    
16. }

复制代码

8 H: p  O; Q. X+ C( T5 X然后在MainView.cpp中增加ButtonUp和ButtonDown按下时打印提示

+ Q- G: ~% f8 W. y: D* T

1. #include <gui/main_screen/MainView.hpp>
   
2. 
   . C4 l% V! H- e) i' g$ Y5 y
3. MainView::MainView()
   
4. {
   - J( c4 {3 P9 r7 _9 c7 e! `
5. 
   & q: B  r4 C' s: X3 s. ~9 Q  M
6. }
   
7. 
   3 {  k: `! m1 @7 c+ Z1 w# ]" I. E2 V
8. void MainView::setupScreen()
   
9. {
   
10.   MainViewBase::setupScreen();
    - |: ^2 N  K" O& i  g, p- J, M
11. }
    
12. 
    ! h, z9 W- Q! R
13. void MainView::tearDownScreen()
    / r7 q" @( ]* @
14. {
    
15.   MainViewBase::tearDownScreen();
    
16. }
    
17. 
    . E0 Y) {) o3 g7 A; z8 Q* j4 f
18. void MainView::ButtonUpClick()
    ) c5 X& S2 P) V3 ~; B7 c
19. {
    ! T- v- X0 ^: o6 q
20.         touchgfx_printf("buttonUpClicked\n");
    4 P$ |) E/ z5 {, G- Q! n
21. }
    * O  }( q2 F  R
22. 
    # D( Q& Z/ E. k8 X9 ?
23. void MainView::ButtonDownClick()
    
24. {
    ! H% K; r: W9 O. u1 J& Q+ A
25.         touchgfx_printf("buttonDownClicked\n");
    
26. }

复制代码

# l4 B9 a- @' |  Y# q! l% {在MainView.cpp的按键按下方法中，我们增加计数器值。然后，新值将转换为字符串，并复制到我们为上一步中的文本配置的 10 个字符缓冲区。
  t2 |# `; A. Q# v7 _5 b& S0 k

1. #include <gui/main_screen/MainView.hpp>
   
2. 
   
3. MainView::MainView()
   
4. {
   
5. 
   
6. }
   : q  s/ O: e5 K
7. 
   / }, Y" ^: M" `3 ~) H0 X2 W
8. void MainView::setupScreen()
   
9. {
   
10.     MainViewBase::setupScreen();
    
11. }
    
12. 
    
13. void MainView::tearDownScreen()
    
14. {
    0 @0 {2 ~. V+ U( i& h
15.     MainViewBase::tearDownScreen();
    + }4 m+ f  }+ f: m$ a; o  ~
16. }
    / N4 `: i7 k8 k2 Z
17. void MainView::ButtonUpClick()
    
18. {
    0 F* l7 o# r' t
19.         touchgfx_printf("buttonUpClicked\n");
    9 _1 a) u" m4 G5 h5 y
20.         counter++;
    9 }. u( B4 f9 |4 Y
21.         Unicode::snprintf(countTxtBuffer, COUNTTXT_SIZE, "%d", counter);
    
22.         countTxt.invalidate();
    
23. }
    ) Y. M$ K7 L3 l* F& ^
24. 
    
25. void MainView::ButtonDownClick()
    + f1 q& y+ E( m0 w! A8 y+ M! l' T/ h
26. {
    
27.         touchgfx_printf("buttonDownClicked\n");
    ) {4 d  G  v* F8 d
28.         counter--;
    ) K9 B8 r8 N) ]2 A& z, v
29.         Unicode::snprintf(countTxtBuffer, COUNTTXT_SIZE, "%d", counter);
    4 @: |( S6 {5 S) ^: |
30.         countTxt.invalidate();
    
31. }

复制代码

运行发现并没有按预期显示数字
* |9 W0 M- e0 D3 D! d8 P
9 \2 z% B8 \, n0 V* w
! ~& `0 q, }( X3 D$ k
5 b* E) j- S* r我们需要告诉 TouchGFX 设计器在"默认"排版中包含字符 0-9。
为此，请返回 TouchGFX 设计器，然后单击"Text"选项卡，然后单击"Typographies"选项卡。在默认排版"WildCard Ranges"列中，添加范围"0-9"。为了能表示负数还需要在WildCard characters 添加负号“-”。
) b; J3 `' w% @% t# X  `

% l: g8 \' v9 {3 R. h
重新运行发现实现了我们预期的功能
" _6 R+ w/ ~  y


至此，我们已经完成了第一个实例。
' J/ {& r3 s. d
8 q* a8 r. g3 G0 C