1. 前言

我们本次实现的上位机的功能很简单：上位机通过串口来控制开发板上的一个LED的亮灭。界面如：

2. QT环境搭建

在着手编写上位机程序之前，让我们先搭建QT开发环境。我们将直接使用QT Creator，这是一个专为跨平台Qt开发设计的轻量级集成开发环境（IDE）。它不仅为初学者提供了易于上手的界面，还确保了开发人员能够快速掌握Qt框架。即使您不打算开发Qt应用程序，Qt Creator也是一个功能强大且易于使用的IDE。接下来，我们将一起进行Qt Creator的安装。

1、注册qt账号
我们需要先注册一个QT账号，后面安装Qt Creator的时候会用到。注册账号的地址为：

https://www.qt.io/zh-cn/product/development-tools

2、下载QT_Creator并安装
我们在Windows上进行开发，安装Windows版本的Qt Creator。下载地址：

1. https://download.qt.io/new_archive/qt/5.12/5.12.12/

2. 网盘下载链接：https://pan.baidu.com/s/1J1hK8ZVdBHBt-KClL8bSKw
   提取码：zj65

下载得到qt-opensource-windows-x86-5.12.12.exe。然后双击安装，

第二步需要输入账号密码，把我们上面注册好的账号密码填入即可。

勾选阅读条款，输入uplooking，点击下一步next

点击下一步next

换一下安装位置，不建议C盘安装，点击下一步next

一定要注意下面4个组件的安装勾选，MinGW7.3.0 32-bit是提供GCC编译环境，Source是QT源码包，QT chart & data 是项目需要的功能包（推荐大家安装Qt Chart）。点击下一步next

勾选许可证，点击下一步next

点击下一步next

点击安装install

安装需要10分钟左右，接下来需要配置一下MinGW的环境变量
在搜索菜单中输入path，点击编辑环境变量

为系统变量添加MinGW三个路径。两个bin，一个lib

采用系统终端检查gcc环境(gcc -v)

3. 验证QT_Creator是否安装成功

我们创建一个简单的C++工程来验证一下Qt Creator是否安装成功。

3.1 设计流程

Qt Creator搭建好之后我们接下来开始编写我们的上位机。

编写这个简单的上位机我们需要经过一下几个步骤：

1. 上位机界面设计；
2. 上位机逻辑代码编写；
3. 添加上位机图标；
4. 上位机程序的打包；
5. 上位机测试验证。

另外，QT中有三种基类，这里我们选择QWidget类。QT的三个基类如：

• QMainWindow类：提供一个带有菜单条，工具条和一个状态条的主应用程序窗口。
• QWidget类：所有用户界面对象的基类，窗口部件是用户界面的一个基本单元，它从窗口系统接收鼠标，键盘和其他消息，并在屏幕上绘制自己。
• QDialog类：对话框窗口的基类，对话框窗口主要用于短期任务和用户进行短期通讯的顶级窗口，QDialog可以是模态对话框或者是非模态对话框。

其中，项目文件.pro文件是用来告诉qmake关于为这个应用程序创建makefile所需要的细节。例如，一个源文件和头文件的列表、任何应用程序特定配置。例如，一个必需链接的额外库或者一个额外的包含路径、都应该放到项目文件中。

3. 2 上位机界面设计

Qt 一个可视化的界面设计工具：Qt 设计器（Qt Designer）。我们双击.ui文件就可以进入Qt Designer，在Qt Designer中我们可以通过拖动控件的方式来设计我们的界面，整个界面如：

我们从左侧的控件区把我们需要的控件拖动到界面编辑区中，我们这个简单地上位机用到的控件如：

这里需要注意的是波特率这个下拉框需要双击设置一些备选配置，如波特率设置选项，串口是自动获取的不需要设置：

大家可以在左边地控件区找到这三种控件拖动到界面编辑器进行修改、布局即可。
其中，布局可通过如下组件调整：

这几个组件的功能如：

布局组件	功能
Vertical Layout	垂直方向布局，组件自动在垂直方向上分布
Horizontal Layout	水平方向布局，组件自动在水平方向上分布
Grid Layout	网格状布局，网状布局大小改变时，每个网格的大小都改变
Form Layout	窗体布局，与网格状布局类似，但是只有最右侧的一列网格会改变大小
Horizontal Spacer	一个用于水平分隔的空格
Vertical Spacer	一个用于垂直分隔的空格

具体地用法大家可以自己去实操一下。

另外，我们需要给我们使用的控件重新命名，在右侧的对象管理区进行操作。命名为有意义的名字，因为后面编写代码会用到。有意义的名字利于编写易懂的代码，这边控件名称一定要与代码调用的一一对应。比如我们修改的名字如：

