用Qt写一个上位机(完整版)

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

070a85702eb6b4fca4992b7f2c2d95e0.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/

e02e36fd0f08a822a704fc29d8cdbf4b.png

f3194051cc64415d8e43917445e3057d.png

 

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

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

b2ca0b44c58615200b0445b0d911ba39.png

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

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

80e06ebb8a29b6add6070dc7f46d0ff9.png

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

a450ec2f4085acfae6a9f184efcd88f3.png

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

3632448c69659ecf4d60f77a5fc62fbe.png

e2374d5e35b449d286cc1b64553c9ddf.png

7089edb22f1819d488d12a3f1cf03d4a.png

1a6427614fa8a26cefac63e39437d7f5.png

f2c70c3cdd643ed8563d0ca6be111340.png

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

编写一个简单的上位机

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

  • 上位机界面设计。

  • 上位机逻辑代码编写。

  • 添加上位机图标。

  • 上位机程序的打包。

  • 上位机测试验证。

1、新建一个serial_led工程

0dfc25863723214ca3b2c7397f12e13d.png

95b54e3ff13a265335473a847c58f94e.png

4ac1fef66e8ae1784ecc3d868c1ad94d.png

c26df6f692d6a8254674a8abcd19f57d.png

3fab904c2141275d5ad8e215a5d3198e.png

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

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

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

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

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

我们创建的工程如:

d65b46ea3f8e977946937d4c14b56f6c.png

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

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

807f10c82714d5829a102d165608fcc8.png

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

70646fa15db8e79c049d8d3b89e6ab31.png

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

5f4f249696f6d89e298181e3d24c3f0f.png

                                7e32dd9f6d80ce1a0b240ff2c311808b.png

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

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

2573118859594453183f55c1188d02ff.png

这几个组件的功能如:

7233d2fa0ce179271e8d985bf124ee1d.png

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

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

74f640c88b8ce265565b08d4bd7546fb.png

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

3、上位机逻辑代码编写
(1)添加串口库、包含串口相关头文件
在serial_led.pro文件添加串口库:

35d9e5b8fdd4f67ab9fab0e2e8852ae5.png

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

#include <QSerialPort>
#include <QSerialPortInfo>

a04a2ad3468ea4336ca7e633cc769d79.png

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

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

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

b9f2fcd3171a93536f45e4a829091052.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);
}

                ​​​​​​​        14b7e31f5e04f7c82269780900be2958.png

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

3106451cb94807d6ffcdf1116ab2d1b3.png

        ​​​​​​​        ​​​​​​​        ​​​​​​​        ​​​​​​​        f03faba9330c206595ebb76f2748872d.png

37553a5aa73fac9596803bd4c39d2bf8.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后缀的图标下载放到我们的工程路径下,如:

490c8274d00d33b60a80ca8ad9298ffb.png

图标下载网址如:

https://www.iconfont.cn/

https://www.iconfont.cn/

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

RC_ICONS = led.ico

3b19fd278fe80eeac956a9dc66bc8015.png

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

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

b92e74a5fd5f6889e6035fe31e1b7651.png

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

805bc15e04b87b94fe375d9082e9ef3d.png

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

65cca36fbd25152aac94127f5999bda5.png

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

185db6e02d763cced4acd3ce13b58406.png

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

794b594c3c21cb3f712be128eba3b3b8.png

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

d8604e646f4a050b76a8876dfd7c3778.png

打开QT for Disktop工具:

c193e2a44cc5dd38900ec3a62fa44118.png

7e9c53dbaabe1f062444cd503a577e3a.png

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

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

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

windeployqt serial_led.exe

18ab0c4ac19b98e065678822fd051209.png

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

22db7bcba6e2a3799e29c790a7fa25f5.png

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

6、上位机测试验证

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

 

 

 

评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

电子小芯

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值