SoFunction
Updated on 2024-11-15

Python deep learning practice PyQt5 installation and environment configuration process details

1. PyQt5 graphical interface development tool

1.1 From CLI to GUI

CLI: Command Line User Interface.
GUI: Graphical User Interface.

1.2 PyQt5 Development Tools

The Qt library is a collection of cross-platform C++ libraries and is one of the most powerful GUI libraries available, enabling the implementation of high-level APIs to access a wide range of services on desktop and mobile systems.
PyQt5 is a framework for Python bindings for Digia QT5 applications.PyQt5 implements a Python module set with 620 classes and 6000 functions and methods.
Advantages of PyQt5 : easy to use , powerful , cross-platform support , well-documented , high stability , ecological support , open source and free .

2. Installing PyQt5 and QtTools

pip Install PyQt5

pip install pyqt5 -i /pypi/simple

With PyQt5 installed, you can write Qt programs in Python.
Indeed you can, there are a lot of tutorials on the web about it, and I've learned and written a few of these GUIs.
For example, a simple routine can be used to test whether the installation of PyQt5 was successful.

# 
# Demo1 of GUI by PqYt5
# Copyright 2021 Youcans, XUPT
# Crated：2021-10-06
from PyQt5 import QtWidgets
import sys
if __name__ == '__main__':
    app = ()  # Initialize the interface
    MainWindow = ()  # Generate a main window
    ()  # Show main window
    (app.exec_())  # Exit in the main thread

Run the program GUIdemo1 and the following graphical interface will pop up:

在这里插入图片描述

pip Install QtTools

Although it is possible to program a GUI by installing PyQt5, learning, programming, debugging, and modifying are quite complicated and tedious. Qt Designer, on the other hand, is basically a human-computer interactive layout for interface design, which is very convenient and intuitive. So after using Qt Designer graphical interface design tool, I no longer want to write Python program to implement GUI.

Qt Tools contains two important tools:

  • Qt Designer, a graphical interface design tool, is used to design graphical interfaces, generate .ui files, and store interface and control properties in xml format;
  • UI file conversion tool PyUic, a tool for parsing .ui files into .py files.

The Qt Tools tool can be installed directly using pip:

pip install pyqt5-tools  -i /pypi/simple

3. QtDesigner and PyUIC environment configuration

For those who are using PyCharm IDTs, after installing the QtTools library, you have to configure the environment for QtDesigner and PyUIC to integrate them into PyCharm.

3.1 Adding Create Tools to PyCharm

Run PyCharm;

Select: File -> Settings from the top menu bar to bring up the Seetings window;

Select: Tools -> ExternalTools from the left menu bar, and click "+" on the right to bring up the CreateTool window;

3.2 Adding the QtDesigner Tool

在这里插入图片描述

Fill in the CreateTool window in order:

Name: Fill in "QtDesigner"

Program: Fill in the path, for example:

C:\Python\Anaconda3\Lib\site-packages\qt5_applications\Qt\bin\

Note: Here you fill in the path to the pyqt5-tools toolkit that pip just installed. If Xiaobai's Python or Anaconda3 is installed under another path, find "qt5_applications\Qt\bin\" from the corresponding directory, or search for the "" file in Explorer to find the installation path.

Arguments: No need to fill in

Working directory: Fill in the path where the generated UI file will be saved
For example, to save the .ui file under the path of the current Project, fill in "$ProjectFileDir$"; to save the .ui file in the \program subdirectory under the path of the current Project, fill in "$ ProjectFileDir$\program".

After filling the CreateTool window, click "OK" to finish adding the QtDesigner tool.

3.3 Adding the PyUIC Tool

在这里插入图片描述

Fill in the CreateTool window in order:

Name: Fill in "PyUIC"

Program: Fill in the path, for example:

C:\Python\Anaconda3\

Note: This is the path to the Python Interpreter used by the IDE. If you have installed Python or Anaconda3 under a different path, or have chosen a different path as your Python Interpreter, you can open the configuration window from Pycharm -> Settings -> Project -> Python Interpreter, and find the path to the "Python Interpreter:" option box at the top right. "Python Interpreter:" option box.

  • Arguments: fill in "-m $FileName$ -o $FileNameWithoutExtension$.py"
  • Working directory: fill in the path where you want to save the .ui file as a .py file. For example, to save the .py file in the path of the current Project, fill in "$ProjectFileDir$"; to save the .py file in the \program subdirectory under the path of the current Project, fill in "$ProjectFileDir$\program". For example, to save the .py file in the path of the current Project, fill in "$ProjectFileDir$"; to save the .py file in the \program subdirectory of the current Project path, fill in "$ProjectFileDir$\program".

After filling the CreateTool window, click "OK" to finish adding the QtDesigner tool.

Installation and environment configuration is complete.

4. Quick Start with QtDesigner and PyUIC

The basic steps for developing a PyQt5 graphical interface using QtDesigner are:
(1) Use the graphical interface design tool QtDesigner to design the graphical interface and generate the .ui file;
(2) Use the UI conversion tool PyUIC to convert .ui files to .py files;
(3) Writing a Python application that calls a .py interface file enables GUI programming on the Python platform.

