photo thumbnail viewer

[chezifresh]

I'm looking to create a grid based photo album viewer similar to the image I attached below from Adobe Lightroom (see the center tool).

The idea being that you can scale the view which would change how many thumbnails are displayed on a given row. I also want to be able to rearrange the thumbnails in the grid and even have empty cells between images.

I was thinking that there are a few ways to go about this but I wanted to see if anyone thought one way might be better than another.

1. Use a QGraphicsView (http://doc.trolltech.com/latest/qgraphicsview.html)

not sure how to accomplish it with a QGraphicsView (http://doc.trolltech.com/latest/qgraphicsview.html) especially when it comes to zooming since the QGraphicsView (http://doc.trolltech.com/latest/qgraphicsview.html) zoom scales the painter and doesnt give you a real flow layout. (right?) though i probably dont need to use the graphics view to scale/zoom
I would think this would be the most flexible, allow interesting things like grouping thumbnails and such, not sure how to do it


2. Use a QListView (http://doc.trolltech.com/latest/qlistview.html) and turn on QListView::IconMode.


create thumbnail items and place holder items to simulate a grid?
probably use an item delegate for finer control


3. Write it from scratch and use the example "FlowLayout"

Any ideas?

[yogeshgokul]

I 'd suggest to go with QGraphicsView.
When you need to scale many items, just scale the graphics View and everything inside will be scale accordingly.:)

[Lykurg]

When you need to scale many items, just scale the graphics View and everything inside will be scale accordingly.:)

In that particular case scaling the whole scene makes no sense. But you can call all items with a scale value, draw them new and then rearrange the items in the view:

Status: scale by 20%
calculate the new with of the item (according also to the width of the view)
call all items with 20% and the new calculated width (!= width of the picture)
in the items draw method draw the picture and the gray border
then rearrange the items in the view


voila!

[wysota]

I'd go for QListView. Unless you want some wacky animations, there is nothing Graphics View can give you here.

[scascio]

If I may, I would say that QGraphicsView is not adapated to your case, except for scaling functions, since you will have a single row and propably need to move your items often.

Why not making your own widget and use an array of QLabel, displayed on an QHBoxLayout with spacers? You can overload the resize event to scale the images, if it dos not do it automatically with the strench option and provide an empty label item.

Good luck

S.Cascio

[Lykurg]

If I may,
Of course you can, we are open minded and everybody is free to speak!

I would say that QGraphicsView is not adapated to your case, except for scaling functions, since you will have a single row and propably need to move your items often.

With a QListView you can scale the items also quite easy using a custom delegate or simple use the gridsize and iconSize property. (I haven't thought of that in my first post)


Why not making your own widget and use an array of QLabel, displayed on an QHBoxLayout with spacers? You can overload the resize event to scale the images, if it dos not do it automatically with the strench option and provide an empty label item.

If the items change a lot (I guess it will be the case, if it is used like a folder preview) that solution has a bad performance.


I'd go for QListView. Unless you want some wacky animations, there is nothing Graphics View can give you here.

You also can make some nice and pleasing animations with Graphics View :D
Ok, I was prejudiced because I have to do a similar work in some weeks and I have decided to use graphics view. This is because I want to display some "image buttons" beneath the pictures for rotating, editing etc. And if you alter the first question for this points, do you would still use a list view? Which means you have do deal with a custom delegate and with e.g pressed(const QModelIndex&) in conjunction with QCursor::pos() to determinate if a modifying button was pressed. Or would there be an other possibility?


Thanks

[chezifresh]

Yeah, thats kind of where I'm at. The QListView seems like the most straight forward but is probably the least flexible in terms of customizing the view. I like the idea of using a QGraphicsView and in that rite I'm a bit biased too, but it's certainly a more complex implementation especially when it comes to layout.

I have a widget already implemented using the flow layout example (http://doc.trolltech.com/layouts-flowlayout.html) in a scroll area where the thumbnails are widgets I'm painting. That works alright but the flow layout, which is really similar to the QListView, dictates the placement of the thumbnails... that is unless I put placeholder widgets/items in there to simulate a grid.

I also have a simple QGraphicsView implementation, but with no real grid system. I posted the code for that a while back when I started thinking about this problem http://www.qtcentre.org/forum/f-qt-programming-2/t-how-to-browse-images-in-thumbnail-view-15739.html

The graphics view allows you to draw the grid on the background plane which is enticing, and you can add nice delighters like animations fairly easily. Its just managing that darn layout.

Anyway, it seems like a pretty equally weighted decisiion, they could all certainly work. I'm sure I'll be back for more questions but hopefully I can bug my boss into letting me post the source for the widget for you guys to tear apart

[drhex]

that is unless I put placeholder widgets/items in there to simulate a grid.

Have you also considered using a QGridLayout?

[Lykurg]

If you don't want to do the layout in a Graphics View by your own, even if it's not so complicated, QGraphicsGridLayout/QGraphicsLinearLayout could be an option for you.

[carlossst]

Hello to everybody!

I have just registered today and it is 2 months since I am trying with Qt 4.5 in-depth... but very happy with Qt!
Sometimes I feel rather alone investigating... :confused: That's why I'm here!

My need is very close (thumbnails viewer similar to lightroom) to chezifresh.
I decided to implement it with qgraphicsgridlayout (thumbnail matrix 5x5), and I am progressing fine but slow..., nevertheless some issues have appeared to me:

1) I can not display the thumbnails without any separation among them (as in lightroom).
Qtgraphicsgridlayout performs it bay itself.
Is there any bug? I have played with Qt functions but no good results.
2) When moving images with my implementation of dnd, the initial thumbnail separation varies and rendering after scene.update is not clean.

It would be nice to discuss these topics with somebody! :)

[thaihoangluu]

who can share this code? :(
Thanks

[amleto]

there are examples and demos in the qt install. why not look at those?

[chezifresh]

Here's essentially what I decided on. In general its a QListView or QListWidget (depending on if you want to write your own model, which is good if you have multiple views, ie. list view and icon view). I also use a QStyledItemDelegate to draw the items the way I want. I'm drawing the thumbnail and the text below it as well as a rounded focus rectangle instead of the default stippled line rect.



class QdIconView(QtGui.QListWidget):
def __init__(self, parent=None):
QtGui.QListWidget.__init__(self, parent)


self.setIconSize(QtCore.QSize(160, 90)) # or setGridSize
self.setViewMode(QtGui.QListView.IconMode)
self.setMovement(QtGui.QListView.Static)
self.setResizeMode(QtGui.QListView.Adjust) # re-lays out the items on resize
self.setLayoutMode(QtGui.QListView.Batched) # does the layout with a timer for better performance
self.setWrapping(True) # wraps the items to the next line so theres no horiz scrollbar
self.setDragEnabled(True) # in case you want drag and drop
self.setSpacing(1) # spacing between each item, buggy in Qt < 4.7 but works with small #'s