So you have a Raspberry Pi and a cool idea, but how do you make it as easy as a smartphone for your user to interact with?

Building a Graphical User Interface (GUI) is actually quite easy, and with some patience you can produce amazing projects.

Step 1: The Broad Overview

One of the most powerful tools that Raspberry Pi provides over other micros, is the rapid rate and ease you can create a Graphical User Interface (GUI) for your project.

One way to achieve this , specialty if you have a full touchscreen (or a standard screen and input device such as a mouse),it became amazing!

For the purpose of this article, we’ll be using Python 3 with Tkinter :

A powerful library for developing graphic user interface (GUI) applications, on the Raspberry Pi where makers are concerned.

Tkinter is probably the most commonly used with Python, and plenty of resources exist on the internet.

Step 2: "Hello World" in Tkinter

We’re using aRaspberry Pi loaded with Raspbian Stretch OS.

To run our Tkinter GUI Applications. we can also use any other operating system that have python installed.

Raspbian comes with both Python 2, Python 3 and the Tkinter library installed.

To check which version you have installed, from the terminal run:

python3 --version

Create a new file called app.py and enter the base code shown below :

#!/usr/bin/python	
from tkinter import * 			# imports the Tkinter lib
root = Tk()				# create the root object
root.wm_title("Hello World")		# sets title of the window 
root.mainloop()				# starts the GUI loop

If you’re not using an IDE, run the following command in a terminal from the directory containing your Python code to run the program.

python3 app.py

Step 3: Customising the Window

Let’s now look at how to customise this window.

Background colour

root.configure(bg="black") 		# change the background colour to "black"

root.configure(bg="#F9273E")		# use the hex colour code

Window dimensions

root.geometry("800x480")       		# specify the window dimension

root.attributes("-fullscreen", True) 	# set to fullscreen

Keep in mind that you will get stuck in full-screen mode if you don’t create a way to exit.

# we can exit when we press the escape key
def end_fullscreen(event):
	root.attributes("-fullscreen", False)
root.bind("<Escape>", end_fullscreen)

Step 4: Widgets in Tkinter

Tkinter includes many different widgets to help you create the most appropriate user interface. Widgets you can use include:
• text box

• buttons

• check button

• slider

• list box

• radio button

•etc..

Now we can add some widgets such as text, buttons and inputs.

Adding Widgets

Labels

label_1 = Label(root, text="Hello, World!")

Before it is visible in the window though, we need to set its position. We will use grid positioning.

label_1.grid(row=0, column=0)		# set the position

Entry Input

label_1 = Label(root, text="Hello, World!", font="Verdana 26 bold, fg="#000", bg="#99B898")
label_2 = Label(root, text="What is your name?",  height=3, fg="#000", bg="#99B898")
 entry_1 = Entry(root)			#input entry
 label_1.grid(row=0, column=0)
 label_2.grid(row=1, column=0)
 entry_1.grid(row=1, column=1)

Buttons

#Add a button inside the window
Button = Button(root, text="Submit")
Button.grid(row=2, column=1)

app.py
Download

Step 5: Adding Logic

Now we have a simple form, however clicking on the button does not do anything!!

We will explore how to setup an event on the buttons widget and bind it to a function which executes when clicked.

For this purpose we will update label_1 to display "Hello + the text entered in the input". When you select the submit button.

Download the code below then run it.

appV2.py
Download

Step 6: LED Control

So far we see how to add button to the window and add logic to it in order to perform action.

Now, we will change the code a little bit. So we are going to create a form and add two buttons to it. One to turn the LED on/off, and the other to exit the program.

Note : Make sure you have updated your Raspberry before starting, and that you have the GPIO library install, Open the command window and enter the following
the GPIO library install. Open the command window and enter the following:

$ sudo apt-get update

$ sudo apt-get install python-rpi.gpio python3-rpi.gpio

The Build:

Parts Required:

1 x Raspberry Pi 3

1 x LED

1 x 330Ω Resistor

Building The Circuit:

Follow the photos above.

Pay attention to the LED orientation and the pin where connected (GPIO23).

appLED.py
Download

Step 7: Adding Servo Motor Controller

We will moving to something other than a button we can also use various inputs to control the PWM (Pulse Width Modulation) outputs from the Raspberry Pi.

A servo motor is a great choice it translates a PWM signal into an angle.