Controlling GPIO through web interface in Raspberry Pi - Step-by-Step Execution

Concept Flow - Controlling GPIO through web interface

User opens web page

↓

Web server receives request

↓

Parse user input (e.g., button press)

↓

Send command to GPIO pin

↓

GPIO pin state changes (ON/OFF)

↓

Web server sends updated page/status

↓

User sees updated GPIO state on web page

User interacts with a web page, which sends commands to the Raspberry Pi's GPIO pins via a web server, changing pin states and updating the page.

Execution Sample

Raspberry Pi

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

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

@app.route('/', methods=['GET', 'POST'])
def index():
    if request.method == 'POST':
        if 'on' in request.form:
            GPIO.output(18, GPIO.HIGH)
        elif 'off' in request.form:
            GPIO.output(18, GPIO.LOW)
    state = GPIO.input(18)
    return render_template('index.html', state=state)

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

A simple Flask web server that controls GPIO pin 18 based on user button presses on a web page.

Execution Table

Step	Action	Input	GPIO Pin 18 State	Web Response
1	Server starts	None	LOW (default)	Web page loads with LED OFF
2	User presses ON button	POST with 'on'	HIGH	Page reloads showing LED ON
3	User presses OFF button	POST with 'off'	LOW	Page reloads showing LED OFF
4	User refreshes page	GET request	LOW	Page shows LED OFF
5	User presses ON button again	POST with 'on'	HIGH	Page reloads showing LED ON

💡 Server runs continuously; stops on manual shutdown.

Variable Tracker

Variable	Start	After Step 2	After Step 3	After Step 4	After Step 5
GPIO Pin 18 State	LOW	HIGH	LOW	LOW	HIGH
Request Method	None	POST	POST	GET	POST
Request Form	None	{'on'}	{'off'}	None	{'on'}

Key Moments - 3 Insights

Why does the GPIO pin state change only after a POST request and not on GET?

Because the code changes GPIO output only when the request method is POST (see execution_table rows 2 and 3). GET requests just read and display the current state without changing it (row 4).

How does the web server know which button was pressed?

The server checks the form data in the POST request for 'on' or 'off' keys (execution_table rows 2 and 3). This tells it whether to set GPIO HIGH or LOW.

What happens if the user refreshes the page after turning the LED on?

A GET request is sent, which does not change GPIO state but shows the current state (HIGH if LED is on). This is shown in execution_table row 4.

Visual Quiz - 3 Questions

Look at the execution_table, what is the GPIO Pin 18 state after step 3?

A LOW

B HIGH

C Undefined

D Flashing

💡 Hint

Check the 'GPIO Pin 18 State' column in execution_table row 3.

At which step does the server receive a GET request?

A Step 2

B Step 4

C Step 3

D Step 5

💡 Hint

Look at the 'Request Method' variable in variable_tracker after Step 4.

If the user presses the ON button twice in a row, how would the GPIO state change in the table?

A It stays LOW both times.

B It toggles between HIGH and LOW.

C It stays HIGH after the first press and remains HIGH after the second.

D It causes an error.

💡 Hint

GPIO output is set explicitly on POST; pressing ON twice keeps it HIGH (see execution_table steps 2 and 5).

Concept Snapshot

Controlling GPIO through web interface:
- Use a web server (e.g., Flask) to handle HTTP requests.
- On POST, read form data to decide GPIO pin state.
- Use RPi.GPIO to set pin HIGH or LOW.
- On GET, show current GPIO state.
- Update web page to reflect pin status.

Full Transcript

This example shows how a Raspberry Pi can control a GPIO pin using a web interface. The user opens a web page served by Flask. When the user presses ON or OFF buttons, the browser sends a POST request with form data. The server reads this data and sets GPIO pin 18 HIGH or LOW accordingly using the RPi.GPIO library. The server then reloads the page showing the current LED state. GET requests only display the current state without changing it. Variables like GPIO pin state and request method change step-by-step as the user interacts. This method allows easy remote control of hardware through a simple web page.

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