버튼 컨트롤은 어떻게 사용합니까?

什么是버튼控件？

버튼控件可以设置弹起或按下的状态。

控件的背景可以设置为单色，也可以设置图片，这样按下时就可以看到真实버튼按下的效果。

버튼控件还可以实现多种功能，如长按、瞬变、置位等。

本章节介绍버튼控件基本属性、常见的적용，结合엔지니어링中的화면介绍每一个적용的설정，常见的적용如下所示：

버튼开关功能：

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

버튼逻辑功能：

实现两个버튼的互斥、使用指令实现总开关的功能

单버튼多状态：

可以用一个버튼和一个图标实现多状态버튼的功能

버튼的禁止与使能：

使用버튼的延时功能对其它버튼进行禁止和使能

自定义指令：

按下버튼时对外보내기自定义指令

1.1属性介绍

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

触摸虚框

用户按下버튼时，显示虚框，如下所示：

事件通知

버튼状态改变时，上传通知。

（注意如果닫기버튼通知的话，minic스크립트、lua스크립트对应버튼不会触发回调，同时也没有指令通过시리얼 포트发出）

弹起时的图片

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

按下时的图片

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

文字状态

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

1. 字体：文字大小和样式
2. 弹起时的颜色、按下时的颜色：文字的颜色
3. 弹起时的文字、按下时的文字：两种不同状态时显示的文字

触控用途

• 전환화면
• 开关설명
• 自定义按键
• 自定义指令
• 弹出菜单

如图所示：

전환화면

전환到指定화면，相关매개변수설정如下所示：

可选功能有：

1. 目标화면：클릭버튼控件时，전환到指定화면
2. 子화면：子화면一般为透明背景的小窗口，可作为对话框使用。目标页面的【背景透明】选择“透明”，在页面中设置一个图片控件，图片控件的【路径】选择对应的UI，显示效果如下所示
3. 动画效果：전환页面时的过渡效果，可以选择整个화면从左到右、从上到下、渐隐渐消、逐渐열기等效果。仅物联型支持此功能
4. 动画范围：在指定范围内显示动画效果，在指定范围外不显示，可以设置整个화면或指定范围
5. 密码保护：开启密码保护后，需要입력正确的密码才能전환화면

开关설명

버튼开关的功能，相关매개변수설정如下所示：

可选功能有：

1. 初始状态：开关的初始状态。
2. 操作风格：
   • 瞬变：松开后，开关自动弹起，类似轻触开关功能。
   • 开关：按下后，开关由弹起变成按下或由按下变成弹起，类似带锁开关功能。
   • 置位：开关只能由弹起变成按下。
   • 复位：开关只能由按下变成弹起。
   • 长按：与瞬变버튼相似，但按压时每隔100毫秒通知一次。
   • 延时：按压指定时间길이后发出通知
3. 对内指令：在按下或者弹起后，对内部执行的指令
4. 对外指令：在按下或者弹起后，对外部보내기的指令

自定义按键

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

自定义指令

보내기自定义的16진법형식的데이터。即为用户设置按下버튼后，设备上传自定义的데이터프레임。不能보내기帧尾为FF FC FF FF的프레임，和大彩프로토콜冲突

弹出菜单

需要协同菜单控件和文本控件使用，实现클릭버튼即可弹出菜单，用户在选择弹出的菜单后，配合文本控件，把所选데이터显示出来

1.2 버튼开关功能적용

【버튼开关功能】화면，介绍버튼的瞬变、开关、置位、复位、长按、延时功能

화면설정

在【버튼开关功能】화면的“背景图片”导入相应的美工图片。在该화면中设置버튼控件

属性설정

1. 瞬变以버튼的瞬变功能为例，设置【触摸虚框】为“否”、【按下时的图片】选择处理好的图片、勾选【裁剪】、【触摸用途】为“开关설명”、【操作风格】“瞬变”同理，其它버튼的【触摸虚框】、【按下时的图片】、【裁剪】、【触摸用途】设置相同，但是操作风格设置不同，此文不在赘述
2. 开关设置버튼的开关功能，【操作风格】为“开关”，如下所示
3. 置位设置버튼的置位功能，【操作风格】为“置位”，如下所示
4. 复位设置버튼的复位功能，【初始状态】为“按下”、【操作风格】为“复位”，如下所示
5. 长按设置버튼的长按功能，【操作风格】为“长按”、【长按延时】为“0.1s”，如下所示
6. 延时设置버튼的延时功能，【操作风格】为“延时”、【长按延时】为“5s”，如下所示

运行预览

运行虚拟屏，VisualTFT软件和虚拟屏用“虚拟시리얼 포트”建立联机。열기【指令助手】，选择左侧导航栏【버튼控件】，设置“设置버튼控件弹起和按下状态”的指令매개변수。设置화면（화면ID：0）中的버튼控件（控件ID：1）按下。则在虚拟屏中，该버튼控件从弹起变为按下，运行效果如下所示

MCU控制버튼状态

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

/*******************************************************************
** 기능 name:     void SetButtonValue(uint16 screen_id,
**                                        uint16 control_id,
**                                        uchar value);
** Descriptions    :  设置버튼状态
** input 파라미터s:  
**                   screen_id : 화면ID
**                   control_id: 控件ID
**                   value     : 버튼状态，0为弹起，1为按下
** output 파라미터s : 无
** Returned value    : 无
*******************************************************************/
{
  ……
  SetButtonValue(1, 1, 1); //화면ID1，控件ID1,버튼按下
  ……
}

1.3 버튼逻辑功能적용

