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

Microphone

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 21st 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.

To study for the code questions you should know

How to write a regular expression
How to use the os and sys modules
How to write a class definition
How to write a recursive function

A good way to study for the code questions is to review the Class Exercises homework solutions and Class Notes.

The last class on Tuesday, December 12th, 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.

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 evaluation, use the following link .

You have until Friday, December 22nd, to submit the evaluation.

If you do not complete the course evaluation by this date, I will subtract 1 point from the your weighted score, which determines your grade.

Questions

Are there any questions before I begin?

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 ...
which 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
A named argument is when a value is given to a function call ...
but not in its correct position in the parameter list
This is done by writing the name of the parameter ...
followed by an = sign ...
followed by the value
Like this
```
print(1,2,3,4,5, sep=",")
```

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 be used to set
- Typeface
- Size
- Style (bold, italic, underline)
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

Attendance

New Material

Methods 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 method to create labels

This method can be put inside ColorWindow

from tkinter import *

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()

root = ColorWindow()

Positioning the Window on the Screen

By default, all windows open on the top left of the screen
But we can use geometry to change the screen position
We just need to give it a string in the following format
```
WIDTHxHEIGHT+X_COORDINATE+Y_COORDINATE
```
Let's write a method 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 shows these methods in action

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

The x and y positions refer to where the top left corner of the window is positioned ...
with respect to the top left corner of the screen
We can calculate the middle of the screen ...
by dividing the height and width of the screen by 2
But if we use those values for x and y ...
we will be placing the top left corner of our window in the center
But that is not what we want
We want the middle of our window to be in the middle of the screen
Consider the x coordinate
The middle of the screen is at position screen_width/2
If we place the top left of the window there ...
the center of the window will be too far to the right ...
by half the width of the window
So we need to subtract half the width of the window ...
from half the screen width ...
to get the correct coordinate
So the correct formula is
```
x = screen_width // 2 - width // 2
```
Similar reasoning applies to the y coordinate
```
y = screen_height // 2 - height // 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
HTML and CSS are used to create a web page
HTML allows you to position things vertically
And CSS can adjust the horizontal positioning
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

from tkinter import *

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 named argument called side
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

from tkinter import *

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()
    
root =  FrameWindow()

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

from tkinter import *

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()
        
root = GridWindow()

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 method run when the button is clicked
The value of command is usually a method 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

Message boxes 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 objects 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

from tkinter import *
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")
root = ButtonWindow()

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 method 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 Objects

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 objects 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)