手把手教你制作一个温湿度上位机（串口通信）

已于 2024-03-19 20:46:12 修改
阅读量2.7w 收藏 799
点赞数 238
分类专栏： Qt学习笔记 文章标签： qt 单片机
于 2020-08-29 13:23:44 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_39542860/article/details/108291462
版权

制作一个串口温湿度上位机

  1. 串口接收数据
  2. 文本框实时显示温湿度数据
  3. 绘制实时变化曲线

1、新建一个工程

1.1、打开QT软件（我的QT版本是QT5.9.0），点击“+New Project”新建一个新工程，项目选择“Application”，具体模板选择“Qt Widget Application”，然后点击“Choose…”；
在这里插入图片描述
1.2、设置项目名称和项目创建路径；
切记：名称和创建路径均不能出现中文字符。
在这里插入图片描述
1.3、Kit Selection选择“Desktop Qt 5.9.0 MinGW 32bit”；在这里插入图片描述
1.4、类名自定义一个，由于用不到菜单栏，因此基类选择“QWidget”，当然“QDialog”也可以，具体看需要什么。下面来解释一下这三个基类的区别是啥：
（1）QMainWindow：主窗口类，主窗口具有主菜单栏、工具栏和状态栏，类似于一般的应用程序的主窗口；
（2）QWidget：所有具有可视界面类的基类，选择QWidget创建的界面对各种界面组件都可以支持；
（3）QDialog：对话框类，可建立一个基于对话框的界面。
在这里插入图片描述
1.5、最后点击完成即可生成一个新的工程；
在这里插入图片描述

2、具体设计

2.1、建立完新工程以后，先编译一遍，编译可以点击左下方的编译按键，也可以“CTRL+R”编译。编译完成后，便会出现一个空白界面（Widget）；在这里插入图片描述
编译完成后，双击Forms下的widget.ui进入ui界面设置界面。
在这里插入图片描述
在这里插入图片描述
2.2、进行界面设计：
（1）、放置几个文本框用来显示温湿度数据；在这里使用到了QT的Line Edit控件；
在这里插入图片描述
然后对这两个文本框进行命名，方便编写代码的时候不会弄混淆；
首先双击需要更改的文本框（LineEdit），然后在属性那里将该文本框的值改为自己的；例如，我第一个需要显示温度数据，则将其改为line_Temp;第二个需要显示湿度数据，则将其改为line_Humi；
在这里插入图片描述
（2）、在两个文本框前面添加各自的标题：在这里需要用到QT的label控件；
在这里插入图片描述
双击添加的Label更改里面的文字信息；
同样为了方便编程将这两个label的属性名称依次改成lab_Temp、lab_Humi；
在这里插入图片描述
但是这样有些人又会觉得字太小了，字体也不是自己喜欢的类型（比如我就喜欢楷体），怎么办呢？
在这个地方可以设置文本框的长宽大小；
在这里插入图片描述
在这里可以设置字体的大小和字体类型：其中字体族设置字体类型，点大小设置字体大小。
在这里插入图片描述
（3）、为了整齐，咱们将这四个放一块。
首先先添加一个Group Box，并调节一下大小范围。
在这里插入图片描述
然后全选需要放进去的四个玩意；
在这里插入图片描述
将这四个全部放进Group Box里面，然后点击上面的栅格布局，然后自己调节一下范围。最后改一下GroupBox的名称：实时数据。具体的字体大小和字体类型同上面一样，自行设置即可；
在这里插入图片描述
在这里插入图片描述
(4)、设置串口相关的东西
首先添加一个Combo Box，这个效果是用来下拉选项，用来显示搜索到的端口号；
在这里插入图片描述
咱再添加两个按钮用来搜索串口和打开串口，这里用到了QT的Push Button控件，然后继续更改相关属性，改成咱们自己方便编程的；
在这里插入图片描述
咱们再添加一个label用来显示"端口号："；再和上面一样添加一个Group Box，将这四个玩意也放进去进行栅格布局一下，然后调节一下位置就行了。
在这里插入图片描述
最后添加一个退出按钮，用来关闭这个上位机（具体设置见我另一篇博客：Qt学习笔记一：按键关闭窗口）

最后编译一遍，显示效果如图。
在这里插入图片描述
（5）、添加坐标系用以绘制实时动态曲线

