曲线控件

什么是曲线控件？

AO8科讯网

曲线可以直观地看出数据变化情况，上升、下降等趋势，MCU采集的数据按顺序发送到屏幕，然后利用曲线控件将采样的数据点连成曲线显示出来，X轴是数据的采样点数，Y轴是数据采样值AO8科讯网

9.1 曲线控件属性

本章节重点介绍曲线控件的属性，属性窗口如下所示AO8科讯网

AO8科讯网

采样点数

曲线在整个控件宽度范围，从左到右显示一轮的点数，如下所示AO8科讯网

AO8科讯网

例如，把曲线宽度设置为480像素，采样点数设置为480个，1个像素点对应1个曲线采样数据。那么整个宽度的曲线显示完毕正好需要480个数据，当481个数据到来的时候，更新FIFO数据，曲线向右平移显示。如果曲线宽度为200像素，采样点数为201，整个控件宽度只能显示200个采样点，那么第201个曲线的数据点到来的时候屏幕上显示的曲线就会开始向右平移显示AO8科讯网

采样深度

一个采样数据的占的字节。“1Byte”、“2Byte”可选，默认为1ByteAO8科讯网

显示方向

曲线的显示方向，分为“水平”、“垂直”AO8科讯网

水平显示，效果如下所示AO8科讯网

AO8科讯网

垂直显示，效果如下所示AO8科讯网

AO8科讯网

线条粗细

设置曲线的线条粗细，有1、2、3、4四种级别可选AO8科讯网

缩放显示

开启缩放，设置好缩放的起始值、终止值后，根据这两个设置的值，曲线在这个值的范围中进行上下拉伸AO8科讯网

假定我们设定起始值为0，终止值为255，那么曲线会在曲线控件的控件范围内等比例缩放到0至255之间，如下所示AO8科讯网

AO8科讯网

假设曲线的高度为200，未开启缩放的正弦曲线，当Y轴方向的数值超过200后的数据则不会显示，如下所示AO8科讯网

AO8科讯网

通道值

最多可以预设8个通道。每个通道可以设置不同的颜色，颜色的设置有助于区分不同的通道，可以以HSB模式和RGB模式设置颜色，如下所示AO8科讯网

AO8科讯网

9.2 曲线控件应用

【曲线控件】画面，介绍用户设备和串口屏通讯时，用户设备向串口屏发送指令，显示实时曲线AO8科讯网

画面配置

在【曲线控件】画面的“背景图片”导入相应的美工图片。在该画面中添加曲线控件和按钮控件，如下所示AO8科讯网

AO8科讯网

属性配置

曲线属性配置

设置【采样点数】为“466”、【采样深度】为“1 Byte”、【显示方向】为“水平”、【线条粗细】“1”、【缩放显示】“是”、【曲线底部值】“0”、【曲线顶部值】“255”、【通道数】“1”，配置如下所示AO8科讯网

AO8科讯网

按钮属性配置

正弦波按钮配置方法：打开【指令助手】，选择指令助手中左侧导航栏中的【曲线控件】，然后点击窗口中点击生成正弦波指令，把指令添加到按钮控件的对内指令中，操作如下所示。锯齿波按钮配置同理AO8科讯网

AO8科讯网

运行预览

运行虚拟屏，点击画面中的正弦波按钮，画面如下所示AO8科讯网

AO8科讯网

外部MCU控制

参考开发包keil程序中的him.dever.h文件函数声明以及him.dever.c文件中的定义。例如用户需实现“曲线显示”，则直接调用添加曲线数据的函数GraphChannelDataAdd( )即可，代码如下所示AO8科讯网

/************************************************************************
** Function name:    void GraphChannelDataAdd(uint16 screen_id,
**                                            uint16 control_id,
**                                            uchar channel
**                                            uint8 *pData,
**                                            uint16 nDataLen);
** Descriptions    :    曲线控件-添加数据
** input parameters:    screen_id 画面ID
**                      control_id 控件ID
**                      channel 通道号
**                      pData 曲线数据
**                      nDataLen 数据个数
** output parameters: 无
** Returned value   : 无
************************************************************************/
{
    ......
    //添加曲线数据一共256个，请参考源代码
    uint8 sin[256]={};

    //添加数据到曲线 一次两个数据
    GraphChannelDataAdd(0,1,0,&sin[num],2); 

}