8 ^# X) S9 p  G2 y3 Q5 [  t0 n' v       收到板卡有一段时间了，现在才来补，那就多写一些吧。
; \) f3 q8 T) q! @& w      ST板卡的UI设计还是得使用本家的软件TouchGFX designer。当前使用的是4.26版本，使用较新的版本，这样能够更好的设计想要的UI。
    这次是申请设计一款车辆仪表的UI，并完成与硬件的交互。那就先从灯光开始。
    初始界面如图１所示：
$ B2 u: S( q& o$ g3 N7 j: @' Q
图1
& C+ f' `: V. U6 r- W
' x5 N- B! Y# q这里需要两张灯光图片，一张是明亮的开灯效果，一张是灰暗的关灯效果。通过UI的toggle button 按键来完成开关切换。
首先在背景图中增加image 控件，在image 的属性中将图贴进去。如图2所示：
6 y/ n# T+ _# W4 @6 L2 _4 N. W
图2
% G& ?! ~2 j# P; V
5 m! C7 `" Y0 i; l, A增加togglebutton 按键控件，在属性中选择，on/off的效果图，如图3所示：
8 d; M3 s% U/ k/ q/ {" }: ]
: A7 I# l% M0 h2 _; K8 n& L图3

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

图4
4 V( l5 P5 Y! e" _# `$ j" f
' ?0 D! R' }9 |  f* _* B就是在项目中增加了按键函数togglebtnled。
界面部分基本就完成了，然后使用VScode 打开项目中的TouchGFX文件夹，所有的UI程序修改都在这个文件夹中。

8 e7 }; d9 ?7 T' d
在ScreeView1.hpp 中增加按键控制函数，这个函数可以在base.cpp 中看到。
如下所示：
( b/ S/ n$ l, ?+ y( T

1. virtual void ToggleBtnLed();

复制代码

# w( v5 C9 o. B9 e3 N" Y
' G8 t; x! L) d9 @0 w& T2 o然后在ScreeView1.cpp 中编写函数实现功能，如下所示：

1. if (toggleButton1.getState())
   
2.     {
   
3.         // Turn on LED
   * i$ I  `4 h& a' ]5 l
4.         image5.setVisible(true);  // LED ON image
   
5.         image4.setVisible(false); // LED OFF image
   
6.         image2.setVisible(false);  // Yellow pear
   3 |; ~& K3 U6 R+ N4 f, A
7.         image3.setVisible(true); // White pear
   
8.     }
   
9.     else
   ; D* k4 q3 S5 V
10.     {
    
11.         // Turn off LED
    
12.         image5.setVisible(false); // LED ON image
    % c8 o9 ]; G8 b% m- l9 [
13.         image4.setVisible(true);  // LED OFF image
      |+ c1 g/ j( o
14.         image2.setVisible(true); // Yellow pear
    
15.         image3.setVisible(false);  // White pear
    1 H  p/ G' I# ^7 X
16.     }
    0 c2 N- Y6 }+ o8 J( {4 {* T8 C! Q
17.     image2.invalidate();
    $ {8 e+ I! O. I. Q4 ]$ y1 U, M
18.     image3.invalidate();
    - u4 Q, [! {. u% U& m# r
19.     image4.invalidate();
    ) t% }2 R# L+ ^- z0 R; ^
20.     image5.invalidate();

复制代码

" J+ n. [' V/ d
没什么错误就保存文件。回到UI的界面中，点击generate code按钮，生成code，然后点击仿真按钮，看一下效果。最后点击右下角的programe and run target按钮，将
程序下载到板卡中。如果有错误的话，UI下面的message 界面会提示。 实际控制效果如图5所示：

图5
* C2 I( h$ v5 }& _% n$ y  a4 d: V# _