第一步：复制两个文件到工程目录下，也可以自己新建两个TXT文件，将代码复制进去然后改后缀；具体代码后面会一并粘贴；
在这里插入图片描述
第二步：点击“Headers”添加现有文件，点击“Sources”添加现有文件；
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
这时候如果直接编译会出现很多错误，这是因为.pro工程文件没有把这两个文件添加进去；
在这里插入图片描述
怎么弄呢？
先双击tempandhumi.pro打开工程文件代码，然后在QT += widgets 后面加上printsupport，这样再编译就不会出错了。
在这里插入图片描述
在这里插入图片描述
然后咱们再回到ui窗口设计界面。
首先添加一个Widget并调整一下大小。
在这里插入图片描述
然后右键将其提升为QCustomplot。
在这里插入图片描述
为了方便分别，咱们这里也同样将这个坐标系放进一个GroupBox里面；具体设置就不再赘述
在这里插入图片描述
设计完ui界面以后，编译一遍，结果如图所示；
在这里插入图片描述
2.3、代码设计编写
在开始前，咱们需要在.pro文件里面加上这样一句话

QT       += serialport

（1）、双击widget.h。由于是串口通信，因此要用到QT自带的串口控件。
首先咱们先添加几个头文件；

/*------------------------用户代码头文件---------------------------*/
#include <QtSerialPort/QSerialPort>//串口
#include <QtSerialPort/QSerialPortInfo>//串口
#include <QDebug>//用于在控制台输出调试信息
#include <QTime>//定时器
#include <QPainter>//坐标系绘图

然后回到ui设计界面对两个按钮进行操作：右键点击搜索串口将其转到槽，选择信号为clicked（）；
在这里插入图片描述
在这里插入图片描述
然后在widget.h和widget.cpp里面就会出现这两个按键函数；
在这里插入图片描述
在这里插入图片描述
在widget.h的private slots下面添加两个新函数：

    void AnalyzeData();//数据读取
    void setupPlot();//初始化

在这里插入图片描述
同样在widget.cpp里面添加这两个函数；
在这里插入图片描述
在widget.h里面的private下添加这几句代码；

 	QSerialPort *myserial;//声明串口类，myserial是QSerialPort的实例
    bool serial_flag,start_flag;//定义两个标志位
    QByteArray alldata;//接收串口数据
    //绘图函数
    QDateTime mycurrenttime;//系统当前时间
    QDateTime mystarttime;//系统开始时间

至此widget.h里面的代码已经写完了，接下来便是具体函数的编写。
点击打开widget.cpp；

（2）、在

Widget::Widget(QWidget *parent) :
    QWidget(parent),
    ui(new Ui::Widget)
{
    ui->setupUi(this);
}

里面添加这几句代码

	myserial = new QSerialPort();
    serial_flag = true;
    start_flag = true;
    setupPlot();//图形界面初始化函数

（3）、搜索串口代码

void Widget::on_btn_search_port_clicked()
{
    foreach(const QSerialPortInfo &info, QSerialPortInfo::availablePorts())//读取串口信息
    {
        myserial->setPort(info);//这里相当于自动识别串口号之后添加到了cmb，如果要手动选择可以用下面列表的方式添加进去
        if(myserial->open(QIODevice::ReadWrite))
         {
          ui->comboBox->addItem(myserial->portName());//将串口号添加到cmb
          myserial->close();//关闭串口等待人为(打开串口按钮)打开
         }
     }
}

（4）、打开串口代码

void Widget::on_btn_open_port_clicked()
{
    if(serial_flag)
    {
        ui->comboBox->setDisabled(true); //禁止修改串口
        myserial->setPortName(ui->comboBox->currentText()); //设置串口号
        myserial->setBaudRate(QSerialPort::Baud115200); //设置波特
        myserial->setDataBits(QSerialPort::Data8); //设置数据位数
        myserial->setParity(QSerialPort::NoParity);//设置奇偶校验
        myserial->setStopBits(QSerialPort::OneStop);//设置停止位
        myserial->setFlowControl(QSerialPort::NoFlowControl);//非流控制
        if(myserial->open(QIODevice::ReadWrite))
        {
            connect(myserial,&QSerialPort::readyRead,this,&Widget::AnalyzeData);
            mystarttime = QDateTime::currentDateTime();//图像横坐标初始值参考点，读取初始时间
            qDebug()<<"串口打开成功";
        }
        else
        {
            qDebug()<<"串口打开失败";
            //QMessageBox::warning(this,tr("waring"),tr("串口打开失败"),QMessageBox::Close);
        }
        ui->btn_open_port->setText("关闭串口");
        serial_flag = false;//串口标志位置失效
    }
    else
    {
        ui->comboBox->setEnabled(true);//串口号下拉按钮使能工作
        myserial->close();
        ui->btn_open_port->setText("打开串口");//按钮显示“打开串口”
        serial_flag = true;//串口标志位置工作
    }
}

