Adhyoksh Jyoti
Published

Controlling GPIO pins of Raspberry Pi with web page

Control GPIO pins turn ON/OFF from a webpage which can be further extended in home automation projects.

IntermediateProtip30 minutes21,117
Controlling GPIO pins of Raspberry Pi with web page

Things used in this project

Hardware components

Raspberry Pi 4 Model B
Raspberry Pi 4 Model B
Any Raspberry Pi model can be used.
×1
LED (generic)
LED (generic)
×3
Resistor 100 ohm
Resistor 100 ohm
×3
Jumper wires (generic)
Jumper wires (generic)
×4
Breadboard (generic)
Breadboard (generic)
×1

Story

Read more

Schematics

Circuit schematics

Code

Python code

Python
from flask import Flask
from flask import render_template
import RPi.GPIO as rpi
import time

app= Flask(__name__)

led1,led2,led3= 3,5,7

rpi.setwarnings(False)
rpi.setmode(rpi.BOARD)
rpi.setup(led1, rpi.OUT)
rpi.setup(led2, rpi.OUT)
rpi.setup(led3, rpi.OUT)
rpi.output(led1, 0)
rpi.output(led2, 0)
rpi.output(led3, 0)
print("Done")

@app.route('/')
def index():
    return render_template('webpage.html')

@app.route('/A')
def led1on():
    rpi.output(led1,1)
    return render_template('webpage.html')

@app.route('/a')
def led1off():
    rpi.output(led1,0)
    return render_template('webpage.html')

@app.route('/B')
def led2on():
    rpi.output(led2,1)
    return render_template('webpage.html')

@app.route('/b')
def led2off():
    rpi.output(led2,0)
    return render_template('webpage.html')

@app.route('/C')
def led3on():
    rpi.output(led3,1)
    return render_template('webpage.html')

@app.route('/c')
def led3off():
    rpi.output(led3,0)
    return render_template('webpage.html')

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

HTML code

HTML
<html>
  <head>
    <title>Rpi IoT</title>
  </head>
  <body>
  <h1>LED controller</h1>
  <h3>Click here:</h3>
  <br>
  <a href=\A><button>LED1 ON</button></a>
  <a href=\a><button>LED1 OFF</button></a><br>
  <a href=\B><button>LED2 ON</button></a>
  <a href=\b><button>LED2 OFF</button></a><br>
  <a href=\C><button>LED3 ON</button></a>
  <a href=\c><button>LED3 OFF</button></a>
  </body>
</html>

Credits

Adhyoksh Jyoti

Adhyoksh Jyoti

11 projects • 9 followers
Electronics and Communication Engineering B.Tech graduate from NIT Srinagar, J&K.

Comments

Related channels and tags
  • Home Automation
  • Internet of Things
  • Raspberry Pi