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

什么是按钮控件？

按钮控件可以設定弹起或按下的ステータス。

控件その背景は可以設定为单色，也可以設定图片，这样按下时就可以看到真实按钮按下的效果。

按钮控件还可以実装多种功能，如长按、瞬变、置位等。

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

按钮开关功能：

実装瞬变、switch、置位、复位、长按、延时的功能

按钮逻辑功能：

実装2つ按钮的互斥、使用命令の実装总开关的功能

单按钮多ステータス：

可以用一个按钮和一个图标実装多ステータス按钮的功能

按钮的禁止与使能：

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

自定义指令：

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

1.1属性介绍

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

触摸虚框

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

事件通知

按钮ステータス改变时，上传通知。

（注意もし关闭按钮通知的话，minicScript、lua脚本对应按钮不会触发回调，同时也ない指令経由シリアルポート发出）

弹起时的图片

按钮弹起ステータス時に表示的图片。勾选“裁剪”时，将表示图片中按钮坐标对应的エリア的图像

按下时的图片

按钮按下時に表示的图片。勾选“裁剪”时，将表示图片中按钮坐标对应的エリア的图像

文字ステータス

在按钮控件上表示文字。Choice“是”，可按ステータス表示文字，如下所示

1. 字体：文字大小和样式
2. 弹起时的颜色、按下时的颜色：文字的颜色
3. 弹起时的文字、按下时的文字：两种不同ステータス時に表示的文字

触控用途

• 切换画面
• 开关説明
• 自定义按键
• 自定义指令
• 弹出菜单

如图所示：

切换画面

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

可选功能有：

1. 目标画面：点击按钮控件时，切换到指定画面
2. 子画面：子画面一般为透明背景的小窗口，可作为对话框使用。目标ページ的【背景透明】Choice“透明”，在ページ中に設置。一个图片控件，图片控件的【路径】選択对应的UI，表示效果如下所示
3. 动画效果：切换ページ时的过渡效果，可以選択整个画面从左到右、从上到下、渐隐渐消、逐渐打开等效果。仅物联型サポート此功能
4. 动画範囲：在指定範囲内表示动画效果，在指定範囲外不表示，可以設定整个画面或指定範囲
5. パスワード保护：开启パスワード保护后，需要入力正确的パスワード才能切换画面

开关説明

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

可选功能有：

1. 初始ステータス：开关的初始ステータス。
2. 操作风格：
   • 瞬变：松开后，开关自动弹起，类似轻触开关功能。
   • switch：按下后，开关由弹起变成按下或由按下变成弹起，类似带锁开关功能。
   • 置位：开关只能由弹起变成按下。
   • 复位：开关只能由按下变成弹起。
   • 长按：与瞬变按钮相似，但按压时每隔100毫秒通知一次。
   • 延时：按压指定时间長さ后发出通知
3. 对内指令：在按下或者弹起后，对内部执行的指令
4. 对外指令：在按下或者弹起后，对外部送信的指令

自定义按键

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

自定义指令

送信自定义的hexadecimal格式的データ。即为用户設定按下按钮后，デバイス上传自定义的データ报文。不能送信フレーム尾为FF FC FF FF的报文，和大彩协议冲突

弹出菜单

需要协同菜单控件和文本控件使用，実装点击按钮即可弹出菜单，用户在選択弹出的菜单后，配合文本控件，把所选データ表示出来

1.2 按钮开关功能应用

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

画面設定

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

属性設定

1. 瞬变以按钮的瞬变功能为例，設定【触摸虚框】为“否”、【按下时的图片】選択処理好的图片、勾选【裁剪】、【触摸用途】为“开关説明”、【操作风格】“瞬变”同理，其它按钮的【触摸虚框】、【按下时的图片】、【裁剪】、【触摸用途】設定相同，但是操作风格設定不同，此文不在赘述
2. 开关設定按钮的开关功能，【操作风格】为“switch”，如下所示
3. 置位設定按钮的置位功能，【操作风格】为“置位”，如下所示
4. 复位設定按钮的复位功能，【初始ステータス】为“按下”、【操作风格】为“复位”，如下所示
5. 长按設定按钮的长按功能，【操作风格】为“长按”、【长按延时】为“0.1s”，如下所示
6. 延时設定按钮的延时功能，【操作风格】为“延时”、【长按延时】为“5s”，如下所示

