(For more resources on Python, see here.)

Project: Thumbnail Maker

Let’s take up a project now. We will apply some of the operations we learned in the previous article, to create a simple Thumbnail Maker utility. This application will accept an image as an input and will create a resized image of that image. Although we are calling it a thumbnail maker, it is a multi-purpose utility that implements some basic image-processing functionality.

Before proceeding further, make sure that you have installed all the packages discussed at the beginning of the previous article. The screenshot of the Thumbnail Maker dialog is show in the following illustration.

The Thumbnail Maker GUI has two components:

1. The left panel is a ‘control area’, where you can specify certain image parameters along with options for input and output paths.
2. A graphics area on the right-hand side where you can view the generated image.

In short, this is how it works:

1. The application takes an image file as an input.
2. It accepts user input for image parameters such as dimensions in pixel, filter for re-sampling and rotation angle in degrees.
3. When the user clicks the OK button in the dialog, the image is processed and saved at a location indicated by the user in the specified output image format.

Time for action – play with Thumbnail Maker application

First, we will run the Thumbnail Maker application as an end user. This warm-up exercise intends to give us a good understanding of how the application works. This, in turn, will help us develop/learn the involved code quickly. So get ready for action!

1. Download the files ThumbnailMaker.py, ThumbnailMakeDialog.py, and Ui_ThumbnailMakerDialog.py from Packt website. Place these files in some directory.
2. From the command prompt, change to this directory location and type the following command:

   python ThumbnailMakerDialog.py

   The Thumbnail Maker dialog that pops up was shown in the earlier screenshot. Next, we will specify the input-output paths and various image parameters. You can open any image file of your choice. Here, the flower image shown in some previous sections will be used as an input image. To specify an input image, click on the small button with three dots …. It will open a file dialog. The following illustration shows the dialog with all the parameters specified.

   

3. If “Maintain Aspect Ratio” checkbox is checked, internally it will scale the image dimension so that the aspect ratio of the output image remains the same. When the OK button is clicked, the resultant image is saved at the location specified by the Output Location field and the saved image is displayed in the right-hand panel of the dialog. The following screenshot shows the dialog after clicking OK button.

   

4. You can now try modifying different parameters such as output image format or rotation angle and save the resulting image.
5. See what happens when the Maintain Aspect Ratio checkbox is unchecked. The aspect ratio of the resulting image will not be preserved and the image may appear distorted if the width and height dimensions are not properly specified.
6. Experiment with different re-sampling filters; you can notice the difference between the quality of the resultant image and the earlier image.
7. There are certain limitations to this basic utility. It is required to specify reasonable values for all the parameters fields in the dialog. The program will print an error if any of the parameters is not specified.

What just happened?

We got ourselves familiar with the user interface of the thumbnail maker dialog and saw how it works for processing an image with different dimensions and quality. This knowledge will make it easier to understand the Thumbnail Maker code.

Generating the UI code

The Thumbnail Maker GUI is written using PyQt4 (Python bindings for Qt4 GUI framework). Detailed discussion on how the GUI is generated and how the GUI elements are connected to the main functions is beyond the scope of this article. However, we will cover certain main aspects of this GUI to get you going. The GUI-related code in this application can simply be used ‘as-is’ and if this is something that interests you, go ahead and experiment with it further! In this section, we will briefly discuss how the UI code is generated using PyQt4.

Time for action – generating the UI code

PyQt4 comes with an application called QT Designer. It is a GUI designer for QT-based applications and provides a quick way to develop a graphical user interface containing some basic widgets. With this, let’s see how the Thumbnail Maker dialog looks in QT Designer and then run a command to generate Python source code from the .ui file.

1. Download the thumbnailMaker.ui file from the Packt website.
2. Start the QT Designer application that comes with PyQt4 installation.
3. Open the file thumbnailMaker.ui in QT Designer. Notice the red-colored borders around the UI elements in the dialog. These borders indicate a ‘layout’ in which the widgets are arranged. Without a layout in place, the UI elements may appear distorted when you run the application and, for instance, resize the dialog. Three types of QLayouts are used, namely Horizontal, Vertical, and Grid layout.

   

4. You can add new UI elements, such as a QCheckbox or a QLabel, by dragging and dropping it from the ‘Widget Box’ of QT Designer. It is located in the left panel by default.
5. Click on the field next to the label “Input file”. In the right-hand panel of QT Designer, there is a Property Editor that displays the properties of the selected widget (in this case it’s a QLineEdit). This is shown in the following illustration. The Property Editor allows us to assign values to various attributes such as the objectName, width, and height of the widget, and so on.

   Qt Designer shows the details of the selected widget in Property Editor.

   

6. QT designer saves the file with extension .ui. To convert this into Python source code, PyQt4 provides a conversion utility called pyuic4. On Windows XP, for standard Python installation, it is present at the following location—C:Python26 Libsite-packagesPyQt4pyuic4.bat. Add this path to your environment variable. Alternatively specify the whole path each time you want to convert ui file to Python source file. The conversion utility can be run from the command prompt as:

   pyuic4 thumbnailMaker.ui -o Ui_ThumbnailMakerDialog.py

7. This script will generate Ui_ThumbnailMakerDialog.py with all the GUI elements defined. You can further review this file to understand how the UI elements are defined.

What just happened?

We learned how to autogenerate the Python source code defining UI elements of Thumbnail Maker Dialog from a Qt designer file.

Have a go hero – tweak UI of Thumbnail Maker dialog

Modify the thumbnailMaker.ui file in QT Designer and implement the following list of things in the Thumbnail Maker dialog.

1. Change the color of all the line edits in the left panel to pale yellow.
2. Tweak the default file extension displayed in the Output file Format combobox such that the first option is .png instead of .jpeg

   Double click on this combobox to edit it.

3. Add new option .tiff to the output format combobox.
4. Align the OK and Cancel buttons to the right corner.

   You will need to break layouts, move the spacer around, and recreate the layouts.

5. Set the range of rotation angle 0 to 360 degrees instead of the current -180 to +180 degrees.

After this, create Ui_ThumbnailMakerDialog.py by running the pyuic4 script and then run the Thumbnail Maker application.