The SimpleGUI Module

Section 10.4 The SimpleGUI Module

The SimpleGUI module in CodeSkulptor 3 was created specifically to help students learn and experiment with event-based interactions. It was designed to work in a web version of Python called CodeSkulptor 3. Unfortunately, SimpleGUI is not a module that works inside the Runestone textbook, it only works in CodeSkulptor. Here is a screenshot of what CodeSkulptor 3 looks like when you first open it, and press the Run button at the top-left: https://py3.codeskulptor.org/

🔗

This screenshot shows that CodeSkulptor 3 provides a window for entering text and a sample script to get you started. On the left are buttons for you to control the CodeSkulptor web page interface, including running, saving and loading scripts, accessing documentation, and a ‘join’ button that allows you to share access to your script with a classmate, so that you can work on it together.

🔗

On the right there is an Output window, which is basically just a console. Any print() output will show up there.

🔗

When you run the starter script that is provided, you will also see that a window pops up. This window has a canvas and a button. When this window first appears, it displays the message “Welcome!”. When you click the ‘Click me’ button, the message in the canvas changes to “Good job!”.

🔗

Let’s examine the lines of code in this script to understand what is happening.

🔗

The import statement gives us access to the SimpleGUI module.
🔗
```
import simplegui  # line 7
```
🔗
The string "Welcome!" is assigned to variable message.
🔗
```
message = "Welcome!"  # line 9
```
🔗
An event handler function defines what happens when the user clicks the button with line 13 giving access to the global variable message, and then line 14 changes the value of that variable to "Good job!"
🔗
```
def click():  # line 12 
        global message  
        message = "Good job!"
```
🔗
A draw() event handler function includes a function canvas.draw_text() to specify what should be drawn on the canvas. The SimpleGUI module calls this draw() function automatically, many times per second, to redraw the canvas and keep it up to date as the user interacts with the program.
🔗
```
def draw(canvas): # line 17
       canvas.draw_text(message, [50,112], 48, "Red")
```
🔗
A window is created using the create_frame method of the SimpleGUI module. It gives the window a title (“Home”) and a size in pixels for a canvas that will be drawn on the right side of the window (the canvas in this default example is 300 pixels wide by 200 pixels tall). The window that is created is assigned to a variable called ‘frame’. When you create a frame in SimpleGUI, you get an area on the left for placing interface controls and an area on the right for the canvas.
🔗
```
frame = simplegui.create_frame("Home", 300, 200)  # line 21
```
🔗
Then a button is added to ‘frame’, with the label “Click me”, and it also registers that when the button is clicked by the user, the function ‘click()’ should be called.
🔗
```
frame.add_button("Click me", click)  # line 22
```
🔗
A function calls on the frame object to allow the event handler function draw() to be registered.
🔗
```
frame.set_draw_handler(draw)  # line 23
```
🔗
The following statement allows the frame/window object to recognize event-based interactions.
🔗
```
frame.start()  # line 26
```
🔗

🔗

Go to CodeSkulptor 3 and play with this code: https://py3.codeskulptor.org/. Run the script and then do a few simple edits, testing the program after each:

🔗

Change the text on the button so that it says “Update” instead of “Click me”.
🔗

🔗
Rename the button handler to button_click instead of click. Make sure you update this in the function definition and in the line of code that creates the button.
🔗

🔗
Change the button handler function so that it sets the message to be “Hello!”
🔗

🔗

🔗

Notice that the window that pops up when you run a CodeSkulptor script with the SimpleGUI module has a key and mouse indicator box at the bottom left of the control panel. These are provided by SimpleGUI as an aid to help novice programmers understand what mouse and keyboard events the SimpleGUI module is receiving.

🔗

Later in this chapter, we will define and register event handler functions for mouse and keyboard events. You will then be able to observe how values displayed within these indicators change based on mouse clicks/keypresses.

🔗

Check your understanding

🔗

Checkpoint 10.4.1.

import simplegui

message = "Welcome!"

def click():
    global message
    message = "Good job!"

def draw(canvas):
    canvas.draw_text(message, [50,112], 48, "Red")

