In Tkinter, graphical images are displayed by creating independent PhotoImage or BitmapImage objects, and then attaching those image objects to other widgets via image attribute settings. Buttons, labels, canvases, text, and menus can display images by associating prebuilt image objects in this way. To illustrate, Example 9-36 throws a picture up on a button.
Example 9-36. PP3E\Gui\Tour\imgButton.py
I could try to come up with a simpler example, but it would be toughall this script does is make a Tkinter PhotoImage object for a GIF file stored in another directory, and associate it with a Button widget's image option. The result is captured in Figure 9-36.
Figure 9-36. imgButton in action
PhotoImage and its cousin, BitmapImage, essentially load graphics files and allow those graphics to be attached to other kinds of widgets. To open a picture file, pass its name to the file attribute of these image objects. Canvas widgetsgeneral drawing surfaces discussed in more detail later in this tourcan display pictures too; Example 9-37 renders Figure 9-37.
Figure 9-37. An image on canvas
Example 9-37. PP3E\Gui\Tour\imgCanvas.py
Buttons are automatically sized to fit an associated photo, but canvases are not (because you can add objects to a canvas, as we'll see in Chapter 10). To make a canvas fit the picture, size it according to the width and height methods of image objects, as in Example 9-38. This version will make the canvas smaller or larger than its default size as needed, lets you pass in a photo file's name on the command line, and can be used as a simple image viewer utility. The visual effect of this script is captured in Figure 9-38.
Figure 9-38. Sizing the canvas to match the photo
Example 9-38. PP3E\Gui\Tour\imgCanvas2.py
And that's all there is to it. In Chapter 10, we'll see images show up in a Menu, other Canvas examples, and the image-friendly Text widget. In later chapters, we'll find them in an image slideshow (PyView), in a paint program (PyDraw), on clocks (PyClock), and so on. It's easy to add graphics to GUIs in Python/Tkinter.
Once you start using photos in earnest, though, you're likely to run into two tricky bits which I want to warn you about here:
9.9.1. Fun with Buttons and Pictures
I tried to come up with an image demo for this section that was both fun and useful. I settled for the fun part. Example 9-39 displays a button that changes its image at random each time it is pressed.
Example 9-39. PP3E\Gui\Tour\buttonpics-func.py
This code uses a handful of built-in tools from the Python library:
Just for fun, this script also attaches an instance of the demoCheck check button demo bar, which in turn attaches an instance of the Quitter button we wrote earlier. This is an artificial example, of course, but again it demonstrates the power of component class attachment at work.
Notice how this script builds and holds on to all images in its images list. The map here applies a PhotoImage constructor call to every .gif file in the photo directory, producing a list of (file,image) tuples that is saved in a global variable (a list comprehension [(x, PhotoImage(file=x)) for x in files] would do the same). Remember, this guarantees that image objects won't be garbage collected as long as the program is running. Figure 9-39 shows this script in action on Windows.
Figure 9-39. buttonpics in action
Although it may not be obvious in this grayscale book, the name of the GIF file being displayed is shown in red text in the blue label at the top of this window. This program's window grows and shrinks automatically when larger and smaller GIF files are displayed; Figure 9-40 shows it randomly picking a taller photo globbed from the image directory.
Figure 9-40. buttonpics showing a taller photo
And finally, Figure 9-41 captures this script's GUI displaying one of the wider GIFs, selected completely at random from the photo file directory.[*]
Figure 9-41. buttonpics gets political
While we're playing, let's recode this script as a class in case we ever want to attach or customize it later (it could happen). It's mostly a matter of indenting and adding self before global variable names, as shown in Example 9-40.
Example 9-40. PP3E\Gui\Tour\buttonpics.py
This version works the same way as the original, but it can now be attached to any other GUI where you would like to include such an unreasonably silly button.