4 G: i/ g' |! \       收到板卡有一段时间了，现在才来补，那就多写一些吧。
( H+ X  b& Z4 H) T$ e, k      ST板卡的UI设计还是得使用本家的软件TouchGFX designer。当前使用的是4.26版本，使用较新的版本，这样能够更好的设计想要的UI。
9 i( l; i2 p5 O  e' c2 i    这次是申请设计一款车辆仪表的UI，并完成与硬件的交互。那就先从灯光开始。
    初始界面如图１所示：
8 F' S* Y! E+ l- n8 d6 t
图1

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

7 w7 W* |# |$ ^! Y图2
5 Q" k: J- m+ x' |
增加togglebutton 按键控件，在属性中选择，on/off的效果图，如图3所示：
; G( Q# b. x. D+ c
图3

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

6 y# B: J8 F: H( o图4
4 r! t0 w( `5 l0 F" W. z* V" c
& Z- T' j+ K+ U" D0 k# R; Z$ U就是在项目中增加了按键函数togglebtnled。
界面部分基本就完成了，然后使用VScode 打开项目中的TouchGFX文件夹，所有的UI程序修改都在这个文件夹中。
  }0 [  c! M# s  E6 o8 U

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

1. virtual void ToggleBtnLed();

复制代码

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

1. if (toggleButton1.getState())
   1 v. G* y; B) z( L, j) k
2.     {
   ' Z* y) u2 j# C. l4 H
3.         // Turn on LED
   3 d/ `8 Q: C6 C
4.         image5.setVisible(true);  // LED ON image
   
5.         image4.setVisible(false); // LED OFF image
   
6.         image2.setVisible(false);  // Yellow pear
   ( ^  `) h8 g, b  O* a8 P. P
7.         image3.setVisible(true); // White pear
   
8.     }
   2 T+ h. n# P! G, X- ^
9.     else
   ( e+ G& w  P1 G) ^* ]4 g
10.     {
    
11.         // Turn off LED
    7 o3 l; C3 k; J% z8 ^6 ]2 a
12.         image5.setVisible(false); // LED ON image
    
13.         image4.setVisible(true);  // LED OFF image
    # w: K; N! o4 }; ?
14.         image2.setVisible(true); // Yellow pear
    
15.         image3.setVisible(false);  // White pear
    
16.     }
    % r+ H6 E6 \- s2 C' ]
17.     image2.invalidate();
    
18.     image3.invalidate();
    * |! j$ o! V4 t3 \6 {& V. V" x
19.     image4.invalidate();
    
20.     image5.invalidate();

复制代码

" _" D) h$ s3 r
* [& s( B' f  `没什么错误就保存文件。回到UI的界面中，点击generate code按钮，生成code，然后点击仿真按钮，看一下效果。最后点击右下角的programe and run target按钮，将
% l4 c# w, g* U程序下载到板卡中。如果有错误的话，UI下面的message 界面会提示。 实际控制效果如图5所示：
2 L: [% l4 C/ ^/ [4 M
$ a9 O8 j5 X5 g+ R图5