Wikijunior:Raspberry Pi/Raspberry Pi Make a Graphical User Interface (GUI)
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 | edit source]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 | edit source]- From the Programming menu, open up Python 3
- Click on File > New File to create a blank window where you will write your code
- Add the following source code below to your file.
- 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 | edit source]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 | edit source]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 | edit source]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 | edit source]When you press the button, your randomly generated "cat name" will appear below.
- 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!
- Add the line
import random
at the top of your program so that we can randomly choose a cat name. - 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="...")
- Find the line of code
def do_stuff():
in your existing program. Replace the line of codeprint("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"])
- 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.
- 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)
- Save and run your program, then press the button to discover your cat alter ego!
What's next?
[edit | edit source]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 | edit source]cat.gif
[edit | edit source]finished-cat-name-generator.py
[edit | edit source]# 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()