Chapter 10 Getting Started with Graphics Programming

Chapter 9 GUI Programming Using Tkinter1 Copyright 2012 by Pearson Education, Inc. All Rights Reserved.1MotivationsTkinter is not only a useful tool for developing GUI projects, but also a valuable pedagogical tool for learning object-oriented programming. 2 Copyright 2012 by Pearson Education, Inc. All Rights Reserved.ObjectivesTo create a simple GUI application using Tkinter (9.2).To process events using callback functions bound to widgets command option (9.3).To use a variety of widget classes to create widgets (9.4).To use labels, entries, buttons, check buttons, radio buttons, messages, and texts to create graphical user interfaces (9.4).To draw lines, rectangles, ovals, polygons, and arcs and display strings in a canvas (9.5).To encapsulate data fields to make classes easy to maintain (9.5).To layout widgets in a container using the geometry managers (9.6).To pack widgets side-by-side or a top of each other using the pack manager (9.6.1).To layout widgets in a grid using the grid manager (9.6.2).To place widgets in absolute locations using the manager (9.6.3).To use containers to group widgets to achieve desired layout (9.7).To use images in widgets (9.8).To create applications using menus (9.9).To create applications using popup menus (9.10).To bind mouse and key event on a widget to a callback function for processing events (9.11).To develop animations (9.12).To use scrollbars to scroll contents in a Text widget (9.13).To use standard dialog boxes for display messages and receive input (9.14).3 Copyright 2012 by Pearson Education, Inc. All Rights Reserved.3Getting Started with TkinterGetting started with Tkinter with a simple example.4SimpleGUIRun

Copyright 2012 by Pearson Education, Inc. All Rights Reserved.Processing Eventswindow.mainloop() # Create an event loopThe statement creates an event loop. The event loop processes the events continuously.5ProcessButtonEventRun

Copyright 2012 by Pearson Education, Inc. All Rights Reserved.The Widget Classes6

Copyright 2012 by Pearson Education, Inc. All Rights Reserved.Color and FontTo specify a color, you can either use a color name such as red, yellow, green, blue, white, black, purple, etc, or explicitly specify the red, green, and blue (RGB) color components using a string #RRGGBB, where RR, GG, BB are hexadecimal representations of the red, green and blue values, respectively. 7"Times 10 bold""Helvetica 10 bold italic""Courier New 20 bold italic""Courier New 20 bold italic over strike underline" Copyright 2012 by Pearson Education, Inc. All Rights Reserved.Text FormattingThe text in a label and a button is centered by default. You can change it by using the justify option with values LEFT, CENTER, or RIGHT. You can also display the text in multiple lines by inserting the newline character \n to separate texts.8 Copyright 2012 by Pearson Education, Inc. All Rights Reserved.Mouse CursorYou can set a mouse cursor by using the cursor option with values such as "arrow" (default), "circle", "cross" "plus", etc. 9 Copyright 2012 by Pearson Education, Inc. All Rights Reserved.Change PropertieswidgetName["propertyName] = newPropertyValue10btShowOrHide = Button(window, text = "Show", bg = "white")btShowOrHide["text"] = "Hide"btShowOrHide["bg"] = "red"btShowOrHide["fg"] = "#AB84F9" # Change fg color to #AB84F9btShowOrHide["cursor"] = "plus" # Change mouse cursor to plus Copyright 2012 by Pearson Education, Inc. All Rights Reserved.Widget Demo11WidgetsDemoRun

Copyright 2012 by Pearson Education, Inc. All Rights Reserved.CanvasCanvas can be used to display shapes. You can use the method such as create_rectangle, create_oval, create_arc, create_polygon, and create_line to draw a rectangle, oval, arc, polygon, and line on a canvas.12

Copyright 2012 by Pearson Education, Inc. All Rights Reserved.Canvas Demo13

CanvasDemoRun Copyright 2012 by Pearson Education, Inc. All Rights Reserved.Drawing Methods14

Copyright 2012 by Pearson Education, Inc. All Rights Reserved.Geometry ManagersGrid ManagerPack ManagerPlace Manager

Since each manager has its own style of placing the widget, it is not a good practice to mix the managers for the widgets in the same container. You can use a frame as a subcontainer to achieve desired layout. 15 Copyright 2012 by Pearson Education, Inc. All Rights Reserved.Grid Managers16

GridManagerDemoRun Copyright 2012 by Pearson Education, Inc. All Rights Reserved.Pack Managers17PackManagerDemo2Run

PackManagerDemo1Run Copyright 2012 by Pearson Education, Inc. All Rights Reserved.Place Managers18PlaceManagerDemoRun

Copyright 2012 by Pearson Education, Inc. All Rights Reserved.Case Study: Loan Calculator19LoanCalculatorRun

Copyright 2012 by Pearson Education, Inc. All Rights Reserved.Display ImagesYou can add an image in a label, button, check button, and radio button. To create an image, use the PhotoImage class as follows:

photo = PhotoImage(file = imagefilename)

The image file must be GIF. You can use a conversion utility to convert image files in other format into GIF. 20 Copyright 2012 by Pearson Education, Inc. All Rights Reserved.Image Example21ImageDemoRun

Copyright 2012 by Pearson Education, Inc. All Rights Reserved.MenusTkinter provides a comprehensive solution for building graphical user interfaces. 22MenuDemoRun

