Skip to 0 minutes and 1 secondWith the help of an excellent little module called guizero, you can turn your work from the previous step into a graphical application. This will make the programme more interactive, fun to use, and easier to extend. Let's dive in and have a quick look at creating graphical user interfaces, GUIs, in Python. A GUI is a visual way for a user to interact with an application. Traditionally, these can be fairly tricky to create. But by using a Python module called guizero, most of the hard concepts have been abstracted away, making this a fairly simple way for learners of all ages to create simple graphics. Just as before, guizero can be installed using pip.

Skip to 0 minutes and 46 secondsSo on Windows, you can open a command prompt and type, pip install guizero. While on MacOS or Linux, you can open up a terminal window and just type, pip3 install guizero.

Skip to 1 minute and 7 secondsLet's start by creating the simplest application we can imagine, the Hello World of guizero. Start by creating a new Python file and save it as pokemon_gui.py.

Skip to 1 minute and 22 secondsSave it in the same directory that you saved your pokemon_simple.py file. This is really important. The first step is to import the module. We're going to be using several parts of guizero, so we might as well import them all at the beginning. From guizero import App, TextBox, PushButton and Picture. Every guizero programme needs an app. So add this part in first-- app equals App, open brackets, close brackets. With the app created, now you just need to display it on the screen-- app.display, open brackets, close brackets.

Skip to 2 minutes and 6 secondsSave and run this file, and you should see your displayed application. Well done. You created your first GUI. Close the application and we can move onto the next stage.

Skip to 2 minutes and 21 secondsLet's alter some of the app's properties, such as the text in the title bar and the size of the window. So within your app object here, we're going to type in, title equals "Pokemon Fetcher," and then a comma. And then we get to set the width and height. So width is going to be 300, and the height is going to be 200.

Skip to 2 minutes and 49 secondsRun you code again. And when the app opens up, you should see that the box has changed size and you've got a title up in a title bar.

Skip to 2 minutes and 59 secondsLet's add a text box now so that a user can add some text.

Skip to 3 minutes and 5 secondsSo underneath, where you've created your app, I'm just going to type, input_box equals TextBox. And then in brackets, I'm going to pass in the app and then what text I wanted to display, which is going to be 'Name,' to begin with.

Skip to 3 minutes and 26 secondsNow, if you run the code, you should see your app opening up. And there'll be an input field where you can type text. It doesn't actually do anything just yet. But it will do in a bit. You can also add an image to the app. Luckily, you already have an image in your directory called poke.gif from the last exercise. So we can just use that. So underneath, where I've created my input_box, I'm going to create a thing called icon, which is going to be a picture. And then into the picture, I need to pass in app again. And then I need to pass in the path of the image. So in this case, it's image equals, and it's just "poke.gif."

Skip to 4 minutes and 10 secondsAnd I close my quotes and close my brackets. Now, if you save and run this, you should see your app opening up. And then the image of the last Pokemon you downloaded from the previous section should be visible. Now, let's finish off this part. We're going to add a Submit button so the user can submit the name of the Pokemon they want to fetch So we'll type, submit equals PushButton. And then in there, we pass in app, and then we pass in the text that we want displayed on the button. So in this case, that's going to be "Submit."

Skip to 4 minutes and 54 secondsSo let's save and run this, and the app will appear. You can see that button there that can be pressed. Doesn't do anything at the moment, and that will be for the next stage. So in the previous exercise, you created a function called fetch_pokemon. We're now going to use that function with a few alterations in our new programme. Begin by opening your pokemon_simple file so that you can see the code. And what we're going to do is we're going to copy and paste some of this into our new file. So you can copy and paste all of the import and just add them in underneath your guizero import.

Skip to 5 minutes and 35 secondsAnd then we're going to copy and paste in the fetch_pokemon function as well. It's going to go just above where we create the app. There were literally three changes to be made to your programme now to make a functioning GUI application. The first is to change how the name variable is assigned. We no longer want to use an input, but instead want to use the text that is written into the GUI. To do this, we're going to change the first line inside your fetch_pokemon function. So you can delete everything up to the word input and then change this to input_box.value.

Skip to 6 minutes and 18 secondsNow that the name of the Pokemon is coming from the text box, it should be fetched as normal. What we need to do now, though, is update the picture in the app. So after that poke.gif is being collected, we're going to type in here, icon.value equals "poke.gif."

Skip to 6 minutes and 45 secondsLastly, we need to make sure that when the Submit button is pushed, the fetch_pokemon function is called. So inside my PushButton here, I'm going to type, command equals, and then the name of my function, which is fetch_pokemon.

Skip to 7 minutes and 4 secondsNow, if I go and save and run my programme, my app appears. Now I can go into the text box here and I'll type in "Charizard," and I'm going to hit Submit, the picture of Charizard appears. But that one was quite quick because I've done Charizard before. But if try Mew, you can see the button stays down until the image has been fetched. I'll try one more in here. So let's go for Squirtle and hit the Submit button. And again, that button's staying down until it has the image. Now, as an optional challenge, can you add some more features to your application? How about displaying the weight and height of the Pokemon?

Skip to 7 minutes and 47 secondsOr what happens if the Pokemon is not recognised? Can you display text to tell the user to try a different name? You can find out more about how to do all of this

Skip to 7 minutes and 57 secondsat https://lawsie.g ithub.io/guizero.

Making it graphical

With the help of an excellent little Python module called guizero, you can turn your script from the previous step into a graphical application. This will make the program more interactive, fun to use, and easier to extend. Let’s dive in and start looking at creating graphical user interfaces (GUIs) in Python.

