关键词:
摘要:很多小伙伴问如何把串口接受到的数据通过曲线显示出来,其实这是用一个叫做QCustomPlot的控件,这个控件不是QT自带的,需要自己下载加入,今天介绍一下这个控件的使用方法,并附源码。
QCustomPlot简介
QCustomPlot是开源的Qt的第三方绘图库,QCustomPlot的源码只有两个文件,可以很方便的添加到自己的工程中。
QCustomPlot库很强大,利用他可以轻松实现柱状图、折线图、多轴、日期轴、金融图等,在其基础上,可以轻松实现曲线的平移、放大、取值、标记等功能,利用其预留的接口,自己可以派生类,随意定制自己的功能。
QCustomPlot库效率高、移植方便,可轻松实现二次开发,推荐使用。
控件源码获取
QCustomPlot
下载地址:
https://www.qcustomplot.com/index.php/download
获取的压缩文件解压之后内容如下:
里面包括文档、示例程序、更改日志、GPL授权及该绘图类的源文件。
添加帮助文档
Qt Creator中有一个很好的功能,如果不知道类或对象有什么函数,选择名称,按 F1 键会直接进入该类的帮助文档,查找文档特别方便。
为了编程的过程中,可以及时查看QCustomPlot类中各个函数的定义,可以把该曲线类的帮助文档也添加到Qt Creator中。
在Qt Creator的菜单:工具–>选项–>帮助–>文档–>添加qcustomplot\\documentation\\qcustomplot.qch
文件。
帮助文档添加完毕之后,我们就可以方便的查看各个类、函数的使用方法了。
当QCustomPlot中的哪个类或函数不清楚用法,我们可以将鼠标放到(或悬浮)某个类或函数上面,然后按F1键,就能调出该函数的详细使用说明。
Qt中的其他类或者函数,也可以按F1键获取帮助文档。
添加现有文件
先将“qcustomplot.h
”和“qcustomplot.cpp
”两个文件拷贝到工程所在目录下,然后用Qt Creator
打开工程CommDemo.pro
。
注意:先打开工程,后拷贝文件亦可。
在工程名称CommDemo
上右键弹出菜单中,选择“添加现有文件”,在弹出的对话框中,选择文件“qcustomplot.h
”、qcustomplot.cpp
”,点击“打开”按钮,这样,qcustomplot
的源文件就被添加到了工程中。
添加必要支持库
因为QCustomPlot中支持打印,所以需要在.pro
文件中添加printsupport
。
引用头文件
在mainwindow.h
文件中,引用头文件#include "qcustomplot.h"
。
限定曲线显示的区域
设计软件界面的时候,首先要想好我们在哪个位置显示曲线。
具体实现步骤如下:
1、进入图形设计界面,添加Widget控件,利用Widget控件对曲线的显示区域进行占位。
2、在所添加的Widget区域点击右键,选择“提升为”按钮,提升类名称输入“QCustomPlot”,点击添加。
QCustomPlot是一个绘图的类,它继承于Widget,界面中的Widget类提升为QCustomPlot才能够绘图。
3、去掉原有的TableView,添加一个按钮用于测试,编译并运行,软件界面如下:
至此,QCustomPlot就移植成功了,是不是很简单?
显示曲线
步骤:
1、首先将上面提升为QCustomPlot
类的容器界面的对象widget重命名为myCustomPlot
,下面对该曲线控件的操作,只需要对对此变量名操作即可。
命名规则:符合自己习惯,方便记忆即可。
2、在主窗口MainWindow构造函数中添加如下代码,即可定义一条曲线。
MainWindow::MainWindow(QWidget *parent)
: QMainWindow(parent)
, ui(new Ui::MainWindow)
ui->setupUi(this);
//原有的串口初始化代码,略
//...
//添加一条曲线
//向绘图区域QCustomPlot(从widget提升来的)添加一条曲线
ui->myCustomPlot->addGraph();
//设置画笔
ui->myCustomPlot->graph(0)->setPen(QPen(Qt::blue));
//设置画刷,曲线和X轴围成面积的颜色
ui->myCustomPlot->graph(0)->setBrush(QBrush(QColor(255,255,0)));
//设置右上角图形标注名称
ui->myCustomPlot->graph(0)->setName("曲线");
//设置坐标轴标签名称
ui->myCustomPlot->xAxis->setLabel("x");
ui->myCustomPlot->yAxis->setLabel("y");
//设置坐标轴显示范围,否则我们只能看到默认的范围
ui->myCustomPlot->xAxis->setRange(0,60);
ui->myCustomPlot->yAxis->setRange(0,5000);
QCustomPlot中的每一个曲线是一个Graph对象,要显示曲线,首先要添加一条曲线:ui->myCustomPlot->addGraph(); 。
凡是跟显示数据有关的就对Graph进行操作或调用Graph对象提供的方法。
朋友们,思考一下,为什么Y轴的上限我初始化为5000?大家可以在留言区说出你的想法哈。
3、在头文件mainwindow.h中定义两个QVector数组,用于存放横轴和纵轴的数据。
QVector<double> arrX;
QVector<double> arrY;
4、每执行一次测试按钮的槽函数,就会向曲线中添加一个虚拟点,具体实现如下代码所示:
void MainWindow::on_btnTest_clicked()
//生成模拟数据
arrX.append(arrX.count());
arrY.append(qrand()%4096);
//传入数据,setData的两个参数类型为double
ui->myCustomPlot->graph(0)->setData(arrX,arrY);
//曲线重绘
ui->myCustomPlot->replot();
到目前为止,即实现了曲线的显示和向曲线中添加数据点的操作,具体效果演示如下:
下面我们要做的就是利用串口通信,获取声音传感器的数据,然后将声音的强度保存到数组arrY中,随后调用 ui->myCustomPlot->replot(); 语句完成重绘曲线。
发送串口数据
根据上一篇网文,我们知道我们今天要编写的Qt软件,相当于上一篇网文中的ModScan32软件。
我们要想获取声音传感器的值,只需要上位机以十六进制的方式发送数据帧:01 04 00 00 00 01 31 CA
。
STM32端收到串口指令之后,解析此数据帧,将当前的声音传感器的值封装数据帧之后,发送给上位机。
先用串口助手验证一下,确保硬件没有问题:
发送数据:01 04 00 00 00 01 31 CA
,STM32端能够返回预期的数据帧:01 04 02 XX XX XX XX
,证明STM32端是没有问题的,下面我们来修改CommDemo这个例程,让其可以正确的发送、接收和解析串口数据。
由于串口发送、接收功能,之前我们已经实现了,我们先测试一下,看看发送对应的串口数据,我们是否可以接收到正确的数据帧。
由上图我们可以看出来,数据:01 04 00 00 00 01 31 CA
发送之后,收到了满足预期的数据帧:01 04 02 00 15 78 FF
,证明串口通信部分代码是没问题的。
注意:
- 发送数据之前要先打开串口,并且串口的波特率要跟硬件STM32的串口波特率一致,即115200。
- 为了方便查看,记得勾选Hex发送和Hex显示。
解析串口数据
解析STM32发送过来的结果数据。
void MainWindow::receiveInfo()
QByteArray info = m_serialPort->readAll();
QString strReceiveData = "";
if(ui->checkBoxHexReceive->isChecked())
QByteArray hexData = info.toHex();
strReceiveData = hexData.toUpper();
for(int i=0; i<strReceiveData.size(); i+=2+1)
strReceiveData.insert(i, QLatin1String(" "));
strReceiveData.remove(0, 1);
ui->txtReceiveData->append(strReceiveData);
//解析接收到的串口数据
uint8_t pCharData[15] = 0x00 ;
uint8_t crc16Low, crc16High;
for (int i=0;i<info.size();i++)
pCharData[i] = static_cast<uint8_t>(info.at(i));
uint16_t crc16 = chkcrc(pCharData, 5);
crc16Low = static_cast<uint8_t>(crc16 & 0xff); //校验位低8位
crc16High = static_cast<uint8_t>((crc16 >> 8) & 0xff); //校验位高8位
if(crc16High == static_cast<uint8_t>(info.at(5)) && crc16Low == static_cast<uint8_t>(info.at(6))) //(1)
if(static_cast<uint8_t>(info.at(0)) == 0x01 && static_cast<uint8_t>(info.at(1) == 0x04)) //(2)
//将声音传感器的数据添加至曲线中
uint16_t nSoundIntensity = static_cast<uint8_t>(info.at(3))*256 + static_cast<uint8_t>(info.at(4)); //(3)
arrX.append(arrX.count());
arrY.append(nSoundIntensity);
//传入数据,setData的两个参数类型为double
ui->myCustomPlot->graph(0)->setData(arrX,arrY);
//曲线重绘
ui->myCustomPlot->replot();
else
strReceiveData = info;
//避免中文乱码
QTextCodec *tc = QTextCodec::codecForName("GBK");
QString tmpQStr = tc->toUnicode(info);
ui->txtReceiveData->append(tmpQStr);
解析:
1、首先要对接收到的一帧数据进行CRC校验,然后将计算出来的校验位和收到数据的校验位比对,一致则说明数据接收正确。
2、判断接收到的数据帧的地址位和功能码是否满足预期。
3、接收数据帧的第4、第5两个字节为数据位,按自定义协议对这两个字节进行组合,进而求得声音传感器的强度值。
注意:上面解析中1、2、3条说明,跟上面代码中的注释中的1、2、3所在行的代码相对应。
结果测试
在声音传感器旁播放音乐(目的:制造点声音),点击一次发送按钮,将获得一次声音强度的数据,将解析后的声音强度添加至曲线中,绘制的曲线如下图所示:
好了,今天的分享就到这里,曲线的绘制已经分享过了,后面曲线的平移、放大、缩小、复原、曲线上点的显示、辅助线的绘制等内容,各位根据需要自行添加哈。
源码获取
公众号后台回复:QCustomPlot,获取本文测试工程源码。
qt与mfc绘图技术比较
...这两个都是MFC绘图控件的经典(另外,在Qt中还有QwtPlot和QCustomPlot两大神器)。许多人问如何绘制动态变化的曲线,为此专门写下这篇文章。C++GUI绘图控件目录MFC(VC)VS2010使用T 查看详情
teechart绘图控件开发技术
...控件-(Hight-SpeedCharting)绘制动态曲线Qtqt超强精美绘图控件-QCustomPlot一览qt超强绘图控件qwt-安装及配置TeeChart是个 查看详情
qt绘图技术qcustomplot-超强超小巧的qt绘图控件
QCustomPlot-超强超小巧的qt绘图控件 2016-10-2216:03:25| 分类: QT|官方网站:http://www.qcustomplot.com/1.0下载地址:http://download.csdn.net/detail/czyt1988/5986701 下载LOFTER我的照片书 &n 查看详情
QCustomPlot 海量数据绘图
】QCustomPlot海量数据绘图【英文标题】:QCustomPlotHugeAmountofDataPlotting【发布时间】:2017-03-1123:45:23【问题描述】:我正在尝试使用qcustomplot类在我的QtGui程序上绘制一些串行数据。当我尝试绘制100个数据/秒的低采样频率数据时,我... 查看详情
qt使用qcustomplot绘制柱状图
..., ui(newUi::ClgBar) ui->setupUi(this); QCustomPlot* m_rectPlot=newQCustomPlot; ui->verticalLayout->addWidget(m_rectPlot); m_rectPlot->xAxis->setLabel("参数"); m_rectPlot->yAxis->setLabel("个... 查看详情
qtvs2017+qt使用qcustomplot绘图(代码片段)
文章目录1.前言2.下载QCustomPlot的源码3.将QCustomPlot添加到QT项目4.移植QCustomPlotDemo中的plots5.移植过程出现的问题5.测试demo完整工程1.前言QCustomPlot是一个超强超小巧的qt绘图类,非常漂亮,非常易用,只需要加入一个qcusto... 查看详情
qtvs2017+qt使用qcustomplot绘图(代码片段)
文章目录1.前言2.下载QCustomPlot的源码3.将QCustomPlot添加到QT项目4.移植QCustomPlotDemo中的plots5.移植过程出现的问题5.测试demo完整工程1.前言QCustomPlot是一个超强超小巧的qt绘图类,非常漂亮,非常易用,只需要加入一个qcusto... 查看详情
c#使用chart绘制实时折线图,波形图叠加
下载:https://download.csdn.net/download/mao0514/21044527用VS自带的Chart图表控件,制作实时动态显示的折线图,和波形图涉及知识点:Chart控件,功能强大,可以绘制柱状图,折线图,波形图,饼状图,大大简化了对图的开发与定制。Chart... 查看详情
qt绘图插件qcustomplot下载安装配置使用
一、配置QCustomPlot官方下载地址:http://www.qcustomplot.com/index.php/download650)this.width=650;"src="http://img.blog.csdn.net/20151010144651708?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fonts 查看详情
绘制音频的波形图(代码片段)
...以把音频文件拉到AdobeAudition或其它音频分析软件中,再使用它绘制出来的特征图。那有没有办法自己写代码来绘制,并做一些灵活的控制呢?本文介绍通过python的matplotlib.pyplot来绘制波形图。pyplot是一个强大的绘图库,小程这里... 查看详情
qt编写自定义控件25-自定义qcustomplot(代码片段)
...上次在写大屏数据可视化电子看板系统时候,提到过改造QCustomPlot来实现柱状分组图、横向柱状图、横向分组图、鼠标悬停提示等。这次单独列出来描述,有很多人疑问为啥不用QChart,或者echart等形式,其实这两种方式我都尝试... 查看详情
qt音频数据采集并绘制波形图
1、界面:2、使用到的QT相关类介绍:(1)、QAudioRecorder:音频录制类,其父类为:QMediaRecorder。录制的音频数据可以直接写入到文件中,不需要操作QIODevice进行设备的读写。录制的音频数据除包含原始数据,还包含了数据头信息... 查看详情
QCustomPlot 在绘图调整大小期间出现错误
】QCustomPlot在绘图调整大小期间出现错误【英文标题】:QCustomPlotmisplotsduringplotresize【发布时间】:2015-09-0623:34:26【问题描述】:我有一个QCustomPlot正在绘制传入数据。这些图看起来很棒,但是当我突然调整窗口大小或缩放或拖动... 查看详情
QT 中的波形图(逻辑中的功能问题)
...题描述】:QT中的波形图..逻辑中存在一些功能问题。我使用QPainter在逻辑上尝试了一个波形图。波形图绘制得很完美,但是画了一条线。任何人都帮我解决了这个问题。//dialog.cpp#include"dialog.h"#include"ui_d 查看详情
QCustomPlot 重新绘制 QCPLayer
】QCustomPlot重新绘制QCPLayer【英文标题】:QCustomPlotreplotQCPLayer【发布时间】:2018-03-2516:03:44【问题描述】:我正在尝试弄清楚如何使用QCPLayer仅重新绘制图中的某些项目。qcustomplotdocumentation声明如下:如果你经常需要调用一个完... 查看详情
Qt5 QCustomPlot。实时大图
】Qt5QCustomPlot。实时大图【英文标题】:Qt5QCustomPlot.Largegraphinrealtime【发布时间】:2015-12-0913:00:07【问题描述】:我目前正在开发一个实时绘制来自ADC的数据的应用程序。在某些情况下,我必须绘制大约150k点,这需要一些时间。... 查看详情
qtchart-qt官方绘图库安装与使用
...线性绘图控件有大名鼎鼎的Qwt,ChartDirector,小巧玲珑的QCustomPlot,当然还有自家的QtChart。长久以来QtChart在Qt家族里一直是收费的模块,只有商业版才可以使用,但Qt5.7之后将开放其权限,可参见:Qt5.7亮瞎眼的更新。下面将介绍... 查看详情
如何有效地使用 QCustomPlot 绘制大型时间序列?
】如何有效地使用QCustomPlot绘制大型时间序列?【英文标题】:HowtoplotlargetimeserieswithQCustomPlotefficiently?【发布时间】:2014-12-1107:44:52【问题描述】:我目前正在使用QCustomPlot在Qt中绘制数字信号,但似乎当样本数大于10000000时,操... 查看详情