什么是曲线控件?
![曲线控件如何使用?插图1 曲线控件如何使用?插图1](https://www.modbus.cn/wp-content/themes/module2/themer/assets/images/lazy.png)
曲线可以直观地看出数据变化情况,上升、下降等趋势,MCU采集的数据按顺序发送到屏幕,然后利用曲线控件将采样的数据点连成曲线显示出来,X轴是数据的采样点数,Y轴是数据采样值
适用范围:全系列
例程下载链接:《曲线控件应用》(点击跳转)
9.1 曲线控件属性
本章节重点介绍曲线控件的属性,属性窗口如下所示
![曲线控件如何使用?插图3 曲线控件如何使用?插图3](https://www.modbus.cn/wp-content/themes/module2/themer/assets/images/lazy.png)
采样点数
曲线在整个控件宽度范围,从左到右显示一轮的点数,如下所示
![曲线控件如何使用?插图5 曲线控件如何使用?插图5](https://www.modbus.cn/wp-content/themes/module2/themer/assets/images/lazy.png)
例如,把曲线宽度设置为480像素,采样点数设置为480个,1个像素点对应1个曲线采样数据。那么整个宽度的曲线显示完毕正好需要480个数据,当481个数据到来的时候,更新FIFO数据,曲线向右平移显示。如果曲线宽度为200像素,采样点数为201,整个控件宽度只能显示200个采样点,那么第201个曲线的数据点到来的时候屏幕上显示的曲线就会开始向右平移显示
采样深度
一个采样数据的占的字节。“1Byte”、“2Byte”可选,默认为1Byte
显示方向
曲线的显示方向,分为“水平”、“垂直”
水平显示,效果如下所示
![曲线控件如何使用?插图7 曲线控件如何使用?插图7](https://www.modbus.cn/wp-content/themes/module2/themer/assets/images/lazy.png)
垂直显示,效果如下所示
![曲线控件如何使用?插图9 曲线控件如何使用?插图9](https://www.modbus.cn/wp-content/themes/module2/themer/assets/images/lazy.png)
线条粗细
设置曲线的线条粗细,有1、2、3、4四种级别可选
缩放显示
开启缩放,设置好缩放的起始值、终止值后,根据这两个设置的值,曲线在这个值的范围中进行上下拉伸
假定我们设定起始值为0,终止值为255,那么曲线会在曲线控件的控件范围内等比例缩放到0至255之间,如下所示
![曲线控件如何使用?插图7 曲线控件如何使用?插图7](https://www.modbus.cn/wp-content/themes/module2/themer/assets/images/lazy.png)
假设曲线的高度为200,未开启缩放的正弦曲线,当Y轴方向的数值超过200后的数据则不会显示,如下所示
![曲线控件如何使用?插图11 曲线控件如何使用?插图11](https://www.modbus.cn/wp-content/themes/module2/themer/assets/images/lazy.png)
通道值
最多可以预设8个通道。每个通道可以设置不同的颜色,颜色的设置有助于区分不同的通道,可以以HSB模式和RGB模式设置颜色,如下所示
![曲线控件如何使用?插图13 曲线控件如何使用?插图13](https://www.modbus.cn/wp-content/themes/module2/themer/assets/images/lazy.png)
9.2 曲线控件应用
【曲线控件】画面,介绍用户设备和串口屏通讯时,用户设备向串口屏发送指令,显示实时曲线
画面配置
在【曲线控件】画面的“背景图片”导入相应的美工图片。在该画面中添加曲线控件和按钮控件,如下所示
![曲线控件如何使用?插图15 曲线控件如何使用?插图15](https://www.modbus.cn/wp-content/themes/module2/themer/assets/images/lazy.png)
属性配置
曲线属性配置
设置【采样点数】为“466”、【采样深度】为“1 Byte”、【显示方向】为“水平”、【线条粗细】“1”、【缩放显示】“是”、【曲线底部值】“0”、【曲线顶部值】“255”、【通道数】“1”,配置如下所示
![曲线控件如何使用?插图17 曲线控件如何使用?插图17](https://www.modbus.cn/wp-content/themes/module2/themer/assets/images/lazy.png)
按钮属性配置
正弦波按钮配置方法:打开【指令助手】,选择指令助手中左侧导航栏中的【曲线控件】,然后点击窗口中点击生成正弦波指令,把指令添加到按钮控件的对内指令中,操作如下所示。锯齿波按钮配置同理
![曲线控件如何使用?插图19 曲线控件如何使用?插图19](https://www.modbus.cn/wp-content/themes/module2/themer/assets/images/lazy.png)
运行预览
运行虚拟屏,点击画面中的正弦波按钮,画面如下所示
![曲线控件如何使用?插图21 曲线控件如何使用?插图21](https://www.modbus.cn/wp-content/themes/module2/themer/assets/images/lazy.png)
外部MCU控制
参考开发包keil程序中的him.dever.h文件函数声明以及him.dever.c文件中的定义。例如用户需实现“曲线显示”,则直接调用添加曲线数据的函数GraphChannelDataAdd( )即可,代码如下所示
/************************************************************************
** 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);
}