Python GUI Tutorial  #1 With PyQt5  Using Qt Designer

We will be learning how to add two integers using GUI (Graphical User Interface)

Follow the below given steps:

  1. Launch Qt Designer
  2. Select “Dialog Without Buttons” template
  3. Drag and drop, three Label, two Line Edit and a Push Button widgets on the form
  4. Set the font, text and object names of the widgets as shown in below figure.

Save the form by name AddTwoNumb. It will be saved with extension .ui and it will be the XML representation of the graphical interface we have created. To convert AddTwoNumb.ui into python file, run the following command:

 

C:\> pyuic5  –x AddTwoNumb.ui  -o AddTwoNumb.py

 

Above command will generate the python file, AddTwoNumb.py with the below given code:

AddTwoNumb.py

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

# Form implementation generated from reading ui file 'AddTwoNumb.ui'

# Created by: PyQt5 UI code generator 5.6

from PyQt5 import QtCore, QtGui, QtWidgets

class Ui_Dialog(object):

    def setupUi(self, Dialog):

        Dialog.setObjectName("Dialog")

        Dialog.resize(400, 300)

        self.label = QtWidgets.QLabel(Dialog)

        self.label.setGeometry(QtCore.QRect(30, 40, 161, 16))

        font = QtGui.QFont()

        font.setPointSize(14)

        self.label.setFont(font)

        self.label.setObjectName("label")

        self.label_2 = QtWidgets.QLabel(Dialog)

        self.label_2.setGeometry(QtCore.QRect(30, 80, 181, 16))

        font = QtGui.QFont()

        font.setPointSize(14)

        self.label_2.setFont(font)

        self.label_2.setObjectName("label_2")

        self.lineEditFirstNumb = QtWidgets.QLineEdit(Dialog)

        self.lineEditFirstNumb.setGeometry(QtCore.QRect(220, 40, 113, 20))

        font = QtGui.QFont()

        font.setPointSize(14)

        self.lineEditFirstNumb.setFont(font)

        self.lineEditFirstNumb.setObjectName("lineEditFirstNumb")

        self.lineEditSecondNumb = QtWidgets.QLineEdit(Dialog)

        self.lineEditSecondNumb.setGeometry(QtCore.QRect(220, 80, 113, 20))

        font = QtGui.QFont()

        font.setPointSize(14)

        self.lineEditSecondNumb.setFont(font)

        self.lineEditSecondNumb.setObjectName("lineEditSecondNumb")

        self.pushButtonAdd = QtWidgets.QPushButton(Dialog)

        self.pushButtonAdd.setGeometry(QtCore.QRect(150, 120, 75, 23))

        font = QtGui.QFont()

        font.setPointSize(14)

        self.pushButtonAdd.setFont(font)

        self.pushButtonAdd.setObjectName("pushButtonAdd")

        self.labelResponse = QtWidgets.QLabel(Dialog)

        self.labelResponse.setGeometry(QtCore.QRect(50, 200, 321, 20))

        font = QtGui.QFont()

        font.setPointSize(14)

        self.labelResponse.setFont(font)

        self.labelResponse.setObjectName("labelResponse")

 

        self.retranslateUi(Dialog)

        QtCore.QMetaObject.connectSlotsByName(Dialog)

 

    def retranslateUi(self, Dialog):

        _translate = QtCore.QCoreApplication.translate

        Dialog.setWindowTitle(_translate("Dialog", "Dialog"))

        self.label.setText(_translate("Dialog", "Enter first number"))

        self.label_2.setText(_translate("Dialog", "Enter second number"))

        self.pushButtonAdd.setText(_translate("Dialog", "Add"))

        self.labelResponse.setText(_translate("Dialog", "TextLabel"))

 

if __name__ == "__main__":

    import sys

    app = QtWidgets.QApplication(sys.argv)

    Dialog = QtWidgets.QDialog()

    ui = Ui_Dialog()

    ui.setupUi(Dialog)

    Dialog.show()

    sys.exit(app.exec_())

 

To invoke the graphical user interface generartd in AddTwoNUmb.py file and to add the two numbers entered by the user, create another python file , callAddition.py with the following code:

callAddition.py

import sys

from PyQt5.QtWidgets import QDialog, QApplication

from AddTwoNumb import *

 

class MyForm(QDialog):

    def __init__(self):

        super().__init__()

        self.ui = Ui_Dialog()

        self.ui.setupUi(self)

        self.ui.pushButtonAdd.clicked.connect(self.dispSum)

        self.show()

 

    def dispSum(self):

        numb1=self.ui.lineEditFirstNumb.text()

        numb2=self.ui.lineEditSecondNumb.text()

        x=int(numb1)

        y=int(numb2)

        z=x+y

        self.ui.labelResponse.setText("Sum is "+str(z))

 

if __name__=="__main__":   

    app = QApplication(sys.argv)

    w = MyForm()

    w.show()

    sys.exit(app.exec_())

 

On running the callAddition.py file using IDLE IDE or any Python IDE, you will get the following output:

Leave a Comment