Lesson 7: Creating Graphics With

Tkinter
Introduction to Python Programming
Lesson 7: Creating Graphics With
Tkinter

Lesson Overview
➢
Introduction
➢
Getting Started with Graphics
➢
Canvas Shapes
➢
Simple Animation
➢
Review
Introduction

➢
So far our programs have just dealt with text
inputs and outputs. But in this lesson we will see:-
How to create simple graphical applications.
➢

➢
How to add a Canvas to our program and how to place shapes like ovals,
rectangles and lines.
And finally – two different ways to do some simple animations in Python.
➢

3
Getting Started with Graphics: The
Frame and Canvas Widgets

➢
The Tkinter module contains several graphical
user interface (GUI) components.
➢
It is included with the Python language that you downloaded at the
start of the course.
There are also several Windows gadgets, or
➢

widgets, that you can use.

➢
The first widget you’ll learn about is the Frame. You can think of a
Frame as a container for other widgets.

4
Getting Started with Graphics: The
Frame and Canvas Widgets

➢
You can think of a
Frame as a container for
other widgets.
➢
You've seen this widget many
times before, except that you
probably called it a window.
➢
You’ll start by writing a
short program that
creates and displays a
simple Frame.

5
Getting Started with Graphics: The
Frame and Canvas Widgets

➢
1. The first line of code
contains an import
statement that provides
access to the variables
and functions defined
inside the Tkinter
module.
➢
2. Note that the word
tkinter is lowercase in
the code.

6
Getting Started with Graphics: The
Frame and Canvas Widgets

➢
3. Create the frame object.
➢
4. This line uses the
Frame object to call on a
function named mainloop.
➢
This function is very important
because it runs a loop to keep the
Frame showing until the user chooses
to close it.
➢
In addition this forces Python to just
listen to the Frame object events – the
prompt won’t be active if this is in the
code.

7
Getting Started with Graphics: The
Frame and Canvas Widgets

➢
The Frame you created
is just a container; your
next task is to place
other widgets into it.
➢
Before proceeding let’s
get back to OOP and
look at a concept called
inheritance.

8
Getting Started with Graphics:
Inheritance

➢
In object-oriented terms, inheritance is the
ability to take an existing class and add to it.
The existing class is known as the base class.
➢

➢
You’ll create a derived class from it, which will
have everything the base class has, plus
anything else you want to add to it.
➢
Inheritance is quite useful when working with
graphics, because a graphics application is
essentially just a regular Frame widget filled with
a number of other widgets.

9
Getting Started with Graphics:
Inheritance

➢
1.Here you’re creating a
new class called MyFrame
with the code class
MyFrame.
➢
This is similar to the Time class.
However, this time, to tell Python that
this class should inherit from another
class, you put the base class name inside
parentheses.
➢
2. This line starts the
definition for the class
constructor, __init__.

10
Getting Started with Graphics:
Inheritance

➢
3.The first line inside the
constructor calls the
constructor of the base class
Frame.
➢
After all, the MyFrame class is just a
specialized version of the Frame class.
This means that when you want to build a
➢

MyFrame, you first need to build a Frame.

4. This line creates a
➢

MyFrame object.
➢
5. This line calls on mainloop
so that the object will display.

11
Getting Started with Graphics: The
Canvas Widget

➢
Now let’s add some more widgets to the Frame.
The Tkinter library provides a lot of different
➢

widgets to work with, but let’s start with the

Canvas widget.
➢
Think of a Canvas as a container that can hold
shapes.
➢
The Canvas widget lets you to create and draw
shapes and text.
➢
It’s excellent for creating graphs and charts. It also enables the user
to have a place to draw.

13
Getting Started with Graphics: The
Canvas Widget

➢
To get the Canvas into
your Frame, add the
following two lines of
code to your class
constructor
self.myCanvas = Canvas()
self.myCanvas.grid()
➢
You’re code should look
like the one to the right.

14
Getting Started with Graphics: The
Canvas Widget

