how to browse images in thumbnail view?

[chezifresh]

Yeah, I'm actually using a QGraphicsView and a QGraphicsPixmapItem
Because I know there are others out there with the same problem I'll post the code I have so far (still haven't implemented it using QImage though)

In PyQt

import PyQt4
from PyQt4 import QtGui
from PyQt4 import QtCore
from PyQt4.QtCore import Qt
from PyQt4.QtCore import SIGNAL
 
class QdGraphicsPixmapItem(QtGui.QGraphicsPixmapItem):
    def __init__(self, image, parent=None):
        QtGui.QGraphicsPixmapItem.__init__(self, parent)
        self._image = image
        self._loaded = False
        self.setFlags(self.flags() | QtGui.QGraphicsItem.ItemIsSelectable | QtGui.QGraphicsItem.ItemIsMovable )
 
    def paint(self, painter, styleopt, widget):
        if not self._loaded:
            self._loaded = True
            pixmap = QtGui.QPixmap(self._image)
            thumb = pixmap.scaled(200, 200, Qt.KeepAspectRatio, Qt.SmoothTransformation)
            self.setPixmap(QtGui.QPixmap(self._image).scaled(200, 200))
        QtGui.QGraphicsPixmapItem.paint(self, painter, styleopt, widget)
 
class QdThumbnailView(QtGui.QGraphicsView):
    def __init__(self, images, parent=None):
        QtGui.QGraphicsView.__init__(self, parent)
        self._scene = QtGui.QGraphicsScene()
 
        total = len(images)
        current = 0
        for image in images:
            #print current, 'of', total, os.path.basename(image)
            if os.path.isdir(image) or os.path.basename(image).startswith('.'):
                continue
            current += 1
 
            item = QdGraphicsPixmapItem(image, current)
            item.setPos(0, 200*current)
            self._scene.addItem(item)
 
        self._scene.setSceneRect(0, 0, 200, 200*current)
        self.setScene(self._scene)

import PyQt4
from PyQt4 import QtGui
from PyQt4 import QtCore
from PyQt4.QtCore import Qt
from PyQt4.QtCore import SIGNAL

class QdGraphicsPixmapItem(QtGui.QGraphicsPixmapItem):
    def __init__(self, image, parent=None):
        QtGui.QGraphicsPixmapItem.__init__(self, parent)
        self._image = image
        self._loaded = False
        self.setFlags(self.flags() | QtGui.QGraphicsItem.ItemIsSelectable | QtGui.QGraphicsItem.ItemIsMovable )

    def paint(self, painter, styleopt, widget):
        if not self._loaded:
            self._loaded = True
            pixmap = QtGui.QPixmap(self._image)
            thumb = pixmap.scaled(200, 200, Qt.KeepAspectRatio, Qt.SmoothTransformation)
            self.setPixmap(QtGui.QPixmap(self._image).scaled(200, 200))
        QtGui.QGraphicsPixmapItem.paint(self, painter, styleopt, widget)

class QdThumbnailView(QtGui.QGraphicsView):
    def __init__(self, images, parent=None):
        QtGui.QGraphicsView.__init__(self, parent)
        self._scene = QtGui.QGraphicsScene()

        total = len(images)
        current = 0
        for image in images:
            #print current, 'of', total, os.path.basename(image)
            if os.path.isdir(image) or os.path.basename(image).startswith('.'):
                continue
            current += 1

            item = QdGraphicsPixmapItem(image, current)
            item.setPos(0, 200*current)
            self._scene.addItem(item)

        self._scene.setSceneRect(0, 0, 200, 200*current)
        self.setScene(self._scene)

To copy to clipboard, switch view to plain text mode 

You can imagine using a pool of background threads to load the thumbnails instead of loading them on demand. Thats where the QImage comes into play

[drhex]

I'm writing an application that displays many thumbnails (as QLabels in a grid layout).
Some more hints for the background loading + scaling is to

• Use exiv2 to extract embedded thumbnails in e.g. digital camera files
• store computed thumbnails in a database that can be shared with other applications

[wysota]

Using QLabels to display many thumbnails is a big resource hog. All the images have to be kept in the server memory all the time and layouts need to be recalculated every time you add a new image. Using Item Views or Graphics View is much more resource efficient.

[drhex]

Does Graphics View then store its data somewhere else and transfer it over to the server when needed? Won't that make it slower?

[chezifresh]

I'm using a graphics view however I want to use a flow layout which I dont believe exists for QGraphicsPixmapItems so I'm thinking I'm going to have to implement that myself... which seems like a daunting task.

And so we're all on the same page I want the GraphicsView thumbnail viewer to have vertical scrollbars but no horizontal ones. The thumbnails would show up in rows, say 4 to a row and as you zoom in the icons would resize and eventually you'd have 3 to a row... etc

I'm pretty sure there are other people out there looking to do the same exact thing since thats exactly how it works in thumbnail view in nautilus, konqueror, finder, etc. Basically any file browser that supports thumbnail views.

Since konqueror is a Qt app its probably the best example... though unfortunately no one else can use it because its so KDE specific. I was hoping that we could find a Qt example of something like this in the 4.5 examples but no dice.

In general it seems like it would be an awesome widget to have in say source forge or something with SIP bindings and all. Too bad Qt doesn't support a community of user made widgets in their git repos. The Qt labs examples are a great start but only the guys at Qt seem to be able to contribute.

[chezifresh]

Just an update...

I did some digging into the replacement for Konqueror, "Dolphin", and it appears to be using an item view for its thumbnail view (a KCategorizedView which is derived from a QListView). At least as far as I can tell it doesnt appear to be taking advantage of the QGraphicsView.

I'm assuming they're using that because they have a QDirModel driving it.

It sure would be nice to have an open source thumbnail viewer that takes advantage of the QGraphicsView. Not that my code is all that fantastic, but if I make some headway on one I'll post some stuff back here at the very least.

[chezifresh]

Ok, as promised I have some code that will hopefully get some people started, its attached as a PyQt example

I apologize for the lack of comments and docstrings but this was more of a mockup than anything else

Here's how to use:

app = QtGui.QApplication([])
widget = QdContactSheet()
images = # list of images you want to view as thumbnails
images.sort()
widget.load(images)
 
widget.setWindowTitle("Contact Sheet")
widget.resize(1000, 800)
widget.show()
app.exec_()

app = QtGui.QApplication([])
widget = QdContactSheet()
images = # list of images you want to view as thumbnails
images.sort()
widget.load(images)

widget.setWindowTitle("Contact Sheet")
widget.resize(1000, 800)
widget.show()
app.exec_()

To copy to clipboard, switch view to plain text mode