2: Web server controls LED

on
To control GPIO pins via web browser, you should install PHP and Apache first. (Go to Chap 1)

In this tutorial, you need LED x 3, 220 ohms resistor x 3, jumper wires and Raspberry Pi 4B

Step (1): Install flask

"sudo apt-get install python3-flask"

Step (2): Create folder so called localhost_trafficlight (e.g. /home/pi/Documents/localhost_trafficlight)

Step (3): Create two sub-folders (static, templates) inside the above folder


 Step (4):  Use Geany to create style.css inside the "static" folder and paste the following code



body 
{
     background: blue;
     color: yellow;
}
.button 
{
     font: bold 20px Arial;
     text-decoration: none;
     background-color: #EEEEEE;
     color: #333333;
     padding: 2px 6px 2px 6px;
     border-top: 1px solid #CCCCCC;
     border-right: 1px solid #333333;
     border-bottom: 1px solid #333333;
     border-left: 1px solid #CCCCCC;
}

Step (5): Use Geany to create index.html inside the "templates" folder. The index.html will call style.css and send commands to Raspberry Pi



<!DOCTYPE html>
   <head>
         <title>GPIO Control</title>
         <link rel="stylesheet" href='../static/style.css'/>
   </head>
   <body>
               <h1>Web control LED</h1>
               <br>
               <h2> Click it </h2>
               <h3>
                         RED Light ==>
                         <a href="/Red/ON" class="button">TURN ON</a>  
                         <a href="/Red/OFF"class="button">TURN OFF</a>
              </h3>
              <h3>
                         Yellow Light ==>
                         <a href="/Yellow/ON" class="button">TURN ON</a>  
                         <a href="/Yellow/OFF"class="button">TURN OFF</a>
              </h3>
              <h3>
                         Green Light ==>
                         <a href="/Green/ON" class="button">TURN ON</a>  
                         <a href="/Green/OFF"class="button">TURN OFF</a>
              </h3>
   </body>
</html>

Step (6): Use Thonny to create python app.py in the directory /home/pi/Documents/localhost_trafficlight

import RPi.GPIO as GPIO
import time
from flask import Flask, render_template, request
app = Flask(__name__)
GPIO.setmode(GPIO.BCM)
GPIO.setwarnings(False)
#define actuators GPIOs
Red = 13
Yellow = 19
Green = 26
#initialize GPIO 
RedSts = 0
YellowSts = 0
GreenSts = 0
# Define led pins as output
GPIO.setup(Red, GPIO.OUT)   
GPIO.setup(Yellow, GPIO.OUT) 
GPIO.setup(Green, GPIO.OUT) 
# turn leds OFF 
GPIO.output(Red, GPIO.LOW)
GPIO.output(Yellow, GPIO.LOW)
GPIO.output(Green, GPIO.LOW)
    
@app.route("/")
def index():
    # Read Sensors 
    RedSts = GPIO.input(Red)
    YellowSts = GPIO.input(Yellow)
    GreenSts = GPIO.input(Green)
    templateData = {
                  'title':'GPIO output Status!',
                  'Red':RedSts,
                  'Yellow':YellowSts,
                  'Green':GreenSts,
                   }
    return render_template('index.html', **templateData)
    
@app.route("/<deviceName>/<action>")
def action(deviceName, action):
    if deviceName == 'Red':
        actuator = Red
    if deviceName == 'Yellow':
        actuator = Yellow
    if deviceName == 'Green':
        actuator = Green
   
    if action == "ON":
        for i in range(5):
            GPIO.output(actuator, GPIO.HIGH)
            time.sleep(0.5)
            GPIO.output(actuator, GPIO.LOW)
            time.sleep(0.5)
            GPIO.output(actuator, GPIO.HIGH)
            time.sleep(0.5)
        
    if action == "OFF":
        GPIO.output(actuator, GPIO.LOW)
             
    RedSts = GPIO.input(Red)
    YellowSts = GPIO.input(Yellow)
    GreenSts = GPIO.input(Green)
   
    templateData = {
              'Red'  : RedSts,
              'Yellow'  : YellowSts,
              'Green'  : GreenSts,
    }
    return render_template('index.html', **templateData)
if __name__ == "__main__":
   app.run(host='0.0.0.0', port=85, debug=True)
   
Step (7): Build electronic circuit





Step (8) Run it in your directory, "python3 app.py" and go to http://0.0.0.0:85. If you want to run it in local IP address, type "hostname -I". You may see something like 192.xxx.xx.xx. The LED will flash 5 times when you click "TURN ON". To switch off the LED, you can click "TURN OFF" button



*The above code are modified from open source platform

Comments

Post a Comment