Develop Reference

pyqtgraph ImageView and color images

I am trying to display an RGB numpy array in an ImageView() (or similar) within a Dock in pyqtgraph.
The general idea is something like this code:
import pyqtgraph as pg
from pyqtgraph.Qt import QtCore, QtGui
import numpy as np
from pyqtgraph.dockarea import Dock, DockArea
class SimDock(Dock):
def __init__(self, *args, **kwargs):
super().__init__(*args, **kwargs)
#self.im1 = pg.image()
self.im1 = pg.ImageView()
self.im1.setImage(np.random.normal(size=(100, 100, 3)))
self.addWidget(self.im1, row=0, col=0)
self.im1.ui.histogram.hide()
self.im1.ui.menuBtn.hide()
self.im1.ui.roiBtn.hide()
app = QtGui.QApplication([])
win = QtGui.QMainWindow()
area = DockArea()
win.setCentralWidget(area)
win.resize(1500, 800)
win.setWindowTitle('pyqtgraph example: dockarea')
simdock = SimDock("Similar Images", size=(500, 500))
area.addDock(simdock, 'right')
win.show()
# Start Qt event loop unless running in interactive mode or using pyside.
if __name__ == '__main__':
import sys
if (sys.flags.interactive != 1) or not hasattr(QtCore, 'PYQT_VERSION'):
app.instance().exec_()
However, when I run the one above I get:
ValueError: could not broadcast input array from shape (100,100,3) into shape (100,100)
When I switch the self.im1 to be pg.image instead of pg.ImageView then an RGB image displays in the Dock, but I get a second empty window (which I assume comes from the pg.image()).
Based on this question, ImageView can accept (M, N, 3) RGB data, but I can't seem to get it to display an RGB image in a widget without the second window popping up.

Well, I found one way of doing it that seems reasonable. There is a post that suggests to subclass pg.ImageView in order to auto add a lookup table for the color. So, in the end I have:
class ColorImageView(pg.ImageView):
"""
Wrapper around the ImageView to create a color lookup
table automatically as there seem to be issues with displaying
color images through pg.ImageView.
"""
def __init__(self, *args, **kwargs):
super().__init__(*args, **kwargs)
self.lut = None
def updateImage(self, autoHistogramRange=True):
super().updateImage(autoHistogramRange)
self.getImageItem().setLookupTable(self.lut)
then the call in my code becomes self.im1 = ColorImageView().
This works for me and seems reasonably simple.

Qt resize layout during widget property animation

I have an existing application that I am polishing off and I want to add some animation to a few of the widgets. Animating widgets with QPropertyAnimation outside of layouts is easy and fun, however when they are in a layout I am having various difficulties. The current one giving me a headache is that when I animate the size of a widget, the layout does not adjust to it's new size.
So lets say I have a QVBoxLayout with three widgets: a label which should expand to all available space, a treeview, and a button. When I click the button I want the tree to collapse and the label to take over it's space. Below is this example in code, and as you can see while the tree animates it's size nothing happens, and then when I hide it at the end of the animation the label pops to fill the now vacant space. So it seems that during the animation the layout does not "know" the tree is resizing. What I would like to happen is that AS the tree shrinks, the label expands to fill it.
Could this could be done not by absolute sizing of the label, but by calling a resize on the layout or something like that? I ask because I want to animate several widgets across my application and I want to find the best way to do this without having to make too many widgets interdependent upon each other.
Example code:
import sys
from PyQt4 import QtGui, QtCore
class AnimatedWidgets(QtGui.QWidget):
def __init__(self):
super(AnimatedWidgets, self).__init__()
layout1 = QtGui.QVBoxLayout()
self.setLayout(layout1)
expanding_label = QtGui.QLabel("Expanding label!")
expanding_label.setStyleSheet("border: 1px solid red")
layout1.addWidget(expanding_label)
self.file_model = QtGui.QFileSystemModel(self)
sefl.file_model.setRootPath("C:/")
self.browse_tree = QtGui.QTreeView()
self.browse_tree.setModel(self.file_model)
layout1.addWidget(self.browse_tree)
shrink_tree_btn = QtGui.QPushButton("Shrink the tree")
shrink_tree_btn.clicked.connect(self.shrink_tree)
layout1.addWidget(shrink_tree_btn)
#--
self.tree_size_anim = QtCore.QPropertyAnimation(self.browse_tree, "size")
self.tree_size_anim.setDuration(1000)
self.tree_size_anim.setEasingCurve(QtCore.QEasingCurve.InOutQuart)
self.tree_pos_anim = QtCore.QPropertyAnimation(self.browse_tree, "pos")
self.tree_pos_anim.setDuration(1000)
self.tree_pos_anim.setEasingCurve(QtCore.QEasingCurve.InOutQuart)
self.tree_anim_out = QtCore.QParallelAnimationGroup()
self.tree_anim_out.addAnimation(self.tree_size_anim)
self.tree_anim_out.addAnimation(self.tree_pos_anim)
def shrink_tree(self):
self.tree_size_anim.setStartValue(self.browse_tree.size())
self.tree_size_anim.setEndValue(QtCore.QSize(self.browse_tree.width(), 0))
tree_rect = self.browse_tree.geometry()
self.tree_pos_anim.setStartValue(tree_rect.topLeft())
self.tree_pos_anim.setEndValue(QtCore.QPoint(tree_rect.left(), tree_rect.bottom()))
self.tree_anim_out.start()
self.tree_anim_out.finished.connect(self.browse_tree.hide)
def main():
app = QtGui.QApplication(sys.argv)
ex = AnimatedWidgets()
ex.show()
sys.exit(app.exec_())
if __name__ == "__main__":
main()

