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 | 55 views

**Custom Widgets and Components: Advanced Round Progress Bar** In this example, we will create a custom widget that displays a round progress bar, often used in modern GUI application design. The widget will have the following features: * Circular progress bar * Animated progress updates * Customizable colors and thickness * Support for percentage display Here is the implementation of the custom widget: ```python import sys from PyQt6.QtCore import Qt, QTimer, QPropertyAnimation from PyQt6.QtGui import QPainter, QBrush, QPen, QFont from PyQt6.QtWidgets import QApplication, QWidget class RoundProgressBar(QWidget): def __init__(self): super().__init__() self.progress = 0 self.min_value = 0 self.max_value = 100 self.thickness = 10 self.animation_duration = 1000 self.animation = QPropertyAnimation(self, b"progress") self.animation.setDuration(self.animation_duration) def set_progress(self, value): if value < self.min_value: value = self.min_value elif value > self.max_value: value = self.max_value self.progress = value self.update() def set_range(self, min_value, max_value): self.min_value = min_value self.max_value = max_value def paintEvent(self, event): painter = QPainter(self) painter.setRenderHint(painter.Antialiasing) thickness = self.thickness outer_radius = min(self.width(), self.height()) / 2 - thickness inner_radius = outer_radius - thickness painter.setPen(QPen(Qt.GlobalColor.black, thickness)) painter.setBrush(QBrush(Qt.GlobalColor.lightGray)) painter.drawEllipse(self.width() / 2 - outer_radius, self.height() / 2 - outer_radius, outer_radius * 2, outer_radius * 2) progress_angle = (self.progress - self.min_value) / (self.max_value - self.min_value) * 360 painter.setPen(QPen(Qt.GlobalColor.blue, thickness)) for angle in range(0, int(progress_angle), 2): painter.drawLine(self.width() / 2 + int(inner_radius * 0.95 * Qt.m163(180 - angle)), self.height() / 2 + int(inner_radius * 0.95 * Qt.m163(angle)), self.width() / 2 + int(outer_radius * Qt.m163(180 - angle)), self.height() / 2 + int(outer_radius * Qt.m163(angle))) def animate_progress(self, value): self.animation.setStartValue(self.progress) self.animation.setEndValue(value) self.animation.start() self.timer = QTimer() self.timer.timeout.connect(lambda: self.set_progress(self.progress + (value - self.progress) / self.animation_duration * 16)) self.timer.start(16) if __name__ == "__main__": app = QApplication(sys.argv) progress_bar = RoundProgressBar() progress_bar.resize(400, 400) progress_bar.show() progress_bar.set_progress(0) progress_bar.animate_progress(75) sys.exit(app.exec()) ``` In this code, we have created a class `RoundProgressBar` that inherits from `QWidget`. The progress is animated using a `QTimer` and a `QPropertyAnimation`. The `paintEvent` function is used to draw the circular progress bar. You can adjust the thickness, animation duration, and colors as needed. You can use the progress bar in your application by creating an instance of the `RoundProgressBar` class and setting the progress value. The `animate_progress` method can be used to animate the progress value. Here's an illustration of the custom round progress bar: ``` +---------------------------------------+ | 75% | | | | +---------------------------------+ | | | | | | | ***** ***** | | | | ***** ***** | | | | ***** *************** ***** | | | | ***** *************** ***** | | | | ***** ***** | | | | ***** ***** | | | +---------------------------------+ | | | +---------------------------------------+ ``` Note: The above illustration is a text-based representation of the custom round progress bar. The actual appearance of the progress bar may vary based on the size and colors used. The code can be extended and customized further to fit the specific needs of your application. You can also add additional features, such as text labels and color schemes, to the progress bar. **Advantages of this custom widget:** * **Fully customizable**: You can adjust the thickness, animation duration, colors, and other properties of the progress bar to fit your application's design and requirements. * **Animated updates**: The progress bar's value is animated smoothly, giving a modern and professional appearance to your application. * **Percentage display**: The progress bar can display percentage values, providing additional context to the user. * **Scalable**: The progress bar can be resized to fit different layouts and screen resolutions, ensuring a consistent user experience across different devices and platforms. This custom round progress bar widget can be a valuable addition to your application, enhancing the user experience and professional appearance of your GUI.
Daily Tip

Custom Round Progress Bar Example