最后，控件的属性可根据需要在属性区进行调整。

4. 上位机逻辑代码编写

4.1 添加串口库、包含串口相关头文件

在Serial_app.pro文件添加串口库：

QT       += core gui serialport

在mainwindow.h文件包含串口头文件：

#include <QSerialPort>
#include <QSerialPortInfo>

QSerialPort 类提供了操作串口的各种接口。

QSerialPortInfo 是一个辅助类，可以提供计算机中可用串口的各种信息。

4.2 添加QSerialPort成员

在mainwindow.h的MainWindow类中添加一个QSerialPort成员：

QSerialPort *serialPort;

4.3 创建串口对象、搜索所有可用串口

在MainWindow构造函数中创建一个串口对象并搜索所有可用串口：

MainWindow::MainWindow(QWidget *parent) :QMainWindow(parent),ui(new Ui::MainWindow)
{QStringList serialNamePort;ui->setupUi(this);this->setWindowTitle("Serial_app");/* 创建一个串口对象 */serialPort = new QSerialPort(this);/* 搜索所有可用串口 */foreach (const QSerialPortInfo &inf0, QSerialPortInfo::availablePorts()) {serialNamePort<<inf0.portName();}ui->Serial_box->addItems(serialNamePort);
}

    ​​​​​​​        ​​​​​​​        

