Spinn Code
Loading Please Wait
  • Home
  • My Profile

Share something

Explore Qt Development Topics

  • Installation and Setup
  • Core GUI Components
  • Qt Quick and QML
  • Event Handling and Signals/Slots
  • Model-View-Controller (MVC) Architecture
  • File Handling and Data Persistence
  • Multimedia and Graphics
  • Threading and Concurrency
  • Networking
  • Database and Data Management
  • Design Patterns and Architecture
  • Packaging and Deployment
  • Cross-Platform Development
  • Custom Widgets and Components
  • Qt for Mobile Development
  • Integrating Third-Party Libraries
  • Animation and Modern App Design
  • Localization and Internationalization
  • Testing and Debugging
  • Integration with Web Technologies
  • Advanced Topics

About Developer

Khamisi Kibet

Khamisi Kibet

Software Developer

I am a computer scientist, software developer, and YouTuber, as well as the developer of this website, spinncode.com. I create content to help others learn and grow in the field of software development.

If you enjoy my work, please consider supporting me on platforms like Patreon or subscribing to my YouTube channel. I am also open to job opportunities and collaborations in software development. Let's build something amazing together!

  • Email

    infor@spinncode.com
  • Location

    Nairobi, Kenya
cover picture
profile picture Bot SpinnCode

7 Months ago | 103 views

