一.简介

最近粗略地学习了一下上位机的编程，大致了解了底层硬件与上位机之间的串口通信逻辑，TCP通信和UDP通信暂时还未学习。

本次把学习思路分享一下，主要学习视频是b站上北京迅为的QT教学视频，我的笔记也是在此基础上总结出来。很多细节在视频中已经介绍，篇幅有限，仅分享大致流程。

源码附在文章最后，希望和各位多多交流。

视频链接：【北京迅为】嵌入式学习之QT学习篇
同时分享一篇很好的相关博客：开源一款基于Qt的串口波形显示上位机 & 以“笔”会友

二.界面展示

界面制作较为简陋，代码也较为粗糙，多多包涵。

1.基础界面：

2.波形显示界面

三.QT软件下载

下载地址：清华镜像网

★按以下步骤依次点开：

选择需要下载的版本，以v5.12.1为例：

下载windows版本：

安装教程视频中有详细介绍。唯一需要改变的是：
在选择安装组件时多勾选一个，用于后面的波形显示：

四.创建工程

五.工程文件结构

六.串口基本收发编写

注意：对于新手，请务必看完视频的基础教程再继续浏览，后续不包含基础教学，只提及一些学习过程中的难点和关键点。
串口的打开和普通的数据收发在迅飞的视频中均有介绍，在此不做过多讲解。

1.十六进制与字符之间的转换发送/接收

/************************发送数据按钮槽函数************************/
void Widget::on_sendBt_clicked()
{//将发送栏的数据输出long long a=0;//字符串形式if(ui->is16SendQch->checkState() == false){a=serialPort->write(ui->lineEdit->text().toLocal8Bit().data());}else    //16进制发送（将16进制转换成Ascll码对应的字符发送）{a=serialPort->write(QByteArray::fromHex(ui->lineEdit->text().toUtf8()).data()); //16进制数据解码后发送}//如果发送成功，a获取发送的字节长度，发送失败则返回-1；if(a > 0){sendNum += a;set_num_on_label(ui->sendLbl,"S:", sendNum);   //显示发送的数据量}
}

connect(serialPort, SIGNAL(readyRead()), this, SLOT(serialPortReadyRead_Slot()));
//把接收数据信号与接收槽函数关联，加在构造函数中。
/************************接收数据槽函数，需要手动关联************************/
void Widget::serialPortReadyRead_Slot()
{QString buf;QByteArray recBuf;int bufNum;uint8_t checkNum=0;   //计算校验码//读取所有字节recBuf=serialPort->readAll();//接收字节计数recvNum += recBuf.size();if(ui->is16RecvQch->checkState() == false)  //不使用16进制接收{buf = QString(recBuf);}else{buf = QString(recBuf).toUtf8().toHex();     //转成16进制//每个16进制数据之间用空格分隔bufNum = buf.length();while(bufNum-2 > 0){bufNum = bufNum - 2;buf.insert(bufNum," ");}}ui->plainTextEdit->insertPlainText(buf);         //把接收到的数据显示到接收栏上ui->plainTextEdit->moveCursor(QTextCursor::End); //光标设置，确保滚轮滚动//状态栏显示接收数据量set_num_on_label(ui->recvLbl, "R:", recvNum);
}

2.以16进制/字符发送切换（接收暂未编程）

/************************字符串/16进制发送切换槽函数************************/
void Widget::on_is16SendQch_stateChanged()
{QString str;int strNum;if(ui->is16SendQch->checkState() == false)  //转成字符串{ui->lineEdit->setText(QByteArray::fromHex(ui->lineEdit->text().toUtf8()).data());   //解码16进制}else    //转成16进制{str=ui->lineEdit->text().toUtf8().toHex().data();//每个16进制数据之间用空格分隔strNum = str.length();while(strNum-2 > 0){strNum = strNum - 2;str.insert(strNum," ");}ui->lineEdit->setText(str);}
}

该代码实现当切换16进制/字符发送时，发送框内的数据会自动转换：

3.定时发送

