Making Highly Customized, Hoverable, Overlappable, Widgets

Question

I want to up my game in UI design using PyQt5. I feel like the resources for UI customization in PyQt5 are not easy to find. It is possible to try and make personalized widget, but the overall method seems non-standardized.

I need to build an arrow widget that is hoverable, overlappable with other widgets and highly customized. As I read in this tutorial and some other posts, it possible to do exactly what you need using paintEvent. Thus that is what I tried, but overall, I feel like the method is quite messy, and I'd like some guidelines on building complex Customized, general widget. Here's what I have:

Customized Shape: I built my code based on this

Hoverable property: I read everywhere that modifying the projects styleSheet is usually the way to go, especially if you want to make your Widget general and adapt to colors, the problem is that I wasn't able to find how to use properly self.palette to fetch the current colors of the QApplication styleSheet. I feel like i's have to maybe use enterEvent and leaveEvent, but I tried to redraw the whole widget with a painter in those functions and it said

QPainter::begin: Painter already active
QWidget::paintEngine: Should no longer be called
QPainter::begin: Paint device returned engine == 0, type: 1
QPainter::setRenderHint: Painter must be active to set rendering hints

Overlappable Property: I found a previous post which seemed to have found a solution: create a second widget that is children of the main widget, in order to be able to move the children around. I tried that but it seems that it doesn't want to move, no matter the position I give the widget.

Here is my code:

import sys
from PyQt5.QtWidgets import QWidget, QHBoxLayout, QGraphicsDropShadowEffect, QApplication, QFrame, QPushButton
from PyQt5.QtCore import Qt, QPoint, QLine
from PyQt5.QtGui import QPainter, QPen, QColor, QPalette


class MainWidget(QWidget):
    def __init__(self):
        super(MainWidget, self).__init__()
        self.resize(500, 500)
        self.layout = QHBoxLayout()
        self.setLayout(self.layout)
        self.myPush = QPushButton()
        self.layout.addWidget(self.myPush)

        self.arrow = ArrowWidget(self)
        position = QPoint(-40, 0)

        self.layout.addWidget(self.arrow)
        self.arrow.move(position)


class ArrowWidget(QWidget):
    def __init__(self, parent=None):
        super(ArrowWidget, self).__init__(parent)
        self.setWindowFlag(Qt.FramelessWindowHint)
        self.setAttribute(Qt.WA_TranslucentBackground)
        self.w = 200
        self.h = 200
        self.blurRadius = 20
        self.xO = 0
        self.yO = 20
        self.resize(self.w, self.h)
        self.layout = QHBoxLayout()
        # myFrame = QFrame()
        # self.layout.addWidget(myFrame)
        self.setLayout(self.layout)
        self.setStyleSheet("QWidget:hover{border-color: rgb(255,0,0);background-color: rgb(255,50,0);}")
        shadow = QGraphicsDropShadowEffect(blurRadius=self.blurRadius, xOffset=self.xO, yOffset=self.yO)
        self.setGraphicsEffect(shadow)

    def paintEvent(self, event):
        painter = QPainter(self)
        painter.setRenderHint(QPainter.Antialiasing)
        painter.begin(self)
        # painter.setBrush(self.palette().window())
        # painter.setPen(QPen(QPalette, 5))

        ok = self.frameGeometry().width()/2-self.blurRadius/2-self.xO/2
        oky = self.frameGeometry().height()/2-self.blurRadius/2-self.yO/2

        painter.drawEllipse(QPoint(self.frameGeometry().width()/2-self.blurRadius/2-self.xO/2, self.frameGeometry().height()/2-self.blurRadius/2-self.yO/2), self.w/2-self.blurRadius/2-self.yO/2-self.xO/2, self.h/2-self.blurRadius/2-self.yO/2-self.xO/2)
        painter.drawLines(QLine(ok-25, oky-50, ok+25, oky), QLine(ok+25, oky, ok-25, oky+50))
        painter.end()



if __name__ == '__main__':
    app = QApplication(sys.argv)
    testWidget = MainWidget()
    testWidget.show()
    sys.exit(app.exec_())

If someone could help me make this work and explain along the way to help us better understand the structure of customized widgets and explain a better method that isn't messy like this one, I believe it would be a plus to the beginners like me using PyQt5 as a main Framework for UI making.

Answer 1

There is no "standard" method for custom widgets, but usually paintEvent overriding is required.

There are different issues in your example, I'll try and address to them.

Overlapping

If you want a widget to be "overlappable", it must not be added to a layout. Adding a widget to a layout will mean that it will have its "slot" within the layout, which in turn will try to compute its sizes (based on the widgets it contains); also, normally a layout has only one widget per "layout slot", making it almost impossible to make widget overlap; the QGridLayout is a special case which allows (by code only, not using Designer) to add more widget to the same slot(s), or make some overlap others. Finally, once a widget is part of a layout, it cannot be freely moved nor resized (unless you set a fixedSize).
The only real solution to this is to create the widget with a parent. This will make it possible to use move() and resize(), but only within the boundaries of the parent.

Hovering

