手把手教你编写你的第一个上位机

「爱情、让人受尽委屈。」 2023-01-19 08:12 269阅读 0赞

## 一、前言 ##

大家好，我是ZhengN，本次来教大家编写一个基于QT的简单的上位机。

学习一个新的东西我们都从最基础地实例开始，比如学习C语言我们会从编写一个hello程序开始、学习嵌入式我们从点灯开始。

同样的，我们也从编写一个简单的基于QT的上位机来体会体会上位机开发及认识认识QT。

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

![6b3bdceb5ddf06041d3501a739d427d5.png][]

演示视频：

## 二、QT环境搭建 ##

在开始编写上位机之前我们先来一起搭建一下QT开发环境（不然就不是手把手了，哈哈）。往期推文 **[QT | 详解Qt的几种开发方式][QT _ _Qt]**中有介绍到QT的两种开发环境：

*  使用VS + QT
 *  使用Qt Creator

这里我们选择直接使用QT\_Creator的方式。

Qt Creator是一个用于Qt开发的轻量级跨平台集成开发环境。

Qt Creator可带来两大关键益处：

*  提供首个专为支持跨平台开发而设计的集成开发环境 (IDE)，并确保首次接触Qt框架的开发人员能迅速上手和操作。
 *  即使不开发Qt应用程序，Qt Creator也是一个简单易用且功能强大的IDE。

下面我们来一起安装Qt Creator。

### 1、注册qt账号 ###

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

> https://www.qt.io/zh-cn/

![2b287d94a30f35890a6a56f296ea2638.png][]

![237e6de4f10b07c0d14d3b5e9af2a180.png][]

### 2、下载QT\_Creator并安装 ###

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

> https://download.qt.io/new\_archive/qt/5.11/5.11.3/

![78850b550fb13b8da24b10bff3a1771f.png][]

下载得到qt-opensource-windows-x86-5.11.3.exe。然后双击安装，第二步需要输入账号密码，把我们上面注册好的账号密码填入即可。

接下来还需要选择安装组件，根据自己需要进行选择安装，我安装的组件如：

![07c90153db10f508a8df214e4a4f2129.png][]

安装完成之后我们桌面上并没有Qt Creator的快捷方式，需要自己创建。找到Qt Creator的安装路径，然后把Qt Creator发送到桌面快捷方式即可。如：

![c2f7899a23c54b7b1014df1bbf8f1d41.png][]

### 3、验证QT\_Creator是否安装成功 ###

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

![36e9d72ed4948fb524fa195e91d31601.png][]

![44f668d2075aaa7825aaaa445bab6c4b.png][]

![530189b70313f4652fb9a56b073c97c1.png][]

![97a159e11982a8a099cb869e44561603.png][]

![953f65d85a799804dde0b4640db5fb48.png][]

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

## 三、编写一个简单的上位机 ##

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

*  上位机界面设计。
 *  上位机逻辑代码编写。
 *  添加上位机图标。
 *  上位机程序的打包。
 *  上位机测试验证。

### 1、新建一个serial\_led工程 ###

![6f7bcd9719f461bbf5fe413e9843f4b3.png][]

![cbba99c06703e5edadc83ed6402191fd.png][]

![86075f9b7627c391c948f5abdabc61f8.png][]

![0758ca9c765ed75d483e66bed28247cf.png][]

![5a15157cd019cc1c1fe6e5a1acd254e6.png][]

这里需要注意的一点是：`工程名及工程路径不要有中文字符`。

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

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

我们创建的工程如：

![bff670a06a4915667ccac663f930d697.png][]

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

### 2、上位机界面设计 ###

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

![a41910975bf518be4dbf7b3dc0e77550.png][]

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

![9ba9be145295cf37dc5e2d2c4dea5f65.png][]

这里需要注意的是波特率这个下拉框需要双击设置一些备选配置，如：

![b74954c629d51208aa4e6b7687652c27.png][]

![b9e84257e14694708674ba8b8d50d855.png][]

大家可以在左边地控件区找到这三种控件拖动到界面编辑器进行修改、布局即可。

其中，布局可通过如下组件调整：

![80efd13fe2722ea0950926f1efcef15f.png][]

这几个组件的功能如：

![9243757ca8800f40f8a6612ff6fef8a8.png][]

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

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

![f9c32be398bf7c2f2ed39f50b28ca011.png][]

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

### 3、上位机逻辑代码编写 ###