➢
The first line is creating a
new Canvas object.
➢
The second line calls the
layout manager named grid.
(There are other layout
managers.)
➢
With the grid layout, the
Frame is divided into
columns and rows.
➢
To place a widget in a container, you
must register it with the layout manager.
In this case, you just need to call grid( ).

15
Getting Started with Graphics: The
Canvas Widget

➢
If you run it you’d get a
default Canvas with the
default color for the
Frame.
➢
You can change the
sizes and colors by
passing them to the
objects such as:

16
Getting Started with Graphics: The
Canvas Widget

➢
Try this!

17
Getting Started with Graphics: The
Canvas Widget

➢
To see the documentation for Canvas etc. just
create an object from the class and call the help()
function.
➢
You can experiment with different shapes etc.

18
Canvas Shapes: Creating a Rectangle

➢
To get a rectangle onto the Canvas, you must call
the create_rectangle function.
➢
A rectangle has four required arguments: the x and the y locations of
the upper-left corner and the x and the y locations for the lower-right
corner.
➢
self.myCanvas.create_rectangle(10, 10, 100, 100)
➢
In the coordinate system, the x value increases
from left to right, and the y value increases from
top to bottom.

19
Canvas Shapes: Creating a Rectangle

➢
You can pass this parameters as well to change
how the rectangle looks: outline, fill and width.
self.myCanvas.create_rectangle(10, 10, 50, 50, fill="yellow", outline="red",
➢

width=10)
➢
Play with the parameters to get a feel for it.

20
Canvas Shapes: Creating an Oval

➢
To create an oval you
use the function
create_oval()
➢
To create one, you
specify four coordinates –
of the bounding box.

21
Canvas Shapes: Creating an Oval

➢
To create an oval
you use the
function
create_oval()
➢
To create one, you
specify four
coordinates – of
the bounding box.
➢
Python displays
them in the order
that you add them.

22
Canvas Shapes: Creating an Oval

➢
Here’s the
output.

23
Canvas Shapes: Lines

➢
The function to create a line is create_line.
➢
To create one of these, you provide four numbers:
the starting and ending x and y positions.
➢
Like the rectangle and oval shapes, the line
shape has width and fill options that enable you to
specify a line width and color.
➢
There’s also an arrow option for lines. You use
this option to add an arrowhead to the end of a
line.
➢
Possible values for the arrow option are "first", "last", and "both" to
indicate the placement of the arrow.

24
Canvas Shapes: Lines

➢
Add this to your previous code:
self.myCanvas.create_line(1, 1, 200, 200, arrow="first")

25
Canvas Shapes: Text

➢
The create_text() function enables you to add a text
to your drawings.
The create_text function requires an x and y position
➢

and the text you want to display.

self.myCanvas.create_text(50, 50, text="Hello World")
That displays the text "Hello World" at location (50,
➢

50).
➢
The fill option specifies the text's color.
➢
Width specifies the width of the bounding box for
the text. If the text is longer than the specified
width, the text will wrap to the next line.

26
Canvas Shapes: Text

27
Canvas Shapes: Text Justification and
Anchoring

➢
The justify option specifies where Python
will display the text within the bounding
box.
➢
The possible values for this option include "left", "center",
and "right".
➢
The anchor option determines where the
text should appear in the bounding box
with respect to the point you specify.
➢
The default value is "center", which means that the center of
the text is placed at the x, y location you specify. Other
possible options come from compass locations as shown to
the right.

28
Canvas Shapes: Text Justification and
Anchoring

➢
The direction used as an option is the
anchor point, the location of the
coordinate value.
➢
If you use an anchor of “nw”, for example, the text will
appear to the east (right) and south (below) of the point
specified.
➢
The example next will demonstrate
this.

29
Canvas Shapes: Text Justification and
Anchoring

➢
Try this:-

30
Canvas Shapes: Text Justification and
Anchoring

➢
You can change the anchor to get
these.

31
Canvas Shapes: Changing the Font

➢
To change the font, you specify the font name
and size in the following format:
( < Font name > , < size > )
➢

