Unit 3: The graphical user interface

This units correlates with Unit 3 in "Creating with Python" available on MS Teams.

So far, we have been only working with the console that supports text-only input/output. In order to be able to use computer graphics, we need to use a so called GUI (graphical user interface). The Python native GUI is called tkinter and that is the one we will use.

To start using the GUI, you need to import it to your program by writing:

import tkinter;

Then we need to create a canvas to draw on:

canvas=tkinter.Canvas(width=500, height=500);

And finally, we need to initialize the canvas, so it displays when we run the program:

canvas.pack();

This program will create a 500 by 500 gray canvas that is blank.

In order to actually draw something on the canvas, we need to use various canvas.create_ commands, such as:

create_line(x1,y1,x2,y2, width=w);
create_rectangle(x1,y1,x2,y2, width=w, fill=color);
create_oval(x1,y1,r, width=w, fill=color);

More information on drawing on the canvas can be found in this tutorial.

Drawing A music staff

Write a program that will draw a music staff (example to the right).

In figuring this one out, it is important to realize that all five lines are parallel and that they run horizontally across the canvas — so it is the x coordinate only that changes — the y coordinate stays the same:

source: wikipedia

Solution to the music staff program

import tkinter;

canvas=tkinter.Canvas(width=400,height=400);

canvas.pack()

canvas.create_line(0,20,400,20,width=3)

canvas.create_line(0,40,400,40,width=3)

canvas.create_line(0,60,400,60,width=3)

canvas.create_line(0,80,400,80,width=3)

canvas.create_line(0,100,400,100,width=3)

Drawing a bold double bar line

Now add a bold double bar line to the staff you drew in the previous exercise. A bold double bar line indicates the conclusion of a composition or just a movement.

source: Wikipedia

In figuring this one out it is important to realize that now we need to draw lines that run vertically - not horizontally. This will mean that the the x coordinate will not change between the start and end point — it is the y coordinate that will change:

Solution

Add the following lines to your program:

canvas.create_line(397,20,397,100,width=6)

canvas.create_line(385,20,385,100,width=3)

debugging

Debugging is the process of finding and correcting errors in your code.

There can be three types of errors in your program:

syntax errors - these are "grammatical" or spelling errors you can make. These prevent your program from compiling and thus running. Here are some examples of such errors:
- print("Hello world); we forgot the closing quote
- Print("hello world"); Python is case sensitive - print is not the same as Print
- print "Hello world"; functions (commands) are always followed by a set of round brackets ()
- input("Type in your name"); print(name); The program doesn't know what you mean by name - you haven't declared a variable of that name.
logic errors - these are errors caused by the incorrect logic of the program; they will not cause the program not to work, but it will not work the way it should. Examples:
- a="5"; print(a*5); This program will print 55555 instead of the expected output 25 because it is not doing integer multiplication but string multiplication.
runtime errors - these are errors that will only show once the program is up and running and cause the program to crash. They often depend on user input. Example:
- a=input("Type the divisor");print(5/int(a)); Here the program would work normally for most numeric input, but would crash in case the user types in any non-number or even a zero. Why is that?

The first debugging ever - a moth taped on a program error log - the moth got stuck to an analog computer relay in 1945 and thus caused its malfunction.

Source: wikipedia

Debugging practice

Try to find mistakes in the following code snippets and classify the bug type:

Program 1:

1 number1=input("Type in the first number");

2 number2=input("Type in the second number");

3 sum=number1+number2;

4 print("The sum of these two numbers is "+sum);

Solution to Program 1:

3 sum=int(number1)+int(number2);

4 print("The sum of these two numbers is "+str(sum));

These are examples of syntax errors - not following the "grammar" of the programming language.

Program 2:

1 import tkinter;

2 canvas=tkinter.Canvas(width=400,height=400);

3 canvas.pack()

4 create_rectangle(5,5,100,100,150, width=1, fill=blue);

Solution to Program 2:

4 canvas.create_rectangle(5,5,100,100,150, width=1, fill=blue);

When drawing a rectangle, Python (or, more specifically, tkinter) expects us to provide exactly four integers - the four coordinates -x1,y1,x2y2 which deliniate the upper left and bottom right corners of the rectangle. Also, we need to draw the rectangle on some canvas - not in the vacuum.

These are both examples of syntax errors.

Page updated

Google Sites

Report abuse