Repository navigation
Example: RoundProgressBar
These Example codes are written using the PyQt6 Python Package, but the same codes can be written using the PyQt5, the only difference made in the code is in the import statements rest all work the same.
- Default Round Progress Bar import sys from PyQt6 import QtCore, QtWidgets, QtGui
from PyQt6extn.RoundProgressBar import roundProgressBar #IMPORT THE EXTENSION LIBRARY
x = 0 p = 1
class MyWidget(QtWidgets.QWidget): def init(self): QtWidgets.QWidget.init(self)
self.hello = 'Round Progress Bar'
self.button = QtWidgets.QPushButton("Click me to change Value")
self.text = QtWidgets.QLabel("Round Progress Bar")
self.text.setAlignment(QtCore.Qt.AlignCenter)
#CREATING THE ROUND PROGRESS BAR OBJECT
self.rpb = roundProgressBar()
self.layout = QtWidgets.QVBoxLayout()
self.layout.addWidget(self.text)
self.layout.addWidget(self.button)
# ADDING THE ROUND PROGRESS BAR OBJECT TO THE # BOTTOM OF THE LAYOUT
self.layout.addWidget(self.rpb)
self.setLayout(self.layout)
self.button.clicked.connect(self.magic) #BUTTON PRESSED EVENT
def magic(self):
global x, p
x = x + 10*p
if x==100:
p = -1
elif x==0:
p = 1
self.rpb.rpb_setValue(x) #CHANGING THE VALUE OF THE PROGRESS BAR
out_text = 'Round Progress Bar: ' + str(x) + '%'
self.text.setText(out_text)
if name == "main": app = QtWidgets.QApplication(sys.argv) widget = MyWidget() widget.show() sys.exit(app.exec_()) Output:
In this demo, we first created an object of the Round Progress Bar:
self.rpb = roundProgressBar() #CREATING THE ROUND PROGRESS BAR OBJECT After that calling the Round Progress Bar object to display the value of progress using:
self.rpb.rpb_setValue(x) #CHANGING THE VALUE OF THE PROGRESS BAR The rpb_setValue(value) takes an int as an argument and updates to change the value of the progress bar to the value given.
- Minimum, Maximum, and Range import sys from PyQt6 import QtCore, QtWidgets, QtGui #IMPORTING THE MODULE from PyQt6extn.RoundProgressBar import roundProgressBar
class MyWidget(QtWidgets.QWidget): def init(self): QtWidgets.QWidget.init(self)
#CLASS INSTANCE
self.rpb = roundProgressBar()
self.rpb2 = roundProgressBar()
self.rpb3 = roundProgressBar()
#SETTING THE RANGE :
self.rpb.rpb_setMaximum(720)
self.rpb2.rpb_setRange(0, 720)
self.rpb3.rpb_setRange(0, 1000)
#SETTING THE VALUE
self.rpb.rpb_setValue(456)
self.rpb2.rpb_setValue(456)
self.rpb3.rpb_setValue(890)
self.layout = QtWidgets.QHBoxLayout()
self.layout.addWidget(self.rpb)
self.layout.addWidget(self.rpb2)
self.layout.addWidget(self.rpb3)
self.setLayout(self.layout)
if name == "main": app = QtWidgets.QApplication(sys.argv) widget = MyWidget() widget.show() sys.exit(app.exec_())
The Maximum and Minimum values of the progress bar can be set using the method: rpb_setMaximum(), and rpb_setMinimum(). By default, the maximum value is set to 100, and the minimum to 0. This can be changed as users use cases. The same result can be achieved by the user using the function: rpb_setRange(). The range function takes two parameters: minimum and maximum in order.
- Changing the Progress Bar Style The Round Progress Bar Class has 6 types of different types of Round Progress bar, the default is the Donet type of progress bar which you see in the above example, the other types are illustrated in the image below:
To change the Progress Bar style, use the function:
self.rpb_setBarStyle(Style_Name) where the different style names are:
Style_Nmae: Donet (Default) Line Pie Pizza Pie Hybrid1 Hybrid2 Example:
import sys from PyQt6 import QtCore, QtWidgets, QtGui from PyQt6extn.RoundProgressBar import roundProgressBar
class MyWidget(QtWidgets.QWidget): def init(self): QtWidgets.QWidget.init(self)
self.rpb = roundProgressBar()
self.rpb.rpb_setBarStyle('Pizza') #CHANGE THE BAR STYLE TO : 'Pizza'
self.layout = QtWidgets.QVBoxLayout()
self.layout.addWidget(self.rpb)
self.setLayout(self.layout)
if name == "main": app = QtWidgets.QApplication(sys.argv) widget = MyWidget() widget.show() sys.exit(app.exec_()) Output:
- Change the Progress Bar Colors For changing the progress bar style a few things should be kept in mind: The progress bar is divided into Five parts: Line, Path, Circle, Pie, Text
For each parts, we have the following variable which can be changed: Color, Width, Size, Cap, Stroke e.t.c from which the color settings are demonstrated below.
#Line: object.rpb_setLineColor((R, G, B)) #ARGUMENT RGB AS A TUPLE
#Path: object.rpb_setPathColor((R, G, B)) #ARGUMENT RGB AS A TUPLE
#Text: object.rpb_setTextColor((R, G, B)) #ARGUMENT RGB AS A TUPLE
#Circle: object.rpb_setCircleColor((R, G, B)) #ARGUMENT RGB AS A TUPLE
#Pie: object.rpb_setPieColor((R, G, B)) #ARGUMENT RGB AS A TUPLE
- Starting Position import sys from PyQt6 import QtCore, QtWidgets, QtGui #IMPORTING THE PACKAGE from PyQt6extn.RoundProgressBar import roundProgressBar
class MyWidget(QtWidgets.QWidget): def init(self): QtWidgets.QWidget.init(self)
#CREATING THE ROUNDPROGRESSBAR CLASS INSTANCE
self.rpb = roundProgressBar()
self.rpb2 = roundProgressBar()
#DEFINING THE INITIAL POSITION OF THE PROGRESS BAR
self.rpb.rpb_setInitialPos('South') #START FROM SOUTH
self.rpb2.rpb_setInitialPos('East') #START FROM EAST
#LAYOUT OF THE PROGRESS BAR
self.layout = QtWidgets.QHBoxLayout()
self.layout.addWidget(self.rpb)
self.layout.addWidget(self.rpb2)
self.setLayout(self.layout)
if name == "main": app = QtWidgets.QApplication(sys.argv) widget = MyWidget() widget.show() sys.exit(app.exec_())
A progress bar can have 4 starting positions: North, South, East, and West. By default the position is North. Users can change the position by using the method: rpb_setInitialPos(), which takes a parameter if position string.
self.rpb.rpb_setInitialPos('West') #WEST AS STARTING POSITION.
- Direction of Progress import sys from PyQt6 import QtCore, QtWidgets, QtGui #IMPORTING THE MODULE from PyQt6extn.RoundProgressBar import roundProgressBar
class MyWidget(QtWidgets.QWidget): def init(self): QtWidgets.QWidget.init(self)
#CLASS INSTANCE
self.rpb = roundProgressBar()
self.rpb2 = roundProgressBar()
#CHANGING THE DIRECTION
self.rpb.rpb_setDirection('Clockwise')
self.rpb2.rpb_setDirection('AntiClockwise')
#SETTING THE VALUE
self.rpb.rpb_setValue(56)
self.rpb2.rpb_setValue(88)
self.layout = QtWidgets.QHBoxLayout()
self.layout.addWidget(self.rpb)
self.layout.addWidget(self.rpb2)
self.setLayout(self.layout)
if name == "main": app = QtWidgets.QApplication(sys.argv) widget = MyWidget() widget.show() sys.exit(app.exec_())
The direction of progress denotes the moving direction of the progress bar. By default, it is Clockwise, which can be changed by the method: rpb_setDirection() which accepts a string corresponding to the direction: Clockwise and AntiClockwise. It may raise an Exception if the string is not matched. 7. Text Properties import sys from PyQt6 import QtCore, QtWidgets, QtGui #IMPORTING THE MODULE from PyQt6extn.RoundProgressBar import roundProgressBar
class MyWidget(QtWidgets.QWidget): def init(self): QtWidgets.QWidget.init(self)
#CLASS INSTANCE
self.rpb = roundProgressBar()
self.rpb2 = roundProgressBar()
self.rpb3 = roundProgressBar()
#SETTING THE RANGE : MIN-0 & MAX:360
self.rpb.rpb_setRange(0, 360)
self.rpb2.rpb_setRange(0, 360)
self.rpb3.rpb_setRange(0, 360)
#CHANGING THE STYLE
self.rpb.rpb_setBarStyle('Pizza')
self.rpb2.rpb_setBarStyle('Hybrid2')
#CHANGING THE TEXT TYPE : VALUE OR PERCENTAGE
self.rpb.rpb_setTextFormat('Value')
self.rpb2.rpb_setTextFormat('Percentage')
#CHANGING THE TEXT SIZE
self.rpb.rpb_setTextRatio(3)
self.rpb2.rpb_setTextRatio(9)
#CHANGING THE FONT
self.rpb.rpb_setTextFont('Arial')
self.rpb2.rpb_setTextFont('Times New Roman')
#TEXT HIDDEN
self.rpb3.rpb_enableText(False)
#SETTING THE VALUE
self.rpb.rpb_setValue(156)
self.rpb2.rpb_setValue(156)
self.layout = QtWidgets.QHBoxLayout()
self.layout.addWidget(self.rpb)
self.layout.addWidget(self.rpb2)
self.layout.addWidget(self.rpb3)
self.setLayout(self.layout)
if name == "main": app = QtWidgets.QApplication(sys.argv) widget = MyWidget() widget.show() sys.exit(app.exec_())
This Example contains all the info that is needed for customization of the text inside the progress bar. It contains the following elements:
Text Format Text format denotes the format which should be used to display the output value of the progress bar. It can be a Value or a Percentage. From the above image, the first two progress bar has the same rpb_setValue of 156, but one is in Percentage and the other in Value. This may come in handy in certain situations. By default, the format is set to Percentage. The format can be set using the function: rpb_setTextFormat(), which accepts a string.
#CHANGING THE TEXT TYPE : VALUE OR PERCENTAGE self.rpb.rpb_setTextFormat('Value') self.rpb2.rpb_setTextFormat('Percentage') Text Ratio The text format signifies the size of the text concerning the size of the progress bar. It can range from 1/3 to 1/50 of the size of the progress bar. This method functions differently from the method rpb_setTextWidth() as the width increase the width of the text but it remains a constant when the size of the round progress bar size changes during the change in window size. This function rpb_setTextRatio() however increases the width concerning the real-time size of the round progress bar. This is demonstrated by the second image in the example. The second example picture contains the enlarged window. The method takes an int and sets it as the ratio.
#CHANGING THE TEXT SIZE self.rpb.rpb_setTextRatio(3) #1/3 OF SIZE OF THE PROGRESSBAR self.rpb2.rpb_setTextRatio(9) #1/9 OF SIZE OF PROGRESS BAR Text Font The text inside the round progress bar has a default font: Segoe UI. This can be changed as shown in the example. It can have any standard font installed on the user’s PC. The method used to change the font is rpb_setTextFont() and takes the name of the font as the parameter.
#CHANGING THE FONT self.rpb.rpb_setTextFont('Arial') self.rpb2.rpb_setTextFont('Times New Roman') Disable Text By default, the text is Enabled, but users can hide the text using the function: rpb_enableText(), which accepts a bool.
#TEXT HIDDEN self.rpb3.rpb_enableText(False) #SEE THE IMAGE OF 3RD ROUNDPROGRESSBAR 8. Line Properties import sys from PyQt6 import QtCore, QtWidgets, QtGui #IMPORTING THE MODULE from PyQt6extn.RoundProgressBar import roundProgressBar
class MyWidget(QtWidgets.QWidget): def init(self): QtWidgets.QWidget.init(self)
#CLASS INSTANCE
self.rpb = roundProgressBar()
self.rpb2 = roundProgressBar()
self.rpb3 = roundProgressBar()
#LINE WIDTH
self.rpb.rpb_setLineWidth(10)
#LINE CAP
self.rpb.rpb_setLineCap('RoundCap')
self.rpb2.rpb_setLineCap('SquareCap')
self.rpb3.rpb_setLineCap('RoundCap')
#LINE STYLE
self.rpb3.rpb_setLineStyle('DotLine')
self.rpb2.rpb_setLineStyle('DashLine')
#SETTING THE VALUE
self.rpb.rpb_setValue(85)
self.rpb2.rpb_setValue(85)
self.rpb3.rpb_setValue(85)
self.layout = QtWidgets.QHBoxLayout()
self.layout.addWidget(self.rpb)
self.layout.addWidget(self.rpb2)
self.layout.addWidget(self.rpb3)
self.setLayout(self.layout)
if name == "main": app = QtWidgets.QApplication(sys.argv) widget = MyWidget() widget.show() sys.exit(app.exec_())
The line has many customizable properties each of them is listed below.
Line Width Line width is the width of the line that display the progress. It is set to 5px default. The user can use the method rpb_setLineWidth() and pass the desired width in px as an int as the parameter.
#LINE WIDTH self.rpb.rpb_setLineWidth(10) Line Cap Line cap is the end of the stroke of the line. It can have two styles: RoundCap and SquareCap. The desired cap can be passed as a string to the method: rpb_setLineCap() which takes a string as a parameter. The image above gives a note on how the cap looks.
#LINE CAP self.rpb.rpb_setLineCap('RoundCap') self.rpb2.rpb_setLineCap('SquareCap') self.rpb3.rpb_setLineCap('RoundCap') Line Style The line can be continuous SolidLine or can have a style: DashLine or a DotLine. Each of these styles can be passed as a string to the method: rpb_setLineStyle(). In the image, you can spot the difference between the three styles.
#LINE STYLE self.rpb3.rpb_setLineStyle('DotLine') self.rpb2.rpb_setLineStyle('DashLine') 9. Path Properties import sys from PyQt6 import QtCore, QtWidgets, QtGui
#IMPORTING THE MODULE from PyQt6extn.RoundProgressBar import roundProgressBar
class MyWidget(QtWidgets.QWidget): def init(self): QtWidgets.QWidget.init(self)
#CLASS INSTANCE
self.rpb = roundProgressBar()
self.rpb2 = roundProgressBar()
#CHANGING THE PROGRESSABR STYLE
self.rpb.rpb_setBarStyle('Hybrid1')
#CHANGING THE LINE WIDTH
self.rpb.rpb_setLineWidth(3)
self.rpb2.rpb_setLineWidth(8)
#PATH WIDTH
self.rpb.rpb_setPathWidth(15)
self.rpb2.rpb_setPathWidth(2)
#CHANGING THE PATH COLOR
self.rpb.rpb_setPathColor((125, 255, 255))
self.rpb2.rpb_setPathColor((0, 0, 0))
#SETTING THE VALUE
self.rpb.rpb_setValue(85)
self.rpb2.rpb_setValue(85)
self.layout = QtWidgets.QHBoxLayout()
self.layout.addWidget(self.rpb)
self.layout.addWidget(self.rpb2)
self.setLayout(self.layout)
if name == "main": app = QtWidgets.QApplication(sys.argv) widget = MyWidget() widget.show() sys.exit(app.exec_())
The Path has 3 properties that can be changed and also the path is present in only two styles of the round progress bar: Hybrid1 and the Donet styles. The following methods to modify the path is described below:
Path Width Similar to the line width corresponding to the line thickness in px, the path width corresponds to the thickness of the path. Path thickness by default is set to the thickness of the line. But changing it will result in some significant design gains. The method: rpb_setPathWidth() is used for setting the path width. It takes an int as a parameter and it should correspond to the width in px.
Path Color Path color method help to change the color of the path of the round Progress Bar path. The method : rpb_setPathColor() accepts a tuple in format: (R, G, B).
#CHANGING THE PATH COLOR self.rpb.rpb_setPathColor((125, 255, 255)) #CYAN self.rpb2.rpb_setPathColor((0, 0, 0)) #BLACK COLOR