python logo

progressbar python


Python hosting: Host, run, and code Python in the cloud!

In this article, we’ll explore how to implement and use the progressbar widget in PyQt4. The unique feature of the progressbar is that it dynamically updates over time.

Related Course:

QT4 Progressbar Implementation
Below is a step-by-step guide, along with a code snippet, to set up a progressbar using PyQt4:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
#! /usr/bin/env python
# -*- coding: utf-8 -*-
import sys
from PyQt4.QtGui import *
from PyQt4.QtCore import *
from PyQt4.QtCore import pyqtSlot,SIGNAL,SLOT

class QProgBar(QProgressBar):
    value = 0
    @pyqtSlot()
    def increaseValue(progressBar):
        progressBar.setValue(progressBar.value)
        progressBar.value = progressBar.value+1

# Initialize PyQT4 application object.
a = QApplication(sys.argv)

# Create the base class of all user interface objects in PyQt4.
w = QWidget()

# Configure window properties.
w.resize(320, 240)
w.setWindowTitle("PyQT4 Progressbar @ pythonspot.com ")

# Set up progressBar.
bar = QProgBar(w)
bar.resize(320,50)
bar.setValue(0)
bar.move(0,20)

# Configure timer for progressBar updates.
timer = QTimer()
bar.connect(timer,SIGNAL("timeout()"),bar,SLOT("increaseValue()"))
timer.start(400)

# Display window.
w.show()

sys.exit(a.exec_())

The bar instance of the QProgBar class holds the current value of the progressbar. The setValue() function updates this value. The progressbar is attached to the main window through the parameter w and positioned at (0,20) on the screen with defined width and height.

A QTimer() is required to periodically update the progressbar. By connecting the widget to a timer, the increaseValue() function gets invoked at a regular interval of 400 milliseconds. PyQt4 uses the SIGNAL and SLOT mechanism to respond to UI events. When a user interacts with the UI, such as clicking a button or typing in a textbox, the widget emits a signal. This signal can be connected to a slot to perform a specific action.

This setup also connects a pyqtslot to the timer’s timeout event.

Output:
PyQT Progressbar

Want to dive deeper into PyQt coding? Download the comprehensive PyQT Code collection.

Previous Article | Next Article


Posted in qt4




Leave a Reply:




Jahir Garcia • Mon, 06 Jul 2015

hello, frank nice tutorials, Im really a beginner in python, but I use python on windows with arduino, I see on internet son gauge dial similar to this: https://developers.google.c..., I see this example for do one dial with pyqt: http://stackoverflow.com/qu..., Can you finished this example with numbers, and put published here. A question where are You from??

Frank • Mon, 06 Jul 2015

Hi Jahir, I'm from the netherlands. This is how to create a gauge dial with set and get value:

import sys
from PyQt4 import QtGui, QtCore, Qt
import math
 
class QtGauge(QtGui.QWidget):

    value = 1

    def __init__(self):
        super(QtGauge, self).__init__()
        self.initUI()

    def setValue(self,value):
        self.value = value

    def getValue(self):
        return self.value

    def initUI(self):      
 
        hbox = QtGui.QHBoxLayout(self)
        lbl = QtGui.QLabel(self)
 
        hbox.addWidget(lbl)
        self.setLayout(hbox)
        self.setGeometry(0, 0,600,600)
       
        self.move(300, 200)
        self.setWindowTitle('Dial Guage')
        self.show()  
       
    def paintEvent(self, e):
        painter = QtGui.QPainter()
        painter.begin(self)
        dial = QtGui.QPixmap("bg.png")
        #painter.drawPixmap(50, 50, 600, 600, dial)
       
        painter.setRenderHint(painter.Antialiasing)
        rect = e.rect()
 
        gauge_rect = QtCore.QRect(rect)
        size = gauge_rect.size()
        pos = gauge_rect.center()
        gauge_rect.moveCenter( QtCore.QPoint(pos.x()-size.width(), pos.y()-size.height()) )
        gauge_rect.setSize(size*.9)
        gauge_rect.moveCenter(pos)
 
        refill_rect = QtCore.QRect(gauge_rect)
        size = refill_rect.size()
        pos = refill_rect.center()
        refill_rect.moveCenter( QtCore.QPoint(pos.x()-size.width(), pos.y()-size.height()) )
        # smaller than .9 == thicker gauge
        refill_rect.setSize(size*.9)
        refill_rect.moveCenter(pos)
 
        painter.setPen(QtCore.Qt.NoPen)
 
        painter.drawPixmap(rect, dial)
 
        painter.save()
        grad = QtGui.QConicalGradient(QtCore.QPointF(gauge_rect.center()), 270.0)
        grad.setColorAt(.75, QtCore.Qt.green)
        grad.setColorAt(.5, QtCore.Qt.yellow)
        grad.setColorAt(.1, QtCore.Qt.red)
        painter.setBrush(grad)
        #painter.drawPie(gauge_rect, 225.0*16, self._value*16)
        painter.drawPie(gauge_rect, 225.0*16, -270*self.value*16)
        painter.restore()
 
        painter.setBrush(QtGui.QBrush(dial.scaled(rect.size())))
        painter.drawEllipse(refill_rect)
 
        super(QtGauge,self).paintEvent(e)   
        painter.end()
 
       
