Pyqt: How-to set item always in the center of a QGraphicsView when scrolling is possible? - pyqt

I have a QGraphicsView. To that I added a QGraphicsScene and to that a added an QPixmap(*.jpeg) and QGraphicsEllipseItem(a circle). The QPixmap is much more bigger than the QGraphicsView, so scrolling is enabled. The problem is that both QPixmap and QGraphicsEllipseItem are moving. But I want a fixed position for the QGraphicsEllipseItem in QGraphicsView. It should always be in the center of the QGraphicsView.
How can I do that? Hope someone can help.

Add a signal handler for the scroll signal of the scroll bars (use QAbstractSlider::sliderMoved()).
Then you can query the view for it's left/top offset and size and position the circle accordingly. See the explanation for QAbstractScrollArea to get you started.

If you subclass QGraphicsView, you can override the scrollContentsBy method to set the position of the ellipse whenever the scroll area changes. Here's some really minimal code:
import sys
from PyQt4 import QtGui
class MyView(QtGui.QGraphicsView):
def __init__(self, scene, parent = None):
super(MyView, self).__init__(parent)
self.scene = scene
self.setScene(scene)
self.ellipse = QtGui.QGraphicsEllipseItem(0, 0, 30, 30, scene = self.scene)
self.scene.addItem(self.ellipse)
def scrollContentsBy(self, x, y):
super(MyView, self).scrollContentsBy(x, y)
self.ellipse.setPos(self.mapToScene(28, 28))
class MainWindow(QtGui.QMainWindow):
def __init__(self, parent = None):
super(MainWindow, self).__init__(parent)
pixmap = QtGui.QPixmap()
pixmap.load('imagefile.jpg')
scene = QtGui.QGraphicsScene(self)
scene.setSceneRect(0, 0, pixmap.width(), pixmap.height())
item = QtGui.QGraphicsPixmapItem(pixmap)
scene.addItem(item)
self.view = MyView(scene, self)
self.view.setMinimumSize(100, 100)
def main():
app = QtGui.QApplication(sys.argv)
mainWindow = MainWindow()
mainWindow.show()
app.exec_()
if __name__ == '__main__':
main()

Related

scaledToHeight() does not scale to height - PyQt5

I'm trying to render my image, but scaled to the height of the current window and keeping with aspect ratio.
The following does just that, but does not actually scale the image:
from PyQt5.QtGui import *
from PyQt5.QtWidgets import *
from PyQt5.QtCore import *
class Img(QWidget):
def __init__(self, parent=None):
super(Img, self).__init__(parent)
self.setAttribute(Qt.WA_StyledBackground, True)
self.setStyleSheet('background-color: orange')
window = QDesktopWidget().screenGeometry(0)
height = window.height()
layout = QVBoxLayout(self)
pixmap = QPixmap("test.png")
pixmap = pixmap.scaledToHeight(height)
label = QLabel()
label.setPixmap(pixmap)
label.setScaledContents(True)
layout.addWidget(label)
print(height)
class MainWindow(QMainWindow):
def __init__(self, parent=None):
super(MainWindow, self).__init__(parent)
img = Img()
layout = QVBoxLayout()
layout.setContentsMargins(0, 0, 0, 0)
layout.addWidget(img)
layout.setAlignment(Qt.AlignCenter)
content = QWidget()
content.setLayout(layout)
w,h = (1024,670)
self.resize(w,h)
self.setCentralWidget(content)
self.show()
if __name__ == '__main__':
app = QApplication([])
window = MainWindow()
app.exec_()
Although it prints out height is 1050, what I see is a huge image and the window expands down past my monitor. Can someone explain the issue and what needs to happen for scaledToHeight()?
Here is an example of what I see:
And here is the actual image:
The image gets cut off because it gets extended past the monitor screen, and is also stretched oddly.

Undo functionality for QPainter drawEllipse() function

