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.
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.
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.
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
How do I move the buttons to the corners? How do I use a jpg as a background screen? How do I send out a signal through the ethernet to another RaspberryPie and have it play a movie?
Good job!
Thanks you
Thank you for very good video learning.
it’s grade,
I was looking for this for a long time.
Thank you.
its not working, why? I have python 3.5 installed. It says “TabError: inconsistent use of tabs and spaces in indentation”
mitchi,
In the def ledon(): if/else statement has spaces in the tabs. you need to clean it up and retab them again.
I have my raspberry pi remote with a relay board, I plan to have another raspberry PI with a touch screen so if I call out a relay via IP on my UI, how can I do that? appreciate the help.
Many thanks for a brilliant tutorial! I learned a lot!
I want to create a app using Raspberry PI using security cameras in 4 angles. The video is recorded in an SD card for later viewing. The 4 cameras output should be streamed to one display as split video(which i prefer). I would like to know the hardware required for the project.
Awesome starting point, I’m only new to python and I have managed to modify it to open in full-screen when raspbian starts, added buttons and functions and neatened it up a bit. One afternoon and a little help from google and I can not operate my roller-doors and garage lights from anywhere in the world! And the lights are automatically switched on for 90 seconds after roller-door operation (sick of nearly breaking my neck every-time I come home in the dark)
Thanks for the kick-start and the motivation :) the office is next!
David could you share the code used to do this? thank you
Tkinter was developed in 2000. It looks like in win95 . I think it is impossible to programm modern looking GUI. It takes much power of Rp zero w.
Can you please help me with developing GUI for touchscreen and the app should open full screen at the start
could you please help us with our project program
I get always this error message.
gui.py:7: RuntimeWarning: This channel is already in use, continuing anyway. Use GPIO.setwarnings(False) to disable warnings.
GPIO.setup(40, GPIO.OUT)
No protocol specified
No protocol specified
Traceback (most recent call last):
File “gui.py”, line 11, in
win = Tk()
File “/usr/lib/python2.7/lib-tk/Tkinter.py”, line 1823, in __init__
self.tk = _tkinter.create(screenName, baseName, className, interactive, wantobjects, useTk, sync, use)
_tkinter.TclError: couldn’t connect to display “:10.0”
Hi
It works fine now. I programmed it with remotedesktop and executed from there :(. If I swich to RPI and correkt a lot of syntaxerror works fine.
THX all.
Umm My MU 1.0.2 got errors here what it said…
File “/home/pi/SHARES/gui.py”, line 17
ledButton[“text”] = “LED ON”
^
TabError: inconsistent use of tabs and spaces in indentation
I have uploaded a new version of the tutorial. Watch it here: https://www.youtube.com/watch?v=p6Ipayo1e_0
hi I want to to do test routine for Raspberypi board to check functinality of bluetooth, wifi all the GPIO Functinality full modem. Can you give the idea how to implement. Thanks