GUI Designerbutton类控件使用手册

1.如何添加button类控件

Click快捷栏或Tools箱对应图标可进行添加控件，如图 1.1 所示。

图1.1 添加控件

注：快捷栏列出的为常用的控件，Tools箱中button类控件包含了所有button控件。

用户点击需要添加控件的窗口，选中控件， 鼠标变为图标，可进行添加；

Click鼠标左键可继续添加，点击鼠标右键或点击Edit模块中 ，停止添加。

2.如何修改控件位置大小及外观

2.1 如何修改控件位置及大小

选中控件，点击鼠标左键可拖动缩放控件或点击右侧属性窗口 ，对位置和大小进行精确调整，如图2.1 所示。

图2.1 公共属性修改

2.2 如何修改外观属性

选中控件，点击右侧属性窗口中的→ ，如图 2.2 所示。

图2.2 外观属性修改

Click“弹起状态”，下方选项有透明、单色、图片三种选项，如下表所示，鼠标点击可任意进行Switch选择。

透明	控件为透明状态显示
单色	控件为单个颜色显示，点击进入颜色盘窗口，用户可根据实际需求进行选择
图片	控件为图片形式显示，点击弹起状态右侧 ，进行图片替换，如图 2.3 所示。

图2.3 图片替换

注：如使用图片量较大，可使用图片管理Function进行批量图片添加、替换、Category和管理，具体Operation详见图片管 理说明。

2.3 如何为button控件添加文字

选中button控件，点击右侧属性窗口中的→ ，如图 2.4 所示。

图2.4 文字添加

ClickText，可进行添加和设置Text内容，可选静态Text，如图 2.5 所示。

图2.5 静态Text

在静态Text输入框中输入内容，可直接在窗口中显示。

2.3.1 如何修改字体

Click字体右侧的 button，弹出字体修改窗口，可根据需求对字体字号等进行修改，如图 2.6 所示。

图2.6 修改字体

2.3.2 如何修改文字颜色

Click文字颜色右侧的方框，弹出调色盘，可根据需求对文字颜色进行修改，文字颜色默认为黑色，如图 2.7 所示。

图2.7 修改文字颜色

2.3.3 如何修改背景颜色

Click背景色右侧的方框，弹出调色盘，可根据需求对背景色进行修改，背景色默认为透明，如图 2.8 所示。

图2.8 修改背景颜色

2.3.4 如何修改对齐方式

Click对齐方式下的button，用户可根据需求输入的Text的对齐方式进行修改，对齐方式默认为居中，如图 2.9

所示。

图2.9 修改文字对齐方式

3.button控件应用

3.1 控件介绍

button控件类似于生活中的switch，用户可通过单击来执行Operation。button控件可显示Text和图像。 该控件在进行点击时，可触发页面跳转，numerical value的增加和减小等Function。

3.2 如何进行图片替换

选中button控件，点击右侧属性窗口，可进行图像修改。弹起状态为button不Operation时显示的状态；按下状态为按 钮按下时显示的状态，图片替换Operation步骤，如图 3.1 所示。

图3.1 图片替换

仿真时，button不Operation，显示弹起状态图片，如图 3.2 所示。

图3.2 弹起状态

Clickbutton，按下状态显示图片，如图 3.3 所示。

图3.3 按下状态

3.3 应用案例

3.3.1 事件列表

事件列表，如下表说明：

控件初始化	“button”控件初始化时触发事件
控件销毁	“button”控件销毁时触发事件
Click	“button”控件点击生效 (非滑动) 时触发事件
长按	“button”控件长按 (500ms) 时触发事件
触屏按下	“button”控件被按下 (还未Complete点击仅按下) 时触发事件
获得焦点	“button”控件被按下 (已Switch至按下图片) 时触发事件
失去焦点	“button”控件从按下恢复至弹起时触发事件

3.3.2 窗口Switch

窗口Switch即点击button可从当前窗口Switch至目标窗口，具体设置方法如下。

1 、如何添加事件

选中button控件，点击右侧属性窗口中的事件，可进行添加事件，如图 3.4 所示。

图3.4 添加事件

2 、如何设置处理方法

Click处理方法右下方 ，弹出处理方法窗口，选择窗口Switch和设置目标窗口，如图 3.5 所示。

图3.5 窗口Switch

3.3.3 How to usebutton控件send GVS 标准协议

1 、如何添加事件

