收到板卡有一段时间了，现在才来补，那就多写一些吧。
4 E5 K, ^& z" T! E) Y, i7 c& K. W      ST板卡的UI设计还是得使用本家的软件TouchGFX designer。当前使用的是4.26版本，使用较新的版本，这样能够更好的设计想要的UI。
" e; g9 _9 [  R# d+ @) {    这次是申请设计一款车辆仪表的UI，并完成与硬件的交互。那就先从灯光开始。
    初始界面如图１所示：

图1
" m  ^* t% R6 N& }" L& l
6 ~/ m- S, l2 W. _  v* c# u7 m9 ]这里需要两张灯光图片，一张是明亮的开灯效果，一张是灰暗的关灯效果。通过UI的toggle button 按键来完成开关切换。
首先在背景图中增加image 控件，在image 的属性中将图贴进去。如图2所示：

. h6 j+ w5 }+ e图2

9 N  g5 l2 l8 d, B! Q  ]增加togglebutton 按键控件，在属性中选择，on/off的效果图，如图3所示：
1 [9 I$ F5 J9 I1 r
图3
# e4 O8 r' H5 `8 O& F
  w; x4 I. O  d- S' L5 V# C摆放好界面后，在右上角的交互interaction中增加交互效果，设置如图4所示：

9 ^% G/ c6 ^: T3 B6 D8 V图4
+ x( a0 r! p& {: o+ `8 i
就是在项目中增加了按键函数togglebtnled。
+ U. F. @! u" O; h3 E, b界面部分基本就完成了，然后使用VScode 打开项目中的TouchGFX文件夹，所有的UI程序修改都在这个文件夹中。
0 l& Y8 N/ O8 r" |/ g; J

4 ?/ R4 _  V8 I6 D在ScreeView1.hpp 中增加按键控制函数，这个函数可以在base.cpp 中看到。
2 E+ m. d+ M7 h0 Y; j如下所示：

1. virtual void ToggleBtnLed();

复制代码

; j! z0 e1 a8 I. ~, l/ K1 e
然后在ScreeView1.cpp 中编写函数实现功能，如下所示：

1. if (toggleButton1.getState())
   
2.     {
   ! Q8 L. C) `3 c9 g* k
3.         // Turn on LED
   
4.         image5.setVisible(true);  // LED ON image
   ' n* v& r4 m, x
5.         image4.setVisible(false); // LED OFF image
   0 I: ?$ b3 l4 X9 @" C) u
6.         image2.setVisible(false);  // Yellow pear
   / k0 y! d- K+ L* H
7.         image3.setVisible(true); // White pear
   * c/ L# h* p5 V  R
8.     }
   
9.     else
   
10.     {
    7 D: Z8 ~$ R3 h9 ], |% a/ Y
11.         // Turn off LED
    
12.         image5.setVisible(false); // LED ON image
    * l' I: Q) x0 o
13.         image4.setVisible(true);  // LED OFF image
    + r' {! k, A0 V4 q8 m5 g2 ?8 ]
14.         image2.setVisible(true); // Yellow pear
    
15.         image3.setVisible(false);  // White pear
    1 `9 d$ [% @* n7 g0 r
16.     }
    
17.     image2.invalidate();
    
18.     image3.invalidate();
    . O1 E- N1 L2 U2 A2 T
19.     image4.invalidate();
    
20.     image5.invalidate();

复制代码

# ]4 {; C4 p* i  |8 @; R
% C. r! |  F/ w" ^! C" Y( v没什么错误就保存文件。回到UI的界面中，点击generate code按钮，生成code，然后点击仿真按钮，看一下效果。最后点击右下角的programe and run target按钮，将
% N8 J) q: g) L# ]$ f0 u4 f; e程序下载到板卡中。如果有错误的话，UI下面的message 界面会提示。 实际控制效果如图5所示：
% ?; g+ y& L: t
图5