曲线控件
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
用途：显示波形。单片机发送高度值（范围0-255）数据，即可从左往右或从右往左绘制波形。一个曲线控件支持4个通道的波形绘制。

**注意：** 发送的高度值不是像素高度。如：曲线控件像素高度为400，要想显示一个点在最高点400处，则发送的值 value = 255，
显示在最低处，则value = 0。

**发送指令：**  :ref:`cadd` 和 :ref:`caddt`

属性
---------------------------------
.. image:: image/曲线/曲线控件属性.png 
    :align: center
    :alt: 曲线控件属性

|

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

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

**背景属性 :**  参考控件概念- :ref:`背景属性`

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

**网格属性 :**  
  
.. image:: image/曲线/曲线控件网格属性.png 
    :align: center
    :alt: 曲线控件网格属性
 
|

    + 通道数量(ch)：通道数量,范围:1-4(只读)

    - 通道0颜色(color0)：通道0颜色(读写)

    + 通道1颜色(color1)：通道1颜色(读写)

    - 曲线线条宽度(wid)：曲线线条宽度(单位像素),范围:1-10(读写)

    + 水平分割线数量(hor)：水平分割线数量,范围:2-65535，包含两条边框，所以最小为2(读写)

    - 垂直分割线数量(ver)：垂直分割线数量,范围:2-65535，包含两条边框，所以最小为2(读写)

    + 网格颜色(gcolor)：网格线颜色(读写)

    - 网格类型(gtype)：网格线类型:0-实线 1-虚线(读写)

    + 网格透明度(gopa)：网格线透明度,范围:0-255,255为不透明(读写)

**特有属性 :**  
  
.. image:: image/曲线/曲线控件特有属性.png 
    :align: center
    :alt: 曲线控件特有属性
 
|

    + 曲线方向(dir)：曲线方向:
      0-从左向右平移,左侧添加新点,右侧移除旧点
      1-从右向左平移,右侧添加新点,左侧移除旧点
      2-心电图模式,左侧不动,右侧添加新点
      (只读)

    - 横坐标显示点数(xnum)：横坐标显示点数,范围:10-1024(读写)

    + 水平缩放值(xzoom)：水平缩放值,范围:10-200,为100时,不缩放(读写)

    - 垂直缩放值(yzoom)：垂直缩放值,范围:10-200,为100时,不缩放(读写)



    横坐标显示点数：
        默认等于控件宽度，设置越大，绘制满控件区域越久，看起来会有堆叠的现象,如下图：

        .. image:: image/曲线/显示点数.png 
            :align: center
            :alt: 显示点数
    
        |

    水平缩放：
        - 不缩放：即设置了多少点数控件区域内就显示多少点数。
        
        + 100-200放大：显示区域不变，点数表少（点间隔大了）。点数 = ((xzoom - 100) / 10) * xnum。 xzoom = 200时，显示点数是原来的1/10。
        
        .. image:: image/曲线/缩放200.png 
            :align: center
            :alt: 缩放200
    
        |

        - 10-100缩小： 显示区域缩小，点数为xnum。显示宽度 =  (xzoom / 100) * w 。xzoom = 10时，绘图区域只有原来的1/10，看起来堆叠严重。
    
        .. image:: image/曲线/缩小区域.png 
            :align: center
            :alt: 缩小区域
    
        |

    垂直缩放：
        - 不缩放：显示高度 y = (value / 255) * h，value为指令发送要显示的值，h为控件高度。

        + 100-200放大：拉伸波形高度。原理：控件内部把值最大范围255缩小，Vmax = (yzoom - 100) * 255 / 100。
        
        .. image:: image/曲线/垂直拉伸.png 
            :align: center
            :alt: 垂直拉伸
    
        |

        - 10-100：缩小波形高度。原理：控件内部把值最大范围255放大，Vmax = (100 /  yzoom) * 255。

        .. image:: image/曲线/垂直缩小.png 
            :align: center
            :alt: 垂直缩小
    
        |

|

.. hint:: 
    建议结合下方的演示工程查看和理解！

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

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

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

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

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

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

`点击下载演示工程 <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: 控件展示

|

- 功能：定时器发送随机数显示波形。
- 实现原理：

    1. 添加控件：曲线控件c0、滑块控件sl0(水平缩放)、滑块控件sl1(垂直缩放)、定时器控件tm0。

    2. 页面控件的 ``页面初始化前`` 事件编写

    ::

        sl0.val = c0.xzoom;  // 给滑块赋默认值，值为曲线控件的水平缩放值
        sl1.val = c0.yzoom;  // 赋曲线控件垂直缩放值

        randset(0,100); // 设定系统变量sys.rand（随机数变量）的范围0-100

    1. 定时器控件tm0的 ``定时事件`` 事件编写

    ::

        int value = sys.rand * 255 / 100 ; // 100表示sys.rand的范围值，255是曲线控件高度范围值
        cadd(c0,0,value);

    1. 滑块控件sl0(水平缩放)设置最小、最大值分别为10和200，即对应曲线控件的水平缩放值范围。在 ``滑动事件`` 事件编写

    ::

        c0.xzoom = sl0.val;

    1. 滑块控件sl1(垂直缩放)设置最小、最大值分别为10和200，即对应曲线控件的垂直缩放值范围。在 ``滑动事件`` 事件编写

    ::

        c0.yzoom = sl1.val;

|
|
|
|
|
|
|