（5）、数据分析代码
首先咱们先对串口发送过来的数据进行定义；

	QByteArray mytemp = myserial->readAll();//定义mytemp为串口读取的所有数据

为了方便在控制台进行观测，我加了一句（这一句可有可无）

 qDebug()<<"mytemp:"<<mytemp;

当有数据传输过来时，咱们先对数据进行拆分，因为有两个数据：温度数据和湿度数据，因此咱们先对数据进行一个简单的协议设定：数据中T与P中间的是温度数据，H与I之间的是湿度数据；当然这个数据协议也得在下位机程序里面同样设定；

QString StrI1=tr(mytemp.mid(mytemp.indexOf("T")+1,mytemp.indexOf("P")-mytemp.indexOf("T")-1));//自定义了简单协议，通过前面字母读取需要的数据
QString StrI2=tr(mytemp.mid(mytemp.indexOf("H")+1,mytemp.indexOf("I")-mytemp.indexOf("H")-1));

这个是stm32程序里面对串口发送的数据的协议设定；
在这里插入图片描述
然后两个文本框显示相对应的实时数据；

ui->line_Temp->setText(StrI1);//显示读取温度值
ui->line_Humi->setText(StrI2);//显示读取湿度值

由于串口发送过来的是字符串，因此咱们需要将字符串穿换成浮点数的数据格式；

float dataI1=StrI1.toFloat();//将字符串转换成float类型进行数据处理
float dataI2=StrI2.toFloat();//将字符串转换成float类型进行数据处理

获取系统时间；

 mycurrenttime = QDateTime::currentDateTime();//获取系统时间
double xzb = mystarttime.msecsTo(mycurrenttime)/1000.0;//获取横坐标，相对时间就是从0开始

将转换好的数据发给坐标系显示；

ui->widget_plot->graph(0)->addData(xzb,dataI1);//添加数据1到曲线1
ui->widget_plot->graph(1)->addData(xzb,dataI2);//添加数据1到曲线1

最后设定横坐标显示范围；

 if(xzb>30)
        {
            ui->widget_plot->xAxis->setRange((double)qRound(xzb-30),xzb);//设定x轴的范围
        }
        else ui->widget_plot->xAxis->setRange(0,30);//设定x轴的范围
        ui->widget_plot->replot();//每次画完曲线一定要更新显示

（6）、坐标系的曲线显示代码
具体的就不分析了，里面都有注释；

void Widget::setupPlot()
{
    //设置曲线一
    ui->widget_plot->addGraph();//添加一条曲线
    QPen pen;
    pen.setWidth(1);//设置画笔线条宽度
    pen.setColor(Qt::blue);
    ui->widget_plot->graph(0)->setPen(pen);//设置画笔颜色
    ui->widget_plot->graph(0)->setBrush(QBrush(QColor(0, 0, 255, 20))); //设置曲线画刷背景
    ui->widget_plot->graph(0)->setName("0-100");
    ui->widget_plot->graph(0)->setAntialiasedFill(false);
    ui->widget_plot->graph(0)->setLineStyle((QCPGraph::LineStyle)1);//曲线画笔
    ui->widget_plot->graph(0)->setScatterStyle(QCPScatterStyle(QCPScatterStyle::ssNone,5));//曲线形状


    ui->widget_plot->addGraph();//添加一条曲线
    pen.setColor(Qt::red);
    ui->widget_plot->graph(1)->setPen(pen);//设置画笔颜色
    ui->widget_plot->graph(1)->setBrush(QBrush(QColor(0, 0, 255, 20))); //设置曲线画刷背景
    ui->widget_plot->graph(1)->setName("0-100");
    ui->widget_plot->graph(1)->setAntialiasedFill(false);
    ui->widget_plot->graph(1)->setLineStyle((QCPGraph::LineStyle)1);//曲线画笔
    ui->widget_plot->graph(1)->setScatterStyle(QCPScatterStyle(QCPScatterStyle::ssNone,5));//曲线形状

    //设置图表
    ui->widget_plot->xAxis->setLabel(QStringLiteral("时间/s"));//设置x坐标轴名称
    ui->widget_plot->xAxis->setLabelColor(QColor(20,20,20));//设置x坐标轴名称颜色
    ui->widget_plot->xAxis->setAutoTickStep(false);//设置是否自动分配刻度间距
    ui->widget_plot->xAxis->setTickStep(2);//设置刻度间距5
    ui->widget_plot->xAxis->setRange(0,30);//设定x轴的范围

    ui->widget_plot->yAxis->setLabel(QStringLiteral("PH & TDS"));//设置y坐标轴名称
    ui->widget_plot->yAxis->setLabelColor(QColor(20,20,20));//设置y坐标轴名称颜色
    ui->widget_plot->yAxis->setAutoTickStep(false);//设置是否自动分配刻度间距
    ui->widget_plot->yAxis->setTickStep(10);//设置刻度间距1
    ui->widget_plot->yAxis->setRange(0,100);//设定y轴范围

    ui->widget_plot->axisRect()->setupFullAxesBox(true);//设置缩放，拖拽，设置图表的分类图标显示位置
    ui->widget_plot->setInteractions(QCP::iRangeDrag | QCP::iRangeZoom| QCP::iSelectAxes);
    ui->widget_plot->axisRect()->insetLayout()->setInsetAlignment(0,Qt::AlignTop | Qt::AlignRight);//图例显示位置右上
    ui->widget_plot->legend->setVisible(true);//显示图例

    ui->widget_plot->replot();
}

