收到板卡有一段时间了，现在才来补，那就多写一些吧。
      ST板卡的UI设计还是得使用本家的软件TouchGFX designer。当前使用的是4.26版本，使用较新的版本，这样能够更好的设计想要的UI。
! ~! M( }" h4 t5 J, S  L    这次是申请设计一款车辆仪表的UI，并完成与硬件的交互。那就先从灯光开始。
2 T5 j9 f: j. {) B- q    初始界面如图１所示：

图1
+ I' o) a- ]; F. Z+ H
8 |! S9 h+ e6 q这里需要两张灯光图片，一张是明亮的开灯效果，一张是灰暗的关灯效果。通过UI的toggle button 按键来完成开关切换。
首先在背景图中增加image 控件，在image 的属性中将图贴进去。如图2所示：
) h3 H. u' j& {6 C
图2

增加togglebutton 按键控件，在属性中选择，on/off的效果图，如图3所示：
: i: a" O/ I; k0 E* l
图3

摆放好界面后，在右上角的交互interaction中增加交互效果，设置如图4所示：

  V7 f6 X) n5 Q3 E2 C8 T图4
1 D8 M5 m% f( e) R1 n) o  Q
, M: G2 p$ |( F就是在项目中增加了按键函数togglebtnled。
1 m9 ^/ y( S5 x; _( s. u# t. S( b界面部分基本就完成了，然后使用VScode 打开项目中的TouchGFX文件夹，所有的UI程序修改都在这个文件夹中。


在ScreeView1.hpp 中增加按键控制函数，这个函数可以在base.cpp 中看到。
如下所示：

1. virtual void ToggleBtnLed();

复制代码

然后在ScreeView1.cpp 中编写函数实现功能，如下所示：

1. if (toggleButton1.getState())
   4 b1 X7 ]! o: H: [: H- |0 V# C1 A% G
2.     {
   
3.         // Turn on LED
   & }' s2 S2 `4 ^# K) Q
4.         image5.setVisible(true);  // LED ON image
   + r. I, V% Z+ D4 ~2 ]4 F. Z
5.         image4.setVisible(false); // LED OFF image
   
6.         image2.setVisible(false);  // Yellow pear
   
7.         image3.setVisible(true); // White pear
   
8.     }
   3 M, B: z+ U' f7 e+ j
9.     else
   
10.     {
    % ]/ k! E6 _/ x
11.         // Turn off LED
    
12.         image5.setVisible(false); // LED ON image
    ( L% h6 a) P+ H7 A5 `# P! I7 S/ J
13.         image4.setVisible(true);  // LED OFF image
    + V( r* |* h5 Z7 T! J, F
14.         image2.setVisible(true); // Yellow pear
    
15.         image3.setVisible(false);  // White pear
    : o! O/ a; s, w2 a4 a# i
16.     }
    
17.     image2.invalidate();
    # V2 [0 l# d  t
18.     image3.invalidate();
    % e2 ?, S$ R$ x% e. l
19.     image4.invalidate();
    
20.     image5.invalidate();

复制代码

7 q4 L/ f8 x( q) O* o5 _9 `, r
+ C4 Z, e" F. W* ]2 `% g  Y* c& }7 S没什么错误就保存文件。回到UI的界面中，点击generate code按钮，生成code，然后点击仿真按钮，看一下效果。最后点击右下角的programe and run target按钮，将
程序下载到板卡中。如果有错误的话，UI下面的message 界面会提示。 实际控制效果如图5所示：
$ z2 N6 y0 x& r4 m
2 Q+ A6 s; S* Y! B2 Y图5
5 A2 J* v  h# u1 ~