How to Make a Superhero Name Generator App

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

Designing a GUI-Based 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?

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.

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