当前位置:首页 > 电子产品 > 正文

最详细编写上位机教程

嵌入式开发,基本都会用到有一些上位机工具,比如串口助手就是最常用的工具之一。

那么,今天分享有一篇由ZhengN整理的用Qt写的简单上位机教程。

一、前言

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

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

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

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

最详细编写上位机教程  第1张

二、QT环境搭建

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

使用VS+QT

使用QtCreator

这里我们选择直接使用QT_Creator的方式。

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

QtCreator可带来两大关键益处

提供首个专为支持跨平台开发而设计的集成开发环境(IDE),并确保首次接触Qt框架的开发人员能迅速上手和操作。

即使不开发Qt应用程序,QtCreator也是一个简单易用且功能强大的IDE。

下面我们来一起安装QtCreator。

1、注册qt账号

我们需要先注册一个QT账号,后面安装QtCreator的时候会用到。

最详细编写上位机教程  第2张

最详细编写上位机教程  第3张

2、下载QT_Creator并安装

我们在Windows上进行开发,安装Windows版本的QtCreator。

最详细编写上位机教程  第4张

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

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

最详细编写上位机教程  第5张

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

最详细编写上位机教程  第6张

3、验证QT_Creator是否安装成功

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

最详细编写上位机教程  第7张

最详细编写上位机教程  第8张

最详细编写上位机教程  第9张

最详细编写上位机教程  第10张

最详细编写上位机教程  第11张

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

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

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

上位机界面设计。

上位机逻辑代码编写。

添加上位机图标。

上位机程序的打包。

上位机测试验证。

1、新建一个serial_led工程

最详细编写上位机教程  第12张

最详细编写上位机教程  第13张

最详细编写上位机教程  第14张

最详细编写上位机教程  第15张

最详细编写上位机教程  第16张

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

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

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

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

QDialog类对话框窗口的基类,对话框窗口主要用于短期任务和用户进行短期通讯的顶级窗口,QDialog可以是模态对话框或者是非模态对话框。

我们创建的工程如

最详细编写上位机教程  第17张

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

2、上位机界面设计

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

最详细编写上位机教程  第18张

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

最详细编写上位机教程  第19张

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

最详细编写上位机教程  第20张

最详细编写上位机教程  第21张

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

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

最详细编写上位机教程  第22张

这几个组件的功能如

最详细编写上位机教程  第23张

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

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

最详细编写上位机教程  第24张

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

3、上位机逻辑代码编写

(1)添加串口库、包含串口相关头文件

在serial_led.pro文件添加串口库

QT+=coreguiserialport

最详细编写上位机教程  第25张

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

#include《QSerialPort》

#include《QSerialPortInfo》

最详细编写上位机教程  第26张

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

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

(2)添加QSerialPort成员

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

最详细编写上位机教程  第27张

(3)创建串口对象、搜索所有可用串口

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

WidgetWidget(QWidget*parent)

QWidget(parent),

ui(newUiWidget)

{

QStringListserialNamePort;

ui-》setupUi(this);

this-》setWindowTitle(“serial_led”);

serialPort=newQSerialPort(this);

foreach(constQSerialPortInfo&inf0,QSerialPortInfoavailablePorts()){

serialNamePort《《inf0.portName();

}

ui-》serialBox-》addItems(serialNamePort);

}

最详细编写上位机教程  第28张

(4)编写“打开串口”槽函数

最详细编写上位机教程  第29张

最详细编写上位机教程  第30张

最详细编写上位机教程  第31张

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

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

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

voidWidgeton_openButton_clicked()

{

serialPort-》setPortName(ui-》serialBox-》currentText());

serialPort-》setBaudRate(ui-》baudrateBox-》currentText().toInt());

serialPort-》setDataBits(QSerialPortData8);

serialPort-》setStopBits(QSerialPortOneStop);

serialPort-》setParity(QSerialPortNoParity);

if(true==serialPort-》open(QIODeviceReadWrite))

{

QMessageBoxinformation(this,“提示”,“串口打开成功”);

}

else

{

QMessageBoxcritical(this,“提示”,“串口打开失败”);

}

}

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

#include《QMessageBox》

(5)编写“关闭串口”、“点灯”、“灭灯”槽函数

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

voidWidgeton_closeButton_clicked()

{

serialPort-》close();

}

voidWidgeton_onButton_clicked()

{

serialPort-》write(“ON

”);

qDebug(“ON

”);

}

voidWidgeton_offButton_clicked()

{

serialPort-》write(“OFF

”);

qDebug(“OFF

”);

}

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

4、添加上位机图标

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

最详细编写上位机教程  第32张

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

RC_ICONS=led.ico

最详细编写上位机教程  第33张

5、上位机程序打包

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

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

最详细编写上位机教程  第34张

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

最详细编写上位机教程  第35张

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

最详细编写上位机教程  第36张

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

最详细编写上位机教程  第37张

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

最详细编写上位机教程  第38张

把build-serial_led-Desktop_Qt_5_11_1_MinGW_32bit-Releaseelease路径下的serial_led.exe文件拷贝至serial_led_packet文件夹中

最详细编写上位机教程  第39张

打开QTforDisktop工具

最详细编写上位机教程  第40张

最详细编写上位机教程  第41张

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

cd/dD:Qtqt_prjserial_ledserial_led_packet

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

windeployqtserial_led.exe

最详细编写上位机教程  第42张

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

最详细编写上位机教程  第43张

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

6、上位机测试验证

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

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

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

intmain(void)

{

HAL_Init();

SystemClock_Config();

MX_GPIO_Init();

MX_DMA_Init();

MX_USART1_UART_Init();

printf(“WelcometoUART1test!

”);

while(1)

{

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);

}

elseif(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;

}

}

}

}

演示如文章开头所见。

四、总结

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

最详细编写上位机教程  第44张

你可能想看: