How to use QPropertyAnimation with QPainter to draw an arc - python

I'm writing a desktop widget that performs the function of a system monitor. Using a QPainter I draw an arc which represents a graphical representation of a cpu usage level. Every second a paintevent redraw this arc with a span angle based on a cpu_percent() function value.
The result is a jerk transition between new and previous level representations. I'd like to use a QPropertyAnimation to create a smooth easing arc animation. Unfortunately I don't know the propeties I should use. I'd be glad if you tell me how to do it in a proper way.
Here's a widget class that I use:
from PySide2 import QtWidgets, QtCore, QtGui
from psutil import cpu_percent
class cpu_diagram(QtWidgets.QWidget):
def __init__(self, parent=None):
super(cpu_diagram, self).__init__()
self.resize(600, 600) # todo
# color constants
self.dark = "#3B3A44"
self.light = "#4A4953"
self.color = "#75ECB5"
# text constants
self.module_name = "CPU"
self.postfix = "average"
# timer with an interval of 1 sec
self.timer = QtCore.QTimer()
self.timer.setInterval(1000)
self.timer.timeout.connect(self.update)
self.timer.start()
def paintEvent(self, event:QtGui.QPaintEvent):
# get cpu usage
self.percent = cpu_percent()
painter = QtGui.QPainter(self)
painter.setRenderHint(QtGui.QPainter.Antialiasing)
# draw base
basic_rect = self.rect().adjusted(20, 20, -20, -20)
painter.setBrush(QtGui.QBrush(QtGui.QColor(self.dark)))
painter.drawEllipse(basic_rect)
# draw arc
pen = QtGui.QPen(QtGui.QColor(self.light))
pen.setWidth(40)
painter.setPen(pen)
arc_rect = basic_rect.adjusted(40, 40, -40, -40)
painter.drawEllipse(arc_rect)
# draw active arc
pen.setColor(QtGui.QColor(self.color))
start_angle = 90
span_angle = self.percent_to_angle(self.percent)
painter.setPen(pen)
painter.drawArc(arc_rect, start_angle * 16, span_angle * 16)
# draw text
# draw module name
painter.setPen(QtGui.QPen(QtGui.QColor(QtCore.Qt.white)))
font = QtGui.QFont()
font.setPixelSize(110)
painter.setFont(font)
arc_rect.moveTop(-25)
painter.drawText(arc_rect, QtCore.Qt.AlignCenter, self.module_name)
# draw postfix
font = QtGui.QFont()
font.setPixelSize(60)
painter.setFont(font)
arc_rect.moveTop(-125)
painter.drawText(arc_rect, QtCore.Qt.AlignCenter | QtCore.Qt.AlignBottom, self.postfix)
# draw percents
arc_rect.moveBottom(460)
painter.setPen(QtGui.QPen(self.color))
painter.drawText(arc_rect, QtCore.Qt.AlignCenter | QtCore.Qt.AlignBottom, f"{str(self.percent)} %")
def percent_to_angle(self, percent):
return -percent / 100 * 360

You have to create a QProperty that represents the percentage and use it in the QPropertyAnimation.
from PySide2 import QtWidgets, QtCore, QtGui
from psutil import cpu_percent
class CpuDiagram(QtWidgets.QWidget):
percentChanged = QtCore.Signal(float)
def __init__(self, parent=None):
super().__init__(parent)
self.resize(600, 600) # todo
# color constants
self.dark = "#3B3A44"
self.light = "#4A4953"
self.color = "#75ECB5"
# text constants
self.module_name = "CPU"
self.postfix = "average"
# timer with an interval of 1 sec
self.timer = QtCore.QTimer()
self.timer.setInterval(1000)
self.timer.timeout.connect(self.onTimeout)
self.timer.start()
self._percent = 0
self._animation = QtCore.QPropertyAnimation(self, b"percent", duration=400)
self.percentChanged.connect(self.update)
#QtCore.Slot()
def onTimeout(self):
start_value = self.percent
end_value = cpu_percent()
self._animation.setStartValue(start_value)
self._animation.setEndValue(end_value)
self._animation.start()
def get_percent(self):
return self._percent
def set_percent(self, p):
if self._percent != p:
self._percent = p
self.percentChanged.emit(p)
percent = QtCore.Property(
float, fget=get_percent, fset=set_percent, notify=percentChanged
)
def paintEvent(self, event: QtGui.QPaintEvent):
painter = QtGui.QPainter(self)
painter.setRenderHint(QtGui.QPainter.Antialiasing)
# draw base
basic_rect = self.rect().adjusted(20, 20, -20, -20)
painter.setBrush(QtGui.QBrush(QtGui.QColor(self.dark)))
painter.drawEllipse(basic_rect)
# draw arc
pen = QtGui.QPen(QtGui.QColor(self.light))
pen.setWidth(40)
painter.setPen(pen)
arc_rect = basic_rect.adjusted(40, 40, -40, -40)
painter.drawEllipse(arc_rect)
# draw active arc
pen.setColor(QtGui.QColor(self.color))
start_angle = 90
span_angle = self.percent_to_angle(self.percent)
painter.setPen(pen)
painter.drawArc(arc_rect, start_angle * 16, span_angle * 16)
# draw text
# draw module name
painter.setPen(QtGui.QPen(QtGui.QColor(QtCore.Qt.white)))
font = QtGui.QFont()
font.setPixelSize(110)
painter.setFont(font)
arc_rect.moveTop(-25)
painter.drawText(arc_rect, QtCore.Qt.AlignCenter, self.module_name)
# draw postfix
font = QtGui.QFont()
font.setPixelSize(60)
painter.setFont(font)
arc_rect.moveTop(-125)
painter.drawText(
arc_rect, QtCore.Qt.AlignCenter | QtCore.Qt.AlignBottom, self.postfix
)
# draw percents
arc_rect.moveBottom(460)
painter.setPen(QtGui.QPen(self.color))
painter.drawText(
arc_rect,
QtCore.Qt.AlignCenter | QtCore.Qt.AlignBottom,
f"{self.percent:.2f} %",
)
def percent_to_angle(self, percent):
return -percent / 100 * 360
if __name__ == "__main__":
import sys
app = QtWidgets.QApplication(sys.argv)
w = CpuDiagram()
w.show()
sys.exit(app.exec_())

Related

How to call paintEvent in a Qframe PyQt5?

In pyqt5, I want to insert a circular bar in my QFrame named days. For that, I have painted a circular bar but I am unable to call it under a Qframe. In the last two lines, I am trying to call it under a frame but somehow it doesn't work. I would appreciate it greatly if anybody could help!
circular_bar.py
from PyQt5 import QtCore, QtGui, QtWidgets
from PyQt5.QtGui import *
from PyQt5.QtCore import *
from PyQt5.QtWidgets import *
shwd = 10
class MainWindow(QMainWindow):
def __init__(self):
super().__init__()
self.setWindowTitle("Hatchery System")
self.setStyleSheet("background-color: #2c313c;")
self.resize(900, 500)
self.setSizePolicy(QSizePolicy.Expanding, QSizePolicy.Preferred)
# self.setWindowFlags(Qt.FramelessWindowHint)
self.days_frame = QtWidgets.QFrame(self)
self.days_frame.setGeometry(QtCore.QRect(200, 100, 395, 300))
self.days_frame.setStyleSheet("background-color: #222931;" "border-radius: 10px;" "padding: 5px;")
shadow = QGraphicsDropShadowEffect()
shadow.setBlurRadius(shwd)
shadow.setColor(QColor(Qt.white))
shadow.setOffset(0)
self.days_frame.setGraphicsEffect(shadow)
self.days_label = QtWidgets.QLabel('Days', self.days_frame)
self.days_label.setGeometry(QtCore.QRect(10, 10, 131, 41))
self.days_label.setStyleSheet("color: white;")
font = QtGui.QFont()
font.setPointSize(13)
self.days_label.setFont(font)
# self.days_frame(paintEvent)
def paintEvent(self, e):
self.value = 0
self.width = 200
self.height = 200
self.progress_width = 10
self.progress_rounded_cap = True
self.max_value = 100
self.progress_color = 0xff79c6
# Text
self.enable_text = True
self.font_family = "Segoe UI"
self.font_size = 12
self.suffix = "%"
self.text_color = 0xff79c6
# BG
self.enable_bg = True
self.bg_color = 0x44475a
# SET PROGRESS PARAMETERS
width = self.width - self.progress_width
height = self.height - self.progress_width
margin = self.progress_width / 2
value = self.value * 360 / self.max_value
# PAINTER
paint = QPainter(self)
paint.begin(self)
paint.setRenderHint(QPainter.Antialiasing) # remove pixelated edges
paint.setFont(QFont(self.font_family, self.font_size))
# CREATE RECTANGLE
rect = QRect(0, 0, self.width, self.height)
paint.setPen(Qt.NoPen)
paint.drawRect(rect)
# PEN
pen = QPen()
pen.setWidth(self.progress_width)
# Set Round Cap
if self.progress_rounded_cap:
pen.setCapStyle(Qt.RoundCap)
# ENABLE BG
if self.enable_bg:
pen.setColor(QColor(self.bg_color))
paint.setPen(pen)
paint.drawArc(margin, margin, width, height, 0, 360 * 16)
# CREATE ARC / CIRCULAR PROGRESS
pen.setColor(QColor(self.progress_color))
paint.setPen(pen)
paint.drawArc(margin, margin, width, height, -90 * 16, -value * 16)
# CREATE TEXT
if self.enable_text:
pen.setColor(QColor(self.text_color))
paint.setPen(pen)
paint.drawText(rect, Qt.AlignCenter, f"{self.value}{self.suffix}")
# END
paint.end()
# tring to call paintEvent
self.days_frame(paintEvent(self, e))
#self.days_frame.paintEvent(self, e)
app = QApplication([])
mw = MainWindow()
mw.show()
app.exec_()
output
Updated Code
progress.py
from PyQt5 import QtGui, QtWidgets, QtCore
from PyQt5.QtGui import *
from PyQt5.QtCore import *
from PyQt5.QtWidgets import *
class CircularProgress(QtWidgets.QWidget):
def __init__(self):
super().__init__()
# CUSTOM PROPERTIES
self.value = 0
self.width = 200
self.height = 200
self.progress_width = 10
self.progress_rounded_cap = True
self.max_value = 100
self.progress_color = 0xff79c6
# Text
self.enable_text = True
self.font_family = "Segoe UI"
self.font_size = 12
self.suffix = "%"
self.text_color = 0xff79c6
# BG
self.enable_bg = True
self.bg_color = 0x44475a
# SET DEFAULT SIZE WITHOUT LAYOUT
self.resize(self.width, self.height)
self.show()
# ADD DROPSHADOW
def add_shadow(self, enable):
if enable:
self.shadow = QGraphicsDropShadowEffect(self)
self.shadow.setBlurRadius(15)
self.shadow.setXOffset(0)
self.shadow.setYOffset(0)
self.shadow.setColor(QColor(0, 0, 0, 80))
self.setGraphicsEffect(self.shadow)
# SET VALUE
def set_value(self, value):
self.value = value
self.repaint() # Render progress bar after change value
# PAINT EVENT (DESIGN YOUR CIRCULAR PROGRESS HERE)
def paintEvent(self, e):
# SET PROGRESS PARAMETERS
width = self.width - self.progress_width
height = self.height - self.progress_width
margin = self.progress_width / 2
value = self.value * 360 / self.max_value
# PAINTER
paint = QPainter()
paint.begin(self)
paint.setRenderHint(QPainter.Antialiasing) # remove pixelated edges
paint.setFont(QFont(self.font_family, self.font_size))
# CREATE RECTANGLE
rect = QRect(0, 0, self.width, self.height)
paint.setPen(Qt.NoPen)
paint.drawRect(rect)
# PEN
pen = QPen()
pen.setWidth(self.progress_width)
# Set Round Cap
if self.progress_rounded_cap:
pen.setCapStyle(Qt.RoundCap)
# ENABLE BG
if self.enable_bg:
pen.setColor(QColor(self.bg_color))
paint.setPen(pen)
paint.drawArc(margin, margin, width, height, 0, 360 * 16)
# CREATE ARC / CIRCULAR PROGRESS
pen.setColor(QColor(self.progress_color))
paint.setPen(pen)
paint.drawArc(margin, margin, width, height, -90 * 16, -value * 16)
# CREATE TEXT
if self.enable_text:
pen.setColor(QColor(self.text_color))
paint.setPen(pen)
paint.drawText(rect, Qt.AlignCenter, f"{self.value}{self.suffix}")
# END
paint.end()
if __name__ == "__main__":
import sys
app = QtWidgets.QApplication(sys.argv)
MainWindow = QtWidgets.QMainWindow()
ui = CircularProgress()
sys.exit(app.exec_())
main.py
from circularBar import CircularProgress
class MainWindow(QMainWindow):
def __init__(self):
QMainWindow.__init__(self)
self.days_frame = QtWidgets.QFrame(self)
self.days_frame.setGeometry(QtCore.QRect(845, 150, 395, 300))
self.days_frame.setStyleSheet("background-color: #222931;" "border-radius: 10px;" "padding: 5px;")
shadow = QGraphicsDropShadowEffect()
shadow.setBlurRadius(shwd)
shadow.setColor(QColor(Qt.white))
shadow.setOffset(0)
self.days_frame.setGraphicsEffect(shadow)
self.days_label = QtWidgets.QLabel('Days', self.days_frame)
self.days_label.setGeometry(QtCore.QRect(10, 10, 131, 41))
self.days_label.setStyleSheet("color: white;")
font = QtGui.QFont
font.setPointSize(13)
self.days_label.setFont(font)
# self.days_frame
self.progress = CircularProgress(self.days_frame)
app = QApplication([])
mw = MainWindow()
mw.show()
app.exec_()
Error:

