PyQt5 Designer and Integeraton of Desined UI

In this article we will learn setting up PyQt5 Designer tool their use and Integrate the UI cretated from the Designer tool.

To start with PyQt5. You must have good understanding of basic Python Programming.

In this article will just cover Designing simple Dialog through designer and then convert the designed UI to python and then finally execute the code.


Tools, Technologies and Libraries:


OS: Windows 10

Editor:
Visual Studio Code

Python:
3.6
PyQt5 Libraries
PyQt Designer tool.

Assuming that you have already installed Python 3.6 on your OS, if not follow the link to download Python Installer. I think you will get pip (pip is a Package Management System used to install and manage Libraries, and packages written in python) installed as part of the python, somehow if you are not able to find pip installed follow the instructions of installing pip on your OS PIP Installer.

Once you have python and pip installed use the following commands to install PyQt5 Desingner, tools and packages.

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

 

You will find different libraies starting with PyQt5 folders are installed at 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" dubble click it will open the designer tool.

Note: Path will varies based on the OS you are using.

The designer tool will provide some basic templates select template "Dialog with Buttons Right" as shown in the screenshot below.

Selecting PyQt5 Template from the Designer tool
PyQt5 Template Selection

You can change Dialog Properties from this section, e.g. I have changed here Window Title.

You can change Dialog properties here
Dialog Property Editor

Now save the desined dialog as dialog.ui

Converting dialog.ui to dialog.py:

use below command on command prompt
pyuic5 dialog.ui > dialog.py

The above command will convert the dialog.ui file to dialog.py and then next is do some minor changes and execute the python code. I just changed the class name genereted by the above command to keep the name meaningful.

So here is the final code of Dialog class generated from the dialog.ui by the above command.

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 are done. Please let me know if you are facing any issue in converting designed UI from PyQt5 designer tool.

 

And The Dialog will look like as below.

Dialog Window
Dialog Window

Thanks for Reading the Article hope the article is helpful for you guys.

Add a comment