connect(&timer,SIGNAL(timeout()),this,SLOT(on_sendBt_clicked()));
//把定时器溢出信号与串口发送槽函数关联，加在构造函数中。
/************************定时发送开始/关闭槽函数************************/
void Widget::on_timeSendQch_stateChanged()
{long counter;if(ui->timeSendQch->checkState() == false)  //定时发送关闭{timer.stop();       //关闭定时器}else    //定时发送打开{counter = (ui->timeSendQl->text()).toLong();    //转换成长整型if(counter>0 && ui->lineEdit->text() != "" && isSerialConnect == true)     //定时时间需大于0ms且发送栏须有字符,否则关闭{timer.start(counter);   //打开定时器，单位ms}else{timer.stop();   //关闭定时器}}
}

使用展示：

七.波形显示

上图是由测试数据直接显示，基本没有问题。但是根据接收数据进行实时绘制会出现问题。

1.示波器显示可以最多两个通道；
2.可以控制波形显示的更新与暂停，以及波形1/波形2是否显示。
3.与匿名上位机等类似，需要使用特定的帧格式。
4.显示主题可以切换。
5.仍存在一些未解决的BUG（文章最后会提到）。
6.代码中包含测试波形的程序。

★波形显示基础界面借鉴了下面这篇博客，博客中博主也分享了源码：
QtChart——简单的动态波形图

1.波形数据接收并判断

在之前的就收槽函数中，加入了后面一部分波形数据的接收判断。

/************************接收数据槽函数，需要手动关联************************/
void Widget::serialPortReadyRead_Slot()
{QString buf;QByteArray recBuf;int bufNum;uint8_t checkNum=0;   //计算校验码//读取所有字节recBuf=serialPort->readAll();//接收字节计数recvNum += recBuf.size();if(ui->is16RecvQch->checkState() == false)  //不使用16进制接收{buf = QString(recBuf);}else{buf = QString(recBuf).toUtf8().toHex();     //转成16进制//每个16进制数据之间用空格分隔bufNum = buf.length();while(bufNum-2 > 0){bufNum = bufNum - 2;buf.insert(bufNum," ");}}ui->plainTextEdit->insertPlainText(buf);         //把接收到的数据显示到接收栏上ui->plainTextEdit->moveCursor(QTextCursor::End); //光标设置，确保滚轮滚动//状态栏显示计数值set_num_on_label(ui->recvLbl, "R:", recvNum);if(wa->isHidden() == false &&                   //界面打开后才进行波形显示static_cast<uint8_t>(recBuf[0]) == 0xAA &&   //同时要保证帧头和地址正确static_cast<uint8_t>(recBuf[1]) == 0xCC){//计算校验位for(uint8_t i=3;i<7;i++)checkNum += recBuf[i];if(checkNum == static_cast<uint8_t>(recBuf[7])) //校验位正确{//数据类型转换并转移到Ware的属性中wa->head    = static_cast<uint8_t>(recBuf[0]);wa->address = static_cast<uint8_t>(recBuf[1]);wa->length  = static_cast<uint8_t>(recBuf[2]);wa->ware1   = static_cast<uint8_t>(recBuf[3])*256+static_cast<uint8_t>(recBuf[4]);wa->ware2   = static_cast<uint8_t>(recBuf[5])*256+static_cast<uint8_t>(recBuf[6]);wa->check   = static_cast<uint8_t>(recBuf[7]);wa->isValid = true;}else{wa->isValid = false;}wa->serial_updata_data(wa->isValid);   //波形绘制}
}

2.使用波形测试数据时需要如下调整

1.去除下列注释符号：
Ware::Ware(QWidget *parent)
{//timer->setInterval(50); //定时50ms//timer->start();
}void Ware::init_slot()
{//connect(timer, SIGNAL(timeout()), this, SLOT(timerSlot())); //定时器溢出信号
}2.把下述代码用注释代码替换
void Ware::update_data()
{//double dataY1,dataY2;int16_t dataY1,dataY2;//获取波形数据//dataY1 = 10 * sin(M_PI * count * 4 / 180);   //获取新数据//dataY2 = 10 * cos(M_PI * count * 4 / 180);dataY1 = ware1;dataY2 = ware2;
}

其余代码直接下载源码查看。

八.打包与部署（生成.exe文件）

1.把工程切换到release模式，然后编译。

2.找到release模式构建的文件夹