到此，所有代码就编写完成。运行一下：
在这里插入图片描述
如果咱们需要给它换个名称，便在ui->setupUi（this）；下面添加这么一句话即可；这样的话就可以更改标题了，至于更换软件图标（左上角那个东东），也很简单，自己去搜一下如何添加ico文件，我这里就不多说了；

this->setWindowTitle(QString("温湿度监测系统"));  //设置标题

在这里插入图片描述

3、测试结果

将制作的基于STM32的温湿度系统通过串口与电脑连接，打开上位机，点击搜索串口，然后点击打开串口，这样数据就会慢慢传递过来，同时也会绘制出两个参数的变化曲线；
效果如下
在这里插入图片描述

在这里插入图片描述

4、相关代码

4.1、tempandhumi.pro

#-------------------------------------------------
#
# Project created by QtCreator 2020-08-29T10:38:04
#
#-------------------------------------------------

QT       += core gui
QT       += serialport
greaterThan(QT_MAJOR_VERSION, 4): QT += widgets printsupport

TARGET = tempandhumi
TEMPLATE = app

# The following define makes your compiler emit warnings if you use
# any feature of Qt which as been marked as deprecated (the exact warnings
# depend on your compiler). Please consult the documentation of the
# deprecated API in order to know how to port your code away from it.
DEFINES += QT_DEPRECATED_WARNINGS

# You can also make your code fail to compile if you use deprecated APIs.
# In order to do so, uncomment the following line.
# You can also select to disable deprecated APIs only up to a certain version of Qt.
#DEFINES += QT_DISABLE_DEPRECATED_BEFORE=0x060000    # disables all the APIs deprecated before Qt 6.0.0


SOURCES += \
        main.cpp \
        widget.cpp \
    qcustomplot.cpp

HEADERS += \
        widget.h \
    qcustomplot.h

FORMS += \
        widget.ui

4.2、widget.h

#ifndef WIDGET_H
#define WIDGET_H

#include <QWidget>

/*------------------------用户代码头文件---------------------------*/
#include <QtSerialPort/QSerialPort>//串口
#include <QtSerialPort/QSerialPortInfo>//串口
#include <QDebug>//用于在控制台输出调试信息
#include <QTime>//定时器
#include <QPainter>//坐标系绘图


namespace Ui {
class Widget;
}

class Widget : public QWidget
{
    Q_OBJECT

public:
    explicit Widget(QWidget *parent = 0);
    ~Widget();

private slots:
    void on_btn_search_port_clicked();

    void on_btn_open_port_clicked();

    void AnalyzeData();//数据读取

    void setupPlot();//初始化
private:
    Ui::Widget *ui;
    QSerialPort *myserial;//声明串口类，myserial是QSerialPort的实例
    bool serial_flag,start_flag;//定义两个标志位
    QByteArray alldata;//接收串口数据
    //绘图函数
    QDateTime mycurrenttime;//系统当前时间
    QDateTime mystarttime;//系统开始时间
};

