Ahmed Ebrahem Ahmed
Published © GPL3+

Smart Home Automation IoT Using Raspberry Pi and Python

In this step by step tutorial, we will learn how to control RPi GPIO from the Internet using Flask, Python, HTML, CSS. Let's do it!

IntermediateFull instructions provided24 hours5,705
Smart Home Automation IoT Using Raspberry Pi and Python

Things used in this project

Story

Read more

Schematics

the final schematic

Code

the final Python Script

Python
# Raspberry Pi 3 GPIO Pins Status And Control Using Flask Web Server and Python
import RPi.GPIO as GPIO
from flask import Flask, render_template, request

app = Flask(__name__)

GPIO.setmode(GPIO.BCM)
GPIO.setwarnings(False)

ledRed = 13
ledYellow= 19
ledGreen= 26

ledRedSts = 0
ledYellowSts = 0
ledGreenSts = 0

GPIO.setup(ledRed, GPIO.OUT)
GPIO.setup(ledYellow,GPIO.OUT)
GPIO.setup(ledGreen, GPIO.OUT)

GPIO.output(ledRed, GPIO.LOW)
GPIO.output(ledYellow, GPIO.LOW)
GPIO.output(ledGreen, GPIO.LOW)

@app.route('/')
def index():
    ledRedSts = GPIO.input(ledRed)
    ledYellowSts = GPIO.input(ledYellow)
    ledGreenSts = GPIO.input(ledGreen)
   
    templateData = { 'ledRed' : ledRedSts,
    'ledYellow' : ledYellowSts,
    'ledGreen' : ledGreenSts }
   
    return render_template('index.html', **templateData)

@app.route('/<deviceName>/<action>')
def do(deviceName, action):
    if deviceName == "ledRed":
        actuator = ledRed
    if deviceName == "ledYellow":
        actuator = ledYellow
    if deviceName == "ledGreen":
        actuator = ledGreen

    if action == "on":
        GPIO.output(actuator, GPIO.HIGH)
    if action == "off":
        GPIO.output(actuator, GPIO.LOW)

    ledRedSts = GPIO.input(ledRed)
    ledYellowSts = GPIO.input(ledYellow)
    ledGreenSts = GPIO.input(ledGreen)

    templateData = { 'ledRed' : ledRedSts,
    'ledYellow' : ledYellowSts,
    'ledGreen' : ledGreenSts }

    return render_template('index.html', **templateData )

if __name__ == "__main__":
app.run(host = '0.0.0.0', debug=True)

the final HTML Code

HTML
<!DOCTYPE html>
<html>
<head>
<title> GPIO Control Web App</title>
<link rel="styleSheet" href="/static/style.css"/>
</head>
<body>
<img src="/static/dogMeme.jpg" width="300px" height="300px" alt="Because You Normie"/>
<h1>Actuators</h1><br>
<h2>Status</h2>
<h3> RED LED --> {{ledRed}}</h3>
<h3> YELLOW LED --> {{ledYellow}}</h3>
<h3> GREEN LED --> {{ledGreen}}</h3><br>
<h2>Led Control</h2>
<h3> RED LED CNTRL ==> <a href ="/ledRed/on" class="button">TURN ON</a> <a href="/ledRed/off" class = "button">TURN OFF</a></h3>
<h3> YELLOW LED CNTRL ==> <a href="/ledYellow/on" class="button">TURN ON</a> <a href="/ledYellow/off" class="button">TURN OFF</a></h3>
<h3> GREEN LED CNTRL ==> <a href="/ledGreen/on" class="button">TURN ON</a> <a href="/ledGreen/off" class="button">TURN OFF</a></h3>
</body>
</html>

the final CSS Code

CSS
body {
text-align: center;
background: #54ff9f;
color: #fff5ee;
}
.button{
font: bold 16px Arial;
background-color:#EEEEEE;
padding: 1px;
border: 1px solid #CCCCCC;
}

Credits

Ahmed Ebrahem Ahmed

Ahmed Ebrahem Ahmed

3 projects • 26 followers
An Egyptian Electrical Engineering Student, Robotics And Embedded Systems Geek.
Thanks to mjrovai.

Comments