tkinter
An introduction to one of the most popular--not the most modern--graphical user interfaces (GUIs).
In the Intro course I aught, we used the module sgfx.py to create graphics on the screen. The sgfx.py module was written by Dr. Aaron Bradley to help students interface with tkinter. We are now going to bypass sgfx and begin working directly with tkinter ourselves. Very very cool.
In the Intro course I aught, we used the module sgfx.py to create graphics on the screen. The sgfx.py module was written by Dr. Aaron Bradley to help students interface with tkinter. We are now going to bypass sgfx and begin working directly with tkinter ourselves. Very very cool.
Tkinter can do lots and lots of things. We're going to focus on the drawing and animation portions of tkinter--rather than creating buttons and forms and such. If you want to add buttons to your programs, I don't mind one bit.
Creating a Window/Canvas
|
The canvas coordinates in tkinter are different than the regular coordinate system you see in math class. They are relative to the top left corner of the total canvas. This means the top-left corner of the canvas is (0,0). The top-right is (xMax, 0). The bottom-left is (0, yMax). The bottom-right corner is (xMax, yMax).
|
|
Here's the generic setup for a window using tkinter:
|
from tkinter import *
tk = Tk() #Gives a title to the window you create tk.title("Title of your Window") #If you don't want someone to resize the widow you create: tk.resizable(0,0) #Brings the window you created to the front, making it the "topmost" window. This means you don't have to click on it for it to be the active window. If you wanted it to NOT be the top window, switch the 1 to a 0. tk.wm_attributes("-topmost", 1) #Creates a canvas named "canvas". canvas = Canvas(tk, width = 500, height = 400) #If you want more options for the canvas widget--border, background, etc--you can find them here. #tells the canvas to resize itself to whatever dimensions we give it for width and height. canvas.pack() #tells it to redraw itself (just to be on the safe side) tk.update() |
Here is a list of all the options for the canvas in tkinter (background, border, thickness, etc):
http://infohost.nmt.edu/tcc/help/pubs/tkinter/web/canvas.html
http://infohost.nmt.edu/tcc/help/pubs/tkinter/web/canvas.html
You can also create a smaller window inside a canvas and place objects in the smaller window.
http://infohost.nmt.edu/tcc/help/pubs/tkinter/web/create_window.html
Inside ExistingCanvasName,
id = ExistingCanvasName.create_window(x, y, option, ...)
http://infohost.nmt.edu/tcc/help/pubs/tkinter/web/create_window.html
Inside ExistingCanvasName,
id = ExistingCanvasName.create_window(x, y, option, ...)
Drawing Lines
Drawing lines in tkinter: http://infohost.nmt.edu/tcc/help/pubs/tkinter/web/create_line.html
id = canvas.create_line(x0, y0, x1, y1, ..., xn, yn, option, ...)
id = canvas.create_line(x0, y0, x1, y1, ..., xn, yn, option, ...)
Drawing Shapes
Rectangles (or you can use polygons below): http://infohost.nmt.edu/tcc/help/pubs/tkinter/web/create_rectangle.html
id = canvas.create_rectangle(x0, y0, x1, y1, option, ...)
Where (x0, y0) is the top left corner, and (x1, y1) is the location of the pixel just outside of the bottom right corner.
id = canvas.create_rectangle(x0, y0, x1, y1, option, ...)
Where (x0, y0) is the top left corner, and (x1, y1) is the location of the pixel just outside of the bottom right corner.
Anything oval-like (this includes circles): http://infohost.nmt.edu/tcc/help/pubs/tkinter/web/create_oval.html
id = canvas.create_oval(x0, y0, x1, y1, option, ...)
The ellipse is fit into a rectangle defined by the coordinates (x0, y0) of the top left corner and the coordinates (x1, y1) of a point just outside of the bottom right corner.
id = canvas.create_oval(x0, y0, x1, y1, option, ...)
The ellipse is fit into a rectangle defined by the coordinates (x0, y0) of the top left corner and the coordinates (x1, y1) of a point just outside of the bottom right corner.
Polygons (or at least objects made of lines): http://infohost.nmt.edu/tcc/help/pubs/tkinter/web/create_polygon.html
id = canvas.create_polygon(x0, y0, x1, y1, ..., option, ...)
id = canvas.create_polygon(x0, y0, x1, y1, ..., option, ...)
Drawing arcs
Everything you want to know about drawing arcs in tkinter: http://infohost.nmt.edu/tcc/help/pubs/tkinter/web/create_arc.html
id = canvas.create_arc(x0, y0, x1, y1, option, ...)
Point (x0, y0) is the top left corner and (x1, y1) the lower right corner of a rectangle into which the ellipse is fit. If this rectangle is square, you get a circle.
id = canvas.create_arc(x0, y0, x1, y1, option, ...)
Point (x0, y0) is the top left corner and (x1, y1) the lower right corner of a rectangle into which the ellipse is fit. If this rectangle is square, you get a circle.
Displaying Text
Everything you want to know about how to display text on the screen: http://infohost.nmt.edu/tcc/help/pubs/tkinter/web/create_text.html
id = canvas.create_text(x, y, option, ...)
You also have the option to choose the text font, color, and placement. That is all detailed in the next section below.
id = canvas.create_text(x, y, option, ...)
You also have the option to choose the text font, color, and placement. That is all detailed in the next section below.
Using Color and Configuring Your Shapes
For pretty much any of the options using canvas.create widgets above you can add options. One of the common options is color.
Color options here.
Font options here.
Placement of widgets in the canvas here.
Color options here.
Font options here.
Placement of widgets in the canvas here.
If you decide you would like to be super choosy about your color. You can use:
>>>from tkinter import*
>>> colorchooser.askcolor()
It will then print out the (RR, GG, BB) values and the #hexadecimal value of the color you chose.
>>>from tkinter import*
>>> colorchooser.askcolor()
It will then print out the (RR, GG, BB) values and the #hexadecimal value of the color you chose.
Displaying Images
Basic importing of images in tkinter. Without extra modules, tkinter only imports static GIFs (not the vine-like ones).
http://infohost.nmt.edu/tcc/help/pubs/tkinter/web/create_image.html
#Need double backslashes because the \U character combination in c:\user causes problems.
my_image = PhotoImage(file='C:\\Users\\andrew.busch\\Dropbox\\Programming\\Math.gif')
#if the file is in the active folder (where the program is saved) you can just use the name of the file rather than the entire path.
canvas.create_image(0,0,anchor=NW, image=my_image)
http://infohost.nmt.edu/tcc/help/pubs/tkinter/web/create_image.html
#Need double backslashes because the \U character combination in c:\user causes problems.
my_image = PhotoImage(file='C:\\Users\\andrew.busch\\Dropbox\\Programming\\Math.gif')
#if the file is in the active folder (where the program is saved) you can just use the name of the file rather than the entire path.
canvas.create_image(0,0,anchor=NW, image=my_image)
Using Keyboard Keys with Animation (Event Binding)
When you want to "bind" an action in your program to a keyboard key, you need to know how to reference the specific key. Here is a list of all keyboard keys as recognized by tkinter: http://infohost.nmt.edu/tcc/help/pubs/tkinter/web/key-names.html
How to modify your events using handlers (i.e. how to tell how long between two mouse clicks): http://infohost.nmt.edu/tcc/help/pubs/tkinter/web/event-handlers.html
Here's a list of the different types of events tkinter can understand (i.e. mouse click, mouse movement, keyboard key, etc): http://infohost.nmt.edu/tcc/help/pubs/tkinter/web/event-types.html
Everything you ever wanted to know about binding in Python: http://infohost.nmt.edu/tcc/help/pubs/tkinter/web/binding-levels.html
Animation
When doing animation, we need to run a loop which calls our movement functions over and over again. A simple way to do this is to use a while loop. Though this isn't ideal, it does work.
|
#in addition to our normal import of tkinter, we need to import the time module.
import time while 1: function_which_moves_objects() #the next two line tells tkinter to hurry up and redraw already tk.update_idletasks() tk.update() #this slows down the loop to 1/100 of second so the object moving doesn't zoom off the screen. time.sleep(0.01) |
Later on we will build an animation function which does a much nicer job than a "while" loop.
Using our new-found graphics and animation skills, let's make:
1) A paddle-ball game using classes (rather than complicated nested if-then statements)
2) A Tron-esque light bike game.
3) A retro snake game.
4) Frogger/Crossy Road game.
5) Breakout.
Resources
Our library has the book "Python for Kids". Chapter 12 is a great intro to tkinter and basic animation.
Updated for Python 3.
http://www.tkdocs.com/tutorial/index.html
Python 2 but some great recommendations.
http://effbot.org/tkinterbook/tkinter-events-and-bindings.htm
http://www.tkdocs.com/tutorial/index.html
Python 2 but some great recommendations.
http://effbot.org/tkinterbook/tkinter-events-and-bindings.htm
tkinter library of commands:
http://www.tcl.tk/man/tcl8.5/TclCmd/contents.htm
http://www.tcl.tk/man/tcl8.5/TclCmd/contents.htm
