Learn more about this course.

How to Make a Superhero Name Generator 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..

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

Designing a GUI-Based App

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", "Cat", "Dolphin", "Tiger", "Velociraptor", "Walrus"], 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.