新聞中心

EEPW首頁 > 嵌入式系統(tǒng) > 設(shè)計應(yīng)用 > 最詳細(xì)編寫上位機教程

最詳細(xì)編寫上位機教程

作者: 時間:2021-04-27 來源:strongerHuang 收藏

嵌入式開發(fā),基本都會用到有一些工具,比如串口助手就是最常用的工具之一。

本文引用地址:http://www.butianyuan.cn/article/202104/424915.htm

那么,今天分享有一篇由ZhengN整理的用Qt寫的簡單教程。

一、前言

大家好,我是ZhengN,本次來教大家編寫一個基于QT的簡單的。

學(xué)習(xí)一個新的東西我們都從最基礎(chǔ)地實例開始,比如學(xué)習(xí)C語言我們會從編寫一個hello程序開始、學(xué)習(xí)嵌入式我們從點燈開始。

同樣的,我們也從編寫一個簡單的基于QT的上位機來體會體會上位機開發(fā)及認(rèn)識認(rèn)識QT。

我們本次實現(xiàn)的上位機的功能很簡單:上位機通過串口來控制開發(fā)板上的一個LED的亮滅。界面如:

6481d68e-a680-11eb-aece-12bb97331649.png

二、QT環(huán)境搭建

在開始編寫上位機之前我們先來一起搭建一下QT開發(fā)環(huán)境(不然就不是手把手了,哈哈)。往期推文 QT | 詳解Qt的幾種開發(fā)方式 中有介紹到QT的兩種開發(fā)環(huán)境:

使用VS + QT

使用Qt Creator

這里我們選擇直接使用QT_Creator的方式。

Qt Creator是一個用于Qt開發(fā)的輕量級跨平臺集成開發(fā)環(huán)境。

Qt Creator可帶來兩大關(guān)鍵益處:

提供首個專為支持跨平臺開發(fā)而設(shè)計的集成開發(fā)環(huán)境 (IDE),并確保首次接觸Qt框架的開發(fā)人員能迅速上手和操作。

即使不開發(fā)Qt應(yīng)用程序,Qt Creator也是一個簡單易用且功能強大的IDE。

下面我們來一起安裝Qt Creator。

1、注冊qt賬號

我們需要先注冊一個QT賬號,后面安裝Qt Creator的時候會用到。

648e5076-a680-11eb-aece-12bb97331649.png

64af4c22-a680-11eb-aece-12bb97331649.png

2、下載QT_Creator并安裝

我們在Windows上進行開發(fā),安裝Windows版本的Qt Creator。

64e00768-a680-11eb-aece-12bb97331649.png

下載得到qt-opensource-windows-x86-5.11.3.exe。然后雙擊安裝,第二步需要輸入賬號密碼,把我們上面注冊好的賬號密碼填入即可。

接下來還需要選擇安裝組件,根據(jù)自己需要進行選擇安裝,我安裝的組件如:

64e9ea62-a680-11eb-aece-12bb97331649.png

安裝完成之后我們桌面上并沒有Qt Creator的快捷方式,需要自己創(chuàng)建。找到Qt Creator的安裝路徑,然后把Qt Creator發(fā)送到桌面快捷方式即可。如:

64f4042a-a680-11eb-aece-12bb97331649.png

3、驗證QT_Creator是否安裝成功

我們創(chuàng)建一個簡單的C++++工程來驗證一下Qt Creator是否安裝成功。

6503c7e8-a680-11eb-aece-12bb97331649.png

6510d00a-a680-11eb-aece-12bb97331649.png

65436506-a680-11eb-aece-12bb97331649.png

65582aea-a680-11eb-aece-12bb97331649.png

656a5e4a-a680-11eb-aece-12bb97331649.png

Qt Creator搭建好之后我們接下來開始編寫我們的上位機。

三、編寫一個簡單的上位機

編寫這個簡單的上位機我們需要經(jīng)過一下幾個步驟:

上位機界面設(shè)計。

上位機邏輯代碼編寫。

添加上位機圖標(biāo)。

上位機程序的打包。

上位機測試驗證。

1、新建一個serial_led工程

65bcdd00-a680-11eb-aece-12bb97331649.png

65c94176-a680-11eb-aece-12bb97331649.png

65f768da-a680-11eb-aece-12bb97331649.png

660d9862-a680-11eb-aece-12bb97331649.png

6618b9e0-a680-11eb-aece-12bb97331649.png

這里需要注意的一點是:工程名及工程路徑不要有中文字符。

