Topic: **Custom Widgets and Components - Implementing a Circular Progress Indicator** In this example, we'll design a custom circular progress indicator widget using PyQt6. This widget will display the progress of a task in a circular format, providing a visually appealing way to represent the progress. **Circular Progress Indicator Design** The widget will have the following properties: * A circular progress bar that fills up as the progress increases. * A text label that displays the progress percentage. * Customizable colors for the progress bar and background. **Source Code** ```python import sys from PyQt6.QtCore import Qt, QTimer, QRect from PyQt6.QtGui import QPainter, QPen, QBrush, QFont from PyQt6.QtWidgets import QApplication, QWidget class CircularProgressIndicator(QWidget): def __init__(self): super().__init__() self.progress = 0 self.progress_color = Qt.GlobalColor.green self.background_color = Qt.GlobalColor.white self.text_color = Qt.GlobalColor.black self.timer = QTimer() self.timer.timeout.connect(self.increment_progress) self.initUI() def initUI(self): self.setGeometry(100, 100, 200, 200) self.timer.start(16) # milliseconds (roughly 60 FPS) def paintEvent(self, e): qp = QPainter() qp.begin(self) self.draw_circular_progress(qp) self.draw_progress_text(qp) qp.end() def draw_circular_progress(self, qp): size = self.size() width = 10 radius = min(size.width(), size.height()) // 2 - width center_x = size.width() // 2 center_y = size.height() // 2 # Draw background circle qp.setPen(QPen(Qt.GlobalColor.black, 1)) qp.setBrush(QBrush(self.background_color)) qp.drawEllipse(QRect(center_x - radius - width // 2, center_y - radius - width // 2, radius * 2 + width, radius * 2 + width)) # Draw progress circle qp.setPen(QPen(self.progress_color, width)) qp.drawArc(QRect(center_x - radius - width // 2, center_y - radius - width // 2, radius * 2 + width, radius * 2 + width), int((self.progress / 100) * 360 * 16), int(360 * 16)) def draw_progress_text(self, qp): font = QFont() font.setPointSize(24) qp.setFont(font) qp.setPen(QPen(self.text_color, 2)) text = f"{int(self.progress)}%" qp.drawText(self.rect(), Qt.AlignmentFlag.AlignCenter, text) def increment_progress(self): if self.progress < 100: self.progress += 1 self.update() if __name__ == "__main__": app = QApplication(sys.argv) widget = CircularProgressIndicator() widget.show() sys.exit(app.exec()) ``` **How it Works:** * The `CircularProgressIndicator` class inherits from `QWidget`. * The `initUI` method initializes the widget's geometry and starts a timer to increment the progress. * The `paintEvent` method is responsible for drawing the circular progress indicator. It calls `draw_circular_progress` to draw the circular progress bar and `draw_progress_text` to display the progress percentage. * The `draw_circular_progress` method draws the background circle and the progress circle using `QPainter`. The progress circle's arc is determined by the progress percentage. * The `draw_progress_text` method displays the progress percentage in the center of the widget. * The `increment_progress` method increments the progress and updates the widget. **Usage:** * Create an instance of the `CircularProgressIndicator` class. * Customize the progress color, background color, and text color using the respective attributes (e.g., `progress_color`, `background_color`, `text_color`). * Show the widget and start the application event loop. This custom widget provides a visually appealing way to represent progress in a circular format. You can integrate it into your PyQt6 applications to enhance the user experience.