The layouts handle the geometry() of the widgets so that when wanting to change the pos property these are interfacing with their handles so it is very common that you get that type of behavior, a better option is to use a QVariantAnimation to establish a fixed height:
import sys
from PyQt4 import QtGui, QtCore
class AnimatedWidgets(QtGui.QWidget):
def __init__(self):
super(AnimatedWidgets, self).__init__()
layout1 = QtGui.QVBoxLayout(self)
expanding_label = QtGui.QLabel("Expanding label!")
expanding_label.setStyleSheet("border: 1px solid red")
layout1.addWidget(expanding_label)
self.file_model = QtGui.QFileSystemModel(self)
self.file_model.setRootPath(QtCore.QDir.rootPath())
self.browse_tree = QtGui.QTreeView()
self.browse_tree.setModel(self.file_model)
layout1.addWidget(self.browse_tree)
shrink_tree_btn = QtGui.QPushButton("Shrink the tree")
shrink_tree_btn.clicked.connect(self.shrink_tree)
layout1.addWidget(shrink_tree_btn)
#--
self.tree_anim = QtCore.QVariantAnimation(self)
self.tree_anim.setDuration(1000)
self.tree_anim.setEasingCurve(QtCore.QEasingCurve.InOutQuart)
def shrink_tree(self):
self.tree_anim.setStartValue(self.browse_tree.height())
self.tree_anim.setEndValue(0)
self.tree_anim.valueChanged.connect(self.on_valueChanged)
self.tree_anim.start()
def on_valueChanged(self, val):
h, isValid = val.toInt()
if isValid:
self.browse_tree.setFixedHeight(h)
def main():
app = QtGui.QApplication(sys.argv)
ex = AnimatedWidgets()
ex.show()
sys.exit(app.exec_())
if __name__ == "__main__":
main()

How to make QTableWidget adjust to minimal space