运行预览

运行虚拟屏，VisualTFT软件和虚拟屏用“バーチャルシリアルポート”建立联机。open【指令アシスタント】，選択左侧导航栏【按钮控件】，設定“設定按钮控件弹起和按下ステータス”的命令パラメータ。設定画面（画面ID：0）中的按钮控件（controlID：1）按下。则在虚拟屏中，该按钮控件从弹起变为按下，运行效果如下所示

MCU控制按钮ステータス

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

/*******************************************************************
** Function name:     void SetButtonValue(uint16 screen_id,
**                                        uint16 control_id,
**                                        uchar value);
** Descriptions    :  設定按钮ステータス
** input parameters:  
**                   screen_id : 画面ID
**                   control_id: controlID
**                   value     : 按钮ステータス，0为弹起，1为按下
** output parameters : 无
** Returned value    : 无
*******************************************************************/
{
  ……
  SetButtonValue(1, 1, 1); //画面ID1，controlID1,按钮按下
  ……
}

1.3 按钮逻辑功能应用

【按钮逻辑功能应用】画面，介绍按钮的互斥、和总スイッチ制御功能。

按钮互斥

画面設定

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

属性設定

button“Start”：設定【触摸虚框】为“否”、【按下时的图片】選択設定好的图片、勾选【裁剪】、【触摸用途】为“开关説明”、【操作风格】“switch”，設定如下所示

同理，button“Stop”的【触摸虚框】、【按下时的图片】、【裁剪】、【触摸用途】、【操作风格】設定相同，但是【初始ステータス】設定为“弹起”

互斥設定

互斥按钮的設定方法如下，同时選択按钮“Start”和“Stop”，然后依次点击【菜单】-【Edit】-【开关按钮互斥】，开启按钮互斥，自动会往按钮对内置指令追加按钮批量処理指令，操作如下所示

运行预览

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

按钮スイッチ制御

画面設定

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

属性設定

設定按钮1、button2、button3，設定【触摸虚框】为“否”、【按下时的图片】選択設定好的图片、勾选【裁剪】、【触摸用途】为“开关説明”、【操作风格】“switch”，如下所示

設定按钮Open all，設定【触摸虚框】为“否”、【按下时的图片】選択設定好的图片、勾选【裁剪】、【触摸用途】为“开关説明”、【操作风格】“switch”，如下所示

選択按钮控件（controlID：6）

1. 属性栏中的【对内指令】→“弹起时”
2. 弹出指令填写框，Choice“指令アシスタント”
3. 在指令アシスタント栏，選択按钮控件
4. 如設定画面ID1、按钮控件1的ステータス按下，点击按下生成指令
5. コピー指令到对内指令窗口

同理，按钮控件ID2、ID3的按钮按下效果重复4-5步骤即可。当按钮控件ID6弹起时候，設定按钮控件ID1、2、3的按钮弹起ステータス的処理方式类似

运行预览

运行虚拟屏，VisualTFT软件和虚拟屏用“バーチャルシリアルポート”建立联机。open【指令アシスタント】，選択左侧导航栏【批量更新控件数值】，設定“更新多个控件数值”的命令パラメータ。設定【画面ID】Choice“1”，【按钮タイプ】为“按钮控件”，【buttonID】分别填写3、4、5，【值】都写1。则在虚拟屏中，该按钮控件从弹起变为按下，运行效果下所示

PS：同时サポート送信指令一个按钮一个按钮設定控制，本处不演示运行效果

MCUバッチ制御按钮ステータス

参照开发包keil程序中的him.dever.h文件函数声明以及him.dever.c文件中的定义。例如用户需批量設定同一个ページ的按钮ステータス，则直接调用批量設定按钮函数BatchSetButtonValue ( )即可，代码下所示：

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

** Function name:    void BatchSetButtonValue (uint16 control_id,
**                                             uint8 state);
** Descriptions    : 批量更新当前ページ的按钮ステータス
** input parameters: 
**                  control_id: controlID
**                  state     : 按钮ステータス，0为弹起，1为按下
** output parameters: 无
** Returned value   : 无
*******************************************************************/
{
    BEGIN_CMD(); //指令开头
    BatchSetButtonValue(1, 1); //controlID1,按钮按下
    BatchSetButtonValue(2, 1); //controlID2,按钮按下
    ……
    END_CMD(); //指令结尾
}

