Programming Python (66 page)

Gridding helps—
rows and columns align regularly now—but image shape
still makes this less than ideal. We can achieve a layout that is
perhaps even more uniform than gridding by giving each thumbnail
button a fixed size. Buttons are sized to their images (or text) by
default, but we can always override this if needed.
Example 8-48
does the trick. It
sets the height and width of each button to match the maximum
dimension of the thumbnail icon, so it is neither too thin nor too
high. Assuming all thumbnails have the same maximum dimension
(something our thumb-maker ensures), this will achieve the desired
layout.

"""
use fixed size for thumbnails, so align regularly; size taken from image
object, assume all same max; this is essentially what file selection GUIs do;
"""
import sys, math
from tkinter import *
from PIL.ImageTk import PhotoImage
from viewer_thumbs import makeThumbs, ViewOne
def viewer(imgdir, kind=Toplevel, cols=None):
"""
custom version that lays out with fixed-size buttons
"""
win = kind()
win.title('Viewer: ' + imgdir)
thumbs = makeThumbs(imgdir)
if not cols:
cols = int(math.ceil(math.sqrt(len(thumbs))))      # fixed or N x N
savephotos = []
while thumbs:
thumbsrow, thumbs = thumbs[:cols], thumbs[cols:]
row = Frame(win)
row.pack(fill=BOTH)
for (imgfile, imgobj) in thumbsrow:
size    = max(imgobj.size)                     # width, height
photo   = PhotoImage(imgobj)
link    = Button(row, image=photo)
handler = lambda savefile=imgfile: ViewOne(imgdir, savefile)
link.config(command=handler, width=size, height=size)
link.pack(side=LEFT, expand=YES)
savephotos.append(photo)
Button(win, text='Quit', command=win.quit, bg='beige').pack(fill=X)
return win, savephotos
if __name__ == '__main__':
imgdir = (len(sys.argv) > 1 and sys.argv[1]) or 'images'
main, save = viewer(imgdir, kind=Tk)
main.mainloop()

Figure 8-48
shows the results of applying a fixed size to our buttons; all are the
same size now, using a size taken from the images themselves. The
effect is to display all thumbnails as same-size tiles regardless of
their shape, so they are easier to view. Naturally, other layout
schemes are possible as well; experiment with some of the
configuration options in this code on your own to see their effect on
the display.

Figure 8-48. Fixed-size thumbnail selection GUI, row frames

The thumbnail viewer scripts presented in this section work well
for reasonably sized image directories, and you can use smaller
thumbnail size settings for larger image collections. Perhaps the
biggest limitation of these programs, though, is that the thumbnail
windows they create will become too large to handle (or display at
all) if the image directory contains very many files.

Even with the sample images directory used for this book, we
lost the Quit button at the bottom of the display in the last two
figures because there are too many thumbnail images to show. To
illustrate the difference, the original
Example 8-45
packs the Quit
button first for this very reason—so it is clipped last, after all
thumbnails, and thus remains visible when there are many photos. We
could do a similar thing for the other versions, but we’d still lose
thumbnails if there were too many. A directory from your camera with
many images might similarly produce a window too large to fit on your
computer’s screen.

To do better, we could arrange the thumbnails on a widget that
supports
scrolling
. The open source
Pmw package includes a handy scrolled frame that may
help. Moreover, the standard tkinter
Canvas
widget gives us more control over image displays
(including placement by absolute pixel coordinates) and supports
horizontal and vertical scrolling of its content.

In fact, in the next chapter, we’ll code one final extension to
our script which does just that—it displays thumbnails in a scrolled
canvas, and so it handles large collections much better. Its thumbnail
buttons are fixed-size as in our last example here, but are positioned
at computed coordinates. I’ll defer further details here, though,
because we’ll study that extension in conjunction with canvases in the
next chapter. And in
Chapter 11
, we’ll
apply this technique to an even more full-featured image program
called PyPhoto.

To learn how these programs do their jobs, though, we need to
move on to the next chapter, and the second
half of our widget tour.

• Menu
,
  Menubutton
, and
  OptionMenu
widgets
  

• The
  Scrollbar
widget: for
  scrolling text, lists, and canvases
  

• The
  Listbox
widget: a list of
  multiple selections
  

• The
  Text
widget: a general
  text display and editing tool
  

• The
  Canvas
widget: a general
  graphical drawing tool
  

• The
  grid
table-based geometry
  manager
  

• Time-based tools:
  after
,
  update
,
  wait
, and threads
  

• Basic tkinter animation techniques
  

