How to create iot dashboard on raspberry pi

Iot-protocolsHow-ToBeginner · 4 min read

How to Create an IoT Dashboard on Raspberry Pi Easily

To create an IoT dashboard on a Raspberry Pi, install Python and Flask to build a web server that displays sensor data. Connect your sensors to the Pi, collect data with Python scripts, and use Flask to show this data on a web page accessible from any device on your network.

📐

Syntax

Here is the basic syntax to create a simple Flask web server that serves sensor data on a dashboard:

from flask import Flask, render_template: Imports Flask to create the web app.
app = Flask(__name__): Initializes the Flask app.
@app.route('/'): Defines the main page route.
def index():: Function to handle the main page request.
return render_template('index.html', data=data): Sends sensor data to the HTML page.
app.run(host='0.0.0.0', port=5000): Runs the server accessible on the local network.

python

from flask import Flask, render_template

app = Flask(__name__)

@app.route('/')
def index():
    data = {'temperature': 25, 'humidity': 60}
    return render_template('index.html', data=data)

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

💻

Example

This example shows a complete Flask app on Raspberry Pi that reads dummy sensor data and displays it on a simple web dashboard.

Create a folder named templates and inside it create index.html with HTML to show the data.

python

from flask import Flask, render_template
import random

app = Flask(__name__)

@app.route('/')
def index():
    # Simulate sensor data
    data = {
        'temperature': round(random.uniform(20.0, 30.0), 2),
        'humidity': round(random.uniform(40.0, 70.0), 2)
    }
    return render_template('index.html', data=data)

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

💻

Example - index.html

This is the HTML file to display the sensor data passed from Flask.

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>IoT Dashboard</title>
    <style>
        body { font-family: Arial, sans-serif; margin: 40px; background-color: #f0f0f0; }
        .card { background: white; padding: 20px; border-radius: 8px; width: 300px; box-shadow: 0 2px 5px rgba(0,0,0,0.1); }
        h1 { color: #333; }
        p { font-size: 1.2rem; }
    </style>
</head>
<body>
    <div class="card">
        <h1>IoT Sensor Data</h1>
        <p>Temperature: {{ data.temperature }} °C</p>
        <p>Humidity: {{ data.humidity }} %</p>
    </div>
</body>
</html>

⚠️

Common Pitfalls

Not installing Flask: Forgetting to install Flask with pip install flask causes errors.
Wrong host IP: Using 127.0.0.1 makes the dashboard accessible only on the Pi itself; use 0.0.0.0 to allow network access.
Missing templates folder: Flask requires the HTML files to be inside a folder named templates.
Not running with Python 3: Raspberry Pi usually has Python 2 and 3; run with python3 to avoid syntax issues.

python

## Wrong way: Missing templates folder or wrong host
from flask import Flask, render_template
app = Flask(__name__)

@app.route('/')
def index():
    data = {'temperature': 25}
    return render_template('index.html', data=data)

if __name__ == '__main__':
    app.run(host='127.0.0.1', port=5000)  # Dashboard not accessible from other devices

## Right way:
# 1. Place index.html inside 'templates' folder
# 2. Run with host='0.0.0.0' to allow network access
# 3. Use python3 to run the script

📊

Quick Reference

Install Flask: pip3 install flask
Run Flask app: python3 app.py
Access dashboard: Open http://raspberrypi.local:5000 or Pi's IP in browser
Place HTML files in templates folder
Use host='0.0.0.0' in app.run() for network access

✅

Key Takeaways

Use Python Flask on Raspberry Pi to create a simple web server for your IoT dashboard.

Place your HTML dashboard files inside a 'templates' folder for Flask to find them.

Run the Flask app with host='0.0.0.0' to make the dashboard accessible on your local network.

Install Flask using 'pip3 install flask' and run your scripts with Python 3.

Test your dashboard by opening the Pi's IP address and port 5000 in a web browser.