1.滑动条介绍

滑动条可应用于温度、音量和亮度等调节功能当中,相较于按钮控件等更加快速且直观。

2.如何添加滑动条

打开或新建工程,点击常用控件模块或工具箱中的滑动条标,可添加滑动条,如图 2.1 所示。

GUI Designer滑动条控件使用手册插图1

2.1 添加滑动条

3.如何进行图片替换

选中滑动条,点击右侧属性窗口,可进行图像修改,点击“添加”按钮添加滑块显示,底图为滑动条未拉动 时显示的图片,状态图为滑动条拉动后显示的图片,滑块显示滑动条拉动的位置,如图 3.1 所示。

GUI Designer滑动条控件使用手册插图3

3.1 图片替换

仿真时,滑动条无操作时显示底图及滑块,如图 3.2 所示。

GUI Designer滑动条控件使用手册插图5

3.2 滑动条无操作

拉动滑动条,如图 3.3 所示。

GUI Designer滑动条控件使用手册插图7

3.3 拉动滑动条

GUI Designer滑动条控件使用手册插图9GUI Designer滑动条控件使用手册插图11

4.如何设置杂项

点击右侧属性窗口中的GUI Designer滑动条控件使用手册插图13 ,可设置滑动条的偏移坐标、最大小值、方向和触发模式,如图 4.1 所示。

GUI Designer滑动条控件使用手册插图15

4.1 设置杂项

4.1 如何设置滑块偏移坐标

点击滑块起始/终止偏移坐标下的输入框,可通过键盘或“+ ”“- ”按钮设置滑块起始/终止偏移坐标,设置 滑块偏移坐标即设置滑动条可拉动的范围。默认为 0 即滑块起始/终止坐标不作限制,在滑动条范围内可随意 拉动。

滑块起始偏移坐标为滑动条拉动的起始坐标,滑块拉动滑块终止偏移坐标为滑动条拉动的终止坐标,且滑动 条的最左边为起始坐标为 0 ,最右边为终止坐标为 305 (滑动条的终止横坐标与滑动条的宽度有关) 。

滑块起始偏移坐标为 45 ,即滑块起始位置为滑动条 45 的位置,滑块终止坐标为 100 ,即滑块终止位置 (不能 再拉动) 为滑动条 100 的位置。如图 4.2 所示。

GUI Designer滑动条控件使用手册插图17

4.2 滑块偏移坐标

GUI Designer滑动条控件使用手册插图19

4.2 如何设置最大/小值

点击最大/小值下的输入框,可通过键盘或“+ ”、“- ”按钮设置滑动条的最大/小值,最大值默认为 100 ,最 小值默认为 0。

设置最大/小值即设置滑动条代表的数据的最大最小值。

如设置最小值为 16 ,最大值为 35 ,则代表滑动条起始值为 16 ,滑动条的终止值为 35 ,如图 4.3 所示。

GUI Designer滑动条控件使用手册插图21

4.3 设置最大/小值

4.3 如何设置滑动条方向

点击方向下的按钮弹出下拉框,有横向和纵向,选择横向则拉动的方向为横向,选择纵向则拉动的方向为纵 向,如图 4.4 所示。

GUI Designer滑动条控件使用手册插图23

4.4 设置滑动条方向

4.4 如何设置触发模式

点击触发模式下的按钮弹出下拉框,有连续触发和释放时触发模式,选择连续触发则在拉动滑动条时一直触 发,释放时触发模式为拉动滑动条在拉动后释放那瞬间进行触发,如图 4.5 所示。

GUI Designer滑动条控件使用手册插图25

4.5 设置触发模式

5.应用案例

5.1 事件列表

事件列表,如下表说明:

控件初始化

“滑动条”初始化时触发事件

控件销毁

“滑动条”销毁时触发事件

值发生变化

“滑动条”进行滑动操作时触发

5.2 如何通过滑动条发送自定义协议指令

1 、如何添加事件

选中滑动条,点击右侧属性窗口中的事件,可进行添加事件,如图 5.1 所示。

GUI Designer滑动条控件使用手册插图27

5.1 添加事件

