本文设计一个终端控制的上位机软件（如“设计目标”下图所示），可以和STM32、Adruino等通信实现无线局域网控制系统。

本文的通信内容和图表内容可以参考作者之前的文章

STM32+ESP8266连接电脑Qt网络上位机——QT篇https://blog.csdn.net/qq_53734051/article/details/126706759?spm=1001.2014.3001.5501

QT—Qcharts绘制实时曲线https://blog.csdn.net/qq_53734051/article/details/126872728?spm=1001.2014.3001.5501

一、设计目标

二、设计原理

三、通信部分

四、图表部分

五、数据刷新和UI设计

一、设计目标

利用组件容器等，结合通信，发送相应格式的文本，在主控解析后做出相应的回应；同样在数据上报也需要主控发送指定的格式文本，上位机才能正确的解析。下方评论+邮箱发送源码或Git自行下载：https://gitee.com/guo-lingran/tcp-sql-network-host-computer

百度网盘下载连接：https://pan.baidu.com/s/1AROPIT3big1puhzCKyRTSQ 提取码：pumk

哔哩哔哩视频演示链接 —>：【开源、应用】QT—TCP+Sql网络上位机的设计_哔哩哔哩_bilibili

二、设计原理

该软件主要分为以下部分：

通信部分（QTcpServer、QTcpSocket）

图表部分（QChartView、QLineSeries、QValueAxis、QDateTimeAxis）

数据刷新（QTimer）

UI槽函数设计（QToolBar、QLabel、QLineEdit、QPushButton、QSlider、QCheckBox等）

三、通信部分

之前的文章已经写过TCP通信实现过程以及部分代码，所以这里不再详写 —> 点击跳转STM32+ESP8266连接电脑Qt网络上位机—QT篇https://blog.csdn.net/qq_53734051/article/details/126706759?spm=1001.2014.3001.5501

这里有点小的变化，在工具栏里可以再调出一个窗口，可供调试使用

调用该窗口

头文件需要定义一下该类：

private:
Deb *deb = new Deb;

调出窗口即可

//调出调试窗口
void MainWindow::on_debb_triggered()
{
    deb->show();
}

关闭窗口

void MainWindow::on_exit_triggered()
{
    this->close();
}

容器接收

当软件接收数据后，一部分传入界面二（调试界面），供调试使用，另一部分进行解析，并进入图表或文本（下面再讲解）。如下代码->

//收到的数据放入接受框   解析
void MainWindow::readyRead_Slot(){
    QByteArray receiveDate;
    QTextCodec *tc = QTextCodec::codecForName("GBK"); 

    while(!tcpSocket->atEnd()){
        receiveDate = tcpSocket->readAll();
    }

    if (!receiveDate.isEmpty())
    {
        QString strBuf=tc->toUnicode(receiveDate);       
        //传入界面二数据
        deb->DisplayData(strBuf);
        //解析到可视化曲线图和文本
        BackDataParsing(strBuf);
    }
    receiveDate.clear();
}

界面二中的数据显示

如下图

void Deb::DisplayData(QString qstring){
    ui->rec_edi->appendPlainText(qstring);
}

容器发送

在界面二直接进行数据发送后，会引起阻塞，所以为了保证发送成功，这里在界面一使用定时器来判断是否有数据发送，这样两个界面不会有冲突。

/*构造函数*/
timer_send = new QTimer(this);
timer_send->start(20);
connect(timer_send,SIGNAL(timeout()),this,SLOT(timer_send_Slot()));
/*END*/

void MainWindow::timer_send_Slot(){
    if(flag_Send==1){
        flag_Send=0;
      tcpSocket->write(strbuf.toLocal8Bit().data());
    }
}

四、图表部分

之前的文章也介绍过怎么绘制实时曲线，这里不再详写


//创建chart
void MainWindow::creatChart()
{
    QChart *qchart = new QChart();
    //把chart放到容器里
    ui->graphicsView->setChart(qchart);
    ui->graphicsView->setRenderHint(QPainter::Antialiasing); //设置抗锯齿

    //创建两条线
    QLineSeries *series0 = new QLineSeries;
    QLineSeries *series1 = new QLineSeries;
    QLineSeries *series2 = new QLineSeries;

    //设置名字
    series0->setName("温度");
    series1->setName("湿度");
    series2->setName("光强");

    //把线条放到chart里
    qchart->addSeries(series0);
    qchart->addSeries(series1);
    qchart->addSeries(series2);

    //创建x 坐标
    QDateTimeAxis *axisX = new QDateTimeAxis;

    //格式
    axisX->setFormat("hh:mm:ss");
    //设置竖条数量
    axisX->setTickCount(5);

    //设置坐标名称
    axisX->setTitleText("time(sec)");

    qchart->setAxisX(axisX,series0);
    qchart->setAxisX(axisX,series1);
    qchart->setAxisX(axisX,series2);

    //创建y坐标
    QValueAxis  *axisY = new QValueAxis;
    axisY->setRange(0,100);
    axisY->setTickCount(5);

    qchart->setAxisY(axisY,series0);
    qchart->setAxisY(axisY,series1);
    qchart->setAxisY(axisY,series2);

    qchart->setDropShadowEnabled(true);

    //初始化坐标
         //设置最大值坐标值 系统时间当前时间
    qchart->axisX()->setMin(QDateTime::currentDateTime().addSecs(0));
         //设置最大值坐标值 系统时间后5*30秒
    qchart->axisX()->setMax(QDateTime::currentDateTime().addSecs(5*30));

}

