Want to keep learning?

This content is taken from the Raspberry Pi Foundation & National Centre for Computing Education's online course, Programming with GUIs. Join the course to learn more.

Skip to 0 minutes and 2 seconds Is it a bird? Is it a plane? No, it’s the amazing Blue Badger. Ahoy! OK, so in this step, you’re going to create a superhero name generator. First let’s decide on some user inputs and select the most appropriate widgets. I’m going to use adjectives, colours, and animals. Your GUI will then concatenate these words together to produce a superhero name, such as the Powerful Pink Hamster. So next, consider what you want your GUI to look like and sketch out your UI. What widgets are going to go at the top? What labels will you need? So here’s my version. I want to use it to select their options and then click a push button to generate the hero name.

Skip to 0 minutes and 47 seconds Now let’s open up an IDE and create a new program called heroes.py and let’s add some code and consider what each section does.

Skip to 0 minutes and 58 seconds So the first thing I’m going to do is I’m going to import the widgets that I need for my program. I’m also going to create my new app, I’m going to give it a title, and I’m also going to set its width. Next, I’m going to create a function that’s going to allow me to make my hero name. This function will be called when the button is pressed, and it’s going to take the values from the adjective, the colour, and animal widgets, it’s going to concatenate them together to create a hero name, and then it’s going to put them on the screen as the output. Right. So let’s move on to actually putting our widgets into our program.

Skip to 1 minute and 38 seconds So let’s put in our button group for adjective, which is going to have the options amazing, bonnie, charming, and delightful. Next, let’s add a textbox that will allow us to type in a colour, and a combo box that’s going to allow us to pick an animal– in this case, and aardvark, a badger, a cat, a dolphin, or a velociraptor. We’re also going to need that push button, which is going to call our function make_hero_name here, and create that label where the hero name is going to be displayed. Finally, let’s actually call our app and display it on the screen. So let’s give it a run and see how this works.

Skip to 2 minutes and 26 seconds So I run my program, I get my four adjectives, I’m going to go for delightful, and I’m going to pick a colour, and let’s go pink. And then an animal, it has to be the velociraptor. When I click Make me a hero button, it’s going to cool that function and create my hero name and put it on the screen. Hey presto– you are the Delightful Pink Velociraptor. Now it’s time for you to play with the code. Can you add some more adjectives or animals to the program? Try replacing one type of widget for another, or add a new widget, perhaps using a checkbox. Give it a go and share your apps in the comment section.

Skip to 3 minutes and 6 seconds Don’t forget to ask questions and help each other out. I look forward to seeing what you create.

GUI project: the superhero name generator

Is it a bird? Is it a plane? No … it’s the Amazing Blue Badger!

Designing your own app

You’ve now got all the ingredients to start to build basic GUI-based apps of your own. What could be better than an app that will automatically generate superhero names?! I’ll show an example in the steps below. You might want to copy this initially to build your confidence, then go back through and change the widgets..

Step 1: Input requirements

You’ll need to decide what input you want to collect from the user — this will allow you to determine the most appropriate widgets to use. I will use:

  • An adjective (e.g. funny, amazing, unique, lovable)
  • A colour
  • An animal

These will be concatenated to produce superhero names such as the Powerful Pink Hamster.

Step 2: Sketch your GUI

Use paper or a painting app to sketch out your UI. What widgets will go at the top? What labels will you need?

An outline sketch of the program. The title is "Hero name generator". Following the text "Choose an adjective" is a ButtonGroup. Following the text "Enter a colours" is a TextBox. Following the text "Pick an animal" is a Combo widget. Underneath this is a PushButton labelled "GO!". At the bottom is some Text reading "You are the Awesome Cyan Unicorn!"

In this example I decided to get the user to select their options and then click a PushButton to generate the hero name.

Step 3: Code your GUI

Look at the following code and try to predict how this will look when it runs. What will happen when the widgets are adjusted? Why is that? Once you’ve made your predictions, run the code and see if you were correct.

# guizero - Hero name generator
from guizero import App, Text, ButtonGroup, Combo, PushButton, TextBox
app = App(title="Hero-o-matic")

# Function definitions for your events go here.

# Your GUI widgets go here
message1 = Text(app, text="Choose an adjective")
bgp_adjective = ButtonGroup(app, options=["Amazing", "Bonny", "Charming", "Delightful"], selected="Amazing")

message2 = Text(app, text="Enter a colour?")
txt_colour = TextBox(app)

message3 = Text(app, text="Pick an animal")
cmb_animal = Combo(app, options=["Aardvark", "Badger", "Cat", "Dolphin", "Velociraptor"], selected="Aardvark", width=20)

btn_make_name = PushButton(app, text='Make me a hero')
lbl_output = Text(app, text="A hero name will appear here")

# Set up event triggers here

# Show the GUI on the screen, start listening to events.
app.display()

Half the coding is now complete, but you now need to create events for the different components.

Step 4: Code your events

Modify the btn_make_name PushButton to call a function called make_hero_name when it is clicked.

btn_make_name = PushButton(app, text='Make me a hero', command=make_hero_name)

Add the following function definition to your code underneath the # Function definitions for your events go here. comment. What do you think will happen now when you run the program?

def make_hero_name():
    adjective = bgp_adjective.value
    colour = txt_colour.value
    animal = cmb_animal.value
    hero = adjective + " " + colour + " " + animal
    lbl_output.value = "You are... The " + hero + "."

The make_hero_name function reads the .value property for each of the different widgets, then uses these to build a new string which is stored in the variable hero. This is then shown on the screen by setting the .value property of lbl_output to a string including the new name.

A screenshot of the GUI created using the code above, similar in style to the sketch plan earlier in the step.

Challenges

  • Add some more adjectives and animals to the program
  • Change the program by replacing one type of widget in the code for another (e.g. swap the adjective ButtonGroup for a ComboBox)
  • Add another part to the superhero name, perhaps using checkboxes

Share your code by putting a Pastebin link in the comments section, and remember to ask if you need help!

Share this video:

This video is from the free online course:

Programming with GUIs

Raspberry Pi Foundation