A GUI is a visual way for users to interact with an application. Traditionally, these can be fairly tricky to create, but guizero abstracts away most of the difficult concepts, making this an easy tool with which learners of all ages can create simple graphics.

Installing guizero

Just as the libraries in the previous step, you can install guizero using pip. On Windows, open a command prompt window (cmd) and type:

pip install guizero

On macOS or Linux, you can open a terminal window and type:

pip3 install guizero

Hello guizero

  • Let’s start by creating the simplest application we can imagine: the Hello world! of guizero.

  • Start by creating a new Python file and save it as pokemon_gui.py, in the same directory where you saved your pokemon_simple.py file. This is important!

  • The first step is to import the module. Since we’re going to be using several parts of guizero, we may as well import them all together:

from guizero import App, TextBox, PushButton, Picture

Here, you have imported the App, TextBox, PushButton and Picture classes from the module.

  • Every guizero program needs an App, so we’ll add this part in first:
from guizero import App, TextBox, PushButton, Picture

app = App()
  • When the App has been created, you just need to display it on the screen.
from guizero import App, TextBox, PushButton, Picture

app = App()
app.display()
  • Save and run this file, and you should see your displayed application. Well done — you’ve just created your first GUI!

Adding features to the GUI

  • Now, let’s alter some of the App’s properties, such as the text in the title bar and the size of the window.
from guizero import App, TextBox, PushButton, Picture

app = App(title='Pokemon Fetcher', width=300, height=200)

app.display()
  • Make sure you’ve closed the old app window, then run the code again and check that it looks as you expect.

  • Next, add a TextBox so that the user can type in some text.

from guizero import App, TextBox, PushButton, Picture

app = App(title='Pokemon Fetcher', width=300, height=200)
input_box = TextBox(app, text='Name')

app.display()

If you run the code, you should now see an input field on your GUI into which you can type. It doesn’t do anything yet, but it will soon.

  • You can also add in an image to the App. Luckily, you already have an image in your directory called poke.gif from the last exercise, so just use that.
from guizero import App, TextBox, PushButton, Picture

app = App(title='Pokemon Fetcher', width=300, height=200)
input_box = TextBox(app, text='Name')
icon = Picture(app, image="poke.gif")

app.display()
  • Run your program, and you should see the last Pokemon image you downloaded.

  • To finish off, let’s add a button to the GUI so that the user can submit the name of the Pokemon they want to fetch.

from guizero import App, TextBox, PushButton, Picture

app = App(title='Pokemon Fetcher', width=200, height=200)
input_box = TextBox(app, text='Name')
icon = Picture(app, image="poke.gif")
submit = PushButton(app, text='Submit')

app.display()

Making it functional

In the previous exercise, you created a function called fetch_pokemon(). You’re now going to use that function, with a few alterations, in our new program.

  • Open up your pokemon_simple.py file and copy and paste the fetch_pokemon() function, along with the import commands, into your pokemon_gui.py file, then rearrange the code so that it looks like this:
from guizero import App, TextBox, PushButton, Picture
from pokebase import pokemon
from requests import get
from PIL import Image
from io import BytesIO

def fetch_pokemon():
    name = input('Which Pokemon do you want to fetch? ')
    poke = pokemon(name)
    pic = get(poke.sprites.front_default).content
    image = Image.open(BytesIO(pic))
    image.save('poke.gif')
    

app = App(title='Pokemon Fetcher', width=300, height=200)
input_box = TextBox(app, text='Name')
icon = Picture(app, image="poke.gif")
submit = PushButton(app, text='Submit')

app.display()

Now, you only need to make changes to your program to make a functioning GUI application

  • The first is to change how the name variable is assigned. You no longer want to use an input(), but instead the text that is typed into the GUI TextBox.
from guizero import App, TextBox, PushButton, Picture
from pokebase import pokemon
from requests import get
from PIL import Image
from io import BytesIO

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')
    

app = App(title='Pokemon Fetcher', width=300, height=200)
input_box = TextBox(app, text='Name')
icon = Picture(app, image="poke.gif")
submit = PushButton(app, text='Submit')

app.display()
  • Now that the function is collecting and saving the image, you want to update the Picture object that we named icon.
from guizero import App, TextBox, PushButton, Picture
from pokebase import pokemon
from requests import get
from PIL import Image
from io import BytesIO

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')
    icon.value = 'poke.gif'    

app = App(title='Pokemon Fetcher', width=300, height=200)
input_box = TextBox(app, text='Name')
icon = Picture(app, image="poke.gif")
submit = PushButton(app, text='Submit')

app.display()
  • Lastly, we need to make sure that when the user clicks the Submit button, the fetch_pokemon() function is called.
from guizero import App, TextBox, PushButton, Picture
from pokebase import pokemon
from requests import get
from PIL import Image
from io import BytesIO

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')
    icon.value = 'poke.gif'    

app = App(title='Pokemon Fetcher', width=300, height=200)
input_box = TextBox(app, text='Name')
icon = Picture(app, image="poke.gif")
submit = PushButton(app, command=fetch_pokemon, text='Submit')

app.display()
  • Go ahead and run your code and then type in the names of various Pokemon characters. They should display in your app window.

Challenge

  • Can you add some more features to your application? How about displaying the weight and height of the Pokemon?
  • What happens if the name of the Pokemon is not recognised? Can you display text to tell the user to try a different name?

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

Share your failures, successes, and links to your finished GUI scripts in the comments! And be sure to help other participants out if you can answer their questions.

Share this video:

This video is from the free online course:

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

Raspberry Pi Foundation