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

图1

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

图2

增加togglebutton 按键控件，在属性中选择，on/off的效果图，如图3所示：

图3

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

图4

就是在项目中增加了按键函数togglebtnled。
界面部分基本就完成了，然后使用VScode 打开项目中的TouchGFX文件夹，所有的UI程序修改都在这个文件夹中。


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

1. virtual void ToggleBtnLed();

复制代码

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

1. if (toggleButton1.getState())
   
2.     {
   
3.         // Turn on LED
   
4.         image5.setVisible(true);  // LED ON image
   
5.         image4.setVisible(false); // LED OFF image
   
6.         image2.setVisible(false);  // Yellow pear
   
7.         image3.setVisible(true); // White pear
   
8.     }
   
9.     else
   
10.     {
    
11.         // Turn off LED
    
12.         image5.setVisible(false); // LED ON image
    
13.         image4.setVisible(true);  // LED OFF image
    
14.         image2.setVisible(true); // Yellow pear
    
15.         image3.setVisible(false);  // White pear
    
16.     }
    
17.     image2.invalidate();
    
18.     image3.invalidate();
    
19.     image4.invalidate();
    
20.     image5.invalidate();

复制代码

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

图5