易懂 | 手把手教你编写你的第一个上位机
点击上方「嵌入式大杂烩」,选择「置顶公众号」第一时间查看嵌入式笔记!
一、前言
大家好,我是ZhengN,本次来教大家编写一个基于QT的简单的上位机。
学习一个新的东西我们都从最基础地实例开始,比如学习C语言我们会从编写一个hello程序开始、学习嵌入式我们从点灯开始。
同样的,我们也从编写一个简单的基于QT的上位机来体会体会上位机开发及认识认识QT。
我们本次实现的上位机的功能很简单:上位机通过串口来控制开发板上的一个LED的亮灭
。界面如:
演示视频:
二、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/
2、下载QT_Creator并安装
我们在Windows上进行开发,安装Windows版本的Qt Creator。下载地址:
https://download.qt.io/new_archive/qt/5.11/5.11.3/
下载得到qt-opensource-windows-x86-5.11.3.exe。然后双击安装,第二步需要输入账号密码,把我们上面注册好的账号密码填入即可。
接下来还需要选择安装组件,根据自己需要进行选择安装,我安装的组件如:
安装完成之后我们桌面上并没有Qt Creator的快捷方式,需要自己创建。找到Qt Creator的安装路径,然后把Qt Creator发送到桌面快捷方式即可。如:
3、验证QT_Creator是否安装成功
我们创建一个简单的C++工程来验证一下Qt Creator是否安装成功。
Qt Creator搭建好之后我们接下来开始编写我们的上位机。
三、编写一个简单的上位机
编写这个简单的上位机我们需要经过一下几个步骤:
上位机界面设计。
上位机逻辑代码编写。
添加上位机图标。
上位机程序的打包。
上位机测试验证。
1、新建一个serial_led工程
这里需要注意的一点是:工程名及工程路径不要有中文字符
。
另外,QT中有三种基类,这里我们选择QWidget类
。QT的三个基类如:
QMainWindow类:提供一个带有菜单条,工具条和一个状态条的主应用程序窗口。
QWidget类:所有用户界面对象的基类,窗口部件是用户界面的一个基本单元,它从窗口系统接收鼠标,键盘和其他消息,并在屏幕上绘制自己。
QDialog类:对话框窗口的基类,对话框窗口主要用于短期任务和用户进行短期通讯的顶级窗口,QDialog可以是模态对话框或者是非模态对话框。
我们创建的工程如:
其中,项目文件.pro文件
是用来告诉qmake
关于为这个应用程序创建makefile
所需要的细节。例如,一个源文件和头文件的列表、任何应用程序特定配置。例如,一个必需链接的额外库或者一个额外的包含路径、都应该放到项目文件中。
2、上位机界面设计
Qt 一个可视化的界面设计工具:Qt 设计器(Qt Designer)。我们双击.ui文件就可以进入Qt Designer,在Qt Designer中我们可以通过拖动控件的方式来设计我们的界面,整个界面如:
我们从左侧的控件区把我们需要的控件拖动到界面编辑区中,我们这个简单地上位机用到的控件如:
这里需要注意的是波特率这个下拉框需要双击设置一些备选配置,如:
大家可以在左边地控件区找到这三种控件拖动到界面编辑器进行修改、布局即可。
其中,布局可通过如下组件调整:
这几个组件的功能如:
具体地用法大家可以自己去实操一下。
另外,我们需要给我们使用的控件重新命名,在右侧的对象管理区
进行操作。命名为有意义的名字,因为后面编写代码会用到。有意义的名字利于编写易懂的代码。比如我们修改的名字如:
最后,控件的属性可根据需要在属性区进行调整。
3、上位机逻辑代码编写
(1)添加串口库、包含串口相关头文件
在serial_led.pro
文件添加串口库:
QT += core gui serialport
在widget.h
文件包含串口头文件:
#include <QSerialPort>
#include <QSerialPortInfo>
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()) {serialNamePort<<inf0.portName();}ui->serialBox->addItems(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 <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
后缀的图标下载放到我们的工程路径下,如:
图标下载网址如:
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\n
、OFF\n
,我们编写下位机代码进行接收,然后操控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\n");/* 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
,即可下载本文上下位机工程。
六、温馨提示
由于微信公众号近期改变了推送规则,如果您想经常看到我们的文章,可以在每次阅读后,在页面下方点一个「赞」或「在看」,这样每次推送的文章才会第一时间出现在您的订阅列表里。
猜你喜欢:
工具 | 分享一款嵌入式人必备绘图工具
LVGL | 基于嵌入式Linux的LVGL移植
干货 | protobuf-c之嵌入式平台使用
在公众号聊天界面回复1024,可获取嵌入式资源;回复 m ,可查看文章汇总。
文章都看完了不点个吗
易懂 | 手把手教你编写你的第一个上位机相关推荐
- 写字机上位机c语言,易懂 | 手把手教你编写你的第一个上位机
一.前言 大家好,我是ZhengN,本次来教大家编写一个基于QT的简单的上位机. 学习一个新的东西我们都从最基础地实例开始,比如学习C语言我们会从编写一个hello程序开始.学习嵌入式我们从点灯开始. ...
- 手把手教你编写一个上位机
关注+星标公众号,不错过精彩内容 转自 | 嵌入式大杂烩 嵌入式开发,基本都会用到有一些上位机工具,比如串口助手就是最常用的工具之一. 那么,今天分享有一篇由ZhengN整理的用Qt写的简单上位机教程 ...
- 手把手教你编写游戏模拟器 - Chip8篇(1)
转自 http://www.cnblogs.com/YiranXie/p/3439934.html 手把手教你编写游戏模拟器 - Chip8篇(1) 手把手教你编写游戏模拟器 - Chip8篇 翻译整 ...
- skywalking原理_Skywalking系列博客6手把手教你编写 Skywalking 插件
点击上方 IT牧场 ,选择 置顶或者星标技术干货每日送达! 前置知识 在正式进入编写环节之前,建议先花一点时间了解下javaagent(这是JDK 5引入的一个玩意儿,最好了解下其工作原理):另外,S ...
- C#编写Modbus协议加速度传感器上位机
C#编写Modbus协议加速度传感器上位机 项目概述 功能描述 上位机原理 初始化连接 读取寄存器原始数据 换算为实际物理量 自动模式 数据保存 数据可视化分析 尾言 项目概述 笔者利用下班时间,编写 ...
- 科学计算机后盖换电池,图吧小白教程 篇二十二:手把手教你给手机换电池(拆机)...
图吧小白教程 篇二十二:手把手教你给手机换电池(拆机) 2019-11-16 14:06:58 4点赞 18收藏 2评论 创作立场声明:手机换电池省钱可以自己动手从工钱上省,买电池最好还是不要省钱买杂 ...
- 我的第一个上位机软件
2019年即将过去,这一年最值得开心.高兴的事就是我参与研发的"全自动生化分析仪"终于上市了,并受到市场的欢迎:由于有非常给力的销售团队,机器的订单一直不断.当然机器研制成功是项目 ...
- flutter插件进阶之手把手教你编写简易插件(五)
经过前面几篇文章中对flutter插件相关技术的介绍,本篇我们从1开始手把手的进行插件代码的编写工作,以实现一个简单的桌面小部件功能. 来吧,效果展示来一波~~ 目录: 五.编写简易插件(安卓桌面小部 ...
- 用java编写一个图书管理系统_手把手教你编写第一个java程序
安装完jdk后我们就可以试着编写第一个java程序了,让我们一起来试试吧! 第一步 点击开始--所有程序--附件--记事本,新建记事本,输入以下代码: class HelloWorld { publi ...
- 手把手教你编写Logstash插件
使用过Logstash的朋友都知道,它强大的插件生态几乎覆盖了所有的开源框架.从基本的http.tcp.udp.file,到强大的kafa.redis.ganglia,还有丰富的解析工具,比如date ...
最新文章
- 一篇非常好的transformer年度总结
- 【matlab】面积图(area函数的应用)
- 不会这些基础命令,白做运维了
- 该按钮可以重启计算机,电脑里面总是自动重启的问题,应该怎么做?
- 比特飞使用的是什么主题
- 记录平台调用支付中心接口
- AppLoader的使用
- Vue前端实战——外卖商家
- python数据收集整理教案_数据收集整理教学设计
- python循环语句打印三角形_python循环输出三角形图案的例子
- 面试被问到如何设计微信钉钉后端高并发IM架构?懵了.....
- 开关电源(1)之BUCK降压变换器工作原理及Multisim实例仿真
- ELK日志分析平台(一)—elasticsearch安装及配置、elasticsearch图形化插件安装
- ibm电脑服务器郑州维修,郑州IBM ThinkPad笔记本芯片级维修中心
- 一条软件缺陷(或者叫Bug)记录都包含了哪些内容?如何提交高质量的软件缺陷(Bug)记录?
- 计算机毕业设计ssm医院取药系统
- 【附源码】Python计算机毕业设计水库洪水预报调度系统
- UBTC主网已实现智能合约及混合共识机制!
- 百度API调用失败解决方法
- PhoneGap使用