QT—Qcharts绘制实时曲线https://blog.csdn.net/qq_53734051/article/details/126872728?spm=1001.2014.3001.5501 发送格式：Params{temp:39.3;humi:82.9;light:69.3;soil:38.3;mq2:22.2;rain:57.3;}

当接收到数据后，进入BackDataParsing函数进行文本解析，在解析文本时使用mid函数取指定长度的字符串，.indexOf定位关键词，返回关键词的位置（int）。

解析原理：

.mid有两个参数，第一个为起始位置（int），第二个为取值长度。

起始位置：

首先Params为起始，利用.indexof定位到第一个关键词的位置，并加上该关键词的长度，即取到：后面；

取值长度：

再利用.indexof定位到第二个关键词的位置，并减去第一个关键词的位置和长度，以此算出该有效数据的长度。

void MainWindow::BackDataParsing(QString strBuf){

    //查找是否为参数;  -1表示没有该子串
 if(strBuf.startsWith("Params")){

        //表一数据
      QString str = strBuf.mid(strBuf.indexOf("temp:")+((QString)"temp:").length(),strBuf.indexOf("humi:")-strBuf.indexOf("temp:")-((QString)"temp:").length()-1);
      tcpSocket->write(str.toUtf8());
      tcpSocket->write("->");

      QString st2 = strBuf.mid(strBuf.indexOf("humi:")+((QString)"humi:").length(),strBuf.indexOf("light:")-strBuf.indexOf("humi:")-((QString)"humi:").length()-1);
      tcpSocket->write(st2.toUtf8());
      tcpSocket->write("->");

      QString st3 = strBuf.mid(strBuf.indexOf("light:")+((QString)"light:").length(),strBuf.indexOf("soil:")-strBuf.indexOf("light:")-((QString)"light:").length()-1);
      tcpSocket->write(st3.toUtf8());
      tcpSocket->write("->");

      //表二数据
      QString st4 = strBuf.mid(strBuf.indexOf("soil:")+((QString)"soil:").length(),strBuf.indexOf("mq2:")-strBuf.indexOf("soil:")-((QString)"soil:").length()-1);
      tcpSocket->write(st4.toUtf8());
      tcpSocket->write("->");

      QString st5 = strBuf.mid(strBuf.indexOf("mq2:")+((QString)"mq2:").length(),strBuf.indexOf("rain:")-strBuf.indexOf("mq2:")-((QString)"mq2:").length()-1);
      tcpSocket->write(st5.toUtf8());
      tcpSocket->write("->");

      QString st6 = strBuf.mid(strBuf.indexOf("rain:")+((QString)"rain:").length(),strBuf.indexOf("}")-strBuf.indexOf("rain:")-((QString)"rain:").length()-1);
      tcpSocket->write(st6.toUtf8());

       temp_data = str.toFloat();
       humi_data = st2.toFloat();
       light_data = st3.toFloat();

       soil_data = st4.toFloat();
       mq2_data = st5.toFloat();
       rain_data = st6.toFloat();

       ToUpdata_Lab(str,st2,st3,st4,st5,st6);

   }
}

解析完后更显到表里和显示区域里 (ToUpdata_Lab)

文本区域显示

//文本显示
void MainWindow::ToUpdata_Lab(QString Stemp,QString Shumi,QString Slight,QString Ssoil,QString Smq2,QString Srain){
    ui->temp_la->setText(Stemp+"%");
    ui->humi_la->setText(Shumi+"%");
    ui->light_la->setText(Slight+"%");

    ui->soil_la->setText(Ssoil+"%");
    ui->mq2_la->setText(Smq2+"%");
    ui->rain_la->setText(Srain+"%");

}

表格刷新

动态变化详见上篇文章

