Advertisement:
Read Later
In this tutorial, I will show you how to create a GUI (Graphical User Interface) in Python for Raspberry Pi projects. By developing a GUI, you will be able to implement user-selectable commands to your project easily. For instance, you can create a GUI to control servo motors in angles from 0 to 180 when the user clicks the confirmation button after entering an angle, as I did in my project shown in the Code.
I usually utilize the guizero module and its well-designed widgets to develop GUIs for my Raspberry Pi projects because of its efficacy and simple syntax as opposed to other GUI modules. Let's get started to analyze and scrutinize the guizero module's widgets and features.
First of all, before coding anything, you need to install the guizero module on your Raspberry Pi using the terminal. Enter the command below:
sudo pip3 install guizero
To view the detailed installing steps, also for other devices, click here.
Widgets(1):
When you develop a GUI (Graphical User Interface), you need to work with different designing elements called widgets, including even the app itself. I shall explain some of them in this article, which I used in my projects, but to get more detailed information about all the widgets provided by the guizero module, click here.
Also, every widget has adjustable parameters that affect the application design, such as bg (background), height, layout, width, visible, title (only for the app). You can inspect the parameters of any widget from its specific documentation for each parameter.
This information about widgets below is just an overview, so be sure to view the specific documentation for each widget for more information.
Note: If you want to add more functionality and features for your GUI in Python, you can use methods defined for each widget, well-explained on the specific documentation pages.
- The App object is the basis of all GUIs created using guizero. It is the main window which contains all of the other widgets.
- The Box object is an invisible container which can contain other widgets. It is the only object other than App and Window which can act as the master for other objects and can have its own layout manager. You can use the Box object to group other objects within your GUI.
- The Text object displays non editable text in your app, useful for titles, labels and instructions.
- The TextBox object displays a text box which the user can type in.
- The PushButton object displays a button with text or an image, which calls a function when pressed.
- The ButtonGroup object displays a group of radio buttons, allowing the user to choose a single option.
- The MenuBar object displays a menu at the top of the screen, with each menu option leading to a submenu.
- Pop-up windows which can be used to interrupt the user by asking question or providing information. You can inspect all pop-up types, such as info, warn, and error, from here.
- The Slider object displays a bar and selector which can be used to specify a value in a range.
- Note: Do not forget to give a parent element for each widget other than the app widget - the first parameter for each widget.
- Add the required widgets from the guizero module.
- Define MenuBar options and commands (functions), including the widget commands like that of the PushButton.
- Define the pop-up messages - info, yesno, and warn.
- Create an application (GUI) using the App widget.
- Define the App parameters - height, width, title, and bg (background color).
- Define the MenuBar options and the submenu with the functions - toplevel, options.
- Design the interface using the Box widget and the align parameter - top, bottom, left, right.
- Use the layout parameter to create a grid in a widget to place child elements depending on the given coordinates rather than just aligning.
- Add Text and TextBox widgets to display and obtain information.
- Define the Text widget parameters - text, color, size, and grid (positioning).
- Define the background color of a TextBox widget using the bg method.
- Define the PushButton widget parameters - grid, width, text, and command (function).
- Define the background color and text color of a PushButton widget using the bg method and the text_color method.
- To create a loop in a GUI, use the repeat(time, function) method with a function in a given period. Because, the display method - app.display() - does not just display the app - it enters an infinite event loop that is watching and waiting for events to happen on the GUI.
- Define the ButtonGroup widget parameters - options (radio button values), selected (the selected radio button value), width, and command (function).
- Define the text size and color of a ButtonGroup widget using the text_size and text_color methods.
- Initiate the application loop (app loop) using the display method.
-------------- Python --------------
from guizero import App, Box, Text, TextBox, PushButton, ButtonGroup, MenuBar, info, yesno, warn
# Define menu bar options and commands.
def File():
info("info", "this is a guizero app")
# ....
def About():
yesno("title", "text")
# ...
def Command():
warn("title", "text")
# ...
def Repeat():
# ...
# Create the GUI application.
appWidth = 1200
appHeight = 500
app = App(title="TEST", bg="#eb200", width=appWidth, height=appHeight)
# Define menu bar options.
menubar = MenuBar(app, toplevel=["File", "About"],
options=[
[ ["View", File] ],
[ ["About", About] ]
])
# Design the interface using the box widget.
top = Box(app, width="fill", height=appHeight / 2, align="top")
bottom = Box(app, width="fill", height=appHeight / 2, align="bottom")
left_interface = Box(top, width=appWidth / 2, align="left", layout="grid", border=True)
right_interface = Box(top, width=appWidth / 2, align="right")
b_left_interface = Box(bottom, width=appWidth / 2, align="left")
b_right_interface = Box(bottom, width=appWidth / 2, align="right")
# Left Interface
left_header = Text(left_interface, text="Right", color="#002699", size=20, grid=[0,0])
r_label = Text(left_interface, text="R :", color="#1a53ff", size=15, grid=[0,1])
r_input = TextBox(left_interface, grid=[1,1])
r_input.bg = "#ff5c33"
r_input.text_color = "#1a53ff"
g_label = Text(left_interface, text="G :", color="#1a53ff", size=15, grid=[0,2])
g_input = TextBox(left_interface, grid=[1,2])
g_input.bg = "#ff5c33"
g_input.text_color = "#1a53ff"
b_label = Text(left_interface, text="B :", color="#1a53ff", size=15, grid=[0,3])
b_input = TextBox(left_interface, grid=[1,3])
b_input.bg = "#ff5c33"
b_input.text_color = "#1a53ff"
adjust_button = PushButton(left_interface, grid=[2,4], width="20", text="Adjust", command=Command)
adjust_button.bg = "#002699"
adjust_button.text_color = "white"
# Right Interface
right_header = Text(right_interface, text="Left", color="#002699", size=20, align="top")
sensor_value = Text(right_interface, text="TEST", color="#002699", size=120)
status_text = Text(right_interface, text="Status: OK", color="green", size=15, align="bottom")
# Update the sensor value.
sensor_value.repeat(1000, Repeat)
# Bottom Left Interface
base_header = Text(b_left_interface, text="Bottom Left", color="#002699", size=20)
base_angle = ButtonGroup(b_left_interface, options=["0", "30", "45", "90", "135", "180"], selected="0", width=20, command=Command)
base_angle.text_size = 15
base_angle.text_color = "white"
# Bottom Right Interface
arm_header = Text(b_right_interface, text="Bottom Right", color="#002699", size=20)
arm_angle = ButtonGroup(b_right_interface, options=["0", "30", "45", "90", "135", "180"], selected="0", width=20, command=Command)
arm_angle.text_size = 15
arm_angle.text_color = "white"
# Start the loop.
app.display()
Result:
You can inspect working GUIs developed by me and used in my electronics projects as valuable assets :)
1) YouTube Video Recorder and Uploader GUI with Night Vision on Raspberry Pi | Inspect
2) Raspberry Pi Adjustable Air Quality Detector Controlled via GUI | Inspect
(1) https://lawsie.github.io/guizero/widgetoverview/