2 、如何设置处理方法

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

点击处理方法右下方GUI Designer滑动条控件使用手册插图29 ,弹出处理方法窗口,选择命令发送→选择【自定义协议】发送串口命令→设置命令,如图 5.2 所示。

GUI Designer滑动条控件使用手册插图31

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

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

GUI Designer滑动条控件使用手册插图33

5.3 自定义指令函数说明窗口

3 、如何查看滑动条发送的标准协议指令

当发送自定义协议指令为“AB CD $BYTE(#3005) $CRC16MODBUS( 1,3) $DELAY(1000) ”时,点击仿真运行按钮

GUI Designer滑动条控件使用手册插图35 ,在仿真界面中滑动滑动条,查看发送的指令,如图 5.4 所示。

GUI Designer滑动条控件使用手册插图37

5.4 发送【自定义协议】指令

5.3 如何通过滑动条控制亮度

通过拉动滑动条调节亮度显示,具体操作设置如下。

1 、如何添加文本控件及滑动条

新建一个文本控件用于显示亮度具体数值,点击常用滑块中的滑动条和文本控件图标即可添加,如图 5.5 所 示。

GUI Designer滑动条控件使用手册插图39

5.5 添加控件

2 、如何设置文本控件变量绑定

点击右侧属性窗口中的变量绑定→添加→被绑定的控件属性为“文本 1”→数据源绑定“系统配置—— Brightness”→转换模式“单向”→转换方法“默认”,如图 5.6 所示。

GUI Designer滑动条控件使用手册插图41

5.6 设置文本控件变量绑定

注意:数据源绑定的变量“系统配置——Brightness”,如图 5.7 所示

GUI Designer滑动条控件使用手册插图43

5.7 Brightness 变量

GUI Designer滑动条控件使用手册插图45

3 、如何设置滑动条变量绑定

选中滑动条,点击右侧属性窗口中的变量绑定→点击添加→被绑定的控件属性“当前值”→数据源绑定“系 统配置——Brightness”→转换模式“双向”→转换方法“默认” ,操作如图 5.8 所示。

GUI Designer滑动条控件使用手册插图47

5.8 设置滑动条变量绑定

4 、仿真运行

拉动滑动条可设置调节屏幕亮度,如图 5.9 所示。

GUI Designer滑动条控件使用手册插图49

5.9 仿真运行

5.4 如何通过滑动条控制动画播放速度

通过滑动条控制GIF 动画的播放速度,具体操作如下。

1 、如何添加动画控件及滑动条

点击工具箱中的标准控件,点击动画和滑动条图标添加对应控件,如图 5.10 所示。

GUI Designer滑动条控件使用手册插图51

5.10 添加控件

2 、如何为动画控件进行图像替换

选中动画控件点击右侧属性窗口中的图像选择图片,动态图片选择一个 GIF 格式图片,如图 5.11 所示。

GUI Designer滑动条控件使用手册插图53

5.11 动画控件图像替换

3 、如何设置滑动条变量绑定

选中滑动条,点击右侧属性窗口中的变量绑定→点击添加→被绑定的控件属性“当前值”→数据源绑定“Var0” →转换模式“双向”→转换方法“默认”,操作如图 5.12 所示。

GUI Designer滑动条控件使用手册插图55

5.12 滑动条变量绑定

注:Var0 变量为

GUI Designer滑动条控件使用手册插图57

4 、如何设置动画变量绑定

选中动画控件,点击右侧属性窗口中的变量绑定→点击添加→被绑定的控件属性为“播放速度”→数据源绑 定“Var0”→转换模式“单向”→转换方法“默认”,操作如图 5.13 所示。

GUI Designer滑动条控件使用手册插图59

GUI Designer滑动条控件使用手册插图61

5.13 设置动画控件变量绑定

5 、仿真演示

点击仿真运行按钮,弹出仿真运行窗口,拉动滑动条可控制动画的播放速度,可快速也可慢速播放,如图 5.14 所示。

GUI Designer滑动条控件使用手册插图63

5.14 仿真运行

相关产品

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

cloud@modbus.cn

QQ
微信