Raspberry Piprogramming~5 mins

Controlling GPIO through web interface in Raspberry Pi

Choose your learning style9 modes available

Learn Why Deep Visual Try Challenge Project Recall Time

Introduction

We use a web interface to control Raspberry Pi's GPIO pins so we can turn devices on or off from any device with a browser. This makes controlling hardware easy and remote.

You want to turn on a light or fan connected to Raspberry Pi from your phone.

You need to control a motor or sensor remotely without physically touching the Pi.

You want to build a simple home automation system accessible via web browser.

You want to test GPIO pins without using command line or physical buttons.

Syntax

Raspberry Pi

from flask import Flask, render_template, request
import RPi.GPIO as GPIO

GPIO.setmode(GPIO.BCM)
GPIO.setup(pin_number, GPIO.OUT)

app = Flask(__name__)

@app.route('/', methods=['GET', 'POST'])
def control_gpio():
    if request.method == 'POST':
        if request.form.get('action') == 'ON':
            GPIO.output(pin_number, GPIO.HIGH)
        else:
            GPIO.output(pin_number, GPIO.LOW)
    return render_template('index.html')

if __name__ == '__main__':
    app.run(host='0.0.0.0', port=5000)

Use GPIO.setmode(GPIO.BCM) to refer to pins by their Broadcom number.

Flask is a simple web framework to create web pages and handle button clicks.

Examples

Set pin 17 as output and turn it ON (HIGH).

Raspberry Pi

GPIO.setmode(GPIO.BCM)
GPIO.setup(17, GPIO.OUT)
GPIO.output(17, GPIO.HIGH)

Simple Flask app with buttons to send ON or OFF commands.

Raspberry Pi

from flask import Flask, request
app = Flask(__name__)

@app.route('/', methods=['GET', 'POST'])
def home():
    if request.method == 'POST':
        action = request.form['action']
        # control GPIO here
    return '<form method="post"><button name="action" value="ON">ON</button><button name="action" value="OFF">OFF</button></form>'

Sample Program

This program creates a web page with two buttons to turn GPIO pin 17 ON or OFF. When you press a button, the Raspberry Pi changes the pin state accordingly.

Raspberry Pi

from flask import Flask, render_template_string, request
import RPi.GPIO as GPIO

GPIO.setmode(GPIO.BCM)
pin = 17
GPIO.setup(pin, GPIO.OUT)

app = Flask(__name__)

html = '''
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>GPIO Control</title></head>
<body>
<h1>Control GPIO Pin 17</h1>
<form method="post">
<button name="action" value="ON" type="submit">Turn ON</button>
<button name="action" value="OFF" type="submit">Turn OFF</button>
</form>
</body>
</html>
'''

@app.route('/', methods=['GET', 'POST'])
def control():
    if request.method == 'POST':
        if request.form.get('action') == 'ON':
            GPIO.output(pin, GPIO.HIGH)
        elif request.form.get('action') == 'OFF':
            GPIO.output(pin, GPIO.LOW)
    return render_template_string(html)

if __name__ == '__main__':
    try:
        app.run(host='0.0.0.0', port=5000)
    finally:
        GPIO.cleanup()

OutputSuccess

Important Notes

Always clean up GPIO pins with GPIO.cleanup() to avoid warnings on next run.

Run the Flask app with sudo if you get permission errors controlling GPIO.

Make sure your Raspberry Pi and your controlling device are on the same network to access the web page.

Summary

You can control Raspberry Pi GPIO pins using a simple web page.

Flask helps create the web interface and handle button clicks.

GPIO library controls the hardware pins safely from Python code.