IT 117: Intermediate Scripting

IT 117: Intermediate Scripting
Class 26

Review

The First Computer Interfaces
The Command Line as an Interface
Birth of the Graphical User Interface
GUI Programs Are Event-Driven
The Tkinter Module
Using Tkinter
Changing the Empty Window
Running Graphical Python Programs
Widgets
Label Widgets
Changing the Fonts in a Label
Changing the Way I Import Tkinter
Changing Label Colors

Graded Quiz

You can connect to Gradescope to take weekly graded quiz today during the last 15 minutes of the class.

Once you start the quiz you have 15 minutes to finish it.

You can only take this quiz today.

There is not makeup for the weekly quiz because Gradescope does not permit it.

Final Exam

The final exam will be held on Thursday, December 22nd from 3 to 6 PM.

The exam will be given in this room.

If for some reason you are not able to take the Final at the time it will be offered, you MUST send an email to me before the exam so we can make alternative arrangements.

The final will consist of questions like those on the quizzes, along with questions asking you to write short segments of Python code.

60% of the points on this exam will consist of questions from the Ungraded Class Quizzes.

The remaining 40% will come from 4 questions that ask you to write some code.

The last class on Tuesday, December 13th, will be a review session.

You will only be responsible for the material in that review session and the review for the Midterm, which you will find here.

There will be no class on what would normally be the last day of class, Tuesday, May 10th.

But I will be in this classroom at the regular time for any student who needs additional help.

This should give you a week to study for the final.

Although the time alloted for the exam is 3 hours, I would expect that most of you would not need that much time.

The final is a closed book exam.

To prevent cheating, certain rules will be enforced during the exam.

Course Evaluation

At the end of each semester we offer you the opportunity to say what you think about this course.

What have I done right?

What have I done wrong?

What can I do better?

You are not asked for you name.

So the submissions are anonymous.

I will not see your responses until after I have submitted grades for this course.

We collect this feedback through Course Evaluations.

I will use what you say to make this course better.

To complete the course evalutaion, use the following link .

You have until Wednesday, December 21st, to submit the evaluation.

Review

The First Computer Interfaces

The input to the first computers were punch cards
The commands for each line of the program had to be typed onto a card
The cards were punched by a special machine
The data was also entered on punch cards
The output of the program was a printout on paper

The Command Line as an Interface

Then came video terminals
Terminals are a combination of a television tube and a keyboard
By this time there were multiuser operating systems
So many terminals could be connected to the same machine
The video monitors used the same technology as television sets
But they did not display images
The computers of that era only worked with text
Not graphics
The only interface available was the command line
The command line is not a user friendly environment
You have to remember the names of the commands
If you misspell a command, you will get an error

Birth of the Graphical User Interface

The command line interface was OK for technical people
But most people found it very hard to use
An engineer named Douglas Engelbart had a better idea
He invented a number of things that we now take for granted
- The mouse
- Windows
- Icons
- Menu bars
Engelbart demonstrated these features in a legendary presentation
That came to be called "The Mother of All Demos"
This was the birth of the Graphical User Interface
Or GUI
In a GUI you click on icons much as you would pick up physical objects
Instead of typing commands, you select options from a menu
You talk to the program using dialog boxes
The first commercially succesful implementation of a GUI
Was the Macintosh, introduced in 1984

GUI Programs Are Event-Driven

In a GUI, the user determines the order in which things are done
The user is not presented with a series of prompts for data
Instead they see a dialog window
Each bit of data has its own box
The data can be entered in in any order
When you click Enter the data is sent to the program
Any time something happens in a GUI it is called an event
The operating system sends each of these events to the program
The program then decides how to respond
This is call event-driven programming

The Tkinter Module

The GUI is provided by the operation system
Each language needs special function to talk to the GUI
There are a number of Python modules that have such functions
But we will be using Tkinter
Tkinter is not the only GUI toolkit for Python
But it is the one most commonly used

Using Tkinter

Here is a program that creates an empty window with Tkinter

#! /usr/bin/python3

import tkinter

class EmptyWindow:
    def __init__(self):
        # Create the main window widget.
        self.main_window = tkinter.Tk()

        # Enter the tkinter main loop.
        tkinter.mainloop()