同窗口Switch添加事件Operation方法一致，不做复述。

2 、如何设置处理方法

标准协议为 GVSUI EditTools私有协议，可进行修改变量，send事件等Operation。

Click处理方法右下方 ，弹出处理方法窗口，选择命令send→选择【标准协议】send事件命令

→设置事件编号，如图 3.6 所示。

图3.6 【标准协议】send事件命令

3 、如何Viewbutton控件send的标准协议指令

当事件编号设置为 1 时，点击仿真运行button ，在仿真界面中点击button，Viewsend的指令，如图 3.7 所示。

图3.7 send【标准协议】指令

3.3.4 How to usebutton控件sendCustomization协议

1 、如何添加事件

同窗口Switch添加事件Operation方法一致，不做复述。

2 、如何设置处理方法

Customization协议是用户可在项目中使用其他的协议，如 modbus 协议。

Click处理方法右下方 ，弹出处理方法窗口，选择命令send→选择【Customization协议】send串口命令→设置命

令，如图 3.8 所示。

图3.8 【Customization协议】send串口命令

注：点击【Customization协议】send串口命令的输入框时会弹出Customization指令函数说明窗口，如图 3.9 所示。

图3.9 Customization指令函数说明窗口

3 、如何Viewbutton控件send的标准协议指令

