GUI Designer滑动条控件使用手册

1.滑动条介绍

滑动条可应用于temperature、音量和Brightness等调节Function当中，相较于button控件等更加快速且直观。

2.如何添加滑动条

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

图2.1 添加滑动条

3.如何进行图片替换

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

图3.1 图片替换

仿真时，滑动条无Operation时显示底图及滑块，如图 3.2 所示。

图3.2 滑动条无Operation

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

图3.3 拉动滑动条

4.如何设置杂项

Click右侧属性窗口中的 ，可设置滑动条的偏移坐标、最大小值、方向和触发模式，如图 4.1 所示。

图4.1 设置杂项

4.1 如何设置滑块偏移坐标

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

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

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

图4.2 滑块偏移坐标

4.2 如何设置最大/小值

Click最大/小值下的输入框，可通过键盘或“+ ”、“- ”button设置滑动条的最大/小值，maximum默认为 100 ，最 小值默认为 0。

设置最大/小值即设置滑动条代表的data的最大minimum。

如设置minimum为 16 ，maximum为 35 ，则代表滑动条initial value为 16 ，滑动条的终止值为 35 ，如图 4.3 所示。

图4.3 设置最大/小值

4.3 如何设置滑动条方向

Click方向下的button弹出下拉框，有横向和纵向，选择横向则拉动的方向为横向，选择纵向则拉动的方向为纵 向，如图 4.4 所示。

图4.4 设置滑动条方向

4.4 如何设置触发模式

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

图4.5 设置触发模式

5.应用案例

5.1 事件列表

事件列表，如下表说明：

5.2 如何通过滑动条sendCustom Protocol指令

1 、如何添加事件

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

图5.1 添加事件

2 、如何设置处理方法

Custom Protocol是用户可在项目中使用其他的Protocol，如 modbus Protocol。

Click处理方法右下方 ，弹出处理方法窗口，选择命令send→选择【Custom Protocol】send串口命令→设置命令，如图 5.2 所示。

图5.2 【Custom Protocol】send串口命令

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

图5.3 Customization指令函数说明窗口

3 、如何View滑动条send的标准Protocol指令

当sendCustom Protocol指令为“AB CD $BYTE(#3005) $CRC16MODBUS( 1,3) $DELAY(1000) ”时，点击仿真运行button

，在仿真界面中滑动滑动条，Viewsend的指令，如图 5.4 所示。

图5.4 send【Custom Protocol】指令

5.3 如何通过滑动条控制Brightness

通过拉动滑动条调节Brightness显示，具体Operation设置如下。

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

新建一个Text控件用于显示Brightness具体numerical value，点击常用滑块中的滑动条和Text控件图标即可添加，如图 5.5 所 示。

图5.5 添加控件

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

Click右侧属性窗口中的变量绑定→添加→被绑定的控件属性为“Text 1”→data source绑定“system配置—— Brightness”→转换模式“单向”→转换方法“默认”，如图 5.6 所示。

图5.6 设置Text控件变量绑定

注意：data source绑定的变量“system配置——Brightness”，如图 5.7 所示

图5.7 Brightness 变量

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

选中滑动条，点击右侧属性窗口中的变量绑定→点击添加→被绑定的控件属性“current value”→data source绑定“系 统配置——Brightness”→转换模式“双向”→转换方法“默认” ，Operation如图 5.8 所示。

图5.8 设置滑动条变量绑定

4 、仿真运行

拉动滑动条可设置调节屏幕Brightness，如图 5.9 所示。

图5.9 仿真运行

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

通过滑动条控制GIF 动画的播放速度，具体Operation如下。

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

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

图5.10 添加控件

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

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

图5.11 动画控件图像替换

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

选中滑动条，点击右侧属性窗口中的变量绑定→点击添加→被绑定的控件属性“current value”→data source绑定“Var0” →转换模式“双向”→转换方法“默认”，Operation如图 5.12 所示。

图5.12 滑动条变量绑定

注：Var0 变量为

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

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

图5.13 设置动画控件变量绑定

5 、仿真演示

Click仿真运行button，弹出仿真运行窗口，拉动滑动条可控制动画的播放速度，可快速也可慢速播放，如图 5.14 所示。

图5.14 仿真运行