Chapter 6

Section 6.1: Widgets and Grids

Introduction

A GUI (Graphical User Interface) is a program that allows users to interact with the program using graphical icons and other images resembling components such as buttons, check boxes, sliders, radio buttons, etc. The user can interact with these graphical components by clicking on them and entering text. In this chapter, we are going to use a library of code called Tkinter, which is currently installed with a standard Python installation.

Tkinter Root

All Tkinter GUIs use a root object which runs an event loop. The event loop is an infinite loop that is constantly checking for any input from the user. So for example, if the program has a button, the event loop will constantly check to see if any clicks of the button have been recorded by the mouse. Although the event loop is infinite, when the user exits the program, the event loop will break and the program will stop running, similar to using the break keyword.

Shortly after importing Tkinter, usually the programmer will want to create the root object. Just creating the root object does not start the event loop. Usually the event loop is started after all of the components have been created and setup. The root object is created early on in the instructions because it is required when creating the other components of the GUI. When creating the other components, the root is passed as an argument of that component's init method. When the component is created, it knows what the root for this GUI is and the root knows about the component so it can check on events associated with the component. The name of the root class is Tk. The code sample below also creates a button component.

Widgets

In the Tkinter library, the individual components are classes called Widgets. Nearly everything graphical that the user can interact with is called a Widget. Below is a list of Widgets.

Layouts

In order for the widgets to show up where we want them, we need what is called a layout. The user does not directly see the layout, but instead sees how the widgets are arranged by the layout. With Tkinter, the root manages the layout. The primary layout we will be using is the grid layout, which lines up widgets in a grid. The individual locations in the grid are called cells. The widgets are added to the layout using the .grid( ) method which assigns a row and column to the widget for the cell where it will be placed. Every widget, regardless of the type of widget, uses the .grid( ) method for this purpose.

When the .grid( ) method is executed, we must give the row and column arguments to the method. Below we use what are called named arguments to give these values. The named argument for row is row, and the named argument for the column is column. As well, the __init__ method for the Button class uses a named variable for a string that the button will display on the screen called text.

Widgets That Span Multiple Cells

Sometimes a widget may need to take up more space than the other widgets around it. A good example of this is the Text widget which may need to be much larger to hold a large section of text. To accommodate large widgets we can have the widget span multiple rows and/or columns. To do this we need to give two more numbers to the .grid( ) method. These numbers determine how many rows and columns are filled up by the widget. The two arguments are called rowspan and columnspan.

When a widget occupies more than one row or column, the row and column arguments are for the upper left cell of the group of cells the widget spans.

Notice on lines 17-25, there are also two methods of the root class that are used, .rowconfigure() and .columnconfigure(). These two methods can be used to adjust attributes of the rows and columns. In the example above, these two methods are used to adjust the sizes of the rows and columns by giving the rows and columns different weights. The weights determine how much space the individual rows and columns are given compared to the other rows and columns. If the weight is set to zero, that row or column will have minimal space. In the above example, the rows and columns containing the buttons are given zero weight so that they are tightly packed on the screen.

Section 6.1 Name:____________________

Widgets and Grids

Score:      /5

Problems

1. Write the code that will create a GUI resembling the following picture:
















Complete The Code from tkinter import * @@ root = Tk()@@ bt1 = Button( root, text = "Button 1" ) @ bt2 = Button( root, text = "Button 2" ) @ txt = Text(root) @@ @@@@@@@@@@@@ mainloop()
2. Write the code that will create a GUI resembling the following picture:




















Complete The Code from tkinter import * @@ root = Tk()@@ sp1 = Spinbox( root, from_ = 1, to = 100 ) @ sp2 = Spinbox( root, from_ = 1, to = 100 ) @ bt1 = Button( root, text = "Button 1" ) @ bt2 = Button( root, text = "Button 2" ) @ txt = Text(root) @@ @@@@@@@@@@@@ mainloop()
3. Write the code that will create a GUI resembling the following picture:


















Complete The Code from tkinter import * @@ root = Tk()@@ en_var = StringVar() @@ en = Entry( root, textvariable = en_var ) @ sp = Spinbox( root, from_ = 1, to = 100 ) @ bt1 = Button( root, text = "Button 1" ) @ bt2 = Button( root, text = "Button 2" ) @ txt = Text(root) @@ @@@@@@@@@@@@ mainloop()

Section 6.2: Callbacks

Introduction

