GUI Designer按钮类控件使用手册

1.如何添加按钮类控件

点击快捷栏或工具箱对应图标可进行添加控件，如图 1.1 所示。

图1.1 添加控件

注：快捷栏列出的为常用的控件，工具箱中按钮类控件包含了所有按钮控件。

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

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

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

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

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

图2.1 公共属性修改

2.2 如何修改外观属性

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

图2.2 外观属性修改

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

图2.3 图片替换

注：如使用图片量较大，可使用图片管理功能进行批量图片添加、替换、分类和管理，具体操作详见图片管 理说明。

2.3 如何为按钮控件添加文字

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

图2.4 文字添加

点击文本，可进行添加和设置文本内容，可选静态文本，如图 2.5 所示。

图2.5 静态文本

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

2.3.1 如何修改字体

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

图2.6 修改字体

2.3.2 如何修改文字颜色

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

图2.7 修改文字颜色

2.3.3 如何修改背景颜色

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

图2.8 修改背景颜色

2.3.4 如何修改对齐方式

点击对齐方式下的按钮，用户可根据需求输入的文本的对齐方式进行修改，对齐方式默认为居中，如图 2.9

所示。

图2.9 修改文字对齐方式

3.按钮控件应用

3.1 控件介绍

按钮控件类似于生活中的开关，用户可通过单击来执行操作。按钮控件可显示文本和图像。 该控件在进行点击时，可触发页面跳转，数值的增加和减小等功能。

3.2 如何进行图片替换

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

图3.1 图片替换

仿真时，按钮不操作，显示弹起状态图片，如图 3.2 所示。

图3.2 弹起状态

点击按钮，按下状态显示图片，如图 3.3 所示。

图3.3 按下状态

3.3 应用案例

3.3.1 事件列表

事件列表，如下表说明：

3.3.2 窗口切换

窗口切换即点击按钮可从当前窗口切换至目标窗口，具体设置方法如下。

1 、如何添加事件

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

图3.4 添加事件

2 、如何设置处理方法

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

图3.5 窗口切换

3.3.3 如何使用按钮控件发送 GVS 标准协议

1 、如何添加事件

同窗口切换添加事件操作方法一致，不做复述。

2 、如何设置处理方法

标准协议为 GVSUI 编辑工具私有协议，可进行修改变量，发送事件等操作。

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

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

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

3 、如何查看按钮控件发送的标准协议指令

当事件编号设置为 1 时，点击仿真运行按钮 ，在仿真界面中点击按钮，查看发送的指令，如图 3.7 所示。

图3.7 发送【标准协议】指令

3.3.4 如何使用按钮控件发送自定义协议

1 、如何添加事件

同窗口切换添加事件操作方法一致，不做复述。

2 、如何设置处理方法

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

点击处理方法右下方 ，弹出处理方法窗口，选择命令发送→选择【自定义协议】发送串口命令→设置命

令，如图 3.8 所示。

图3.8 【自定义协议】发送串口命令

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

图3.9 自定义指令函数说明窗口

3 、如何查看按钮控件发送的标准协议指令

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

按钮 ，在仿真界面中点击按钮，查看发送的指令，如图 3.10 所示。

图3.10 发送【自定义协议】指令

3.4 如何使用按钮控件进行文本输入

通过按钮控件进行文本输入的应用，详见《输入框的使用》说明书。

3.5 如何使用按钮控件设置参数

通过按钮控件点击更改阀门开启时间，具体设置操作如下。

1 、添加一个自定义变量

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

图3.11 阀门开始时间设置变量

2 、如何添加按钮控件及文本控件

新建一个文本控件用于显示阀门开始时间，点击常用模块中的按钮控件和文本控件即可添加，如图 3.12 所示。

图3.12 添加按钮控件及文本控件

3 、如何添加变量绑定

选中文本控件，点击右侧属性窗口中的变量绑定，点击添加，被绑定的控件属性，数据源绑定和转换模式， 转换方法设置，操作如图 3.9 所示。

图3.9 添加变量绑定

4 、如何添加事件

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

5 、如何设置处理方法

点击处理方法右下方 ，弹出处理方法窗口，选择变量操作→选择变量设置→设置目标变量→使用常量，

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

图3.11 设置参数处理方法

6 、如何获取阀门开始时间

用户可通过协议指令获取阀门开启时间，具体操作步骤详看协议发送指令。

3.6 如何通过长按快速更改数值

如何添加按钮控件及文本控件

具体操作步骤同上一案例。

如何添加变量绑定

具体操作步骤同上一案例。

如何添加长按事件

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

图3.10 长按事件

如何设置处理方法

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

进值，如图 3.11 所示。

图3.11 处理方法

仿真演示

仿真时，长按按钮控件可快速增加文本控件上显示的数值，如图 3.12 所示。

图3.12 仿真演示效果

4.单选按钮 (自锁按钮) 应用

4.1 控件介绍

