3x2 image grid with zooming+hiding
-
Hello.
I have been thinking about a couple of days on how to implement this, so far I have tried a couple of approaches, but I wanted to see if someone more knowledgeable can give be a couple of hints on the direction I should be taking for this one.
I want to implement a 3x2 image grid. The images are part of a table in a sqlite database (6 columns, but the table holds more info), that part is already handled and as you can guess the number of images will be 6 or less. I don't mind having empty places in the grid.
So far, I have been implementing something based on QPushButton, I am setting the images as the icon for each button which -mostly- works. However I needed a way to zoom the images. On a first stage, this zoom will work this way: you activate the zoom and the relevant button takes over the whole grid, while all its 5 neighbours will be set as hidden.
So far so simple , but, since the clicked() event is being used to assign the image for each button (via a QFileDialog) and QPushButton doesn't attend doubleclicks or rightclicks I don't have any straight way to attach any more functionalities to it. Furthermore, I don't really want to deviate so much from the standards since the final users for this thing will not be too versed in computers. So, the simpler the thing stands, the better.
I have progressed from QPushButtons to QToolButtons, and set their popupMode to MenuButtonPopup. This is surely a better way to handle this and I can attach as much actions as I need to each button, plus the users will see the arrow next to the item, and will therefore feel the "urge" to click it :lol: It's more visual and I think it will work just fine.
I wanted to ask if you guys think that this approach is ok for an image grid, and will also like to hear you thought on how would you go about implement this in a different manner.
I don't know if there's some simpler way to design an image gallery like this in qt, or even some pre-made widget I can use. I have been considering using some of the *Lists in Icon mode, but I wouldn't even know how I'd go about implementing the zoom in there without using an extra dialog above my main window, which I'd prefer not to.
Well, thanks for your thoughts or just for reading. ;)
-
There a million ways to implement such behavior.
You can use QGraphicsView for example.
But you can also use QListView as you said and add a QWidget showing the image over all others zoomed (with the viewport set as parent widget).I personally like the idea of javascript lightbox galleries (use google search if you don't know what i mean). I think they are well understandable for the user. You can also use Animations (QPropertyAnimation) to show the user what happens step-by-step instead of doing immediate changes in the gui.
That were just some thoughts for the beginning.
-
[quote author="raven-worx" date="1376379389"]There a million ways to implement such behavior.
You can use QGraphicsView for example.[/quote]I've been looking into that as well. One of my ideas involved the QToolButton grid plus a QGraphicsView, then the usual hide() and show() magic. This is easy to implement, and it mostly does what I want.
There's one thing I had not considered until now though, which might drive me into another way. But I'll have to iron that out a bit before coming back for help ;)
[quote]
But you can also use QListView as you said and add a QWidget showing the image over all others zoomed (with the viewport set as parent widget).
[/quote]This might be a better option, I'll have to investigate it and see how it works.
[quote]
I personally like the idea of javascript lightbox galleries (use google search if you don't know what i mean). I think they are well understandable for the user. You can also use Animations (QPropertyAnimation) to show the user what happens step-by-step instead of doing immediate changes in the gui.
[/quote]Yes, this works well. But for now Javascript is out of the question. Too much to worry about right now :)
[quote]That were just some thoughts for the beginning. [/quote]
Thanks a ton. These tips might put me in the right track.
-
[quote author="i92guboj" date="1376381968"]
Yes, this works well. But for now Javascript is out of the question. Too much to worry about right now :)
[/quote]
I only meant user-interface design wise.[quote author="i92guboj" date="1376382065"]Uh, by the way, can you use QListView, which is model based, with 6 table columns? I guess no, then, should I be using QListWidget?
[/quote]
You could use a custom model which wraps around your existing model which reads the data from your existing model and returns the right column and row count. But this would argument for an easier solution using QGraphicsView or custom widget from scratch.I would suggest going for the QGraphicsView approach. Add your pixmap items to it and layout them in the scene. You can also handle click events and add painting to the items when you subclass them.
