Post
Ask Question

PyQt5 - Simple Demo Of Signal And Slot As Well As Progress Bar

Introduction

 
In this article, I will demonstrate to you two types of demos that are how we can make a signal & slot operation and a simple progress bar for Python applications by using PyQt5 (Qt designer) GUI toolkit.
 
Prerequisites
  • PyQt5 (Qt Designer)
  • PyCharm 2019.2

PyQt5 - Signal and slot function

 
The signal and slot operation are used to handle events and signals of the objects or widgets at the python app development level. It will also enable communication between some designed objects.
 
The following steps are needed for creating a Python signal and slot operations.
 
Step 1 - Create QDialog (new form)
 
Start by creating a new dialog. New Form >> Dialog without Buttons >> Create
 
 
Step 2 - Create two widgets
 
For our signal and slot example, we will handle two types of widgets such as LineEdit and Label. Under the input widgets, choose “QLineEdit” and drag and drop to the Dialog form. In the same way, click a Qlabel from the Display widgets drag and drop to the Dialog form.
 
 
Step 3 - Handling signal and slot
 
After designing the form, we need to give signals for the widgets.
 
There are signal and slot panels at the right downside of your window, click on that to keep the below-mentioned instructions.
  • In signal and slot editor >> Click + (Add) icon.
  • Sender = lineEdit
  • Signal = textChanged (QString)
  • Receiver = Label
  • Slot = setText (QString)
Now it's  time to preview our demo, Form>> preview.
 
 
Now, we have successfully finished our signal and slot demo with the help of PyQt5 (Qt Designer) GUI toolkit.
 
Source example
 
Here, we can view our demo project source by doing a simple trick;  that is converting the .ui file into .py format.  I already published an article about that, Click here
  1. from PyQt5 import QtCore, QtGui, QtWidgets  
  2.   
  3. class Ui_Dialog(object):  
  4.     def setupUi(self, Dialog):  
  5.         Dialog.setObjectName("Dialog")  
  6.         Dialog.resize(820, 443)  
  7.         self.lineEdit = QtWidgets.QLineEdit(Dialog)  
  8.         self.lineEdit.setGeometry(QtCore.QRect(210, 140, 331, 61))  
  9.         self.lineEdit.setObjectName("lineEdit")  
  10.         self.label = QtWidgets.QLabel(Dialog)  
  11.         self.label.setGeometry(QtCore.QRect(220, 260, 311, 51))  
  12.         font = QtGui.QFont()  
  13.         font.setPointSize(14)  
  14.         self.label.setFont(font)  
  15.         self.label.setObjectName("label")  
  16.   
  17.         self.retranslateUi(Dialog)  
  18.         self.lineEdit.textChanged['QString'].connect(self.label.setText)  
  19.         QtCore.QMetaObject.connectSlotsByName(Dialog)  
  20.   
  21.     def retranslateUi(self, Dialog):  
  22.         _translate = QtCore.QCoreApplication.translate  
  23.         Dialog.setWindowTitle(_translate("Dialog", "Dialog"))  
  24.         self.label.setText(_translate("Dialog", "TextLabel"))  
  25.   
  26.   
  27. if __name__ == "__main__":  
  28.     import sys  
  29.     app = QtWidgets.QApplication(sys.argv)  
  30.     Dialog = QtWidgets.QDialog()  
  31.     ui = Ui_Dialog()  
  32.     ui.setupUi(Dialog)  
  33.     Dialog.show()  
  34.     sys.exit(app.exec_()) 

Simple PyQt5 progress Bar

 
Generally, the progress bar performs as an activity indicator to represent graphically of computer operations such as file transfer, download, or installation.
 
Let’s create a simple progress bar using the PyQt5 tool kit.
 
Step 1 - Create QDialog
 
First of all, we need to create a new form for our demo.
  • New form >> Dialog without Button>> Create
 
Step 2 - Design Progress Bar
  • Here, we are going to create a simple Progress Bar using the PyQt5 tool kit.
  • Under the Display Widgets, drag and drop Progress bar to QDialog form.
  • Next, drag and drop a Push Button to the QDialog form for the fake progress operation demo.
 
Step 3 - Create download progress
  • Here, we will create a simple fake progress bar that represents how the progress bar will perform well.
  • After finishing the progress Bar design, we can save and convert the .ui file to .py format for viewing the source code.
Let's add the below codes for creating a fake download progress.
  1. self.pushButton.clicked.connect(self.progress)   
  2.   
  3.   
  4.     def progress(self):  
  5.         self.completed = 0  
  6.   
  7.         while self.completed < 100:  
  8.             self.completed += 0.0001  
  9.             self.progressBar.setValue(self.completed) 
  • The button clicked method () is used when we click on the Push Button named “Progress” then the progress function will execute.
  •  In the progress function, we have a variable named as complete.
  • The while condition will iterate 0 (complete) to 100. In the meantime, the fake download progress will be visible. 
 
Step 4 - Save and run
 
Here, I will give the full source code of our demo.
 
Full Source code
  1. from PyQt5 import QtCore, QtGui, QtWidgets  
  2.   
  3. class Ui_Dialog(object):  
  4.     def setupUi(self, Dialog):  
  5.         Dialog.setObjectName("Dialog")  
  6.         Dialog.resize(961, 475)  
  7.         self.progressBar = QtWidgets.QProgressBar(Dialog)  
  8.         self.progressBar.setGeometry(QtCore.QRect(240, 150, 401, 31))  
  9.         self.progressBar.setProperty("value", 24)  
  10.         self.progressBar.setObjectName("progressBar")  
  11.         self.pushButton = QtWidgets.QPushButton(Dialog)  
  12.         self.pushButton.setGeometry(QtCore.QRect(370, 270, 93, 28))  
  13.         self.pushButton.setObjectName("pushButton")  
  14.         self.pushButton.clicked.connect(self.progress)  
  15.   
  16.         self.retranslateUi(Dialog)  
  17.         QtCore.QMetaObject.connectSlotsByName(Dialog)  
  18.   
  19.     def progress(self):  
  20.         self.completed = 0  
  21.   
  22.         while self.completed < 100:  
  23.             self.completed += 0.0001  
  24.             self.progressBar.setValue(self.completed)  
  25.   
  26.     def retranslateUi(self, Dialog):  
  27.         _translate = QtCore.QCoreApplication.translate  
  28.         Dialog.setWindowTitle(_translate("Dialog", "Dialog"))  
  29.         self.pushButton.setText(_translate("Dialog", "Progress"))  
  30.   
  31.   
  32. if __name__ == "__main__":  
  33.     import sys  
  34.     app = QtWidgets.QApplication(sys.argv)  
  35.     Dialog = QtWidgets.QDialog()  
  36.     ui = Ui_Dialog()  
  37.     ui.setupUi(Dialog)  
  38.     Dialog.show()  
  39.     sys.exit(app.exec_())  
Now it's time to run our demo, file >> save all and click on Run icon.
 
 
Now, we have successfully finished our Python Progress Bar demo by the PyQt5 GUI (Qt Designer) tool kit.
 

Summary

 
I hope, you understood very well about the Python signal and slot as well as Progress Bar. If you have any queries while doing the above demo, feel free to leave comments below.


Similar Articles