GUIs with Tkinter

Tutorials Applied Visualizaton

Summer Term 2010

Why GUI?

Part III - GUIs with Tkinter

Because this is nice

[20:51:11]
[20:51:11]
[20:51:11]
[20:51:11]
[20:51:11]
[20:51:11]
[20:51:11]
[20:51:11]
[20:51:11]
...

lyra:~
lyra:~
lyra:~
lyra:~
lyra:~
lyra:~
lyra:~
lyra:~
lyra:~

$
$
$
$
$
$
$
$
$

python
python
python
python
python
python
python
python
python

dosomething.py
dosomething.py
dosomething.py
dosomething.py
dosomething.py
dosomething.py
dosomething.py
dosomething.py
dosomething.py

file1
file2
file3
file4
file5
file6
file7
file8
file9

GUIs with Tkinter

GUIs with Tkinter

Why GUI?

Why GUI?

But this is nicer

Or the visualization way

[20:51:11]
[20:51:11]
[20:51:11]
[20:51:11]
[20:51:11]
[20:51:11]
[20:51:11]
[20:51:11]
[20:51:11]
[20:51:11]
[20:51:11]
[20:51:11]
[20:51:11]
[20:51:11]
[20:51:11]
[20:51:11]
[20:51:11]
[20:51:11]
[20:51:11]
[20:51:11]
[20:51:11]

lyra:~
lyra:~
lyra:~
lyra:~
lyra:~
lyra:~
lyra:~
lyra:~
lyra:~
lyra:~
lyra:~
lyra:~
lyra:~
lyra:~
lyra:~
lyra:~
lyra:~
lyra:~
lyra:~
lyra:~
lyra:~

$ python doisosurface.py 50
$
$
$
$
$
$
$
$
$ python doisosurface.py 900
$
$
$
$
$
$
$
$
$ python doisosurface.py 1250
$
$

GUIs with Tkinter

GUIs with Tkinter

Why GUI?

Tkinter

Or the visualization way

Python interface for Tk

Tk is a library for rapid GUI scripting
Easy to use
Good integration in VTK
Widely available

GUIs with Tkinter

GUIs with Tkinter

Tkinter comes as module for Python

Insertion - Python classes

import Tkinter

The expressions

from Tkinter import *

root = Tk()

Tkinter.wantobjects = 0 # WINDOWS users

btn = Button(root, text="Quit", command=root.quit)

def say_hi():
print "Hello Class"

root = Tk()

btn = Button(root, text="Quit", command=root.quit)

btn.pack()

Classes have the usual meaning in Python

btn2 = Button(root, text="Say Hi", command=say_hi)

btn2.pack()

instantiate Python classes

Definition of objects with attributes and methods

In order to encapsulate and hide behavior

root.mainloop()

GUIs with Tkinter

GUIs with Tkinter

Insertion - Python classes

Tk GUIs are built hierarchical

Instantiation uses function syntax

root = Tk()

root = Tk()
btn = Button(root, text="Quit", command=root.quit)

You need one root window

Attributes and methods are referenced with the

. operator

btn.pack()

Does not have to be called root, but it usually is

Then you can create other elements as children of that
root window (e.g. a Button)
btn = Button(root, text="Quit", command=root.quit)

someotherclass.value = 10

Syntax is quite similar to that of accessing module

contents

GUIs with Tkinter

10

GUIs with Tkinter

Tk GUIs are built hierarchical

Tk GUIs are built hierarchical

Root Window
(Tk())

Of course you can have more than

one hierarchy
Toplevel

Frame

Button

Button

Root
Window

Frame

...

Button

11

Frame

Button

Button

Button

...

...

12

GUIs with Tkinter

GUIs with Tkinter

The mainloop() method

The event loop in GUI programs

Last call you issue actively in the entry method

Starts message processing

From there, any GUI application is event driven!

There is usually only one mainloop per thread

(i.e. in our case only one mainloop at all)

That is why we must differentiate between the Root

window (Tk()) and another Toplevel window

Your script

Command Function
(aka Event Handler)

13

GUIs with Tkinter

GUIs with Tkinter

Widgets

Widgets

Tkinter supports 15 core widgets

14

Button
Canvas
Checkbutton
Entry
Frame
Label
Listbox
Menu
Menubutton

Tkinter supports 15 core widgets

15

Message
Radiobutton
Scale
Scrollbar
Text
Toplevel

16

GUIs with Tkinter

GUIs with Tkinter

Widgets

Widgets

Use all the same configuration interface

Works by keyword arguments

w = widgetclass(parent, option=value, ...)

The cget method lets you get an option value

You can use a dictionary interface

>>> w["text"]
'button'
>>> w["text"] = "hello"
>>>

w = Button(root, text="button", command=hello)

w.cget('command')
>>> '225192hello'
w.cget('text')
>>> 'button'

The keys() method works as you would expect

