Currently set to Index
Currently set to Follow
Skip main navigation

How to turn your program into a graphical application

This article will walk you through the steps to turn your Pokémon program into a graphical application. Let's go.
Using the Python module guizero, you can add a graphical user interface to your Pokémon-fetching program.
A graphical user interface (GUI) is a visual way for users to interact with an application. guizero hides many of the difficult concepts for creating GUIs, making this an easy tool that learners of all ages can use to get started.
 

Create your first GUI

 
Your GUI will ask the user to enter the name of a Pokémon, download it using the PokéAPI, and display it.
 
The Pokémon-fetching GUI where the user has entered the name Pikachu, and an image of a Pikachu is displayed underneath
 
You are going to create the GUI first, before moving on to downloading the Pokémon and displaying it.
 
 
    1. Create a new Python program called pokemon_gui.py.
       
 
    1. Import App from the guizero module. App is the main window of your GUI.
       
      from guizero import App
      
       
 
    1. Create an App object.
       
      app = App()
      
       
 
    1. When the App has been created, it can be displayed by adding this line of code.
       
      app.display()
      
       
 
    1. Run your program. Your GUI should appear.
       
 
 
An empty window with the title guizero
 
You can customise the appearance of your GUI by setting parameters when the App is created, e.g. changing the title and the size of the window.
 
app = App(title='Pokemon Fetcher', width=300, height=200)
 

Add ‘widgets’ to your GUI

 
A GUI is made up of widgets (components) that are added to the App. A widget can be anything from simple text to a button.
 
Your GUI will use four widgets:
 
 
    • Text to show the message “Which Pokémon do you want to fetch?”
 
    • TextBox where the user can enter the name of the Pokémon
 
    • PushButton which when pressed will download the Pokémon
 
    • Picture which will display the image
 
 
An illustration of the Pokémon GUI application where the App, Text, TextBox, PushButton, and Picture widgets are labelled
 
 
    1. Additional widgets need to be imported. Modify your program to import the widgets by changing the import at the top of your program.
       
      from guizero import App, Text, TextBox, PushButton, Picture
      
       
 
    1. Add a Text widget to your GUI to display a message.
       
      app = App(title='Pokemon Fetcher', width=300, height=200)
      
      welcome = Text(app, text="Which Pokemon do you want to fetch?")
      
      app.display()
      
       
      Note: All widgets need to be created after the App, but before the App is displayed.
       
 
    1. Run your program, you should see your message displayed in the Text the widget at the top of your GUI.
       
      Pokémon-fetcher window, with the message displayed at the top
       
 
    1. Create the TextBox, PushButton, and Picture widgets after the welcome message.
       
      welcome = Text(app, text="Which Pokemon do you want to fetch?")
      
      input_box = TextBox(app)
      submit = PushButton(app, text='Fetch')
      icon = Picture(app)
      
       
 
    1. Run your program to see the widgets you added.
       
      GUI app with additional text box and button, the Picture widget is not visible
       
 
 
The Picture widget isn’t currently displaying anything so it’s “invisible”. To display the pokemon image you downloaded in the previous step you can set the image parameter of the Picture to the filename of the image. e.g.
 
icon = Picture(app, image="poke.gif")
 

Fetching your Pokémon

 
Each time the Fetch button is pressed, the image of the Pokémon whose name is entered should be displayed.
 
To display the Pokémon image, you will reuse the fetch_pokemon code you created in the previous step.
 
 
    1. Add the required modules at the top of your program.
       
      from pokebase import pokemon
      from requests import get
      from PIL import Image
      from io import BytesIO
      
       
 
 
In the previous example, you captured the name of the Pokémon to fetch using a input command. In your GUI, the user_input text box will store the name of your Pokémon. You can read the contents of a text box using its value property.
 
 
    1. Create a new fetch_pokemon function and get the name of the Pokémon from the text box. This function will be called when the button is pressed.
       
      def fetch_pokemon():
       name = input_box.value
      
       
 
    1. Add the code you wrote previously to download the Pokémon image and save it to a file.
       
      def fetch_pokemon():
       name = input_box.value
       poke = pokemon(name)
       pic = get(poke.sprites.front_default).content
       image = Image.open(BytesIO(pic))
       image.save('poke.gif')
      
       
 
    1. You can now set the icon widget’s value property to the name of the file and display the image.
       
      def fetch_pokemon():
       ...
       image.save('poke.gif')
       icon.value = 'poke.gif'
      
       
 
    1. The final step is to change the PushButton widget to call the fetch_pokemon function each time it is pressed. You can do this by setting the command parameter when it is created.
       
      submit = PushButton(app, text='Fetch', command=fetch_pokemon)
      
       
 
    1. Run your program.
       
      The fetch_pokemon the function will run when the submit button is pressed. The image of the Pokémon is downloaded, saved, and then displayed in the icon image widget.
       
      Animation of the Pokémon name Charizard being entered and its image being displayed
 
You can find out more about how to use guizero at lawsie.github.io/guizero.
This article is from the free online

Scratch to Python: Moving from Block- to Text-based Programming

Created by
FutureLearn - Learning For Life

Our purpose is to transform access to education.

We offer a diverse selection of courses from leading universities and cultural institutions from around the world. These are delivered one step at a time, and are accessible on mobile, tablet and desktop, so you can fit learning around your life.

We believe learning should be an enjoyable, social experience, so our courses offer the opportunity to discuss what you’re learning with others as you go, helping you make fresh discoveries and form new ideas.
You can unlock new opportunities with unlimited access to hundreds of online short courses for a year by subscribing to our Unlimited package. Build your knowledge with top universities and organisations.

Learn more about how FutureLearn is transforming access to education