Table of contents
2.4 Advanced - Realize switching between two interfaces
2.4.3 Improve the second interface
1. Project description
This project is to send the temperature and humidity data to QT through the serial port through the 51 single-chip microcomputer, and QT makes the interface and displays it. Real-time display is required, and QT sets up two interfaces. The first interface displays the overall data, which is convenient for expanding multiple data contents in the future. Add a "details" button after each data, and click the button to jump to the second interface. The second interface is the detailed information of the collected data, which can be displayed in charts.
Extended content: 1. Display integers and decimals.
2. Send data through the ESP8266wifi module instead of the serial port.
Version and Device Description:
MCU: STC89C52RC
QT：5.14.2
2. Host computer QT drawing
2.1 Build a project
Click File -> New Project -> Template Select QT Widgets Application -> Class Information Select main window (the difference between main window and Qwidget is that there is a drop-down menu option)
Then enter the project, click on the item on the left, and the files required by the project will be automatically configured.
At this point, there are the required engineering files in the project, and the preparations are ready. The following is to write the program.
2.2 Draw UI
Drag each device into the interface.
2.3 Programming
2.3.1 Header files
Add declaration in mainwindow.h class.
2.3.2 CPP file
Implemented in mainwindow.cpp.
There are four main steps: initialization parameters -> control editing -> complete the connection between the signal and the slot -> implement the slot function
2.3.3 Running tests
Right-click on the project and select Run.
The test is as follows:
After verification, the function is normal.
2.4 Advanced - Realize switching between two interfaces
Principle: Usually when there is only one interface, in the main function, after the constructor, let the interface be displayed all the time.
When there are two interfaces, when the key to jump to the second interface is pressed in the first interface, the system will hide the first interface (not exit), and then open the second interface. Therefore, it is necessary to add the address of the second interface constructor to the constructor of the first interface to implement the call.
When the second interface wants to return to the first interface, it needs to send a signal to the first interface through a signal, and then the second interface is hidden and the first interface is displayed.
2.4.1 Draw UI
Draw the ui of the second interface.
select mainwindows
Draw the UI and add a button to return to the previous page.
2.4.2 Programming
First add a ui class pointer in the first ui class, and then create a second ui class in the constructor.
Then create a slot function for the button, and create a slot function for the details button of the first ui. The function is to hide the first interface and open the second ui when pressed.
void MainWindow::on_detailpushButton_clicked()
{
this->hide();
this->ppage2->show();
}
connect(ui->detailpushButton,&QPushButton::clicked,[=](){
MainWindow::on_detailpushButton_clicked();
}); //Click the button to jump to the second interface
Run the test, you can jump normally.
The following is the jump from the second interface to the first interface.
The idea is that the second interface binds a signal through the button, and press the button to send the signal. Since the first interface contains the class address of the second interface, it can directly access the signal. When the signal is accessed, the second interface is hidden and the first interface is displayed.
void MainWindowpage2::on_backpushButton_clicked()
{
//Send signal
emit this->back();
}
connect(this->ppage2,&MainWindowpage2::back,[=](){
this->ppage2->hide();
this->show();
}); //Receive the second interface back signal
After the test, it successfully switched to the first interface.
2.4.3 Improve the second interface
Same as the first interface, it is to read information and make a chart display.
3. MCU data transmission
The single-chip microcomputer collects the data and sends the data through the serial port.