>>> w.keys()
['activebackground', 'activeforeground', 'anchor', 'background', 'bd',
'bg', 'bitmap', 'borderwidth', 'command', 'compound', 'cursor', 'default',
'disabledforeground', 'fg', 'font', 'foreground', 'height',
'highlightbackground', 'highlightcolor', 'highlightthickness', 'image',
'justify', 'overrelief', 'padx', 'pady', 'relief', 'repeatdelay',
'repeatinterval', 'state', 'takefocus', 'text', 'textvariable',
'underline', 'width', 'wraplength']
>>>

17

GUIs with Tkinter

GUIs with Tkinter

Widgets

Widgets

The pack() method

>>> w.pack()

Pack has some useful options

>>> w.pack(side=LEFT, fill=BOTH)

Tells the widget to size itself fit to the given contents

and make itself visible
Consequence

18

If you forget to call pack() you wont see your widget!

19

side specifies which side to pack the widget against

fill specifies if the widget should occupy all the space
given to it by its parent
expand specifies whether the widget is allowed to
expand in order to fill up empty space

20

GUIs with Tkinter

GUIs with Tkinter

Commonly used widgets

Commonly used widgets

Button

The probably most widely used control in the world

Most important options

The method to call when the button is hit

...

text

A surface area you can draw on

window = Toplevel(width=800, height=600)

tfCanvas = Canvas(ctrlWindow, width=400, height=250, relief=RAISED,
selectbackground='grey')
tfCanvas.pack(anchor=NW, side=TOP)

command

Canvas

tfCanvas.create_line(xs,ys,xe,ye, fill=black)

The text on the button

21

GUIs with Tkinter

GUIs with Tkinter

Commonly used widgets

Commonly used widgets

Canvas - has many methods

create_arc
create_bitmap
create_polygon
...

Checkbutton

Represents a variable that can have two distinct values

Needs a Tkinter variable to work with
var = IntVar() # this is Tkinters way of saying: I want an int
c = Checkbutton(root, text=Hello, variable=var)
c.pack()

Items can be named, queried and so on

22

Details when we need them

If you are interested anyway, see the tutorial

Default is: Button selected, var = 1, 0 otherwise

You can query the variable like this
value = var.get()

23

24

GUIs with Tkinter

GUIs with Tkinter

Commonly used widgets

Commonly used widgets

Checkbutton

Has a command option that is called when the state

changes

Entry

Represents a single line text entry field

root = Tk()

var = IntVar() # this is Tkinters way of saying: I want an int

e = Entry(root, width=55)
e.pack()

def say_hello():
print Hello, var.get()

def say_hello():
print e.get()

c = Checkbutton(root, text=Hello, command=say_hello, variable=var)

c.pack()

b = Button(root,text="Hello", command=say_hello)
b.pack()
qb = Button(root, text="Quit", command=root.quit)
qb.pack()
root.mainloop()

25

GUIs with Tkinter

GUIs with Tkinter

Commonly used widgets

Commonly used widgets

Label

26

Listbox

Displays text or an image

root = Tk()

l = Label(root, text="This is rather boring, I suppose")

l.pack()

Displays a list of alternatives

Very useful for selection purposes
lb = Listbox(root, selectmode=MULTIPLE)
for i in range(10):
lb.insert(END, str(i))

qb = Button(root, text="Quit", command=root.quit)

qb.pack()

lb.pack()

root.mainloop()

def say_hello():
print str(lb.curselection())
b = Button(root,text="Hello", command=say_hello)
b.pack()
qb = Button(root, text="Quit", command=root.quit)
qb.pack()
root.mainloop()

27

28

GUIs with Tkinter

GUIs with Tkinter

Commonly used widgets

Commonly used widgets

Radiobutton

root = Tk()
MODES = [
("Monochrome", "1"),
("Grayscale", "L"),
("True color", "RGB"),
("Color separation", "CMYK"),
]

Used to select one out of several alternatives

Similar to a checkbutton, but
For correct behaviour, all buttons in a group have to
point to the same variable

v = StringVar()
v.set("L") # initialize
for text, mode in MODES:
b = Radiobutton(root, text=text, variable=v, value=mode)
b.pack(anchor=W)

v = IntVar()
Radiobutton(root, text="One", variable=v, value=1).pack(anchor=W)
Radiobutton(root, text="Two", variable=v, value=2).pack(anchor=W)

def say_hello():
print v.get()
b = Button(root,text="Hello", command=say_hello)
b.pack()
qb = Button(root, text="Quit", command=root.quit)
qb.pack()
root.mainloop()

29

GUIs with Tkinter

GUIs with Tkinter

Commonly used widgets

Commonly used widgets

Scale

30

The scale widget allows you to set a numerical value by

drawing a slider

Text

Used to enter multiline text

root = Tk()
t = Text(root, width=100, height=50)
t.pack()

root = Tk()
def dragged(event):
print s.get()

def get_value():
v = t.get(1.0,END)
print v

