0
  • 聊天消息
  • 系统消息
  • 评论与回复
登录后你可以
  • 下载海量资料
  • 学习在线课程
  • 观看威廉希尔官方网站 视频
  • 写文章/发帖/加入社区
会员中心
创作中心

完善资料让更多小伙伴认识你,还能领取20积分哦,立即完善>

3天内不再提示

Qt上位机开发实战案例

strongerHuang 来源:嵌入式大杂烩 2024-03-13 12:31 次阅读

对于嵌入式开发的小伙伴,用Qt写上位机是最常见的方法之一,对于有基础的朋友来来说,相对还是比较简单。 今天从编写一个简单的基于QT的上位机来体会体会上位机开发及认识认识QT。 我们本次实现的上位机的功能很简单:上位机通过串口来控制开发板上的一个LED的亮灭。界面如:

b7bd6140-e0d6-11ee-a297-92fbcf53809c.png

演示视频

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/

b7c509cc-e0d6-11ee-a297-92fbcf53809c.png

b7d14ec6-e0d6-11ee-a297-92fbcf53809c.png

2、下载QT_Creator并安装

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

https://download.qt.io/new_archive/qt/5.11/5.11.3/

b7d8fe6e-e0d6-11ee-a297-92fbcf53809c.png

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

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

b7e7a572-e0d6-11ee-a297-92fbcf53809c.png

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

b7ee500c-e0d6-11ee-a297-92fbcf53809c.png

3、验证QT_Creator是否安装成功

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

b7fefbc8-e0d6-11ee-a297-92fbcf53809c.png

b8061476-e0d6-11ee-a297-92fbcf53809c.png

b80c927e-e0d6-11ee-a297-92fbcf53809c.png

b812d53a-e0d6-11ee-a297-92fbcf53809c.png

b81d44fc-e0d6-11ee-a297-92fbcf53809c.png

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

编写一个简单的上位机

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

上位机界面设计。

上位机逻辑代码编写。

添加上位机图标。

上位机程序的打包。

上位机测试验证。

1、新建一个serial_led工程

b82f0368-e0d6-11ee-a297-92fbcf53809c.png

b846b49a-e0d6-11ee-a297-92fbcf53809c.png

b85416ee-e0d6-11ee-a297-92fbcf53809c.png

b85acf84-e0d6-11ee-a297-92fbcf53809c.png

b8631dba-e0d6-11ee-a297-92fbcf53809c.png

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

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

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

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

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

我们创建的工程如:

b877def8-e0d6-11ee-a297-92fbcf53809c.png

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

2、上位机界面设计

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

b87fb5c4-e0d6-11ee-a297-92fbcf53809c.png

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

b8947338-e0d6-11ee-a297-92fbcf53809c.png

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

b8bcf268-e0d6-11ee-a297-92fbcf53809c.png

b8c56556-e0d6-11ee-a297-92fbcf53809c.png

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

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

b8cc3db8-e0d6-11ee-a297-92fbcf53809c.png

这几个组件的功能如:

b8d52c52-e0d6-11ee-a297-92fbcf53809c.png

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

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

b8dce848-e0d6-11ee-a297-92fbcf53809c.png

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

3、上位机逻辑代码编写

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

在serial_led.pro文件添加串口库:

QT+=coreguiserialport

b8ed67a4-e0d6-11ee-a297-92fbcf53809c.png

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

#include
#include

b8fa6efe-e0d6-11ee-a297-92fbcf53809c.png

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

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

(2)添加QSerialPort成员

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

b900356e-e0d6-11ee-a297-92fbcf53809c.png

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

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

Widget::Widget(QWidget*parent):
QWidget(parent),
ui(newUi::Widget)
{
QStringListserialNamePort;

ui->setupUi(this);
this->setWindowTitle("serial_led");

/*创建一个串口对象*/
serialPort=newQSerialPort(this);

/*搜索所有可用串口*/
foreach(constQSerialPortInfo&inf0,QSerialPortInfo::availablePorts()){
serialNamePort<serialBox->addItems(serialNamePort);
}

b905edc4-e0d6-11ee-a297-92fbcf53809c.png

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

b9162c84-e0d6-11ee-a297-92fbcf53809c.png

b91faade-e0d6-11ee-a297-92fbcf53809c.png

b92c190e-e0d6-11ee-a297-92fbcf53809c.png

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

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

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

voidWidget::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)编写“关闭串口”、“点灯”、“灭灯”槽函数

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

voidWidget::on_closeButton_clicked()
{
serialPort->close();
}