4.4 在`编写“打开串口”槽函数

信号和槽是用于对象之间的通信，它是Qt的核心机制。

当某个事件发生之后，比如，按钮检测到自己被点击了一下，它就会发出一个信号（signal）。如果有对象对这个信号感兴趣，想要处理的信号和自己的一个函数（称为槽（slot））绑定来处理这个信号。也就是说，当信号发出时，被连接的槽函数会自动被回调。

这里，我们点击打开串口按钮会发出clicked信号，此时对应槽函数on_Open_serial_clicked会被调用。下面我们来实现这个槽函数：

void MainWindow::on_Open_serial_clicked()
{/* 串口设置 */serialPort->setPortName(ui->Serial_box->currentText());serialPort->setBaudRate(ui->Baudrate_box->currentText().toInt());serialPort->setDataBits(QSerialPort::Data8);serialPort->setStopBits(QSerialPort::OneStop);serialPort->setParity(QSerialPort::NoParity);/* 打开串口提示框 */if (true == serialPort->open(QIODevice::ReadWrite)){QMessageBox::information(this, "提示", "串口打开成功");}else{QMessageBox::critical(this, "提示", "串口打开失败");}
}

这里我们写死数据位、停止位、求校验位；增加提示框。其中使用QMessageBox需要包含如下头文件：

#include <QMessageBox>

4.5 编写“关闭串口”、“点灯”、“灭灯”槽函数

按照上面打开串口槽函数的方法编写关闭串口、点灯、灭灯槽函数：

void MainWindow::on_Close_serial_clicked()
{QMessageBox::information(this, "提示", "串口关闭成功");
}void MainWindow::on_Turn_on_clicked()
{serialPort->write("ON\n");qDebug("ON\n");
}void MainWindow::on_Turn_off_clicked()
{serialPort->write("OFF\n");qDebug("OFF\n");
}

以上就是上位机逻辑代码的编写。

4.6 源码分享

文件目录分享

1. Serial_app.pro

# Automatically generate .qm files out of .ts files in TRANSLATIONS and
# EXTRA_TRANSLATIONS.
#
# If embed_translations is enabled, the generated .qm files are made available
# in the resource system under :/i18n/.
#
# Otherwise, the .qm files are available in the build directory in LRELEASE_DIR.
# They can also be automatically installed by setting QM_FILES_INSTALL_PATH.qtPrepareTool(QMAKE_LRELEASE, lrelease)isEmpty(LRELEASE_DIR): LRELEASE_DIR = .qm
isEmpty(QM_FILES_RESOURCE_PREFIX): QM_FILES_RESOURCE_PREFIX = i18nlrelease.name = lrelease
lrelease.input = TRANSLATIONS EXTRA_TRANSLATIONS
lrelease.output = $$LRELEASE_DIR/${QMAKE_FILE_IN_BASE}.qm
lrelease.commands = $$QMAKE_LRELEASE ${QMAKE_FILE_IN} $$QMAKE_LRELEASE_FLAGS -qm ${QMAKE_FILE_OUT}
silent: lrelease.commands = @echo lrelease ${QMAKE_FILE_IN} && $$lrelease.commands
lrelease.CONFIG = no_link
QMAKE_EXTRA_COMPILERS += lreleaseall_translations = $$TRANSLATIONS $$EXTRA_TRANSLATIONS
for (translation, all_translations) {# mirrors $$LRELEASE_DIR/${QMAKE_FILE_IN_BASE}.qm abovetranslation = $$basename(translation)QM_FILES += $$OUT_PWD/$$LRELEASE_DIR/$$replace(translation, \\..*$, .qm)
}
embed_translations {qmake_qm_files.files = $$QM_FILESqmake_qm_files.base = $$OUT_PWD/$$LRELEASE_DIRqmake_qm_files.prefix = $$QM_FILES_RESOURCE_PREFIXRESOURCES += qmake_qm_files
} else {!isEmpty(QM_FILES_INSTALL_PATH) {qm_files.files = $$QM_FILESqm_files.path = $$QM_FILES_INSTALL_PATHINSTALLS += qm_files}lrelease.CONFIG += target_predeps no_clean
}

2. mainwindows.h

#ifndef MAINWINDOW_H
#define MAINWINDOW_H#include <QMainWindow>
#include <QSerialPort>
#include <QSerialPortInfo>
#include <QMessageBox>
QT_BEGIN_NAMESPACE
namespace Ui { class MainWindow; }
QT_END_NAMESPACEclass MainWindow : public QMainWindow
{Q_OBJECTpublic:MainWindow(QWidget *parent = nullptr);~MainWindow();private slots:void on_Open_serial_clicked();void on_Close_serial_clicked();void on_Turn_on_clicked();void on_Turn_off_clicked();private:Ui::MainWindow *ui;QSerialPort *serialPort;
};
#endif // MAINWINDOW_H

3. main.cpp

#ifndef MAINWINDOW_H
#define MAINWINDOW_H#include <QMainWindow>
#include <QSerialPort>
#include <QSerialPortInfo>
#include <QMessageBox>
QT_BEGIN_NAMESPACE
namespace Ui { class MainWindow; }
QT_END_NAMESPACEclass MainWindow : public QMainWindow
{Q_OBJECTpublic:MainWindow(QWidget *parent = nullptr);~MainWindow();private slots:void on_Open_serial_clicked();void on_Close_serial_clicked();void on_Turn_on_clicked();void on_Turn_off_clicked();private:Ui::MainWindow *ui;QSerialPort *serialPort;
};
#endif // MAINWINDOW_H

4. mainwindows.cpp

#include "mainwindow.h"
#include "ui_mainwindow.h"MainWindow::MainWindow(QWidget *parent) :QMainWindow(parent),ui(new Ui::MainWindow)
{QStringList serialNamePort;ui->setupUi(this);this->setWindowTitle("Serial_app");/* 创建一个串口对象 */serialPort = new QSerialPort(this);/* 搜索所有可用串口 */foreach (const QSerialPortInfo &inf0, QSerialPortInfo::availablePorts()) {serialNamePort<<inf0.portName();}ui->Serial_box->addItems(serialNamePort);
}MainWindow::~MainWindow()
{delete ui;
}void MainWindow::on_Open_serial_clicked()
{/* 串口设置 */serialPort->setPortName(ui->Serial_box->currentText());serialPort->setBaudRate(ui->Baudrate_box->currentText().toInt());serialPort->setDataBits(QSerialPort::Data8);serialPort->setStopBits(QSerialPort::OneStop);serialPort->setParity(QSerialPort::NoParity);/* 打开串口提示框 */if (true == serialPort->open(QIODevice::ReadWrite)){QMessageBox::information(this, "提示", "串口打开成功");}else{QMessageBox::critical(this, "提示", "串口打开失败");}
}void MainWindow::on_Close_serial_clicked()
{QMessageBox::information(this, "提示", "串口关闭成功");
}void MainWindow::on_Turn_on_clicked()
{serialPort->write("ON\n");qDebug("ON\n");
}void MainWindow::on_Turn_off_clicked()
{serialPort->write("OFF\n");qDebug("OFF\n");
}

5. Serial_app_zh_CN.ts

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE TS>
<TS version="2.1" language="zh_CN"></TS>

6. mainwindows.ui

<?xml version="1.0" encoding="UTF-8"?>
<ui version="4.0"><class>MainWindow</class><widget class="QMainWindow" name="MainWindow"><property name="geometry"><rect><x>0</x><y>0</y><width>390</width><height>238</height></rect></property><property name="windowTitle"><string>MainWindow</string></property><widget class="QWidget" name="widget"><property name="minimumSize"><size><width>307</width><height>238</height></size></property><widget class="QWidget" name="gridLayoutWidget_2"><property name="geometry"><rect><x>20</x><y>20</y><width>399</width><height>134</height></rect></property><layout class="QGridLayout" name="gridLayout_3"><item row="0" column="0"><layout class="QGridLayout" name="gridLayout"><item row="2" column="0"><widget class="QComboBox" name="Serial_box"/></item><item row="0" column="0"><widget class="QLabel" name="Serial_label"><property name="text"><string>串口</string></property></widget></item><item row="3" column="0"><widget class="QLabel" name="Baudrate_label"><property name="text"><string>波特率</string></property></widget></item><item row="5" column="0"><widget class="QComboBox" name="Baudrate_box"><item><property name="text"><string>9600</string></property></item><item><property name="text"><string>115200</string></property></item></widget></item><item row="6" column="0"><layout class="QHBoxLayout" name="horizontalLayout"><item><widget class="QPushButton" name="Turn_off"><property name="text"><string>关灯</string></property></widget></item><item><widget class="QPushButton" name="Turn_on"><property name="text"><string>开灯</string></property></widget></item><item><widget class="QPushButton" name="Close_serial"><property name="text"><string>关闭串口</string></property></widget></item><item><widget class="QPushButton" name="Open_serial"><property name="text"><string>打开串口</string></property></widget></item></layout></item></layout></item></layout></widget></widget></widget><resources/><connections/>
</ui>

5. 添加上位机图标

5.1 图标下载网址

在网上找一个相关的.ico后缀的图标下载放到我们的工程路径下，
如：https://www.iconfont.cn/

5.2 ico转换

网站地址：https://www.ico51.cn/

复制ico文件到qt项目中，注意名称引用一致性

然后在我们的Serial_app.pro文件中添加如下一行代码：

RC_ICONS += \Serial_app.ico

6. 上位机程序打包

我们上面运行的上位机都是在Qt Creator中编译运行的，如果我们需要把编写好的可执行文件发送给别人使用的话还需要进行打包。上面我们的工程是Debug版本的：

打包之前，我们先把工程修改为Release版本：

然后在我们工程目录下得到：

此时，双击release文件夹下的serial_led.exe文件是会报错的，报错原因是找不到一些相关的动态库：

我们新建一个文件夹保存我们的打包文件Serial_app_packet，如：

把build-serial_led-Desktop_Qt_5_11_1_MinGW_32bit-Release\release路径下的serial_led.exe文件拷贝至serial_led_packet文件夹中：

打开QT for Disktop工具：

执行如下命令进入打包目录：

cd /d E:\Qt\example\Serial_app_packet

然后执行如下命令进行打包：

windeployqt Serial_app.exe

此时，serial_led_packet文件夹中的serial_led.exe文件就可以双击运行了，注意要插上串口模块，这样才可以测试：

此时就完成了程序的打包。此时我们把这一整个文件夹压缩发送给别人使用了。另外，我们也可以借助一些工具把这些文件打包成一个整体的.exe文件，这里不再介绍。

7. 上位机测试验证

我们点击上位机的点灯、灭灯按钮，则会通过串口分别发送ON\n、OFF\n，我们编写下位机代码进行接收，然后操控LED灯即可。
下面给出Arduino Uno开发板的程序

const int ledPin = 13; // LED连接到数字引脚13
const int serialBaudRate = 9600; // 设置串口波特率void setup() {pinMode(ledPin, OUTPUT); // 设置LED引脚为输出模式Serial.begin(serialBaudRate); // 初始化串口通信
}void loop() {if (Serial.available() > 0) { // 检查串口是否有数据可读String receivedData = Serial.readStringUntil('\n'); // 读取串口数据直到换行符if (receivedData == "ON") {digitalWrite(ledPin, HIGH); // 打开LED灯} else if (receivedData == "OFF") {digitalWrite(ledPin, LOW); // 关闭LED灯}}
}

大家根据需求修改代码，就可完成Serial_app应用控制Arduino Uno板载LED灯啦！😊😊😊

5. 总结

🥳🥳🥳现在，我们在本教程中，您学习了Qt安装与简易串口控制Arduino开发板小灯教程。🛹🛹🛹从而实现对外部世界进行感知，充分认识这个有机与无机的环境🥳🥳🥳科学地合理地进行创作和发挥效益，然后为人类社会发展贡献一点微薄之力。🤣🤣🤣

如果你有任何问题，可以通过下面的二维码加入鹏鹏小分队，期待与你思维的碰撞😘😘😘

参考文献：

1. 用Qt写一个上位机（完整版）