#endif // WIDGET_H

4.3、main.cpp

#include "widget.h"
#include <QApplication>

int main(int argc, char *argv[])
{
    QApplication a(argc, argv);
    Widget w;
    w.show();

    return a.exec();
}

4.4、widget.cpp

#include "widget.h"
#include "ui_widget.h"
#include <QVector>
#include <QMessageBox>

Widget::Widget(QWidget *parent) :
    QWidget(parent),
    ui(new Ui::Widget)
{
    ui->setupUi(this);
    this->setWindowTitle(QString("温湿度监测系统"));  //设置标题
    myserial = new QSerialPort();
    serial_flag = true;
    start_flag = true;
    setupPlot();//图形界面初始化函数
}

Widget::~Widget()
{
    delete ui;
}

void Widget::on_btn_search_port_clicked()
{
    foreach(const QSerialPortInfo &info, QSerialPortInfo::availablePorts())//读取串口信息
    {
        myserial->setPort(info);//这里相当于自动识别串口号之后添加到了cmb，如果要手动选择可以用下面列表的方式添加进去
        if(myserial->open(QIODevice::ReadWrite))
         {
          ui->comboBox->addItem(myserial->portName());//将串口号添加到cmb
          myserial->close();//关闭串口等待人为(打开串口按钮)打开
         }
     }
}

void Widget::on_btn_open_port_clicked()
{
    if(serial_flag)
    {
        ui->comboBox->setDisabled(true); //禁止修改串口
        myserial->setPortName(ui->comboBox->currentText()); //设置串口号
        myserial->setBaudRate(QSerialPort::Baud115200); //设置波特
        myserial->setDataBits(QSerialPort::Data8); //设置数据位数
        myserial->setParity(QSerialPort::NoParity);//设置奇偶校验
        myserial->setStopBits(QSerialPort::OneStop);//设置停止位
        myserial->setFlowControl(QSerialPort::NoFlowControl);//非流控制
        if(myserial->open(QIODevice::ReadWrite))
        {
            connect(myserial,&QSerialPort::readyRead,this,&Widget::AnalyzeData);
            mystarttime = QDateTime::currentDateTime();//图像横坐标初始值参考点，读取初始时间
            qDebug()<<"串口打开成功";
        }
        else
        {
            qDebug()<<"串口打开失败";
            //QMessageBox::warning(this,tr("waring"),tr("串口打开失败"),QMessageBox::Close);
        }
        ui->btn_open_port->setText("关闭串口");
        serial_flag = false;//串口标志位置失效
    }
    else
    {
        ui->comboBox->setEnabled(true);//串口号下拉按钮使能工作
        myserial->close();
        ui->btn_open_port->setText("打开串口");//按钮显示“打开串口”
        serial_flag = true;//串口标志位置工作
    }
}

void Widget::AnalyzeData()
{
    QByteArray mytemp = myserial->readAll();//定义mytemp为串口读取的所有数据
    qDebug()<<"mytemp:"<<mytemp;
    if(!mytemp.isEmpty())
    {
        QString StrI1=tr(mytemp.mid(mytemp.indexOf("T")+1,mytemp.indexOf("P")-mytemp.indexOf("T")-1));//自定义了简单协议，通过前面字母读取需要的数据
        QString StrI2=tr(mytemp.mid(mytemp.indexOf("H")+1,mytemp.indexOf("I")-mytemp.indexOf("H")-1));
        ui->line_Temp->setText(StrI1);//显示读取温度值
        ui->line_Humi->setText(StrI2);//显示读取湿度值
        float dataI1=StrI1.toFloat();//将字符串转换成float类型进行数据处理
        float dataI2=StrI2.toFloat();//将字符串转换成float类型进行数据处理

        mycurrenttime = QDateTime::currentDateTime();//获取系统时间
        double xzb = mystarttime.msecsTo(mycurrenttime)/1000.0;//获取横坐标，相对时间就是从0开始
        qDebug()<<"xzb:"<<xzb;
        //注：下位机每隔10ms发送一次数据
        ui->widget_plot->graph(0)->addData(xzb,dataI1);//添加数据1到曲线1
        ui->widget_plot->graph(1)->addData(xzb,dataI2);//添加数据1到曲线1
        if(xzb>30)
        {
            ui->widget_plot->xAxis->setRange((double)qRound(xzb-30),xzb);//设定x轴的范围
        }
        else ui->widget_plot->xAxis->setRange(0,30);//设定x轴的范围
        ui->widget_plot->replot();//每次画完曲线一定要更新显示
    }
}