• Clipboards, erasing widgets and windows, and so on
  

1. Create a topmost
   Menu
as
   the child of the window widget and configure the window’s
   menu
attribute to be the new
   Menu
.
   

2. For each pull-down object, make a new
   Menu
as the child of the topmost
   Menu
and add the child as a cascade of the
   topmost
   Menu
using
   add_cascade
.
   

3. Add menu selections to each pull-down
   Menu
from step 2, using the
   command
options of
   add_command
to register selection callback
   handlers.
   

4. Add a cascading submenu by making a new
   Menu
as the child of the
   Menu
the cascade extends and using
   add_cascade
to link the parent to
   the child.
   

Example 9-1. PP4E\Gui\Tour\menu_win.py

# Tk8.0 style top-level window menus
from tkinter import *                              # get widget classes
from tkinter.messagebox import *                   # get standard dialogs
def notdone():
showerror('Not implemented', 'Not yet available')
def makemenu(win):
top = Menu(win)                                # win=top-level window
win.config(menu=top)                           # set its menu option
file = Menu(top)
file.add_command(label='New...',  command=notdone,  underline=0)
file.add_command(label='Open...', command=notdone,  underline=0)
file.add_command(label='Quit',    command=win.quit, underline=0)
top.add_cascade(label='File',     menu=file,        underline=0)
edit = Menu(top, tearoff=False)
edit.add_command(label='Cut',     command=notdone,  underline=0)
edit.add_command(label='Paste',   command=notdone,  underline=0)
edit.add_separator()
top.add_cascade(label='Edit',     menu=edit,        underline=0)
submenu = Menu(edit, tearoff=True)
submenu.add_command(label='Spam', command=win.quit, underline=0)
submenu.add_command(label='Eggs', command=notdone,  underline=0)
edit.add_cascade(label='Stuff',   menu=submenu,     underline=0)
if __name__ == '__main__':
root = Tk()                                        # or Toplevel()
root.title('menu_win')                             # set window-mgr info
makemenu(root)                                     # associate a menu bar
msg = Label(root, text='Window menu basics')       # add something below
msg.pack(expand=YES, fill=BOTH)
msg.config(relief=SUNKEN, width=40, height=7, bg='beige')
root.mainloop()

Separator lines

The script makes a separator in the Edit menu with
add_separator
; it’s just a line used to
set off groups of related entries.

Tear-offs

The script also disables menu tear-offs in the Edit pull
down by passing a
tearoff
=
False
widget option to
Menu
. Tear-offs are dashed lines that
appear by default at the top of tkinter menus and create a new
window containing the menu’s contents when clicked. They can be a
convenient shortcut device (you can click items in the tear-off
window right away, without having to navigate through menu trees),
but they are not widely used on all platforms.

Keyboard shortcuts

The script uses the
underline
option to make a unique letter
in a menu entry a keyboard shortcut. It gives the offset of the
shortcut letter in the entry’s label string. On Windows, for
example, the Quit option in this script’s File menu can be
selected with the mouse but also by pressing Alt, then “f,” and
then “q.” You don’t strictly have to use
underline
—on Windows, the first letter
of a pull-down name is a shortcut automatically, and arrow and
Enter keys can be used to select pull-down items. But explicit
keys can enhance usability in large menus; for instance, the key
sequence Alt-E-S-S runs the quit action in this script’s nested
submenu.

Example 9-2. PP4E\Gui\Tour\menu_win-multi.py

from menu_win import makemenu       # reuse menu maker function
from tkinter import *
root = Tk()
for i in range(3):                  # three pop-up windows with menus
win = Toplevel(root)
makemenu(win)
Label(win, bg='black', height=5, width=25).pack(expand=YES, fill=BOTH)
Button(root, text="Bye", command=root.quit).pack()
root.mainloop()

Example 9-3. PP4E\Gui\Tour\menu_frm.py