Copyright 2012 by Pearson Education, Inc. All Rights Reserved.Popup Menus23PopupMenuDemoRun

Copyright 2012 by Pearson Education, Inc. All Rights Reserved.Mouse and Key Eventswidget.bind(event, handler)

def popup(event): menu.post(event.x_root, event.y_root)24 Copyright 2012 by Pearson Education, Inc. All Rights Reserved.Events25

Copyright 2012 by Pearson Education, Inc. All Rights Reserved.Event Properties26

Copyright 2012 by Pearson Education, Inc. All Rights Reserved.Mouse Key Event Demo27MouseKeyEventDemoRun

Copyright 2012 by Pearson Education, Inc. All Rights Reserved.Control Circle Demo28ControlCircleRun

Copyright 2012 by Pearson Education, Inc. All Rights Reserved.Animations29

AnimationDemoRun Copyright 2012 by Pearson Education, Inc. All Rights Reserved.Control Animations30ControlAnimationRun

Copyright 2012 by Pearson Education, Inc. All Rights Reserved.Scrollbar31

ScrollTextRun Copyright 2012 by Pearson Education, Inc. All Rights Reserved.Standard Dialogs32DialogDemoRun

Copyright 2012 by Pearson Education, Inc. All Rights Reserved.

Event to Process?

Yes

false

Start Event Loop

Request to Terminate?

Process

Yes

No

Terminate

Widget Class Description

Button A simple button, used to execute a command.

Checkbutton HYPERLINK "http://www.pythonware.com/library/tkinter/introduction/checkbutton.htm" Clicking a check button toggles between the values.

Radiobutton HYPERLINK "http://www.pythonware.com/library/tkinter/introduction/checkbutton.htm" Clicking a radio button sets the variable to that value, and clears all other radio buttons associated with the same variable.

Entry HYPERLINK "http://www.pythonware.com/library/tkinter/introduction/entry.htm" A text entry field, a.k.a a text field or a text box.

Frame HYPERLINK "http://www.pythonware.com/library/tkinter/introduction/entry.htm" A container widget for containing other widgets.

Menu HYPERLINK "http://www.pythonware.com/library/tkinter/introduction/entry.htm" A menu pane, used to implement pull down and popup menus.

Menubutton HYPERLINK "http://www.pythonware.com/library/tkinter/introduction/entry.htm" A menu button, used to implement pull down menus.

Label HYPERLINK "http://www.pythonware.com/library/tkinter/introduction/entry.htm" Displays a text or an image.

Message HYPERLINK "http://www.pythonware.com/library/tkinter/introduction/entry.htm" Displays HYPERLINK "http://www.pythonware.com/library/tkinter/introduction/message.htm" a text. Similar to the label widget, but can automatically wrap text to a given width or aspect ratio.

Text HYPERLINK "http://www.pythonware.com/library/tkinter/introduction/entry.htm" Formatted text display. Allows you to display and edit text with various styles and attributes. Also supports embedded images and windows.

Scale HYPERLINK "http://www.pythonware.com/library/tkinter/introduction/entry.htm" Allows you to set a numerical value by dragging a "slider".

Canvas HYPERLINK "http://www.pythonware.com/library/tkinter/introduction/canvas.htm" Structured graphics, used to draw graphs and plots, create graphics editors, and to implement custom widgets.

Toplevel A container widget displayed as a separate, top-level window.

(0, 0)

X Axis

Y Axis

(x, y)

x

y

Python Coordinate System

Conventional Coordinate System

(0, 0)

X Axis

Y Axis

(x1, y1)

(x2, y2)

canvas.create_rectangle(x1, y1,

x2, y2)

canvas.create_arc(x1, y1, x2, y2, start, extent)

(x2, y2)

(x1, y1)

canvas.create_oval(x1, y1, x2, y2)

(x2, y2)

(x1, y1)

(x3, y3)

(x1, y1)

(x2, y2)

(x1, y1)

canvas.create_line(x1, y1, x2, y2)

canvas.create_text(x, y, text = "ABCDE")

(x, y)

canvas.create_oval(x1, y1, x2, y2, x3, y3)

ABCDE

(x2, y2)

label

label

equivalent

label

label

entry

entry

entry

label

label

label

button

Event Description

Button-1, Button-2, and Button-3 are for left, middle, or right buttons. When a mouse button is pressed over the widget, Tkinter automatically grabs the mouse pointer location. ButtonPressed-i is synonymous to Button-i.

An event occurs, when a mouse button is moved while being held down on the widget.

An event occurs, when a mouse button is released.

An event occurs, when a mouse button is double-clicked.

An event occurs, when a mouse button is triple-clicked.

An event occurs, when a mouse pointer enters the widget.

An event occurs, when a mouse pointer leaves the widget.

An event occurs, when the Enter key is pressed. You can bind any key such as , , , , , in the keyboard with an event. An event occurs, when a key is pressed. An event occurs, when the Shift+A keys are pressed. You use Alt, Shift, and Control to combine with other keys.Event Description widget The widget object that fires this event.x and y The current mouse location in the widget pixels.x__root and y_root The current mouse position relative to the upper left corner of the screen, in pixels.num The button number (1, 2, 3), indicating which mouse button was clicked.char The char entered from the keyboard for key events.keysym The key symbol for the key entered from the keyboard for key events.keycode The key code for the key entered from the keyboard for key events.