void Widget::setupPlot()
{
    //设置曲线一
    ui->widget_plot->addGraph();//添加一条曲线
    QPen pen;
    pen.setWidth(1);//设置画笔线条宽度
    pen.setColor(Qt::blue);
    ui->widget_plot->graph(0)->setPen(pen);//设置画笔颜色
    ui->widget_plot->graph(0)->setBrush(QBrush(QColor(0, 0, 255, 20))); //设置曲线画刷背景
    ui->widget_plot->graph(0)->setName("0-100");
    ui->widget_plot->graph(0)->setAntialiasedFill(false);
    ui->widget_plot->graph(0)->setLineStyle((QCPGraph::LineStyle)1);//曲线画笔
    ui->widget_plot->graph(0)->setScatterStyle(QCPScatterStyle(QCPScatterStyle::ssNone,5));//曲线形状


    ui->widget_plot->addGraph();//添加一条曲线
    pen.setColor(Qt::red);
    ui->widget_plot->graph(1)->setPen(pen);//设置画笔颜色
    ui->widget_plot->graph(1)->setBrush(QBrush(QColor(0, 0, 255, 20))); //设置曲线画刷背景
    ui->widget_plot->graph(1)->setName("0-100");
    ui->widget_plot->graph(1)->setAntialiasedFill(false);
    ui->widget_plot->graph(1)->setLineStyle((QCPGraph::LineStyle)1);//曲线画笔
    ui->widget_plot->graph(1)->setScatterStyle(QCPScatterStyle(QCPScatterStyle::ssNone,5));//曲线形状

    //设置图表
    ui->widget_plot->xAxis->setLabel(QStringLiteral("时间/s"));//设置x坐标轴名称
    ui->widget_plot->xAxis->setLabelColor(QColor(20,20,20));//设置x坐标轴名称颜色
    ui->widget_plot->xAxis->setAutoTickStep(false);//设置是否自动分配刻度间距
    ui->widget_plot->xAxis->setTickStep(2);//设置刻度间距5
    ui->widget_plot->xAxis->setRange(0,30);//设定x轴的范围

    ui->widget_plot->yAxis->setLabel(QStringLiteral("PH & TDS"));//设置y坐标轴名称
    ui->widget_plot->yAxis->setLabelColor(QColor(20,20,20));//设置y坐标轴名称颜色
    ui->widget_plot->yAxis->setAutoTickStep(false);//设置是否自动分配刻度间距
    ui->widget_plot->yAxis->setTickStep(10);//设置刻度间距1
    ui->widget_plot->yAxis->setRange(0,100);//设定y轴范围

    ui->widget_plot->axisRect()->setupFullAxesBox(true);//设置缩放，拖拽，设置图表的分类图标显示位置
    ui->widget_plot->setInteractions(QCP::iRangeDrag | QCP::iRangeZoom| QCP::iSelectAxes);
    ui->widget_plot->axisRect()->insetLayout()->setInsetAlignment(0,Qt::AlignTop | Qt::AlignRight);//图例显示位置右上
    ui->widget_plot->legend->setVisible(true);//显示图例

    ui->widget_plot->replot();
}

鉴于qcustomplot.h和qcustomplot.cpp代码太长因此我将它俩放在我的百度网盘里面，请自行下载。
链接: https://pan.baidu.com/s/1NfzuVXYvGBMGKE9dZ-0Mfw?pwd=4avi 提取码: 4avi

项目源代码：温湿度上位机

我也是个初学者，有什么问题可以互相讨论互相学习，如果觉得这篇文章对你有用请点赞评论一波谢谢。

taxingdianzi
关注
  • 238
    点赞
  • 踩
  • 799
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 142
    评论
