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

属性
---------------------------------
.. image:: image/环形滑块/环形滑块属性.png 
    :align: center
    :alt: 环形滑块属性

|

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

**坐标属性 :**  参考控件概念- :ref:`坐标属性`
  
**加载属性 :**  参考控件概念- :ref:`加载属性`
  
**背景属性 :**  

.. image:: image/环形滑块/环形滑块背景属性.png 
    :align: center
    :alt: 环形滑块背景属性

|

    + 类型(type)：背景类型:0-颜色 1-图片(只读)
    
    - 背景颜色(color)：背景颜色(读写)
    
    + 进度条(color2)：进度条颜色(读写)

    - 游标颜色(color3)：游标颜色(读写)

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

.. image:: image/环形滑块/环形滑块背景说明.png 
    :align: center
    :alt: 环形滑块背景说明

**显示属性 :**  
  
.. image:: image/环形滑块/环形滑块显示属性.png 
    :align: center
    :alt: 环形滑块显示属性

|

    + 进度条宽度（barw）：进度条宽度,单位像素,内部限制最大为 w/2（读写）

    - 游标宽度（kbw）：游标直径,单位像素。内部限制最大为 w/2（读写）

    + 起始角度（start）：进度条显示的起始角度,范围：0-360。0表示钟表的3点方向（读写）
  
    - 角度（angle）：进度条显示的角度范围,范围：0-360。360表示显示一圈（读写）
 
    + 进度方向（dir）：进度方向：0-顺时针 1-逆时针（读写）

    - 是否圆角（rad）：进度条是否圆角：0-否 1-是(只读)

    **当背景为图片时，显示属性如下图：**

.. image:: image/环形滑块/环形滑块背景为图片的显示属性.png 
    :align: center
    :alt: 环形滑块背景为图片的显示属性

|    

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

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

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

.. image:: image/环形滑块/环形滑块游标半径说明.png 
    :align: center
    :alt: 环形滑块游标半径说明

|

**特有属性 :**  
  
.. image:: image/环形滑块/环形滑块特有属性.png 
    :align: center
    :alt: 环形滑块特有属性

|

    + 最小值（min）：最小值 范围：0-65535（读写）

    - 最大值（max）：最大值 范围：0-65535（读写）

    + 当前值（val）：和角度绑定，调节角度该值会变化（变化范围：最小值-最大值），该值允许范围：0-65535（读写）

---------------------------------

事件
---------------------------------

**弹起事件：** 控件按下且弹起后执行

**按下事件：** 控件按下后执行

**滑动事件：** 拖动过程，值变化了执行   

---------------------------------


功能演示
---------------------------------

`点击下载演示工程 <http://www.openedv.com/ATK-Prod/ATK-HMI/file_download/wid_demo/project(wid_demo).zip>`_

.. image:: image/环形滑块/环形滑块功能演示.png 
    :align: center
    :alt: 环形滑块功能演示

|

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

|

进度条
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

.. image:: image/环形滑块/进度条.png 
    :align: center
    :alt: 进度条

|

颜色环形进度条：
    - 实现原理：配置属性如下图：
  
    .. image:: image/环形滑块/颜色进度条.png 
        :align: center
        :alt: 颜色进度条

    |

图片环形进度条：
    - 实现原理：游标图片（pic3）设为65535，即无游标。配置属性如下图：
  
    .. image:: image/环形滑块/图片进度条.png 
        :align: center
        :alt: 图片进度条

    |

饼图进度条：
    - 实现原理：进度条宽度（barw）设为W/2，游标宽度（kbw）设为0。配置属性如下图：
  
    .. image:: image/环形滑块/饼图进度条.png 
        :align: center
        :alt: 饼图进度条

    |


滑块
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

.. image:: image/环形滑块/滑块.png 
    :align: center
    :alt: 滑块

|

半圆滑块：
    - 实现原理：起始角度(start)设为180,角度(angle)设为180。配置属性如下图：
  
    .. image:: image/环形滑块/半圆滑块.png 
        :align: center
        :alt: 半圆滑块

    |

图片环形滑块：
    - 实现原理：配置属性如下图：
  
    .. image:: image/环形滑块/图片环形滑块.png 
        :align: center
        :alt: 图片环形滑块
 
    |

值调整：
    - 功能：滑动调节所有环形滑块控件的值。
    - 实现原理：在sl0的 ``滑动事件`` 中编写

::

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

|
|
|
|
|
|