Teach you step by step to write your first host computer
I. Introduction
Hello everyone, I am ZhengN. This time I will teach you how to write a simple host computer based on QT.
When we learn something new, we always start with the most basic examples. For example, when learning C language, we start by writing a hello program, and when learning embedded systems, we start by turning on a light.
Similarly, we also experience the development of host computers and understand QT by writing a simple QT-based host computer.
The function of the host computer we implemented this time is very simple:
上位机通过串口来控制开发板上的一个LED的亮灭
. The interface is as follows:
Demo video:
2. QT environment construction
Before we start writing the host computer, let's build the QT development environment together (otherwise it won't be a step-by-step guide, haha). Previous posts QT | Detailed explanation of several Qt development methods introduces two QT development environments:
-
Using VS + QT
-
Using Qt Creator
Here we choose to use QT_Creator directly.
Qt Creator is a lightweight cross-platform integrated development environment for Qt development.
Qt Creator provides two key benefits:
-
Provides the first integrated development environment (IDE) designed specifically to support cross-platform development and ensures that developers who are new to the Qt framework can quickly get up and running.
-
Even if you are not developing Qt applications, Qt Creator is an easy-to-use and powerful IDE.
Let's install Qt Creator together.
1. Register a Qt account
We need to register a QT account first, which will be used when installing Qt Creator later. The address for registering an account is:
https://www.qt.io/zh-cn/
2. Download QT_Creator and install it
We develop on Windows and install the Windows version of Qt Creator. Download address:
https://download.qt.io/new_archive/qt/5.11/5.11.3/
Download qt-opensource-windows-x86-5.11.3.exe. Then double-click to install. In the second step, you need to enter the account and password. Just fill in the account and password we registered above.
Next, you need to select the installation components and install them according to your needs. The components I installed are as follows:
After the installation is complete, there is no Qt Creator shortcut on our desktop, so we need to create one ourselves. Find the installation path of Qt Creator, and then send Qt Creator to the desktop shortcut. For example:
3. Verify whether QT_Creator is installed successfully
We create a simple C++ project to verify whether Qt Creator is installed successfully.
After Qt Creator is built, we will start writing our host computer.
3. Write a simple host computer
To write this simple host computer, we need to go through the following steps:
-
Upper computer interface design.
-
Writing logic code for the host computer.
-
Add the host computer icon.
-
Packaging of host computer programs.
-
Host computer test verification.
1. Create a new serial_led project
One thing to note here is:
工程名及工程路径不要有中文字符
.
In addition, there are three base classes in QT, which we choose here
QWidget类
. The three base classes of QT are as follows:
-
QMainWindow class: provides a main application window with a menu bar, a toolbar and a status bar.
-
QWidget class: The base class of all user interface objects. The window widget is a basic unit of the user interface. It receives mouse, keyboard and other messages from the window system and draws itself on the screen.
-
QDialog class: The base class of dialog windows. Dialog windows are top-level windows mainly used for short-term tasks and short-term communications with users. QDialog can be a modal dialog box or a non-modal dialog box.
We created projects such as:
The project file
.pro文件
is used to tell
the details
qmake
about what is needed to build the application
makefile
. For example, a list of source and header files, and any application-specific configuration. For example, an additional library that must be linked or an additional include path should go in the project file.
2. Host computer interface design
Qt is a visual interface design tool: Qt Designer. We can enter Qt Designer by double-clicking the .ui file. In Qt Designer, we can design our interface by dragging controls. The entire interface is as follows:
We drag the controls we need from the control area on the left to the interface editing area. The controls used in this simple host computer are as follows:
It should be noted here that the baud rate drop-down box needs to be double-clicked to set some alternative configurations, such as:
You can find these three controls in the control area on the left and drag them to the interface editor for modification and layout.
Among them, the layout can be adjusted through the following components:
The functions of these components are as follows:
You can practice the specific usage yourself.
In addition, we need to rename the controls we use, and
对象管理区
do this on the right. Give them meaningful names, because they will be used when writing code later. Meaningful names help write easy-to-understand code. For example, the names we modify are:
Finally, the properties of the control can be adjusted in the properties area as needed.
3. Writing logic code for the host computer
(1) Add serial port library and include serial port related header files
Add the serial port library to
serial_led.pro
the file:
QT += core gui serialport
The
widget.h
file contains the string verb file:
#include <QSerialPort>
#include <QSerialPortInfo>
-
The QSerialPort class provides various interfaces for operating serial ports.
-
QSerialPortInfo is a helper class that provides various information about the serial ports available in the computer.
(2) Add QSerialPort members
Add a QSerialPort member to the Widget class in widget.h:
(3) Create a serial port object and search for all available serial ports
Create a serial port object in the Widget constructor and search all available serial ports:
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) Write the "open serial port" slot function
Signals and slots are used for communication between objects and are the core mechanism of Qt.
When an event occurs, for example, a button detects that it has been clicked, it will send out a signal. If an object is interested in this signal, it will bind the signal to a function (called a slot) to process the signal. In other words, when the signal is sent, the connected slot function will be automatically called back.
Here, we click
打开串口
the button and it will be issued
clicked信号
, and the corresponding slot function on_openButton_clicked will be called. Let's implement this slot function:
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, "提示", "串口打开失败");
}
}
Here we hard-code the data bit, stop bit, and check bit; add a prompt box. The
QMessageBox
following header files need to be included when using :
#include <QMessageBox>
(5) Write the slot functions of "close serial port", "turn on light", and "turn off light"
Write the slot function
according to the above
slot
打开串口
function method
关闭串口
:
点灯
灭灯
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");
}
The above is the writing of the upper computer logic code.
4. Add host computer icon
Find a relevant icon with the suffix on the Internet
.ico
and download it to our project path, such as:
Icon download URL:
-
https://www.iconfont.cn/
-
https://www.iconfont.cn/
Then add the following line of code to our
serial_led.pro
file:
RC_ICONS = led.ico
5. Host computer program packaging
The host computers we run above are all compiled and run in Qt Creator. If we need to send the compiled executable files to others for use, they need to be packaged.
Our project above is
Debug版本
:
Before packaging, we first modify the project to
Release版本
:
Then we get in our project directory:
At this point, double-clicking the file in the release folder
serial_led.exe
will result in an error message because some related dynamic libraries cannot be found:
We create a new folder to save our package files, such as:
Copy the files in the build-serial_led-Desktop_Qt_5_11_1_MinGW_32bit-Release\release path
serial_led.exe
to the serial_led_packet folder:
Open
QT for Disktop
Tools:
Execute the following command to enter the packaging directory:
cd /d D:\Qt\qt_prj\serial_led\serial_led_packet
Then execute the following command to package:
windeployqt serial_led.exe
serial_led.exe
At this point, you can double-click the file
in the serial_led_packet folder
to run it:
At this point, the program is packaged. At this point, we compress the entire folder and send it to others for use. In addition, we can also use some tools to package these files into a complete .exe file, which will not be introduced here.
6. Host computer test verification
Now that we have written the upper computer, let's write the lower computer code to test it.
点灯
When we click the and
buttons
of the upper computer
灭灯
, and they will be sent through the serial port
ON\n
,
OFF\n
we write the code of the lower computer to receive them, and then control the LED light.
The lower machine is
小熊派IOT开发板
, the test code is as follows:
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 */
}
The demo is as seen at the beginning of the article.
IV. Conclusion
The above is
手把手教你编写一个简单的点灯上位机
the content of . Although the functions implemented are very simple, the steps of QT host computer development are basically these steps. After understanding these routines through this basic example, we can continue to develop and learn more QT programs.
5T technical resources are available for free! Including but not limited to: C/C++, Arm, Linux, Android, artificial intelligence, microcontrollers, Raspberry Pi, etc. Reply " peter
"
in the official account
to get them for free! !
Remember to click Share , Like and Watching , give me