Controlling GPIO through web interface in Raspberry Pi - Mini Project: Build & Apply

Controlling GPIO through web interface

📖 Scenario: You have a Raspberry Pi connected to an LED light on GPIO pin 17. You want to control this LED from a simple web page by turning it ON or OFF.

🎯 Goal: Build a small Python web server that shows a web page with two buttons: Turn ON and Turn OFF. When you click these buttons, the LED connected to GPIO pin 17 will turn on or off accordingly.

📋 What You'll Learn

Use the gpiozero library to control the GPIO pin.

Use the Flask web framework to create the web server.

Create a web page with two buttons labeled Turn ON and Turn OFF.

When a button is clicked, the server should turn the LED on or off.

Display the current LED status on the web page.

💡 Why This Matters

🌍 Real World

This project shows how to control physical devices like lights or motors remotely using a web browser, which is useful for home automation or IoT projects.

💼 Career

Understanding how to connect hardware control with web interfaces is valuable for roles in embedded systems, IoT development, and automation engineering.

1

Setup GPIO LED control

Import LED from gpiozero and create an LED object called led connected to GPIO pin 17.

Raspberry Pi

# Import LED and create led object on pin 17
# Your code here

Hint

Use from gpiozero import LED and then led = LED(17).

2

Setup Flask web server

Import Flask and create a Flask app called app.

Raspberry Pi

from gpiozero import LED
led = LED(17)

# Import Flask and create app
# Your code here

Hint

Use from flask import Flask and then app = Flask(__name__).

3

Create routes to control LED

Create two routes in app: /on to turn the LED on using led.on() and /off to turn the LED off using led.off(). Both routes should return a simple string confirming the action.

Raspberry Pi

from gpiozero import LED
led = LED(17)

from flask import Flask
app = Flask(__name__)

# Create /on and /off routes to control LED
# Your code here

Hint

Use @app.route('/on') and @app.route('/off') decorators and call led.on() or led.off() inside the functions.

4

Create main page with buttons and run server

Create a route / that returns an HTML page with two buttons: one linking to /on labeled Turn ON and one linking to /off labeled Turn OFF. Then add the code to run the Flask app with app.run(host='0.0.0.0'). Finally, print the message "Server started".

Raspberry Pi

from gpiozero import LED
led = LED(17)

from flask import Flask
app = Flask(__name__)

@app.route('/on')
def led_on():
    led.on()
    return "LED is ON"

@app.route('/off')
def led_off():
    led.off()
    return "LED is OFF"

# Create / route with buttons and run the app
# Your code here

Hint

Use @app.route('/') to create the main page. Return HTML with two buttons linking to /on and /off. Use app.run(host='0.0.0.0') to start the server and print "Server started".

Practice

1. What is the main purpose of using a web interface to control Raspberry Pi GPIO pins?

easy

A. To control hardware remotely using a web page

B. To increase the Raspberry Pi processing speed

C. To install new software on the Raspberry Pi

D. To connect the Raspberry Pi to a printer

Solution

1. Step 1: Understand the role of GPIO pins

   GPIO pins allow Raspberry Pi to interact with hardware like LEDs or motors.

2. Step 2: Recognize the benefit of a web interface

   A web interface lets users control these pins from any device with a browser, remotely and easily.

3. Final Answer:

   To control hardware remotely using a web page -> Option A

4. Quick Check:

   Web interface = remote GPIO control [OK]

Hint: Web interface means remote control via browser [OK]

Common Mistakes:

• Confusing GPIO control with software installation
• Thinking it speeds up the Raspberry Pi
• Assuming it connects to printers

2. Which Python library is commonly used to create a web server for controlling GPIO pins on Raspberry Pi?

easy

A. NumPy

B. Pandas

C. Flask

D. Matplotlib

Solution

1. Step 1: Identify web server libraries

   Flask is a lightweight Python web framework used to build web servers.

2. Step 2: Match Flask with GPIO control

   Flask can handle web requests to turn GPIO pins on or off via buttons on a webpage.

3. Final Answer:

   Flask -> Option C

4. Quick Check:

   Flask = web server for GPIO control [OK]

Hint: Flask is the simple web server for Python GPIO control [OK]

Common Mistakes:

