QT qwt绘制实时动态曲线demo

qwt插件是一个绘图插件，提供了非常强大的常用的ui控件，这里我需要用到该插件在树莓派3B+绘制一个实时动态的曲线，用于绘制当前采集器的温湿度环境曲线。

关于如何在树莓派上安装qwt的教程，请参考我前面写的博文：https://blog.csdn.net/zz531987464/article/details/83786035

1.demo.pro

首先在编译配置文件中将qwt的库添加进工程中

树莓派工程的编译配置文件：

INCLUDEPATH += /home/galaxy/raspi/sysroot/usr/local/qwt-6.1.3/include
LIBS += -L/home/galaxy/raspi/sysroot/usr/local/qwt-6.1.3/lib -lqwt

要在ubuntu上运行该工程，只需要将链接库和头文件修改为

INCLUDEPATH += /usr/local/qwt-6.1.3/include
LIBS += -L/usr/local/qwt-6.1.3/lib -lqwt

2.widget.h

#include <qmath.h>
#include <qwt_plot.h>
#include <qwt_plot_curve.h>
#include <qwt_plot_magnifier.h>
#include <qwt_plot_panner.h>
#include <qwt_legend.h>
#include <qwt_point_data.h>
#include <QTimer>
#include <QDateTime>
#include <qwt_plot_grid.h>
.....
.....
.....
private slots:
    void timerUpdate();

private:
    Ui::Widget *ui;

    QwtPlotCurve *curve;
    QwtPlotCurve *curve2;

    //X轴
    double time[8] = { 0, 1, 2, 3, 4, 5, 6, 7};
    //Y轴
    double val[8] = {0};
    double val2[8] = {0};

3.widget.cpp

Widget::Widget(QWidget *parent) :
    QWidget(parent),
    ui(new Ui::Widget)
{
    ui->setupUi(this);
    ui->qwtPlot->setTitle("T-H"); // 设置曲线图标题名称
    //ui->qwtPlot->resize(640,400); //widget中定义大小，不在此处定义
    ui->qwtPlot->setAxisTitle(QwtPlot::xBottom,"x->"); //设置X轴的名称
    ui->qwtPlot->setAxisTitle(QwtPlot::yLeft,"y->"); //设置Y轴的名称
    ui->qwtPlot->setAxisScale(QwtPlot::xBottom, 0.0, 8.0,1.0);//设置X轴坐标刻度
    ui->qwtPlot->setAxisScale(QwtPlot::yLeft, 0.0, 40.0, 2.0);//设置Y轴坐标刻度

    //(void) new QwtPlotMagnifier(ui->qwtPlot->canvas()); //使能滚轮放大/缩小
    //(void) new QwtPlotPanner( ui->qwtPlot->canvas() ); //使能鼠标左键平移
    QwtPlotGrid *grid = new QwtPlotGrid;// 设置网格
    grid->enableX(true);
    grid->enableY(true);
    grid->setMajorPen(Qt::black,0,Qt::DotLine);
    grid->attach(ui->qwtPlot);

    ui->qwtPlot->insertLegend(new QwtLegend(), QwtPlot::RightLegend); //设置曲线标签
// 温度曲线
    curve = new QwtPlotCurve();
    curve->setTitle("temperature"); //设置曲线名称
    curve->setPen(Qt::red,2); //配置曲线颜色宽度等
    curve->setSamples(time, val, 8);
    curve->setCurveAttribute(QwtPlotCurve::Fitted, false); //曲线不平滑
    curve->attach(ui->qwtPlot);
// 湿度曲线
    curve2 = new QwtPlotCurve();
    curve2->setTitle("humidity");
    curve2->setPen(Qt::blue,2);
    curve2->setSamples(time, val2, 8);
    curve2->setCurveAttribute(QwtPlotCurve::Fitted, true); //曲线平滑
    curve2->attach(ui->qwtPlot);

    qsrand(QTime(0, 0, 0).secsTo(QTime::currentTime()));
    QTimer *timer = new QTimer(this);
    connect(timer,&QTimer::timeout, this, &Widget::timerUpdate);
    timer->start(1000); // 1s触发一次
}

Widget::~Widget()
{
    delete ui;
}

void Widget::timerUpdate()
{
    for (int i = 0; i < 8; i++) {
        val[i] = val[i+1];
        val2[i] = val2[i+1];
    }
    val[7] = qrand() % 40;
    val2[7] = qrand() % 40;

    curve->setSamples(time,val,8);
    curve2->setSamples(time,val2,8);
    ui->qwtPlot->replot();
}

后面我们只需要将随机值换成真实的温湿度值就可以完成温湿度动态曲线的绘制，我们只需要将TCP Client发送过来的温湿度数据进行解析然后替换就可以啦，这个在接下来的博文中再讲解。

4.widget.ui

将QwtPlot控件拖到ui中

最终编译在树莓派屏幕上显示如下：

该工程已经下载地址如下，可以直接下载编译运行一下。要想在ubuntu上运行，请参考前面说的pro编译文件的修改即可。

https://download.csdn.net/download/zz531987464/10782949

QT qwt绘制实时动态曲线demo

猜你喜欢