收到板卡有一段时间了，现在才来补，那就多写一些吧。
      ST板卡的UI设计还是得使用本家的软件TouchGFX designer。当前使用的是4.26版本，使用较新的版本，这样能够更好的设计想要的UI。
1 j1 u8 _+ P8 Y+ B    这次是申请设计一款车辆仪表的UI，并完成与硬件的交互。那就先从灯光开始。
    初始界面如图１所示：

图1
2 K" C/ b3 y9 s! l
这里需要两张灯光图片，一张是明亮的开灯效果，一张是灰暗的关灯效果。通过UI的toggle button 按键来完成开关切换。
首先在背景图中增加image 控件，在image 的属性中将图贴进去。如图2所示：

图2

* m6 d4 s( b# z# x" \8 H5 o增加togglebutton 按键控件，在属性中选择，on/off的效果图，如图3所示：

5 W1 {, g* e4 y& t; G4 Y: }图3
8 M9 d/ E1 s9 o; W9 M; n; C+ H
摆放好界面后，在右上角的交互interaction中增加交互效果，设置如图4所示：
7 C: N5 y% T! ^9 z* S! w
图4
& `/ i  Y: ?. k9 m1 f4 V
2 @( B5 |$ _) G4 G1 P- C5 o: Y就是在项目中增加了按键函数togglebtnled。
界面部分基本就完成了，然后使用VScode 打开项目中的TouchGFX文件夹，所有的UI程序修改都在这个文件夹中。
- w) L( y) _- p% s! j$ Z

在ScreeView1.hpp 中增加按键控制函数，这个函数可以在base.cpp 中看到。
8 m3 y0 X2 a$ ]+ U/ C, a/ ~如下所示：
0 v! ~6 X6 I2 W

1. virtual void ToggleBtnLed();

复制代码

  K/ l8 A' ^$ h+ \然后在ScreeView1.cpp 中编写函数实现功能，如下所示：

1. if (toggleButton1.getState())
   * s7 t3 Z" h& X$ b' Z) q
2.     {
   
3.         // Turn on LED
   ' A9 b5 F, J. u' Z1 b3 e
4.         image5.setVisible(true);  // LED ON image
   
5.         image4.setVisible(false); // LED OFF image
   ) O* Q8 i9 V3 H8 c8 j1 q
6.         image2.setVisible(false);  // Yellow pear
   4 U  e( H6 e' [/ t% X" @5 }' G5 L7 Q
7.         image3.setVisible(true); // White pear
   4 n$ n1 F2 P& F7 B) ]: z: v
8.     }
   
9.     else
   0 `. o! _. N1 Y$ p
10.     {
    6 ?+ D: B- m1 ^( E" j. B
11.         // Turn off LED
    
12.         image5.setVisible(false); // LED ON image
    
13.         image4.setVisible(true);  // LED OFF image
    
14.         image2.setVisible(true); // Yellow pear
    & }0 }" A5 p, o6 i
15.         image3.setVisible(false);  // White pear
    
16.     }
    ; r+ u% @5 o) W5 q5 M
17.     image2.invalidate();
    3 C6 A% Z% w$ P3 r* `
18.     image3.invalidate();
    8 P; N+ S0 J7 U) E" b$ w! ]; K8 ]
19.     image4.invalidate();
      R6 a( c7 P- [+ @7 t2 n; L
20.     image5.invalidate();

复制代码

" _- U7 V9 z, L& }! h
没什么错误就保存文件。回到UI的界面中，点击generate code按钮，生成code，然后点击仿真按钮，看一下效果。最后点击右下角的programe and run target按钮，将
! {3 F& r) K$ w. q程序下载到板卡中。如果有错误的话，UI下面的message 界面会提示。 实际控制效果如图5所示：
8 e, h' B" X$ i3 m' ]. k: B( ~& T
- u/ i: U+ C' [图5
/ J4 M; ]( g  c8 \& H