➢
Here’s an example:
self.myCanvas.create_text(1, 1, text="Hello World",
width=70, fill="blue", anchor="nw",
justify="center", font=("Times", 16))

32
Canvas Shapes: Changing the Font

➢
Here’s the full code and output!

33
Canvas Shapes: Other Shapes

➢
In addition to the rectangles, ovals, lines, and
text, there are also functions that allow you to
create arcs, polygons, and images.
➢
Experiment with this on your own.

34
Simple Animation: Pausing an
Application’s Execution

➢
One way to simulate animation is to pause the
program.
➢
The general idea is to draw a shape on the Canvas,
have the program pause, and then draw the same
shape (or a modified version of it) in a different
position.
➢
If you string enough of these together, it creates the appearance of
animation.
➢
So, how do you pause a program? Python includes
a module called time that has some handy functions
inside it, including one called sleep.

35
Simple Animation: Pausing an
Application’s Execution

➢
The sleep function has the program pause or sleep
for the number of seconds specified inside the
parentheses of the function call.
➢
Here's an example of how to have the program pause
for one-half second:
sleep(0.5)
➢
To use that function you first have to import time.
➢
Another critical part of animation is the Canvas
function update.
➢
When you call this function, Python draws the Canvas as it is specified at that
point in program code.

36
Simple Animation: Pausing an
Application’s Execution

➢
Here’s a demonstrations!

37
Simple Animation: Pausing an
Application’s Execution

➢
The previous program creates the Frame, then
the Canvas, and then places a rectangle from (10,
10) to (50, 50).
It calls the update function so that the Canvas
➢

will be displayed, and then pauses for 1 second

before drawing the second rectangle.
➢
Try to see how it behaves by changing the sleep
time, by removing the update function etc.

38
Simple Animation: Incorporating
Looping

A loop structure might

➢

be useful in animation.
➢
For example, you might
create a rectangle on
this Canvas in the
upper-left corner.
➢
Then you might add
rectangles, moving them
down and to the right.

39
Simple Animation: Moving a Single
Shape: Method 1

➢
How can you make it look like only one
rectangle is moving across the Canvas?
➢
You can draw over the previous rectangle with
the background color and then put the new
rectangle on the Canvas.
This would cover up the first rectangle you
➢

drew.

40
Simple Animation: Moving a Single
Shape: Method 1

➢
Example:

41
Simple Animation: Moving a Single
Shape: Method 2
➢
When creating shapes, you’re actually using
function calls that return a value.
➢
If you store that value, you can use it to manipulate the shape later.

42
Simple Animation: Moving a Single
Shape: Method 2

Notice how this version uses the variable

➢

my_rect_id to store the rectangle shape.

➢
Later on, it passes this value to the coords
function.
➢
This function will accept the specific shape
object and then the new coordinates where this
shape should be located.
So both Method 1 and Method 2 are possible
➢

ways of going about doing simple animations.

43
Simple Animation: Choosing a Method

Each method has its own specific uses.

➢

➢
For example, if you want to move a single shape across the Canvas,
the second way is better because you're creating a minimal number of
shapes.
➢
On the other hand, if your animation requires
the use of each successive shape, then you'll
need the first method.
➢
For example, to animate the drawing of a face, you may want to show
the head being drawn, then the eyes, then the nose, and finally the
mouth. Here, you'd want each of these shapes to be drawn over the
previous one. Of course, you wouldn't be able to use a loop in this
example, but multiple drawings would be necessary.
44
Lesson 7 Review

➢
You started out by breaking away from the plain
world of black text on a white background and
learned how to create a Frame.
Next, you learned about the Canvas widget. The
➢

Canvas is just one of many objects that you can

place inside a Frame.
The Canvas is used as a container for shapes.
➢

➢
We saw how to create simple animations using
the sleep function and the update function.
➢
Next lesson we will see some Python data
structures.
47
Some exercises:

➢
Write a program that rotates square along it’s
center.
➢
Write a program that moves a square along the
perimeter of a circle.
➢
Write a program that display an image saved in
the folder where the code is saved. Let the
image be named test.gif.

48