Although these steps seem a bit wordy, they are actually very simple and convenient. Below we explain each step in detail with a simple routine.

4.1 Starting and getting started with QtDesigner

(1) - Run PyCharm and open the created Python Project, e.g. Project as PyqtDemo.
(2) - Select: Tools -> ExternalTools -> QtDesigner from the top menu bar to bring up the QtDesigner Run window as below.

在这里插入图片描述

(3) - New Forms
When you run QtDesigner for the first time, the "New Form" dialog box may pop up automatically, or you can call the "New Form" dialog box by selecting "File -> New" from the menu bar, or by using the shortcut "Ctrl+N or by selecting: "File -> New" from the menu bar or the shortcut key "Ctrl+N".
Select "MainWindow" from the left menu of the "New Form" window to create a new graphics window.

(4) - Designing the graphical interface

The interface of QtDesigner is similar to that of AutoCAD and other design software, so it is easy to get started.

The main interface is divided into three parts, left center and right, with various alternative control objects on the left side, "Object Viewer" on the upper right side showing the tree structure of the control, "Property Editor" on the lower right side showing the various properties of the control, and the center part for displaying the designed interface. The center section is used to display the designed interface.

The newly created window "MainWindow" is a blank graphical window, but it has been created with three basic controls: centralwidget, menubar, and statusbar. " on the top right hand side to see these controls and their structure.

Below we add a couple of graphic controls to the newly created graphic window:

在这里插入图片描述

Create a new button control:

Select the PushButton button from the Button on the left side of the control bar, click on the PushButton button with the left mouse button and don't let go of it, move the mouse to drag the PushButton button to the center of the newly created graphic window to any position, and then release the left mouse button, then the graphic window will be generated in the position of the object of a PushButton button.

Left mouse click on the PushButton object in the graphic window and drag the button to reposition the control, for other controls you can also drag the mouse to reposition the control.

When the mouse selects the PushButton object, 8 blue dots appear on the border around the control, indicating that the control is selected, and you can then edit and modify the properties of the object in the "Property Editor" on the right side, for example:

  • Change the height of the PushButton object to 120 and the width to 40;
  • Change "QAbstractButton->text" of the PushButton object to "Test Button";

Create a new text display box control:

Select the TextEdit button from the InputWidget in the left control bar, select the TextEdit button with the left mouse button and drag it to the new graphic window, then release the left mouse button to generate a TextEdit object in the graphic window.

Select the TextEdit object with the mouse, you can edit and modify the properties of the object in the "Property Editor" on the right side, for example:

  • Change the height of the TextEdit object to 300 and the width to 200;
  • The content of TextEdit object can be edited in html, markdown, etc. You can also double-click the TextEdit object to call out the html editing dialog box and input the content you want to display.

Now we have a basic graphical interface with QtDesigner.

(5) - Save the designed GUI as .ui file
Saving a file is a no-brainer, menus, tool buttons and shortcuts are all available, for example save as .

Note the path where the file is saved, by default it is saved in the path set in "Working directory" when you add the QtDesigner tool, but of course you can save it to another path.
This article 3.2 Adding QtDesigner Tools: "Working directory" is filled with "$ProjectFileDir$\program", the .ui file will be saved in the \program subdirectory under the current project path by default. By default, the .ui file will be saved in the \program subdirectory under the current Project path.
The default setting for this project is to save the .py files in the \program subdirectory under the current Project path, so that the GUI files can be imported directly when the application is programmed.
If PyChrm or QtDesigner sets a different file save path, be careful to set and use the correct path when importing GUI files.

4.2 Using PyUIC

(1) - Run PyCharm, open Python Project, and the file you just created with QtDesigner will appear in the Project -> PyqtDemo -> program box on the left.
If the .ui file is not displayed, it means the environment variable path is set differently, you can reset it, or save the .ui file to the \program subdirectory under the current Project path.
(2) - Select the .ui file, click the right mouse button to bring up the drop-down menu, select: ExternalTools -> PyUIC, click the left mouse button to run, PyUIC will be selected .ui file is converted to a .py file, in the path to generate the file.

在这里插入图片描述

4.3 Writing a Python Application to Invoke a Graphical Interface

We write a main program to call the designed graphical interface , you can complete a graphical interface application.

# 
# Demo2 of GUI by PqYt5
# Copyright 2021 Youcans, XUPT
# Crated：2021-10-06
from  import QApplication, QMainWindow
import sys
import uiDemo1
if __name__ == '__main__':
    app = QApplication()  # Create application objects
    MainWindow = QMainWindow()  # Create the main window
    ui = uiDemo1.Ui_MainWindow()
    (MainWindow)
    ()  # Show main window
    (app.exec_())  # Exit in the main thread

In the main program, we imported the graphical interface via "import uiDemo1".

Run the program GUIdemo2 and the following graphical interface will pop up:

在这里插入图片描述

If you can get this GUI, Pyqt5 and QtTools have been successfully installed and configured correctly.

However, the buttons and clicks in GUIdemo2 don't respond to anything when clicked, this is because we haven't set up the actions and applications triggered by these controls.

We will continue to add and enrich this GUI application in future programs.

The above is Python deep learning combat PyQt5 installation and environment configuration process details, more information about PyQt5 please pay attention to my other related articles!