【버튼逻辑功能적용】화면，介绍버튼的互斥、和总开关控制功能。

버튼互斥

화면설정

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

属性설정

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

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

互斥설정

互斥버튼的设置方法如下，同时选择버튼“Start”和“Stop”，然后依次클릭【菜单】-【편집】-【开关버튼互斥】，开启버튼互斥，自动会往버튼对内置指令추가버튼批量处理指令，操作如下所示

运行预览

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

버튼开关控制

화면설정

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

属性설정

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

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

选择버튼控件（控件ID：6）

1. 属性栏中的【对内指令】→“弹起时”
2. 弹出指令填写框，选择“指令助手”
3. 在指令助手栏，选择버튼控件
4. 如设置화면ID1、버튼控件1的状态按下，클릭按下生成指令
5. 복사指令到对内指令窗口

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

运行预览

运行虚拟屏，VisualTFT软件和虚拟屏用“虚拟시리얼 포트”建立联机。열기【指令助手】，选择左侧导航栏【批量更新控件数值】，设置“更新多个控件数值”的指令매개변수。设置【화면ID】选择“1”，【버튼유형】为“버튼控件”，【버튼ID】分别填写3、4、5，【值】都写1。则在虚拟屏中，该버튼控件从弹起变为按下，运行效果下所示

PS：同时支持보내기指令一个버튼一个버튼设置控制，本处不演示运行效果

MCU批量控制버튼状态

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

/*******************************************************************

** 기능 name:    void BatchSetButtonValue (uint16 control_id,
**                                             uint8 state);
** Descriptions    : 批量更新当前页面的버튼状态
** input 파라미터s: 
**                  control_id: 控件ID
**                  state     : 버튼状态，0为弹起，1为按下
** output 파라미터s: 无
** Returned value   : 无
*******************************************************************/
{
    BEGIN_CMD(); //指令开头
    BatchSetButtonValue(1, 1); //控件ID1,버튼按下
    BatchSetButtonValue(2, 1); //控件ID2,버튼按下
    ……
    END_CMD(); //指令结尾
}

1.4 单버튼多状态적용

【单버튼多状态】화면，介绍使用一个버튼和一个图标实现多状态버튼的功能

화면설정

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

属性설정

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

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

1. 【对内指令】→“按下时”，弹出指令填写框
2. 选择“指令助手”
3. 在指令助手界面，左侧导航栏选择【图标控件】
4. 设置“图标控件显示”区域的指令매개변수，填写对应的매개변수。如设置화면（화면ID：2）中的图标控件（控件ID：1），클릭下一帧
5. 복사指令到【对内指令】→“按下时”的窗口，操作如下所示：

运行预览

运行虚拟屏，클릭버튼，图标会轮询显示。VisualTFT软件和虚拟屏用“虚拟시리얼 포트”建立联机。열기【指令助手】，选择左侧导航栏【图标控件】，设置“图标控件显示”的指令매개변수。设置화면（화면ID：2）中的버튼控件（控件ID：1）的图标控件显示第1帧。则在虚拟屏中，버튼显示“暂停Pause”，运行效果如下所示

MCU设置图标的显示

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

/*******************************************************************

** 기능 name:     void AnimationPlayFrame(uint16 screen_id,
**                                            uint16 control_id,
**                                            uint8 frame_id);
** Descriptions    :  设置图标显示指定的帧
** input 파라미터s:  screen_id:  화면ID
**                    control_id:  控件ID
**                    frame_id:  指定帧
** output 파라미터s: 无
** Returned value   : 无
*******************************************************************/

{
  ……
  AnimationPlayFrame(2, 1, 1); //화면ID2，控件ID1的图标显示第1帧
  ……
}

1.5 버튼的禁止与使能적용

【버튼的禁止与使能】화면，介绍使用指令控制버튼的禁止与使能

화면설정

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

属性설정

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

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

1. 属性栏中的【对内指令】→“弹起时”
2. 弹出指令填写框
3. 选择“指令助手”，在指令助手界面
4. 左侧导航栏选择【禁/使能屏幕更新】，填写对应的매개변수。如例程中，控制화면（화면ID：3）中的图标控件（控件ID：1），클릭“使能控件”
5. 将生成的指令복사到指令窗口，如下所示，同理其他버튼的使能/失能操作处理参考即可

运行预览

运行虚拟屏，VisualTFT软件和虚拟屏用“虚拟시리얼 포트”建立联机。열기【指令助手】，选择左侧导航栏【禁/使能控件】，设置“禁止或使能控件功能”的指令매개변수。设置화면（화면ID：3）中的버튼控件（控件ID：1）的버튼控件禁止触摸。则在虚拟屏中，触摸버튼1无效。

MCU控制버튼禁止/使能

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

/*******************************************************************

** 기능 name:     void SetControlEnable (uint16 screen_id,
**                                           uint16 control_id,
**                                           uint8 enable);
** Descriptions    :   设置触摸控件使能
** input 파라미터s:   screen_id :  화면ID
**                     control_id:  控件ID
**                     enable    :  控件是否使能
** output 파라미터s:  无
** Returned value   :  无
*******************************************************************/
{
  ……
  SetControlEnable (2, 1, 1); //화면ID3，控件ID1的버튼禁止触摸
  ……
}

1.6 自定义指令적용

【自定义指令】화면，介绍버튼对外보내기自定义指令的功能

화면설정

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

属性설정

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

运行预览

运行虚拟屏，右键클릭屏幕弹出【매개변수设置】窗口，클릭自定义按보내기指令，运行效果如下所示

例程문서：