单选按钮控件可以理解为一个开关按钮，有未选中和选中状态，通过该控件可实现开关操作。

4.2 如何进行图片替换

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

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

图4.1 图片替换

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

图4.2 未选中状态

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

图4.3 选中状态

4.3 应用案例

4.3.1 事件列表

事件列表，如下表说明：

4.4.1 如何使用单选按钮发送 GVS 标准协议

1 、如何添加事件

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

图4.4 添加事件

2 、如何设置处理方法

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

编号，如图 4.5 所示。

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

4.4.2 如何使用单选按钮发送自定义协议

1 、如何添加事件

选择命令发送→选择【自定义协议】发送串口命令→设置命令，如图 4.6 所示。

图4.6 【自定义协议】发送串口命令

4.4.3 如何配置互锁按钮

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

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

图4.7 互锁

5.多组按键应用

5.1 控件介绍

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

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

5.2 如何进行图片替换

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

图5.1 图片替换

仿真时，按钮不操作显示弹起状态 1 图片，如图 5.2 所示。

图5.2 弹起状态

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

图5.3 按下状态

5.3 应用案例

5.3.1 事件列表

事件列表，如下表说明：

协议相关操作同按扭控件操作类似，不作复述。

5.3.2 如何使用多组按键动态切换不同图像

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

操作步骤

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

图5.4 添加窗口

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

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

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

图5.6 多组按键变量绑定

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

图5.7 按钮控件的事件设置

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

图5.8 设置图像

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

图5.10 点击按钮1

图5.9 点击按钮2

6.三态多组按键应用

6.1 控件介绍

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

6.2 如何进行图片替换

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

图6.1 图片替换

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

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

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

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

图6.2 弹起状态1

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

图6.3 按下状态1

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

图6.4 无效状态

6.3 应用案例

6.3.1 事件列表

事件列表，如下表说明：

协议相关操作同按扭控件操作类似，不作复述。

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

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

操作步骤

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

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

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

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

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

图6.7 多组按键的事件设置

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

图6.8 多组按键的变量绑定

newmode 变量为：

Automode 变量为：

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

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

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

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

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

7、仿真演示时，点击加湿按钮开启加湿模式；点击自动模式按钮，加湿按钮处于无效状态，如图 6.11 和 6.12 所示。

图6.11 点击加湿按钮

图6.12 点击自动模式

7.多组单选按钮应用

7.1 控件介绍

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

7.2 如何进行图片替换

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

图7.1 图片替换

未选中状态 1，为多组单选按钮不操作时显示的状态；

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

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

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

仿真时，多组单选按钮不操作时，显示未选中状态 1 ，如图 7.2 所示。

图7.2 未选中状态1

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

图7.3 未选中状态按下1

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

图7.4 选中状态1

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

图7.5 选中状态按下1

7.3 应用案例

7.3.1 事件列表

事件列表，如下表说明：

协议相关操作同按扭控件操作类似，不作复述。

7.3.2 如何使用多组单选按钮动态切换不同图像

点击所需要的不同模式按钮 (按钮控件) ，对应的模式开启按钮 (多组单选按钮控件) 显示选择的对应模式 图片，并点击模式开启按钮，该模式开启。

操作步骤

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

图7.6 添加控件

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

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

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

图7.8 按钮控件事件设置

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

图7.9 多组单选按钮的变量绑定

Var0 和 Var1 变量为：

5 、仿真演示时，点击送风模式，多组单选按钮显示送风模式图片，点击选中多组单选按钮开启送风模式；

点击除湿模式，多组单选按钮显示除湿模式图片，点击选中多组单选按钮开启除湿模式；

点击制冷模式，多组单选按钮显示制冷模式图片，点击选中多组单选按钮，开启制冷模式，如图 7.10 、7.11 和 7.12 所示。

图7.10 开启送风模式

图7.11 开启除湿模式

图7.12 开启制冷模式

8.三态多组单选按钮应用

8.1 控件介绍

三态多组单选按钮控件兼容多组单选按钮功能，同时还多了一个无效状态显示功能，可设置按钮处于无效状态(无 法使用状态) 。

8.2 如何进行图片替换

选中三态多组单选按钮，点击右侧属性窗口，对三态多组单选按钮进行图像修改，操作步骤如图 8.1 所示。

图8.1 图片替换

未选中状态 1：为三态多组单选按钮不操作时显示的状态；

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

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

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

无效状态 1：为三态多组单选按钮不使能时显示的状态。

仿真时，三态多组单选按钮不操作时，显示未选中状态 1 ，如图 8.2 所示。

图8.2 未选中状态1

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

图8.3 未选中状态按下1

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

图8.4 选中状态1

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

图8.5 选中状态按下1

无效状态为三态多组单选按钮不使能时显示的状态。

图8.6 无效状态

8.3 事件列表

事件列表，如下表说明：

协议相关操作同按扭控件操作类似，不作复述。