自锁按钮控件
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
用途：自锁按钮控件是一种在点击后能够保持当前状态的按钮，通常用于切换设备状态（如开启/关闭），直到再次点击时才会改变状态。

属性
---------------------------------
.. image:: image/自锁按钮/属性.png
    :align: center
    :alt: 自锁按钮属性

|

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

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

**过渡属性 :**  

    **过渡是指自锁按钮在弹起和按下之间切换时产生的一种变化效果。（注意：仅背景为颜色时有效）**  

.. image:: image/自锁按钮/过渡属性.png 
    :align: center
    :alt: 自锁按钮过渡属性

|

    + 过渡类型(type)：特效类型:0-无 1-放大效果 2-向下移动效果 3-水滴效果 4-收缩效果(只读)

    - 过渡时间(time)：特效时间(毫秒),0-65535(只读)

    - 过渡变化值(val)：过渡变化的目标值(只读)

  
**特有属性 :**  
  
.. image:: image/自锁按钮/特有属性.png 
    :align: center
    :alt: 自锁按钮特有属性

|

    + 圆角(rad)：圆角值,范围:0-100(读写)

    - 状态(val)：自锁按钮当前状态值，0-弹起，1-按下(读写)

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

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

**弹起事件：** 自锁按钮状态值(val属性值)为 ``0`` 时，执行弹起事件

**按下事件：** 自锁按钮状态值(val属性值)为 ``1`` 时，执行按下事件


.. attention:: 
    自锁按钮的 ``弹起事件`` 和 ``按下事件`` 只在触摸控件时生效， 通过脚本修改 ``状态值(val)`` 时，不会执行弹起和按下事件。

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

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

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

|

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

|

各种背景效果
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

.. image:: image/自锁按钮/自锁按钮背景变化.png 
    :align: center
    :alt: 自锁按钮背景变化

|

**背景颜色演示**

    - 功能：点击控件改变背景颜色和文字
    - 颜色变化原理：设置控件背景属性类型为颜色，改变默认颜色和按下颜色数据

    .. image:: image/自锁按钮/背景属性颜色demo.png 
        :align: center
        :alt: 背景属性颜色demo

|

    - 文字变化原理：
    
        1.在 ``弹起事件中`` 编写以下脚本

        .. code-block::
            :linenos:

            bl0.txt.str="stop";//修改bl0控件的文本值为 stop

        2.在 ``按下事件中`` 编写以下脚本

        .. code-block::
            :linenos:

            bl0.txt.str="start";//修改bl0控件的文本值为 start


**背景图片演示**

    - 功能：点击控件改变背景图片，实现不同显示效果
    - 原理：设置控件背景属性类型为图片，改变默认图片和按下图片ID

    .. image:: image/自锁按钮/背景属性图片demo.png 
        :align: center
        :alt: 背景属性图片demo

|

**背景切图演示**

    - 功能：点击控件通过切图改变背景，实现不同显示效果
    - 原理：设置控件背景属性类型为切图，改变默认图片和按下图片ID

    .. image:: image/自锁按钮/背景属性切图demo.png 
        :align: center
        :alt: 背景属性切图demo

|

自锁按钮互斥应用
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

.. image:: image/自锁按钮/互斥应用.png 
    :align: center
    :alt: 互斥应用

|

- 功能：三个自锁按钮控件之间实现单选功能，当一个控件按下时，改变其他控件的状态
- 原理：

    1.在互斥1控件的 ``按下事件`` 中编写脚本

    .. code-block::
        :linenos:
    
        bl4.val =0; //bl4设为弹起状态
        bl5.val =0; //bl5设为弹起状态

    2.在互斥2控件的 ``按下事件`` 中编写脚本

    .. code-block::
        :linenos:
    
        bl3.val =0; //bl3设为弹起状态
        bl5.val =0; //bl5设为弹起状态

    3.在互斥3控件的 ``按下事件`` 中编写脚本

    .. code-block::
        :linenos:
    
        bl3.val =0; //bl3设为弹起状态
        bl4.val =0; //bl4设为弹起状态