前言

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()//客户端接入
{
    //得到连入的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);
}

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

    //转换为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();
}

保存曲线代码：

/*保存曲线图片*/
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上位机和网络开发，本人目前仍属于初级阶段，还需要继续学习有关网络通信的知识，欢迎各位大神指教。