While it's true that most widgets can use the :hover selector in the stylesheet, it only works for standard widgets, which do most of their painting by themself (through QStyle functions). About this, while it's possible to do some custom painting with stylesheets, it's generally used for very specific cases, and even in this case there is no easy way to access to the stylesheet properties.
In your case, there's no need to use stylesheets, but just override enterEvent and leaveEvent, set there any color you need for painting and then call self.update() at the end.

Painting

The reason you're getting those warnings is because you are calling begin after declaring the QPainter with the paint device as an argument: once it's created it automatically calls begin with the device argument. Also, it usually is not required to call end(), as it is automatically called when the QPainter is destroyed, which happens when the paintEvent returns since it's a local variable.

Example

I created a small example based on your question. It creates a window with a button and a label within a QGridLayout, and also uses a QFrame set under them (since it's been added first), showing the "overlapping" layout I wrote about before. Then there's your arrow widget, created with the main window as parent, and that can be moved around by clicking on it and dragging it.

import sys
from PyQt5 import QtCore, QtGui, QtWidgets

class ArrowWidget(QtWidgets.QWidget):
    def __init__(self, parent=None):
        super().__init__(parent)
        # since the widget will not be added to a layout, ensure
        # that it has a fixed size (otherwise it'll use QWidget default size)
        self.setFixedSize(200, 200)
        self.blurRadius = 20
        self.xO = 0
        self.yO = 20
        shadow = QtWidgets.QGraphicsDropShadowEffect(blurRadius=self.blurRadius, xOffset=self.xO, yOffset=self.yO)
        self.setGraphicsEffect(shadow)
        # create pen and brush colors for painting
        self.currentPen = self.normalPen = QtGui.QPen(QtCore.Qt.black)
        self.hoverPen = QtGui.QPen(QtCore.Qt.darkGray)
        self.currentBrush = self.normalBrush = QtGui.QColor(QtCore.Qt.transparent)
        self.hoverBrush = QtGui.QColor(128, 192, 192, 128)

    def mousePressEvent(self, event):
        if event.buttons() == QtCore.Qt.LeftButton:
            self.mousePos = event.pos()

    def mouseMoveEvent(self, event):
        # move the widget based on its position and "delta" of the coordinates
        # where it was clicked. Be careful to use button*s* and not button
        # within mouseMoveEvent
        if event.buttons() == QtCore.Qt.LeftButton:
            self.move(self.pos() + event.pos() - self.mousePos)

    def enterEvent(self, event):
        self.currentPen = self.hoverPen
        self.currentBrush = self.hoverBrush
        self.update()

    def leaveEvent(self, event):
        self.currentPen = self.normalPen
        self.currentBrush = self.normalBrush
        self.update()

    def paintEvent(self, event):
        qp = QtGui.QPainter(self)
        qp.setRenderHints(qp.Antialiasing)
        # painting is not based on "pixels", to get accurate results
        # translation of .5 is required, expecially when using 1 pixel lines
        qp.translate(.5, .5)
        # painting rectangle is always 1px smaller than the actual size
        rect = self.rect().adjusted(0, 0, -1, -1)
        qp.setPen(self.currentPen)
        qp.setBrush(self.currentBrush)
        # draw an ellipse smaller than the widget
        qp.drawEllipse(rect.adjusted(25, 25, -25, -25))
        # draw arrow lines based on the center; since a QRect center is a QPoint
        # we can add or subtract another QPoint to get the new positions for
        # top-left, right and bottom left corners
        qp.drawLine(rect.center() + QtCore.QPoint(-25, -50), rect.center() + QtCore.QPoint(25, 0))
        qp.drawLine(rect.center() + QtCore.QPoint(25, 0), rect.center() + QtCore.QPoint(-25, 50))


class MainWidget(QtWidgets.QWidget):
    def __init__(self):
        super().__init__()
        layout = QtWidgets.QGridLayout()
        self.setLayout(layout)
        self.button = QtWidgets.QPushButton('button')
        layout.addWidget(self.button, 0, 0)
        self.label = QtWidgets.QLabel('label')
        self.label.setAlignment(QtCore.Qt.AlignCenter)
        layout.addWidget(self.label, 0, 1)
        # create a frame that uses as much space as possible
        self.frame = QtWidgets.QFrame()
        self.frame.setFrameShape(self.frame.StyledPanel|self.frame.Raised)
        self.frame.setSizePolicy(QtWidgets.QSizePolicy.Expanding, QtWidgets.QSizePolicy.Expanding)
        # add it to the layout, ensuring it spans all rows and columns
        layout.addWidget(self.frame, 0, 0, layout.rowCount(), layout.columnCount())
        # "lower" the frame to the bottom of the widget's stack, otherwise
        # it will be "over" the other widgets, preventing them to receive
        # mouse events
        self.frame.lower()
        self.resize(640, 480)
        # finally, create your widget with a parent, *without* adding to a layout
        self.arrowWidget = ArrowWidget(self)
        # now you can place it wherever you want
        self.arrowWidget.move(220, 140)


if __name__ == '__main__':
    app = QtWidgets.QApplication(sys.argv)
    testWidget = MainWidget()
    testWidget.show()
    sys.exit(app.exec_())