Wikibooks

Wikijunior:Raspberry Pi/Raspberry Pi Make a Graphical User Interface (GUI)

< Wikijunior:Raspberry Pi

Laura Sach @codeboom – CC-BY-SA 4.0

This workshop explores creating easy Python graphical interfaces with the guizero library.

guizero itself is an alternative to the Tkinter graphical interface library which is included with Python.

Setup and installation

edit

You can install the guizero library by running the pip3 command from the Terminal which is the recommended way: 

pip3 install guizero

Alternatively, there is a Microsoft Windows installer from the website: https://lawsie.github.io/guizero/

Your first GUI

edit

 

  1. From the Programming menu, open up Python 3
  2. Click on File > New File to create a blank window where you will write your code
  3. Add the following source code below to your file.
  4. Save the file, then press F5 to run the code. You should see a basic GUI!
from guizero import App, Text
app = App("My first GUI")
greeting = Text(app, "Hello!")
app.display()

 

Let's look at what the lines of code do: 

from guizero import App, Text

Tells Python we want to use App and Text from guizero 

app = App("My first GUI")

Creates the app (the box bit) and puts the words "My first GUI" in the title. 

greeting = Text(app, "Hello!")

Creates the Text (the word "Hello!" in the grey part) and adds it to the app. Whenever we create something new in guizero we always add it to the app so that it appears on the screen. 

app.display()

Display the app, and run a loop to update it in case anything changes. This line is always last.

Jazzing up the text

edit

This text is a bit boring! You can change the size, colour and font of the text by adding some additional parameters.

Find this line of code. 

greeting = Text(app, "Hello!")

Add another parameter to change the colour to red (note the American spellling). 

greeting = Text(app, "Hello!", color="red")

You can add more parameters by putting commas between them, like this:

 

Pictures

edit

Pictures must be in GIF format to be displayed on the GUI. All code for items to display on the GUI must go between these two lines of code. 

app = App("My first GUI")
# Put your code for text, pictures etc. here
app.display()
  • Import the class – from guizero import App, Text , Picture
  • Make sure you have a GIF picture saved in the same folder as your Python file
  • Add this line of code to your app (replace cat.gif with the filename of your picture)
pic = Picture(app, "cat.gif")

Sadly, guizero can't display animated GIFs. 😟

Buttons

edit

You can add a button like this:

Import the class by adding to the top line. 

from guizero import App, Text, Picture , PushButton

At the top of your program, just after the import statement, write a function which will be called when the button is pressed. Our example function is called do_stuff but you can call it whatever you like (don't put spaces or punctuation in the name though). 

def do_stuff():
  print("You pressed the button ")

Make sure that the print line is indented by pressing the Tab ↹ key – this is important!

Add the button code between the two lines of app code as for the picture. 

button1 = PushButton(app, do_stuff, text="Push me")

Run your program by pressing F5. Click the button and look in the Python shell – you should see a message saying "You pressed the button".

 

Challenge – Cat name generator

edit

 

When you press the button, your randomly generated "cat name" will appear below.

  1. Change your GUI so that it looks like this. You should be able to work out how to do this by changing the code you already have. You can use your own picture!
  2. Add the line import random at the top of your program so that we can randomly choose a cat name.
  3. Add this code below your button to create some text. This is where the cat name will be displayed, but we don’t know what it is yet so we will just put "..." for now.
cat_name = Text(app, text="...")
  1. Find the line of code def do_stuff(): in your existing program. Replace the line of code print("You pressed the button") with this code to randomly choose your cat's first name from the list. Add some more different names if you like!
first_name = random.choice(["Fluffy", "Al", "Ginger", "Princess"])
  1. Write another line of code underneath this one to randomly pick a last name for your cat. Make sure to start this line with last_name = so we can tell which is which.
  1. Now add a line of code to join them together and set the result inside the cat_name text you created earlier.
cat_name.set(first_name + " " + last_name)
  1. Save and run your program, then press the button to discover your cat alter ego!

 

What's next?

edit

The official website for guizero has documentation for creating graphical user interface (GUI) apps. The authors have designed it to be used in "advanced projects": https://lawsie.github.io/guizero/

The Raspberry Pi Foundation has published a free PDF book for guizero called Create Graphical User Interfaces with Python (2020) by Martin O'Hanlon and Laura Sach: https://magpi.raspberrypi.org/books/create-guis

Files

edit

cat.gif

edit

 

finished-cat-name-generator.py

edit 
# What is your cat name?
# Randomly generates a cat name and displays it on a gui
# Requires guizero - sudo pip3 install guizero

from guizero import App, Text, Picture, PushButton
import random

def cat_name():
    first_name = random.choice(["Mr", "Fluffy", "Whiskers", "Ginger", "Tiddles", "Tabitha", "Princess"])
    last_name = random.choice(["Bigglesworth", "Snugglybottom", "Padfoot", "McTickles", "Floofyface", "Longtail", "Fluffball", "Hairball", "Fishbreath"])
    cat_name.set(first_name + " " + last_name)


app = App("What's your cat name?")

greeting = Text(app, "Your cat name is...", color="green", size="36")

pic = Picture(app, "cat.gif")
generate_name = PushButton(app, cat_name, text="Tell me")

cat_name = Text(app, text="...")


app.display()
Retrieved from "https://en.wikibooks.org/w/index.php?title=Wikijunior:Raspberry_Pi/Raspberry_Pi_Make_a_Graphical_User_Interface_(GUI)&oldid=4223030"