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

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

时间：2018-08-23 11:12:51

文章目录

前言一、使用QT Creator编写上位机二、上位机与网络调试助手联调三、总结

前言

电赛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通信与绘图的核心代码：

void WifiReceiver::newSocketConnect()//客户端接入{//得到连入的socketg_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);}void WifiReceiver::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();//转换为doubleQVector<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();}

保存曲线代码：

/*保存曲线图片*/bool WifiReceiver::on_saveButton_clicked(){QString filename = QFileDialog::getSaveFileName();if(filename ==""){QMessageBox::information(this,"fail","保存失败！");return false;}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() );}}