15-110: Principles of Computing - Week 4
Getting Started with Graphics (Tkinter)
Create an empty Canvas
from Tkinter import *
root = Tk()
canvas = Canvas(root, width=300, height=200)
canvas.pack()
root.mainloop() # This call BLOCKS (so your program waits until you close the window!)
Draw a rectangle
from Tkinter import *
root = Tk()
canvas = Canvas(root, width=300, height=200)
canvas.pack()
canvas.create_rectangle(0,0,150,150, fill="yellow")
root.mainloop()
- Draw rectangles in different locations, sizes, fill colors, and outline colors
from Tkinter import *
root = Tk()
canvas = Canvas(root, width=300, height=200)
canvas.pack()
canvas.create_rectangle( 0, 0, 150, 150, fill="yellow")
canvas.create_rectangle(100, 50, 250, 100, fill="orange", width=5)
canvas.create_rectangle( 50, 100, 150, 200, fill="green", outline="red", width=3)
canvas.create_rectangle(125, 25, 175, 190, fill="purple", width=0)
root.mainloop()
- Draw ovals, polygons, lines, centered text, and anchored text
from Tkinter import *
root = Tk()
canvas = Canvas(root, width=300, height=200)
canvas.pack()
canvas.create_oval(50, 50, 250, 150, fill="yellow")
canvas.create_polygon(50,30,150,50,250,30,150,10, fill="green")
canvas.create_line(50, 50, 250, 150, fill="red", width=5)
canvas.create_text(150, 100, text="Amazing!", fill="purple", font="Helvetica 26 bold underline")
canvas.create_text(150, 100, text="Carpe Diem!", anchor=SW, fill="orange", font="Times 18 italic")
root.mainloop()
- Graphics Helper Functions
from Tkinter import *
root = Tk()
canvas = Canvas(root, width=300, height=200)
canvas.pack()
def drawBelgianFlag(canvas, x0, y0, x1, y1):
# draw a Belgian flag in the area bounded by (x0,y0) in
# the top-left and (x1,y1) in the bottom-right
width = (x1 - x0)
canvas.create_rectangle(x0, y0, x0+width/3, y1, fill="black", width=0)
canvas.create_rectangle(x0+width/3, y0, x0+width*2/3, y1, fill="yellow", width=0)
canvas.create_rectangle(x0+width*2/3, y0, x1, y1, fill="red", width=0)
# Draw a large Belgian flag
drawBelgianFlag(canvas, 25, 25, 175, 150)
# And draw a smaller one below it
drawBelgianFlag(canvas, 75, 160, 125, 200)
# Now let's have some fun and draw a whole grid of Belgian flags!
width = 30
height = 25
margin = 5
for row in range(3):
for col in range(3):
left = 200 + col * width + margin
top = 50 + row * height + margin
right = left + width - margin
bottom = top + height - margin
drawBelgianFlag(canvas, left, top, right, bottom)
# Finally, don't forge to display the window!
root.mainloop()
Online References and Tutorials
There are a great many online references and tutorials for Tkinter.
Unfortunately, many (perhaps most) are not packaged in a way
that's especially useful for us (they may not use Python, they may
include too many or too few details, etc).
Here is an example of a website that we found to be useful:
NM Tech's Canvas reference (which is part of NM Tech's Tkinter Reference)
The web is a big place, so you may find other, even better tutorials!
Readings from the book
Note: The book covers Tkinter, but in a different way
(focusing on GUI's, rather than custom drawing in a Canvas). You
are not required to read anything from the book, but you might be interested in looking at Chapter 12.
Suggested exercises from the book
None.