gui zero – making Python GUIs really simple

The code in this post has been updated to reflect the changes in guizero version 0.4.

When I was a teacher, I found it frustrating that it was not at all easy for students to create GUIs using Python. I used tkinter a little bit with my GCSE class and they instantly loved creating GUIs, but became frustrated because simple things were so difficult to do. After talking with some developers about this at Pycon UK, I decided to do something about it, and so I wrote a library called guizero which is meant to be used by children and removes all the unnecessary nasty bits without removing the intellectual requirements. Another thing which is important to me is that guizero is very easy to install and get started with – so there’s a completely no faff installation process, which is a winner if you’re struggling with getting your school techies to install things.

Download guizero and read the documentation here

But, promo flannel aside – is it any good for use in the classroom? On the CAS resources site, Stuart Lucas posted a popular “Book of programming challenges” resource (9651 downloads at the time of writing) so I thought I’d put guizero to the test to see how easy it is to complete a few of his challenges with a GUI and let you see for yourself.

Challenge 1

Write a program that will display a joke. Don’t display the punchline until the reader hits the enter key.
Extension: display the punchline in a different colour.

from guizero import App, Text, PushButton

# Method to call when button pressed
def display_joke():
   punchline.value = "Poke him on"
   
# Set up the app
app = App("Joke teller")

joke = Text(app, "How do you get Pikachu on a bus?")
punchline = Text(app, text="", color="red")
button = PushButton(app, display_joke, text="Display punchline")

app.display()

So this was pretty straightforward. I created two pieces of text and a button, with the second piece of text remaining blank until the button is pressed, at which point it fills in the punchline.

Challenge 2

Write a program that will ask you your name. It will then display ‘Hello Name’ where ‘Name’ is the name you have entered.

from guizero import App, Text, TextBox, PushButton

# Method to display the greeting
def display_greeting():
   text.value = "Hello " + name.value

# Set up the app
app = App("Hello machine")

text = Text(app, text="What is your name?")
name = TextBox(app)
button = PushButton(app, display_greeting, text="Greet me")

app.display()

This challenge makes use of the get() and set() methods of the Text and TextBox widgets to easily get values typed in and display them elsewhere on the page.

Challenge 3

Write a program to work out the area of a rectangle. Collect the width and height of the rectangle from the keyboard. Calculate the area and display the result.

Extension: Display the volume of a cuboid. See what happens when you don’t type in numbers! Try to explain what has happened and why.

from guizero import App, Text, TextBox, PushButton, error

# Method to calculate the area
def calculate():

    # Validation to check whether they typed in numbers
    if not height.value.isdigit() or not width.value.isdigit():
        error("Input error", "You must type in numbers for height and width")
    # Depth is allowed to be a digit or blank
    elif not depth.value.isdigit() and depth.value != "":
        error("Input error", "You must type in a number for depth")

    # Perform the calculation
    else:
        area = int( height.value ) * int( width.value )
        if depth.value == "":        
            result.value = str(area) + "cm squared"
        else:
            volume = area * int(depth.value)
            result.value = str(volume) + "cm cubed"
        

# Set up the app
app = App("Area and Volume calculator", layout="grid")

width_label = Text(app, text="Width:", grid=[0,0], align="left")
width = TextBox(app, grid=[1,0], align="left", width=30)

height_label = Text(app, text="Height:", grid=[0,1], align="left")
height = TextBox(app, grid=[1,1], align="left", width=30)

depth_label = Text(app, text="Depth:", grid=[0,2], align="left")
depth = TextBox(app, grid=[1,2], align="left", width=30)

button = PushButton(app, calculate, text="Calculate", grid=[1,3])

result_label = Text(app, text="Result:", grid=[0,4], align="left")
result = TextBox(app, grid=[1,4], align="left", width=30)

app.display()

This challenge was a little tricker. I used a grid layout so make the interface look tidy and line up the boxes properly. However, it wasn’t the GUI part which generated most of the code here, it was the validation. Since the get() methods always return strings I had to cast them to integers to do calculations (but this should already be familiar to students). I also saw a good excuse to use the error() box function to pop up a message if the validation check didn’t pass.

What do you think?

I’d love to hear your thoughts on guizero – whether they are positive or negative. Is this useful for you and your students? Is there something you’d like it to do but it doesn’t currently do? Would you like to see a tutorial on how to do a particular thing? Is there a bug? You can find the project on GitHub and add issues/ideas here, or leave a comment on this post, or tweet me @codeboom with your thoughts.