前言

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

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() );}
}

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

上位机调试完毕后，可利用网络调试助手进行通信，查看能否正常联网以及实现绘图功能。
若程序已以release版本发布，打开可执行程序WifiReceiver.exe：

上位机作为服务端（Server），网络调试助手作为客户端（Client）连接：

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

保存曲线到本地：

三、总结

关于 QT上位机和网络开发，本人目前仍属于初级阶段，还需要继续学习有关网络通信的知识，欢迎各位大神指教。

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

（转）PC机使用网络调试助手获取onenet的数据（https://blog.csdn.net/qq_29219435/article/details/78480872）
在上一篇博客中,我写了如何向onenet发送数据,本文主要介绍通过http协议GET到之前上传的数据. 1 2 http://blog.csdn.net/qq_29219435/article/det ...
PC机使用网络调试助手获取onenet的数据
在上一篇博客中,我写了如何向onenet发送数据,本文主要介绍通过http协议GET到之前上传的数据. http://blog.csdn.net/qq_29219435/article/details ...
零基础编写一个串口网络调试助手(一)
摘要:作为一名嵌入式开发行者QT是必须要学的,也许现在不学以后也要学习的.一方面,在嵌入式初学阶段,也就是裸机开发,可能需要自己写上位机,QT就是一个做上位机的一个好用的工具,一般只要会c++学习QT ...
Qt编写网络调试助手（TCP客户端+TCP服务端+UDP服务端）终极版开源
时隔半年,对网络调试助手工具进行所有代码重写,这次目录结果整齐的一逼,代码整齐的一逼,非常完善了,打死也不再改版了.这次真的打死也不再改版了. 旧版本1:http://www.qtcn.org/bbs ...
C#编写定制的HID调试助手
简要网上有很多调试工具,比如串口调试助手,网络调试助手,HID调试助手.这些不可否认,确实带来挺多debug便利.但是对于一个产品来说,如果有一个定制版的调试助手,那么对于我们开发就提供了更加美好便 ...
最简单DIY基于ESP32CAM的物联网相机系统⑥（用上位机VS2013 MFC实现WIFI图传）
第一篇:最简单DIY基于ESP32CAM的物联网相机系统①(用网页实现拍照图传) 第二篇:最简单DIY基于ESP32CAM的物联网相机系统②(在JAVAWEB服务器实现图片查看器) 第三篇:最简单DI ...
从零开始编写一个上位机（串口助手）QT Creator + Python
提示:本博客作为学习笔记,有错误的地方希望指正,此文可能会比较长,作为学习笔记的积累,希望对来着有帮助. 绪论:笔者这里使用的是QTCreator和Python来实现一个简单的串口上位机的开发的简 ...
安卓wifi调试助手(单片机wifi上位机)
例程在网上找例程最好找个日期新一点的, 因为,太老的工程,不容易编译过. Android WIFI调试助手源码2.0 这个例程,可以很方便地改装成 wifi 开发板(或wifi相关产品) 的上位机 ...

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

文章目录

前言

一、使用QT Creator编写上位机

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

三、总结

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

最新文章

热门文章