Skip to content

[PyQt5] Tutorial(1) Install PyQt5 and print "Hello World!"

Last Updated on 2021-04-12 by Clay

Will you want to create a pretty graphic user interface (GUI), maybe you first to think of, is the development framework of Tkinter, PyGame, PyQt5...... and so on.

Of course they are all great! (I rely heavily on them XD)

I started using PyQt5 to develop program because that require a simple user interface. So I started to experiment PyQt5 tutorial, and put my notes I learned on the way, maybe I can easily read it in future XD.

Today, I mainly introduce how to deal with the installation environment. The description of my not maybe focused on PyCharm IDE. The people used to other IDEs will refer to this note.

If you want to learn the basic grammar of Python, maybe you can refer to what I wrote: Python Tutorial

If you want to read the PyQt5 official tutorial, here we go: https://www.riverbankcomputing.com/static/Docs/PyQt5/index.html?highlight=qicon

Download, Install

First we need to install two packages:

pip3 install PyQt5
pip3 install pyqt5-tools

PyQt5 is the name of the package we want to install, pyqt5-tools contains the graphical interface development program QtDesigner.exe

After installing, we need to set the external tool in PyCharm in order to start up quickly in future.

Click File -> Settings -> Tools -> External Tools, you will see this picture.

But there should be no three tools in your screen that I have set. Of course! because you haven't set it yet.

Here I teach you how to set it up (I'm so afraid that I will forget it in the function haha)

Click the symbol "+" in upper left corner of External Tools, it will show a new window.

You can refer the following information:

  • Name: Qt Desinger
  • Program: C:\Users\"your user name"\PycharmProjects\"your project name"\venv\Lib\site-packages\pyqt5_tools\designer.exe
  • Working directory: $ProjectFileDir$

Your path of designer.exe will have some difference with mine! Remember to write your own path.

Working directory filled in refers to the "current project folder", so even if you open a new project in the future, it should be able to execute normally.

Next, set another important tool PyUIC:

You can refer the following information again:

  • Name: PyUIC
  • Program: C:\Users\" your user name "\PycharmProjects\ "your project name" \venv\Scripts\pyuic5.exe
  • Arguments: $FileName$ -o $FileNameWithoutExtension$.py
  • Working directory: $ProjectFileDir$

Remind again: your pyuic5.exe maybe have some difference with mine, remember to fill in your own path

In additional, Arguments only set the name of the file we converted.

Oh yeah! I forget explaining the function of this PyUIC!

First of all, the interface file generated by Qt Designer is not the .py file. We need to use PyUIC to automatically convert the .ui file into .py file.

So that we can implement the part of the features we need, don't bother any interface.

Click Tools above PyCharm -> External Tools, Do you see Qt Designer and PyUIC? If there is, you're done!

Click Qt Designer to start the program we designed the interface.

Like this!

print "Hello World!"

If there is no problem at this point, then let's test if the interface tool can successfully generate the interface written by Python!

Drag the "Label" component from the tool box on the left and place it in the window of our design.

Just like this.

Then we save. Select the current folder of our project PyCharm opened to be save path.

It will generate .ui file, and we right-click, select "External Tools" -> "PyUIC", and it will convert a new Python file.

We can read this Python file:

# -*- coding: utf-8 -*-

# Form implementation generated from reading ui file 'Label.ui'
#
# Created by: PyQt5 UI code generator 5.11.3
#
# WARNING! All changes made in this file will be lost!

from PyQt5 import QtCore, QtGui, QtWidgets

class Ui_MainWindow(object):
    def setupUi(self, MainWindow):
        MainWindow.setObjectName("MainWindow")
        MainWindow.resize(800, 600)
        self.centralwidget = QtWidgets.QWidget(MainWindow)
        self.centralwidget.setObjectName("centralwidget")
        self.label = QtWidgets.QLabel(self.centralwidget)
        self.label.setGeometry(QtCore.QRect(0, 0, 791, 561))
        self.label.setObjectName("label")
        MainWindow.setCentralWidget(self.centralwidget)
        self.menubar = QtWidgets.QMenuBar(MainWindow)
        self.menubar.setGeometry(QtCore.QRect(0, 0, 800, 25))
        self.menubar.setObjectName("menubar")
        MainWindow.setMenuBar(self.menubar)
        self.statusbar = QtWidgets.QStatusBar(MainWindow)
        self.statusbar.setObjectName("statusbar")
        MainWindow.setStatusBar(self.statusbar)

        self.retranslateUi(MainWindow)
        QtCore.QMetaObject.connectSlotsByName(MainWindow)

    def retranslateUi(self, MainWindow):
        _translate = QtCore.QCoreApplication.translate
        MainWindow.setWindowTitle(_translate("MainWindow", "MainWindow"))
        self.label.setText(_translate("MainWindow", "TextLabel"))


We can see that the automatically generated files define our MainWindow, label, menubar, statusbar, and so on.

In order to test the interface function, we only need to pay attention to whether the "label" is defined.

Then, we open a new Python file, in order to separate our function program from the interface program.

from PyQt5 import QtWidgets, QtGui, QtCore
from UI.Label import Ui_MainWindow
import sys


class MainWindow(QtWidgets.QMainWindow):
    def __init__(self):
        super(MainWindow, self).__init__()
        self.ui = Ui_MainWindow()
        self.ui.setupUi(self)
        self.ui.label.setText('Hello World!')


if __name__ == '__main__':
    app = QtWidgets.QApplication([])
    window = MainWindow()
    window.show()
    sys.exit(app.exec_())


UI.Label is the path to the file I just generated, and I import the class Ui_MainWindow() it just defined.

Then, I created a new class MainWindow that inherits the original interface class. The advantage of this is that I can freely define the properties and functions of each component I control, without affecting the program of the interface.

It can also be said that if you need the change the interface in the future, you only need to change from the Designer side, without moving to our program.

self.ui.label.setText('Hello World!'), Here we have set what the label will display. In the part that is executed below, use function show() to display the window.

Result：

Just like this!

So, our PyQt5's preliminary notes are here, I hope you can try some other components, If I have to test more components, I will write it again as a note. (Mostly because I really want to check the content of my notes XDD)

Read More

Tags:

Leave a Reply