Using Flask library we can control Raspberry Pi GPIO over internet by creating a web-server on any of the Raspberry Pi boards.
To be able to do this first you have to get your board ready by installing all the packages needed
Universal first steps always is open a terminal and enter this commands:
sudo apt-get update
sudo apt-get upgrade
(cup of tea for the user)
Check to have the latest version of python or python3
sudo apt-get install python
or
sudo apt-get install python3
You need to install pip
sudo apt-get install python-pip
or
sudo apt-get install python3-pip
At last install Flask
For python
sudo pip install flask
For python3
sudo pip3 install flask
Create tow folders in the home directory called: static and template
Static folder is used for serving web static content, all the css, js, html etc.
Template folder is a place where you put all the templates and is a default directory for your web page and contain the index.html file
In the home directory create the python file in my case I call it html.py
To load up the python file at the start up of the raspberry pi we have to create a .sh file and I call it launcher.sh and make it executable
Now edit the rc.local file
Restart the Pi and enjoy the fruits of you labour GOOD LUCK
For .sh file you ca follow my example in the terminal enter the command line crate the launcher.sh file:
sudo nano /home/pi/launcher.sh
Type the following code:
#!/bin/sh
cd /
cd home/pi
#some applications need to wait for PI to fully start and then run the code
sleep 120
sudo python html.py
cd /
Edit the rc.local file
sudo nano /etc/rc.local
And add:
sudo /home/pi/launcher.sh
Make launcher.sh executable:
sudo chmod +x /home/pi/launcher.sh
Now the coding can begin
Find you Pi ip address, in terminal type ifconfig, in the listing wlan0 or eth0 find your ip address, in this example is 192.168.1.128, this is the ip you have to replace it
The python script with comments below
#-----------------------start-----------This is the html.py file
import RPi.GPIO as GPIO
#-----------------------importing flask library
from flask import Flask, render_template
#-----------------------starting Flask
app = Flask(__name__)
#-----------------------set up GPIO mode
GPIO.setmode(GPIO.BCM)
GPIO.setwarnings(False)
#-----------------------attaching a label to the all GPIO pins used
light1 = 20
#-----------------------labeling all variables
light1_state = 0
#-----------------------define inputs and outputs
GPIO.setup(light1, GPIO.OUT)
#-----------------------in the next line I make sure at the start light1 is LOW
GPIO.output(light1, GPIO.LOW)
@app.route("/")
def index():
#-----------------------read tate of lights1
light1_state = GPIO.input(light1)
#-----------------------updete the templateData
templateData = {
'light1' : light1,
'light1_state' : light1_state,
}
#-----------------------display index.html with new templateData values
return render_template('index.html', **templateData)
#-----------------------create a custome route for light1 control
#-----------------------in my case 192.168.1.128:8008/light1/on will turn ON light1
#-----------------------and if 192.168.1.128:8008/light1/off will turn off light1
@app.route("/<deviceName>/<action>")
def action(deviceName, action):
#-----------------------deviceName can be any of GPIO
if deviceName == 'light1':
if action == "on":
GPIO.output(light1, GPIO.HIGH)
if action == "off":
GPIO.output(light1, GPIO.LOW)
light1_state = GPIO.input(light1)
templateData = {
'light1_state' : light1_state,
'light1': light1,
}
return render_template('index.html', **templateData)
if __name__=="__main__":
app.run(host='192.168.1.128', port=8008, debug=True)
Now the Python code is done we have to edit the inex.html file:
/* This is the index.html file */
<!DOCTYPE html>
<head>
<title>{{ title }}</title>
<link rel="stylesheet" href='../static/style.css'/>
<meta http-equiv="refresh" content="10;url=/" />
<style>
.button {
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
border-radius: 12px;
}
.button1 {background-color: #63FF33;} /* Green */
.button2 {background-color: #008CBA;} /* Blue */
.button3 {background-color: #FF3333;} /* Red */
.button4 {background-color: #FFD833;} /* Amber */
</style>
</head>
<body>
<h1>{{ title }}</h1>
<h2>The light1 GPIO pin is: {{ light1 }}</h1>
<h2>The logic state of light1 is: {{ light1_state }}</h2>
<a href="/light1/on" class="button button1">TURN ON</a>
<a href="/light1/off" class="button button3">TURN OFF</a>
</body>
</html>
This is the Web final result :
The scripts can be modified and adapt for all the GPIO pins.