//表一刷新
void MainWindow::DisplayChart1(){
    //获取当前时间
    QDateTime currentTime = QDateTime::currentDateTime();

    //获取初始化的qchart
    QChart *qchart =(QChart *)ui->graphicsView->chart();
    //获取初始化的series;
    QLineSeries *series0 = (QLineSeries *)ui->graphicsView->chart()->series().at(0);
    QLineSeries *series1 = (QLineSeries *)ui->graphicsView->chart()->series().at(1);
    QLineSeries *series2 = (QLineSeries *)ui->graphicsView->chart()->series().at(2);

    series0->append(currentTime.toMSecsSinceEpoch(),temp_data);
    series1->append(currentTime.toMSecsSinceEpoch(),humi_data);
    series2->append(currentTime.toMSecsSinceEpoch(),light_data);

    qchart->axisX()->setMin(QDateTime::currentDateTime().addSecs(-5*30));
    qchart->axisX()->setMax(QDateTime::currentDateTime().addSecs(5*30));
}

五、数据刷新和UI设计

数据刷新部分包括表格的动态变化、时间显示和继电器自动关停（蓄水ui的动态变化）


//时间刷新
void MainWindow::ReData_Slot(){
    static int timer=0;

    DisplayChart1();
    DisplayChart2();


    //当前时间
    ui->time_l->setText(QTime::currentTime().toString("hh:mm:ss"));

    //继电器控制
    if(relaySw){
        timer++;
        // boVal 设定值  timer 当前值
        int boVal = ui->spinBox->value();

        ui->progressBar->setValue((timer*100)/boVal);

            //超时后自动关闭
        if(timer>=boVal){
            timer=0;
            relaySw=false;
            ui->relay->setIcon(QIcon(":/relay_off.png"));
            tcpSocket->write("relay_off");
            ui->progressBar->setValue(100);
        }
      }
    else
    {    
        timer=0;
    }
}

阈值设定

采用QCheckBox多选框完成一个阈值的设定，需要设定哪一个阈值勾选即可，然后设定。

发送格式： 状态+soil:12;状态+rain:20;状态+temp:5;状态+light:6

若设定为以下的阈值，将会发送这样的数据：enable soil:12;enable rain:20;enable temp:5;enable light:6 （如下图）

enable soil:30;disable rain:52;disable temp:6;enable light:62

最后用于单片机的解析，并作出相应的变化。

槽函数：

void MainWindow::on_set_yu_bt_clicked()
{
    QString sendThrshold;

    sendThrshold = EnsoilHumi + " " + "soil:"+ ui->soil_yu_la->text()+";"+
                   Enrain     + " " + "rain:"+ ui->rain_yu_la->text()+";"+
                   Entemp     + " " + "temp:"+ ui->temp_yu_la->text()+";"+
                   Enlight    + " " + "light:"+ui->light_yu_la->text();

    tcpSocket->write(sendThrshold.toLocal8Bit());

}

//复选框  2选中 0未选中
void MainWindow::on_checkBox_stateChanged(int arg1)
{
    qDebug()<<arg1;
    if(arg1==2)
        EnsoilHumi="enable";
    else
        EnsoilHumi="disable";
}
void MainWindow::on_checkBox_2_stateChanged(int arg1)
{
    qDebug()<<arg1;

    if(arg1==2)
         Enrain="enable";
    else
         Enrain="disable";
}
void MainWindow::on_checkBox_3_stateChanged(int arg1)
{
     qDebug()<<arg1;

     if(arg1==2)
          Entemp="enable";
     else
          Entemp="disable";
}
void MainWindow::on_checkBox_4_stateChanged(int arg1)
{

    if(arg1==2)
         Enlight="enable";
    else
         Enlight="disable";
}

光强设定

和上面一样，只不过用到了一个QSlider的类，设定26%后，发送格式：Pwm:+值，同样的单片机解析后做出相对的改变。


//滑动改变
void MainWindow::on_horizontalSlider_valueChanged(int value)
{
     ui->setlightNumla->setNum(value);
     light_pwm = value;
}

//光强控制
void MainWindow::on_set_light_bt_clicked()
{
   tcpSocket->write(("Pwm:"+QString::number(light_pwm)).toLocal8Bit());
}

QToolBar工具栏

工具栏包括网络的开启、LED开关、继电器开关、模式切换、调试窗口和退出软件。原理都一样，代码部分不再列出。

蓄水状态

当打开继电器开关后，会有一个倒计时自动关闭的设计，这里的时间可以设定（如下图）。达到100%后自动关闭，并发送命令：relay_off 。

这里使用了QProgressBar和QSpinBox的类，在定时器里1s发生改变

//继电器控制
if(relaySw){
    timer++;
    // boVal 设定值  timer 当前值
    int boVal = ui->spinBox->value();
    //进度条设定
    ui->progressBar->setValue((timer*100)/boVal);
    //超时后自动关闭
    if(timer>=boVal){
        timer=0;
        relaySw=false;
        ui->relay->setIcon(QIcon(":/relay_off.png"));
        tcpSocket->write("relay_off");
        ui->progressBar->setValue(100);
       }
   }