PyQt5 QGraphicsPathItem to draw a Resistor

I am coding an app to solve electrical circuits and I need to model the circuit. To do so, I need to draw Resistors and other shapes on a scene, being able to move it and so on.
The thing is that I am tryng to show a resistor en the scene and I can't find the way. I am tryng by using QGraphicsPathItem but looking at the documentation I am not capable of doing it. I'll show a bit of the code I am writing to solve this part of the app:
1. The first code I show is the Resistor as it should be shown
2. The second part is the way I want to do it, but instead an ellipsis, I want to show a Resistor
### 1st Code
import sys
from PyQt5 import QtCore, QtGui, QtWidgets, uic
from PyQt5.QtCore import Qt
x0 = 100
y0 = 50
class MainWindow(QtWidgets.QMainWindow):
def __init__(self):
super().__init__()
self.x1 = 12
self.y1 = 33
self.y2 = 18
self.y3 = 15
self.y4 = 9
self.y5 = 3
self.p1 = QtCore.QPoint(0, 0 + self.y1)
self.p2 = QtCore.QPoint(0, 0 + self.y2)
self.p3 = QtCore.QPoint(self.x1, self.y3)
self.p4 = QtCore.QPoint(-self.x1, self.y4)
self.p5 = QtCore.QPoint(self.x1, self.y5)
self.p6 = QtCore.QPoint(-self.x1, -self.y5)
self.p7 = QtCore.QPoint(self.x1, -self.y4)
self.p8 = QtCore.QPoint(-self.x1, -self.y3)
self.p9 = QtCore.QPoint(0, 0 - self.y2)
self.p10 = QtCore.QPoint(0, 0 - self.y1)
def draw_resistor(self,angle=0, x0=0, y0=0):
self.x0 = x0
self.y0 = y0
self.label = QtWidgets.QLabel()
self.canvas = QtGui.QPixmap(200, 100) # This is to create the canvas
self.canvas.fill() # To set the canvas background color to white. If not, we will only see a black frame
self.label.setPixmap(self.canvas)
self.setCentralWidget(self.label)
self.painter = QtGui.QPainter(self.label.pixmap())
self.painter.translate(self.x0,self.y0) # To change the axis origin
self.painter.rotate(angle)
self.painter.drawLines(self.p1,self.p2,self.p2,self.p3,self.p3,self.p4,self.p4,self.p5,self.p5,
self.p6,self.p6,self.p7,self.p7,self.p8,self.p8,self.p9,self.p9,self.p10)
self.painter.end()
def rotate(self,angle=0):
self.painter.rotate(angle)
self.painter.drawLines(self.p1,self.p2,self.p2,self.p3,self.p3,self.p4,self.p4,self.p5,self.p5,
self.p6,self.p6,self.p7,self.p7,self.p8,self.p8,self.p9,self.p9,self.p10)
self.label.update() # Research about this, it could be the key
app = QtWidgets.QApplication(sys.argv)
window = MainWindow()
window.show()
window.draw_resistor(45,x0,y0)
app.exec_()
###################
###################
###################
###################
### 2nd Code
import sys
from PyQt5.QtWidgets import QApplication, QGraphicsItem, QGraphicsPathItem, QGraphicsView, QGraphicsScene, QGraphicsEllipseItem, QLabel
from PyQt5.QtCore import Qt, QPointF, QRectF, QPoint
from PyQt5.QtGui import QPixmap, QPainter
class MovingObject(QGraphicsEllipseItem):
def __init__(self, x, y, r):
super().__init__(0, 0, r, r)
self.setPos(x, y)
self.setBrush(Qt.blue)
self.setAcceptHoverEvents(True)
# Mouse hover events
def hoverEnterEvent(self, event):
app.instance().setOverrideCursor(Qt.OpenHandCursor)
def hoverLeaveEvent(self, event):
app.instance().restoreOverrideCursor()
# Mouse click events
def mousePressEvent(self, event):
pass
def mouseMoveEvent(self, event):
orig_cursor_position = event.lastScenePos()
updated_cursor_position = event.scenePos()
orig_position = self.scenePos()
updated_cursor_x = updated_cursor_position.x() - orig_cursor_position.x() + orig_position.x()
updated_cursor_y = updated_cursor_position.y() - orig_cursor_position.y() + orig_position.y()
self.setPos(QPointF(updated_cursor_x, updated_cursor_y))
def mouseReleaseEvent(self, event):
print("x: {0}, y: {1}".format(self.pos().x(), self.pos().y()))
class GraphicView(QGraphicsView):
def __init__(self):
super().__init__()
self.scene = QGraphicsScene()
self.setScene(self.scene)
self.setSceneRect(0, 0, 1200, 1000)
self.moveObject = MovingObject(50, 50, 40)
self.moveObject2 = MovingObject(100, 100, 100)
self.scene.addItem(self.moveObject)
self.scene.addItem(self.moveObject2)
app = QApplication(sys.argv)
view = GraphicView()
view.show()
sys.exit(app.exec_())
I solved it, this is the solution:
class Resistor(QGraphicsPathItem):
def __init__(self, x, y):
super(Resistor, self).__init__()
self.setFlag(QGraphicsItem.ItemIsSelectable, True)
self.setFlag(QGraphicsItem.ItemIsFocusable, True)
self.setAcceptHoverEvents(True)
self.isSelected = False
self.setPath(self.create_path())
self.setPos(x, y)
def create_path(self):
path = QPainterPath()
path.moveTo(0, 33)
path.lineTo(0, 18)
path.lineTo(12, 15)
path.lineTo(-12, 9)
path.lineTo(12, 3)
path.lineTo(-12, -3)
path.lineTo(12, -9)
path.lineTo(-12, -15)
path.lineTo(0, -18)
path.lineTo(0, -33)
return path

