前两篇文章介绍了Arduino+C#实现采集温湿度、火焰传感器检测值及烟雾传感器检测值,将检测数据保存到数据库,并将数据在程序界面中显示。不过数据是以数据集合的方式显示,很不直观,本文在前文的基础上,利用微软自带的chart控件,以折线图方式实时显示从Arduino上传的检测值。
chart控件位于System.Windows.Forms.DataVisualization.Charting命名空间,它可以显示柱状图、折线图等多种图形,还能在一个区域中显示多类数据的图形。本文使用chart控件分别显示湿度、温度、火焰检测值及烟雾检测值。
Charting控件的数据源有多种方式,可以从数据库读取数据,也可以绑定集合对象,还可以将数据添加到chart控件的数据集中,详细的介绍请查看参考文献3。本文中采用将数据添加到chart控件的数据集中的方式设置图形数据。
首先是要初始化chart控件,基于参考文献1中的代码,初始化chart控件中的四类曲线信息,代码如下所示:
private static string[] DATATYPE = { "湿度", "温度","火焰值","烟雾值" };
private void InitChart()
{
chtData.DataSource = environmentRecordBindingSource.List;
chtData.ChartAreas.Clear();
ChartArea chartarea = new ChartArea("数据趋势图");
chtData.ChartAreas.Add(chartarea);
chtData.Series.Clear();
for (int i = 0; i < 4; i++)
{
Series series = new Series(DATATYPE[i]);
chtData.Series.Add(series);
series.ChartArea = "数据趋势图";
series.ChartType = SeriesChartType.Spline;
series.MarkerBorderWidth = 2;
series.MarkerSize = 4;
series.MarkerStyle = MarkerStyle.Diamond;
series.ToolTip = DATATYPE[i] + "#VAL \r\n #AXISLABEL";
}
}
Arduino周期性地向上位机发送检测值,上位机程序在串口的DataReceived事件中解析并存储检测值。创建向chart控件添加数据的函数,然后在DataReceived事件处理函数最后调用该函数向chart控件添加新的数据。
private void AddData(EnvironmentRecord er)
{
chtData.Series[0].Points.AddY(er.Humidity);
chtData.Series[1].Points.AddY(er.Temperature);
chtData.Series[2].Points.AddY(er.FlameValue);
chtData.Series[3].Points.AddY(er.MQValue);
}
private void UpdateSerialPortData(string rawData)
{
if (this.InvokeRequired)
{
this.BeginInvoke(new UpdateSerialPortDataHandler(UpdateSerialPortData), rawData);
}
else
{
EnvironmentRecord er = new EnvironmentRecord();
...
AddData(er);
}
}
程序的运行效果如下所示。下图为上位机接收到8个数据时的折线图,再下一个图为接收到20多个数据时的折线图。
程序运行过程中,用可燃气体(吹灭后的打火机)进行测试,从下图可以看出,烟雾传感器的检测值快速上升,达到阈值后,窗口开始显示可燃气体警告。
接着用打火机打火,从下图可以看出,火焰传感器的检测值呈断崖式下降态势,同时窗口中也出现火焰警告。
程序的代码放在了GitHub上,地址为:https://github.com/guochao2299/EnvironmentMonitor/tree/20210619
到目前为止,上位机都是在windows系统进行开发和测试的,后续会尝试在Ubuntu中进行上位机程序的开发和测试。
参考文献:
[1]https://blog.csdn.net/qq_42237381/article/details/83348833?utm_medium=distribute.pc_relevant.none-task-blog-baidujs_title-0&spm=1001.2101.3001.4242
[2]https://www.cnblogs.com/mazhenyu/p/9498439.html
[3]https://blog.csdn.net/daisy0923/article/details/73325681/