GUI Designer圆形滑动条控件使用手册

1.圆形滑动条介绍

圆形滑动条与滑动条相同，可应用于温度、音量和亮度等调节功能当中，相较于按钮控件等更加快速且直观，圆形滑动条与滑动条不同点在于其表现形状不同。

2.如何添加圆形滑动条

打开或新建一个工程文件，点击工具箱中的标准控件，选择圆形滑动条图标在窗口中添加圆形滑动条控件，如图 2.1 所示。

图2.1 添加圆形滑动条

3.如何进行外观修改

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

图3.1 图片替换
注：图像显示选择单色
仿真时，滑动条无操作时显示底图及滑块，如图 3.2 所示。

图3.2 圆形滑动条无操作
拉动滑动条，如图 3.3 所示。

图3.3 拉动圆形滑动条

4.如何设置杂项

点击右侧属性窗口中的

，可设置滑动条的偏移坐标、最大小值、方向和触发模式，如图 4.1 所示。

图4.1 设置杂项

4.1 如何设置指针偏移角度

点击指针起始/终止角度下的输入框，可通过键盘或“+ ”“- ”按钮设置指针起始/终止角度，设置指针角度即设置圆形滑动条可拉动的范围。指针起始角度默认为 0°，指针默认角度为 360°，在范围内可任意拉动，当指针起始角度为 0°，指针终止角度为 180° ，圆形滑动条显示为 0°- 180°，滑块也只能在这个区域进行
滑动，如图 4.2 所示。

图4.2 指针起始/终止角度

4.2 如何设置圆心横纵坐标

点击圆心横纵坐标的输入框，可通过键盘或“+ ”“- ”按钮设置圆心横纵坐标，当圆形滑动条底图替换后，底图圆心不在中点时需通过设置圆心横纵坐标找到圆心。圆心横纵坐标的位置与圆形滑动条的高度和宽度有
关，圆心各个位置图，如图 4.3 所示。

圆心 (0,0) 位置

圆心默认位置

圆心 (100, 100) 位置

圆形滑动条的宽和高为

图4.3 圆心横纵坐标

4.3 如何设置半径

点击半径下的输入框，可通过键盘或“+ ”“- ”按钮设置半径，设置半径即设置以圆形滑动条中点为圆心到滑块之间的距离，- 1 为默认半径 (不代表任何数值意义) ，如图 4.4 所示。

图4.4 设置半径

4.4 如何设置宽度

点击宽度下的输入框，可通过键盘或“+ ”“- ”按钮设置宽度，设置宽度即设置圆形滑动条显示的宽度，如图 4.5 所示。

图4.5 宽度设置

4.5 如何设置最大/小值

点击最大/小值下的输入框，可通过键盘或“+ ”、“- ”按钮设置滑动条的最大/小值，最大值默认为 100 ，最小值默认为 0。
设置最大/小值即设置滑动条代表的数据的最大最小值。
如设置最小值为 15 ，最大值为 36 ，则代表滑动条起始值为 15 ，滑动条的终止值为 36 ，如图 4.6 所示。

图4.6 设置最大/小值
注：需对滑动条进行变量绑定，绑定一个最小值为 15 最大值为 16 的整型自定义变量

4.6 如何设置触发模式

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

图4.7 设置触发模式

5.应用案例

5.1 事件列表

事件列表，如下表说明：

控件初始化	“圆形滑动条”初始化时触发事件
控件销毁	“圆形滑动条”销毁时触发事件
值发生变化	“圆形滑动条”进行滑动操作时触发

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

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

图5.1 添加事件
2 、如何设置处理方法

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

点击处理方法右下方

，弹出处理方法窗口，选择命令发送→选择【自定义协议】发送串口命令→设置命
令，如图 5.2 所示。

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

图5.3 自定义指令函数说明窗口
3 、如何变量绑定
选中滑动条，点击右侧属性窗口中的变量绑定→点击添加→被绑定的控件属性“当前值”→数据源绑定“Var0” →转换模式“双向”→转换方法“默认”，操作如图 5.4 所示。

图5.4 变量绑定
注：Var0 变量为

4 、如何查看圆形滑动条发送的标准协议指令
当发送自定义协议指令为“AB CD $BYTE(#3005) $CRC16MODBUS( 1,3) $DELAY(1000) ”时，点击仿真运行按钮

，在仿真界面中滑动圆形滑动条，查看发送的指令，如图 5.5 所示。

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

5.2 如何通过自定义解析设置圆形滑动条

1 、如何添加自定义解析
点击项目弹出项目窗口，点击协议设置→协议类型设置为“自定义协议”→点击自定义协议解析设置→弹出解析设置窗口→点击添加弹出自定义解析设置窗口，根据需求和要求进行设置可添加一个自定义协议解析，如图 5.6 所示。

图5.6 添加自定义协议解析
2 、如何设置自定解析
帧头设置为“AB CD 00 01”→勾选检验帧尾→帧尾“00 01”→帧总长度“7”→关联变量索引为“3005”→ 数据起始偏移字节“5”→数据长度 (字节) 为“1”→数据格式为“1 字节”→数据类型为“连续量”→点击“确认” ，如图 5.7 所示。