I'm new to PyQt and started playing around with some online code. The drawEllipse() function found in QPainter class draws an ellipse based on defined parameters. My question is once we call the function and it draws it on our scene, how do I undo this operation? There seems to be no such function that can do this in the documentation.
Example drawing code:
def draw(self, x, y):
painter = QPainter()
painter.begin(self.image)
painter.setPen(QPen(Qt.red, 5, Qt.SolidLine))
painter.drawEllipse(QPoint(y,x),10,10)
painter.end()
self.scene.addPixmap(QPixmap.fromImage(self.image))
So if a keystroke of Ctrl+Z is pressed this drawn circle should disappear, is this possible?
I do not understand why you use QImage because if you want to graph circles you should use QGraphicsEllipseItem.
To implement the undo method we must store the items in a list, then when you call the undo method you get the last element and remove it from the QGraphicsScene using removeItem().
In the following example, a circle is added each time you click.
import sys
from PyQt5 import QtCore, QtGui, QtWidgets
class Widget(QtWidgets.QWidget):
def __init__(self, parent=None):
QtWidgets.QWidget.__init__(self, parent)
lay = QtWidgets.QVBoxLayout(self)
self.gv = QtWidgets.QGraphicsView()
lay.addWidget(self.gv)
self.scene = QtWidgets.QGraphicsScene(0, 0, 400, 400)
self.gv.setScene(self.scene)
self.gv.installEventFilter(self)
self.items = []
shortcut = QtWidgets.QShortcut(QtGui.QKeySequence("Ctrl+Z"), self)
shortcut.activated.connect(self.undo)
def eventFilter(self, obj, event):
if obj == self.gv and event.type() == QtCore.QEvent.MouseButtonPress:
p = self.gv.mapToScene(event.pos())
self.draw(p)
return QtWidgets.QWidget.eventFilter(self, obj, event)
def draw(self, p):
it = QtWidgets.QGraphicsEllipseItem(0, 0, 10, 10)
it.setPen(QtGui.QPen(QtCore.Qt.red, 5, QtCore.Qt.SolidLine))
self.scene.addItem(it)
it.setPos(p)
self.items.append(it)
def undo(self):
if self.items:
it = self.items.pop()
self.scene.removeItem(it)
del it
if __name__ == '__main__':
app = QtWidgets.QApplication(sys.argv)
w = Widget()
w.show()
sys.exit(app.exec_())

Set dimensions of an SVG image in fullscreen using QSvgWidget in PyQT?

I am lost with my PyQT programm. I want to display SVG image on full screen, but I need to be able to set the scale and position of the image and rest of the screen fill with black colour.
I use QSvgWidget and regular QWidget on top of each other, but It is not a good solution, because it runs as two processes and two separate windows.
Could you tell me how to make this with only one widget
import sys, os
from PyQt4 import QtGui, QtSvg
class Display(QtSvg.QSvgWidget):
def __init__(self, parent=None):
super(Display, self).__init__(parent)
def main():
app = QtGui.QApplication(sys.argv)
black = QtGui.QWidget() #setting background with widget
black.showFullScreen()
form = Display()
form.setWindowTitle("Display SVG Layer")
form.showFullScreen()
form.setStyleSheet("background-color:black;")
form.load("E:\example.svg")
form.move(100,0)
form.resize(1900,1000)
app.exec_()
if __name__ == '__main__':
main()
perhaps You can use QGraphicsView and QGraphicsScene:
class MyGraphicsView(QGraphicsView):
def __init__(self, w, h, parent=None):
QGraphicsView.__init__(self, parent)
self.setGeometry(0, 0, w, h) # screen size
class MyGraphicsScene(QGraphicsScene):
def __init__(self, w, h, parent = None):
QGraphicsScene.__init__(self,parent)
self.setSceneRect(0, 0, w, h) # screen size
self.backgroundPen = QPen(QColor(Qt.black))
self.backgroundBrush = QBrush(QColor(Qt.black))
self.textPen = QPen(QColor(Qt.lightGray))
self.textPen.setWidth(1)
self.textBrush = QBrush(QColor(Qt.lightGray))
self.textFont = QFont("Helvetica", 14, )
# paint the background
self.addRect(0,0,self.width(), self.height(), self.backgroundPen, self.backgroundBrush)
# paint the svg-title
self.svgTitle = self.addSimpleText('Display SVG Layer', self.textFont)
self.svgTitle.setPen(self.textPen)
self.svgTitle.setBrush(self.textBrush)
self.svgTitle.setPos(200,75)
# paint the svg
self.svgItem = QGraphicsSvgItem('./example.svg')
'''
edit:
if necessary, get the size of the svgItem to calculate
scale factor and position
'''
self.svgSize = self.svgItem.renderer().defaultSize()
self.svgItem.setScale(0.25) # scale the svg to an appropriate size
self.addItem(self.svgItem)
self.svgItem.setPos(200, 125)
if __name__ == '__main__':
app = QApplication(sys.argv)
screen_size = app.primaryScreen().size()
width = screen_size.width()
height = screen_size.height()
graphicsScene = MyGraphicsScene(width, height)
graphicsView = MyGraphicsView(width, height)
graphicsView.setScene(graphicsScene)
graphicsView.show()
app.exec_()