专栏目录
温湿度实时监测的上位机和下位机
02-14
温湿度实时监测的VB上位机和C下位机。 不要积分，如果哪天系统自动设置了积分，联系我重新上传。 51单片机实时读取温湿度传感器数据并通过串口发送给计算机，上位机实时显示数据
手把手教你制作一个温湿度上位机（串口通信）_串口温湿度采集上位机
最新发布
2401_85015152的博客
05-15 739
当有数据传输过来时，咱们先对数据进行拆分，因为有两个数据：温度数据和湿度数据，因此咱们先对数据进行一个简单的协议设定：数据中T与P中间的是温度数据，H与I之间的是湿度数据；具体的字体大小和字体类型同上面一样，自行设置即可；将制作的基于STM32的温湿度系统通过串口与电脑连接，打开上位机，点击搜索串口，然后点击打开串口，这样数据就会慢慢传递过来，同时也会绘制出两个参数的变化曲线；咱再添加两个按钮用来搜索串口和打开串口，这里用到了QT的Push Button控件，然后继续更改相关属性，改成咱们自己方便编程的；
手把手制作温湿度上位机(串口通信) 超详细代码 可远程部署
sybh的博客
03-22 1154
self.queue_recv.put(["当前温度为："+str(int(return_data_hex[6:10], 16) / 10)+"°C"+"\n"+"当前湿度为："+str(int(return_data_hex[10:14], 16) / 10)+"%"+"\n"+self.btn_baud_set.setText(_translate("MainWindow", "修改"))self.btn_send.setText(_translate("MainWindow", "开始/停止"))
C++基于QT实现的智能家居系统源代码+数据库，采用zigbee和stm32，实现了基本的监控 主要包括监控室内温度、湿度、烟雾
09-06
C++基于QT实现的智能家居系统源代码+数据库 本系统分为硬件和软件两部分内容，下位机 STM32 单片机驱动各个传感器模块采集数据，然后发送给 ZigBee 终端，ZigBee 终端在接收到数据后发送给协调器，协调器是和 ARM开发板(上位机)相连接的，ARM 开发板收到数据后进行相应的解析并显示在界面上。其中ARM开发板上跑的是使用 Qt 编写的程序，经过交叉编译后移植到了开发板上。
QT | 编写一个简单的上位机
I_feige的博客
03-20 5625
QT | 编写一个简单的上位机
vs2022 上位机开发---串口助手
shaun2001的博客
01-25 4316
vs2022用c#开发串口助手
从零开始编写一个上位机（串口助手）QT Creator + C++
热门推荐
believe666的博客
05-21 2万+
提示：本博客作为学习笔记，有错误的地方希望指正，此文可能会比较长，作为学习笔记的积累，希望对来着有帮助。   绪论：笔者这里使用的是QTCreator和C++来实现一个简单的串口上位机的开发的简单过程，使用到C++，主要是为了后面使用Python开发上位机打下基础。这里主要分为初识C++的一些基本知识，其次是QT Creator的使用。特别声明感谢【北京迅为】嵌入式学习之QT学习篇的学习视频，这里的学习笔记就是根据视频中的内容实战记录下来的。 文章目录一、C++知识1、初识C++2、C++输入输出控制2.1
C#编写一个串口助手上位机软件
博客
11-19 5341
对于工程师来说，串口助手可以说是必不可少的一个工具，一个好的串口助手可以大大方便我们的研发调试。网上串口助手很多，如果能够根据自己需要做一个合适的串口助手，那么既能方便自己，也能掌握上位机的开发，对于自己未来的发展方向不得不说是一件非常不错的事。 首先看一下完成的串口工具演示 自发自收验证数据： 接收外部设备数据： 接下来我们就开始制作一个串口助手。 开发一个软件，必不可少的就是软件的安装，我们采用的是Vi...
labviw制作的简易的温湿度上位机
12-22
labviw制作的简易的温湿度上位机，下位机是51
手把手教你写一个微信小程序
02-24
现在微信小程序越来越火，...先创建一个空文件夹然后打开开发者工具，新建项目，按需选择启动模板，这里选择的是建立普通快速启动模板点击确定后，你的小程序就创建好啦。默认的项目结构关于默认项目结构里的介绍，我
手把手教你构建一个高性能、高可用的大型分布式网站
02-25
本文来自于51cto，本文是学习大型分布式网站架构的技术总结，对构建一个高性能、高可用、可伸缩及可扩展的分布式网站进行了概要性描述，并给出一个架构参考。大型网站一般有如下特点：1.用户多，分布广泛2.大流量，...
(完整word版)手把手教你labview串口通信.doc
11-16
(完整word版)手把手教你labview串口通信.doc
C#串口上位机软件开发快速学习方法归纳
lvdoushabing_的博客
04-26 1949
如上图所示，为工况串口调试中常用的上位机调试助手界面。界面由串口配置连接、数据接收栏和数据发送栏构成。通过C sharp语言可以开发设计出类似的上位机调试软件，并进一步添加波形显示功能和数据TEXT、EXCEL文本保存功能。（1） 收集到的比较完整的学习资料及学习顺序如下所示，全面的学习资料分为8个模块，对于。（3）C#串口上位机开发流程（视频附各节源码）常见普通串口助手界面。
C# | 上位机开发新手指南（二）上位机通信
猿长大人
03-30 7824
在上位机开发中，串口通信和TCP通信是两种常见的通信方式。串口通信是指通过串口将数据发送和接收到控制器或其他外设中，TCP通信则是通过网络将数据传输到远程设备中。下面介绍一下为什么学习串口通信和TCP通信在上位机开发中是很重要的。
零基础C++开发上位机--基于QT5.15的串口助手（四）
adamsecond
02-28 863
昨天我们研究Ui界面，并且在程序的部分完成可可用端口的搜索，接下来我们继续学习开发串口助手的通信部分的程序。
上位机程序设计----串口通信
l2903865901的博客
07-02 2382
接上回，我们根据项目目标的需求制作了对应的解决方案，所以我们要逐步通过代码来完成我们的项目功能的实现。所以，本文章来讲讲在实现任务目标的串口通信部分。主要内容：1.什么是串口通信协议。2.通信协议三要素。3.串口通信协议。
C#实现串口通信的上位机开发
tz的博客
05-28 1万+
目录上位机串口通信C#串口通信：SerialPort类列出所有的串口C#串口通信：读写数据写数据：读数据：DataReceived事件：数据发送不同步问题：界面设计波形显示（chart控件的使用）设计思路定时器介绍：波形显示 上位机 上位机是指可以直接发出操控命令的计算机，一般是PC/host computer/master computer/upper computer,屏幕上显示各种信号变化（液压，水位，温度等）。下位机是直接控制设备获取设备状况的计算机，一般是PLC/单片机single chip mi
【串口助手】Python从零开始制作温湿度串口上位机
weixin_45840339的博客
12-04 5892
基于 python 的串口调试助手 上位机
用qt绘制温湿度折线图
06-09
要用Qt绘制温湿度折线图，可以使用Qt自带的绘图类QPainter和QPainterPath，具体步骤如下： 1. 创建QWidget或QFrame控件作为绘制图形的容器，重写其paintEvent方法，在该方法中进行绘制操作。 2. 在paintEvent方法中创建QPainter对象，设置画笔和画刷的属性，如颜色、线宽等。 3. 创建QPainterPath对象，通过addRect、addLine等方法绘制折线图的线条和坐标轴。 4. 通过QPainter的drawPath方法将QPainterPath对象绘制出来。 下面是一个简单的示例代码，用于绘制温湿度折线图： ``` void MyWidget::paintEvent(QPaintEvent* event) { QPainter painter(this); painter.setRenderHint(QPainter::Antialiasing); // 抗锯齿 painter.setPen(QPen(Qt::black, 2)); // 设置画笔颜色和线宽 // 绘制坐标轴 painter.drawLine(50, 20, 50, 200); // y轴 painter.drawLine(50, 200, 300, 200); // x轴 // 绘制温度折线 QPainterPath tempPath; tempPath.moveTo(50, 200 - 5 * m_temperatures[0]); // 第一个点 for(int i = 1; i < m_temperatures.size(); ++i) { tempPath.lineTo(50 + i * 10, 200 - 5 * m_temperatures[i]); // 连线 } painter.setPen(QPen(Qt::red, 2)); // 设置画笔颜色和线宽 painter.drawPath(tempPath); // 绘制湿度折线 QPainterPath humidPath; humidPath.moveTo(50, 200 - 5 * m_humidities[0]); // 第一个点 for(int i = 1; i < m_humidities.size(); ++i) { humidPath.lineTo(50 + i * 10, 200 - 5 * m_humidities[i]); // 连线 } painter.setPen(QPen(Qt::blue, 2)); // 设置画笔颜色和线宽 painter.drawPath(humidPath); } ``` 其中，m_temperatures和m_humidities是存储温度和湿度数据的容器，可以通过外部接口或者文件读取等方式获取数据。在绘制折线时，通过遍历数据容器，计算出每个点的坐标，然后使用QPainterPath的moveTo和lineTo方法将点连接成线。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 142
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

taxingdianzi

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值