3.把图标文件添加到工程文件夹下,从而更换.exe文件的图标。（图标格式必须为.ico这个格式的）

然后在.pro文件中添加如下代码：

★USB.ico为图片文件名称。

4.使用QT的工作台进行封包的操作

(1).直接通过windows的搜索功能找到QT工作台：

(2).然后在电脑桌面上建立新的文件夹（注意：文件夹名称不能出现中文）
再把工程文件中的.exe文件复制到新文件夹中。

(3).接着在QT工作台中输入：cd /d C:\Users\pc\Desktop\serial tools（后面为新建的文件夹路径）进入文件夹。

(4).然后输入：windeployqt serial.exe进行封包:

(5).封包结束后即可在文件夹中看到应用文件，双击即可使用。

九.待解决的问题

1.接收数据的波形数据高8位/低8位不能为0，否则无法正常显示波形；
2.使用测试数据进行波形绘制时不会卡顿；但是，当使用接收的数据进行波形绘制时，接收的数据量变大后容易卡顿，只有清除串口接收界面的数据才可以缓解；
3.鼠标移动可能会引起波形绘制错误。

十.源码分享

基于QT的串口收发和波形绘制上位机程序

【QT上位机设计——串口收发和波形显示】相关推荐

Qt上位机软件串口通讯
录了一个串口讲解的视频,分别放在了抖音和B站,大家可以看看,主要讲了一下原理, B站我的主页:laorenshen的个人空间_哔哩哔哩_Bilibili 视频源码下载免费:Qt上位机软件串口通讯,视频 ...
stm32中断方式的串口通信——上位机控制串口收发
文章目录前言一.什么是串口通信二.什么是中断--STM32 1.中断的概念 2.STM32下NVIC的介绍 3.中断优先级的介绍 4.外部中断的介绍三.串口通信keil工程文件 1.新建工程模 ...
从零开始编写一个上位机（串口助手）QT Creator + Python
提示:本博客作为学习笔记,有错误的地方希望指正,此文可能会比较长,作为学习笔记的积累,希望对来着有帮助. 绪论:笔者这里使用的是QTCreator和Python来实现一个简单的串口上位机的开发的简 ...
qt串口采用队列_基于STM32的RGB调色器——STM32程序和Qt上位机全开源
前言 uFUN开发板1.0版本评测时,基于Qt写了个小上位机,可以通过串口来控制板子上的RGB灯,通过控制,可以混合出任意的颜色,今天整理了一下,开源这个Qt上位机和STM32代码. 项目介绍基于u ...
从零开始编写一个上位机（串口助手）QT Creator + C++
提示:本博客作为学习笔记,有错误的地方希望指正,此文可能会比较长,作为学习笔记的积累,希望对来着有帮助. 绪论:笔者这里使用的是QTCreator和C++来实现一个简单的串口上位机的开发的简单过程 ...
QT 篇 QT上位机串口编程
QT 篇 QT上位机串口编程最近因为项目需要,需要用到上位机,通过串口与上位机进行通讯,来上传和下发一些数据以及控制指令,所以用QT写了一个上位机,并记录下来,免得到时候要用又到处翻资料. QT版本 ...
串口数据波形显示_【专题教程第6期】SEGGER的J-Scope波形上位机软件，RTT模式波形上传可飙到500KB/S...
[专题教程第6期]SEGGER的J-Scope波形上位机软件,RTT模式波形上传速度可狂飙到500KB/S左右说明: 1.在实际项目中,很多时候,我们需要将传感器或者ADC的数值以波形的形式显示.通 ...
STM32串口烧录BIN文件、字库文件【QT上位机】- Uart_Transfer_BIN_to_EX_FLASH
STM32串口烧录BIN文件.字库文件[QT上位机] 项目已开源至GitHub,供大家一起学习使用点我传送这里写目录标题 STM32串口烧录BIN文件.字库文件[QT上位机] 一.上位机部分 1. ...
1.QT上位机开发之表格设计-TABLE WIDGET
QT上位机开发之表格设计-TABLE WIDGET 开发平台: QT Designer QT5 系统:Windows 11 软件语言:python 项目需要开发上位机软件用于模块测试,自己之前没有做过 ...

【QT上位机设计——串口收发和波形显示】