QT串口调试助手V2.0（源码全开源）--上位机+多通道波形表现+数据保存(优化 ...

首先关于Qt的安装和基本配置这里就不做重复阐明了，注：本文在Qt5.14基础上完成 完备的项目开源仓库链接在文章末端
图形控件——qcustomplot

QCustomPlot是一个基于Qt框架的开源绘图库，用于创建高质量的二维图表和数据可视化。
QCustomPlot的重要功能：
绘制多种图表类型：包括折线图、散点图、柱状图、面积图
交互性：支持图表的缩放、平移、数据点选择等交互操纵
多轴支持：可以在图表中添加多个X轴和Y轴，以便绘制复杂的多轴图表
定制化：提供丰富的样式和属性设置，用户可以自界说图表的外貌，包括颜色、线条样式、标记
高性能：针对大数据量绘图举行了优化，可以或许处理处罚大量数据点而不影响性能
重要组件：
QCustomPlot：主绘图控件，所有的绘图操纵都在这个控件上举行。
QCPGraph：用于绘制常见的折线图和散点图。
QCPAxis：表现图表的轴，可以自界说轴的范围、标签、刻度等。
QCPItem：图表中的各种辅助元素，如直线、文本标签等。
QCPPlottable：可绘制对象的基类，所有具体的绘图类型都继承自这个类。
该控件使用方法
将qcustomplot的源码一个cpp一个h文件添加到项目工程中，并添加头文件和编译链接就可以便捷的在源码中使用了。注意在放置表现控件时须要先放置一个qt内置的QWidget控件，然后通过右键控件，升格，选中头文件和类名称，设置为QCustomPlot，然后源代码中就可以快乐使用了。具体设置的效果可以参考文末完备的项目链接。

绘制曲线数据

重要使用到了曲线控件customPlot->addGraph();
这个控件的使用方法团体上和Qt自带的控件差别不大，重要这个控件的视觉效果和长时间大数据绘制效果更好一些
在使用控件之前要先初始化相干的控件内容：

1. // 绘图图表初始化
2. void MainWindow::QPlot_init(QCustomPlot *customPlot)
3. {
4.     // 创建定时器，用于定时生成曲线坐标点数据
5.     QTimer *timer = new QTimer(this);
6.     timer->start(10);
7.     connect(timer, SIGNAL(timeout()), this, SLOT(Plot_TimeData_Update()));
9.     // 图表添加两条曲线
10.     pGraph1_1 = customPlot->addGraph();
11.     pGraph1_2 = customPlot->addGraph();
13.     // 设置曲线颜色
14.     pGraph1_1->setPen(QPen(Qt::red));
15.     pGraph1_2->setPen(QPen(Qt::black));
17.     // 设置坐标轴名称
18.     customPlot->xAxis->setLabel("X-Times");
19.     customPlot->yAxis->setLabel("Amplitude of channel");
21.     // 设置y坐标轴显示范围
22.     customPlot->yAxis->setRange(-2, 2);
24.     // 显示图表的图例
25.     customPlot->legend->setVisible(true);
26.     // 添加曲线名称
27.     pGraph1_1->setName("Channel1");
28.     pGraph1_2->setName("Channel2");
30.     // 设置波形曲线的复选框字体颜色
31.     ui->checkBox_1->setStyleSheet("QCheckBox{color:rgb(255,0,0)}"); // 设定前景颜色,就是字体颜色
32.     // 允许用户用鼠标拖动轴范围，用鼠标滚轮缩放，点击选择图形:
33.     customPlot->setInteractions(QCP::iRangeDrag | QCP::iRangeZoom | QCP::iSelectPlottables);
34. }

复制代码

当向曲线添加新数据的时候可以同时控制范围窗口内的坐标轴尺寸，以及打印一些绘图相干的属性数据

1. void MainWindow::Plot_Show_Update(QCustomPlot *customPlot, double n1, double n2)
2. {
3.     cnt++;
4.     // 给曲线添加数据
5.     pGraph1_1->addData(cnt, n1);
6.     pGraph1_2->addData(cnt, n2);
8.     // 设置x坐标轴显示范围，使其自适应缩放x轴
9.     customPlot->xAxis->setRange( 0, (pGraph1_1->dataCount() > 1000) ? (pGraph1_1->dataCount()) : 1000);
10.     // 更新绘图，这种方式在高填充下太浪费资源。rpQueuedReplot，可避免重复绘图。
11.     customPlot->replot(QCustomPlot::rpQueuedReplot);
13.     static QTime time(QTime::currentTime());
14.     double key = time.elapsed() / 1000.0; // 开始到现在的时间，单位秒
15.     //计算帧数
16.     static double lastFpsKey;
17.     static int frameCount;
18.     frameCount++;
19.     if (key - lastFpsKey > 1) // 每1秒求一次平均值
20.     {
21.         // 帧数和数据总数
22.         ui->statusbar->showMessage(
23.             QString("Refresh rate: %1 FPS, Total data volume: %2")
24.                 .arg(frameCount / (key - lastFpsKey), 0, 'f', 0)
25.                 .arg(customPlot->graph(0)->data()->size() + customPlot->graph(1)->data()->size()),
26.             0);
27.         lastFpsKey = key;
28.         frameCount = 0;
29.     }
30. }

复制代码

曲线的绘制效果：

要实现上面的多通道效果还须要自行适配串口解析部门，然后匹配对应的数据后将数值传入到目的曲线对象。
完备的项目源码如下，包含数据解析、串口控制部门、同时实现数据保存到csv文件（代码中只保存了数组前两位的数值，须要保存多少数据可以自行修改代码实现）
项目Cpp文件：

1. #include "mainwindow.h"
2. #include "ui_mainwindow.h"
4. MainWindow::MainWindow(QWidget *parent)
5.     : QMainWindow(parent), ui(new Ui::MainWindow)
6. {
7.     ui->setupUi(this);
9.     // 给widget绘图控件，设置个别名，方便书写
10.     pPlot1 = ui->widget_1;
12.     // 状态栏指针
13.     sBar = statusBar();
15.     // 初始化图表1
16.     QPlot_init(pPlot1);
17.     cnt = 0;
19.     setWindowTitle("数据采集系统");
20.     serialport = new QSerialPort;
21.     find_port();                    //查找可用串口
22.     timerserial = new QTimer();
23.     QObject::connect(serialport,&QSerialPort::readyRead, this, &MainWindow::serial_timerstart);
24.     QObject::connect(timerserial,SIGNAL(timeout()), this, SLOT(Read_Date()));
27.     ui->close_port->setEnabled(false);//设置控件不可用
28. }
31. // 析构函数
32. MainWindow::~MainWindow()
33. {
34.     delete ui;
35. }
37. //查找串口
38. void MainWindow::find_port()
39. {
40.     //查找可用的串口
41.     bool fondcom = false;
42.     ui->com->clear();
43.     foreach(const QSerialPortInfo &info, QSerialPortInfo::availablePorts())
44.     {
45.         QSerialPort serial;
46.         serial.setPort(info);   //设置串口
47.         if(serial.open(QIODevice::ReadWrite))
48.         {
49.             //
50.             ui->com->addItem(serial.portName());        //显示串口name
51.             fondcom = true;
52.             QString std = serial.portName();
53.             QByteArray comname = std.toLatin1();
54.             //QMessageBox::information(this,tr("SerialFond"),tr((const char *)comname.data()),QMessageBox::Ok);
55.             serial.close();
56.             ui->open_port->setEnabled(true);
57.         }
58.     }
59.     if(fondcom==false)
60.     {
61.         QMessageBox::information(this,tr("Error"),tr("Serial Not Fond!Plase cheak Hardware port!"),QMessageBox::Ok);
62.     }
63. }
65. /* 打开并设置串口参数 */
66. void MainWindow::on_open_port_clicked()
67. {
68.     update();
69.     //find_port();     //重新查找com
70.      //初始化串口
71.          serialport->setPortName(ui->com->currentText());        //设置串口名
72.          if(serialport->open(QIODevice::ReadWrite))              //打开串口成功
73.          {
74.              serialport->setBaudRate(ui->baud->currentText().toInt());       //设置波特率
75.              switch(ui->bit->currentIndex())                   //设置数据位数
76.              {
77.                  case 8:serialport->setDataBits(QSerialPort::Data8);break;
78.                  default: break;
79.              }
80.              switch(ui->jiaoyan->currentIndex())                   //设置奇偶校验
81.              {
82.                  case 0: serialport->setParity(QSerialPort::NoParity);break;
83.                  default: break;
84.              }
85.              switch(ui->stopbit->currentIndex())                     //设置停止位
86.              {
87.                  case 1: serialport->setStopBits(QSerialPort::OneStop);break;
88.                  case 2: serialport->setStopBits(QSerialPort::TwoStop);break;
89.                  default: break;
90.              }
91.              serialport->setFlowControl(QSerialPort::NoFlowControl);     //设置流控制
92.              // 设置控件可否使用
93.             ui->close_port->setEnabled(true);
94.             ui->open_port->setEnabled(false);
95.             ui->refresh_port->setEnabled(false);
96.          }
97.          else    //打开失败提示
98.          {
99.             // Sleep(100);
101.              QMessageBox::information(this,tr("Erro"),tr("Open the failure"),QMessageBox::Ok);
102.          }
103. }
106. /* 关闭串口并禁用关联功能 */
107. void MainWindow::on_close_port_clicked()
108. {
109.     serialport->clear();        //清空缓存区
110.     serialport->close();        //关闭串口
112.     ui->open_port->setEnabled(true);
113.     ui->close_port->setEnabled(false);
114.     ui->refresh_port->setEnabled(true);
115. }
117. /* 开始接收数据
118. * */
119. void MainWindow::on_recive_data_clicked()
120. {
121.     QString str = "START_SEND_DATA\r\n";
122.     QByteArray str_utf8 = str.toUtf8();
123.     if(serialport->isOpen())serialport->write(str_utf8);
124.     else QMessageBox::information(this,tr("ERROE"),tr("串口未连接，请先检查串口连接"),QMessageBox::Ok);
125. }
127. void MainWindow::serial_timerstart()
128. {
129.     timerserial->start(1);
130.     serial_bufferClash.append(serialport->readAll());
131. }
133. //串口接收数据帧格式为：帧头'*' 帧尾'#' 数字间间隔符号',' 符号全为英文格式
134. void MainWindow::Read_Date()
135. {
136.     QString string;
137.     QStringList serialBuferList;
138.     int list_length = 0;//帧长
139.     QString str = ui->Receive_text_window->toPlainText();
140.     timerserial->stop();//停止定时器
141. //    qDebug()<< "[Serial LOG]serial read data:" <<serial_bufferClash;
143.     QByteArray bufferbegin = "*";   //帧头
144.     int index=0;
145.     QByteArray bufferend = "#";     //帧尾
146.     int indexend = 1;
147.     QByteArray buffercashe;
148.     index = serial_bufferClash.indexOf(bufferbegin,index);
149.     indexend = serial_bufferClash.indexOf(bufferend,indexend);
150. //    qDebug()<< index<< indexend;
151.     int bufferlens=0;
152.     if((index<serial_bufferClash.size())&&(indexend<serial_bufferClash.size()))
153.     {
154.         bufferlens = indexend - index-1;
155.         buffercashe = serial_bufferClash.mid(index+1,bufferlens);
156.         qDebug()<< "[Serial LOG]serial chack data:" <<buffercashe;
157.         string.prepend(buffercashe);
158.         serialBuferList = string.split(" ");      //数据分割
159.         list_length=serialBuferList.count();    //帧长
160.         if (list_length>1)
161.         {
162.             clash.data1 = serialBuferList[0].toDouble();
163.             clash.data2 = serialBuferList[1].toDouble();
164.             plot_buffer.push_back(clash);
165.             clash.data1 = serialBuferList[2].toDouble();
166.             clash.data2 = serialBuferList[3].toDouble();
167.             plot_buffer.push_back(clash);
168.             clash.data1 = serialBuferList[4].toDouble();
169.             clash.data2 = serialBuferList[5].toDouble();
170.             plot_buffer.push_back(clash);
171.         }
172.     }
173.     else
174.     {
175.         qDebug()<< "[Serial LOG][ERROR]recive data:" <<serial_bufferClash;
176.     }
177.     str+="succeed:"+buffercashe;
178.     str += "  ";
179.     ui->Receive_text_window->clear();
180.     ui->Receive_text_window->append(str);
181.     serial_bufferClash.clear();
182. }
184. /*  刷新串口按键的按钮槽函数
185. * */
186. void MainWindow::on_refresh_port_clicked()
187. {
188.     find_port();
189. }
193. // 绘图图表初始化
194. void MainWindow::QPlot_init(QCustomPlot *customPlot)
195. {
197.     // 创建定时器，用于定时生成曲线坐标点数据
198.     QTimer *timer = new QTimer(this);
199.     timer->start(10);
200.     connect(timer, SIGNAL(timeout()), this, SLOT(Plot_TimeData_Update()));
202.     // 图表添加两条曲线
203.     pGraph1_1 = customPlot->addGraph();
204.     pGraph1_2 = customPlot->addGraph();
206.     // 设置曲线颜色
207.     pGraph1_1->setPen(QPen(Qt::red));
208.     pGraph1_2->setPen(QPen(Qt::black));
210.     // 设置坐标轴名称
211.     customPlot->xAxis->setLabel("X-Times");
212.     customPlot->yAxis->setLabel("Channel Data");
214.     // 设置y坐标轴显示范围
215.     customPlot->yAxis->setRange(-2, 2);
217.     // 显示图表的图例
218.     customPlot->legend->setVisible(true);
219.     // 添加曲线名称
220.     pGraph1_1->setName("Channel1");
221.     pGraph1_2->setName("Channel2");
223.     // 设置波形曲线的复选框字体颜色
224.     ui->checkBox_1->setStyleSheet("QCheckBox{color:rgb(255,0,0)}"); // 设定前景颜色,就是字体颜色
225.     // 允许用户用鼠标拖动轴范围，用鼠标滚轮缩放，点击选择图形:
226.     customPlot->setInteractions(QCP::iRangeDrag | QCP::iRangeZoom | QCP::iSelectPlottables);
227. }
229. int data_lens = 0;
230. // 定时器溢出处理槽函数。用来生成曲线的坐标数据。
231. void MainWindow::Plot_TimeData_Update()
232. {
234.     int lens = plot_buffer.size();
235.     if (lens > data_lens)
236.     {
237.         for(int i=data_lens;i<lens;i++)
238.         {
239.             Plot_Show_Update(pPlot1, plot_buffer[i].data1, plot_buffer[i].data2);
240.             data_lens++;
241.             qDebug()<<"[Plot LOG]data_lens:"<<data_lens<< "size:"<<lens;
242.         }
243.     }
244. }
246. // 曲线更新绘图
247. void MainWindow::Plot_Show_Update(QCustomPlot *customPlot, double n1, double n2)
248. {
249.     cnt++;
250.     // 给曲线添加数据
251.     pGraph1_1->addData(cnt, n1);
252.     pGraph1_2->addData(cnt, n2);
254.     // 设置x坐标轴显示范围，使其自适应缩放x轴
255.     customPlot->xAxis->setRange( 0, (pGraph1_1->dataCount() > 100) ? (pGraph1_1->dataCount()) : 100);
256.     // 更新绘图，这种方式在高填充下太浪费资源。rpQueuedReplot，可避免重复绘图。
257.     customPlot->replot(QCustomPlot::rpQueuedReplot);
259.     static QTime time(QTime::currentTime());
260.     double key = time.elapsed() / 1000.0; // 开始到现在的时间，单位秒
261.     //计算帧数
262.     static double lastFpsKey;
263.     static int frameCount;
264.     frameCount++;
265.     if (key - lastFpsKey > 1) // 每1秒求一次平均值
266.     {
267.         // 帧数和数据总数
268.         ui->statusbar->showMessage(
269.             QString("Refresh rate: %1 FPS, Total data volume: %2")
270.                 .arg(frameCount / (key - lastFpsKey), 0, 'f', 0)
271.                 .arg(customPlot->graph(0)->data()->size() + customPlot->graph(1)->data()->size()),
272.             0);
273.         lastFpsKey = key;
274.         frameCount = 0;
275.     }
276. }
278. /* 清空缓存数据
279. * */
280. void MainWindow::on_clean_data_clicked()
281. {
282.     qDebug()<< "[Clean Data]";
283.     plot_buffer.clear();
284.     data_lens = 0;
285.     cnt = 0;
286.     pGraph1_1->data().data()->clear();
287.     pGraph1_2->data().data()->clear();
288.     pPlot1->graph(0)->data().clear();
289.     pPlot1->graph(1)->data().clear();
290. }
292. // setVisible设置可见性属性，隐藏曲线，不会对图例有任何影响。推荐使用。
293. void MainWindow::on_checkBox_1_stateChanged(int arg1)
294. {
295.     if (arg1)
296.     {
297.         pGraph1_1->setVisible(true);
298.     }
299.     else
300.     {
301.         pGraph1_1->setVisible(false); // void QCPLayerable::setVisible(bool on)
302.     }
303.     pPlot1->replot();
304. }
306. void MainWindow::on_checkBox_2_stateChanged(int arg1)
307. {
308.     if (arg1)
309.     {
310.         pGraph1_2->setVisible(true);
311.     }
312.     else
313.     {
314.         pGraph1_2->setVisible(false); // void QCPLayerable::setVisible(bool on)
315.     }
316.     pPlot1->replot();
317. }
319. // 保存缓冲区数据为csv文件
320. void MainWindow::on_savedata_csv_clicked()
321. {
322.      if(plot_buffer.size()<1)
323.      {
324.          QMessageBox::information(this, "提示","当前数据为空");
325.          return;
326.      }
327.      serialport->clear();        //清空缓存区
328.      timerserial->stop();
329.      serialport->close();        //关闭串口
330.      ui->open_port->setEnabled(true);
331.      ui->close_port->setEnabled(false);
332.      QString csvFile = QFileDialog::getExistingDirectory(this);
333.      QDateTime current_date_time =QDateTime::currentDateTime();
334.      QString current_date =current_date_time.toString("yyyy_MM_dd_hh_mm");
335.      csvFile += tr("/sensor_Save_%1.csv").arg(current_date);
336.      if(csvFile.isEmpty())
337.      {
338.         QMessageBox::information(this,tr("警告"),tr("文件路径错误，无法打开文件，请重试"),QMessageBox::Ok);
339.      }
340.      else
341.      {
342.          qDebug()<< csvFile;
343.          QFile file(csvFile);
344.          if ( file.exists())
345.          {
346.                  //如果文件存在执行的操作，此处为空，因为文件不可能存在
347.          }
348.          file.open( QIODevice::ReadWrite | QIODevice::Text );
349.          QTextStream out(&file);
350.          out<<tr("data1,")<<tr("data2,\n");     //写入表头
351.          // 创建 CSV 文件
352.          for (const auto &data : plot_buffer) {
353.              out << QString("%1,%2").arg(data.data1).arg(data.data2) << "\n";
354.          }
355.          file.close();
356.          QMessageBox::information(this, "提示","数据保存成功");
357.      }
358.      serialport->open(QIODevice::ReadWrite);        //打开串口
359.      ui->open_port->setEnabled(false);
360.      ui->close_port->setEnabled(true);
361. }

复制代码

完备项目链接->完备的项目工程Github链接

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。