I have made a custom widget similar to QPushbutton or label. I would like to let the user resize the widget when the mouse is over the edge of the widget. How can I do this?
(Note: I am not looking for Splitter window)
An image editing software, you have a dedicated "space" for the image, and the user is free to do anything she/he wants within the boundaries of that space. When a widget is placed within a layout-managed container (as it normally should) that can represent multiple issues. Not only you've to implement the whole mouse interaction to resize the widget, but you also need to notify the possible parent widget(s) about the resizing.
That said, what you're trying to achieve can be done, with some caveats.
The following is a very basic implementation of a standard QWidget that is able to resize itself, while notifying its parent widget(s) about the size hint modifications. Note that this is not complete, and its behavior doesn't correctly respond to mouse movements whenever they happen on the top or left edges of the widget. Moreover, while it (could) correctly resize the parent widget(s) while increasing its size, the resize doesn't happen when shrinking. This can theoretically be achieved by setting a minimumSize() and manually calling adjustSize() but, in order to correctly provide all the possible features required by a similar concept, you'll need to do the whole implementation by yourself.
from PyQt5 import QtCore, QtGui, QtWidgets
Left, Right = 1, 2
Top, Bottom = 4, 8
TopLeft = Top|Left
TopRight = Top|Right
BottomRight = Bottom|Right
BottomLeft = Bottom|Left
class ResizableLabel(QtWidgets.QWidget):
resizeMargin = 4
# note that the Left, Top, Right, Bottom constants cannot be used as class
# attributes if you want to use list comprehension for better performance,
# and that's due to the variable scope behavior on Python 3
sections = [x|y for x in (Left, Right) for y in (Top, Bottom)]
cursors = {
Left: QtCore.Qt.SizeHorCursor,
Top|Left: QtCore.Qt.SizeFDiagCursor,
Top: QtCore.Qt.SizeVerCursor,
Top|Right: QtCore.Qt.SizeBDiagCursor,
Right: QtCore.Qt.SizeHorCursor,
Bottom|Right: QtCore.Qt.SizeFDiagCursor,
Bottom: QtCore.Qt.SizeVerCursor,
Bottom|Left: QtCore.Qt.SizeBDiagCursor,
}
def __init__(self, *args, **kwargs):
super().__init__(*args, **kwargs)
self.startPos = self.section = None
self.rects = {section:QtCore.QRect() for section in self.sections}
# mandatory for cursor updates
self.setMouseTracking(True)
# just for demonstration purposes
background = QtGui.QPixmap(3, 3)
background.fill(QtCore.Qt.transparent)
qp = QtGui.QPainter(background)
pen = QtGui.QPen(QtCore.Qt.darkGray, .5)
qp.setPen(pen)
qp.drawLine(0, 2, 2, 0)
qp.end()
self.background = QtGui.QBrush(background)
def updateCursor(self, pos):
for section, rect in self.rects.items():
if pos in rect:
self.setCursor(self.cursors[section])
self.section = section
return section
self.unsetCursor()
def adjustSize(self):
del self._sizeHint
super().adjustSize()
def minimumSizeHint(self):
try:
return self._sizeHint
except:
return super().minimumSizeHint()
def mousePressEvent(self, event):
if event.button() == QtCore.Qt.LeftButton:
if self.updateCursor(event.pos()):
self.startPos = event.pos()
return
super().mousePressEvent(event)
def mouseMoveEvent(self, event):
if self.startPos is not None:
delta = event.pos() - self.startPos
if self.section & Left:
delta.setX(-delta.x())
elif not self.section & (Left|Right):
delta.setX(0)
if self.section & Top:
delta.setY(-delta.y())
elif not self.section & (Top|Bottom):
delta.setY(0)
newSize = QtCore.QSize(self.width() + delta.x(), self.height() + delta.y())
self._sizeHint = newSize
self.startPos = event.pos()
self.updateGeometry()
elif not event.buttons():
self.updateCursor(event.pos())
super().mouseMoveEvent(event)
self.update()
def mouseReleaseEvent(self, event):
super().mouseReleaseEvent(event)
self.updateCursor(event.pos())
self.startPos = self.section = None
self.setMinimumSize(0, 0)
def resizeEvent(self, event):
super().resizeEvent(event)
outRect = self.rect()
inRect = self.rect().adjusted(self.resizeMargin, self.resizeMargin, -self.resizeMargin, -self.resizeMargin)
self.rects[Left] = QtCore.QRect(outRect.left(), inRect.top(), self.resizeMargin, inRect.height())
self.rects[TopLeft] = QtCore.QRect(outRect.topLeft(), inRect.topLeft())
self.rects[Top] = QtCore.QRect(inRect.left(), outRect.top(), inRect.width(), self.resizeMargin)
self.rects[TopRight] = QtCore.QRect(inRect.right(), outRect.top(), self.resizeMargin, self.resizeMargin)
self.rects[Right] = QtCore.QRect(inRect.right(), self.resizeMargin, self.resizeMargin, inRect.height())
self.rects[BottomRight] = QtCore.QRect(inRect.bottomRight(), outRect.bottomRight())
self.rects[Bottom] = QtCore.QRect(inRect.left(), inRect.bottom(), inRect.width(), self.resizeMargin)
self.rects[BottomLeft] = QtCore.QRect(outRect.bottomLeft(), inRect.bottomLeft()).normalized()
# ---- optional, mostly for demonstration purposes ----
def paintEvent(self, event):
super().paintEvent(event)
qp = QtGui.QPainter(self)
if self.underMouse() and self.section:
qp.save()
qp.setPen(QtCore.Qt.lightGray)
qp.setBrush(self.background)
qp.drawRect(self.rect().adjusted(0, 0, -1, -1))
qp.restore()
qp.drawText(self.rect(), QtCore.Qt.AlignCenter, '{}x{}'.format(self.width(), self.height()))
def enterEvent(self, event):
self.update()
def leaveEvent(self, event):
self.update()
class Test(QtWidgets.QWidget):
def __init__(self):
super().__init__()
layout = QtWidgets.QGridLayout(self)
for row in range(3):
for column in range(3):
if (row, column) == (1, 1):
continue
layout.addWidget(QtWidgets.QPushButton(), row, column)
label = ResizableLabel()
layout.addWidget(label, 1, 1)
if __name__ == '__main__':
import sys
app = QtWidgets.QApplication(sys.argv)
w = Test()
w.show()
sys.exit(app.exec_())
Related
I'm struggling to get the QRubberBand to work with masks. Basically I have a background image and then I have subclassed a QLabelButton. I have attached a mask to the QLabelButton to be used like a button. I want to be able to select the button when I drag out a QRect.
I've got the dragging to work fine and I can click my "button", but when I release, I don't know how to tell it to act only upon the mask of the QLabelButton. Instead it returns the QLabelButton itself and because it takes up the whole window, it is selected anywhere I drag, but in fact I want it to see if it intersects with my mask. I'd appreciate any help and pointers I can get in this matter.
Edit: Here's where I got the great code for being able to move the QRect:
How to get my selection box to move properly using PySide2?
And here's where I got the code to get the QLabel upon release:
https://github.com/hzhaoaf/CTDiagnosis/blob/master/GUI/QRubberBand.py
In resources you will find a background image of Super Mario and his mask.
resources
from maya import OpenMayaUI
import pymel.core as pm
from PySide2 import QtCore, QtGui, QtWidgets
from PySide2.QtGui import QPixmap, QIcon
from shiboken2 import wrapInstance
import urllib
class QLabelButton(QtWidgets.QLabel):
def mouseReleaseEvent(self, ev):
self.emit(QtCore.SIGNAL('clicked()'))
def main_maya_window():
main_window_ptr = OpenMayaUI.MQtUtil.mainWindow()
return wrapInstance(long(main_window_ptr), QtWidgets.QWidget)
class rubberBandUI(QtWidgets.QDialog):
def __init__(self, parent=main_maya_window()):
super(rubberBandUI, self).__init__(parent)
imgRes = [512, 512]
self.setMinimumSize(imgRes[0], imgRes[1])
self.setMaximumSize(imgRes[0], imgRes[1])
# resources
bgPath = r"C://bg.png"
maskPath = r"C://bg_mask.png"
# background image
self.bg = QtWidgets.QLabel('bg', self)
self.bg.setPixmap(QtGui.QPixmap(bgPath))
# mask image
self.mask = QLabelButton('mask', self)
self.mask.setGeometry(0, 0, imgRes[0], imgRes[1])
self.mask.setAlignment(QtCore.Qt.AlignCenter)
self.mask.setMask(maskPath)
self.connect(self.mask, QtCore.SIGNAL('clicked()'), lambda: self.onClick(self.mask) )
self.mask.setStyleSheet("""QLabel:hover{background-color: rgba(64, 128, 255, 180); border: 1px solid blue;}""")
# create rubber band selection
self.rubberBand = QtWidgets.QRubberBand(QtWidgets.QRubberBand.Rectangle, self)
# Create variables that will be handling the moving logic.
self.sourceGeo = None
self.altPoint = None
self.delta = None
def mousePressEvent(self, event):
if event.button() == QtCore.Qt.LeftButton:
self.origin = event.pos()
self.drag_selection = QtCore.QRect(self.origin, QtCore.QSize())
self.rubberBand.setGeometry(self.drag_selection)
self.rubberBand.show()
# Must implement this event to detect when alt gets released
def keyReleaseEvent(self, event):
if event.key() == QtCore.Qt.Key_Alt:
if self.delta is not None:
# This is important: Add delta to origin so that it shifts it over.
# This is needed if the user repeatedly pressed alt to move it, otherwise it would pop.
self.origin += self.delta
# Reset the rest of the variables.
self.sourceGeo = None
self.altPoint = None
self.delta = None
def mouseMoveEvent(self, event):
if event.modifiers() == QtCore.Qt.AltModifier:
# Get the point where alt is pressed and the selection's current geometry.
if self.altPoint is None:
self.sourceGeo = self.rubberBand.geometry()
self.altPoint = event.pos()
self.delta = event.pos() - self.altPoint # Calculate difference from the point alt was pressed to where the cursor is now.
newGeo = QtCore.QRect(self.sourceGeo) # Create a copy
newGeo.moveTopLeft(self.sourceGeo.topLeft() + self.delta) # Apply the delta onto the geometry to move it.
self.rubberBand.setGeometry(newGeo) # Move the selection!
else:
self.drag_selection = QtCore.QRect(self.origin, event.pos()).normalized()
self.rubberBand.setGeometry(self.drag_selection)
def mouseReleaseEvent(self, event):
if self.rubberBand.isVisible():
self.rubberBand.hide()
selected = []
rect = self.rubberBand.geometry()
#self.cropImage(rect)
for child in self.findChildren(QLabelButton):
if rect.intersects(child.geometry()):
selected.append(child)
print 'Selection Contains:\n ',
if selected:
print ' '.join(
'Button: %s\n' % child.text() for child in selected)
else:
print ' Nothing\n'
# label click function to print its name
def onClick(self, button):
print '%s clicked' % button.text()
if __name__ == '__main__':
app = QtWidgets.QApplication.instance()
if app == None:
app = QtWidgets.QApplication([])
win = rubberBandUI()
#Set WA_DeleteOnClose attribute
win.setAttribute(QtCore.Qt.WA_DeleteOnClose)
win.show()
app.exec_()
sys.exit()
Please consider the following code:
from PyQt5.QtWidgets import *
from PyQt5.QtGui import *
from PyQt5.QtCore import *
class Gallery(QScrollArea):
def __init__(self, *args, **kwargs):
super().__init__(*args, **kwargs)
self.setFixedWidth(175)
self.setSizePolicy(QSizePolicy.Ignored, QSizePolicy.Expanding)
self.setVerticalScrollBarPolicy(Qt.ScrollBarAlwaysOff)
self.setHorizontalScrollBarPolicy(Qt.ScrollBarAlwaysOff)
# Set widget and layout
self._scroll_widget = QWidget()
self._layout = QVBoxLayout()
self._layout.setContentsMargins(0, 0, 0, 0)
self._layout.setSpacing(25)
self._scroll_widget.setLayout(self._layout)
self.setWidget(self._scroll_widget)
self.setWidgetResizable(True)
# Stretch
self._layout.addStretch(1) # Stretch above widgets
self._layout.addStretch(1) # Stretch below widgets
# Initialize ---------------------------------|
for _ in range(10):
self.add_item()
def resizeEvent(self, event: QResizeEvent) -> None:
super().resizeEvent(event)
# Calculate Margins --------------------|
children = self._scroll_widget.findChildren(QLabel)
first_widget = children[0]
last_widget = children[-1]
self._layout.setContentsMargins(
0,
int(event.size().height() / 2 - first_widget.size().height() / 2),
0,
int(event.size().height() / 2 - last_widget.size().height() / 2)
)
def add_item(self) -> None:
widget = QLabel()
widget.setStyleSheet('background: #22FF88')
widget.setFixedSize(90, 125)
child_count = len(
self._scroll_widget.findChildren(QLabel)
)
self._layout.insertWidget(1 + child_count, widget,
alignment=Qt.AlignCenter)
if __name__ == '__main__':
app = QApplication([])
window = Gallery()
window.show()
app.exec()
Currently, the margins of the layout are dynamically set, so that, no matter the size of the window, the first and last item are always vertically centered:
What I want to achieve now is that whenever I scroll (either by mousewheel or with the arrow-keys, as the scrollbars are disabled) the next widget should take the position in the vertical center, i.e. I want to switch the scrolling mode from a per pixel to a per-widget-basis, so that no matter how far I scroll, I will never land between two widgets.
How can this be done?
I found that QAbstractItemView provides the option the switch the ScrollMode to ScrollPerItem, though I'm not sure if that's what I need because I was a bit overwhelmed when trying to subclass QAbstractItemView.
Edit:
This shows the delay I noticed after adapting #musicamante's answer:
It's not really disrupting, but I don't see it in larger projects, so I suppose something is not working as it should.
Since most of the features QScrollArea provides are actually going to be ignored, subclassing from it doesn't give lots of benefits. On the contrary, it could make things much more complex.
Also, using a layout isn't very useful: the "container" of the widget is not constrained by the scroll area, and all features for size hinting and resizing are almost useless in this case.
A solution could be to just set all items as children of the "scroll area", that could be even a basic QWidget or QFrame, but for better styling support I chose to use a QAbstractScrollArea.
The trick is to compute the correct position of each child widget, based on its geometry. Note that I'm assuming all widgets have a fixed size, otherwise you might need to use their sizeHint, minimumSizeHint or minimum sizes, and check for their size policies.
Here's a possible implementation (I changed the item creation in order to correctly show the result):
from random import randrange
class Gallery(QAbstractScrollArea):
def __init__(self, *args, **kwargs):
super().__init__(*args, **kwargs)
self.setFixedWidth(175)
self.items = []
self.currentIndex = -1
for _ in range(10):
widget = QLabel(str(len(self.items) + 1),
self, alignment=Qt.AlignCenter)
widget.setStyleSheet('background: #{:02x}{:02x}{:02x}'.format(
randrange(255), randrange(255), randrange(255)))
widget.setFixedSize(randrange(60, 100), randrange(50, 200))
self.addItem(widget)
def addItem(self, widget):
self.insertItem(len(self.items), widget)
def insertItem(self, index, widget):
widget.setParent(self.viewport())
widget.show()
self.items.insert(index, widget)
if len(self.items) == 1:
self.currentIndex = 0
self.updateGeometry()
def setCurrentIndex(self, index):
if not self.items:
self.currentIndex = -1
return
self.currentIndex = max(0, min(index, len(self.items) - 1))
self.updateGeometry()
def stepBy(self, step):
self.setCurrentIndex(self.currentIndex + step)
def updateGeometry(self):
super().updateGeometry()
if not self.items:
return
rects = []
y = 0
for i, widget in enumerate(self.items):
rect = widget.rect()
rect.moveTop(y)
rects.append(rect)
if i == self.currentIndex:
centerY = rect.center().y()
y = rect.bottom() + 25
centerY -= self.height() / 2
centerX = self.width() / 2
for widget, rect in zip(self.items, rects):
widget.setGeometry(rect.translated(centerX - rect.width() / 2, -centerY))
def sizeHint(self):
return QSize(175, 400)
def resizeEvent(self, event: QResizeEvent):
self.updateGeometry()
def wheelEvent(self, event):
if event.angleDelta().y() < 0:
self.stepBy(1)
else:
self.stepBy(-1)
I have a PyQt application where I have drawn points using QPainter over a QGraphicsScene and made a drag n drop sort of a thing.
Now, there is one issue which I'm facing and that is I'm unable to drag those points at the extreme corner and edges of QGraphicsScene. It always seems as if some amount of padding or space is left.
How do I get round this problem?
Code:
from collections import deque
from datetime import datetime
import sys
from threading import Thread
import time
import numpy as np
import cv2
from PyQt4 import QtCore, QtGui
class CameraWidget(QtGui.QGraphicsView):
"""Independent camera feed
Uses threading to grab IP camera frames in the background
#param width - Width of the video frame
#param height - Height of the video frame
#param stream_link - IP/RTSP/Webcam link
#param aspect_ratio - Whether to maintain frame aspect ratio or force into fraame
"""
def __init__(self, width, height, stream_link=0, aspect_ratio=False, parent=None, deque_size=1):
super(CameraWidget, self).__init__(parent)
# Initialize deque used to store frames read from the stream
self.deque = deque(maxlen=deque_size)
self.screen_width = width
self.screen_height = height
self.maintain_aspect_ratio = aspect_ratio
self.camera_stream_link = stream_link
# Flag to check if camera is valid/working
self.online = False
self.capture = None
self.setScene(QtGui.QGraphicsScene(self))
self._pixmap_item = self.scene().addPixmap(QtGui.QPixmap())
canvas = Canvas()
lay = QtGui.QVBoxLayout()
lay.addWidget(canvas)
self.setLayout(lay)
self.load_network_stream()
# Start background frame grabbing
self.get_frame_thread = Thread(target=self.get_frame, args=())
self.get_frame_thread.daemon = True
self.get_frame_thread.start()
# Periodically set video frame to display
self.timer = QtCore.QTimer()
self.timer.timeout.connect(self.set_frame)
self.timer.start(0.5)
print("Started camera: {}".format(self.camera_stream_link))
def load_network_stream(self):
"""Verifies stream link and open new stream if valid"""
def load_network_stream_thread():
if self.verify_network_stream(self.camera_stream_link):
self.capture = cv2.VideoCapture(self.camera_stream_link)
self.online = True
self.load_stream_thread = Thread(target=load_network_stream_thread, args=())
self.load_stream_thread.daemon = True
self.load_stream_thread.start()
def verify_network_stream(self, link):
"""Attempts to receive a frame from given link"""
cap = cv2.VideoCapture(link)
if not cap.isOpened():
return False
cap.release()
return True
def get_frame(self):
"""Reads frame, resizes, and converts image to pixmap"""
while True:
try:
if self.capture.isOpened() and self.online:
# Read next frame from stream and insert into deque
status, frame = self.capture.read()
if status:
self.deque.append(frame)
else:
self.capture.release()
self.online = False
else:
# Attempt to reconnect
print("attempting to reconnect", self.camera_stream_link)
self.load_network_stream()
self.spin(2)
self.spin(0.001)
except AttributeError:
pass
def spin(self, seconds):
"""Pause for set amount of seconds, replaces time.sleep so program doesnt stall"""
time_end = time.time() + seconds
while time.time() < time_end:
QtGui.QApplication.processEvents()
def set_frame(self):
"""Sets pixmap image to video frame"""
if not self.online:
self.spin(1)
return
if self.deque and self.online:
# Grab latest frame
frame = self.deque[-1]
frame = cv2.cvtColor(frame, cv2.COLOR_BGR2RGB)
h, w, ch = frame.shape
bytesPerLine = ch * w
# Convert to pixmap and set to video frame
image = QtGui.QImage(frame, w, h, bytesPerLine, QtGui.QImage.Format_RGB888)
pixmap = QtGui.QPixmap.fromImage(image.copy())
self._pixmap_item.setPixmap(pixmap)
self.fix_size()
def resizeEvent(self, event):
self.fix_size()
super().resizeEvent(event)
def fix_size(self):
self.fitInView(
self._pixmap_item,
QtCore.Qt.KeepAspectRatio
if self.maintain_aspect_ratio
else QtCore.Qt.IgnoreAspectRatio,
)
class Window(QtGui.QWidget):
def __init__(self, cam=None, parent=None):
super(Window, self).__init__(parent)
self.showMaximized()
self.screen_width = self.width()
self.screen_height = self.height()
# Create camera widget
print("Creating Camera Widget...")
self.camera = CameraWidget(self.screen_width, self.screen_height, cam)
lay = QtGui.QVBoxLayout(self)
lay.setContentsMargins(0, 0, 0, 0)
lay.setSpacing(0)
lay.addWidget(self.camera)
class Canvas(QtGui.QWidget):
DELTA = 200 #for the minimum distance
def __init__(self, parent=None):
super(Canvas, self).__init__(parent)
self.draggin_idx = -1
self.points = np.array([[x[0],x[1]] for x in [[100,200], [200,200], [100,400], [200,400]]], dtype=np.float)
self.id = None
self.points_dict = {}
for i, x in enumerate(self.points):
point=(int(x[0]),int(x[1]))
self.points_dict[i] = point
def paintEvent(self, e):
qp = QtGui.QPainter()
qp.begin(self)
self.drawPoints(qp)
self.drawLines(qp)
qp.end()
def drawPoints(self, qp):
pen = QtGui.QPen()
pen.setWidth(10)
pen.setColor(QtGui.QColor('red'))
qp.setPen(pen)
for x,y in self.points:
qp.drawPoint(x,y)
def drawLines(self, qp):
qp.setPen(QtCore.Qt.red)
qp.drawLine(self.points_dict[0][0], self.points_dict[0][1], self.points_dict[1][0], self.points_dict[1][1])
qp.drawLine(self.points_dict[1][0], self.points_dict[1][1], self.points_dict[3][0], self.points_dict[3][1])
qp.drawLine(self.points_dict[3][0], self.points_dict[3][1], self.points_dict[2][0], self.points_dict[2][1])
qp.drawLine(self.points_dict[2][0], self.points_dict[2][1], self.points_dict[0][0], self.points_dict[0][1])
def _get_point(self, evt):
pos = evt.pos()
if pos.x() < 0:
pos.setX(0)
elif pos.x() > self.width():
pos.setX(self.width())
if pos.y() < 0:
pos.setY(0)
elif pos.y() > self.height():
pos.setY(self.height())
return np.array([pos.x(), pos.y()])
#get the click coordinates
def mousePressEvent(self, evt):
if evt.button() == QtCore.Qt.LeftButton and self.draggin_idx == -1:
point = self._get_point(evt)
int_point = (int(point[0]), int(point[1]))
min_dist = ((int_point[0]-self.points_dict[0][0])**2 + (int_point[1]-self.points_dict[0][1])**2)**0.5
for i, x in enumerate(list(self.points_dict.values())):
distance = ((int_point[0]-x[0])**2 + (int_point[1]-x[1])**2)**0.5
if min_dist >= distance:
min_dist = distance
self.id = i
#dist will hold the square distance from the click to the points
dist = self.points - point
dist = dist[:,0]**2 + dist[:,1]**2
dist[dist>self.DELTA] = np.inf #obviate the distances above DELTA
if dist.min() < np.inf:
self.draggin_idx = dist.argmin()
def mouseMoveEvent(self, evt):
if self.draggin_idx != -1:
point = self._get_point(evt)
self.points[self.draggin_idx] = point
self.update()
def mouseReleaseEvent(self, evt):
if evt.button() == QtCore.Qt.LeftButton and self.draggin_idx != -1:
point = self._get_point(evt)
int_point = (int(point[0]), int(point[1]))
self.points_dict[self.id] = int_point
self.points[self.draggin_idx] = point
self.draggin_idx = -1
self.update()
camera = 0
if __name__ == "__main__":
app = QtGui.QApplication([])
win = Window(camera)
sys.exit(app.exec_())
Edit:
I've one more requirement.
The mousePressEvent and mouseReleaseEvent in my Canvas class gives me coordinates w.r.t. my monitor resolution, instead I want it w.r.t. QGraphicsView. Say e.g. my screen_resolution is 1920x1080 and the size of my QGraphicsView is 640x480 then I should get points in accordance with 640x480.
The simplest solution would be to add lay.setContentsMargins(0, 0, 0, 0) for the layout of the graphics view:
class CameraWidget(QtGui.QGraphicsView):
def __init__(self, width, height, stream_link=0, aspect_ratio=False, parent=None, deque_size=1):
# ...
canvas = Canvas()
lay = QtGui.QVBoxLayout()
lay.addWidget(canvas)
self.setLayout(lay)
lay.setContentsMargins(0, 0, 0, 0)
# ...
But consider that doing all this is not suggested.
First of all, you don't need a layout for a single widget, as you could just create the widget with the view as a parent and then resize it in the resizeEvent:
# ...
self.canvas = Canvas(self)
def resizeEvent(self, event):
self.fix_size()
super().resizeEvent(event)
self.canvas.resize(self.size())
Widgets like QGraphicsView should not have a layout set, it's unsupported and may lead to unwanted behavior or even bugs under certain conditions.
In any case, it doesn't make a lot of sense to add a widget on top of a QGraphicsView if that widget is used for painting and mouse interaction: QGraphicsView already provides better implementation for that by using QGraphicsRectItem or QGraphicsLineItem.
And, even if it weren't the case, custom drawing over a graphics view should be done in its drawForeground() implementation.
I would like to have a QTabBar with customised painting in the paintEvent(self,event) method, whilst maintaining the moving tabs animations / mechanics. I posted a question the other day about something similar, but it wasn't worded too well so I have heavily simplified the question with the following code:
from PyQt5.QtCore import *
from PyQt5.QtGui import *
from PyQt5.QtWidgets import *
from PyQt5.QtTest import QTest
import sys
class MainWindow(QMainWindow):
def __init__(self,parent=None,*args,**kwargs):
QMainWindow.__init__(self,parent,*args,**kwargs)
self.tabs = QTabWidget(self)
self.tabs.setTabBar(TabBar(self.tabs))
self.tabs.setMovable(True)
for color in ["red","orange","yellow","lime","green","cyan","blue","purple","violet","magenta"]:
title = color
widget = QWidget(styleSheet="background-color:%s" % color)
pixmap = QPixmap(8,8)
pixmap.fill(QColor(color))
icon = QIcon(pixmap)
self.tabs.addTab(widget,icon,title)
self.setCentralWidget(self.tabs)
self.showMaximized()
class TabBar(QTabBar):
def __init__(self,parent,*args,**kwargs):
QTabBar.__init__(self,parent,*args,**kwargs)
def paintEvent(self,event):
painter = QStylePainter(self)
option = QStyleOptionTab()
for i in range(self.count()):
self.initStyleOption(option,i)
#Customise 'option' here
painter.drawControl(QStyle.CE_TabBarTab,option)
def tabSizeHint(self,index):
return QSize(112,48)
def exceptHook(e,v,t):
sys.__excepthook__(e,v,t)
if __name__ == "__main__":
sys.excepthook = exceptHook
application = QApplication(sys.argv)
mainwindow = MainWindow()
application.exec_()
there are some clear problems:
Dragging the tab to 'slide' it in the QTabBar is not smooth (it doens't glide) - it jumps to the next index.
The background tabs (non-selected tabs) don't glide into place once displaced - they jump into position.
When the tab is slid to the end of the tab bar (past the most right tab) and then let go of it doesn't glide back to the last index - it jumps there.
When sliding a tab, it stays in its original place and at the mouse cursor (in its dragging position) at the same time, and only when the mouse is released does the tab only show at the correct place (up until then it is also showing at the index it is originally from).
How can I modify the painting of a QTabBar with a QStyleOptionTab whilst maintaining all of the moving mechanics / animations of the tabs?
While it might seem a slightly simple widget, QTabBar is not, at least if you want to provide all of its features.
If you closely look at its source code, you'll find out that within the mouseMoveEvent() a private QMovableTabWidget is created whenever the drag distance is wide enough. That QWidget is a child of QTabBar that shows a QPixmap grab of the "moving" tab using the tab style option and following the mouse movements, while at the same moment that tab becomes invisible.
While your implementation might seem reasonable (note that I'm also referring to your original, now deleted, question), there are some important issues:
it doesn't account for the above "moving" child widget (in fact, with your code I can still see the original tab, even if that is that moving widget that's not actually moving since no call to the base implementation of mouseMoveEvent() is called);
it doesn't actually tabs;
it doesn't correctly process mouse events;
This is a complete implementation partially based on the C++ sources (I've tested it even with vertical tabs, and it seems to behave as it should):
class TabBar(QTabBar):
class MovingTab(QWidget):
'''
A private QWidget that paints the current moving tab
'''
def setPixmap(self, pixmap):
self.pixmap = pixmap
self.update()
def paintEvent(self, event):
qp = QPainter(self)
qp.drawPixmap(0, 0, self.pixmap)
def __init__(self,parent, *args, **kwargs):
QTabBar.__init__(self,parent, *args, **kwargs)
self.movingTab = None
self.isMoving = False
self.animations = {}
self.pressedIndex = -1
def isVertical(self):
return self.shape() in (
self.RoundedWest,
self.RoundedEast,
self.TriangularWest,
self.TriangularEast)
def createAnimation(self, start, stop):
animation = QVariantAnimation()
animation.setStartValue(start)
animation.setEndValue(stop)
animation.setEasingCurve(QEasingCurve.InOutQuad)
def removeAni():
for k, v in self.animations.items():
if v == animation:
self.animations.pop(k)
animation.deleteLater()
break
animation.finished.connect(removeAni)
animation.valueChanged.connect(self.update)
animation.start()
return animation
def layoutTab(self, overIndex):
oldIndex = self.pressedIndex
self.pressedIndex = overIndex
if overIndex in self.animations:
# if the animation exists, move its key to the swapped index value
self.animations[oldIndex] = self.animations.pop(overIndex)
else:
start = self.tabRect(overIndex).topLeft()
stop = self.tabRect(oldIndex).topLeft()
self.animations[oldIndex] = self.createAnimation(start, stop)
self.moveTab(oldIndex, overIndex)
def finishedMovingTab(self):
self.movingTab.deleteLater()
self.movingTab = None
self.pressedIndex = -1
self.update()
# reimplemented functions
def tabSizeHint(self, i):
return QSize(112, 48)
def mousePressEvent(self, event):
super().mousePressEvent(event)
if event.button() == Qt.LeftButton:
self.pressedIndex = self.tabAt(event.pos())
if self.pressedIndex < 0:
return
self.startPos = event.pos()
def mouseMoveEvent(self,event):
if not event.buttons() & Qt.LeftButton or self.pressedIndex < 0:
super().mouseMoveEvent(event)
else:
delta = event.pos() - self.startPos
if not self.isMoving and delta.manhattanLength() < QApplication.startDragDistance():
# ignore the movement as it's too small to be considered a drag
return
if not self.movingTab:
# create a private widget that appears as the current (moving) tab
tabRect = self.tabRect(self.pressedIndex)
overlap = self.style().pixelMetric(
QStyle.PM_TabBarTabOverlap, None, self)
tabRect.adjust(-overlap, 0, overlap, 0)
pm = QPixmap(tabRect.size())
pm.fill(Qt.transparent)
qp = QStylePainter(pm, self)
opt = QStyleOptionTab()
self.initStyleOption(opt, self.pressedIndex)
if self.isVertical():
opt.rect.moveTopLeft(QPoint(0, overlap))
else:
opt.rect.moveTopLeft(QPoint(overlap, 0))
opt.position = opt.OnlyOneTab
qp.drawControl(QStyle.CE_TabBarTab, opt)
qp.end()
self.movingTab = self.MovingTab(self)
self.movingTab.setPixmap(pm)
self.movingTab.setGeometry(tabRect)
self.movingTab.show()
self.isMoving = True
self.startPos = event.pos()
isVertical = self.isVertical()
startRect = self.tabRect(self.pressedIndex)
if isVertical:
delta = delta.y()
translate = QPoint(0, delta)
startRect.moveTop(startRect.y() + delta)
else:
delta = delta.x()
translate = QPoint(delta, 0)
startRect.moveLeft(startRect.x() + delta)
movingRect = self.movingTab.geometry()
movingRect.translate(translate)
self.movingTab.setGeometry(movingRect)
if delta < 0:
overIndex = self.tabAt(startRect.topLeft())
else:
if isVertical:
overIndex = self.tabAt(startRect.bottomLeft())
else:
overIndex = self.tabAt(startRect.topRight())
if overIndex < 0:
return
# if the target tab is valid, move the current whenever its position
# is over the half of its size
overRect = self.tabRect(overIndex)
if isVertical:
if ((overIndex < self.pressedIndex and movingRect.top() < overRect.center().y()) or
(overIndex > self.pressedIndex and movingRect.bottom() > overRect.center().y())):
self.layoutTab(overIndex)
elif ((overIndex < self.pressedIndex and movingRect.left() < overRect.center().x()) or
(overIndex > self.pressedIndex and movingRect.right() > overRect.center().x())):
self.layoutTab(overIndex)
def mouseReleaseEvent(self,event):
super().mouseReleaseEvent(event)
if self.movingTab:
if self.pressedIndex > 0:
animation = self.createAnimation(
self.movingTab.geometry().topLeft(),
self.tabRect(self.pressedIndex).topLeft()
)
# restore the position faster than the default 250ms
animation.setDuration(80)
animation.finished.connect(self.finishedMovingTab)
animation.valueChanged.connect(self.movingTab.move)
else:
self.finishedMovingTab()
else:
self.pressedIndex = -1
self.isMoving = False
self.update()
def paintEvent(self, event):
if self.pressedIndex < 0:
super().paintEvent(event)
return
painter = QStylePainter(self)
tabOption = QStyleOptionTab()
for i in range(self.count()):
if i == self.pressedIndex and self.isMoving:
continue
self.initStyleOption(tabOption, i)
if i in self.animations:
tabOption.rect.moveTopLeft(self.animations[i].currentValue())
painter.drawControl(QStyle.CE_TabBarTab, tabOption)
I strongly suggest you to carefully read and try to understand the above code (along with the source code), as I didn't comment everything I've done, and it's very important to understand what's happening if you really need to do further subclassing in the future.
Update
If you need to alter the appearance of the dragged tab while moving it, you need to update its pixmap. You can just store the QStyleOptionTab when you create it, and then update when necessary. In the following example the WindowText (note that QPalette.Foreground is obsolete) color is changed whenever the index of the tab is changed:
def mouseMoveEvent(self,event):
# ...
if not self.movingTab:
# ...
self.movingOption = opt
def layoutTab(self, overIndex):
# ...
self.moveTab(oldIndex, overIndex)
pm = QPixmap(self.movingTab.pixmap.size())
pm.fill(Qt.transparent)
qp = QStylePainter(pm, self)
self.movingOption.palette.setColor(QPalette.WindowText, <someColor>)
qp.drawControl(QStyle.CE_TabBarTab, self.movingOption)
qp.end()
self.movingTab.setPixmap(pm)
Another small suggestion: while you can obviously use the indentation style you like, when sharing your code on public spaces like StackOverflow it's always better to stick to common conventions, so I suggest you to always provide your code with 4-spaces indentations; also, remember that there should always be a space after each comma separated variable, as it dramatically improves readability.
I am trying to build a python class around QGraphicsRectItem (PySide or PyQt4) that provides mouse interaction through hover-overs, is movable, and re-sizable. I have pretty much everything working except:
For some reason, it seems as if the mouse hover area is not changing when the item is re-sized or moved. I need help solving this issue.
Maybe the problem is caused by inverting the y axis on the QGraphicsView:
QGraphicsView.scale(1,-1)
QGraphicsRectItem class:
class BoxResizable(QtGui.QGraphicsRectItem):
def __init__(self, rect, parent = None, scene = None):
QtGui.QGraphicsRectItem.__init__(self, rect, parent, scene)
self.setZValue(1000)
self._rect = rect
self._scene = scene
self.mouseOver = False
self.resizeHandleSize = 4.0
self.mousePressPos = None
self.mouseMovePos = None
self.mouseIsPressed = False
self.setFlags(QtGui.QGraphicsItem.ItemIsSelectable|QtGui.QGraphicsItem.ItemIsFocusable)
self.setAcceptsHoverEvents(True)
self.updateResizeHandles()
def hoverEnterEvent(self, event):
self.updateResizeHandles()
self.mouseOver = True
self.prepareGeometryChange()
def hoverLeaveEvent(self, event):
self.mouseOver = False
self.prepareGeometryChange()
def hoverMoveEvent(self, event):
if self.topLeft.contains(event.scenePos()) or self.bottomRight.contains(event.scenePos()):
self.setCursor(QtCore.Qt.SizeFDiagCursor)
elif self.topRight.contains(event.scenePos()) or self.bottomLeft.contains(event.scenePos()):
self.setCursor(QtCore.Qt.SizeBDiagCursor)
else:
self.setCursor(QtCore.Qt.SizeAllCursor)
QtGui.QGraphicsRectItem.hoverMoveEvent(self, event)
def mousePressEvent(self, event):
"""
Capture mouse press events and find where the mosue was pressed on the object
"""
self.mousePressPos = event.scenePos()
self.mouseIsPressed = True
self.rectPress = copy.deepcopy(self._rect)
# Top left corner
if self.topLeft.contains(event.scenePos()):
self.mousePressArea = 'topleft'
# top right corner
elif self.topRight.contains(event.scenePos()):
self.mousePressArea = 'topright'
# bottom left corner
elif self.bottomLeft.contains(event.scenePos()):
self.mousePressArea = 'bottomleft'
# bottom right corner
elif self.bottomRight.contains(event.scenePos()):
self.mousePressArea = 'bottomright'
# entire rectangle
else:
self.mousePressArea = None
QtGui.QGraphicsRectItem.mousePressEvent(self, event)
def mouseReleaseEvent(self, event):
"""
Capture nmouse press events.
"""
self.mouseIsPressed = False
self.updateResizeHandles()
self.prepareGeometryChange()
QtGui.QGraphicsRectItem.mouseReleaseEvent(self, event)
def mouseMoveEvent(self, event):
"""
Handle mouse move events.
"""
self.mouseMovePos = event.scenePos()
if self.mouseIsPressed:
# Move top left corner
if self.mousePressArea=='topleft':
self._rect.setTopLeft(self.rectPress.topLeft()-(self.mousePressPos-self.mouseMovePos))
# Move top right corner
elif self.mousePressArea=='topright':
self._rect.setTopRight(self.rectPress.topRight()-(self.mousePressPos-self.mouseMovePos))
# Move bottom left corner
elif self.mousePressArea=='bottomleft':
self._rect.setBottomLeft(self.rectPress.bottomLeft()-(self.mousePressPos-self.mouseMovePos))
# Move bottom right corner
elif self.mousePressArea=='bottomright':
self._rect.setBottomRight(self.rectPress.bottomRight()-(self.mousePressPos-self.mouseMovePos))
# Move entire rectangle, don't resize
else:
self._rect.moveCenter(self.rectPress.center()-(self.mousePressPos-self.mouseMovePos))
self.updateResizeHandles()
self.prepareGeometryChange()
QtGui.QGraphicsRectItem.mousePressEvent(self, event)
def boundingRect(self):
"""
Return bounding rectangle
"""
return self._boundingRect
def updateResizeHandles(self):
"""
Update bounding rectangle and resize handles
"""
self.offset = self.resizeHandleSize*(self._scene.graphicsView.mapToScene(1,0)-self._scene.graphicsView.mapToScene(0,1)).x()
self._boundingRect = self._rect.adjusted(-self.offset, self.offset, self.offset, -self.offset)
# Note: this draws correctly on a view with an inverted y axes. i.e. QGraphicsView.scale(1,-1)
self.topLeft = QtCore.QRectF(self._boundingRect.topLeft().x(), self._boundingRect.topLeft().y() - 2*self.offset,
2*self.offset, 2*self.offset)
self.topRight = QtCore.QRectF(self._boundingRect.topRight().x() - 2*self.offset, self._boundingRect.topRight().y() - 2*self.offset,
2*self.offset, 2*self.offset)
self.bottomLeft = QtCore.QRectF(self._boundingRect.bottomLeft().x(), self._boundingRect.bottomLeft().y(),
2*self.offset, 2*self.offset)
self.bottomRight = QtCore.QRectF(self._boundingRect.bottomRight().x() - 2*self.offset, self._boundingRect.bottomRight().y(),
2*self.offset, 2*self.offset)
def paint(self, painter, option, widget):
"""
Paint Widget
"""
# show boundingRect for debug purposes
painter.setPen(QtGui.QPen(QtCore.Qt.red, 0, QtCore.Qt.DashLine))
painter.drawRect(self._boundingRect)
# Paint rectangle
painter.setPen(QtGui.QPen(QtCore.Qt.black, 0, QtCore.Qt.SolidLine))
painter.drawRect(self._rect)
# If mouse is over, draw handles
if self.mouseOver:
# if rect selected, fill in handles
if self.isSelected():
painter.setBrush(QtGui.QBrush(QtGui.QColor(0,0,0)))
painter.drawRect(self.topLeft)
painter.drawRect(self.topRight)
painter.drawRect(self.bottomLeft)
painter.drawRect(self.bottomRight)
Rest of code for functioning example:
class graphicsScene(QtGui.QGraphicsScene):
def __init__ (self, parent = None):
QtGui.QGraphicsScene.__init__(self, parent)
def setGraphicsView(self, view):
self.graphicsView = view
app = QtGui.QApplication(sys.argv)
app.setStyle('GTK')
mainWindow = QtGui.QMainWindow()
scene = graphicsScene()
scene.setSceneRect(-100,-100, 200, 200)
# Set up view properties
view = QtGui.QGraphicsView()
view.setScene(scene)
view.scale(1,-1)
view.setRenderHint(QtGui.QPainter.Antialiasing)
view.setViewportUpdateMode(QtGui.QGraphicsView.BoundingRectViewportUpdate)
view.setHorizontalScrollBarPolicy ( QtCore.Qt.ScrollBarAlwaysOff )
view.setVerticalScrollBarPolicy ( QtCore.Qt.ScrollBarAlwaysOff )
view.setUpdatesEnabled(True)
view.setMouseTracking(True)
view.setCacheMode(QtGui.QGraphicsView.CacheBackground)
view.setTransformationAnchor(QtGui.QGraphicsView.AnchorUnderMouse)
scene.setGraphicsView(view)
# Add box
BoxResizable(QtCore.QRectF(-50, 50, 100.0, -100.0), parent = None, scene = scene)
mainWindow.setCentralWidget(view)
mainWindow.show()
app.exec_()
app.deleteLater()
sys.exit()
Adding the above class to a QGraphicsScene and subsequent inverted y axis QGraphicsView will produce something like this:
Any help or suggestions are appreciated! Thanks!
Found part of the problem: If I over-ride the shape function (add this function to the class) with:
def shape(self):
path = QtGui.QPainterPath()
path.addRect(self.boundingRect())
return path
The hover area changes size and position with the box sometimes. Acoording to the docs for QGraphicsItem.shape():
The default implementation calls boundingRect() to return a simple
rectangular shape...
Is this a bug in PyQt4?
Second problem: I think that the boundingRect and the shape rectangle need to have positive widths and heights? This is easily done by adding:
self._rect = self._rect.normalized()
to the mouseReleaseEvent function.