root = EmptyWindow()

The root object is created by calling the Tk constructor
But you won't see this window unless you do something else
You need to start the event lopp
You do that by calling mainloop
I can run this program from IDLE
When I do, an empty window appears

Changing the Empty Window

This window can do anything an ordinary window can do
You can resize it

Make it full screen
Or close it
You can do all these things using the window controls
But we can add things to the window in our code
The root object has a title method
It sets the window title

But we have to do this before starting the event loop

#! /usr/bin/python3

import tkinter

class EmptyWindow:
    def __init__(self):
        self.main_window = tkinter.Tk()
        self.main_window.title("Empty Window")
        tkinter.mainloop()

root = EmptyWindow()

When we run this, we get

You can change the size using the geometry method
This method takes an argument in an unusual format
```
WIDTHxHEIGHT
```
WIDTH and HEIGHT are the number of pixels for each dimension

Here is the code

#! /usr/bin/python3

import tkinter

class EmptyWindow:
    def __init__(self):
        self.main_window = tkinter.Tk()
        self.main_window.title("Empty Window")
        self.main_window.geometry("400x200")
        tkinter.mainloop()

root = EmptyWindow()

Here is what you see when you run it

You can also specify where on the screen the window should appear
The format is
```
WIDTHxHEIGHT+X_COORDINATE+Y_COORDINATE
```
The x and y coordinates are measured in pixels
From the top left corner of the screen

Running Graphical Python Programs

Graphic programs run inside a GUI environment
This environment must be provided by the operating system
Tkinter does not create the windows itself
It asks the GUI environment to do it
This means the windows on different operating systems look different
It also means that you cannot run graphical Python programs on pe15
pe15 does not have the code to run a GUI

Widgets

When we write graphical programs we use widgets
A widget is a control element such as a button or a scroll bar
All these widgets are classes in Tkinter
Widgets have to be attached to something

Here is a list of the most import widget classes

Widget	Description
Button	A button that can cause an action to occur when it is clicked
Canvas	A rectangular area that can be used to display graphics
Checkbutton	A button that may be in either the "on" or "off" position
Entry	An area in which the user may type a single line of input from the keyboard
Frame	A container that can hold other widgets
Label	An area that displays one line of text or an image
Listbox	A list from which the user may select an item
Menu	A list of menu choices that are displayed when the user clicks a Menu widget
Menubutton	A menu that is displayed on the screen and may be clicked by the user
Message	Displays multiple lines of text
Radiobutton	A widget that can be either selected or deselected. Radiobutton widgets usually appear in groups and allow the user to select one of several options
Scale	A widget that allows the user to select a value by moving a slider along a track
Scrollbar	Can be used with some other types of widgets to provide scrolling ability
Text	A widget that allows the user to enter multiple lines of text input
Toplevel	A container, like a Frame, but displayed in its own window

Label Widgets

A Label widget displays text or an image inside a window
Labels are created using the Label constructor
The constructor needs to know the object where the widget is attached
This object is often the root window
The Label constructor sets the text of the label
Using the named argument text

Here is a script to create a window with a label

import tkinter

class HelloWindow:
    def __init__(self):
        self.main_window = tkinter.Tk()
        self.main_window.title("Hello")
        self.main_window.geometry("400x200")
        self.label = tkinter.Label(self.main_window, text="Hello, world!")
        self.label.pack()
        tkinter.mainloop()

root = HelloWindow()

The line in green creates the object
But is won't appear until you run the pack method
The line that does this appears in blue
I'll talk more about the pack method in another class
When we run the script, we get

Changing the Fonts in a Label

Most widgets have a number of named arguments
Label has font
It can to set
- Typeface
- Size
- Style (bold, italic, underline)
- Color
To have the label appear in Times, 24 bold

The call to the Label constructor would be

self.label = tkinter.Label(self.main_window, text="Hello, world!", \
                             font="times 24 bold")

This is what you would see

Changing the Way I Import Tkinter

Up to this point, I have imported Tkinter like this
```
import tkinter
```

This means that I always have to use dot notation when calling a method

