Control Raspberry Pi GPIO from Web Browser Easily

You can control Raspberry Pi GPIO pins from a web browser by running a web server like Flask on the Pi that listens for browser requests and uses the RPi.GPIO library to change pin states. The browser sends commands via HTTP, and the Flask app updates the GPIO pins accordingly.

Syntax

To control GPIO from a web browser, you typically use a Python web framework like Flask combined with the RPi.GPIO library. The basic syntax involves:

• Importing Flask and RPi.GPIO
• Setting up GPIO pins with GPIO.setup(pin_number, GPIO.OUT)
• Creating Flask routes that respond to browser requests
• Changing GPIO pin states inside route functions using GPIO.output(pin_number, GPIO.HIGH) or GPIO.LOW

python

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

app = Flask(__name__)

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

@app.route('/gpio')
def gpio_control():
    state = request.args.get('state')
    if state == 'on':
        GPIO.output(18, GPIO.HIGH)
        return 'GPIO 18 is ON'
    elif state == 'off':
        GPIO.output(18, GPIO.LOW)
        return 'GPIO 18 is OFF'
    else:
        return 'Invalid state'

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

Example

This example shows a simple Flask app that controls GPIO pin 18 on the Raspberry Pi. You open a web browser and visit http://raspberrypi.local:5000/gpio?state=on to turn the pin on, or state=off to turn it off.

python

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

app = Flask(__name__)

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

@app.route('/gpio')
def gpio_control():
    state = request.args.get('state')
    if state == 'on':
        GPIO.output(18, GPIO.HIGH)
        return 'GPIO 18 is ON'
    elif state == 'off':
        GPIO.output(18, GPIO.LOW)
        return 'GPIO 18 is OFF'
    else:
        return 'Invalid state'

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

Output

 * Running on http://0.0.0.0:5000/ (Press CTRL+C to quit)

# When visiting http://raspberrypi.local:5000/gpio?state=on
GPIO 18 is ON

# When visiting http://raspberrypi.local:5000/gpio?state=off
GPIO 18 is OFF

Common Pitfalls

• Not running the script as root: GPIO control requires root permissions, so run with sudo.
• Wrong GPIO numbering mode: Use GPIO.setmode(GPIO.BCM) or GPIO.setmode(GPIO.BOARD) consistently.
• Not cleaning up GPIO: Always call GPIO.cleanup() on exit to avoid warnings.
• Firewall blocking port 5000: Ensure your Raspberry Pi firewall allows incoming connections on the Flask port.
• Browser caching: Sometimes the browser caches responses; refresh or disable cache during testing.

python

## Wrong way (no root, no cleanup):
import RPi.GPIO as GPIO
GPIO.setmode(GPIO.BCM)
GPIO.setup(18, GPIO.OUT)
GPIO.output(18, GPIO.HIGH)  # May fail without sudo

## Right way:
import RPi.GPIO as GPIO
try:
    GPIO.setmode(GPIO.BCM)
    GPIO.setup(18, GPIO.OUT)
    GPIO.output(18, GPIO.HIGH)
finally:
    GPIO.cleanup()

Quick Reference

Summary tips for controlling GPIO from a web browser on Raspberry Pi:

• Use Flask to create a simple web server.
• Use RPi.GPIO to control pins.
• Run your Python script with sudo.
• Access GPIO control via URLs like /gpio?state=on.
• Always clean up GPIO pins on exit.

Key Takeaways

Run a Flask web server on Raspberry Pi to receive browser commands for GPIO control.

Use the RPi.GPIO library to set pin modes and output states safely.

Always run your GPIO control script with sudo to avoid permission errors.

Clean up GPIO pins with GPIO.cleanup() to prevent warnings and errors.

Test your web interface by visiting URLs with query parameters to toggle pins.