How to make one tab bar in QTabWidget expendable?

I need to customize my QTabWidget so that one of its tab bars (lets say there are 4 tabs overall) has expanding property and will fill the remaining space between other tabs. Any ideas?
you can subclass QTabBar, set it to the width of your tabwidget (the height depends on the fontsize) and overwrite tabSizeHint():
class tabBar(QTabBar):
def __init__(self, width, height, parent=None):
QTabBar.__init__(self, parent)
self.setFixedSize(width, height)
def tabSizeHint(self, i):
f = 3 # Tab3 shall be f times wider then the other tabs
tw = int(self.width()/(self.count() + f -1)) # width per Tab
if i == 2: # Tab3
# return QSize(tw*f, self.height()) edited -> rounding error possible
return QSize(self.width() - (self.count() - 1)*tw, self.height())
return QSize(tw, self.height()) # all other tabs
and set this tabBar to your tabwidget:
tb = tabBar(tabWidget.width(), 34) # tabBars height depends on fontSize
tabwidget..setTabBar(tb)
looks like this:
edit:
if the tabWidget is resized, a resizeEvent() occurs. In this moment the tabWidget already has its new size and is repainted immediatedly after the resizeEvent(),
see QT-Doc QTabWidget.resizeEvent
So if the width() of the tabBar is adapted in resizeEvent(), the tabBar will always have the same width as the tabwidget. Because the tabSizeHint() depends on the width, all tabs will have the correct width too. So You can subclass QTabWidget() and overwrite resizeEvent() for a dynamical solution:
class tabWidget(QTabWidget):
def __init__(self, parent=None):
QTabWidget.__init__(self, parent)
def resizeEvent(self, event):
self.tabBar().setFixedWidth(self.width())
QTabWidget.resizeEvent(self, event)
To do this correctly, it's necessary to work backwards from the existing sizes of the tabs. This is because the tab sizes are affected by the current style, and by other features such as tab close buttons. It's also important to set a minimum size for the tab which is exandable (otherwise it could be resized to nothing).
Here is a simple demo that does all that:
from PyQt4 import QtCore, QtGui
class TabBar(QtGui.QTabBar):
def __init__(self, expanded=-1, parent=None):
super(TabBar, self).__init__(parent)
self._expanded = expanded
def tabSizeHint(self, index):
size = super(TabBar, self).tabSizeHint(index)
if index == self._expanded:
offset = self.width()
for index in range(self.count()):
offset -= super(TabBar, self).tabSizeHint(index).width()
size.setWidth(max(size.width(), size.width() + offset))
return size
class TabWidget(QtGui.QTabWidget):
def __init__(self, expanded=-1, parent=None):
super(TabWidget, self).__init__(parent)
self.setTabBar(TabBar(expanded, self))
def resizeEvent(self, event):
self.tabBar().setMinimumWidth(self.width())
super(TabWidget, self).resizeEvent(event)
class Window(QtGui.QWidget):
def __init__(self):
super(Window, self).__init__()
self.tabs = TabWidget(2, self)
layout = QtGui.QVBoxLayout(self)
layout.addWidget(self.tabs)
for text in 'One Two Three Four'.split():
self.tabs.addTab(QtGui.QWidget(self), text)
if __name__ == '__main__':
import sys
app = QtGui.QApplication(sys.argv)
window = Window()
window.setGeometry(500, 300, 400, 200)
window.show()
sys.exit(app.exec_())

