image thumbnails layout in PyQt

[Panupat Chongstitwattana]

If I have a list of full path + image file names, how do I populate them as square thumbnails with text label into scrollable area? What class should I look at? Should I use QScrollArea for the wrapper? Something similar to sunday pipeline's
http://www.3dg.dk/2011/08/12/sunday-pipeline-maya-public/

Thanks!

[jdob]

The simplest way to do this is probably using QLabel(s) for text and images and laying them out in a QGridLayout.  You'll have to use 2 QLabels if you want to display both an image and text (since QLabel shows an image or text but not both).  In that case, you'll need to place your image and text inside a QVBoxLayout and then add that layout to the grid.  Then you can wrap the grid layout inside a QScrollArea.

Another (more flexible) way to solve this is using Qt's Graphics View framework.  Take a look at QGraphicsPixmapItem and QGraphicsSimpleTextItem

[Panupat Chongstitwattana]

Thanks jdob!

Finally I got the thumbnails into my view by making them icons of QPushButton and lay them in their own widgets.

Is there any flag to control how the image got resized into icon? Right now it retains it's aspect ratio, leaving some grey color where it doesn't cover. I actually want it to cover the whole icon area, cropping out what's beyond instead. Is there a way to do so?

Best regard,
Panupat.

--
view archives: http://groups.google.com/group/python_inside_maya
change your subscription settings: http://groups.google.com/group/python_inside_maya/subscribe

[Justin Israel]

I'm not exactly sure what you are after, but here is a simple example of how to control the size of the icon in the button independently of the button:

w = QtGui.QWidget()

w.resize(300,200)

layout = QtGui.QVBoxLayout(w)

button = QtGui.QPushButton()

button.setFixedSize(60,60)

layout.addWidget(button)

ico = QtGui.QIcon("smile.png")

button.setIcon(ico)

button.setIconSize(button.size())

button.setFlat(True)

You can set the button to flat, so that it only shows when you click. And you can set the icon size directly. But it tends to cause issues if it is set larger than the size of the actual button.

[jdob]

You'll have to handle the cropping/scaling yourself.  Fortunately QPixmap makes this pretty easy - check out QPixmap.copy() and QPixmap.scaled().  If I understand you correctly, you probably want to do something like this:


pixmap = QtGui.QPixmap('/path/to/image.png')

# resize pixmap
pixmap = pixmap.scaled(button.size(), QtCore.Qt.KeepAspectRatioByExpanding, QtCore.Qt::SmoothTransformation)

# crop pixmap - the following assumes the image aspect is always wider than the button.  if that's not the case
# you'll need to compare your image/button aspects and crop vertically/horizontally as necessary
cropOffsetX = (pixmap.width() - button.size().width()) / 2
pixmap = pixmap.copy(cropOffsetX, 0, button.size().width(), button.size().height())

button.setIcon(QtGui.QIcon(pixmap))

[Jay Goodman]

I had an app that created icons from QPixmaps, but I ran into performance issues because my source images were so much larger than the icons, so I ended up generating xpm icon files on the fly and it really sped things up.