The Ultimate Guide to Graphical User Interfaces with Python using Guizero Library

Contents

Introduction

Install and Setup Guizero

Create Your First GUI

Create a birthday Card

Create an interactive GUI App

Create a meme generator

Create a bad UI

Summary

References

Introduction

By using a graphical user interface (GUI), or "gooey"), Python programs can be made more user-friendly and fascinating. With the help of the Guizero library, beginners can add several "widgets" to their user interfaces, giving the program a wide variety of input and output methods. It allows people to be able to select an item from a menu, press a button, or see some text on a screen.

Install and Setup Guizero

Python’s standard GUI package is called tkinter, and is already installed with Python on most platforms. As a wrapper for tkinter, the guizero package provides a considerably more user-friendly interface for using the default GUI library for Python.

You need to install Guizero to get it up and running. To install it, open your command line / terminal and input the command provided below.

pip3 install guizero

You can visit the Github Page for detailed installation instructions.

Hello GUI

To create your first GUI app, open your code editor or Python IDE. After that, you'll need to import each widget; hence, you can use it as many times as you wish throughout your program. To import the App widget, select and import the widgets you need from the guizero library at the start of each guizero program using the following command.

from guizero import App

After that, enter the following code to create your first GUI app.

app = App(title="Hello, world!")
app.display()

You can now save and run your code. A GUI window with the title "Hello, world!" should appear.

Congrats!! You created your first GUI application.

Birthday Card

Now that you understand how to create a simple GUI, let's advance and create a more fascinating app. You can change the background color, add images, and add text in different fonts, sizes, and colors. Let's make a birthday card to put this all into practice. Add 'Text' and 'Picture' to the list of widgets to import at the start of the program.

Note: You need to add a picture in png or jpg format to the folder of the project. My picture is cake.png

# import the widget, 
from guizero import App, Text, Picture
app = App("Card")

# change the background color to pink, #FFC0CB as hexadecimal or as RGB (159, 43, 104)
app.bg = "pink" 

# add some text
message = Text(app, "Hurray!!")
message.font = "verdana"     #change the font to verdana
message.text_size = 54
message.text_color = "#000000"

# now create a Picture widget with two parameters: the app and the file name of the picture.
cake_pic = Picture(app, image="cake.png") 

app.display()

Create an Interactive App

It's time to get into the really interactive part and make a GUI application that generate a password from 3 random words.

# Imports....
from guizero import App, Text, PushButton
from random import choice

# function......
def gen_passkeys():
    first_word = ["brain", "nose", "mouth", "hand", "palm", "forehead"]
    second_word = ["highway", "junction", "river", "rails", "express",  "sky"]
    third_word = ["rain", "storm", "sun", "wind", "hurricane", "dry"]
    print(choice(first_word)+choice(second_word)+choice(third_word))  

# the app.....
app = App("Password_Gen")

# Widgets.....
title = Text(app, "Click the button below")
gen_button = PushButton(app, gen_passkeys, text="gen")
gen_button.bg = "#000000"
gen_button.text_color = "#ffffff"

# display.......
app.display()

Create a meme Generator

It's time to get into the really interactive part and Start by creating a simple GUI with two text boxes for the top and bottom text. This is where you will enter the text which will be inserted over your picture to create your meme. Add this line to import the widgets needed.

from guizero import App, Drawing, Slider, Combo, TextBox

# app
app = App("Hello", bg="Green")

# define draw_meme function
def draw_meme():
    meme.clear()
    meme.image(0,0,"PngItem_769277.png")
    meme.text(
        0,0, top.value,
        color=color.value,
        size=size.value,
        font=font.value,
    )
    meme.text(
        0,200,bottom.value,
        color="red",
        size=24,
        font=font.value
    )

# TextBox
top = TextBox(app, "top_text", command=draw_meme)
bottom = TextBox(app, "bottom_text", command=draw_meme)

# Combo
color = Combo(app, options=["orange", "red", "blue", "green", "grey"], command=draw_meme, selected="blue")
font = Combo(app, options=["monospace", "verdana", "helvetica", "cursive", "sans-serif"], command=draw_meme)

#Slider
size = Slider(app, start=10, end=100, command=draw_meme)

# Drawing
meme = Drawing(app, width="fill", height="fill")

# call function
draw_meme()

# display
app.display()

Create a bad UI

Now after learning how to use different widgets, we are going to practise them by creating the worst possible user interface.

Summary

Guizero aims to make the process of developing quick GUIs simple, approachable, and accessible for new users. There is no need to install additional libraries as it works with the standard Python Tkinter GUI library.

References

Guizero Github Page: https://github.com/lawsie/guizero

Python Official Docs, Tkinter: https://docs.python.org/3/library/tkinter.html