How can I achieve layout similar to Google Image search in QT (PyQT)?

Question

Hello,

I'm new to QT. I'm using PyQT for GUI development in my project. I want to achieve this layout in my application. This application searches images from an image database. Google image search layout is ideal for my purpose.

I'm following the book "Rapid GUI Programming with Python and Qt" and I'm familiar with layouts. I guess I need to use a grid layout with each result image in each box of grid. & use vertical layout for (image,Qlabel,Qlabel) inside each grid box.

These are some problems I'm facing.

1. Importantly, I'm unable to display image. What control/widget do I need? I cannot find anything similar to PictureBox of .NET

2. How do I seperate these image result by fixed gap like in the image? I'm using Horizontal & vertical spacers but that isn't working?

3. How to set QLabel a clickable (like hyperlink). I don't want to a open a URL. Just the text should be clickable. So, that when user clicks on the link. I can show more information (like next set of results when he clicks on next page number or a new window with image in fullsize when user clicks on 'view') Do we have some new kind of control for this?

4. This is another important issue. I'll display the page numbers of results (like shown in figure) & assuming they are clickable. How do I load a new page of results? I mean what is the equivalent of page in QT?

5. As you can guess. This definitely wont be the first page of GUI. The first page will be exactly like http://google.com (a big logo & text box with button below it). when user clicks the search button. This page will be displayed. Again the same question comes up. How change the pages?

Please give a list of controls I'm going to need for this. Tell me if I'm unaware of something.

Answer 1

Try using QListWidget with viewMode set to IconMode. It should do all for you. BUT if you need to customize your data display use QListView with your own/standard model and own delegate for painting

Answer 2

1/2. For displaying the images and labels use a QListWidget with view mode set to QListView::IconMode. However, if you need to customize the display beyond what the QListWidget/QListWidgetItem api can provide you will need to create your own QAbstractListModel and use a standard QListView with it. Make sure and read Qt's primer on model/view.

As for spacing the images, checkout the spacing property on the list view.

Here is an example from KDE's Dolphin file manager:

3. Use a regular QLabel, but set the contents to be an href.

Example:

edit: Oops I see from your tags you are using PyQt, the following is C++, but should be similar to what you would do in python.

  QLabel *linkLabel = new QLabel;
  linkLabel->setTextFormat( Qt::RichText )
  linkLabel->setText( "<a href=\"someurl\"> Click me! </a>" );
  connect( linkLabel, SIGNAL( linkActivated ( const QString & link ) ), .... )

4. Well, since you are using a Model/View, why bother having page numbers at all? The user will just be able to scroll the view and more pictures will be shown. This is by far the easiest solution as you don't have to do anything once you've got your M/V setup!

However, if you really want to show page numbers it will require more work in your model. For example, have a track the "current page" in the model and only allow access to images on the "current page". Then in your slot connected to the linkActivated() signal tell the model to change pages. I won't go into much more detail as this seriously violates the whole idea behind model/view. The "right way" of doing this would be to subclass QListView and add pagination support, but like I said why not use scroll bars? There isn't any performance hits to doing so.

5. Use a QStackedWidget, addWidget() all your "pages" to it, then call setCurrentIndex/Widget() as needed to switch the pages.

Thoughts: It seems you are very committed to cloning the look, feel, and behavior of Google Image search, which is fine, but Google Image Search is a web application that uses interaction paradigms that are very different than a normal desktop application (links, pages, etc). You are presumably developing a desktop application, and by trying to emulate the behavior of a web app you will find it difficult as the API just isn't designed to support those sorts of interactions. By all means, it is doable, but you'll have your work cut out for you.

If you are extremely intent on sticking to the web based interaction style, why not code your app in javascript and HTML and toss it in a QWebView?