Lab: Drawing Lines in TKinter, part 1

Goal

After doing this lab, you’ll be able to

· Create a simple tkinter Canvas object

· Interact with the Canvas using mouse events,

· Draw simple objects

Background

So far we have only used TKinter to create simple user interfaces. This time we will use it as a drawing canvas. In this lab we will simply draw; in future labs we will be able to select parts of our drawings and analyze them.

Procedures

1. Start Idle. When your Python shell opens, click File…New. In the Untitled window, click File…Save As, navigate to the folder you are using for your Python modules, and use DrawLines.py as your file name. Click Save.

Add the following code:

import tkinter as tk
root = tk.Tk()

root.title('Draw Lines')

root.mainloop()

2. Run the program (F5 on a PC, fn-F5 on a Mac, or Run…Run Module everywhere). You should see a small window pop up with Draw Lines in the title bar.

3. After the line of code that sets the title for the root frame, add the following line of code:

WIDTH = 800
HEIGHT = 400
w = tk.Canvas(root, width=WIDTH, height=HEIGHT)

WIDTH and HEIGHT are 2 variables that we are using as constants to define the size of the surface (in pixels) that we want to draw on. The statement

w = tk.Canvas(root, width=WIDTH, height=HEIGHT

creates a Canvas widget, attaches it to the root frame, and sets its width and height to 800 and 400 pixels respectively.

4. Run your code again.

a. Do you see any changes from the last run?

5. Now add the following line of code:

w.pack()

Run your code again

a. What change do you see from the previous run? The pack() function is another, simpler layout manager than grid(), the one we used in the last lab. It simply lays out one widget after another on the frame. In this lab, our Canvas widget is the only one. You will not see widgets appear in a frame until you add them with a layout function.

6. Let’s make sure the Canvas widget is working. Add the following line of code below w.pack():

w.create_line(0, 0, 300, 300)

If you don’t see a diagonal line or if you get errors, make sure that you typed this line in exactly as written and run it again. When you are satisfied, comment out this line.

7. Now you can make your program respond to mouse events. For this first program, we will only recognize a mouse left-button click. In TKinter, the left mouse button is treated as button 1 and the right as button 2. It is very easy to make this work. First, add the following line of code after the line for w.pack():

w.bind('<Button-1>', draw)

This says that when the left-mouse button is pushed (Button-1), call the draw() function. We will define this function in just a moment. Although your draw() function definition will look just like other functions, it is called by the event handling loop ( mainloop() ) when the operating system (Windows, Mac OS X, or whatever system you’re running your program on) tells your program that a user clicked the left-mouse button while the mouse cursor was within its frame. This is called a ‘callback’ function. This is how most modern GUIs allow a program to interact with events.

8. Create the draw() function definition like the definition you created in step 10 of lab 4. In other words, your function definitions will always follow this pattern:

def functionName (parameters):

In your case, functionName will be draw and you will have just one parameter, event. It would be best to place the definition right after the import line at the top of your program.

For now, just add the following line of code to your function, indented one tab stop:

print('got a left-mouse click')

9. Run your program and click the left mouse button anywhere in the frame (except the title bar or frame edges). Make sure that you see ‘got a left-mouse click’ in the console. If not, check your work for steps 7 and 8.

10. Add the following line of code after your print() statement (make sure you type it in as a single line of code):

w.create_oval(event.x, event.y, event.x+25, event.y+25, outline="#000000", fill="#ff0000", width=1)

So what does this do? create_oval() is the TKinter function for creating elliptical shapes. The first 2 parameters are the x and y coordinates of the upper-left corner of the bounding rectangle surrounding the shape. These are given to you courtesy of the event loop which got the coordinates from the operating system. The next 2 arguments are the width and height of the bounding box. If they are the same value, you get a circle; if not, you get an ellipse. The fifth and sixth parameters are the outline (or stroke) color (black) and the fill color (red) using hexadecimal numbers. The last parameter is the stroke linewidth.

11. Run your program and left-click to your heart’s content. Your page will be covered with 25-pixel diameter measles!

COMING NEXT IN PART 2: Working with global variables to make your red dots the endpoints of line segments… For now there is nothing to hand in, just have this code working by the due date (on the course schedule page).