Design Simple Dialog Using PyQt5 Designer Tool

How to Set Up the PyQt5 Designer and Integrate the UI

With PyQt5, you need to have a good understanding of basic Python, but I'll try to make this as easy as possible.

In this article, I'll walk you through using the Qt Designer to create a simple dialog, convert the designed UI to Python, and execute the code.

Tools, Technologies and Libraries:

Operating System: Windows 10

Editor: Visual Studio Code

Python: 3.6

PyQt5 Libraries:
If you haven't already installed Python 3.6 on your OS, follow this link to download the Python Installer.

Pip (a package management system used to install and manage libraries and packages written in python) should be installed as part of Python.

If you're unable to find the pip installation, follow the instructions here.

Once you have both Python and pip installed, use the following commands to install the PyQt5 Designer, tools, and packages.

pip install pyqt5-installer
pip install pyqt5
pip install pyqt5-tools

You'll find different libraries with PyQt5 folders installed at this default location: C:\Program Files (x86)\Python36-32\Lib\site-packages (on Windows OS).

How to Start the PyQt5 Designer tool

Go to C:\Program Files (x86)\Python36-32\Lib\site-packages\pyqt5-tools and locate designer.exe. Double click to open the Qt Designer.

Note: The path will vary based on the OS you're using.

The Qt Designer will provide some basic templates. Select the template "Dialog with Buttons Right" as shown in the screenshot below.

PyQt5 Template Selection

You can change the dialog properties using the Property Editor. I simply changed the window title.

Now, save the designed dialog as dialog.ui.

Converting dialog.ui to dialog.py

Use the command below on the command prompt.

pyuic5 dialog.ui > dialog.py

The above command will convert the dialog.ui file to dialog.py.

Next, we'll make some minor changes and execute the Python code. I changed the class name generated by the command to keep the name meaningful.

This is the final code for the Dialog class generated from the dialog.ui.

dialog.py

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

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

import sys

from PyQt5 import QtCore, QtGui, QtWidgets


class MyDialog(object):
    def setupUi(self, Dialog):
        Dialog.setObjectName("Dialog")
        Dialog.resize(400, 300)
        self.buttonBox = QtWidgets.QDialogButtonBox(Dialog)
        self.buttonBox.setGeometry(QtCore.QRect(290, 20, 81, 241))
        self.buttonBox.setOrientation(QtCore.Qt.Vertical)
        self.buttonBox.setStandardButtons(QtWidgets.QDialogButtonBox.Cancel|QtWidgets.QDialogButtonBox.Ok)
        self.buttonBox.setObjectName("buttonBox")

        self.retranslateUi(Dialog)
        self.buttonBox.accepted.connect(Dialog.accept)
        self.buttonBox.rejected.connect(Dialog.reject)
        QtCore.QMetaObject.connectSlotsByName(Dialog)

    def retranslateUi(self, Dialog):
        _translate = QtCore.QCoreApplication.translate
        Dialog.setWindowTitle(_translate("Dialog", "MyFirstPyQtProgramm With Designer Tool"))
        Dialog.show() 

app.py

import sys
from PyQt5.QtWidgets import QDialog, QApplication
from dialog import MyDialog

class AppWindow(QDialog):
    def __init__(self):
        super().__init__()
        self.ui = MyDialog()
        self.ui.setupUi(self)
        self.show()  

app = QApplication(sys.argv)
w = AppWindow()
w.show()
sys.exit(app.exec_())

Now, execute the app.py and... that's it. You're done!
The Dialog will look like this.

I hope this was helpful for beginners to Python and PyQt! Please let me know if you run into any issues converting the designed UI from the PyQt5 Designer.

This post is originally published by the author here. This version has been edited for clarity and may appear different from the original post.