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

好玩的MATLAB

点击上方「嵌入式实验基地」，选择「置顶公众号」第一时间查看嵌入式笔记！
      来这里，还可以学习HAL库的使用哦

rbw0iqzrh5i64047048114.png

一、前言 工欲善其事，必先利其器，今天给大家介绍一下如何自己编写上位机，方便自己开发嵌入式测试工具。
学习一个新的东西我们都从最基础地实例开始，比如学习C语言我们会从编写一个hello程序开始、学习嵌入式我们从点灯开始。
同样的，我们也从编写一个简单的基于QT的上位机来体会体会上位机开发及认识认识QT。
我们本次实现的上位机的功能很简单：上位机通过串口来控制开发板上的一个LED的亮灭。界面如：

nxo2fmy33ov64047048214.png

演示视频：

二、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/

gihg5gp4oni64047048314.png

u5ysisf3ilj64047048414.png

2、下载QT_Creator并安装我们在Windows上进行开发，安装Windows版本的Qt Creator。下载地址：
https://download.qt.io/new_archive/qt/5.11/5.11.3/

a4rwdfidaeu64047048515.png

下载得到qt-opensource-windows-x86-5.11.3.exe。然后双击安装，第二步需要输入账号密码，把我们上面注册好的账号密码填入即可。
接下来还需要选择安装组件，根据自己需要进行选择安装，我安装的组件如：

dlkwyb01rmj64047048615.png

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

ukay2w5zv5h64047048715.png

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

yrapr4ayw0n64047048815.png

ik1a2ztzodo64047048915.png

jt5jkeiyp1z64047049015.png

eshs0h4gduf64047049115.png

grw3ngy4ngg64047049215.png

Qt Creator搭建好之后我们接下来开始编写我们的上位机。
三、编写一个简单的上位机 编写这个简单的上位机我们需要经过一下几个步骤：

上位机界面设计。

上位机逻辑代码编写。

添加上位机图标。

上位机程序的打包。

上位机测试验证。1、新建一个serial_led工程

s1ox4s5aoky64047049315.png

ibwucl4uatq64047049415.png

ctxp1zvlfnk64047049515.png

swbtktjpk5y64047049615.png

tfxbvinr3ud64047049715.png

这里需要注意的一点是：工程名及工程路径不要有中文字符。
另外，QT中有三种基类，这里我们选择QWidget类。QT的三个基类如：

QMainWindow类：提供一个带有菜单条，工具条和一个状态条的主应用程序窗口。

QWidget类：所有用户界面对象的基类，窗口部件是用户界面的一个基本单元，它从窗口系统接收鼠标，键盘和其他消息，并在屏幕上绘制自己。

QDialog类：对话框窗口的基类，对话框窗口主要用于短期任务和用户进行短期通讯的顶级窗口，QDialog可以是模态对话框或者是非模态对话框。我们创建的工程如：

c5s4frmtu0m64047049816.png

其中，项目文件.pro文件是用来告诉qmake关于为这个应用程序创建makefile所需要的细节。例如，一个源文件和头文件的列表、任何应用程序特定配置。例如，一个必需链接的额外库或者一个额外的包含路径、都应该放到项目文件中。
2、上位机界面设计Qt 一个可视化的界面设计工具：Qt 设计器（Qt Designer）。我们双击.ui文件就可以进入Qt Designer，在Qt Designer中我们可以通过拖动控件的方式来设计我们的界面，整个界面如：

drzl3op2adi64047049916.png

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

ou4441po1su64047050016.png

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




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


这几个组件的功能如：


具体地用法大家可以自己去实操一下。
另外，我们需要给我们使用的控件重新命名，在右侧的对象管理区进行操作。命名为有意义的名字，因为后面编写代码会用到。有意义的名字利于编写易懂的代码。比如我们修改的名字如：

最后，控件的属性可根据需要在属性区进行调整。
3、上位机逻辑代码编写（1）添加串口库、包含串口相关头文件在serial_led.pro文件添加串口库：
QT += core gui serialport


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

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

QSerialPortInfo 是一个辅助类，可以提供计算机中可用串口的各种信息。
（2）添加QSerialPort成员在widget.h的Widget类中添加一个QSerialPort成员：

（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()) {
        serialNamePortaddItems(serialNamePort);
}

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






信号和槽是用于对象之间的通信，它是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
（5）编写“关闭串口”、“点灯”、“灭灯”槽函数按照上面打开串口槽函数的方法编写关闭串口、点灯、灭灯槽函数：
void Widget::on_closeButton_clicked()
{
    serialPort->close();
}
void Widget::on_onButton_clicked()
{
    serialPort->write("ON
");
    qDebug("ON
");
}
void Widget::on_offButton_clicked()
{
    serialPort->write("OFF
");
    qDebug("OFF
");
}
以上就是上位机逻辑代码的编写。
4、添加上位机图标在网上找一个相关的.ico后缀的图标下载放到我们的工程路径下，如：

图标下载网址如：

https://www.iconfont.cn/

https://www.iconfont.cn/
然后在我们的serial_led.pro文件中添加如下一行代码：
RC_ICONS = led.ico

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


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


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


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


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


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


打开QT for Disktop工具：





执行如下命令进入打包目录：
cd /d D:\Qt\qt_prj\serial_led\serial_led_packet

然后执行如下命令进行打包：
windeployqt serial_led.exe


此时，serial_led_packet文件夹中的serial_led.exe文件就可以双击运行了：


此时就完成了程序的打包。此时我们把这一整个文件夹压缩发送给别人使用了。另外，我们也可以借助一些工具把这些文件打包成一个整体的.exe文件，这里不再介绍。
6、上位机测试验证上位机我们写好了，接下来编写下位机代码来测试一下。
我们点击上位机的点灯、灭灯按钮，则会通过串口分别发送ON
、OFF
，我们编写下位机代码进行接收，然后操控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
");
  /* 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程序地开发学习了。
另外，ZhengN也是QT开发新手，文章中如有错误，欢迎指出，谢谢大家！
码字不易。原创不易。如果文章对你有帮助，麻烦帮忙转发分享，谢谢！
五、资源下载 本公众号后台回复关键词：serial_led，即可下载本文上下位机工程。
      如果你觉得对自己有帮助的话，给个赞，点个关注，点个在看，感谢前进的道路上有你的陪伴！
      所有公众号文章资料源码已上传，关注公众号回复资料即可获取哦，欢迎加群一起炸起来！



推荐阅读
?玩转STM32 触摸屏+LVGL GUI设计
?QT Creator运行LVGL模拟器
?一种你值得学习的按键扫描方式-状态机实现按键
?基于STM32 HAL库硬件SPI的ST7789驱动（TFT-LCD 240*320）
?开源电路のSTM32最小系统设计
?一种你值得拥有的简单易实现的开关电路
?无线通讯之红外通讯?DIY一个离线语音控制器
?HAL库us延时的3种实现方式?逻辑分析仪的简单使用介绍（附带iic，uart，spi数据波形分析）
?ART-PI重力感应无线智能小车第一弹----ART-PI扩展板设计?ART-PI重力感应无线智能小车第二弹----Onenet+wifi+L298N电机驱动?ART-PI重力感应无线智能小车第三弹----RT-Studio+MPU6050+MQTT发布订阅?STM32 DAC音频输出
?pcb设计基础?OLED+ESP8266网络小时钟



文章都看完了

不点个

吗