1 VisualTFT

按钮控件可以设置弹起或按下的状态。控件的背景可以设置为单色，也可以设置图片，这样按下时就可以看到真实按钮按下的效果。按钮控件还可以实现多种功能，如长按、瞬变、置位等

本章节介绍按钮控件基本属性、常见的应用，结合工程中的画面介绍每一个应用的配置，常见的应用如下所示

按钮开关功能：实现瞬变、开关、置位、复位、长按、延时的功能

按钮逻辑功能：实现两个按钮的互斥、使用指令实现总开关的功能

单按钮多状态：可以用一个按钮和一个图标实现多状态按钮的功能

按钮的禁止与使能：使用按钮的延时功能对其它按钮进行禁止和使能

自定义指令：按下按钮时对外发送自定义指令

适用范围：全系列

例程下载链接：《串口屏按钮控件应用》(点击跳转)

本章节重点介绍按钮控件的属性，属性窗口下所示

用户按下按钮时，显示虚框，如下所示

按钮状态改变时，上传通知。注意如果关闭按钮通知的话，minic脚本、lua脚本对应按钮不会触发回调，同时也没有指令通过串口发出

按钮弹起状态时显示的图片。勾选“裁剪”时，将显示图片中按钮坐标对应的区域的图像

按钮按下时显示的图片。勾选“裁剪”时，将显示图片中按钮坐标对应的区域的图像

在按钮控件上显示文字。选择“是”，可按状态显示文字，如下所示

切换到指定画面，相关参数配置如下所示：

可选功能有：

目标画面：点击按钮控件时，切换到指定画面

子画面：子画面一般为透明背景的小窗口，可作为对话框使用。目标页面的【背景透明】选择“透明”，在页面中设置一个图片控件，图片控件的【路径】选择对应的UI，显示效果如下所示

动画效果：切换页面时的过渡效果，可以选择整个画面从左到右、从上到下、渐隐渐消、逐渐打开等效果。仅物联型支持此功能

动画范围：在指定范围内显示动画效果，在指定范围外不显示，可以设置整个画面或指定范围

密码保护：开启密码保护后，需要输入正确的密码才能切换画面

按钮开关的功能，相关参数配置如下所示：

可选功能有：

初始状态：开关的初始状态。

操作风格：

对内指令：在按下或者弹起后，对内部执行的指令

对外指令：在按下或者弹起后，对外部发送的指令

把相应按钮转换成值输入。需要配合自定义键盘输入的文本控件使用，可以将按钮控件设计为自定义键盘，用户需要把按钮控件当做自定义按键

发送自定义的16进制格式的数据。即为用户设置按下按钮后，设备上传自定义的数据报文。不能发送帧尾为FF FC FF FF的报文，和大彩协议冲突

需要协同菜单控件和文本控件使用，实现点击按钮即可弹出菜单，用户在选择弹出的菜单后，配合文本控件，把所选数据显示出来

【按钮开关功能】画面，介绍按钮的瞬变、开关、置位、复位、长按、延时功能

在【按钮开关功能】画面的“背景图片”导入相应的美工图片。在该画面中设置按钮控件

以按钮的瞬变功能为例，设置【触摸虚框】为“否”、【按下时的图片】选择处理好的图片、勾选【裁剪】、【触摸用途】为“开关描述”、【操作风格】“瞬变”

同理，其它按钮的【触摸虚框】、【按下时的图片】、【裁剪】、【触摸用途】设置相同，但是操作风格设置不同，此文不在赘述

设置按钮的开关功能，【操作风格】为“开关”，如下所示

设置按钮的置位功能，【操作风格】为“置位”，如下所示

设置按钮的复位功能，【初始状态】为“按下”、【操作风格】为“复位”，如下所示

设置按钮的长按功能，【操作风格】为“长按”、【长按延时】为“0.1s”，如下所示

设置按钮的延时功能，【操作风格】为“延时”、【长按延时】为“5s”，如下所示

运行虚拟屏，VisualTFT软件和虚拟屏用“虚拟串口”建立联机。打开【指令助手】，选择左侧导航栏【按钮控件】，设置“设置按钮控件弹起和按下状态”的指令参数。设置画面（画面ID：0）中的按钮控件（控件ID：1）按下。则在虚拟屏中，该按钮控件从弹起变为按下，运行效果如下所示

参考开发包keil程序中的him.dever.h文件函数声明以及him.dever.c文件中的定义。例如用户需设置按钮状态，则直接调用设置按钮函数SetButtonValue ( )即可，代码如下所示。

【按钮逻辑功能应用】画面，介绍按钮的互斥、和总开关控制功能。

在【按钮开关功能】画面的“背景图片”导入相应的美工图片。在该画面中设置按钮控件，如下所示

按钮“Start”：设置【触摸虚框】为“否”、【按下时的图片】选择设置好的图片、勾选【裁剪】、【触摸用途】为“开关描述”、【操作风格】“开关”，配置如下所示