self.main_window = tkinter.Tk()
...
self.label = tkinter.Label(self.main_window, text="Hello, world!", font="times 24 bold")
...
tkinter.mainloop()

If you are only using a few methods, this is not a problem
But graphic programs usually make frequent method calls
There is a way to eliminate the need for dot notation
From now on, I will always import Tkinter like this
```
from tkinter import *
```

After I do this, lines above will now be written

self.main_window = Tk()
...
self.label = Label(self.main_window, text="Hello, world!", \ 
                font="times 24 bold")
...
mainloop()

Changing Label Colors

The label color is set using the fg named argument
fg stands for "foreground"
To change the color of the label to blue

I make the following changes to the call to the constructor

self.label = Label(self.main_window, text="Hello, world!", \
                      font="times 24 bold", fg="blue")

When I run the script I now get

There are a number of colors that have names in Tkinter

from tkinter import *

class ColorWindow:
    def __init__(self):
        self.main_window = Tk()
        self.main_window.title("Colors")
        self.main_window.geometry("400x200")
        self.red_label = Label(self.main_window, text="Red text", fg="red")
        self.red_label.pack()
        self.orange_label = Label(self.main_window, text="Orange text", fg="orange")
        self.orange_label.pack()
        self.yellow_label = Label(self.main_window, text="Yellow text", fg="yellow")
        self.yellow_label.pack()
        self.green_label = Label(self.main_window, text="Green text", fg="green")
        self.green_label.pack()
        self.blue_label = Label(self.main_window, text="Blue text", fg="blue")
        self.green_label.pack()
        self.violet_label = Label(self.main_window, text="Violet text", fg="violet")
        self.violet_label.pack()
        self.cyan_label = Label(self.main_window, text="Cyan text", fg="cyan")
        self.cyan_label.pack() 
        self.magenta_label = Label(self.main_window, text="Magenta text", fg="magenta")
        self.magenta_label.pack()
        self.brown_label = Label(self.main_window, text="Brown text", fg="brown")
        self.brown_label.pack()   
        mainloop()       

root = ColorWindow()

When run, it looks like this

For a complete list of named colors in Tkinter go here
Colors can also be specified by RGB (red green blue) values

New Material

Functions inside Graphic Objects

The script above has many lines that are similar

self.red_label = Label(self.main_window, text="Red text", fg="red")
        self.red_label.pack()
        self.orange_label = Label(self.main_window, text="Orange text", fg="orange")
        self.orange_label.pack()
        self.yellow_label = Label(self.main_window, text="Yellow text", fg="yellow")
        self.yellow_label.pack()
...

Clearly there is a lot of repetition going on here
That violates the DRY principle
Don't Repeat Yourself
We can create a function to create labels

This function can be put inside ColorWindow

class ColorWindow:
    def __init__(self):
        self.main_window = Tk()
        self.main_window.title("Colors")
        self.main_window.geometry("400x200")
        for color in ["red", "orange", "yellow", "green", "blue", "violet", "magenta", "cyan", "brown"]:
            self.colored_label(color)
        mainloop()

    def colored_label(self, color):   
        label_text = color.capitalize() + " text"
        self.label = Label(self.main_window, text=label_text, fg=color)
        self.label.pack()

Positioning the Window on the Screen

By default, all windows open on the top left of the screen
But we can use geometry to set the screen position
We just need to give it a string in the following format
```
WIDTHxHEIGHT+X_COORDINATE+Y_COORDINATE
```
Let's write a function to set the size and position of the window
I will need the following arguments
- height
- width
- x position
- y position
To calculate the the position we need to know the size of the screen
We can use two methods of the root window
- winfo_screenwidth()
- winfo_screenheight()

The following script demonstrates how they work

from tkinter import *

class CenteredWindow:
    def __init__(self):
        self.main_window = Tk()
        self.main_window.title("Centered")
        self.main_window.geometry("400x200")
        screen_width = self.main_window.winfo_screenwidth()
        screen_height = self.main_window.winfo_screenheight()
        self.l1 = Label(self.main_window, text=screen_width)
        self.l1.pack()
        self.l2 = Label(self.main_window, text=screen_height)
        self.l2.pack()
        mainloop()