voidWidget::on_onButton_clicked()
{
serialPort->write("ON
");
qDebug("ON
");
}

voidWidget::on_offButton_clicked()
{
serialPort->write("OFF
");
qDebug("OFF
");
}

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

4、添加上位机图标

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

b9329cb6-e0d6-11ee-a297-92fbcf53809c.png

图标下载网址如:

https://www.iconfont.cn/

https://www.iconfont.cn/

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

RC_ICONS=led.ico

b939903e-e0d6-11ee-a297-92fbcf53809c.png

5、上位机程序打包

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

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

b94484f8-e0d6-11ee-a297-92fbcf53809c.png

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

b956ae6c-e0d6-11ee-a297-92fbcf53809c.png

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

b963d146-e0d6-11ee-a297-92fbcf53809c.png

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

b9749d28-e0d6-11ee-a297-92fbcf53809c.png

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

b97a37ba-e0d6-11ee-a297-92fbcf53809c.png

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

b980f23a-e0d6-11ee-a297-92fbcf53809c.png

打开QT for Disktop工具:

b986766a-e0d6-11ee-a297-92fbcf53809c.png

b9967218-e0d6-11ee-a297-92fbcf53809c.png

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

cd /d D:Qtqt_prjserial_ledserial_led_packet

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

windeployqt serial_led.exe

b9a1b844-e0d6-11ee-a297-92fbcf53809c.png

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

b9b8465e-e0d6-11ee-a297-92fbcf53809c.png

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

6、上位机测试验证

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

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

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

intmain(void)
{
/*USERCODEBEGIN1*/

/*USERCODEEND1*/

/*MCUConfiguration----------------------------------------------------------*/

/*Resetofallperipherals,InitializestheFlashinterfaceandtheSystick.*/
HAL_Init();

/*USERCODEBEGINInit*/

/*USERCODEENDInit*/

/*Configurethesystemclock*/
SystemClock_Config();

/*USERCODEBEGINSysInit*/

/*USERCODEENDSysInit*/

/*Initializeallconfiguredperipherals*/
MX_GPIO_Init();
MX_DMA_Init();
MX_USART1_UART_Init();
/*USERCODEBEGIN2*/
printf("WelcometoUART1test!
");

/*USERCODEEND2*/

/*Infiniteloop*/
/*USERCODEBEGINWHILE*/
while(1)
{

/*USERCODEENDWHILE*/

/*USERCODEBEGIN3*/
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;
}
}
}
/*USERCODEEND3*/

}

演示如文章开头所见。

总结

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

审核编辑:黄飞

声明:本文内容及配图由入驻作者撰写或者入驻合作网站授权转载。文章观点仅代表作者本人,不代表电子发烧友网立场。文章及其配图仅供工程师学习之用,如有内容侵权或者其他违规问题,请联系本站处理。 举报投诉
  • led
    led
    +关注

    关注

    242

    文章

    23253

    浏览量

    660598
  • 嵌入式开发
    +关注

    关注

    18

    文章

    1028

    浏览量

    47564
  • 上位机
    +关注

    关注

    27

    文章

    941

    浏览量

    54791
  • 串口控制
    +关注

    关注

    0

    文章

    26

    浏览量

    9861

原文标题:手把手教你用Qt写一个上位机

文章出处:【微信号:strongerHuang,微信公众号:strongerHuang】欢迎添加关注!文章转载请注明出处。

收藏 人收藏

    评论

    相关推荐

    C#上位实战开发指南

    C#上位实战开发指南
    发表于 11-22 19:25 0次下载

    QtQt Quick开发实战精解电子教材的源代码合集免费下载

    本文档的主要内容详细介绍的是QtQt Quick开发实战精解电子教材的源代码合集免费下载
    发表于 10-31 17:56 148次下载

    【北京迅为】嵌入式Linux+QT开发零基础入门+项目实战教程分享

    每一个威廉希尔官方网站 点都能真真切切落实到项目中,学即所用。1、独创框架学习法,先掌握整体的 QT 开发,在逐一击破!2、手把手教学,从 Windows 到 Linux 在到 QT,从 C ++直到 QT
    发表于 11-01 17:59 28次下载
    【北京迅为】嵌入式Linux+<b class='flag-5'>QT</b><b class='flag-5'>开发</b>零基础入门+项目<b class='flag-5'>实战</b>教程分享

    【STM32】自动气象站(下位:STM32 + 上位QT)

    【STM32】自动气象站(下位:STM32 + 上位QT)
    发表于 11-19 12:36 59次下载
    【STM32】自动气象站(下位<b class='flag-5'>机</b>:STM32 + <b class='flag-5'>上位</b><b class='flag-5'>机</b>:<b class='flag-5'>QT</b>)

    QT从零开始作单片机上位-串口调试助手+波形显示

    第一章 QT开发环境搭建及工程文件建立前言:笔者本想用codeblock+QT搭建一个上位开发
    发表于 01-12 19:13 20次下载
    <b class='flag-5'>QT</b>从零开始作单片机<b class='flag-5'>上位</b><b class='flag-5'>机</b>-串口调试助手+波形显示

    基于QT的简单的上位

    。同样的,我们也从编写一个简单的基于QT上位来体会体会上位开发及认识认识
    发表于 05-08 10:57 16次下载
    基于<b class='flag-5'>QT</b>的简单的<b class='flag-5'>上位</b><b class='flag-5'>机</b>

    QTQT上位串口编程

    QTQT上位串口编程 最近因为项目需要,需要用到上位,通过串口与
    发表于 05-08 10:02 25次下载
    <b class='flag-5'>QT</b>篇<b class='flag-5'>QT</b><b class='flag-5'>上位</b><b class='flag-5'>机</b>串口编程

    QT|编写一个简单的上位

    QT | 编写一个简单的上位 时间 :2023-03-19文章目录QT | 编写一个简单的上位
    发表于 05-08 10:12 3次下载
    <b class='flag-5'>QT</b>|编写一个简单的<b class='flag-5'>上位</b><b class='flag-5'>机</b>

    QT实现简单的上位软件

    最近项目要求写上位软件,需要实现界面功能和串口读写。界面方面用过MFC(早忘记了),网上查阅资料后发现QT在5.1版本后有自带的串口模块,而且用QT实现简单界面功能很容易上手(也就期
    发表于 05-08 09:54 4次下载
    <b class='flag-5'>QT</b>实现简单的<b class='flag-5'>上位</b><b class='flag-5'>机</b>软件

    STM32+ESP8266连接电脑Qt网络上位——QT

    本文简单介绍下手写网络调试器并连接ESP8266模块 上篇 : STM32+ESP8266连接电脑Qt网络上位——准备工作 目录 一、部分Qt代码及实现过程 二、实现过程——使用
    发表于 05-09 14:22 21次下载
    STM32+ESP8266连接电脑<b class='flag-5'>Qt</b>网络<b class='flag-5'>上位</b><b class='flag-5'>机</b>——<b class='flag-5'>QT</b>篇

    QT串口数据接收上位

    QT串口数据接收上位1.界面设计 2.串口配置 3.文件读写 4.使用QT遇到的一些问题 5.excle保存数据 6.上位
    发表于 05-09 14:26 2次下载
    <b class='flag-5'>QT</b>串口数据接收<b class='flag-5'>上位</b><b class='flag-5'>机</b>

    基于Qt的简单arduino上位

    准备工作 一块esp8266,安装arduinoIDE、Qt、navecate、mysql/**若没有mysql可直接采用sqllist。 QT上位 通信协议采用UDP(TCP
    发表于 05-09 10:36 3次下载
    基于<b class='flag-5'>Qt</b>的简单arduino<b class='flag-5'>上位</b><b class='flag-5'>机</b>

    Qt上位开发实战(一)

    一、Qt三大金刚 1、qt下的串口编程 2、qt下的网络编程 3、qt下的GPIO 本章节先介绍一下qt下的串口编程,首先我们新建一个Wid
    发表于 05-10 11:35 3次下载
    <b class='flag-5'>Qt</b>之<b class='flag-5'>上位</b><b class='flag-5'>机</b><b class='flag-5'>开发</b><b class='flag-5'>实战</b>(一)

    QT设计风速仪上位实例

    本人之前所做项目需要使用风速仪进行风速检测,市面上所购买的风速仪产品可以多通过串口与上位进行通信,为满足后续需求且提高更高的灵活性,本人决定采用QT软件自主开发风速仪
    发表于 05-10 09:41 1次下载
    <b class='flag-5'>QT</b>设计风速仪<b class='flag-5'>上位</b><b class='flag-5'>机</b>实例

    EtherCAT运动控制器上位之Python+Qt(一):链接与单轴运动

    PC上位Python+Qt混合编程,助力智能制造高效开发
    的头像 发表于 07-31 09:43 407次阅读
    EtherCAT运动控制器<b class='flag-5'>上位</b><b class='flag-5'>机</b>之Python+<b class='flag-5'>Qt</b>(一):链接与单轴运动