Building an Image Viewer Desktop Application in Python with Qt: Part 1

So far I have been using Tkinter to build my image viewer app, which is ok, and is an included library, but if you are willing to put in a bit more effort in the setup, you might find Qt a better choice.

Yes, you could say TK is cross-platform, but when it comes to using the destination hardware, Qt has an edge, especially beyond the desktop.

Rather than go directly to Qt, I like the PySide library.

Pyside2 for Developing Python Qt Applications

PySide makes dealing with Qt much easier and more Pythonesque.

One problem, however. PySide does not support Python 3.6.

For 3.6 we need to jump through some slow hoops. Run this command in terminal and go make a beverage or 3:

sudo python3.6 -m pip install --index-url=http://download.qt.io/snapshots/ci/pyside/5.9/latest/ pyside2 --trusted-host download.qt.io

(Switch out the version for the latest trustworthy release).

Eventually, you will be able to just do a regular pip like PySide v1, and they will be rolling out more platforms, but as of writing this is what we have to do in order to stick with the current version of Python.

Viewing a Single Image with PySide2

View the full code in this Gist

The first step is we need to add our modules. Lazily, I just wildcard them.

There are differences between PySide and PySide2 here that catch folks out, so make sure you check the correct version documentation.

import sys
from PySide2.QtWidgets import*
from PySide2.QtGui import*
from PySide2 import QtCore

When someone clicks the Quit button we will call this function:

# example event handler
def quit_app():
    global application
    print("Quit!")
    application.exit()

Now we get to the actual GUI.

First, we need to initiate an application, and we pass it the runtime arguments, even though we don't have any (you will get an error if not). We then create a window, a button, and a label.

The label content could be text, but here we are loading in a picture and applying that data to display.

# base application object for our app
application = QApplication(sys.argv)

# Create a Window
window = QWidget()
window.setWindowTitle("View Image")

# button
button = QPushButton("Quit", window)

# on click handler
button.clicked.connect(quit_app)

# Load Pic
picture = QPixmap("background.png")

# set up the label widget to display the pic
label = QLabel(window)
label.setPixmap(picture)

We are not quite done yet.

In order for the picture to be appropriately visible, we need to grab the dimensions and use those to resize the widget and the window containing it.

Finally we show the window, and pass control to the application for processing.

label.setGeometry(QtCore.QRect(10, 40, picture.width(), picture.height()))

# embiggen the window to correctly fit the pic
window.resize(picture.width()+20, picture.height()+100)
window.show()

# Let QT do its thing
sys.exit(application.exec_())