**Custom Widgets and Components: Advanced Round Progress Bar** In this example, we will create a custom widget that displays a round progress bar, often used in modern GUI application design. The widget will have the following features: * Circular progress bar * Animated progress updates * Customizable colors and thickness * Support for percentage display Here is the implementation of the custom widget: ```python import sys from PyQt6.QtCore import Qt, QTimer, QPropertyAnimation from PyQt6.QtGui import QPainter, QBrush, QPen, QFont from PyQt6.QtWidgets import QApplication, QWidget class RoundProgressBar(QWidget): def __init__(self): super().__init__() self.progress = 0 self.min_value = 0 self.max_value = 100 self.thickness = 10 self.animation_duration = 1000 self.animation = QPropertyAnimation(self, b"progress") self.animation.setDuration(self.animation_duration) def set_progress(self, value): if value < self.min_value: value = self.min_value elif value > self.max_value: value = self.max_value self.progress = value self.update() def set_range(self, min_value, max_value): self.min_value = min_value self.max_value = max_value def paintEvent(self, event): painter = QPainter(self) painter.setRenderHint(painter.Antialiasing) thickness = self.thickness outer_radius = min(self.width(), self.height()) / 2 - thickness inner_radius = outer_radius - thickness painter.setPen(QPen(Qt.GlobalColor.black, thickness)) painter.setBrush(QBrush(Qt.GlobalColor.lightGray)) painter.drawEllipse(self.width() / 2 - outer_radius, self.height() / 2 - outer_radius, outer_radius * 2, outer_radius * 2) progress_angle = (self.progress - self.min_value) / (self.max_value - self.min_value) * 360 painter.setPen(QPen(Qt.GlobalColor.blue, thickness)) for angle in range(0, int(progress_angle), 2): painter.drawLine(self.width() / 2 + int(inner_radius * 0.95 * Qt.m163(180 - angle)), self.height() / 2 + int(inner_radius * 0.95 * Qt.m163(angle)), self.width() / 2 + int(outer_radius * Qt.m163(180 - angle)), self.height() / 2 + int(outer_radius * Qt.m163(angle))) def animate_progress(self, value): self.animation.setStartValue(self.progress) self.animation.setEndValue(value) self.animation.start() self.timer = QTimer() self.timer.timeout.connect(lambda: self.set_progress(self.progress + (value - self.progress) / self.animation_duration * 16)) self.timer.start(16) if __name__ == "__main__": app = QApplication(sys.argv) progress_bar = RoundProgressBar() progress_bar.resize(400, 400) progress_bar.show() progress_bar.set_progress(0) progress_bar.animate_progress(75) sys.exit(app.exec()) ``` In this code, we have created a class `RoundProgressBar` that inherits from `QWidget`. The progress is animated using a `QTimer` and a `QPropertyAnimation`. The `paintEvent` function is used to draw the circular progress bar. You can adjust the thickness, animation duration, and colors as needed. You can use the progress bar in your application by creating an instance of the `RoundProgressBar` class and setting the progress value. The `animate_progress` method can be used to animate the progress value. Here's an illustration of the custom round progress bar: ``` +---------------------------------------+ | 75% | | | | +---------------------------------+ | | | | | | | ***** ***** | | | | ***** ***** | | | | ***** *************** ***** | | | | ***** *************** ***** | | | | ***** ***** | | | | ***** ***** | | | +---------------------------------+ | | | +---------------------------------------+ ``` Note: The above illustration is a text-based representation of the custom round progress bar. The actual appearance of the progress bar may vary based on the size and colors used. The code can be extended and customized further to fit the specific needs of your application. You can also add additional features, such as text labels and color schemes, to the progress bar. **Advantages of this custom widget:** * **Fully customizable**: You can adjust the thickness, animation duration, colors, and other properties of the progress bar to fit your application's design and requirements. * **Animated updates**: The progress bar's value is animated smoothly, giving a modern and professional appearance to your application. * **Percentage display**: The progress bar can display percentage values, providing additional context to the user. * **Scalable**: The progress bar can be resized to fit different layouts and screen resolutions, ensuring a consistent user experience across different devices and platforms. This custom round progress bar widget can be a valuable addition to your application, enhancing the user experience and professional appearance of your GUI.

Images

More from Bot

Mastering React.js: Building Modern User Interfaces
2 Months ago 37 views
Customizing Navigation Headers in React Native
7 Months ago 50 views
Introduction to RSpec for Unit Testing
7 Months ago 46 views
Working with Databases in Rails
6 Months ago 39 views
Project-Based Learning in Haskell.
7 Months ago 49 views
Final Project Presentation in Mastering TypeScript Course
7 Months ago 51 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