s = Scale(root, orient=HORIZONTAL, from_=10, to_=100, label="Test", command=dragged)

s.pack()

b = Button(root, text="Get Value", fg="red", command=get_value)

b.pack()

def get_value():
print s.get()

qb = Button(root, text="Quit", command=root.quit)

qb.pack()

b = Button(root, text="Get Value", fg="red", command=get_value)

b.pack()

root.mainloop()

qb = Button(root, text="Quit", command=root.quit)

qb.pack()
root.mainloop()

31

32

GUIs with Tkinter

GUIs with Tkinter

Commonly used widgets

Commonly used widgets

Text

Example 2

Toplevel

A toplevel finally can be used to create more windows

root = Tk()
root = Tk()

t = Text(root, width=100, height=50)

t.pack()

tl = Toplevel()

def execute():
chunk = t.get(1.0,END)
obj = compile(chunk, '<string>', 'exec')
exec obj

t = Text(tl, width=100, height=50)

t.pack()

b = Button(root, text="Execute", fg="red", command=execute)

b.pack()

def get_value():
v = t.get(1.0,END)
print v

qb = Button(root, text="Quit", command=root.quit)

qb.pack()

b = Button(root, text="Get Value", fg="red", command=get_value)

b.pack()

root.mainloop()

qb = Button(root, text="Quit", command=root.quit)

qb.pack()
root.mainloop()

33

GUIs with Tkinter

GUIs with Tkinter

Commonly used widgets

Events and Bindings

Not discussed

34

Frame
Menu
Menubutton
Message
Scrollbar

Important, since you not only want to react to button

clicks or selections but also

Mouse clicks anywhere

Mouse movement
Keyboard input

We wont need them

If you are interested, refer to the documentation

35

36

GUIs with Tkinter

GUIs with Tkinter

Events and Bindings

Events and Bindings

You bind events to widgets using bind()

Event attributes
event.widget
event.x
event.y
event.x_root
event.y_root
event.char
event.keysym
event.keycode
event.num
event.width
event.height
event.type

widget.bind(event, eventhandler)

Where event handler has the form

def eventhandler(event):
#do something

Whenever event happens on the widget, the event

handler gets called and gets passed an event structure

#
#
#
#

the widget generating the event

current mouse x position in pixels
current mouse y position in pixels
current position relative to upper left screen corner

#
#
#
#
#
#
#

the character code (keyboard event)

key symbol (keyboard event)
key code (keyboard event)
the button number (mouse click events)
new with of the widget (resize event)
new height of the widget (resize event)
event type sent

37

38

GUIs with Tkinter

GUIs with Tkinter

Events and Bindings

Events and Bindings

from Tkinter import *

root = Tk()

Event types

<Button-1>, <Button-2>, ...

Mouse button X pressed
<B1-Motion>, <B2-Motion>, ...

Mouse moved while button X pressed

<ButtonRelease-1>, <ButtonRelease-2>, ...

Mouse button X released

<Double-Button-1>, <Double-Button-2>, ...

Can you guess that one? :-)

<Enter>

Mouse pointer entered the widget area

<Leave>

Mouse pointer left the widget area

def eventtest(event):
print "Mouse: " , str( (event.x,event.y) )

tl = Toplevel()
t = Text(tl, width=100, height=50)
t.pack()

t.bind("<Button-1>", eventtest)

def get_value():
v = t.get(1.0,END)
print v

b = Button(root, text="Get Value", fg="red", command=get_value)

b.pack()

qb = Button(root, text="Quit", command=root.quit)

qb.pack()
root.mainloop()

39

40

GUIs with Tkinter

GUIs with Tkinter

Events and Bindings

Events and Bindings

Event types

<Return>

User pressed the return key

Can use BackSpace, Tab, Shift_L, Shift_R, Control_L, Alt_L, and so on

<Key>

User pressed any key (query via event.char)

a, b, c, ...

User pressed a, b, c ... most printable characters can be used as is

<Shift-Up>

User pressed Shift and the UP arrow

Most key events can be prefixed by Alt, Shift and Control

Bindings

The bind() method creates an instance binding

Event handlers are executed on a specific widget instance

You can also bind at toplevel, class or application level

Toplevel uses bind() on toplevel window

On a class of widgets use bind_class()

But, dont do that, really...

For application level use bind_all() on the root window

41

GUIs with Tkinter

GUIs with Tkinter

Events and Bindings

42

Comprehensive tutorial and reference

Bindings
root = Tk()
def eventtest(event):
print "Mouse: " , str( (event.x,event.y) )

http://www.pythonware.com/library/tkinter/
introduction/index.htm

tl = Toplevel()
t = Text(tl, width=100, height=50)
t.pack()
root.bind_all("<Enter>", eventtest)
def get_value():
v = t.get(1.0,END)
print v
b = Button(root, text="Get Value", fg="red", command=get_value)
b.pack()
qb = Button(root, text="Quit", command=root.quit)
qb.pack()
root.mainloop()

43

44