How to crop QPixmap that is set on a Scene with a rotated QGraphicsRectItem?

I cannot figure out how to crop a QPixmap that is set on a scene with a rotated QGraphicsRectItem also placed in the same scene.
Here is the code for my QGraphicsScene and QPixmap.
class crop_pattern(QGraphicsView):
img_is_cropped = QtCore.Signal(object)
def __init__(self, path, scale):
super().__init__()
# Connect graphics scene with graphics view
self.setFixedSize(500, 500)
self.scene = QGraphicsScene(self)
self.setScene(self.scene)
self.roi_scale = scale
# Display image
self.set_image(path)
def set_image(self, path):
pixmap = QtGui.QPixmap(path)
if pixmap:
pixmap = pixmap.scaledToHeight(self.roi_scale * pixmap.height())
self.scene.clear()
self.scene.addPixmap(pixmap)
self.setAlignment(QtCore.Qt.AlignCenter)
def wheelEvent(self, event):
zoomInFactor = 1.05
zoomOutFactor = 1 / zoomInFactor
oldPos = self.mapToScene(event.pos())
if event.angleDelta().y() > 0:
zoomFactor = zoomInFactor
else:
zoomFactor = zoomOutFactor
self.scale(zoomFactor, zoomFactor)
newPos = self.mapToScene(event.pos())
delta = newPos - oldPos
self.translate(delta.x(), delta.y())
(Credits to QGraphicsView Zooming in and out under mouse position using mouse wheel for the wheelEvent function)
Here is the QGraphicsItem that is generated when the user clicks a certain button.
QtCore.Slot(bool)
def create_shape(self):
sender = self.sender()
if sender.text().lower() == "circle":
self.shape = ellipse_shape(0, 0, 100, 100)
elif sender.text().lower() == "rectangle":
self.shape = rect_shape(0, 0, 100, 100)
self.shape.setZValue(1)
self.shape.setTransformOriginPoint(50, 50)
self.crop_pattern.scene.addItem(self.shape) # added item to the same scene, which is crop_pattern.
Here is the GUI as the question suggested. (QGraphicsRectItem has been resized)
How can I crop the pixels inside the rectangle? Thanks!
One possible solution is to create a hidden QGraphicsView and use the render() method to save the image section. The objective of the hidden QGraphicsView is not to modify the existing view since the image must be rotated in addition to not being affected by the scaling.
from PyQt5 import QtCore, QtGui, QtWidgets
def crop_rect(rect_item, scene):
is_visible = rect_item.isVisible()
rect_item.hide()
hide_view = QtWidgets.QGraphicsView(scene)
hide_view.rotate(-rect_item.rotation())
polygon = rect_item.mapToScene(rect_item.rect())
pixmap = QtGui.QPixmap(rect_item.rect().size().toSize())
pixmap.fill(QtCore.Qt.transparent)
source_rect = hide_view.mapFromScene(polygon).boundingRect()
painter = QtGui.QPainter(pixmap)
hide_view.render(
painter,
target=QtCore.QRectF(pixmap.rect()),
source=source_rect,
)
painter.end()
rect_item.setVisible(is_visible)
return pixmap
def main():
app = QtWidgets.QApplication([])
scene = QtWidgets.QGraphicsScene()
view = QtWidgets.QGraphicsView(alignment=QtCore.Qt.AlignCenter)
view.setScene(scene)
# emulate wheel
view.scale(0.8, 0.8)
# create pixmap
pixmap = QtGui.QPixmap(500, 500)
pixmap.fill(QtGui.QColor("green"))
painter = QtGui.QPainter(pixmap)
painter.setBrush(QtGui.QColor("salmon"))
painter.drawEllipse(pixmap.rect().adjusted(100, 90, -80, -100))
painter.end()
pixmap_item = scene.addPixmap(pixmap)
rect = QtCore.QRectF(0, 0, 200, 300)
rect_item = scene.addRect(rect)
rect_item.setPen(QtGui.QPen(QtGui.QColor("red"), 4))
rect_item.setPos(100, 100)
rect_item.setTransformOriginPoint(50, 50)
rect_item.setRotation(10)
view.resize(640, 480)
view.show()
qpixmap = crop_rect(rect_item, scene)
label = QtWidgets.QLabel()
label.setPixmap(qpixmap)
label.show()
app.exec_()
if __name__ == "__main__":
main()
Input:
Output:

