Python Gauge Visualization Project

Interactive UI Gauges with PySide6

PySide6 Qt Designer Python

December 4, 2025
 Project Overview and Objectives
A Python project focused on developing four distinct types of interactive gauges for versatile data visualization and application integration.

Interactive Visualization: Create dynamic, visually appealing gauges that effectively represent data values

Customizable Components: Develop versatile gauges that can be easily customized for different applications

Seamless Integration: Provide clear and concise code that allows for easy integration into existing applications

Dynamic Data Representation: Ensure gauges provide clear and dynamic visualization of changing data values
 Technology Stack and Tools

Python PySide6 Qt Designer

Core programming language for GUI framework for building rich, Tool for intuitive drag-and-drop interface
implementing all gauge logic and interactive desktop applications. design. Allows rapid prototyping of UI
application functionality. Known for its Provides Python bindings for the Qt elements without writing code initially.
simplicity and powerful libraries. application framework.
 Development Workflow
3
1 2

Logic Implementation
UI Design with Qt Designer UI to Python Conversion
Implements core logic and dynamic behavior for
Visual design of gauge layouts using Qt Designer's Converts .ui files to Python .py files using pyside6-
each gauge, including drawing, updating values, and
drag-and-drop interface. Saves designs as .ui XML uic command-line tool, generating UI construction
handling interactions.
files. code.
 Project Structure and File Organization
The project maintains a clear and modular file organization with two primary Python files for each of the four gauges:

circular_gauge /gauges bar_gauge /gauges digital_gauge /gauges hybrid_gauge /gauges

main.py main.py main.py main.py

circular_gauge.py bar_gauge.py digital_gauge.py hybrid_gauge.py

Utility modules Utility modules Utility modules Utility modules

Configuration files Configuration files Configuration files Configuration files

Each gauge type follows the same modular structure, ensuring consistency and ease of maintenance
 Circular Gauge - Features and Design
Speedometer-Style Design: Resembles classic analog dials and
speedometers for intuitive understanding

Value Range Representation: Visualizes a single value within

defined minimum and maximum ranges

Key Components: Circular arc, moving needle/or indicator, and

scale markings for precise value reading

Ideal Applications: Speed, pressure, temperature, and progress

tracking displays where quick understanding is crucial

Circular gauge with needle indicator and scale markings

 Circular Gauge - Core Implementation
The core implementation uses QPainter to render the circular gauge components.

import math
from PySide6 import QtCore, QtGui, QtWidgets
from PySide6.QtCore import Qt, QPointF, QRectF
from PySide6.QtGui import QPainter, QColor, QPen, QBrush, QFont

class CircularGauge (QtWidgets.QWidget):

def __init__ ( self , parent= None):
super (). __init__ (parent)
self .setMinimumSize(200, 200)
self ._value = 0
self ._min_value = 0
self ._max_value = 100
self ._start_angle = 225
self ._end_angle = -45
self ._gauge_range = self ._start_angle - self ._end_angle
if self ._gauge_range <= 0:
self ._gauge_range += 360
self ._needle_color = QColor(255, 0, 0)
self ._scale_color = QColor(200, 200, 200)
self ._text_color = QColor(255, 255, 255)
 Circular Gauge - Main Application Setup
Integration with QSlider for Dynamic Updates
The main.py file integrates CircularGauge with a QSlider to create an interactive interface for dynamic value updates.

import sys
from PySide6 import QtWidgets, QtCore
from circular_gauge import CircularGauge

class MainWindow(QtWidgets.QMainWindow):
def __init__ (self):
super().__init__()
self.setWindowTitle(
"Circular Gauge Demo" )
self.setGeometry(100, 100, 300, 300)

central_widget = QtWidgets.QWidget()
self.setCentralWidget(central_widget)
layout = QtWidgets.QVBoxLayout(central_widget)

self.circular_gauge = CircularGauge()
layout.addWidget(self.circular_gauge)

self.slider = QtWidgets.QSlider(QtCore.Qt.Horizontal)
self.slider.setMinimum(0)
self.slider.setMaximum(100)
self.slider.setValue(0)
 Bar Gauge - Features and Design
A linear visual indicator designed to represent a value within a defined range, typically as a progress bar. Can be oriented either vertically or horizontally.

Flexible Orientation: Support for both vertical and horizontal Intuitive Display: Clear representation of levels like battery charge
orientations or volume

Progress Tracking: Ideal for showing completion status of tasks Customizable: Configurable colors, padding, and solid percentage

Horizontal Bar Gauge Vertical Bar Gauge

 Bar Gauge - Core Implementation
The core logic for drawing the Bar Gauge is in the paintEvent method of the _Bar class, using QPainter to render components based on the current value.

def paintEvent ( self , e):

painter = QPainter ( self )
brush = QBrush()
brush .setColor( self ._background-color)
brush .setStyle(Qt.SolidPattern)
rect = QRect(0, 0, painter .device().width(), painter .device().height())
painter .fillRect( rect , brush )

parent = self .parent()

vmin, vmax= parent .minimum(), parent .maximum()
value = parent .value()
dheight = painter .device().height() - ( self ._padding * 2)
dwidth = painter .device().width() - ( self ._padding * 2)

step_size = dheight / self .n_steps

barheight = step_size * self ._bar_solid_percent
bar_spacer = step_size * (1 - self ._bar_solid_percent) / 2
 Bar Gauge - Main Application Setup
Key Implementation Points
1importsys
2fromPySide6.QtWidgetsimportQApplication, QMainWindow, BarGauge with 10 steps