• Choosing data libraries like NumPy or Pandas
• Confusing plotting library Matplotlib with web server

3. Given this Flask route code snippet controlling GPIO pin 17:

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

app = Flask(__name__)
GPIO.setmode(GPIO.BCM)
GPIO.setup(17, GPIO.OUT)

@app.route('/pin17/<state>')
def pin17(state):
    if state == 'on':
        GPIO.output(17, GPIO.HIGH)
        return 'Pin 17 is ON'
    elif state == 'off':
        GPIO.output(17, GPIO.LOW)
        return 'Pin 17 is OFF'
    else:
        return 'Invalid state'

What will be the output if you visit /pin17/on in the browser?

medium

A. Invalid state

B. Pin 17 is ON

C. Pin 17 is OFF

D. 404 Not Found

Solution

1. Step 1: Analyze the URL parameter

   The URL /pin17/on passes 'on' as the state argument to the function.

2. Step 2: Check the condition for 'on'

   The code checks if state == 'on', then sets GPIO pin 17 HIGH and returns 'Pin 17 is ON'.

3. Final Answer:

   Pin 17 is ON -> Option B

4. Quick Check:

   URL /pin17/on = Pin 17 ON [OK]

Hint: Match URL state to if-condition for output [OK]

Common Mistakes:

• Confusing 'on' with 'off' states
• Expecting an error for valid URL
• Ignoring the return string

4. This Flask code snippet is intended to turn GPIO pin 18 ON or OFF via web requests:

from flask import Flask
import RPi.GPIO as GPIO

app = Flask(__name__)
GPIO.setmode(GPIO.BCM)
GPIO.setup(18, GPIO.OUT)

@app.route('/pin18/<state>')
def control_pin(state):
    if state = 'on':
        GPIO.output(18, GPIO.HIGH)
        return 'Pin 18 ON'
    elif state == 'off':
        GPIO.output(18, GPIO.LOW)
        return 'Pin 18 OFF'
    else:
        return 'Invalid'

What is the error in this code?

medium

A. Using '=' instead of '==' in the if condition

B. Missing GPIO.setup for pin 18

C. Flask app is not created

D. No return statement in the function

Solution

1. Step 1: Check the if condition syntax

   The line if state = 'on': uses '=' which is assignment, not comparison.

2. Step 2: Identify correct comparison operator

   It should be if state == 'on': to compare values properly.

3. Final Answer:

   Using '=' instead of '==' in the if condition -> Option A

4. Quick Check:

   Use '==' for comparison, not '=' [OK]

Hint: Use '==' to compare, '=' assigns value [OK]

Common Mistakes:

• Confusing assignment '=' with comparison '=='
• Ignoring syntax errors in if statements
• Assuming GPIO setup is missing

5. You want to create a web page with two buttons to turn an LED on GPIO pin 22 ON and OFF. Which Flask route and HTML snippet correctly implement this control?

@app.route('/led/<state>')
def led_control(state):
    if state == 'on':
        GPIO.output(22, GPIO.HIGH)
    elif state == 'off':
        GPIO.output(22, GPIO.LOW)
    return f'LED is {state}'

Choose the correct HTML buttons to send the commands:

hard

A. Turn ONTurn OFF

B. Toggle

C. ONOFF

D.

Solution

1. Step 1: Understand Flask route expects URL with state

   The route '/led/<state>' expects 'on' or 'off' in the URL path.

2. Step 2: Check HTML methods to send GET requests

   Forms with action URLs send GET requests correctly when submitted, matching the route.

3. Step 3: Compare options

   <form action='/led/on'><input type='submit' value='ON'></form><form action='/led/off'><input type='submit' value='OFF'></form> uses forms with action '/led/on' and '/led/off', which matches the Flask route and triggers the function properly.

4. Final Answer:

   <form action='/led/on'><input type='submit' value='ON'></form><form action='/led/off'><input type='submit' value='OFF'></form> -> Option D

5. Quick Check:

   Forms with correct action URLs = proper GPIO control [OK]

Hint: Use forms with action URLs matching Flask route [OK]

Common Mistakes:

• Using fetch without handling promises
• Using buttons without URL or form action
• Using incorrect URLs that don't match Flask route