当sendCustomization协议指令为“AB CD EF 01 $BYTE(#3000) $CRC16MODBUS(1,5) $DELAY(1000) ”时，点击仿真运行

button ，在仿真界面中点击button，Viewsend的指令，如图 3.10 所示。

图3.10 send【Customization协议】指令

3.4 How to usebutton控件进行Text输入

通过button控件进行Text输入的应用，详见《输入框的使用》说明书。

3.5 How to usebutton控件设置参数

通过button控件点击更改阀门Opentime，具体设置Operation如下。

1 、添加一个Customization变量

添加一个Customization变量用于存储阀门开始Opentime的值，如图 3.11 所示，具体添加步骤详看《变量的应用》说 明书。

图3.11 阀门开始time设置变量

2 、如何添加button控件及Text控件

新建一个Text控件用于显示阀门开始time，点击常用模块中的button控件和Text控件即可添加，如图 3.12 所示。

图3.12 添加button控件及Text控件

3 、如何添加变量绑定

选中Text控件，点击右侧属性窗口中的变量绑定，点击添加，被绑定的控件属性，data source绑定和转换模式， 转换方法设置，Operation如图 3.9 所示。

图3.9 添加变量绑定

4 、如何添加事件

添加事件为“点击” ，Operation方法同上，具体详见 3.3.2 窗口Switch案例。

5 、如何设置处理方法

Click处理方法右下方 ，弹出处理方法窗口，选择变量Operation→选择变量设置→设置目标变量→使用常量，

输入框中输入 1 ，即点击button后，Var0 变量的值从初始值 0 变为 1 ，其他处理方法中的变量Operation同上。 如图 3.11 所示。

图3.11 设置参数处理方法

6 、如何获取阀门开始time

用户可通过协议指令获取阀门Opentime，具体Operation步骤详看协议send指令。

3.6 如何通过长按快速更改numerical value

如何添加button控件及Text控件

具体Operation步骤同上一案例。

如何添加变量绑定

具体Operation步骤同上一案例。

如何添加长按事件

选中button控件，点击右侧属性窗口，添加长按事件，如图 3.10 所示。

图3.10 长按事件

如何设置处理方法

Click处理方法右下方 ，弹出处理方法窗口，选择变量Operation→选择变量循环增减→设置目标变量→设置步

进值，如图 3.11 所示。

图3.11 处理方法

仿真演示

仿真时，长按button控件可快速增加Text控件上显示的numerical value，如图 3.12 所示。

图3.12 仿真演示效果

4.单选button (自锁button) 应用

4.1 控件介绍

单选button控件可以理解为一个switchbutton，有未选中和选中状态，通过该控件可实现switchOperation。

4.2 如何进行图片替换

选中单选button控件，点击右侧属性窗口，可进行图像修改。

单选button点击按下时为选中状态；单选button不Operation时或从选中状态再次点击后的弹起状态为未选中状态。 Operation步骤如图 4.1 所示。

图4.1 图片替换

仿真时，单选button不Operation或从选中状态再次点击后显示未选中状态，如图 4.2 所示。

图4.2 未选中状态

单选button点击按下时，选中状态显示，如图 4.3 所示。

图4.3 选中状态

4.3 应用案例

4.3.1 事件列表

事件列表，如下表说明：

控件初始化	“单选button”初始化时触发事件
控件销毁	“单选button”销毁时触发事件
触屏按下	“单选button”被按下 (还未Complete点击仅按下) 时触发事件
选中	“单选控件”状态为选中时候触发事件
未选中	“单选控件”状态为未选中时候触发事件

4.4.1 How to use单选buttonsend GVS 标准协议

1 、如何添加事件

选中单选button控件，点击右侧属性窗口添加事件，Operation方法，如图 4.4 所示。

图4.4 添加事件

2 、如何设置处理方法

Click处理方法右下方 ，弹出处理方法窗口，选择命令send→选择【标准协议】send事件命令→设置事件

编号，如图 4.5 所示。

图4.5 【标准协议】send事件命令

4.4.2 How to use单选buttonsendCustomization协议

1 、如何添加事件

选择命令send→选择【Customization协议】send串口命令→设置命令，如图 4.6 所示。

图4.6 【Customization协议】send串口命令

4.4.3 如何配置互锁button

互锁为多个单选button处于同一窗口，选中其中一个单选button时，其余单选button自动复原为未选中状态，互锁

的设置方法为同一窗口中单选button的组合名称要一致，如图 4.7 所示。

图4.7 互锁

5.多组按键应用

5.1 控件介绍

多组按键控件适用于既要实现button控件的Function，又要在button上以图像显示不同的状态。

当变量绑定的data属性为图片索引时，会根据绑定的值调用该组状态图像，达到不同状态下自主Switch的Function。

5.2 如何进行图片替换

选中多组按键控件，点击右侧属性窗口，可进行图像修改。点击“添加”可添加多组不同状态图像。 button不Operation时显示的状态为弹起状态，button按下时显示的状态为按下状态，具体步骤如图 5.1 所示。

图5.1 图片替换

仿真时，button不Operation显示弹起状态 1 图片，如图 5.2 所示。

图5.2 弹起状态

button点击按下时显示按下状态 1 图片，如图 5.3 所示。

图5.3 按下状态

5.3 应用案例

5.3.1 事件列表

事件列表，如下表说明：

控件初始化	“button”控件初始化时触发事件
控件销毁	“button”控件销毁时触发事件
Click	“button”控件点击生效 (非滑动) 时触发事件
长按	“button”控件长按 (500ms) 时触发事件
触屏按下	“button”控件被按下 (还未Complete点击仅按下) 时触发事件
获得焦点	“button”控件被按下 (已Switch至按下图片) 时触发事件
失去焦点	“button”控件从按下恢复至弹起时触发事件

协议RelatedOperation同按扭控件Operation类似，不作复述。

5.3.2 How to use多组按键动态Switch不同图像

Click主界面 (窗口 NEW1) 中的多组按键，Switch至模式选择界面 (窗口 NEW2) ，在模式选择界面中，点击 选择所需要的模式，再返回到主界面，主界面中多组按键图像会显示相对应的模式图片并Open该模式。

Operation步骤

1 、打开或新建工程，点击常用控件模块中的窗口，添加两个窗口，如图 5.4 所示。

图5.4 添加窗口

2 、在窗口 NEW1 中添加一个多组按键控件，选中多组按键进行添加和设置事件，Operation步骤如图 5.5 所示。

图5.5 添加多组按键及添加事件

3 、选中窗口 NEW1 的多组按键控件，点击属性窗口中的变量绑定，进行绑定变量，Operation步骤如图 5.6 所示。

图5.6 多组按键变量绑定

4 、点击窗口 NEW2 ，添加两个button控件，并对两个button控件均添加两个事件，事件触发均为点击，其中一个 事件为Switch窗口至 NEW1 ，另一事件为“变量Operation”—“变量设置” ， 目标变量绑定“Var0”变量，设置值 为设置常量，第一个button在输入框中输入“0”，第二个button在输入框中输入“1”，如图 5.7 所示。

图5.7 button控件的事件设置

5 、设置button控件图像，如图 5.8 所示 (注：多组按键的图像设置同“图片替换及仿真演示”不作复述)

图5.8 设置图像

6 、仿真演示时点击多组按键可Switch至 NEW2 窗口，点击button 2 可Switch至 NEW1 窗口中，且多组按键图像显 示Switch的第二组图片，如图 5.9 和 5.10 所示。

图5.10 Clickbutton1

图5.9 Clickbutton2

6.三态多组按键应用

6.1 控件介绍

三态多组按键与多组按键的Function相同，同时多了一个Invalid状态显示Function，用于设置button处于Invalid状态 (无法使用 状态) 。

6.2 如何进行图片替换

选中三态多组按键控件 ，Click右侧属性窗口 ，对三态多组按键进行图像修改 ，Operation步骤如图 6.1 所示。

图6.1 图片替换

弹起状态 1 为三态多组按键不Operation时显示的状态；

按下状态 1 为三态多组按键按下时显示的状态；

Invalid状态 1 为三态多组按键不使能时显示的状态.

仿真时三态多组按键不Operation时，显示弹起状态 1 ，如图 6.2 所示。

图6.2 弹起状态1

三态多组按键点击按下时，显示按下状态 1 ，如图 6.3 所示。

图6.3 按下状态1

三态多组按键处于不使能状态时，显示Invalid状态 1 ，如图 6.4 所示。

图6.4 Invalid状态

6.3 应用案例

6.3.1 事件列表

事件列表，如下表说明：

控件初始化	“button”控件初始化时触发事件
控件销毁	“button”控件销毁时触发事件
Click	“button”控件点击生效 (非滑动) 时触发事件
长按	“button”控件长按 (500ms) 时触发事件
触屏按下	“button”控件被按下 (还未Complete点击仅按下) 时触发事件
获得焦点	“button”控件被按下 (已Switch至按下图片) 时触发事件
失去焦点	“button”控件从按下恢复至弹起时触发事件

协议RelatedOperation同按扭控件Operation类似，不作复述。

6.3.2 如何将三态多组按键设置为Invalid状态

以下案例通过加湿器button设置作为说明，点击加湿button时加湿器开始工作，当点击自动模式button时，加湿button处 于Invalid状态。

Operation步骤

1 、打开或新建工程，添加一个多组按键和一个三态多组按键，如图 6.5 所示。

图6.5 添加一个多组按键和一个三态多组按键

2、调整各个控件的位置和大小，并设置其图像替换 (注：多组按键为自动模式，三态多组按键为加湿模式) 如图 6.6 所示。

图6.6 调整位置大小及图片替换

3 、选中多组按键控件，添加设置两个事件，事件触发均为点击，两个事件的处理方法和目标变量，如图 6.7 所示。

图6.7 多组按键的事件设置

4 、设置多组按键的变量绑定，被绑定的控件属性为图片索引，data source绑定和转换模式等设置Operation，如图 6.8 所示。

图6.8 多组按键的变量绑定

newmode 变量为：

Automode 变量为：

5 、选中三态多组按键控件添加一个事件，事件触发为点击，事件处理方法和参数设置，Operation如图 6.9 所示。

6.9 三态多组按键的事件设置

6 、添加两个三态多组按键的变量绑定，两个变量被绑定的控件属性和data source及转换模式等设置Operation，如图 6.10 所 示。

注：Invalid状态设置需要对三态多组按键进行变量绑定，被绑定的控件属性为Operation使能，data source、转换模式，转换 方法和转换参数设置参考图 6.10 所示，automode 变量的值与 0 进行比较，当为假时三态多组按键处于不使能状态 即为Invalid状态，为真时三态多组按键处于effective状态。

图6.10 三态多组按键变量绑定

7、仿真演示时，点击加湿buttonOpen加湿模式；点击自动模式button，加湿button处于Invalid状态，如图 6.11 和 6.12 所示。

图6.11 Click加湿button

图6.12 Click自动模式

7.多组单选button应用

7.1 控件介绍

多组单选button控件与多组按键Function类似，既包含了单选button的Function，也可通过图像对不同状态进行显示，可以理 解为多组switch。当变量绑定的data属性为图片索引时，会根据绑定的值调用该组switch图片，达到switch图片自主切 换的效果，同时该控件可显示不同状态按下或弹起的显示效果。

7.2 如何进行图片替换

选中多组单选button控件，点击右侧属性窗口，对多组单选button进行图像修改，Operation步骤如图 7.1 所示。

图7.1 图片替换

未选中状态 1，为多组单选button不Operation时显示的状态；

未选中状态按下 1，为多组单选button从未选中状态按下过程中时显示的状态；

选中状态 1，为多组单选button按下时显示的状态；

选中状态按下 1，为多组单选button从选中状态按下过程中显示的状态。

仿真时，多组单选button不Operation时，显示未选中状态 1 ，如图 7.2 所示。

图7.2 未选中状态1

多组单选button从未选中状态按下过程中显示未选中状态按下 1 ，如图 7.3 所示。

图7.3 未选中状态按下1

多组单选button按下时显示选中状态 1 ，如图 7.4 所示。

图7.4 选中状态1

多组单选button从选中状态按下过程中显示选中状态按下 1 ，如图 7.5 所示。

图7.5 选中状态按下1

7.3 应用案例

7.3.1 事件列表

事件列表，如下表说明：

控件初始化	“单选button”初始化时触发事件
控件销毁	“单选button”销毁时触发事件
触屏按下	“单选button”被按下 (还未Complete点击仅按下) 时触发事件
选中	“单选控件”状态为选中时候触发事件
未选中	“单选控件”状态为未选中时候触发事件

协议RelatedOperation同按扭控件Operation类似，不作复述。

7.3.2 How to use多组单选button动态Switch不同图像

Click所需要的不同模式button (button控件) ，对应的模式Openbutton (多组单选button控件) 显示选择的对应模式 图片，并点击模式Openbutton，该模式Open。

Operation步骤

1 、打开或新建工程，添加三个button控件和一个多组单选button，如图 7.6 所示。

图7.6 添加控件

2 、调整及设置控件的大小和位置，并对控件进行图片替换，如图 7.7 所示。

图7.7 调整控件位置及大小和图片替换

3 、选中button控件，各添加一个事件，三个事件触发均为“点击”，处理方法和目标变量等参数设置Operation，如 图 7.8 所示。

图7.8 button控件事件设置

4 、设置添加两个多组单选button的变量绑定，两个变量绑定Operation设置如图 7.9 所示。

图7.9 多组单选button的变量绑定

Var0 和 Var1 变量为：

5 、仿真演示时，点击送风模式，多组单选button显示送风模式图片，点击选中多组单选buttonOpen送风模式；

Click除湿模式，多组单选button显示除湿模式图片，点击选中多组单选buttonOpen除湿模式；

Click制冷模式，多组单选button显示制冷模式图片，点击选中多组单选button，Open制冷模式，如图 7.10 、7.11 和 7.12 所示。

图7.10 Open送风模式

图7.11 Open除湿模式

图7.12 Open制冷模式

8.三态多组单选button应用

8.1 控件介绍

三态多组单选button控件兼容多组单选buttonFunction，同时还多了一个Invalid状态显示Function，可设置button处于Invalid状态(无 法使用状态) 。

8.2 如何进行图片替换

选中三态多组单选button，Click右侧属性窗口，对三态多组单选button进行图像修改，Operation步骤如图 8.1 所示。

图8.1 图片替换

未选中状态 1：为三态多组单选button不Operation时显示的状态；

未选中状态按下 1：为三态多组单选button从未选中状态按下过程中时显示的状态；

选中状态 1：为三态多组单选button按下时显示的状态；

选中状态按下 1：为三态多组单选button从选中状态按下过程中显示的状态；

Invalid状态 1：为三态多组单选button不使能时显示的状态。

仿真时，三态多组单选button不Operation时，显示未选中状态 1 ，如图 8.2 所示。

图8.2 未选中状态1

三态多组单选button从未选中状态按下过程中显示未选中状态按下 1 ，如图 8.3 所示。

图8.3 未选中状态按下1

三态多组单选button按下时显示选中状态 1 ，如图 8.4 所示。

图8.4 选中状态1

三态多组单选button从选中状态按下过程中显示选中状态按下 1 ，如图 8.5 所示。

图8.5 选中状态按下1

Invalid状态为三态多组单选button不使能时显示的状态。

图8.6 Invalid状态

8.3 事件列表

事件列表，如下表说明：

控件初始化	“单选button”初始化时触发事件
控件销毁	“单选button”销毁时触发事件
触屏按下	“单选button”被按下 (还未Complete点击仅按下) 时触发事件
选中	“单选控件”状态为选中时候触发事件
未选中	“单选控件”状态为未选中时候触发事件

协议RelatedOperation同按扭控件Operation类似，不作复述。