Pyside6 Animated Rectangle trouble

I'm trying to make fading looped rectangle area. I used base code from here
Just decided expand it.
Its just blinking rectangle, but I need smooth fade-in and fade-out effects. So I decided to make method which will calulate new opacity percent and set it to painter. But it doesnt work in cycle.
This is my class now
class HighlightRect(QFrame):
board_width = 400 # width of frame
board_height = 400 #height of frame
def __init__(self, parent, x, y, width=50, height=50, blink_speed=1000):
super().__init__(parent)
self.blink_speed = blink_speed
self.opacity_timer = self.blink_speed
self.board_height = self.parent().height()
self.board_width = self.parent().width()
self.square_height = height
self.square_width = width
self.highlight_x = x
self.highlight_y = y
#self.setFocusPolicy(QtCore.Qt.StrongFocus)
self.timer_draw = QtCore.QTimer(self)
self.timer_draw.timeout.connect(self.draw)
self.timer_draw.start(self.blink_speed)
self.color = QtCore.Qt.red
self.is_draw = False
self.x_apple = 0
self.y_apple = 0
self.draw()
def blink(self, painter):
self.color = QtCore.Qt.red
while self.opacity_timer >= 0:
self.opacity_timer -= 1 / 10 # просто подбор
percents = round(int(self.opacity_timer / self.blink_speed * 100)/100, 1)
print(percents)
painter.setOpacity(percents)
def paintEvent(self, event):
painter = QtGui.QPainter(self)
print ("Paint Event?")
if self.is_draw == True:
print ("Draw")
#self.color = QtCore.Qt.red
self.blink_thread = threading.Thread(name='background', target=lambda: self.blink(painter))
self.blink_thread.start()
else:
self.opacity_timer = self.blink_speed
print ("Do not draw")
self.color = QtCore.Qt.transparent
threading.SystemExit = SystemExit
painter.setPen(self.color)
painter.drawRect(self.rect)
def draw(self):
self.is_draw = not self.is_draw
self.rect = QRect(self.highlight_x, self.highlight_y, self.square_width, self.square_height)
self.update()
Changind of opacity inside blink function but outside while loop works as well, but its static. No changes. Changing opacity in loop isn't work.
Whats wrong?
Maybe somewhere here is another more correct way to get what I want?
One possible solution is to create a QProperty that handles opacity and then use QPropertyAnimation to make the change smooth.
import random
import sys
from PySide6.QtCore import Property, Signal, QPropertyAnimation, QRect, Qt
from PySide6.QtGui import QPainter
from PySide6.QtWidgets import QFrame, QApplication
class Board(QFrame):
rect_opacity_changed = Signal(name="rectOpacityChanged")
def __init__(self, parent=None):
super(Board, self).__init__(parent)
self._rect_opacity = 1.0
self._rect = QRect(0, 0, 50, 50)
self._opacity_animation = QPropertyAnimation(
targetObject=self, propertyName=b"rect_opacity", duration=3000
)
for p, v in ((0.0, 0.0), (0.3, 1.0), (0.7, 1.0), (1.0, 0.0)):
self._opacity_animation.setKeyValueAt(p, v)
self._opacity_animation.finished.connect(self.change)
self.change()
#Property(float, notify=rect_opacity_changed)
def rect_opacity(self):
return self._rect_opacity
#rect_opacity.setter
def rect_opacity(self, opacity):
self._rect_opacity = opacity
self.rect_opacity_changed.emit()
self.update()
def change(self):
x = random.randint(0, self.width() - self._rect.width())
y = random.randint(0, self.height() - self._rect.height())
self._rect.moveTo(x, y)
self._opacity_animation.start()
def paintEvent(self, event):
painter = QPainter(self)
painter.setOpacity(self.rect_opacity)
painter.setPen(Qt.red)
painter.drawRect(self._rect)
def main():
app = QApplication([])
board = Board()
board.show()
sys.exit(app.exec())
if __name__ == "__main__":
main()