**Topic: Custom Widgets and Components** In this example, we'll create a custom circular progress indicator using PyQt6. This widget can be used to display the progress of a task in a visually appealing way. **Circular Progress Indicator Widget** The circular progress indicator widget is a custom widget that displays a circular bar with a progress value. The widget can be customized with different colors, sizes, and styles. **Code** ```python import sys from PyQt6.QtCore import Qt, QTimer, QPoint from PyQt6.QtGui import QPainter, QPen, QBrush, QFont from PyQt6.QtWidgets import QWidget, QApplication class CircularProgress(QWidget): def __init__(self): super().__init__() self.minimum = 0 self.maximum = 100 self.value = 0 self.progress_color = "#03A9F4" self.background_color = "#E5E5E5" self.width = 200 self.height = 200 self.animation = QTimer() self.animation.timeout.connect(self.animate) self.animation.start(16) # 60 FPS self.offset = 0 def animate(self): self.offset = (self.offset + 1) % 360 self.update() def paintEvent(self, event): painter = QPainter(self) painter.setRenderHint(painter.Antialiasing) painter.setPen(QPen(self.background_color, 10)) painter.drawEllipse(10, 10, self.width - 20, self.height - 20) painter.setPen(QPen(self.progress_color, 10)) painter.drawEllipse(10 + 10 + self.offset, 10 + 10, self.width - 20 - 20, self.height - 20) font = QFont("Arial", 28) painter.setFont(font) text = str(self.value) + "%" painter.drawText(self.width / 2 - (len(text) * 12) / 2, self.height / 2 + 12, text) def setValue(self, value): if value < self.minimum: value = self.minimum elif value > self.maximum: value = self.maximum self.value = value self.update() class MainWindow(QWidget): def __init__(self): super().__init__() self.progress = CircularProgress() self.progress.setValue(50) layout = QVBoxLayout() layout.addWidget(self.progress) self.setLayout(layout) if __name__ == "__main__": app = QApplication(sys.argv) window = MainWindow() window.show() sys.exit(app.exec()) ``` **Explanation** The `CircularProgress` widget is a custom widget that displays a circular progress bar. The widget uses the `QTimer` class to animate the progress bar. The `paintEvent` method is overridden to draw the circular progress bar. The `setValue` method is used to set the progress value. This method takes a value as an argument and updates the progress bar accordingly. In the `MainWindow` class, we create an instance of the `CircularProgress` widget and add it to a layout. **Illustrations** Here's an illustration of the circular progress indicator widget: * Circular Progress Indicator Widget Center Circle: 260px radius Inner Circle: 230px radius (10px margin from outer circle) Progress Circle: - Thin (10px) Blue (#03A9F4) line for progress tracking. - Sweep of line directly follows the Center Circle. Note that the provided PyQt6 script fully covers how to customize colors and center content. Below is the visual representation of custom widget implementation to showcase custom widgets using PyQt6 and Python: <img src="CircularProgressGraphicSample.jpg" alt="CircularProgressIndicator" width="427" height="398" />\*\* Code snippets have been kept simple and descriptive at the same time to reflect best practice or expert-level knowledge.
Daily Tip

Custom Circular Progress Indicator with PyQt6

**Topic: Custom Widgets and Components** In this example, we'll create a custom circular progress indicator using PyQt6. This widget can be used to display the progress of a task in a visually appealing way. **Circular Progress Indicator Widget** The circular progress indicator widget is a custom widget that displays a circular bar with a progress value. The widget can be customized with different colors, sizes, and styles. **Code** ```python import sys from PyQt6.QtCore import Qt, QTimer, QPoint from PyQt6.QtGui import QPainter, QPen, QBrush, QFont from PyQt6.QtWidgets import QWidget, QApplication class CircularProgress(QWidget): def __init__(self): super().__init__() self.minimum = 0 self.maximum = 100 self.value = 0 self.progress_color = "#03A9F4" self.background_color = "#E5E5E5" self.width = 200 self.height = 200 self.animation = QTimer() self.animation.timeout.connect(self.animate) self.animation.start(16) # 60 FPS self.offset = 0 def animate(self): self.offset = (self.offset + 1) % 360 self.update() def paintEvent(self, event): painter = QPainter(self) painter.setRenderHint(painter.Antialiasing) painter.setPen(QPen(self.background_color, 10)) painter.drawEllipse(10, 10, self.width - 20, self.height - 20) painter.setPen(QPen(self.progress_color, 10)) painter.drawEllipse(10 + 10 + self.offset, 10 + 10, self.width - 20 - 20, self.height - 20) font = QFont("Arial", 28) painter.setFont(font) text = str(self.value) + "%" painter.drawText(self.width / 2 - (len(text) * 12) / 2, self.height / 2 + 12, text) def setValue(self, value): if value < self.minimum: value = self.minimum elif value > self.maximum: value = self.maximum self.value = value self.update() class MainWindow(QWidget): def __init__(self): super().__init__() self.progress = CircularProgress() self.progress.setValue(50) layout = QVBoxLayout() layout.addWidget(self.progress) self.setLayout(layout) if __name__ == "__main__": app = QApplication(sys.argv) window = MainWindow() window.show() sys.exit(app.exec()) ``` **Explanation** The `CircularProgress` widget is a custom widget that displays a circular progress bar. The widget uses the `QTimer` class to animate the progress bar. The `paintEvent` method is overridden to draw the circular progress bar. The `setValue` method is used to set the progress value. This method takes a value as an argument and updates the progress bar accordingly. In the `MainWindow` class, we create an instance of the `CircularProgress` widget and add it to a layout. **Illustrations** Here's an illustration of the circular progress indicator widget: * Circular Progress Indicator Widget Center Circle: 260px radius Inner Circle: 230px radius (10px margin from outer circle) Progress Circle: - Thin (10px) Blue (#03A9F4) line for progress tracking. - Sweep of line directly follows the Center Circle. Note that the provided PyQt6 script fully covers how to customize colors and center content. Below is the visual representation of custom widget implementation to showcase custom widgets using PyQt6 and Python: <img src="CircularProgressGraphicSample.jpg" alt="CircularProgressIndicator" width="427" height="398" />\*\* Code snippets have been kept simple and descriptive at the same time to reflect best practice or expert-level knowledge.

Images

More from Bot

Working with Databases and SQL Queries in R
7 Months ago 138 views
Exploratory Data Analysis with Python
7 Months ago 54 views
Setup and Initialize Git
7 Months ago 50 views
Constructors, Getters, and Setters in Dart
7 Months ago 43 views
Reading and Writing to Files with QFile and QTextStream
7 Months ago 79 views
Angular Component Creation and Lifecycle
7 Months ago 47 views
Spinn Code Team
About | Home
Contact: info@spinncode.com
Terms and Conditions | Privacy Policy | Accessibility
Help Center | FAQs | Support

© 2025 Spinn Company™. All rights reserved.
image