#### （1）添加串口库、包含串口相关头文件 ####

在`serial_led.pro`文件添加串口库：

QT += core gui serialport

![2c7c10f3fd8fc0f0c83ee5da7f11c59c.png][]

在`widget.h`文件包含串口头文件：

#include <QSerialPort>
    #include <QSerialPortInfo>

![67a1d21875c2ffa2eb946fbd517161ab.png][]

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

#### （2）添加QSerialPort成员 ####

在widget.h的Widget类中添加一个QSerialPort成员：

![aac0d0b868d1dfb6bf3e61644b3f945a.png][]

#### （3）创建串口对象、搜索所有可用串口 ####

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

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

![2a33d193eb281aa133bef3bcd3da4cf3.png][]

#### （4）编写“打开串口”槽函数 ####

![3207e672236e4ec92e3a9e72f52d7f38.png][]

![36eddbc7916a13f8babb7ca55c3e6918.png][]

![daca04ccbd198b77fc115bf124c4ab63.png][]

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

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

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

void Widget::on_openButton_clicked()
    {
        /* 串口设置 */
        serialPort->setPortName(ui->serialBox->currentText());
        serialPort->setBaudRate(ui->baudrateBox->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>

#### （5）编写“关闭串口”、“点灯”、“灭灯”槽函数 ####

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

void Widget::on_closeButton_clicked()
    {
        serialPort->close();
    }
    
    void Widget::on_onButton_clicked()
    {
        serialPort->write("ON\n");
        qDebug("ON\n");
    }
    
    void Widget::on_offButton_clicked()
    {
        serialPort->write("OFF\n");
        qDebug("OFF\n");
    }

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

### 4、添加上位机图标 ###

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

![38fc120a49c22f526de92cdeac13d1a7.png][]

图标下载网址如：

*  https://www.iconfont.cn/
 *  https://www.iconfont.cn/

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

RC_ICONS = led.ico

![ad477111e260a2b8998d9eb0a2833529.png][]

#### 5、上位机程序打包 ####

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

上面我们的工程是`Debug版本`的：

![451087ed2a827e7f25ae1917c64a1dfe.png][]

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

![dc150db38f302789bc3d52699dd4c292.png][]

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

![586f37c13d89bd1f1bb19afef5210f8a.png][]

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

![9e9b975d6813fa1c40553748cd760492.png][]

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

![0b064ad5efd0a8a4da2abc53f0ea701f.png][]

把build-serial\_led-Desktop\_Qt\_5\_11\_1\_MinGW\_32bit-Release\\release路径下的`serial_led.exe`文件拷贝至serial\_led\_packet文件夹中：

![d93d2db5b0ddbcf43be0d3fe20edb174.png][]

打开`QT for Disktop`工具：

![807881c8bd0c4104c28e07965ab75c87.png][]

![a6e60aaa2779b832e3d666e1333cc736.png][]

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

cd /d D:\Qt\qt_prj\serial_led\serial_led_packet

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

windeployqt serial_led.exe

![8340c7ac63e617348a9e0c00176a3554.png][]

此时，serial\_led\_packet文件夹中的`serial_led.exe`文件就可以双击运行了：

![20b9368b5b397d76046204d15f06183b.png][]

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

#### 6、上位机测试验证 ####

上位机我们写好了，接下来编写下位机代码来测试一下。

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

下位机是`小熊派IOT开发板`，测试代码如：

int main(void)
    {
      /* USER CODE BEGIN 1 */
     
      /* USER CODE END 1 */
    
      /* MCU Configuration----------------------------------------------------------*/
    
      /* Reset of all peripherals, Initializes the Flash interface and the Systick. */
      HAL_Init();
    
      /* USER CODE BEGIN Init */
    
      /* USER CODE END Init */
    
      /* Configure the system clock */
      SystemClock_Config();
    
      /* USER CODE BEGIN SysInit */
    
      /* USER CODE END SysInit */
    
      /* Initialize all configured peripherals */
      MX_GPIO_Init();
      MX_DMA_Init();
      MX_USART1_UART_Init();
      /* USER CODE BEGIN 2 */
      printf("Welcome to UART1 test!\r\n");
    
      /* USER CODE END 2 */
    
      /* Infinite loop */
      /* USER CODE BEGIN WHILE */
      while (1)
      {
    
      /* USER CODE END WHILE */
    
      /* USER CODE BEGIN 3 */ 
      if(HAL_UART_Receive(&huart1, &Rdata, 1, 0)==HAL_OK)
      {
          if (usart_rx_buf_index > USART1_RX_BUF_LEN - 1)
          {
            usart_rx_buf_index = 0;
          }
          
          if (Rdata == 0x0A)
          {
            if (strcmp((char*)USART1_RX_BUF, "ON") == 0)
            {
              HAL_GPIO_WritePin(LED_GPIO_Port, LED_Pin, GPIO_PIN_SET);
            }
            else if (strcmp((char*)USART1_RX_BUF, "OFF") == 0)
            {
              HAL_GPIO_WritePin(LED_GPIO_Port, LED_Pin, GPIO_PIN_RESET);
            }
            usart_rx_buf_index = 0;
            memset(USART1_RX_BUF, 0, USART1_RX_BUF_LEN);
          }
          else
          {
            USART1_RX_BUF[usart_rx_buf_index++] = Rdata;
          }
      }
      }
      /* USER CODE END 3 */
    
    }

演示如文章开头所见。

## 四、总结 ##

以上就是`手把手教你编写一个简单的点灯上位机`的内容，虽然实现的功能很简单，但是QT上位机开发的步骤基本就是这些步骤，通过这个基础实例把这些套路摸透我们就可以接着进行后续更多QT程序地开发学习了。

![虚线阴影分割线][caf83fb725ae5f93cf1d984ca77dbc93.png]

![18eef4d2aa46439cf08d96675664c45a.png][]

5T技术资源大放送！包括但不限于：C/C++，Arm, Linux，Android，人工智能，单片机，树莓派，等等。在公众号内回复「peter」，即可免费获取！！

![26cfae692b2960599fe09cb4ef26e8e2.gif][] **记得点击****分享****、****赞****和****在看****，给我**

[6b3bdceb5ddf06041d3501a739d427d5.png]: /images/20221021/dd60cc1c921f4c39994812fbf0559897.png
[QT _ _Qt]: http://mp.weixin.qq.com/s?__biz=MzU5MzcyMjI4MA%3D%3D&chksm=fe0e8519c9790c0ff3d1a70dd67ff6890f697cc9114cc785ac19e301f7921071ed74eb650fda&idx=1&mid=2247494622&scene=21&sn=9c0c68db9f52cc90a263513b526b7f60#wechat_redirect
[2b287d94a30f35890a6a56f296ea2638.png]: /images/20221021/acca44764bcf4a4a88280327325abe11.png
[237e6de4f10b07c0d14d3b5e9af2a180.png]: /images/20221021/c58659eb7e1041119a1e0ccea44cf2dc.png
[78850b550fb13b8da24b10bff3a1771f.png]: /images/20221021/aaf883a20f564b6cb7a7e34a8922bf70.png
[07c90153db10f508a8df214e4a4f2129.png]: /images/20221021/30dd0cf35f9c4d69a8fa7585f945edeb.png
[c2f7899a23c54b7b1014df1bbf8f1d41.png]: /images/20221021/0c31c07281f44b56b679bdcf168da10e.png
[36e9d72ed4948fb524fa195e91d31601.png]: /images/20221021/586946b117f04c0e8813137f0a242155.png
[44f668d2075aaa7825aaaa445bab6c4b.png]: /images/20221021/3b10611394ca49c8b5acf5e7222f929f.png
[530189b70313f4652fb9a56b073c97c1.png]: /images/20221021/82e3ef39b9ff4cd590c9e00c1ac56e9d.png
[97a159e11982a8a099cb869e44561603.png]: /images/20221021/2295d5fbaecc43c0a544c5cf646c7bed.png
[953f65d85a799804dde0b4640db5fb48.png]: /images/20221021/814745f4d3ff41fab7c97788761b48ba.png
[6f7bcd9719f461bbf5fe413e9843f4b3.png]: /images/20221021/66ced5a84aa24103baa259498ff0bc21.png
[cbba99c06703e5edadc83ed6402191fd.png]: /images/20221021/d4a2829147e34b67b6785aaf52eb9674.png
[86075f9b7627c391c948f5abdabc61f8.png]: /images/20221021/e8cfae5fdd9847fb8c033bb5a416ca3c.png
[0758ca9c765ed75d483e66bed28247cf.png]: /images/20221021/abe9cb42af5f43e388a7be6b7100fa3d.png
[5a15157cd019cc1c1fe6e5a1acd254e6.png]: /images/20221021/ce091a825fd847daa9fecedb33da2a33.png
[bff670a06a4915667ccac663f930d697.png]: /images/20221021/2fcf7df77ec849ea8d6dd07b854c2489.png
[a41910975bf518be4dbf7b3dc0e77550.png]: /images/20221021/d3b0529654584d899547da0b065358ba.png
[9ba9be145295cf37dc5e2d2c4dea5f65.png]: /images/20221021/02dafa94e09645739f24e3c9407bea3e.png
[b74954c629d51208aa4e6b7687652c27.png]: /images/20221021/fd1a34ec4c554a36931dc15a1d91a64e.png
[b9e84257e14694708674ba8b8d50d855.png]: /images/20221021/97d5911a3e8040b9bd0f78a62f7578bb.png
[80efd13fe2722ea0950926f1efcef15f.png]: /images/20221021/e04734d3fadb41c89096ff898b051325.png
[9243757ca8800f40f8a6612ff6fef8a8.png]: /images/20221021/3c522f0bb5154b0d8388a6418705886f.png
[f9c32be398bf7c2f2ed39f50b28ca011.png]: /images/20221021/684d507922554d0b99288bb58e7e3ea2.png
[2c7c10f3fd8fc0f0c83ee5da7f11c59c.png]: /images/20221021/aed0b4fb1fd0478d9696f52c2a6ab7c6.png
[67a1d21875c2ffa2eb946fbd517161ab.png]: /images/20221021/6985436fc86346d3942367640c020bf4.png
[aac0d0b868d1dfb6bf3e61644b3f945a.png]: /images/20221021/e57775db6bc040c0b371481a7afa595b.png
[2a33d193eb281aa133bef3bcd3da4cf3.png]: /images/20221021/4287406ff30b44a98fcd001bef55dce2.png
[3207e672236e4ec92e3a9e72f52d7f38.png]: /images/20221021/69f94a5a43a04b4f816ff8fbae98c2c9.png
[36eddbc7916a13f8babb7ca55c3e6918.png]: /images/20221021/4b951c9ef4f540f5b48995c1df45838e.png
[daca04ccbd198b77fc115bf124c4ab63.png]: /images/20221021/98690ae373ff40c7b8a882d55ee4c99f.png
[38fc120a49c22f526de92cdeac13d1a7.png]: /images/20221021/3f7a8d4043924fea9efa708ff9312fd6.png
[ad477111e260a2b8998d9eb0a2833529.png]: /images/20221021/9d3da37bb21249a089bdf387d595df71.png
[451087ed2a827e7f25ae1917c64a1dfe.png]: /images/20221021/e993615547e04afda4372f1eb0271350.png
[dc150db38f302789bc3d52699dd4c292.png]: /images/20221021/161cd8f5b3fe4192918ba673f88d9ec5.png
[586f37c13d89bd1f1bb19afef5210f8a.png]: /images/20221021/b65d780824fc4e34b53da2f400afe3c7.png
[9e9b975d6813fa1c40553748cd760492.png]: /images/20221021/e92b227bd0e747c99d8b134359ef140f.png
[0b064ad5efd0a8a4da2abc53f0ea701f.png]: /images/20221021/65452f5424e74cb8b132495c6a221bd9.png
[d93d2db5b0ddbcf43be0d3fe20edb174.png]: /images/20221021/040d31acfd5b41dcb0e9893195d6a3a4.png
[807881c8bd0c4104c28e07965ab75c87.png]: /images/20221021/65723d986cbc4bcf8d4232ae0a1ec528.png
[a6e60aaa2779b832e3d666e1333cc736.png]: /images/20221021/a86ac6bb241448dcb7bb54fe643b98ee.png
[8340c7ac63e617348a9e0c00176a3554.png]: /images/20221021/fac29f06eb9c4a78bcbbd9034c495a68.png
[20b9368b5b397d76046204d15f06183b.png]: /images/20221021/e6a59f6b656b41b9a90578ca1c2dfb40.png
[caf83fb725ae5f93cf1d984ca77dbc93.png]: /images/20221021/a1ef5b41fa174ab89d6b957093376c95.png
[18eef4d2aa46439cf08d96675664c45a.png]: /images/20221021/4ffc6adea6f341379fc9bf857c237442.png
[26cfae692b2960599fe09cb4ef26e8e2.gif]: /images/20221021/e98e864600164d22a5df2b9ef45ebe0a.png