# Frame-based menus: for top-levels and components
from tkinter import *                              # get widget classes
from tkinter.messagebox import *                   # get standard dialogs
def notdone():
showerror('Not implemented', 'Not yet available')
def makemenu(parent):
menubar = Frame(parent)                        # relief=RAISED, bd=2...
menubar.pack(side=TOP, fill=X)
fbutton = Menubutton(menubar, text='File', underline=0)
fbutton.pack(side=LEFT)
file = Menu(fbutton)
file.add_command(label='New...',  command=notdone,     underline=0)
file.add_command(label='Open...', command=notdone,     underline=0)
file.add_command(label='Quit',    command=parent.quit, underline=0)
fbutton.config(menu=file)
ebutton = Menubutton(menubar, text='Edit', underline=0)
ebutton.pack(side=LEFT)
edit = Menu(ebutton, tearoff=False)
edit.add_command(label='Cut',     command=notdone,     underline=0)
edit.add_command(label='Paste',   command=notdone,     underline=0)
edit.add_separator()
ebutton.config(menu=edit)
submenu = Menu(edit, tearoff=True)
submenu.add_command(label='Spam', command=parent.quit, underline=0)
submenu.add_command(label='Eggs', command=notdone,     underline=0)
edit.add_cascade(label='Stuff',   menu=submenu,        underline=0)
return menubar
if __name__ == '__main__':
root = Tk()                                        # or TopLevel or Frame
root.title('menu_frm')                             # set window-mgr info
makemenu(root)                                     # associate a menu bar
msg = Label(root, text='Frame menu basics')        # add something below
msg.pack(expand=YES, fill=BOTH)
msg.config(relief=SUNKEN, width=40, height=7, bg='beige')
root.mainloop()

Figure 9-6. With the Edit menu selected

Example 9-4. PP4E\Gui\Tour\menu_frm-multi.py

from menu_frm import makemenu         # can't use menu_win here--one window
from tkinter import *                 # but can attach frame menus to windows
root = Tk()
for i in range(2):                    # 2 menus nested in one window
mnu = makemenu(root)
mnu.config(bd=2, relief=RAISED)
Label(root, bg='black', height=5, width=25).pack(expand=YES, fill=BOTH)
Button(root, text="Bye", command=root.quit).pack()
root.mainloop()

Example 9-5. PP4E\Gui\Tour\menu_frm-multi2.py

from menu_frm import makemenu         # can't use menu_win here--root=Frame
from tkinter import *
root = Tk()
for i in range(3):                    # three menus nested in the containers
frm = Frame()
mnu = makemenu(frm)
mnu.config(bd=2, relief=RAISED)
frm.pack(expand=YES, fill=BOTH)
Label(frm, bg='black', height=5, width=25).pack(expand=YES, fill=BOTH)
Button(root, text="Bye", command=root.quit).pack()
root.mainloop()

In fact, menus based on
Menubutton
are even more general than
Example 9-3
implies—they can
actually show up anywhere on a display that normal buttons can, not
just within a menu bar
Frame
.
Example 9-6
makes a
Menubutton
pull-down list that simply shows
up by itself, attached to the root window;
Figure 9-8
shows the GUI it
produces.

from tkinter import *
root    = Tk()
mbutton = Menubutton(root, text='Food')     # the pull-down stands alone
picks   = Menu(mbutton)
mbutton.config(menu=picks)
picks.add_command(label='spam',  command=root.quit)
picks.add_command(label='eggs',  command=root.quit)
picks.add_command(label='bacon', command=root.quit)
mbutton.pack()
mbutton.config(bg='white', bd=4, relief=RAISED)
root.mainloop()

Figure 9-8. A Menubutton all by itself

The related tkinter
Optionmenu
widget
displays an item selected from a pull-down menu. It’s roughly like a
Menubutton
plus a display label,
and it displays a menu of choices when clicked, but you must link
tkinter variables (described in
Chapter 8
) to fetch the choice after
the fact instead of registering callbacks, and menu entries are passed
as arguments in the widget constructor call after the variable.

Example 9-7
illustrates typical
Optionmenu
usage and builds the interface captured in
Figure 9-9
. Clicking on either of the first
two buttons opens a pull-down menu of options; clicking on the third
“state” button fetches and prints the current values displayed in the
first two.

from tkinter import *
root = Tk()
var1 = StringVar()
var2 = StringVar()
opt1 = OptionMenu(root, var1, 'spam', 'eggs',  'toast')     # like Menubutton
opt2 = OptionMenu(root, var2, 'ham',  'bacon', 'sausage')   # but shows choice
opt1.pack(fill=X)
opt2.pack(fill=X)
var1.set('spam')
var2.set('ham')
def state(): print(var1.get(), var2.get())                  # linked variables
Button(root, command=state, text='state').pack()
root.mainloop()

Figure 9-9. An Optionmenu at work

There are other menu-related topics that we’ll skip here in the
interest of space. For instance, scripts can add entries to system
menus and can generate pop-up menus (posted in response to events,
without an associated button). Refer to Tk and tkinter resources for
more details on this front.

In addition to simple selections and cascades, menus can also
contain disabled entries, check button and radio button selections,
and bitmap and photo images. The next section demonstrates how some of
these special menu entries
are programmed.