QSlider, QVBoxLayout, QWidget QSlider for value control

3frombar_gaugeimportBarGauge Visual feedback through gauge
4 updates
5classMainWindow(QMainWindow):
6def__init__(self): Application Flow:
7super().__init__() 1. Window initializes with gauge and slider
8self.setWindowTitle("Bar Gauge Demo") 2. Value changes trigger gauge updates
9self.setGeometry(100, 100, 200, 400)
10
11central_widget = QWidget()
12self.setCentralWidget(central_widget)
13layout = QVBoxLayout(central_widget)
14
15self.bar_gauge = BarGauge(steps=10)
16self.bar_gauge.setRange(0, 100)
17layout.addWidget(self.bar_gauge)
18
19self.slider = QSlider(Qt.Horizontal)
20self.slider.setMinimum(0)
 Digital Gauge - Features and Design
LCD-Style Display
Emulates classic LCD displays with clear numerical representation for
precise readings

Exact Numerical Representation

88.2
Provides precise readings for temperature, speed, counter values, and
Value Display
other metrics

At-a-Glance Readings
Designed for quick, intuitive understanding of displayed values

Digital gauges excel at providing precise, exact numerical readings where analog
approximation would be insufficient
Customizable Appearance
Configurable background, digit colors, and font styling to match
application themes
 Digital Gauge - Core Implementation
Python implementation using QLCDNumber for digital display

import sys
from PySide6.QtWidgets import QWidget, QLCDNumber, QVBoxLayout
from PySide6.QtCore import Qt
from PySide6.QtGui import QFont, QColor

class DigitalGauge(QWidget):

def __init__(self, parent=None):

self.value = 0

self.min_value = 0

self.max_value = 999

self.layout = QVBoxLayout(self)

self.lcd_display = QLCDNumber(self)

self.lcd_display.setSegmentStyle(QLCDNumber.Flat)

self.lcd_display.setDigitCount(3)

font = QFont(
"Digital-7 Mono", 48, QFont-bold)
 Digital Gauge - Main Application Setup
main.py Implementation

1 # main.py - Digital Gauge Application

2 import sys
3 from PySide6.QtWidgets import QApplication, QMainWindow, QVBoxLayout, QWidget, QSlider
4 from PySide6.QtCore import Qt
5 from digital_gauge import DigitalGauge
6
7 class MainWindow(QMainWindow):
8 def __init__ (self):
9 super(). __init__ ()
10 self.setWindowTitle( "Digital Gauge Demo" )
11 self.setGeometry(100, 100, 400, 300)
12
13 central_widget = QWidget()
14 self.setCentralWidget(central_widget)
15 main_layout = QVBoxLayout(central_widget)
16
17 # Create Digital Gauge with range 0-999
18 self.digital_gauge = DigitalGauge()
19 self.digital_gauge.set_range(0, 999)
20 main_layout.addWidget(self.digital_gauge)
21
22 # Create slider for control
 Hybrid Gauge - Features and Design
A sophisticated gauge that combines the best of both worlds: intuitive analog
visualization with precise digital readouts.

Intuitive Visual Feedback: Circular dial provides immediate visual

representation of value status

Precise Numerical Data: Digital readout displays exact value for accurate
interpretation
87
Comprehensive Display: Shows both general status and specific data
points for complete information

Customizable Appearance: Configurable colors, fonts, and layouts to Combines analog intuition with digital precision
match application design
 Hybrid Gauge - Core Implementation
# Hybrid Gauge Implementation
class HybridGauge(QtWidgets.QWidget):
def paintEvent(self, event):
painter = QtGui.QPainter(self)
painter.setRenderHint(QtGui.QPainter.Antialiasing)
# Scale and translate to center the gauge
side = min(self.width(), self.height())
painter.scale(side / 200.0, side / 200.0)
painter.translate(100, 100)
# Circular analog part
painter.setPen(QtGui.QPen(QtGui.QColor(200, 200, 200), 2))
painter.drawEllipse(-90, -90, 180, 180)
painter.setPen(QtGui.QPen(QtGui.QColor(0, 100, 200), 10))
rect = QRectF(-80, -80, 160, 160)
normalized_value = (self.value - self.min_value) / (self.max_value - self.min_value)
sweep_angle = -int(normalized_value * self.range_angle)
painter.drawArc(rect, int(self.start_angle * 16), sweep_angle * 16)

# Digital readout
painter.setPen(QtGui.QPen(Qt.white))
 Hybrid Gauge - Main Application Setup
1 import sys
2 from PySide6.QtWidgets import QApplication, QMainWindow, QVBoxLayout, QWidget, QSlider
3 from PySide6.QtCore import Qt
4 from hybrid_gauge import HybridGauge
5
6 class MainWindow(QMainWindow):
7 def __init__(self):
8 super().__init__()
9 self.setWindowTitle("Hybrid Gauge Demo")
10 self.setGeometry(100, 100, 400, 300)
11
12 central_widget = QWidget()
13 self.setCentralWidget(central_widget)
14 main_layout = QVBoxLayout(central_widget)
15
16 self.hybrid_gauge = HybridGauge()
17 main_layout.addWidget(self.hybrid_gauge)
18
19 self.slider = QSlider(Qt.Horizontal)
20 self.slider.setMinimum(0)
21 self.slider.setMaximum(100)
22 self.slider.setValue(0)
23 self.slider.setTickInterval(10)
24 self.slider.setTickPosition(QSlider.TicksBelow)
25
26 self.slider.valueChanged.connect(self.hybrid_gauge.set_value)
27 main_layout.addWidget(self.slider)