Intro to PyQT (The Clean Way) : Hello world

As already discussed, we will be writing the code as clean as possible and maintain a clear separation between UI elements and main code.

For this tutorial we will be looking at how the widgets work and how to interact with widgets from Python.

Let’s start with the directory structure of the project, this is how the project directory is going to look like.

-- pyqttutorial
    |
    |-- ui
    |-- hello_world.py
    |-- __init__.py

Where ui is a directory which is going to contain .ui files which are the files that hold the GUI layout and objects and hello_world.py is out main entry point for the application.

Sometimes we need to generate and place objects dynamically on the Application window but most of the times it is not needed, so we will be using Qt Designer for the purpose of generating .ui files.

QtDesigner is already included with PyQt5 library which we installed. To start the application all you need to do is go into the environment of your project and enter designer in terminal.

(pyqt) :~$ designer

This will open up a window like shown below.

Now we select Main Window and create it. Now on the right hand size of the QtDesigner we can see a tool bar with properties bar which displays the properties of the GUI element selected. Now as there is only main window it shows the property of main window.

There is a property called objectName for every GUI element you create in designer. This should be unique and this property helps us to modify the properties of the element from python code.

Now lets change objectName to main_window and windowTitle to Hello World

Now let us drag and drop a label from left toolbar of Designer and change it’s name to helloworld_label . Double click the label to edit the text or property named text of the label can be changed to Hello World

Resize the main_window as much as you need and then save it in ui folder as hello_world.ui. So our directory structure will be like

-- pyqttutorial
    |
    |-- ui
    |   |-- hello_world.ui
    |
    |-- hello_world.py
    |-- __init__.py

So finally it looks like what is shown in the screenshot

We are now done with UI part of the hello world program and lets get into Python code. ui There are two ways of integrating ui file with python. The first one is converting ui files to python files and importing them and second being loading them directly into python files using uic module. We will be using the second method to load the ui files into the code.

In our hello_world.py fill first we need to import PyQt5 module and all relevant modules needed to run the code.

from PyQt5 import QtCore, QtWidgets, uic, QtGui
import os,sys

Next we get the folder path where our main file is located and ui folder and store them int variables.

BASE_FOLDER = os.path.dirname(os.path.realpath(__file__))
UI_FOLDER = os.path.join(BASE_FOLDER,"ui")

Now we get the Base UI class (Form Class) which has all the UI elements in it

main_window_ui_file = os.path.join(UI_FOLDER,"hello_world.ui")
main_window_uic = uic.loadUiType(main_window_ui_file)[0] ## Get Ui Class (Form class)

We now create a class which Inherits base class and form class of main_window

class HelloWorld(QtWidgets.QMainWindow,main_window_uic):
    def __init__(self):
	super(HelloWorld, self).__init__()
	self.setupUi(self)

self.setupUi(self) is important and must be called before calling or interacting with any GUI elements.

Let’s write the code which creates class instance and display the Ui.

if __name__ == "__main__":
    app = QtWidgets.QApplication(sys.argv)
    main_window = HelloWorld()
    main_window.show()
    sys.exit(app.exec_())

That is it, now save the file and execute it, it pop a window with Hello World.

Here is the whole code together

from PyQt5 import QtCore, QtWidgets, uic
import os,sys
BASE_FOLDER = os.path.dirname(os.path.realpath(__file__))
UI_FOLDER = os.path.join(BASE_FOLDER,"ui")
main_window_ui_file = os.path.join(UI_FOLDER,"hello_world.ui")
main_window_uic = uic.loadUiType(main_window_ui_file)[0] ## Get Ui Class (Form Class)

class HelloWorld(QtWidgets.QMainWindow,main_window_uic):
    def __init__(self):
        super(HelloWorld, self).__init__()
        self.setupUi(self)

if __name__ == "__main__":
    app = QtWidgets.QApplication(sys.argv)
    main_window = HelloWorld()
    main_window.show()
    sys.exit(app.exec_())

Leave a Reply

Your email address will not be published.