How to turn your program into a graphical application

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.

You are going to create the GUI first, before moving on to downloading the Pokémon and displaying it.

1. 1. Create a new Python program called pokemon_gui.py.

       

1. 1. Import App from the guizero module. App is the main window of your GUI.

       

      from guizero import App
      

       

1. 1. Create an App object.

       

      app = App()
      

       

1. 1. When the App has been created, it can be displayed by adding this line of code.

       

      app.display()
      

       

1. 1. Run your program. Your GUI should appear.

       

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

1. 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. 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. 1. Run your program, you should see your message displayed in the Text the widget at the top of your GUI.

       

      

       

1. 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. 1. Run your program to see the widgets you added.

       

      

       

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. 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. 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. 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. 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. 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. 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.

       

      

You can find out more about how to use guizero at lawsie.github.io/guizero.