Qt 官方示例 | 简单几步,小白也能制作一个串口终端

大家好,我是老吴。

我又成功写了一篇小文章,每当我没动力写文章的时候,我就会把写文章的门槛降低,这其实是很好的一个技巧,把一个大目标切成很多小目标,是对付拖延症的一个好方法。

正巧最近看了一些讨论敏捷开发的文章,或者是不是可以考虑一下怎么敏捷学习?

某个项目的长时间开发会消磨开发人员的耐心,长时间学习某样东西同样也会打击人的信心。

再说了,你怎么知道现在学习的东西将来是否会在工作上用得上。

所以,我的结论是:学到的知识尽量马上用。能用一点是一点,不够用了再回头补!

回到正题,学习 Qt 的最佳途径是阅读官方的手册和示例。

今天要分享的是 Qt 官方示例:terminal。

一个简易的串口终端工具:

点击查看大图

它演示了如何创建一个终端,并使用 QSerialPort 进行串口通讯。

源码文件:

terminal/
├── console.cpp
├── console.h
├── images/
├── main.cpp
├── mainwindow.cpp
├── mainwindow.h
├── mainwindow.ui
├── settingsdialog.cpp
├── settingsdialog.h
├── settingsdialog.ui
├── terminal.pro
└── terminal.qrc

接下来,跟我一起来实现这个小工具吧。

正文目录:

1. 新建 Qt Widgets Application
2. 设计主界面
3. 实现主界面的功能
4. 设计设置界面
5. 实现设置界面的功能
6. 相关参考

1. 新建 Qt Widgets Application

在 Qt Creator 里 点击 File > New File or Project > Applications > Qt Widgets Application > Choose:

点击查看大图

以 QMainWindow 作为基类,子类名为 MainWindow:

新建完成后会得到下列文件:

terminal/
├── main.cpp
├── mainwindow.cpp
├── mainwindow.h
├── mainwindow.ui
├── terminal.pro
└── terminal.qrc

运行效果:

点击查看大图

此时只有跟 QMainWindow 一样的界面,还没有任何串口终端相关的功能。

2. 设计主界面

主界面分为 4 部分:

点击查看大图

1、菜单栏,用 QMenuBar 实现,用于提供串口终端的核心操作功能;

2、工具栏,用 QToolBar 实现,用于提供快捷操作;

3、中间区域留空,待会在 C++ 中通过继承 QPlainTextEdit 来实现,用于输入和输出串口信息;

4、状态栏,用 QstatusBar 实现,用于显示当前的连接状态。

在 Qt Designer 里执行下列操作:

1、菜单栏里添加 Calls、Tools 菜单项:

在 Calls 里添加子菜单项 Connect、Disconnect,分别对应连接和断开串口的功能。

在 Tools 里添加子菜单项 Configure、Clear,分别对应打开设置窗口、清空终端信息的功能。

2、工具栏里添加 Connect、Disconnect、Configure、Clear 按钮;

3、添加 Setting 对话框:

使用 Dialog without Buttions 模板,新建名为 "SettingsDialog" 的对话框。

运行效果:

点击查看大图

此时,菜单栏和工具栏里的菜单项并没有任何实际功能。

3. 实现 Setting 功能

由于连接串口前需要先设置参数,所以我们需要先实现 Setting 界面里的功能。

设计界面:

点击查看大图

此时,还没有实际的功能。

支持选择串口设备:

// 文件:settingsdialog.cpp
void SettingsDialog::fillPortsInfo()
{
    ...
    // 拿到系统当前所有可用的串口设备列表
    const auto infos = QSerialPortInfo::availablePorts();

    // 初始化组合框
    for (const QSerialPortInfo &info : infos) {
        QStringList list;
        description = info.description();
        manufacturer = info.manufacturer();
        serialNumber = info.serialNumber();
        list << info.portName();
        ...
        m_ui->serialPortInfoListBox->addItem(list.first(), list);
    }
}

在 Qt 里,可以通过 QSerialPortInfo 来获取系统当前可用的串口设备列表,我们拿到串口信息后,就用它来初始化 Serial Port 组合框。

当选择不同的串口设备时,要切换设备的描述信息:

connect(m_ui->serialPortInfoListBox,
QOverload<int>::of(&QComboBox::currentIndexChanged), this,&SettingsDialog::showPortInfo);

运行效果:

点击查看大图

支持设置串口参数:

// 文件:settingsdialog.cpp
void SettingsDialog::fillPortsParameters()
{
    // 添加可选的波特率、数据位数等串口参数
    m_ui->baudRateBox->addItem(QStringLiteral("9600"), QSerialPort::Baud9600);
    m_ui->baudRateBox->addItem(QStringLiteral("19200"), QSerialPort::Baud19200);
    m_ui->baudRateBox->addItem(QStringLiteral("38400"), QSerialPort::Baud38400);
    m_ui->baudRateBox->addItem(QStringLiteral("115200"), QSerialPort::Baud115200);

    ...
}

在 Qt 里,串口相关的功能由 qtserialport 模块负责实现,只要就是 QSerialPort 和 QSerialPortInfo 这两个类。

运行效果:

点击查看大图

支持保存设置:

// 文件:settingsdialog.cpp
void SettingsDialog::apply()
{
    updateSettings();
    hide();
}

// 将串口参数保存在变量 m_currentSettings 中
void SettingsDialog::updateSettings()
{
    m_currentSettings.name = m_ui->serialPortInfoListBox->currentText();

    m_currentSettings.baudRate = static_cast<QSerialPort::BaudRate>(m_ui->baudRateBox->itemData(m_ui->baudRateBox->currentIndex()).toInt());

    ...
}

当点击 Apply 按钮时,就会调用到 apply(),进而将界面上的串口参数保存在 struct Settings m_currentSettings 中。

运行效果:

点击查看大图

4. 实现串口 Connect 功能

// 文件:mainwindow.cpp
void MainWindow::openSerialPort()
{
    const SettingsDialog::Settings p = m_settings->settings();
    // 要打开哪个串口设备?
    m_serial->setPortName(p.name);
    ...

    // 仍然是那个熟悉的 open()
    if (m_serial->open(QIODevice::ReadWrite)) {
        m_console->setEnabled(true);
        m_ui->actionConnect->setEnabled(false);
        m_ui->actionDisconnect->setEnabled(true);
        m_ui->actionConfigure->setEnabled(false);
        ...
    }
}

当点击 Connect 按钮时,就会调用到 openSerialPort(),进而将执行到 QSerialPort 的 open()。

m_console 是一个 QPlainTextEdit 类型的对象,它负责显示串口。

运行效果:

点击查看大图

此时已经能打开串口设备了,但是还无法显示串口数据。

5. 实现串口读写功能

支持从串口读数据:

// 文件:mainwindow.cpp
void MainWindow::readData()
{
    // 从串口硬件中读数据
    const QByteArray data = m_serial->readAll();
    // 显示在文本框中
    m_console->putData(data);
}

打开串口后,当串口有数据时,就调用 MainWindow::readData() 将数据读出来并显示到界面上。putData() 会调用

QPlainTextEdit::insertPlainText() 将数据显示在文本框里。

支持向串口写数据:

// 文件:console.cpp
void Console::keyPressEvent(QKeyEvent *e)
{
    switch (e->key()) {
    // 不处理某些按键
    case Qt::Key_Backspace:
    ...
        break;
    default:
        // 发送接收到用户输入的信号
        emit getData(e->text().toLocal8Bit());
    }
}

当用户通过键盘输入时,m_console 会捕获该事件并发出信号,主界面接收到该信号后,会执行真正的写串口操作:

// 文件:mainwindow.cpp
MainWindow::MainWindow(QWidget *parent)
    : ...
{
    ...
    connect(m_console, &Console::getData, this, &MainWindow::writeData);
}

void MainWindow::writeData(const QByteArray &data)
{
    // 熟悉的 write()
    m_serial->write(data);
}

运行效果:

点击查看大图

到此,这个 Qt 的官方示例子 terminal 的核心功能就实现完毕啦。

感兴趣的小伙伴们请自行阅读 Qt example 里的完整代码吧。

相关参考

《Qt 官方文档》

  • https://doc.qt.io/qt-5/qtserialport-terminal-example.html

《C++ GUI Qt4 编程 (第二版)》

《Qt5 编程入门 (第二版)》

《Qt Creator 快速入门》

—— The End ——

推荐阅读:

专辑 | Linux 驱动开发

专辑 | Linux 系统编程

专辑 | 每天一点 C

专辑 | Qt 入门

想进交流群?

后台回复【加群】,我拉你进群。

  • 0
    点赞
  • 16
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值