另外,QT中有三種基類,這里我們選擇QWidget類。QT的三個基類如:

QMainWindow類:提供一個帶有菜單條,工具條和一個狀態(tài)條的主應(yīng)用程序窗口。

QWidget類:所有用戶界面對象的基類,窗口部件是用戶界面的一個基本單元,它從窗口系統(tǒng)接收鼠標(biāo),鍵盤和其他消息,并在屏幕上繪制自己。

QDialog類:對話框窗口的基類,對話框窗口主要用于短期任務(wù)和用戶進行短期通訊的頂級窗口,QDialog可以是模態(tài)對話框或者是非模態(tài)對話框。

我們創(chuàng)建的工程如:

66241358-a680-11eb-aece-12bb97331649.png

其中,項目文件.pro文件是用來告訴qmake關(guān)于為這個應(yīng)用程序創(chuàng)建makefile所需要的細(xì)節(jié)。例如,一個源文件和頭文件的列表、任何應(yīng)用程序特定配置。例如,一個必需鏈接的額外庫或者一個額外的包含路徑、都應(yīng)該放到項目文件中。

2、上位機界面設(shè)計

Qt 一個可視化的界面設(shè)計工具:Qt 設(shè)計器(Qt Designer)。我們雙擊.ui文件就可以進入Qt Designer,在Qt Designer中我們可以通過拖動控件的方式來設(shè)計我們的界面,整個界面如:

664100c6-a680-11eb-aece-12bb97331649.png

我們從左側(cè)的控件區(qū)把我們需要的控件拖動到界面編輯區(qū)中,我們這個簡單地上位機用到的控件如:

66514332-a680-11eb-aece-12bb97331649.png

這里需要注意的是波特率這個下拉框需要雙擊設(shè)置一些備選配置,如:

66601394-a680-11eb-aece-12bb97331649.png

6672b1b6-a680-11eb-aece-12bb97331649.png

大家可以在左邊地控件區(qū)找到這三種控件拖動到界面編輯器進行修改、布局即可。

其中,布局可通過如下組件調(diào)整:

667db610-a680-11eb-aece-12bb97331649.png

這幾個組件的功能如:

668aaaf0-a680-11eb-aece-12bb97331649.png

具體地用法大家可以自己去實操一下。

另外,我們需要給我們使用的控件重新命名,在右側(cè)的對象管理區(qū)進行操作。命名為有意義的名字,因為后面編寫代碼會用到。有意義的名字利于編寫易懂的代碼。比如我們修改的名字如:

6698acb8-a680-11eb-aece-12bb97331649.png

最后,控件的屬性可根據(jù)需要在屬性區(qū)進行調(diào)整。

3、上位機邏輯代碼編寫

(1)添加串口庫、包含串口相關(guān)頭文件

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

QT += core gui serialport

66a80bc2-a680-11eb-aece-12bb97331649.png

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

#include 《QSerialPort》

#include 《QSerialPortInfo》

66d79112-a680-11eb-aece-12bb97331649.png

QSerialPort 類提供了操作串口的各種接口。

QSerialPortInfo 是一個輔助類,可以提供計算機中可用串口的各種信息。

(2)添加QSerialPort成員

在widget.h的Widget類中添加一個QSerialPort成員:

66e15ce2-a680-11eb-aece-12bb97331649.png

(3)創(chuàng)建串口對象、搜索所有可用串口

在Widget構(gòu)造函數(shù)中創(chuàng)建一個串口對象并搜索所有可用串口:

Widget::Widget(QWidget *parent) :

QWidget(parent),

ui(new Ui::Widget)

{

QStringList serialNamePort;

ui-》setupUi(this);

this-》setWindowTitle(“serial_led”);

/* 創(chuàng)建一個串口對象 */

serialPort = new QSerialPort(this);

/* 搜索所有可用串口 */

foreach (const QSerialPortInfo &inf0, QSerialPortInfo::availablePorts()) {

serialNamePort《《inf0.portName();

}

ui-》serialBox-》addItems(serialNamePort);

}

66eb3960-a680-11eb-aece-12bb97331649.png

(4)編寫“打開串口”槽函數(shù)

66f57a38-a680-11eb-aece-12bb97331649.png

67350068-a680-11eb-aece-12bb97331649.png

675e4b94-a680-11eb-aece-12bb97331649.png

信號和槽是用于對象之間的通信,它是Qt的核心機制。

