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?
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
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 + "."
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.
- 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!