1.4 单按钮多ステータス应用

【单按钮多ステータス】画面，介绍使用一个按钮和一个图标実装多ステータス按钮的功能

画面設定

在【单按钮多ステータス】画面的“背景图片”导入相应的美工图片。在该画面中に設置。按钮控件，如下所示：

属性設定

設定图标控件的属性，【图标文件】選択制作好的ICON文件，設定如下所示

選択按钮控件（controlID：2），属性栏中に設置。【触摸虚框】为“否”，对按钮按下填写对应的指令，步骤如下所示

1. 【对内指令】→“按下时”，弹出指令填写框
2. Choice“指令アシスタント”
3. 在指令アシスタント界面，左侧导航栏選択【图标控件】
4. 設定“图标控件表示”エリア的命令パラメータ，填写对应的参数。如設定画面（画面ID：2）中的图标控件（controlID：1），点击下一フレーム
5. コピー指令到【对内指令】→“按下时”的窗口，操作如下所示：

运行预览

运行虚拟屏，点击按钮，图标会ポーリング表示。VisualTFT软件和虚拟屏用“バーチャルシリアルポート”建立联机。open【指令アシスタント】，選択左侧导航栏【图标控件】，設定“图标控件表示”的命令パラメータ。設定画面（画面ID：2）中的按钮控件（controlID：1）的图标控件表示第1フレーム。则在虚拟屏中，按钮表示“暂停Pause”，运行效果如下所示

MCU設定图标的表示

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

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

** Function name:     void AnimationPlayFrame(uint16 screen_id,
**                                            uint16 control_id,
**                                            uint8 frame_id);
** Descriptions    :  設定图标表示指定的フレーム
** input parameters:  screen_id:  画面ID
**                    control_id:  controlID
**                    frame_id:  指定フレーム
** output parameters: 无
** Returned value   : 无
*******************************************************************/

{
  ……
  AnimationPlayFrame(2, 1, 1); //画面ID2，controlID1的图标表示第1フレーム
  ……
}

1.5 按钮的禁止与使能应用

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

画面設定

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

属性設定

設定按钮1、2、3的属性，設定【触摸虚框】为“否”。設定按钮3的属性，設定【触摸虚框】为“否”、【按下时的图片】選択設定好的图片、勾选【裁剪】、【初始ステータス】为“按下”、【操作风格】为“延时”、【长按延时】为“5s”，設定如下所示

設定按钮的使能/失能：選択按钮控件（controlID：3）

1. 属性栏中的【对内指令】→“弹起时”
2. 弹出指令填写框
3. Choice“指令アシスタント”，在指令アシスタント界面
4. 左侧导航栏選択【禁/使能屏幕更新】，填写对应的参数。如例程中，控制画面（画面ID：3）中的图标控件（controlID：1），click“使能控件”
5. 将生成的指令コピー到指令窗口，如下所示，同理其他按钮的使能/失能操作処理参照即可

运行预览

运行虚拟屏，VisualTFT软件和虚拟屏用“バーチャルシリアルポート”建立联机。open【指令アシスタント】，選択左侧导航栏【禁/使能控件】，設定“禁止或使能控件功能”的命令パラメータ。設定画面（画面ID：3）中的按钮控件（controlID：1）的按钮控件禁止触摸。则在虚拟屏中，触摸按钮1无效。

MCU控制按钮禁止/使能

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

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

** Function name:     void SetControlEnable (uint16 screen_id,
**                                           uint16 control_id,
**                                           uint8 enable);
** Descriptions    :   設定触摸控件使能
** input parameters:   screen_id :  画面ID
**                     control_id:  controlID
**                     enable    :  控件是否使能
** output parameters:  无
** Returned value   :  无
*******************************************************************/
{
  ……
  SetControlEnable (2, 1, 1); //画面ID3，controlID1的按钮禁止触摸
  ……
}

1.6 自定义指令应用

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

画面設定

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

属性設定

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

运行预览

运行虚拟屏，右クリック点击屏幕弹出【参数設定】窗口，点击自定义按送信指令，运行效果如下所示

例程ドキュメント：