Dashboard for IoT Devices

—

by

in React JS Projects

Step 1: Set Up Your Environment

Install Flask: Make sure you have Python and pip installed. Then, run:bashCopy codepip install Flask
Create Your Project Structure:arduinoCopy code/iot_dashboard ├── app.py ├── static │ └── style.css └── templates └── index.html

Step 2: Create `app.py`

This file will handle the backend logic.

pythonCopy codefrom flask import Flask, render_template, jsonify, request
import random

app = Flask(__name__)

# Simulate IoT device data
devices = {
    'device1': {'temperature': 20, 'humidity': 30},
    'device2': {'temperature': 22, 'humidity': 40}
}

@app.route('/')
def index():
    return render_template('index.html')

@app.route('/api/devices', methods=['GET'])
def get_devices():
    return jsonify(devices)

@app.route('/api/update', methods=['POST'])
def update_device():
    data = request.json
    device_id = data.get('id')
    if device_id in devices:
        devices[device_id]['temperature'] = data.get('temperature', devices[device_id]['temperature'])
        devices[device_id]['humidity'] = data.get('humidity', devices[device_id]['humidity'])
        return jsonify(success=True)
    return jsonify(success=False), 404

if __name__ == '__main__':
    app.run(debug=True)

Step 3: Create `index.html`

This file will be the frontend for your dashboard.

htmlCopy code<!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>
    <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <h1>IoT Device Dashboard</h1>
    <div id="devices"></div>

    <script>
        function fetchDevices() {
            $.getJSON('/api/devices', function(data) {
                $('#devices').empty();
                $.each(data, function(id, device) {
                    $('#devices').append(`<div class="device">
                        <h3>${id}</h3>
                        <p>Temperature: ${device.temperature}°C</p>
                        <p>Humidity: ${device.humidity}%</p>
                        <button onclick="updateDevice('${id}')">Update</button>
                    </div>`);
                });
            });
        }

        function updateDevice(id) {
            const temperature = prompt("Enter new temperature:");
            const humidity = prompt("Enter new humidity:");
            if (temperature !== null && humidity !== null) {
                $.ajax({
                    url: '/api/update',
                    type: 'POST',
                    contentType: 'application/json',
                    data: JSON.stringify({ id: id, temperature: temperature, humidity: humidity }),
                    success: function() {
                        fetchDevices();
                    }
                });
            }
        }

        $(document).ready(function() {
            fetchDevices();
        });
    </script>
</body>
</html>

Step 4: Create `style.css`

Add some basic styles.

cssCopy codebody {
    font-family: Arial, sans-serif;
}

.device {
    border: 1px solid #ccc;
    padding: 10px;
    margin: 10px;
}

Step 5: Run Your Application

Navigate to your project directory:bashCopy codecd iot_dashboard
Run your Flask app:bashCopy codepython app.py
Open your web browser and go to http://127.0.0.1:5000.

Comments

Leave a Reply Cancel reply