同理，按钮“Stop”的【触摸虚框】、【按下时的图片】、【裁剪】、【触摸用途】、【操作风格】设置相同，但是【初始状态】设置为“弹起”

互斥按钮的设置方法如下，同时选择按钮“Start”和“Stop”，然后依次点击【菜单】-【编辑】-【开关按钮互斥】，开启按钮互斥，自动会往按钮对内置指令添加按钮批量处理指令，操作如下所示

运行虚拟屏，点击按钮“Start”和“Stop”，同一时间只有一个按钮可以处于按下状态。如下所示

在【按钮开关功能】画面的“背景图片”导入相应的美工图片。在该画面中设置按钮控件，如下所示：

设置按钮1、按钮2、按钮3，设置【触摸虚框】为“否”、【按下时的图片】选择设置好的图片、勾选【裁剪】、【触摸用途】为“开关描述”、【操作风格】“开关”，如下所示

设置按钮Open all，设置【触摸虚框】为“否”、【按下时的图片】选择设置好的图片、勾选【裁剪】、【触摸用途】为“开关描述”、【操作风格】“开关”，如下所示

选择按钮控件（控件ID：6）

同理，按钮控件ID2、ID3的按钮按下效果重复4-5步骤即可。当按钮控件ID6弹起时候，设置按钮控件ID1、2、3的按钮弹起状态的处理方式类似

运行虚拟屏，VisualTFT软件和虚拟屏用“虚拟串口”建立联机。打开【指令助手】，选择左侧导航栏【批量更新控件数值】，设置“更新多个控件数值”的指令参数。设置【画面ID】选择“1”，【按钮类型】为“按钮控件”，【按钮ID】分别填写3、4、5，【值】都写1。则在虚拟屏中，该按钮控件从弹起变为按下，运行效果下所示

PS：同时支持发送指令一个按钮一个按钮设置控制，本处不演示运行效果

参考开发包keil程序中的him.dever.h文件函数声明以及him.dever.c文件中的定义。例如用户需批量设置同一个页面的按钮状态，则直接调用批量设置按钮函数BatchSetButtonValue ( )即可，代码下所示：

【单按钮多状态】画面，介绍使用一个按钮和一个图标实现多状态按钮的功能

在【单按钮多状态】画面的“背景图片”导入相应的美工图片。在该画面中设置按钮控件，如下所示：

设置图标控件的属性，【图标文件】选择制作好的ICON文件，配置如下所示

选择按钮控件（控件ID：2），属性栏中设置【触摸虚框】为“否”，对按钮按下填写对应的指令，步骤如下所示

运行虚拟屏，点击按钮，图标会轮询显示。VisualTFT软件和虚拟屏用“虚拟串口”建立联机。打开【指令助手】，选择左侧导航栏【图标控件】，设置“图标控件显示”的指令参数。设置画面（画面ID：2）中的按钮控件（控件ID：1）的图标控件显示第1帧。则在虚拟屏中，按钮显示“暂停Pause”，运行效果如下所示

参考开发包keil程序中的him.dever.h文件函数声明以及him.dever.c文件中的定义。例如用户需设置图标显示指定帧，则直接调用设置图标的显示帧的函数AnimationPlayFrame( )即可，代码如下所示

【按钮的禁止与使能】画面，介绍使用指令控制按钮的禁止与使能

在【按钮的禁止与使能】画面的“背景图片”导入相应的美工图片。在该画面中设置三个按钮控件（控件ID：1、2、3），如下所示

设置按钮1、2、3的属性，设置【触摸虚框】为“否”。设置按钮3的属性，设置【触摸虚框】为“否”、【按下时的图片】选择设置好的图片、勾选【裁剪】、【初始状态】为“按下”、【操作风格】为“延时”、【长按延时】为“5s”，配置如下所示

设置按钮的使能/失能：选择按钮控件（控件ID：3）

运行虚拟屏，VisualTFT软件和虚拟屏用“虚拟串口”建立联机。打开【指令助手】，选择左侧导航栏【禁/使能控件】，设置“禁止或使能控件功能”的指令参数。设置画面（画面ID：3）中的按钮控件（控件ID：1）的按钮控件禁止触摸。则在虚拟屏中，触摸按钮1无效。

参考开发包keil程序中的him.dever.h文件函数声明以及him.dever.c文件中的定义。例如用户需禁止按钮的触摸，则直接调用按钮禁止/使能函数SetControlEnable ( )即可，代码如下所示

【自定义指令】画面，介绍按钮对外发送自定义指令的功能

在【按钮开关功能】画面的“背景图片”导入相应的美工图片。在该画面中设置一个按钮控件（控件ID：1），如下所示

设置按钮1的属性，设置【触摸虚框】为“否”、【事件通知】为“否”、【按下时的图片】选择设置好的图片、勾选【裁剪】、【触控用途】为“自定义指令”、【弹起时】为自定义的16进制指令“55 00”、【按下时】为自定义的16进制指令“55 01”，配置如下所示

运行虚拟屏，右键点击屏幕弹出【参数设置】窗口，点击自定义按发送指令，运行效果如下所示