13. 环形滑块控件

用途:环形滑块(变量调节)、环形进度条(显示进度)、饼图(显示变量的大小)等。变量可以上位机编辑脚或单片机发送指令修改。

13.1. 属性

环形滑块属性

基础属性 : 参考控件概念- 基础属性

坐标属性 : 参考控件概念- 坐标属性

加载属性 : 参考控件概念- 加载属性

背景属性 :

环形滑块背景属性

  • 类型(type):背景类型:0-颜色 1-图片(只读)

  • 背景颜色(color):背景颜色(读写)

  • 进度条(color2):进度条颜色(读写)

  • 游标颜色(color3):游标颜色(读写)

环形滑块部件说明如下图:

环形滑块背景说明

显示属性 :

环形滑块显示属性

  • 进度条宽度(barw):进度条宽度,单位像素,内部限制最大为 w/2(读写)

  • 游标宽度(kbw):游标直径,单位像素。内部限制最大为 w/2(读写)

  • 起始角度(start):进度条显示的起始角度,范围:0-360。0表示钟表的3点方向(读写)

  • 角度(angle):进度条显示的角度范围,范围:0-360。360表示显示一圈(读写)

  • 进度方向(dir):进度方向:0-顺时针 1-逆时针(读写)

  • 是否圆角(rad):进度条是否圆角:0-否 1-是(只读)

当背景为图片时,显示属性如下图:

环形滑块背景为图片的显示属性

起始角度、角度 、进度方向属性和背景为颜色时一样。

  • 游标半径(r):游标图片中心距离整个控件中心的距离,单位像素。内部限制最大为 w/2(读写)

    游标半径设置说明如下图所示:

环形滑块游标半径说明

特有属性 :

环形滑块特有属性

  • 最小值(min):最小值 范围:0-65535(读写)

  • 最大值(max):最大值 范围:0-65535(读写)

  • 当前值(val):和角度绑定,调节角度该值会变化(变化范围:最小值-最大值),该值允许范围:0-65535(读写)


13.2. 事件

弹起事件: 控件按下且弹起后执行

按下事件: 控件按下后执行

滑动事件: 拖动过程,值变化了执行


13.3. 功能演示

点击下载演示工程

环形滑块功能演示

小技巧

把工程配置的启动页面(pid)改为当前页面ID可以立即显示此页面。


13.3.1. 进度条

进度条

颜色环形进度条:
  • 实现原理:配置属性如下图:

颜色进度条

图片环形进度条:
  • 实现原理:游标图片(pic3)设为65535,即无游标。配置属性如下图:

图片进度条

饼图进度条:
  • 实现原理:进度条宽度(barw)设为W/2,游标宽度(kbw)设为0。配置属性如下图:

饼图进度条

13.3.2. 滑块

滑块

半圆滑块:
  • 实现原理:起始角度(start)设为180,角度(angle)设为180。配置属性如下图:

半圆滑块

图片环形滑块:
  • 实现原理:配置属性如下图:

图片环形滑块

值调整:
  • 功能:滑动调节所有环形滑块控件的值。

  • 实现原理:在sl0的 滑动事件 中编写

csl0.val=sl0.val;
csl1.val=sl0.val;
csl2.val=sl0.val;
csl3.val=sl0.val;
csl4.val=sl0.val;