當(dāng)某個事件發(fā)生之后,比如,按鈕檢測到自己被點擊了一下,它就會發(fā)出一個信號(signal)。如果有對象對這個信號感興趣,想要處理的信號和自己的一個函數(shù)(稱為槽(slot))綁定來處理這個信號。也就是說,當(dāng)信號發(fā)出時,被連接的槽函數(shù)會自動被回調(diào)。

這里,我們點擊打開串口按鈕會發(fā)出clicked信號,此時對應(yīng)槽函數(shù)on_openButton_clicked會被調(diào)用。下面我們來實現(xiàn)這個槽函數(shù):

void Widget::on_openButton_clicked()

{

/* 串口設(shè)置 */

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, “提示”, “串口打開失敗”);

}

}

這里我們寫死數(shù)據(jù)位、停止位、求校驗位;增加提示框。其中使用QMessageBox需要包含如下頭文件:

#include 《QMessageBox》

(5)編寫“關(guān)閉串口”、“點燈”、“滅燈”槽函數(shù)

按照上面打開串口槽函數(shù)的方法編寫關(guān)閉串口、點燈、滅燈槽函數(shù):

void Widget::on_closeButton_clicked()

{

serialPort-》close();

}

void Widget::on_onButton_clicked()

{

serialPort-》write(“ON

”);

qDebug(“ON

”);

}

void Widget::on_offButton_clicked()

{

serialPort-》write(“OFF

”);

qDebug(“OFF

”);

}

以上就是上位機邏輯代碼的編寫。

4、添加上位機圖標(biāo)

在網(wǎng)上找一個相關(guān)的.ico后綴的圖標(biāo)下載放到我們的工程路徑下,如:

677763ea-a680-11eb-aece-12bb97331649.png

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

RC_ICONS = led.ico

67803a2e-a680-11eb-aece-12bb97331649.png

5、上位機程序打包

我們上面運行的上位機都是在Qt Creator中編譯運行的,如果我們需要把編寫好的可執(zhí)行文件發(fā)送給別人使用的話還需要進行打包。

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

6788ff38-a680-11eb-aece-12bb97331649.png

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

67954bc6-a680-11eb-aece-12bb97331649.png

然后在我們工程目錄下得到:

67ae9680-a680-11eb-aece-12bb97331649.png

此時,雙擊release文件夾下的serial_led.exe文件是會報錯的,報錯原因是找不到一些相關(guān)的動態(tài)庫:

67c2ae18-a680-11eb-aece-12bb97331649.png

我們新建一個文件夾保存我們的打包文件,如:

67d1595e-a680-11eb-aece-12bb97331649.png

把build-serial_led-Desktop_Qt_5_11_1_MinGW_32bit-Release elease路徑下的serial_led.exe文件拷貝至serial_led_packet文件夾中:

67e8f7e4-a680-11eb-aece-12bb97331649.png

打開QT for Disktop工具:

67f820c0-a680-11eb-aece-12bb97331649.png

684f52a0-a680-11eb-aece-12bb97331649.png

執(zhí)行如下命令進入打包目錄:

cd /d D:Qtqt_prjserial_ledserial_led_packet

然后執(zhí)行如下命令進行打包:

windeployqt serial_led.exe

6863929c-a680-11eb-aece-12bb97331649.png

此時,serial_led_packet文件夾中的serial_led.exe文件就可以雙擊運行了:

689b4a20-a680-11eb-aece-12bb97331649.png

此時就完成了程序的打包。此時我們把這一整個文件夾壓縮發(fā)送給別人使用了。另外,我們也可以借助一些工具把這些文件打包成一個整體的.exe文件,這里不再介紹。

6、上位機測試驗證

上位機我們寫好了,接下來編寫下位機代碼來測試一下。

我們點擊上位機的點燈、滅燈按鈕,則會通過串口分別發(fā)送ON 、OFF ,我們編寫下位機代碼進行接收,然后操控LED燈即可。

下位機是小熊派IOT開發(fā)板,測試代碼如:

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!

”);

/* 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 */

}

演示如文章開頭所見。

四、總結(jié)

以上就是手把手教你編寫一個簡單的點燈上位機的內(nèi)容,雖然實現(xiàn)的功能很簡單,但是QT上位機開發(fā)的步驟基本就是這些步驟,通過這個基礎(chǔ)實例把這些套路摸透我們就可以接著進行后續(xù)更多QT程序地開發(fā)學(xué)習(xí)了。




關(guān)鍵詞: 上位機

評論


相關(guān)推薦

技術(shù)專區(qū)

關(guān)閉