I'm writing a simple gui with a QGraphicsScene. Inside this scene i have 2 simple XY axis and I have a function to retrieve the position of my mouse click on the scene.
I added a simple movable ellipse to my scene and I'm retrieving it's position (at the moment it's only an on click detection, later I will implement a signal for its movement)
Here's the code:
View.py:
import math
import sys
from PySide2.QtCore import Signal, QPointF
from PySide2 import QtCore
from PySide2.QtGui import QColor, QPainterPath
from PySide2.QtWidgets import (QGraphicsItem,
QApplication,
QGraphicsScene,
QGraphicsView,
QHBoxLayout,
QMainWindow,
QPushButton,
QWidget,
QSizeGrip
)
from PySide2 import QtGui
from PySide2.QtGui import QIcon
class GraphicsScene(QGraphicsScene): # Used to indicate inheritance from parent class
clicked = Signal(QPointF)
def drawBackground(self, painter, rect):
l = min(rect.width(), rect.height()) / 30
x_left = QPointF(rect.left(), 0)
x_right = QPointF(rect.right(), 0)
painter.drawLine(x_left, x_right)
right_triangle = QPainterPath()
right_triangle.lineTo(-0.5 * math.sqrt(3) * l, 0.5 * l)
right_triangle.lineTo(-0.5 * math.sqrt(3) * l, -0.5 * l)
right_triangle.closeSubpath()
right_triangle.translate(x_right)
painter.setBrush(QColor("black"))
painter.drawPath(right_triangle)
y_top = QPointF(0, rect.top())
y_bottom = QPointF(0, rect.bottom())
painter.drawLine(y_top, y_bottom)
top_triangle = QPainterPath()
top_triangle.lineTo(.5*l, -0.5 * math.sqrt(3) * l)
top_triangle.lineTo(-.5*l, -0.5 * math.sqrt(3) * l)
top_triangle.closeSubpath()
top_triangle.translate(y_bottom)
painter.setBrush(QColor("black"))
painter.drawPath(top_triangle)
def mousePressEvent(self, event):
sp = event.scenePos()
self.clicked.emit(sp)
super().mousePressEvent(event)
class MyView(QMainWindow):
def __init__(self, parent=None):
super().__init__(parent)
self.setWindowTitle("8D.me")
self.setFixedSize(800, 500)
self.btn = QPushButton("test2")
self.btn.setStyleSheet( "color: white; border-radius: 4px; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2); background: rgb(66, 184, 221); min-width:100px;min-height:30px")
self.view = QGraphicsView()
print(self.view.size())
self.view.scale(1, -1)
self.scene = GraphicsScene()
self.view.setScene(self.scene)
self.setIcon()
self.ellipse=self.scene.addEllipse(10,10,10,10)
self.ellipse.setFlag(QGraphicsItem.ItemIsMovable)
central_widget = QWidget()
self.setCentralWidget(central_widget)
layout = QHBoxLayout(central_widget)
layout.addWidget(self.btn)
layout.addWidget(self.view)
#flags = QtCore.Qt.WindowFlags(QtCore.Qt.FramelessWindowHint | QtCore.Qt.WindowStaysOnTopHint)
#self.setWindowFlags(flags)
self.scene.clicked.connect(self.handle_clicked)
def handle_clicked(self, p):
print("position",self.ellipse.pos())
print("clicked", p.x(), p.y())
print(self.view.size())
# Insert methods for creating/adding elements to the default view.
# Mehods....
def setIcon(self):
appIcon = QIcon('logo')
self.setWindowIcon(appIcon)
#Insert here the public methods called by the Controller to update the view
main.py:
import View
#import Model
#import Controller
#Useful example: https://realpython.com/python-pyqt-gui-calculator/
def main():
"""Main function."""
# Create an instance of QApplication
app = QApplication([])
# Show the GUI
mainwindow =View.MyView()
mainwindow.show()
# Create instances of model and controller
#model = Model.myModel()
#Controller.myController(view=mainwindow,model=model)
return app.exec_()
if __name__ == '__main__':
main()
EDIT: I added also the main code. I have the View in a separate file since I am using a MVC design pattern.
My GUI looks like this:
And it works so far.
The problem is if I move the ellipse (which moves correctly) my XY axis moves too, and I can't figure out why.
For example this is how my GUI changes if I move the ellipse toward the upper right angle:
What's the problem? How do I "fix" the XY axis? I would like to keep my axis still and move only the ellipse inside the scene region.
I solved the problem following this: https://forum.qt.io/topic/48564/force-qgraphicsview-size-to-match-qgraphicsscene-size/7
Basically i added the following lines to my code:
self.view.setFixedSize(600,480)
self.view.setSceneRect(-300,-220,600,480)
self.view.fitInView(0,0,600,480, Qt.KeepAspectRatio)
So the new View.py is:
import math
import sys
from PySide2.QtCore import Signal, QPointF, Qt
from PySide2 import QtCore
from PySide2.QtGui import QColor, QPainterPath
from PySide2.QtWidgets import (QGraphicsItem,
QApplication,
QGraphicsScene,
QGraphicsView,
QHBoxLayout,
QMainWindow,
QPushButton,
QWidget,
QSizeGrip
)
from PySide2 import QtGui
from PySide2.QtGui import QIcon
class GraphicsScene(QGraphicsScene): # Used to indicate inheritance from parent class
clicked = Signal(QPointF)
def drawBackground(self, painter, rect):
#print('Pinto rect',rect.width(),rect.height())
l = min(rect.width(), rect.height()) / 30
#print('printo l',l)
#Qui c'è il bug. La funzione drawbackground viene chiamata a ogni modifica della scene.
#Lo starting point del drawing della line cambia nel tempo, ecco perchè mi si spostano gli assi
x_left = QPointF(rect.left(), 0)
x_right = QPointF(rect.right(), 0)
print('printo gli x',rect.left(),rect.height())
painter.drawLine(x_left, x_right)
right_triangle = QPainterPath()
right_triangle.lineTo(-0.5 * math.sqrt(3) * l, 0.5 * l)
right_triangle.lineTo(-0.5 * math.sqrt(3) * l, -0.5 * l)
right_triangle.closeSubpath()
right_triangle.translate(x_right)
painter.setBrush(QColor("black"))
painter.drawPath(right_triangle)
y_top = QPointF(0, rect.top())
y_bottom = QPointF(0, rect.bottom())
painter.drawLine(y_top, y_bottom)
top_triangle = QPainterPath()
top_triangle.lineTo(.5*l, -0.5 * math.sqrt(3) * l)
top_triangle.lineTo(-.5*l, -0.5 * math.sqrt(3) * l)
top_triangle.closeSubpath()
top_triangle.translate(y_bottom)
painter.setBrush(QColor("black"))
painter.drawPath(top_triangle)
def mousePressEvent(self, event):
sp = event.scenePos()
self.clicked.emit(sp)
super().mousePressEvent(event)
class MyView(QMainWindow):
def __init__(self, parent=None):
super().__init__(parent)
self.setWindowTitle("8D.me")
self.setFixedSize(800, 500)
self.btn = QPushButton("test2")
self.btn.setStyleSheet( "color: white; border-radius: 4px; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2); background: rgb(66, 184, 221); min-width:100px;min-height:30px")
self.view = QGraphicsView()
print(self.view.size())
self.view.setFixedSize(600,480)
self.view.setSceneRect(-300,-220,590,470)
self.view.fitInView(0,0,600,480, Qt.KeepAspectRatio)
self.view.scale(1, -1)
self.scene = GraphicsScene()
self.view.setScene(self.scene)
self.setIcon()
self.ellipse=self.scene.addEllipse(-5,-5,10,10)
self.ellipse.setFlag(QGraphicsItem.ItemIsMovable)
central_widget = QWidget()
self.setCentralWidget(central_widget)
layout = QHBoxLayout(central_widget)
layout.addWidget(self.btn)
layout.addWidget(self.view)
#flags = QtCore.Qt.WindowFlags(QtCore.Qt.FramelessWindowHint | QtCore.Qt.WindowStaysOnTopHint)
#self.setWindowFlags(flags)
self.scene.clicked.connect(self.handle_clicked)
def handle_clicked(self, p):
print("position",self.ellipse.pos())
print("clicked", p.x(), p.y())
print(self.view.size())
# Insert methods for creating/adding elements to the default view.
# Mehods....
def setIcon(self):
appIcon = QIcon('logo')
self.setWindowIcon(appIcon)
#Insert here the public methods called by the Controller to update the view
Related
I have an application where I draw 2 custom widgets and then draw a line between them. I want to add a mousePressEvent to the line.
What would be the best way to do this?
I suppose I could create a QWidget of x pixel thickness and y length and then fill in the whole widget with the colour I want the line to have. Then the QWidget has the mousePressEvent that I can override. This doesn't seem like the most elegant solution and feels more like a workaround. Is there a better way?
import sys
from PyQt5.QtCore import Qt
from PyQt5.QtGui import QPaintEvent, QPainter, QPen, QFont
from PyQt5.QtWidgets import QApplication, QMainWindow, QWidget, QLabel
class MyWidget(QWidget):
def __init__(self, name, parent):
super().__init__(parent)
self.setAutoFillBackground(True)
self.setFixedSize(300, 100)
p = self.palette()
p.setColor(self.backgroundRole(), Qt.white)
self.setPalette(p)
lbl_name = QLabel(name, self)
lbl_name.setFont(QFont('Arial', 16))
lbl_name.move((self.width() - lbl_name.width()) / 2, self.height()/2 - lbl_name.height()/2)
class MainWindow(QMainWindow):
def __init__(self, parent=None):
super().__init__(parent)
self.main_widget = QWidget(self)
self.widget_1 = MyWidget("Widget 1", self)
self.widget_1.move(50, 50)
self.widget_2 = MyWidget("Widget 2", self)
self.widget_2.move(700, 600)
self.resize(1200, 800)
self.setCentralWidget(self.main_widget)
def paintEvent(self, a0: QPaintEvent) -> None:
super().paintEvent(a0)
painter = QPainter(self)
painter.setPen(QPen(Qt.red, 3, Qt.SolidLine))
widget_1_x = self.widget_1.pos().x() + self.widget_1.size().width()
widget_1_y = self.widget_1.pos().y() + self.widget_1.size().height() / 2
widget_2_x = self.widget_2.pos().x()
widget_2_y = self.widget_2.pos().y() + self.widget_2.size().height() / 2
halfway_x = widget_1_x + (widget_2_x - widget_1_x) / 2
# add mousePressEvents to these lines:
painter.drawLine(widget_1_x, widget_1_y, halfway_x, widget_1_y)
painter.drawLine(halfway_x, widget_1_y, halfway_x, widget_2_y)
painter.drawLine(halfway_x, widget_2_y, widget_2_x, widget_2_y)
if __name__ == "__main__":
app = QApplication(sys.argv)
myapp = MainWindow()
myapp.show()
sys.exit(app.exec_())
How the above code looks like when run
I've a list of rectangle make in this way:
import sys
from PyQt5.QtCore import Qt, QRect, QRectF
from PyQt5.QtGui import *
from PyQt5.QtWidgets import ( QGridLayout, QWidget, QApplication, QGraphicsScene,
QGraphicsView, QGraphicsProxyWidget, QGraphicsRectItem
)
class WidRect(QWidget):
def __init__(self, mIntMeasureId,mStrLabel=None):
super().__init__()
self.aIntMeasureId=mIntMeasureId
self.aStrLabel=mStrLabel
#self.setWidget(QLabel(mStrLabel))
def mousePressEvent(self, QMouseEvent):
if QMouseEvent.button() == Qt.LeftButton:
print("Left Button Clicked on measure "+ str(self.aIntMeasureId))
elif QMouseEvent.button() == Qt.RightButton:
#do what you want here
print("Right Button Clicked on measure "+ str(self.aIntMeasureId))
class MeasureGrid(QWidget):
#grid = None
#scene = None
def __init__(self, geometry, parent=None):
super(MeasureGrid, self).__init__(parent=parent)
#super().onclick.connec(self.click)
self.aLayMeasureGrid = QGridLayout(self)
self.aGsMeasureScene = QGraphicsScene(self)
self.aGsMeasureScene .setSceneRect(geometry.x(), geometry.y(), geometry.width(), geometry.height())
self.aGsMeasureScene .setBackgroundBrush(Qt.white)
self.aGvMeasureView = QGraphicsView()
self.aGvMeasureView.setScene(self.aGsMeasureScene )
self.aLayMeasureGrid.addWidget(self.aGvMeasureView)
for i in range(1,5):
rect = QRectF(100*i, 20, 80, 140)
self.addRect(rect,i)
def addRect(self, mRecMeasureBox,mIntMeasureNum):
#label = QLabel("World")
#label.setAlignment(Qt.AlignCenter | Qt.AlignCenter)
wrRectBox = WidRect(mIntMeasureNum,"Meas #" + str(mIntMeasureNum))
### CREA IL PROXY ###
gpqProxMeasure = QGraphicsProxyWidget()
gpqProxMeasure.setWidget(wrRectBox)
gpqProxMeasure.setGeometry(mRecMeasureBox)
self.aGsMeasureScene.addItem(gpqProxMeasure)
### CREA L'OGGETTO GENITORE ###
griMeasure = QGraphicsRectItem(mRecMeasureBox)
#rectangle.setFlag(QGraphicsItem.ItemIsMovable, True)
self.aGsMeasureScene.addItem(griMeasure)
gpqProxMeasure.setParentItem(griMeasure)
if __name__ == "__main__":
app = QApplication(sys.argv)
mgMeasureList = MeasureGrid(QRect(10, 10, 550, 280))
mgMeasureList.show()
app.exec_()
I would like to add:
a text into every rectangle
an icon into every rectangle
change the icon with another if I click with right button.
I try to add a QLabel but I cannot add a widget to a widget.
Can you tell me where is my error?
I create the rectangle using a proxy object because in the final version of the application they will be from 100 to 300 objects.
This code moves the text from left to right using PyQt4. My question is, are there other ways to do it?
# -*-coding:utf8 -*-
from PyQt4.QtGui import (QApplication, QGraphicsView, QPainter, QColor, QWidget,
QGraphicsScene, QFont, QLabel, QGraphicsSimpleTextItem,
QBrush, QLinearGradient, QPixmap, QGraphicsTextItem, QPushButton,
QVBoxLayout, QTextDocument)
from PyQt4.QtCore import (QObject, QPointF, QPropertyAnimation,
pyqtProperty, Qt, QAbstractAnimation, QRectF)
import sys
data = [u"I want to make text within an ad bar that moves as there is on the TV screen like this"]
class Text(QObject):
def __init__(self):
super(Text, self).__init__()
doc = QTextDocument("%s" % data[0])
doc.setDefaultStyleSheet(
"body { color : green; background-color : black }")
doc.setDefaultFont(QFont("Times", 20, QFont.Bold))
self.Text_item = QGraphicsTextItem()
self.Text_item.setDocument(doc)
def _set_pos(self, pos):
self.Text_item.setPos(pos)
pos = pyqtProperty(QPointF, fset=_set_pos)
class Example(QGraphicsView):
def __init__(self):
super(Example, self).__init__()
self.initView()
def initView(self):
self.text = Text()
self.anim = QPropertyAnimation(self.text, b"pos")
self.anim.setDuration(19000)
self.anim.setLoopCount(4)
self.anim.setStartValue(QPointF(-1850.0, 450.0))
self.anim.setEndValue(QPointF(800.0, 450.0))
self.scene = QGraphicsScene(self)
self.scene.setSceneRect(0, 0, 300, 300)
self.scene.addItem(self.text.Text_item)
self.setScene(self.scene)
self.setWindowTitle("Text moveing")
self.setRenderHint(QPainter.Antialiasing)
self.anim.start(QAbstractAnimation.DeleteWhenStopped)
if __name__ == '__main__':
app = QApplication(sys.argv)
view = Example()
rect = QApplication.desktop().availableGeometry()
view.resize(int(rect.width() * 0.75), int(rect.height() * 0.9))
view.show()
sys.exit(app.exec_())
In the following code, one rectangle is made when the "Paint" button is clicked. It contains also a "Move" button. By clicking the "Move" button I want to move the rectangle 1px in both x and y directions. But I failed here.
I can understand the question is about how to transfer variable values wenn a button is clicked. To a beginner it is very difficult for me. Any help will be highly appreciated!
# -*- coding: utf-8 -*-
from PyQt5.QtWidgets import QWidget, QApplication, QPushButton, QHBoxLayout, QDoubleSpinBox
from PyQt5.QtGui import QPainter, QColor, QBrush
import sys
class Example(QWidget):
def __init__(self):
super(Example, self).__init__()
self.initUI()
self.flag = False
def initUI(self):
self.setFixedSize(400, 400)
self.setWindowTitle('Colours')
self.btnPaint = QPushButton("Paint", self)
self.btnMove = QPushButton("Move x+1 y+1", self)
self.deltax = 0 # original value
self.deltay = 0 # original value
self.btnPaint.clicked.connect(self.onPaint)
self.btnMove.clicked.connect(self.onMove)
self.hlayout = QHBoxLayout()
self.hlayout.addWidget(self.btnPaint)
self.hlayout.addWidget(self.btnMove)
self.hlayout.addStretch(1)
self.setLayout(self.hlayout)
self.show()
def onPaint(self):
self.flag = True
self.update()
def onMove(self):
self.deltax = self.deltax + 1 # button clicked, value +1
self.deltay = self.deltay + 1 # button clicked, value +1
self.flag_move = True
self.update()
def paintEvent(self, e):
if self.flag:
qp = QPainter()
qp.begin(self)
self.drawRectangles(qp)
qp.end()
if self.flag_move:
qp = QPainter()
qp.begin(self)
self.drawRectangles(qp)
qp.end()
def drawRectangles(self, qp):
x1 = 10
y1 = 15
x2 = 90
y2 = 60
col = QColor(0, 0, 0)
col.setNamedColor('#d4d4d4')
qp.setPen(col)
qp.setBrush(QColor(200, 0, 0))
qp.drawRect(x1+self.deltax, y1+self.deltay, x2+self.deltax, y2+self.deltay)
if __name__ == '__main__':
app = QApplication(sys.argv)
ex = Example()
sys.exit(app.exec_())
Your code has an error because the self.flag_move is not initially defined, but it is not necessary to use so many variables either.
Qt has the QRect class that has several methods that make the task easier, initially we create a null QRect, and when the btnPaint button is pressed we will enable QRect to a non-null one. in the case of pressing the btnMove button we will use the translate method that moves the rectangle:
import sys
from PyQt5.QtWidgets import QWidget, QApplication, QPushButton, QHBoxLayout
from PyQt5.QtGui import QPainter, QColor, QBrush
from PyQt5.QtCore import QRect, QPoint
class Example(QWidget):
def __init__(self):
super(Example, self).__init__()
self.initUI()
def initUI(self):
self.setFixedSize(400, 400)
self.setWindowTitle('Colours')
self.btnPaint = QPushButton("Paint", self)
self.btnMove = QPushButton("Move x+1 y+1", self)
self.rect = QRect()
self.btnPaint.clicked.connect(self.onPaint)
self.btnMove.clicked.connect(self.onMove)
self.hlayout = QHBoxLayout(self)
self.hlayout.addWidget(self.btnPaint)
self.hlayout.addWidget(self.btnMove)
self.hlayout.addStretch(1)
self.show()
def onPaint(self):
if self.rect.isNull():
self.rect = QRect(10, 15, 80, 45)
self.update()
def onMove(self):
if not self.rect.isNull():
self.rect.translate(QPoint(1, 1))
self.update()
def paintEvent(self, e):
qp = QPainter(self)
qp.setPen(QColor("#d4d4d4"))
qp.setBrush(QColor(200, 0, 0))
qp.drawRect(self.rect)
Right now, I am learning QGraphicsView. I followed a tutorial given by Nokia from 2011 (YouTube: Qt DevDays 2011, Advanced Qt -A Deep Dive 1/6). It is a very basic demo showing a house (made from QRect and QPolygon) that turns around if clicked. On the backside of the house are a few widgets (e.g. QCombobox) aranged inside a QGraphicsProxyWidget hold by a QGraphicsItemGroup. Now I am facing the problem that since Qt 4.7 the class QGraphicItemsGroup no longer supports the flag "setHandlesChildEvents(False)".
Since QGraphicsItemGroup will handle all the events, how can I achieve that the QGraphicsItem Group will not block the child item's event, as well as letting child item handle it own event?
Thanks in advance for your help!
main_house.py
from PyQt5.QtWidgets import QApplication, QGraphicsScene, QGraphicsView
from PyQt5.QtCore import Qt
import sys
from House.house import House
app = QApplication([])
scene = QGraphicsScene()
house_1 = House(Qt.blue, Qt.yellow)
scene.addItem(house_1)
scene.setSceneRect(0, 0, 500, 500)
view = QGraphicsView(scene)
view.show()
view.resize(600, 600)
sys.exit(app.exec_())
house.py
from PyQt5.QtWidgets import QGraphicsItemGroup,QGraphicsProxyWidget,QGraphicsRectItem,QGraphicsPolygonItem, \
QWidget, QVBoxLayout, QLabel, QComboBox, QPushButton
from PyQt5.QtCore import QTimeLine, QPointF, QRectF, Qt
from PyQt5.QtGui import QColor, QPolygonF, QTransform
class House(QGraphicsItemGroup):
def __init__(self, roofcolor: QColor, facadecolor: QColor, parent=None):
super(House, self).__init__(parent)
self._front = True
self._timeline = None
self._graphics = None
self._configpage = None
self._facade = None
self._roof = None
self.roof_polygon = QPolygonF()
self.roof_polygon << QPointF(0, 200) << QPointF(100, 0) << QPointF(200, 200)
self.body_rect = QRectF(0, 200, 200, 200)
self.create_roof(roofcolor)
self.create_front(facadecolor)
self.create_back(roofcolor, facadecolor)
# ==========================
# self.setHandlesChildEvents(False) # obsolete since Qt 4.7
# ==========================
def mousePressEvent(self, event):
if not self._timeline:
self._timeline = QTimeLine(1000)
self._timeline.setCurveShape(QTimeLine.EaseInOutCurve)
self._timeline.valueChanged.connect(self.rotate_house)
self._timeline.finished.connect(self.reset)
self._timeline.start()
def reset(self):
self._timeline = None
def rotate_house(self, pos):
angle = int(pos * 180)
if self._front is True:
angle += 180
transform = QTransform()
transform.translate(100, 0)
transform.rotate(angle, Qt.YAxis)
transform.translate(-100, 0)
self.setTransform(transform)
if pos == 1.0:
self._front = not self._front
config = angle < 90 or angle >= 270
self._configpage.setVisible(config)
self._facade.setVisible(not config)
def update_roof_color(self):
combo = self.sender()
color = combo.itemData(combo.currentIndex()).value()
self._roof.setBrush(color)
def update_house_color(self):
combo = self.sender()
color = combo.itemData(combo.currentIndex()).value()
self._facade.setBrush(color)
def create_roof(self, color: QColor):
self._roof = QGraphicsPolygonItem(self.roof_polygon)
self.addToGroup(self._roof)
self._roof.setBrush(color)
def create_front(self, color: QColor):
self._facade = QGraphicsRectItem(self.body_rect)
self._facade.setBrush(color)
self.addToGroup(self._facade)
def create_back(self, roof_color: QColor, facade_color: QColor):
self._configpage = QGraphicsProxyWidget()
self._configpage.setWidget(self.create_config_widget(roof_color, facade_color))
self._configpage.setGeometry(self.body_rect)
self.addToGroup(self._configpage)
self._configpage.hide()
# ==== Problem: Widgets (comboboxes) do not receive events ====
def create_config_widget(self, roof_color: QColor, facade_color: QColor) -> QWidget:
res = QWidget()
layout = QVBoxLayout(res)
label = QLabel('Roof color:')
layout.addWidget(label)
self.roof_combo = self.create_color_combobox(roof_color) # combobox does not receive events
layout.addWidget(self.roof_combo)
self.roof_combo.activated.connect(self.update_roof_color)
label = QLabel('House color:')
layout.addWidget(label)
self.facade_combo = self.create_color_combobox(facade_color)
layout.addWidget(self.facade_combo)
self.facade_combo.activated.connect(self.update_house_color)
bt = QPushButton('Test')
bt.setCheckable(True)
layout.addWidget(bt)
layout.addStretch(1)
return res
def create_color_combobox(self, color: QColor) -> QComboBox:
res = QComboBox()
res.addItem('red', QColor(Qt.red))
res.addItem('blue', QColor(Qt.blue))
res.addItem('green', QColor(Qt.green))
res.addItem('white', QColor(Qt.white))
res.setCurrentIndex(res.findData(color))
return res