So far we have created widgets and placed them in a layout. However, the widgets do not yet do anything. To program a response we need to understand how to set up callback functions in order to respond to different events, such as a user clicking a button or moving a scroll bar, etc. A callback function is simply any function that is set up to be called when an event occurs. To set up a callback function for a button, we need to use the .bind( ) method. The first argument of the bind method is a string that is a code for the event type. The second argument is the function that will be the callback. When we give the callback function name, we do not use paranthesis ( ) just the name of the function. Also note that for this example we an object of a class called StringVar, more on this below.

Notice that the en_var object of the StringVar class is the named argument textvariable of the en object of the Entry class. It is the object en_var that stores the string value stored in the entry en. This class has methods .set( str_var ) and .get( ) to get and set the string stored in the variable, .set( str_var ) takes a string argument to set the string, .get( ) returns the string currently stored in the StringVar.

Section 6.2 Name:____________________

Callbacks

Score:      /5

Problems

1. Write the code for a GUI that has a button that when clicked takes a string stored in an Entry and displays it in another Entry. Create the objects, set the grid layout. You will also need a StringVar object. Then create a function to carry out the action and bind the function to the button.
~~~~~~~~~~ @@@@@ @@@@@ @@@@@ @@@@@ @@@@@ @@@
2. Write the code for a GUI that has a Spinbox that when changed updates a Label with the number in the Spinbox.
~~~~~~~~~~ @@@@@ @@@@@ @@@@@ @@@@@ @@@@@ @@@@@
3. Write the code for a GUI that has 3 buttons and a Label and and 3 functions that respond to each of the buttons. Each button should cause a different string to appear in the Label.
~~~~~~~~~~ @@@@@ @@@@@ @@@@@ @@@@@ @@@@@ @@@@@

Section 6.3: Drawing - Random Circle Example

Introduction

The Canvas widget is useful for displaying images. The view itself is simply a frame, but within that frame images can be seen. The Canvas class has methods for creating different geometrical figures and for opening and displaying image files.

The example below creates randomly placed circles of random size and random color. The code to create the random numbers for the location, size, and color of the circles is contained inside of the make_circle function.

Section 6.4: Animations

Introduction

The Tk class has a timer built into it. The timer can be set to call a function at regular intervals. The timer is useful because the rate is fast enough that it can be used for animations.

An animation is actually lots of still pictures. But the pictures are displayed in a sequence and are just a little bit different from each other. When an animation is played, each picture is displayed, one after another, very quickly. The pictures switch so quickly that the viewer perceives that the picture is changing continuously.

Programming Examples

In the first example, we have an animation of a bouncing ball. The picture of the ball itself is simple, its just a filled in circle, but the ball moves by changing its position gradually. Because the animation is generated by computer code, the motion can be random, not fixed like a drawing.

In the code above, a oval object is created called ball. The Canvas class has a method called .coords( object_id, left_x, top_y, right_x, bottom_y ). This method is used by the update callback function which updates the location of the ball. In the code there are also velocity variables, ball_velocity_X and ball_velocity_Y. These variables represent how fast the ball is moving in the vertical and horizontal directions. The meaning of the word velocity is similar to speed, except velocity also denotes a direction.

There are in total three callback functions: start_update simply starts the update function; kickBall creates new random velocities which causes the ball to go in a new direction; and update which is the most complicated function. The update function moves the ball and detects collisions with the walls (the sides of the view). The amount that the ball is moved is equal to the velocity variables in each direction. The units for the velocity variables are then the number of pixels the ball moves in one update: pixels per update. It only takes one line of code to move the ball with the .coords method, but the lines of code for detecting collisions are more complicated. There are 4 if-statements that check if the ball has collided with one of the four walls. When a collision occurs, the ball "bounces" by switching the direction of one of the velocity variables. The ball's downward velocity is also added to each update to simulate gravity. Finally, the ball's velocities are reduced to simulate wind resistance.

Section 6.5: Sprite Animations

Programming Examples

A sprite is a two dimensional image of an object. Older games, before more complex 3D graphics were invented, where entirely created with sprites, such as the original Mario Brothers game. Sprites are frequently organized into sprite sheets that contain all of the frames of the different animations for the sprite.

In the code below, to make things simpler, a sprite sheet such as the one above has been chopped up into image files containing individual frames. These are .png files. The data for the images in the code is stored in objects of the PhotoImage class. The __init__ method of the PhotoImage class allows a file name to be passed so that the image file is opened and stored in the object of PhotoImage.