Pyqt4: How to correct QGraphicsItem position?

I'm trying to draw a path on a QGraphicsView. However, the position seems not right. The first point(red) is (0,0), which is supposed to be at the top-left corner. How do I move the drawing to the right position?
from PyQt4 import QtGui, QtCore
from PyQt4.QtCore import QPointF as qpf
import sys
from PyQt4.QtGui import QPainterPath
data= [qpf(0,0),qpf(40,30),qpf(30,60),qpf(70,90),qpf(20,120),qpf(60,150)]
class Window(QtGui.QWidget):
def __init__(self):
QtGui.QWidget.__init__(self)
self.view = View(self)
layout = QtGui.QVBoxLayout(self)
layout.addWidget(self.view)
class View(QtGui.QGraphicsView):
def __init__(self, parent):
QtGui.QGraphicsView.__init__(self, parent)
self.setScene(QtGui.QGraphicsScene(self))
item = QtGui.QGraphicsRectItem(data[0].x()-2,data[0].y()-2,4,4)
item.setBrush(QtCore.Qt.red)
self.scene().addItem(item)
self.path = path = QPainterPath(data[0])
for d in data[1:]:
path.lineTo(d)
item = QtGui.QGraphicsPathItem(path)
self.scene().addItem(item)
def mouseReleaseEvent(self, event):
pos = event.pos()
rect = QtCore.QRectF(pos.x()-2, pos.y()-2,4,4)
item = QtGui.QGraphicsRectItem(rect)
self.scene().addItem(item)
if self.path.intersects(rect):
print 'on line'
else:
print 'Not belong to line (%d, %d)' % (pos.x(), pos.y())
QtGui.QGraphicsView.mouseReleaseEvent(self, event)
if __name__ == '__main__':
app = QtGui.QApplication(sys.argv)
window = Window()
window.resize(400, 400)
window.show()
sys.exit(app.exec_())
This behavior is because you draw using QGraphicsScene and QGraphicsView. This is because view and scene have some automatism, which are very convenient, normally. The scene coordinated can be completely different from the view (which is in pixels).
From the docs: "After you call show(), the view will by default scroll to the center of the scene and display any items that are visible at this point." show() is called implicitly in your case, I believe after you add an item to the scene.
I can think of two possibilities to get what you want:
1) change the view onto your scene, so that the scene-coordinate (0, 0) is in the upper left corner of your view.
2) Do NOT use QGraphicsScene and QGraphicsView, but just draw on a widget from its paint event as shown for example here. This means your dimensions are all in pixels, i.e. the coordinates of your points are pixels. And no automatism that might confuse you is done.
You would want to use self.setAlignment(QtCore.Qt.AlignLeft|QtCore.Qt.AlignTop) in your view class constructor, that will make 0,0 of the scene coordinates the same as 0,0 in view coordinates.AlignmentFlag
I would also suggest pos = self.mapToScene(event.pos()) in the mouseReleaseEvent. that way if you zoom in or scroll the scene, the click will happen in the right place in the view. QGraphicsView.mapFromScene

Resources