Hello guys, welcome to today’s tutorial. Today we are going to look the creation of a Graphical User interface on the raspberry pi(Raspberry pi GUI) to control the GPIO pins of the pi.

Touch screens were created for better user experience, to make interaction with devices easy and more user-friendly and this is also the case when a Raspberry Pi GUI is created on a touch screen, it makes controlling your Raspberry Pi much easier and interesting. Today we will be creating a graphical user interface with Python and the python Tkinter library with which one can develop his own GUI very easily.

Tkinter is the standard GUI library for Python. Python, when combined with Tkinter, provides a fast and easy way to create GUI applications. Tkinter provides a powerful object-oriented interface to the Tk GUI toolkit.

Hardware setup

To Implement this project, we will be using a Raspberry Pi A+ (but you can use any Raspberry Pi you want that has 40 GPIO pins) and a 5 Inch touch display from Waveshare. I made a detailed tutorial on the 5″ touch display from waveshare few weeks ago and you can check it out here (https://youtu.be/L7WCs5_e4io) to better understand how the screen works.

To ensure everyone is involved, for those who don’t have the touch display, the Graphical User Interface we are developing will work fine on a monitor as well and can be clicked with a mouse.

At the end of this tutorial, would have developed a GUI which can be used to turn on or off the LED simply by touching the on/off button on the screen.

Required Components/Parts and Where to Buy

The following components are required to build this project and can be bought through the link in front of them.

1. Raspberry Pi 3 ▶ https://educ8s.tv/part/Raspberry3

2. 5” TFT Display ▶ https://educ8s.tv/part/5InchDisplay

3. Small Wi-Fi Dongle ▶ https://educ8s.tv/part/WiFIDongle

4. Small Breadboard ▶ https://educ8s.tv/part/SmallBreadboard

5. LED ▶ https://educ8s.tv/part/LEDs

6. Wires ▶ https://educ8s.tv/part/Wires

7. Resistor ▶ https://educ8s.tv/part/Resistors

[adsense]

Schematics

The schematics for this project is fairly simple as it only involves connecting the LED to the raspberry pi. Connect the Components as shown in the schematics below.

Schematics

To explain more in words, I have connected the positive leg of the LED via a 100Ω resistor to GPIO pin 40 of the Raspberry Pi. The other leg of the resistor is connected to GPIO pin 39 which is GND. The pins of the Raspberry Pi use 3.3V logic levels unlike Arduino which uses 5V, have that in mind. For the screen connection, check the tutorial on it mentioned earlier, all details regarding the screen was covered. Check the connections, one more time, then power the raspberry pi so we write the code.

 

Raspberry Pi GUI Code

In order to develop this Graphical User Interface, we are going to use the Tkinter python library. It is the most commonly used library for the development of Graphical User Interfaces with python. It comes pre-installed with python on the raspberry pi so we do not need to download it separately.

The python code for this project is simple and small as it took only 37 lines of code an as usual, here is a detailed explanation of the code.

The first thing we do is import the libraries we will be using for the python script which in this case is the Tkinter library and the RPi.GPIO Library. We also import the tkfont which will be used to display texts on the screen.

from Tkinter import *
import tkFont
import RPi.GPIO as GPIO

Next, We setup the raspberry pi to use the BOARD configuration for labeling the GPIO, set pin 40 as output and set it to LOW(off).

GPIO.setmode(GPIO.BOARD)
GPIO.setup(40, GPIO.OUT)
GPIO.output(40, GPIO.LOW)

Next, I create our main Window and set the font in which all text displayed on the GUI will appear.

win = Tk()

myFont = tkFont.Font(family = 'Helvetica', size = 36, weight = 'bold')

Next, we create the two functions on which the operations of this GUI will be based; the LedON and exitProgram function.
The LED on function checks the state of the raspberry pi pin 40 to which our LED is connected to see and updates the state when the button is pressed. When the button is pressed if the previous state of the pin is HIGH, the function changes it to LOW(turns it off) but if the previous state is LOW, the function changes it to HIGH(turns it on).

The exitProgram function when executed simply exits the program closing the GUI.

def ledON():
	print("LED button pressed")
	if GPIO.input(40) :
 		GPIO.output(40,GPIO.LOW)
		ledButton["text"] = "LED ON"
	else:
		GPIO.output(40,GPIO.HIGH)
                ledButton["text"] = "LED OFF"

def exitProgram():
	print("Exit Button pressed")
        GPIO.cleanup()
	win.quit()

Next, we create the two buttons that will be active in our GUI;  the exit button and the on/off button which when pressed executes the ledON function.

win.title("First GUI")
win.geometry('800x480')

exitButton  = Button(win, text = "Exit", font = myFont, command = exitProgram, height =2 , width = 6) 
exitButton.pack(side = BOTTOM)

ledButton = Button(win, text = "LED ON", font = myFont, command = ledON, height = 2, width =8 )
ledButton.pack()

mainloop()

That’s the code, the complete code can be downloaded by clicking on the link below.

 

 

Depending on the editor you are using, save the code and run it.

You can also run the code from the command line using by changing the directory to desktop and then using the sudo command to run the script.

cd Desktop

sudo python gui.py

With that done, you should see the Graphical User Interface appear as shown in the image below and when you press the button the LED should light up, when you press it again it should go off. The exit button should also quit the application. The good thing about this project is it can be expanded beyond the LED you could put it beside your bed to control the lights in your apartment etc, there is no limit.

Demo

That’s it for this tutorial guys, thanks for reading/watching. If you get stuck at any point while trying to build this, just reach out to me via the comment section. I will be glad to help. Make sure you subscribe thanks!

——————–
SUBSCRIBE ON YOUTUBE
——————–

Never miss a video: Subscribe to educ8s.tv