Skip to content

[PyQt5] Tutorial(5) ProgressBar, HorizontalSlider, QDial

Last Updated on 2021-04-12 by Clay

After noting the note about components menu and toolbar, I want to share some new components today. They are also the components I use into my project.

Today, I will introduce how to use three components such as QProgressBar, QHorizontalSlider, and QDial in PyQt5.

Let me show the sample interface.

First, we still save the UI file and then use the PyUIC tool to convert it to python file. The following example:

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

# Form implementation generated from reading ui file 'progress.ui'
#
# Created by: PyQt5 UI code generator 5.11.3
#
# WARNING! All changes made in this file will be lost!

from PyQt5 import QtCore, QtGui, QtWidgets

class Ui_MainWindow(object):
    def setupUi(self, MainWindow):
        MainWindow.setObjectName("MainWindow")
        MainWindow.resize(800, 600)
        self.centralwidget = QtWidgets.QWidget(MainWindow)
        self.centralwidget.setObjectName("centralwidget")

        # ProgressBar
        self.progressBar = QtWidgets.QProgressBar(self.centralwidget)
        self.progressBar.setGeometry(QtCore.QRect(130, 180, 221, 41))
        self.progressBar.setProperty("value", 24)
        self.progressBar.setObjectName("progressBar")

        # Dial
        self.dial = QtWidgets.QDial(self.centralwidget)
        self.dial.setGeometry(QtCore.QRect(380, 150, 111, 91))
        self.dial.setObjectName("dial")

        # HorizontalSlider
        self.horizontalSlider = QtWidgets.QSlider(self.centralwidget)
        self.horizontalSlider.setGeometry(QtCore.QRect(110, 280, 241, 31))
        self.horizontalSlider.setOrientation(QtCore.Qt.Horizontal)
        self.horizontalSlider.setObjectName("horizontalSlider")
        MainWindow.setCentralWidget(self.centralwidget)
        self.menubar = QtWidgets.QMenuBar(MainWindow)
        self.menubar.setGeometry(QtCore.QRect(0, 0, 800, 25))
        self.menubar.setObjectName("menubar")
        MainWindow.setMenuBar(self.menubar)
        self.statusbar = QtWidgets.QStatusBar(MainWindow)
        self.statusbar.setObjectName("statusbar")
        MainWindow.setStatusBar(self.statusbar)

        self.retranslateUi(MainWindow)
        QtCore.QMetaObject.connectSlotsByName(MainWindow)

    def retranslateUi(self, MainWindow):
        _translate = QtCore.QCoreApplication.translate
        MainWindow.setWindowTitle(_translate("MainWindow", "MainWindow"))


We can see that the progress bar, slider, dial and other components have been defined.

Next, we only need to write a program to inherit this category.

Set progress bar

First look at the sample program:

# -*- coding: utf-8 -*-
from PyQt5 import QtWidgets, QtGui, QtCore
from progress import Ui_MainWindow
import sys


class MainWindow(QtWidgets.QMainWindow):
    def __init__(self):
        super(MainWindow, self).__init__()
        self.ui = Ui_MainWindow()
        self.ui.setupUi(self)

        # ProgressBar
        self.ui.progressBar.setMinimum(0)
        self.ui.progressBar.setMaximum(99)
        self.ui.progressBar.setValue(0)

        # HorizontalSlider
        self.ui.horizontalSlider.valueChanged.connect(self.sliderValue)

        # Dial
        self.ui.dial.setRange(0, 100)
        self.ui.dial.setNotchesVisible(True)
        self.ui.dial.valueChanged.connect(self.dialValue)

    def sliderValue(self):
        self.ui.progressBar.setValue(self.ui.horizontalSlider.value())

    def dialValue(self):
        self.ui.progressBar.setValue(self.ui.dial.value())


if __name__ == '__main__':
    app = QtWidgets.QApplication([])
    window = MainWindow()
    window.show()
    sys.exit(app.exec_())


We see the part of the ProgressBar, which is the component we inherit - the part of the progress bar.

# ProgressBar
self.ui.progressBar.setMinimum(0)
self.ui.progressBar.setMaximum(99)
self.ui.progressBar.setValue(0)

setMinimum(): Set the progress bar minimum
setMaximum(): Set the progress bar maximum
setValue(): Set the progress bar current value

You can see that the range of my progress bar is 0-99, which is also in line with the preset range of sliders we will set later.

After we execute the program, we can see this picture:

Slider

The programming of the slider is very simple:

# HorizontalSlider
self.ui.horizontalSlider.valueChanged.connect(self.sliderValue)


If the value to change, connect to our written function self.sliderValue().

def sliderValue(self):
    self.ui.progressBar.setValue(self.ui.horizontalSlider.value())


This program is also very simple, it is to give the value of horizomtalSlider to our progress bar progressBar.

Output:

We slipped to half the situation.
We are pulling the situation.

Dial

The setting of dial is also simple.

# Dial
self.ui.dial.setRange(0, 100)
self.ui.dial.setNotchesVisible(True)
self.ui.dial.valueChanged.connect(self.dialValue)


setRange(): Set the preset range of rotation
setNotChesVisible(): Set whether there is a scale next to dial

Then we also set the value of the dial to the function self.dialValue() we wrote in advance if it changes.

def dialValue(self):
    self.ui.progressBar.setValue(self.ui.dial.value())


We again assign the changed value directly to the progress bar progressBar.

Go to half of the scene
Fully rotation

The above is the PyQt5 experience notes today, I believe that the progress bar can be used in a variety of projects.

Read More

Tags:

Leave a Reply