frame = simplegui.create_frame("Home", 300, 200)
frame.add_button("Click me", click)
frame.set_draw_handler(draw)
frame.start()

🔗

What happens if you remove the line, frame.start(), and then run the program? Go to: https://py3.codeskulptor.org/

🔗

An error message prints in the console.
🔗
Incorrect, try running the modified code to see the effect.
The canvas is blank and does not change when button is clicked.
🔗
This is correct!
The button disappears from the control panel.
🔗
Incorrect, the button is still there. Run the code to verify.
None of the above.
🔗
Incorrect, try running the modified code to see which of the other options is true.

🔗

Checkpoint 10.4.2.

import simplegui

message = "Welcome!"

def click():
    global message
    message = "Good job!"

def draw(canvas):
    canvas.draw_text(message, [50,112], 48, "Red")

frame = simplegui.create_frame("Home", 300, 200)
frame.add_button("Click me", click)
frame.set_draw_handler(draw)
frame.start()

What happens if you remove the statement, global message, and then run the program?

🔗

Go to: https://py3.codeskulptor.org/

🔗

Clicking the button does not change text on the canvas.
🔗
Correct!
The canvas is blank.
🔗
Incorrect, try running the modified code to find the answer.
An error message prints to the console.
🔗
Incorrect, run the modified program to verify.
None of the above.
🔗
Incorrect, one of the above options is true.

🔗

Checkpoint 10.4.3.

import simplegui

message = "Welcome!"

def click():
    global message
    message = "Good job!"

def draw(canvas):
    canvas.draw_text(message, [50,112], 48, "Red")

frame = simplegui.create_frame("Home", 300, 200)
frame.add_button("Click me", click)
frame.set_draw_handler(draw)
frame.start()

🔗

Review the above code to decide which line of code includes text displayed on the button.

🔗

message = "Good job!"
🔗
Incorrect, the value for message is the text displayed on the canvas by clicking the button.
canvas.draw_text(message, [50,112], 48, "Red")
🔗
Incorrect, the arguments for this function specify the details for text displayed on the canvas.
frame = simplegui.create_frame("Home", 300, 200)
🔗
Incorrect, the arguments pertain to the details of the window.
frame.add_button("Click me", click)
🔗
You have clicked the correct answer!
None of the above.
🔗
Incorrect, review the code and its output to find the answer.

🔗

Checkpoint 10.4.4.

import simplegui

message = "Welcome!"

def click():
    global message
    message = "Good job!"

def draw(canvas):
    canvas.draw_text(message, [50,112], 48, "Red")

frame = simplegui.create_frame("Home", 300, 200)
frame.add_button("Click me", click)
frame.set_draw_handler(draw)
frame.start()

🔗

Review the above code to decide which line(s) of code register(s) functions. Select all that apply.

🔗

def click():
🔗
Incorrect, this line of code defines an event handler function.
def draw(canvas):
🔗
Incorrect, this statement defines an event handler function.
frame = simplegui.create_frame("Home", 300, 200)
🔗
Incorrect, this line of code creates the window for event-based interactions.
frame.add_button("Click me", click)
🔗
Correct!
frame.set_draw_handler(draw)
🔗
Correct!

🔗

Checkpoint 10.4.5.

import simplegui

message = "Welcome!"

def click():
    global message
    message = "Good job!"

def draw(canvas):
    canvas.draw_text(message, [50,112], 48, "Red")

frame = simplegui.create_frame("Home", 300, 200)
frame.add_button("Click me", click)
frame.set_draw_handler(draw)
frame.start()

🔗

Review the above code to decide which line(s) of code define(s) event handler functions. Select all that apply.

🔗

def click():
🔗
Correct!
def draw(canvas):
🔗
Correct!
frame = simplegui.create_frame("Home", 300, 200)
🔗
Incorrect, this line of code creates the window for event-based interactions.
frame.add_button("Click me", click)
🔗
Incorrect, this line of code registers the function for clicking a button.
frame.set_draw_handler(draw)
🔗
Incorrect, this line of code registers the function for drawing on the canvas.

🔗

You have attempted of activities on this page.

🔗

Prev Top Next