【上位机】通过QTCreator编写WIFI上位机与网络调试助手通信绘制曲线

文章目录

前言

17年电赛H题中要求编写WIFI上位机实现远程幅频特性曲线显示，
以下是本人在近期摸索出来的一些心得及体会。

一、使用QT Creator编写上位机

1.工具准备
QT Creator是一款功能强大，基于C/C++的轻量级开发软件，其中封装了大量的库，类似于VS开发，我们只需将用到的库文件导入工程即可。但在安装的时候对新手不太友好，推荐国内的镜像安装，教程：Qt Creator下载和安装(详细教程)
文章中详细给出了配置开发环境的方法，可能有些人会觉得很麻烦，实际上，文章最后提供了一种傻瓜式安装，只需下载一个程序，可在安装时再根据需求配置开发环境，以下是我下载的版本。这是我下载的版本
环境配置完成，此时就可以编写上位机了。新手教程：手把手教你编写第一个上位机
当然，我们要实现WIFI通信，那就先需要具备相应的网络通信概念，基本的TCP/UDP通信协议，Socket监听机制可以初步了解一下，看不懂也没关系，毕竟我们是站在巨人的肩膀上的，可以去找找对应的开源项目，多多研读源码，再结合相关概念，一步步去理解代码的含义，个人认为这是一个比较好的学习方法。

2.绘制UI界面
在QT中绘制UI界面一般有两种方式，一是直接在.ui文件中添加控件，二是将控件代码加入Cpp文件，具体方法之前的链接中可查看。QT Creator与外界交互的核心机制是通过槽（Slot）与函数绑定，通过信号（Signal）触发回调函数。若想做出更美观的界面，可参考：如何做出优美的QT界面
类似于CSS，QT还提供了用于界面美化的QSS。具体用法可参考：QSS基本语法
原始的界面经过QSS加工后如下，并增加了保存曲线为图片的功能。
在这里插入图片描述
3.编写代码
由于工程中需要绘图功能，故需要导入对应绘图库，这里用的是QCustomPlot库，
源代码地址：QCustomPlot官网库
库中函数用法可使用快捷键F1查看。

WIFI通信与绘图的核心代码：

voidWifiReceiver::newSocketConnect()//客户端接入{//得到连入的socket
    g_tcpSocket = g_tcpServer->nextPendingConnection();//有可读的消息触发读函数connect(g_tcpSocket,SIGNAL(readyRead()),this,SLOT(readMeassage()));//对方解除连接(g_tcpSocket,SIGNAL(disconnected()),this,SLOT(on_BTN_disconnect_clicked()));
    QString tempString ="已连接："+g_tcpSocket->peerAddress().toString()+" "+QString::number(g_tcpSocket->peerPort());
    ui->statusBar->showMessage(tempString);}voidWifiReceiver::readMeassage(){
    QByteArray data = g_tcpSocket->readAll();//数据分割  x1,x2...xn|y1,y2....yn,//x1,x2...xn|y1,y2....yn 为发送格式,必须按格式发送，否则程序将崩溃
    QList<QByteArray> dataList = data.split('|');
    QVector<QByteArray> tempX = dataList[0].split(',').toVector();
    QVector<QByteArray> tempY = dataList[1].split(',').toVector();//转换为double
    QVector<double> posX,posY;for(int index =0;index < tempX.size();index++){
        posX.append(double(tempX[index].toDouble()));}for(int index =0;index < tempY.size();index++){
        posY.append(double(tempY[index].toDouble()));}qDebug()<<"posX:"<<posX;qDebug()<<"posY:"<<posY;/****************曲线绘制****************/
    ui->WID_customPlot->graph(0)->setData(posX,posY);//    ui->WID_customPlot->graph(0)->rescaleAxes();
    ui->WID_customPlot->replot();}

保存曲线代码：

/*保存曲线图片*/boolWifiReceiver::on_saveButton_clicked(){
    QString filename =QFileDialog::getSaveFileName();if(filename ==""){QMessageBox::information(this,"fail","保存失败！");returnfalse;}if(filename.endsWith(".png")){QMessageBox::information(this,"success","保存成功！");return ui->WID_customPlot->savePng(filename,ui->WID_customPlot->width(),ui->WID_customPlot->height());}if( filename.endsWith(".jpg")||filename.endsWith(".jpeg")){QMessageBox::information(this,"success","成功保存为jpg文件");return ui->WID_customPlot->saveJpg(filename, ui->WID_customPlot->width(), ui->WID_customPlot->height());}if( filename.endsWith(".bmp")){QMessageBox::information(this,"success","成功保存为bmp文件");return ui->WID_customPlot->saveBmp( filename, ui->WID_customPlot->width(), ui->WID_customPlot->height());}if( filename.endsWith(".pdf")){QMessageBox::information(this,"success","成功保存为pdf文件");return ui->WID_customPlot->savePdf( filename, ui->WID_customPlot->width(), ui->WID_customPlot->height());}else{//否则追加后缀名为.png保存文件QMessageBox::information(this,"success","保存成功,已默认保存为png文件");return ui->WID_customPlot->savePng(filename.append(".png"), ui->WID_customPlot->width(), ui->WID_customPlot->height());}}

二、上位机与网络调试助手联调

上位机调试完毕后，可利用网络调试助手进行通信，查看能否正常联网以及实现绘图功能。
若程序已以release版本发布，打开可执行程序WifiReceiver.exe：
在这里插入图片描述
上位机作为服务端（Server），网络调试助手作为客户端（Client）连接：

输入本地IP和端口号，连接成功后发送数据，得到数据绘制的曲线效果如下：

保存曲线到本地：