Different colours in an arc

Consider the following toy example:
from PyQt5 import QtWidgets, QtGui, QtCore
class MainWindow(QtWidgets.QMainWindow):
def __init__(self):
super(MainWindow, self).__init__()
w = QtWidgets.QWidget()
layout = QtWidgets.QVBoxLayout()
w.setLayout(layout)
self.setCentralWidget(w)
label = QtWidgets.QLabel()
canvas = QtGui.QPixmap(400, 300)
label.setPixmap(canvas)
layout.addWidget(label)
def paintEvent():
painter = QtGui.QPainter(label.pixmap())
painter.setRenderHint(QtGui.QPainter.Antialiasing)
painter.setPen(QtCore.Qt.red)
painter.drawArc(0, 0, 100, 100, 1440, -2880)
painter.end()
paintEvent()
self.show()
app = QtWidgets.QApplication([])
window = MainWindow()
app.exec_()
How can I paint the arc using an arbitrary number of colours ideally of varying lengths?
I tried to do it with gradients (linear and conical) but I have been unable to obtain accurate results.
I suppose the broader question is can I somehow have different pen colours when painting an arc? Note that the arc can be a half circle, a full circle or anything in between.
The colours are to be distributed using percentages. Each colour is a fraction of the arc's length. But I am content with a solution where all colours are equally spaced.
A possible solution is to paint the arc in parts:
from PyQt5 import QtCore, QtGui, QtWidgets
class MainWindow(QtWidgets.QMainWindow):
def __init__(self):
super(MainWindow, self).__init__()
w = QtWidgets.QWidget()
layout = QtWidgets.QVBoxLayout()
w.setLayout(layout)
self.setCentralWidget(w)
label = QtWidgets.QLabel()
canvas = QtGui.QPixmap(400, 300)
canvas.fill(QtGui.QColor("white"))
label.setPixmap(canvas)
layout.addWidget(label)
def paint_label():
painter = QtGui.QPainter(label.pixmap())
painter.setRenderHint(QtGui.QPainter.Antialiasing)
r = QtCore.QRect(0, 0, 100, 100)
delta_angle = -180 * 16
start_angle = 90 * 16
values = (1, 2, 3, 4)
colors = (
QtGui.QColor("red"),
QtGui.QColor("blue"),
QtGui.QColor("green"),
QtGui.QColor("yellow"),
)
sum_of_values = sum(values)
for value, color in zip(values, colors):
end_angle = start_angle + int((value/sum_of_values) * delta_angle)
painter.setPen(color)
painter.drawArc(r, start_angle, end_angle - start_angle)
start_angle = end_angle
painter.end()
paint_label()
self.show()
def main():
app = QtWidgets.QApplication([])
window = MainWindow()
app.exec_()
if __name__ == "__main__":
main()
The solution provided by eyllanesc is perfectly fine, but I wanted to show the possibility of achieving the same result using a conical gradient instead of drawing single arcs.
Since we want actual arcs to be drawn, the trick is to use "ranges" of colors with very narrow margins.
For example, to get a conical gradient that is half red and half blue, we'll use something like this:
gradient.setColorAt(.5, QtCore.Qt.red)
# set the next color with a stop very close to the previous
gradient.setColorAt(.500001, QtCore.Qt.blue)
I prepared an example with a small interface to test its possibilities out.
class MainWindow(QtWidgets.QMainWindow):
def __init__(self):
super(MainWindow, self).__init__()
w = QtWidgets.QWidget()
layout = QtWidgets.QVBoxLayout()
w.setLayout(layout)
self.setCentralWidget(w)
panelLayout = QtWidgets.QHBoxLayout()
layout.addLayout(panelLayout)
panelLayout.addWidget(QtWidgets.QLabel('Start'))
self.startSpin = QtWidgets.QSpinBox(maximum=360, suffix='°')
self.startSpin.setValue(90)
panelLayout.addWidget(self.startSpin)
panelLayout.addWidget(QtWidgets.QLabel('Extent'))
self.extentSpin = QtWidgets.QSpinBox(maximum=360, suffix='°')
self.extentSpin.setValue(180)
panelLayout.addWidget(self.extentSpin)
panelLayout.addWidget(QtWidgets.QLabel('Width'))
self.penSpin = QtWidgets.QSpinBox(minimum=1, maximum=20, suffix='px')
self.penSpin.setValue(3)
panelLayout.addWidget(self.penSpin)
self.startSpin.valueChanged.connect(self.updateCanvas)
self.extentSpin.valueChanged.connect(self.updateCanvas)
self.penSpin.valueChanged.connect(self.updateCanvas)
self.colors = []
self.colorSpins = []
colorLayout = QtWidgets.QHBoxLayout()
layout.addLayout(colorLayout)
for color in ('red', 'green', 'blue', 'yellow'):
colorLayout.addWidget(QtWidgets.QLabel(color))
self.colors.append(QtGui.QColor(color))
colorSpin = QtWidgets.QSpinBox(minimum=1, maximum=50, value=25)
colorLayout.addWidget(colorSpin)
colorSpin.valueChanged.connect(self.updateCanvas)
self.colorSpins.append(colorSpin)
self.label = QtWidgets.QLabel()
canvas = QtGui.QPixmap(400, 300)
self.label.setPixmap(canvas)
layout.addWidget(self.label)
self.updateCanvas()
self.show()
def updateCanvas(self):
pm = QtGui.QPixmap(self.label.pixmap().size())
pm.fill(QtCore.Qt.transparent)
painter = QtGui.QPainter(pm)
painter.setRenderHint(QtGui.QPainter.Antialiasing)
painter.translate(.5, .5)
sizes = [spin.value() for spin in self.colorSpins]
total = sum(sizes)
extent = self.extentSpin.value() / 360
grad = QtGui.QConicalGradient(50, 50, self.startSpin.value())
gradPos = 1
# set colors starting from stop 1.0 to (1.0 - extent), since
# conical gradients are always counter-clockwise and the actual arc
# is negative, so it is drawn clockwise
for i, (size, color) in enumerate(zip(sizes, self.colors)):
grad.setColorAt(gradPos, color)
gradPos -= size / total * extent
if i < len(self.colors) - 1:
# extend the color right next to the next value
grad.setColorAt(gradPos + .000001, color)
if extent != 1:
# ensure that the first color is not painted at the edget of the
# last due to antialiasing
grad.setColorAt(0, self.colors[0])
grad.setColorAt(1 - extent, self.colors[-1])
offset = self.penSpin.maximum()
pen = QtGui.QPen(grad, self.penSpin.value(), cap=QtCore.Qt.FlatCap)
painter.setPen(pen)
# move the brush origin so that the conical gradient correctly centered
# in the middle of the ellipse
painter.setBrushOrigin(offset, offset)
painter.drawArc(offset, offset, 100, 100, self.startSpin.value() * 16, -self.extentSpin.value() * 16)
painter.end()
self.label.setPixmap(pm)

Categories