root = CenteredWindow()

Two labels show the width and height of the screen

Now I need to calculate the x an y positions
If the screen were 400 pixels wide
What should be the y coordinate?
You might think it would be 200
But you would be wrong
I want the middle point of the screen to be a position 200
But the middle is 200 pixels away from the top left
And the x and y coordinates refer to that point
To center the window the midpoint must be half the screen width
To get the y coordinate I use the following formula
```
y_coordinate = screen_width/2 - window_width/2
```

Here is the code

from tkinter import *

class CenteredWindow:
    def __init__(self):
        self.main_window = Tk()
        self.main_window.title("Centered")
        self.window_position(400,200)
        self.label = Label(self.main_window, text="A centered window")
        self.label.pack()
        mainloop()

    def window_position(self, width, height):
        screen_height = self.main_window.winfo_screenheight()
        screen_width = self.main_window.winfo_screenwidth()
        x = screen_width // 2 - width // 2
        y = screen_height // 2 - height // 2
        self.main_window.geometry(str(width) + "x" + str(height) + "+" + str(x) + "+" + str(y))

root = CenteredWindow()

Placing Widgets in a Window

You know how to create a widget
But where will it appear on the screen?
There is more to this question than meets the eye
You use HTML and CSS to create a web page
CSS allows you a specify where things should appear on the page
Every web page is going to be rendered in a browser window
I assume that my web pages will read on a desktop or laptop
And that the screen is wide enough to display each line
You can't make this assumption with graphical programs
Graphics programs run inside widows
And the user can resize these windows any way they like
I can't make any assumption about how big the window will be
This makes it impossible for me to specify widget positions
Fortunately I don't have to worry about this
Tkinter handles this task with things called layout managers
They are also called geometry managers
The code in these methods positions the widgets to best advantage
Tkinter provides three layout managers
- pack
- grid
- place
Every time you create a widget you must call a layout manager
To place the widget somewhere inside the window
If you don't
The Widget will not appear

The pack Layout Manager

The simplest layout manager to use is pack
To see how it works let's create an empty window
And then add a couple of labels using pack

The first window is very simple

from tkinter import *

class PackTestWindow:
    def __init__(self):
        self.root= Tk()
        self.root.title("Pack Test")
        mainloop()

root = PackTestWindow()

When I run this I get

Notice that I did not specify the size of the window
But Python created one of a respectable size

Now let's add a label and call pack


class PackTestWindow:
    def __init__(self):
        self.root= Tk()
        self.root.title("Pack Test")
        self.l1 = Label(self.root, text="First label", fg="red")
        self.l1.pack()
        mainloop()

root = PackTestWindow()

When I run this I get

Quite a difference!
This window is small
But I can't make it any smaller
Though I can make it bigger using normal window controls
pack has make the window just big enough hold the label

Let's add another label

self.l2 = Label(self.root, text="Second label", fg="green")
self.l2.pack()

Now the window looks like this

The window is a little taller, to make room for the new label
It is also wider

Let's add one more label

self.l3 = Label(self.root, text="Third label", fg="blue")
        self.l3.pack()

Here is the result

pack has a side named argument
side can have the following values
- top
- bottom
- left
- right

To align the buttons vertically, I can write

	self.l1 = Label(self.root, text="First label", fg="red")
	self.l1.pack(side="left")
	self.l2 = Label(self.root, text="Second label", fg="green")
	self.l2.pack(side="left")
	self.l3 = Label(self.root, text="Third label", fg="blue")
	self.l3.pack(side="left")

The window now looks like this

The Frame Widget

The Frame widget splits a window into different sections
This allows you more control over where things are placed
A Frame is a container that can hold other widgets
Let's create a window with two frames holding multiple labels

First we create the window and two frames

class FrameWindow:
    def __init__(self):
        self.root= Tk()
        self.root.title("Frame Test")
        self.top_frame = Frame(self.root)
        self.bottom_frame = Frame(self.root)

Note that the parent object for the frames is the root object
When we create the label widgets we don't attach them to root

