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

1.圆形滑动条介绍

圆形滑动条与滑动条相同，可应用于temperature、音量和Brightness等调节Function当中，相较于button控件等更加快速且直观， 圆形滑动条与滑动条不同点在于其表现形状不同。

2.如何添加圆形滑动条

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

图2.1 添加圆形滑动条


3.如何进行外观修改

选中滑动条，点击右侧属性窗口，可进行图像修改，点击“添加”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/终止角度，设置指针角度 即设置圆形滑动条可拉动的范围。指针start角度默认为 0°，指针默认角度为 360°，在范围内可任意拉动， 当指针start角度为 0°，指针终止角度为 180° ，圆形滑动条显示为 0°- 180°，滑块也只能在这个区域进行
滑动，如图 4.2 所示。

图4.2 指针start/终止角度

4.2 如何设置圆心横纵坐标

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

圆心 (0,0) 位置

圆心默认位置

圆心 (100, 100) 位置

圆形滑动条的宽和高为


图4.3 圆心横纵坐标

4.3 如何设置半径

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

图4.4 设置半径

4.4 如何设置宽度

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

图4.5 宽度设置

4.5 如何设置最大/小值

Click最大/小值下的输入框，可通过键盘或“+ ”、“- ”button设置滑动条的最大/小值，maximum默认为 100 ，最 小值默认为 0。
设置最大/小值即设置滑动条代表的data的最大minimum。
如设置minimum为 15 ，maximum为 36 ，则代表滑动条initial value为 15 ，滑动条的终止值为 36 ，如图 4.6 所示。

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

4.6 如何设置触发模式

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

图4.7 设置触发模式






5.应用案例


5.1 事件列表

事件列表，如下表说明：

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

5.2 如何通过圆形滑动条sendCustomization协议指令

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

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

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

Click处理方法右下方

，弹出处理方法窗口，选择命令send→选择【Customization协议】send串口命令→设置命
令，如图 5.2 所示。

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

图5.3 Customization指令函数说明窗口
3 、如何变量绑定
选中滑动条，点击右侧属性窗口中的变量绑定→点击添加→被绑定的控件属性“current value”→data source绑定“Var0” →转换模式“双向”→转换方法“默认”，Operation如图 5.4 所示。

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

4 、如何View圆形滑动条send的标准协议指令
当sendCustomization协议指令为“AB CD $BYTE(#3005) $CRC16MODBUS( 1,3) $DELAY(1000) ”时，点击仿真运行button

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

图5.5 send【Customization协议】指令


5.2 如何通过CustomizationParse设置圆形滑动条

1 、如何添加CustomizationParse
Click项目弹出项目窗口，点击协议设置→协议Type设置为“Customization协议”→点击Customization协议Parse设置→弹出 Parse设置窗口→点击添加弹出CustomizationParse设置窗口，根据需求和要求进行设置可添加一个Customization协议Parse， 如图 5.6 所示。

图5.6 添加Customization协议Parse
2 、如何设置自定Parse
帧头设置为“AB CD 00 01”→勾选检验帧尾→帧尾“00 01”→帧总Length“7”→关联变量索引为“3005”→ datastart偏移byte“5”→dataLength (byte) 为“1”→data format为“1 byte”→data type为“连续量”→点 击“Confirm” ，如图 5.7 所示。

图5.7 设置CustomizationParse
3 、仿真debug
具体仿真debugOperation及方法详看《仿真debug使用手册》，如图 5.8 所示，通过串口Debug Tools软件 send指令“AB CD 00 01 19 00 01” ，圆形滑动条拉动到 25 的位置

图5.8 仿真debug