什么是历史曲线控件?

通过历史曲线控件来记录某些数据在一段时间内的变化路径和曲线。本例程中介绍历史曲线控件常见的应用,结合工程中的画面介绍每一个应用的配置,常见的应用如下所示
- 记录温度的变化实现在一段时间内,外部MCU通过传感器采集到的温度数据发送给屏幕,利用历史曲线控件在屏幕上显示出来
适用范围:全系列
例程下载链接:《历史曲线控件应用》(点击跳转)
14.1 历史曲线属性
本章节重点介绍历史曲线控件的属性,属性窗口如下所示

采样点数
单个通道在整个控件宽度范围内,总采用点数,若采样点数超过该值,则通道只保存最近的采样点。
使能采样
设置初始化时的状态是否允许采样,也可以通过指令控制。
数据格式
采样点的数据格式,发送数据给历史曲线时,采样值的高字节在前,低字节在后,可设置格式如下所示

- UINT8:无符号,单字节整数
- INT:有符号,单字节整数
- UINT16:无符号,双字节整数
- INT16:有符号,双字节整数
- UINT32:无符号,四字节整数
- INT32:有符号,四字节整数
- FLOAT:单精度浮点数
注:数据记录控件与历史曲线共用存储块在128K flash里面,开启数据存储时,应设置存储地址
数据存储地址计算:
数据控件存储大小 = 最大记录数*单条记录大小+24 (单位:字节)
历史曲线存储大小 = 通道个数*采样点数+30 (单位: 字节)
采样周期
采样数据的时间间隔,单位为:秒。
数据存储
设置采样数据是否存储到屏幕的用户flash区。
最大值
采样值轴方向上顶端显示的最大值,默认为100。
最小值
采样值轴方向上底端显示的最小值,默认为0。
时间轴宽度
屏幕水平方向范围内的采样点数,默认为100,如下所示

曲线宽度
曲线线条的宽度,可选1、2、3、4级。
通道数
控件上显示的曲线通道数,一个控件最多可选8个通道,且每个通道的颜色可单独设置,如下所示

字体
显示数值和时间的字体大小。
显示边框
可设置是否显示边框,显示边框时可设置边框的宽度(可设置“1”和“2”两个等级)和颜色。
显示背景
可设置控件背景颜色、水平延伸、垂直延伸,可选择“是”或“否”。设置显示背景→是,水平延伸→35,垂直延伸→35,如下所示

显示滚动条
可选择“是”或“否”,当开启滚动条,设置滚动条属性,运行虚拟屏,滚动条显示在上方,可以拖动查看所有时间点的曲线,如下所示

网格颜色
设置网格的颜色,支持单色设置

文字颜色
设置文字的颜色显示,包括Y轴的值、X轴的时间、以及右上角的日期
显示时间刻度
可选“否”、“下边显示”或“上边显示”,(开启显示时,可设置刻度数、是否显示网格、是否显示日期、是否显示时间)
显示垂直刻度
可设置是否显示垂直方向上的刻度值,显示垂直刻度时,可以设置刻度数和是否显示网格线
14.2 历史曲线功能
【历史曲线控件】画面,介绍用户如何配置历史曲线控件的基本属性和使用。
画面配置
在【历史曲线控件】画面的“背景图片”导入相应的美工图片。在该画面中添加历史曲线控件,如下所示

属性配置
历史曲线控件:设置【字体】为【ASC_CHS_16】、显示时间轴的【刻度数】为“4”,显示垂直刻度的【刻度数】为“5”,其他为默认配置,配置如下所示

运行预览
运行虚拟屏,VisualTFT软件和虚拟屏用“虚拟串口”建立联机,打开指令助手,左侧导航栏选择【历史曲线】,设置“设置采样值”区域的指令参数。如例程中,设置画面ID0、控件1、数据类型为“UINT8”,通道数为“1”的采样值为“77”。显示效果如下所示

外部MCU控制
参考开发包keil程序中的him.dever.h文件函数声明以及him.dever.c文件中的定义。
MCU设置采样值
利用MCU来实现历史曲线的采样通道数,数据类型和采样数值的设定。例如用户需实现例程中【历史曲线控件】的采样数据类型为“UINT8”、通道数为“1”,设置采样值为“77”,直接调用历史曲线控件设置函数HistoryGraph_SetValueInt8 ( )即可,代码如下所示。
/************************************************************************
** Function name: void HistoryGraph_SetValueInt8 (uint16 screen_id,
** uint16 control_id,
** uint8 *value,
** uint8 channel);
** Descriptions : 设置历史曲线采样值
** input parameters: screen_id: 画面ID
** control_id: 控件ID
** *value: 设置的采样值
** channel 通道数
** output parameters: 无
** Returned value : 无
************************************************************************/
{
......
HistoryGraph_SetValueInt8(0,1,77,1);//画面0,控件1,通道1的采样值为77
......
}
MCU控制【历史曲线控件】的禁止和使能采样。
例如用户需实现当前画面的【历史曲线控件】的禁止采样和使能采样状态,直接调用历史曲线控件禁使能函数HistoryGraph_EnableSampling ( )即可,代码如下所示。
/************************************************************************
** Function name: void HistoryGraph_EnableSampling (uint16 screen_id,
** uint16 control_id,
** uint8 enable);
** Descriptions : 设置历史曲线控件的采样禁使能
** input parameters: screen_id : 画面ID
** control_id: 控件ID
** value : 禁止或使能(0代表禁止,1代表使能)
** output parameters: 无
** Returned value : 无
************************************************************************/
{
......
HistoryGraph_EnableSampling (0,1,1);//画面0,控件1的历史曲线控件使能采样
......
}