Instead we give them their respective frames

    self.l1 = Label(self.top_frame, text="Red label", fg="red")
    self.l1.pack(side="top")
    self.l2 = Label(self.top_frame, text="Green label", fg="green")
    self.l2.pack(side="top")
    self.l3 = Label(self.top_frame, text="Blue label", fg="blue")
    self.l3.pack(side="top")
    self.l4 = Label(self.bottom_frame, text="Magenta label", fg="magenta")
    self.l4.pack(side="left")
    self.l5 = Label(self.bottom_frame, text="Cyan label", fg="cyan")
    self.l5.pack(side="left")

But nothing happens until we run pack on each frame

    self.top_frame.pack()
    self.bottom_frame.pack()

Then we see

The grid Layout Manager

pack is easy to use
But it takes some effort to put things exactly where you want them
grid works like a spreadsheet
It has cells specified by row and column numbers
Each widget is placed in one of these cells
The row and column numbers both start at 0
Each call to grid needs two values
- rom
- column

Here is code with four labels laid out using grid

class GridWindow:
    def __init__(self):
        self.root= Tk()
        self.root.title("Grid Test")
        self.l1 = Label(self.root, text="Red", fg="red")
        self.l1.grid(row=0, column=0)
        self.l2 = Label(self.root, text="Green", fg="green")
        self.l2.grid(row=0, column=1)
        self.l3 = Label(self.root, text="Blue", fg="blue")
        self.l3.grid(row=1, column=0)
        self.l4 = Label(self.root, text="Magenta", fg="magenta")
        self.l4.grid(row=1, column=1)
        mainloop()

This is what we see when the code is run

grid makes each column wide enough to hold the largest value

The Button Widget

We need widget to make something happen
This is usually done with buttons
A Button object can be connected to an action
The action happens when the button is clicked
The Button constructor has the following named arguments
- text - the button text
- command - the function run when the button is clicked
The value of command is usually a function name
But it can also be an action built in to the root object
Here is a simple program that creates a window with a single button

Clicking the button cases the program to quit

from tkinter import *

class ButtonWindow:
    def __init__(self):
        self.root= Tk()
        self.root.title("Button Test")
        self.button = Button(self.root, text="Quit",  command=quit)
        self.button.pack()
        mainloop()

root = ButtonWindow()

quit is a function that causes Tkinter to quit
When the code is run, a small window appears

When I click the button, the window disappears

The tkinter.messagebox Module

Messageboxes are windows used to tell something to the user
These objects are contained in the tkinter.messagebox module
There are a number of different types
- showinfo
- showwarning
- showerror
- askquestion
- askokcancel
- askyesno
- askretrycancel
The first three functions are similar
They each display some text in a window
The user has to click on an "OK" button to make them disappear

Here is an example

import tkinter.messagebox

class ButtonWindow:
    def __init__(self):
        self.root= Tk()
        self.root.title("Button Test")
        self.button  = Button(self.root, \
                               text="Click for showinfo box", \
                               command=self.action)
        self.button.pack()
        mainloop()

    def action(self):
        tkinter.messagebox.showinfo("Show Info", \
                                     "This is a message box created by showinfo")

When the button is clicked the action method is run
When we run this code, a small window appears

Click the button and a messagebox appears

The box disappears when you click "OK"

We can change action to create a showwarning box

    def action(self):
        tkinter.messagebox.showwarning("Show Warning", "This is a message box created by showwarning")

Now get the following

Similarly, it we change the action function to call showerror

    def action(self):
        tkinter.messagebox.showerror("Show Error", "This is a message box created by showerror")

We get a similar result

showerror should display a different icon
But it doesn't on my Mac

Other messagebox Functions

You can have a messagebox object have two buttons
If you call one of these messagebox methods
- askquestion
- askokcancel
- askyesno
- askretrycancel
This gives the user a chance to talk to the program
askquestion returns a string that is either that is either "yes" or "no"
Depending on which button was clicked
The other three functions return a boolean value
The returned value comes back through the askquestion method of the messsagebox object

The script below shows how this works

    def action(self):
        reply = tkinter.messagebox.askquestion("Ask Question", "This is a message box created by askquestion")
        tkinter.messagebox.showerror("Result", "You clicked " + reply)