查看原文
其他

手把手教你使用QT绘图控件QCustomPlot绘制波形图

The following article is from 嵌入式从0到1 Author 小哈哥

摘要:很多小伙伴问如何把串口接受到的数据通过曲线显示出来,其实这是用一个叫做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();  语句完成重绘曲线。

发送串口数据

我们要想获取声音传感器的值,只需要上位机以十六进制的方式发送数据帧: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(01);

        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,获取本文测试工程源码。


End


推荐好文  点击蓝色字体即可跳转

【收藏】烂大街的ESP82666该咋玩
☞【鸡汤】一个普通人的大学四年
☞【干货】基于STM32的PS2遥控小车
☞【干货】手把手教你写一个安卓APP
☞【干货】手把手教你写单片机的指针
☞【干货】手把手教你写一个串口调试助手

欢迎转发、留言、点赞、分享感谢您的支持!

您可能也对以下帖子感兴趣

文章有问题?点此查看未经处理的缓存