def main():
    app = QtGui.QApplication(sys.argv)
    ex = QtGauge()
    ex.setValue(0.6)
    print ex.getValue()
    sys.exit(app.exec_())
 
 
if __name__ == '__main__':
    main()

The background:
https://pythonspot.com/wp-content/uploads/2015/07/bg.png

It will tell the value of the gauge and you can set it on the scale of 0 to 1. Is this what you had in mind?

Jahir Garcia • Wed, 08 Jul 2015

OK, Fantastic, But How I put the label values for scale on graphic. (0, 0.1, 0.2, 0.3 .. ....1), I see a beautiful gauges indicators in PYQT
qt-apps.org/content/show.ph...
But the code was writed for QT on C++, Is possible pass the code for use in PYQT windows??

Frank • Wed, 08 Jul 2015

Hi, it's possible to put these programatically but it looks much better if you simply modify the pixmap. As far as I know these C++ widgets are not ported. I saw this version uses a textfont pixmap that is put on top of the gauge. This is one possibility but I don't know the advantage as to simply changing the background pixmap.

If you want to put a label on a pixmap programatically, you can do something like this:

import sys
from PyQt4 import QtGui, QtCore, Qt
import math
 
from PyQt4.QtCore import *
from PyQt4.QtGui import *

class QtGauge(QtGui.QWidget):
 
    value = 1
 
    def __init__(self):
        super(QtGauge, self).__init__()
        self.initUI()
 
    def setValue(self,value):
        self.value = value
 
    def getValue(self):
        return self.value
 
    def initUI(self):      
 
        hbox = QtGui.QVBoxLayout(self)
        palette = QtGui.QPalette()

        # create a label
        lbl = QtGui.QLabel(self)
        palette.setColor(QtGui.QPalette.Foreground,QtCore.Qt.red)
        lbl.setPalette(palette)
        lbl.resize(400, 200)
        lbl.setText("Text on label")
        lbl.setFont(QtGui.QFont('Decorative', 40))
        lbl.move(0,0)

        hbox.addWidget(lbl)
      
        self.setLayout(hbox)
        self.setGeometry(0, 0,600,600)
       
        self.move(300, 200)
        self.setWindowTitle('Dial Guage')
        self.show()  
       
    def paintEvent(self, e):
        painter = QtGui.QPainter()
        painter.begin(self)
        dial = QtGui.QPixmap("bg.png")
        
        painter.setRenderHint(painter.Antialiasing)
        rect = e.rect()
 
        gauge_rect = QtCore.QRect(rect)
        size = gauge_rect.size()
        pos = gauge_rect.center()
        gauge_rect.moveCenter( QtCore.QPoint(pos.x()-size.width(), pos.y()-size.height()) )
        gauge_rect.setSize(size*.9)
        gauge_rect.moveCenter(pos)
 
        refill_rect = QtCore.QRect(gauge_rect)
        size = refill_rect.size()
        pos = refill_rect.center()
        refill_rect.moveCenter( QtCore.QPoint(pos.x()-size.width(), pos.y()-size.height()) )
        refill_rect.setSize(size*.9)
        refill_rect.moveCenter(pos)
 
        painter.setPen(QtCore.Qt.NoPen)
 
        painter.drawPixmap(rect, dial)
 
        painter.save()
        grad = QtGui.QConicalGradient(QtCore.QPointF(gauge_rect.center()), 270.0)
        grad.setColorAt(.75, QtCore.Qt.green)
        grad.setColorAt(.5, QtCore.Qt.yellow)
        grad.setColorAt(.1, QtCore.Qt.red)
        painter.setBrush(grad)
        painter.drawPie(gauge_rect, 225.0*16, -270*self.value*16)
        painter.restore()
 
        painter.setBrush(QtGui.QBrush(dial.scaled(rect.size())))
        painter.drawEllipse(refill_rect)

        super(QtGauge,self).paintEvent(e)   
        painter.end()
 
       
def main():
    app = QtGui.QApplication(sys.argv)
    ex = QtGauge()
    ex.setValue(0.6)
    print ex.getValue()
    sys.exit(app.exec_())
 
 
if __name__ == '__main__':
    main()

However, I recommend changing the background image itself because it's more slick. If I get some more time today I may look into it deeper. I hope that helps :-)

Jahir Garcia • Fri, 10 Jul 2015

Great..!! Perfect, last thing, Please see this project: http://www.mon-club-elec.fr...
I download and modify some lines for use in windows, I want put this gauge in up position of slider, and the text label gauge in center of gauge, for read analog input.
Do you are teacher in School?? You have a lot of patience to teach..

Frank • Sat, 11 Jul 2015

Looking into it

Frank • Thu, 16 Jul 2015

Hi Jahir, sorry for the delay has been hectic here. You can download these files and open them in a program named QTCreator. With this program you can drag & drop widgets. No, I'm just a 27 year old software developer :-)