Using PyQt5 with Python, I am trying to create a grid of QTableWidgets with various numbers of cells. I make the tables adjustable in size so that they fit nicely to the available size of the window. I am able to adjust the tables correctly while increasing the window size, that is, the cells maintain equal sizes and the QTableWidgets adjust their sizes to the free space. This adjustment is done by overwriting the resizeEvent of QTableWidget class and by setting row and column stretches for QGridLayout. This is illustrated in the figure below.
However, while making the QMainWindow smaller, the QTableWidgets at some point become unable to adjust their sizes smaller.
Is it possible to enable the QTableWidgets to get smaller in sizes when making the window smaller? Clearly, the values in the cells would enable this.
A code with which I have implemented the above table grids is given below.
import sys
from PyQt5.QtWidgets import QApplication, QMainWindow, QGridLayout
from PyQt5.QtWidgets import QTableWidget, QWidget
class MyTable(QTableWidget):
def __init__(self, r, c):
super().__init__(r, c)
self.horizontalHeader().hide()
self.verticalHeader().hide()
def resizeEvent(self, event):
eh = event.size().height()
ew = event.size().width()
ehremain = eh
eqremain = ew
rh = int(eh // self.rowCount())
cw = int(ew // self.columnCount())
for i in range(self.rowCount()-1):
self.setRowHeight(i, rh)
ehremain -= rh
self.setRowHeight(self.rowCount()-1, ehremain)
for j in range(self.columnCount()-1):
self.setColumnWidth(j, cw)
eqremain -= cw
self.setColumnWidth(self.columnCount()-1, eqremain)
class TableGrid(QWidget):
def __init__(self):
super().__init__()
self.table1 = MyTable(1,1)
self.table2 = MyTable(1,3)
self.table3 = MyTable(3,1)
self.table4 = MyTable(3,3)
grid_layout = QGridLayout()
grid_layout.addWidget(self.table1, 0,0)
grid_layout.addWidget(self.table2, 0,1)
grid_layout.addWidget(self.table3, 1,0)
grid_layout.addWidget(self.table4, 1,1)
grid_layout.setRowStretch(0,1)
grid_layout.setRowStretch(1,3)
grid_layout.setColumnStretch(0,1)
grid_layout.setColumnStretch(1,3)
self.setLayout(grid_layout)
self.show()
class Window(QMainWindow):
def __init__(self):
super().__init__()
self.table_grid = TableGrid()
self.setCentralWidget(self.table_grid)
self.show()
if __name__ =="__main__":
app = QApplication.instance() # checks if QApplication already exists
if not app: # create QApplication if it doesnt exist
app = QApplication(sys.argv)
app.aboutToQuit.connect(app.deleteLater)
sheet = Window()
app.exec_()
#sys.exit(0)

The tables won't resize smaller than their default minimum size. So just choose a more appropriate value, like this:
class MyTable(QTableWidget):
def __init__(self, r, c):
...
self.setMinimumSize(40, 40)

mapToScene requires the view being shown for correct transformations?

Primary issue: the QGraphicsView.mapToScene method returns different answers depending on whether or not the GUI is shown. Why, and can I get around it?
The context is I'm trying to write unit tests but I don't want to actually show the tools for the tests.
The small example below illustrates the behavior. I use a sub-classed view that prints mouse click event positions in scene coordinates with the origin at the lower left (it has a -1 scale vertically) by calling mapToScene. However, mapToScene does not return what I am expecting before the dialog is shown. If I run the main section at the bottom, I get the following output:
Size is (150, 200)
Putting in (50, 125) - This point should return (50.0, 75.0)
Before show(): PyQt5.QtCore.QPointF(84.0, -20.0)
After show() : PyQt5.QtCore.QPointF(50.0, 75.0)
Before show(), there is a consistent offset of 34 pixels in x and 105 in y (and in y the offset moves in reverse as if the scale is not being applied). Those offset seem rather random, I have no idea where they are coming from.
Here is the example code:
import numpy as np
from PyQt5.QtCore import pyqtSignal, pyqtSlot, QPointF, QPoint
from PyQt5.QtWidgets import (QDialog, QGraphicsView, QGraphicsScene,
QVBoxLayout, QPushButton, QApplication,
QSizePolicy)
from PyQt5.QtGui import QPixmap, QImage
class MyView(QGraphicsView):
"""View subclass that emits mouse events in the scene coordinates."""
mousedown = pyqtSignal(QPointF)
def __init__(self, *args, **kwargs):
super().__init__(*args, **kwargs)
self.setSizePolicy(QSizePolicy.Fixed,
QSizePolicy.Fixed)
# This is the key thing I need
self.scale(1, -1)
def mousePressEvent(self, event):
return self.mousedown.emit(self.mapToScene(event.pos()))
class SimplePicker(QDialog):
def __init__(self, data, parent=None):
super().__init__(parent=parent)
# Get a grayscale image
bdata = ((data - data.min()) / (data.max() - data.min()) * 255).astype(np.uint8)
wid, hgt = bdata.shape
img = QImage(bdata.T.copy(), wid, hgt, wid,
QImage.Format_Indexed8)
# Construct a scene with pixmap
self.scene = QGraphicsScene(0, 0, wid, hgt, self)
self.scene.setSceneRect(0, 0, wid, hgt)
self.px = self.scene.addPixmap(QPixmap.fromImage(img))
# Construct the view and connect mouse clicks
self.view = MyView(self.scene, self)
self.view.mousedown.connect(self.mouse_click)
# End button
self.doneb = QPushButton('Done', self)
self.doneb.clicked.connect(self.accept)
# Layout
layout = QVBoxLayout(self)
layout.addWidget(self.view)
layout.addWidget(self.doneb)
#pyqtSlot(QPointF)
def mouse_click(self, xy):
print((xy.x(), xy.y()))
if __name__ == "__main__":
# Fake data
x, y = np.mgrid[0:4*np.pi:150j, 0:4*np.pi:200j]
z = np.sin(x) * np.sin(y)
qapp = QApplication.instance()
if qapp is None:
qapp = QApplication(['python'])
pick = SimplePicker(z)
print("Size is (150, 200)")
print("Putting in (50, 125) - This point should return (50.0, 75.0)")
p0 = QPoint(50, 125)
print("Before show():", pick.view.mapToScene(p0))
pick.show()
print("After show() :", pick.view.mapToScene(p0))
qapp.exec_()
This example is in PyQt5 on Windows, but PyQt4 on Linux does the same thing.

Upon diving into the C++ Qt source code, this is the Qt definition of mapToScene for a QPoint:
QPointF QGraphicsView::mapToScene(const QPoint &point) const
{
Q_D(const QGraphicsView);
QPointF p = point;
p.rx() += d->horizontalScroll();
p.ry() += d->verticalScroll();
return d->identityMatrix ? p : d->matrix.inverted().map(p);
}
The critical things there are the p.rx() += d->horizontalScroll(); and likewise vertical scroll. A QGraphicsView always contains scroll bars, even if they are always off or not shown. The offsets observed before the widget is shown are from the values of the horizontal and vertical scroll bars upon initialization, which must get modified to match the view/viewport when the widgets are shown and layouts calculated. In order for mapToScene to operate properly, the scroll bars must be set up to match the scene/view.
If I put the following lines put before the call to mapToScene in the example, then I get the appropriate transformation result without the necessity of showing the widget.
pick.view.horizontalScrollBar().setRange(0, 150)
pick.view.verticalScrollBar().setRange(-200, 0)
pick.view.horizontalScrollBar().setValue(0)
pick.view.verticalScrollBar().setValue(-200)
To do this more generally, you can pull some relevant transformations from the view.
# Use the size hint to get shape info
wid, hgt = (pick.view.sizeHint().width()-2,
pick.view.sizeHint().height()-2) # -2 removes padding ... maybe?
# Get the opposing corners through the view transformation
px = pick.view.transform().map(QPoint(wid, 0))
py = pick.view.transform().map(QPoint(0, hgt))
# Set the scroll bars accordingly
pick.view.horizontalScrollBar().setRange(px.y(), px.x())
pick.view.verticalScrollBar().setRange(py.y(), py.x())
pick.view.horizontalScrollBar().setValue(px.y())
pick.view.verticalScrollBar().setValue(py.y())
This is a hack-ish and ugly solution, so while it does work there may be a more elegant way to handle this.

have you tried implementing your own qgraphicsview and overriding your resizeEvent? When you mess around with mapTo"something" you gotta take care of your resizeEvents, have a look in this piece of code I've took from yours and modified a bit ><
from PyQt5.QtCore import QRectF
from PyQt5.QtWidgets import (QGraphicsScene, QGraphicsView, QVBoxLayout,
QApplication, QFrame, QSizePolicy)
from PyQt5.QtCore import QPoint
class GraphicsView(QGraphicsView):
def __init__(self):
super(GraphicsView, self).__init__()
# Scene and view
scene = QGraphicsScene(0, 0, 150, 200,)
scene.setSceneRect(0, 0, 150, 200)
def resizeEvent(self, QResizeEvent):
self.setSceneRect(QRectF(self.viewport().rect()))
qapp = QApplication(['python'])
# Just something to be a parent
view = GraphicsView()
# Short layout
# Make a test point
p0 = QPoint(50, 125)
# Pass in the test point before and after
print("Passing in point: ", p0)
print("Received point before show:", view.mapToScene(p0))
view.show()
print("Received point after show:", view.mapToScene(p0))
qapp.exec_()
Is that the behavior you wanted? ")

PyQt Rowspan Issues

I'm working on creating a GUI for an Irish Dictionary searcher using PyQt. I have already completed it in tkinter, but heard that PyQt was just much better and the way to go, so I wanted to work on a version of it, too. I'm almost done, except I'm having an issue. I'm creating a bilingual version, Irish and English, but I want both versions to use the same text widget, so you can see words you've called in either version. However, it wouldn't show up in the second one, even having it added to the rid, so I had to remove/add it in my switch callback. However, after I did that, it's not showing up the correct size, despite multiple settings on rowspan. The relevant code is attached. The grid that appears at startup in the EnglishVersion class works perfectly (though it'd be nice if I could make it a bit bigger since a lot of text is getting presented), but after I switch versions it becomes too small to be useful.
Edit: New code containing only the problem, as requested
import sys
from PyQt4 import QtGui, QtCore
class Callback():
def remove():
foo.hide()
bar.show()
foo.layout().removeWidget(foo.text_entry)
bar.layout().addWidget(bar.text_entry, 1, 0, 24, 2)
class Text(QtGui.QWidget):
def __init__(self, parent=None):
super().__init__(parent)
self.text_entry = QtGui.QTextEdit(parent)
class Foo(QtGui.QWidget):
def __init__(self, parent=None):
super().__init__(parent)
self.text_entry = text.text_entry
self.button = QtGui.QPushButton("Remove and readd text")
self.button.clicked.connect(lambda: Callback.remove())
grid = QtGui.QGridLayout()
grid.addWidget(self.button, 0, 0, 1, 2)
grid.addWidget(self.text_entry, 1, 0, 24, 2)
self.setLayout(grid)
class Bar(QtGui.QWidget):
def __init__(self, parent=None):
super().__init__(parent)
self.text_entry = text.text_entry
self.button = QtGui.QPushButton("After it has been pushed")
grid = QtGui.QGridLayout()
grid.addWidget(self.button, 0, 0, 1, 2)
self.setLayout(grid)
app = QtGui.QApplication(sys.argv)
text = Text()
foo = Foo()
bar = Bar()
foo.show()
app.exec_()