Edge Gateway for MCU Sensor Networks

# Mosquitto configuration for edge gateway
# Listener on all interfaces, port 1883
listener 1883 0.0.0.0

# Persistence: retain messages across broker restarts
persistence true
persistence_location /var/lib/mosquitto/

# Logging
log_dest syslog
log_type error
log_type warning
log_type notice

# Authentication
allow_anonymous false
password_file /etc/mosquitto/passwd
acl_file /etc/mosquitto/acl.conf

# Connection limits
max_connections 50
max_queued_messages 1000

# Keep-alive: disconnect clients that stop responding
max_keepalive 120

# Include bridge configuration
include_dir /etc/mosquitto/conf.d

# Sensor nodes can only publish to their own topic subtree
user esp32-node-01
topic write sensor/esp32-01/#

user esp32-node-02
topic write sensor/esp32-02/#

user pico-node-01
topic write sensor/pico-01/#

# The data logger can subscribe to all sensor topics
user datalogger
topic read sensor/#

# The dashboard can read everything
user dashboard
topic read sensor/#
topic read gateway/#

# The bridge user can read and forward
user bridge
topic read sensor/#
topic write cloud/#

[Unit]
Description=Mosquitto MQTT Broker
Documentation=man:mosquitto(8)
After=network-online.target
Wants=network-online.target

[Service]
Type=notify
NotifyAccess=main
ExecStartPre=/usr/sbin/mosquitto -t -c /etc/mosquitto/mosquitto.conf
ExecStart=/usr/sbin/mosquitto -c /etc/mosquitto/mosquitto.conf
ExecReload=/bin/kill -HUP $MAINPID
Restart=on-failure
RestartSec=5
WatchdogSec=30

# Security hardening
User=mosquitto
Group=mosquitto
ProtectSystem=strict
ProtectHome=true
ReadWritePaths=/var/lib/mosquitto /var/log/mosquitto
NoNewPrivileges=true
PrivateTmp=true

[Install]
WantedBy=multi-user.target

#!/usr/bin/env python3
"""
Edge Gateway Data Logger
Subscribes to MQTT sensor topics, stores readings in SQLite,
triggers camera capture on threshold events, and forwards to cloud.
"""

import json
import os
import signal
import sqlite3
import subprocess
import sys
import time
from datetime import datetime, timezone

import paho.mqtt.client as mqtt

# Configuration
MQTT_BROKER = "localhost"
MQTT_PORT = 1883
MQTT_USER = "datalogger"
MQTT_PASS = "datalogger_pass"
MQTT_TOPICS = [("sensor/#", 1)]

DB_PATH = "/var/lib/gateway/sensor_data.db"
SNAPSHOT_DIR = "/var/lib/gateway/snapshots"
CAMERA_SCRIPT = "/usr/bin/gateway-camera-capture"

# Cloud forwarding (optional)
CLOUD_BROKER = os.environ.get("CLOUD_BROKER", "")
CLOUD_PORT = int(os.environ.get("CLOUD_PORT", "8883"))
CLOUD_USER = os.environ.get("CLOUD_USER", "")
CLOUD_PASS = os.environ.get("CLOUD_PASS", "")

# Thresholds that trigger camera capture
THRESHOLDS = {
    "temperature": {"min": -10.0, "max": 45.0},
    "humidity": {"min": 10.0, "max": 95.0},
    "pressure": {"min": 950.0, "max": 1060.0},
}

running = True
cloud_client = None

def signal_handler(signum, frame):
    global running
    running = False

signal.signal(signal.SIGTERM, signal_handler)
signal.signal(signal.SIGINT, signal_handler)

def init_database(db_path):
    """Create the database and tables if they do not exist."""
    os.makedirs(os.path.dirname(db_path), exist_ok=True)
    conn = sqlite3.connect(db_path)
    cursor = conn.cursor()
    cursor.execute("""
        CREATE TABLE IF NOT EXISTS readings (
            id INTEGER PRIMARY KEY AUTOINCREMENT,
            timestamp TEXT NOT NULL,
            device_id TEXT NOT NULL,
            sensor_type TEXT NOT NULL,
            value REAL NOT NULL,
            unit TEXT DEFAULT '',
            raw_payload TEXT DEFAULT ''
        )
    """)
    cursor.execute("""
        CREATE INDEX IF NOT EXISTS idx_readings_timestamp
        ON readings (timestamp)
    """)
    cursor.execute("""
        CREATE INDEX IF NOT EXISTS idx_readings_device
        ON readings (device_id, sensor_type)
    """)
    cursor.execute("""
        CREATE TABLE IF NOT EXISTS events (
            id INTEGER PRIMARY KEY AUTOINCREMENT,
            timestamp TEXT NOT NULL,
            device_id TEXT NOT NULL,
            event_type TEXT NOT NULL,
            description TEXT DEFAULT '',
            snapshot_path TEXT DEFAULT ''
        )
    """)
    conn.commit()
    return conn

def insert_reading(conn, device_id, sensor_type, value, unit, raw_payload):
    """Insert a sensor reading into the database."""
    timestamp = datetime.now(timezone.utc).isoformat()
    cursor = conn.cursor()
    cursor.execute(
        "INSERT INTO readings (timestamp, device_id, sensor_type, value, unit, raw_payload) "
        "VALUES (?, ?, ?, ?, ?, ?)",
        (timestamp, device_id, sensor_type, value, unit, raw_payload),
    )
    conn.commit()
    return timestamp

def check_threshold(sensor_type, value):
    """Return True if the value exceeds the configured threshold."""
    if sensor_type not in THRESHOLDS:
        return False
    limits = THRESHOLDS[sensor_type]
    return value < limits["min"] or value > limits["max"]

def trigger_camera(conn, device_id, sensor_type, value):
    """Capture a snapshot and log the event."""
    timestamp = datetime.now(timezone.utc).strftime("%Y%m%d_%H%M%S")
    filename = f"alert_{device_id}_{sensor_type}_{timestamp}.jpg"
    filepath = os.path.join(SNAPSHOT_DIR, filename)

    os.makedirs(SNAPSHOT_DIR, exist_ok=True)

    try:
        subprocess.run(
            [CAMERA_SCRIPT, filepath],
            timeout=10,
            check=True,
            capture_output=True,
        )
        print(f"Camera snapshot saved: {filepath}", flush=True)
    except (subprocess.CalledProcessError, FileNotFoundError) as e:
        print(f"Camera capture failed: {e}", flush=True)
        filepath = ""

    cursor = conn.cursor()
    cursor.execute(
        "INSERT INTO events (timestamp, device_id, event_type, description, snapshot_path) "
        "VALUES (?, ?, ?, ?, ?)",
        (
            datetime.now(timezone.utc).isoformat(),
            device_id,
            "threshold_exceeded",
            f"{sensor_type}={value}",
            filepath,
        ),
    )
    conn.commit()

def forward_to_cloud(topic, payload_str):
    """Forward the message to the cloud MQTT broker if configured."""
    global cloud_client
    if cloud_client is None:
        return
    try:
        cloud_topic = f"cloud/{topic}"
        cloud_client.publish(cloud_topic, payload_str, qos=1)
    except Exception as e:
        print(f"Cloud forward failed: {e}", flush=True)

def init_cloud_client():
    """Initialize the cloud MQTT client if credentials are provided."""
    global cloud_client
    if not CLOUD_BROKER:
        print("Cloud forwarding disabled (no CLOUD_BROKER set)", flush=True)
        return

    cloud_client = mqtt.Client(client_id="gateway-cloud-fwd", protocol=mqtt.MQTTv311)
    cloud_client.username_pw_set(CLOUD_USER, CLOUD_PASS)
    cloud_client.tls_set()

    try:
        cloud_client.connect(CLOUD_BROKER, CLOUD_PORT, keepalive=60)
        cloud_client.loop_start()
        print(f"Connected to cloud broker: {CLOUD_BROKER}:{CLOUD_PORT}", flush=True)
    except Exception as e:
        print(f"Cloud connection failed: {e}", flush=True)
        cloud_client = None

def on_connect(client, userdata, flags, rc):
    if rc == 0:
        print("Connected to local MQTT broker", flush=True)
        for topic, qos in MQTT_TOPICS:
            client.subscribe(topic, qos)
            print(f"Subscribed to: {topic}", flush=True)
    else:
        print(f"MQTT connection failed with code: {rc}", flush=True)

def on_message(client, userdata, msg):
    conn = userdata["db"]
    payload_str = msg.payload.decode("utf-8", errors="replace")

    try:
        data = json.loads(payload_str)
    except json.JSONDecodeError:
        print(f"Invalid JSON on {msg.topic}: {payload_str[:100]}", flush=True)
        return

    device_id = data.get("device_id", "unknown")
    sensor_type = data.get("type", "unknown")
    value = data.get("value")
    unit = data.get("unit", "")

    if value is None:
        print(f"Missing 'value' field on {msg.topic}", flush=True)
        return

    try:
        value = float(value)
    except (ValueError, TypeError):
        print(f"Non-numeric value on {msg.topic}: {value}", flush=True)
        return

    # Store in database
    ts = insert_reading(conn, device_id, sensor_type, value, unit, payload_str)
    print(f"[{ts}] {device_id}/{sensor_type}: {value} {unit}", flush=True)

    # Check thresholds
    if check_threshold(sensor_type, value):
        print(f"THRESHOLD EXCEEDED: {device_id}/{sensor_type}={value}", flush=True)
        trigger_camera(conn, device_id, sensor_type, value)

    # Forward to cloud
    forward_to_cloud(msg.topic, payload_str)

def main():
    print("Edge Gateway Data Logger starting...", flush=True)

    # Initialize database
    conn = init_database(DB_PATH)
    print(f"Database initialized: {DB_PATH}", flush=True)

    # Initialize cloud forwarding
    init_cloud_client()

    # Set up local MQTT client
    userdata = {"db": conn}
    client = mqtt.Client(
        client_id="gateway-datalogger",
        protocol=mqtt.MQTTv311,
        userdata=userdata,
    )
    client.username_pw_set(MQTT_USER, MQTT_PASS)
    client.on_connect = on_connect
    client.on_message = on_message

    client.connect(MQTT_BROKER, MQTT_PORT, keepalive=60)
    client.loop_start()

    # Main loop: keep running until signaled to stop
    while running:
        time.sleep(1)

    # Cleanup
    print("Shutting down...", flush=True)
    client.loop_stop()
    client.disconnect()
    if cloud_client:
        cloud_client.loop_stop()
        cloud_client.disconnect()
    conn.close()
    print("Data logger stopped.", flush=True)

if __name__ == "__main__":
    main()

paho-mqtt>=1.6.0,<2.0

[Unit]
Description=Edge Gateway Data Logger
Documentation=https://siliconwit.com/education/embedded-linux-rpi/edge-gateway-mcu-sensor-network
After=mosquitto.service network-online.target
Requires=mosquitto.service
Wants=network-online.target

[Service]
Type=simple
ExecStart=/usr/bin/python3 /opt/gateway/datalogger/gateway_datalogger.py
Restart=on-failure
RestartSec=5
WatchdogSec=60

# Environment file for cloud credentials (optional)
EnvironmentFile=-/etc/gateway/cloud.env

# Run as a dedicated user
User=gateway
Group=gateway

# Security hardening
ProtectSystem=strict
ProtectHome=true
ReadWritePaths=/var/lib/gateway
NoNewPrivileges=true
PrivateTmp=true

# Resource limits
MemoryMax=64M
CPUQuota=25%

[Install]
WantedBy=multi-user.target

-- Sensor readings table
CREATE TABLE IF NOT EXISTS readings (
    id INTEGER PRIMARY KEY AUTOINCREMENT,
    timestamp TEXT NOT NULL,
    device_id TEXT NOT NULL,
    sensor_type TEXT NOT NULL,
    value REAL NOT NULL,
    unit TEXT DEFAULT '',
    raw_payload TEXT DEFAULT ''
);

-- Indexes for common queries
CREATE INDEX IF NOT EXISTS idx_readings_timestamp
    ON readings (timestamp);

CREATE INDEX IF NOT EXISTS idx_readings_device
    ON readings (device_id, sensor_type);

CREATE INDEX IF NOT EXISTS idx_readings_type_time
    ON readings (sensor_type, timestamp);

-- Threshold events and camera captures
CREATE TABLE IF NOT EXISTS events (
    id INTEGER PRIMARY KEY AUTOINCREMENT,
    timestamp TEXT NOT NULL,
    device_id TEXT NOT NULL,
    event_type TEXT NOT NULL,
    description TEXT DEFAULT '',
    snapshot_path TEXT DEFAULT ''
);

CREATE INDEX IF NOT EXISTS idx_events_timestamp
    ON events (timestamp);

#!/usr/bin/env python3
"""
Edge Gateway Web Dashboard
Serves live sensor charts and REST API endpoints.
Reads from the SQLite database populated by the data logger.
"""

import json
import os
import sqlite3
from datetime import datetime, timezone

from flask import Flask, jsonify, render_template, request, send_from_directory

app = Flask(__name__)

DB_PATH = os.environ.get("GATEWAY_DB_PATH", "/var/lib/gateway/sensor_data.db")
SNAPSHOT_DIR = "/var/lib/gateway/snapshots"

def get_db():
    """Get a database connection with row factory."""
    conn = sqlite3.connect(DB_PATH)
    conn.row_factory = sqlite3.Row
    return conn

@app.route("/")
def index():
    """Serve the main dashboard page."""
    return render_template("index.html")

@app.route("/api/latest")
def api_latest():
    """Return the latest reading for each device and sensor type."""
    conn = get_db()
    cursor = conn.cursor()
    cursor.execute("""
        SELECT r.device_id, r.sensor_type, r.value, r.unit, r.timestamp
        FROM readings r
        INNER JOIN (
            SELECT device_id, sensor_type, MAX(id) AS max_id
            FROM readings
            GROUP BY device_id, sensor_type
        ) latest ON r.id = latest.max_id
        ORDER BY r.device_id, r.sensor_type
    """)
    rows = cursor.fetchall()
    conn.close()

    result = []
    for row in rows:
        result.append({
            "device_id": row["device_id"],
            "sensor_type": row["sensor_type"],
            "value": row["value"],
            "unit": row["unit"],
            "timestamp": row["timestamp"],
        })
    return jsonify(result)

@app.route("/api/history")
def api_history():
    """Return historical readings. Query params: hours (default 24), device, type."""
    hours = request.args.get("hours", 24, type=int)
    device = request.args.get("device", None)
    sensor_type = request.args.get("type", None)

    hours = min(hours, 720)  # Cap at 30 days

    conn = get_db()
    cursor = conn.cursor()

    query = """
        SELECT device_id, sensor_type, value, unit, timestamp
        FROM readings
        WHERE timestamp >= datetime('now', ?)
    """
    params = [f"-{hours} hours"]

    if device:
        query += " AND device_id = ?"
        params.append(device)
    if sensor_type:
        query += " AND sensor_type = ?"
        params.append(sensor_type)

    query += " ORDER BY timestamp ASC"
    cursor.execute(query, params)
    rows = cursor.fetchall()
    conn.close()

    result = []
    for row in rows:
        result.append({
            "device_id": row["device_id"],
            "sensor_type": row["sensor_type"],
            "value": row["value"],
            "unit": row["unit"],
            "timestamp": row["timestamp"],
        })
    return jsonify(result)

@app.route("/api/devices")
def api_devices():
    """Return a list of known devices with their last activity time."""
    conn = get_db()
    cursor = conn.cursor()
    cursor.execute("""
        SELECT device_id,
               MAX(timestamp) AS last_seen,
               COUNT(*) AS total_readings,
               GROUP_CONCAT(DISTINCT sensor_type) AS sensor_types
        FROM readings
        GROUP BY device_id
        ORDER BY last_seen DESC
    """)
    rows = cursor.fetchall()
    conn.close()

    result = []
    for row in rows:
        result.append({
            "device_id": row["device_id"],
            "last_seen": row["last_seen"],
            "total_readings": row["total_readings"],
            "sensor_types": row["sensor_types"].split(",") if row["sensor_types"] else [],
        })
    return jsonify(result)

@app.route("/api/events")
def api_events():
    """Return recent threshold events."""
    limit = request.args.get("limit", 50, type=int)
    limit = min(limit, 200)

    conn = get_db()
    cursor = conn.cursor()
    cursor.execute("""
        SELECT id, timestamp, device_id, event_type, description, snapshot_path
        FROM events
        ORDER BY timestamp DESC
        LIMIT ?
    """, (limit,))
    rows = cursor.fetchall()
    conn.close()

    result = []
    for row in rows:
        result.append({
            "id": row["id"],
            "timestamp": row["timestamp"],
            "device_id": row["device_id"],
            "event_type": row["event_type"],
            "description": row["description"],
            "has_snapshot": bool(row["snapshot_path"]),
        })
    return jsonify(result)

@app.route("/api/snapshots/<filename>")
def api_snapshot(filename):
    """Serve a camera snapshot image."""
    # Basic path traversal protection
    if ".." in filename or "/" in filename:
        return "Invalid filename", 400
    return send_from_directory(SNAPSHOT_DIR, filename)

@app.route("/api/stats")
def api_stats():
    """Return database statistics."""
    conn = get_db()
    cursor = conn.cursor()

    cursor.execute("SELECT COUNT(*) FROM readings")
    total_readings = cursor.fetchone()[0]

    cursor.execute("SELECT COUNT(DISTINCT device_id) FROM readings")
    total_devices = cursor.fetchone()[0]

    cursor.execute("SELECT MIN(timestamp), MAX(timestamp) FROM readings")
    row = cursor.fetchone()
    oldest = row[0]
    newest = row[1]

    cursor.execute("SELECT COUNT(*) FROM events")
    total_events = cursor.fetchone()[0]

    conn.close()

    return jsonify({
        "total_readings": total_readings,
        "total_devices": total_devices,
        "oldest_reading": oldest,
        "newest_reading": newest,
        "total_events": total_events,
    })

if __name__ == "__main__":
    app.run(host="0.0.0.0", port=5000, debug=False)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Edge Gateway Dashboard</title>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/chart.umd.min.js"></script>
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; }
        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
            background: #0f172a;
            color: #e2e8f0;
            padding: 1rem;
        }
        h1 { text-align: center; margin-bottom: 0.5rem; color: #38bdf8; }
        .subtitle { text-align: center; color: #94a3b8; margin-bottom: 1.5rem; }
        .grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 1rem;
            margin-bottom: 1.5rem;
        }
        .card {
            background: #1e293b;
            border-radius: 8px;
            padding: 1rem;
            border: 1px solid #334155;
        }
        .card h2 { font-size: 1rem; color: #94a3b8; margin-bottom: 0.5rem; }
        .card .value { font-size: 2rem; font-weight: bold; color: #38bdf8; }
        .card .unit { font-size: 1rem; color: #64748b; }
        .card .device { font-size: 0.8rem; color: #64748b; }
        .chart-container {
            background: #1e293b;
            border-radius: 8px;
            padding: 1rem;
            border: 1px solid #334155;
            margin-bottom: 1rem;
        }
        .chart-container h2 { color: #94a3b8; margin-bottom: 0.5rem; }
        .status { text-align: center; padding: 0.5rem; color: #64748b; font-size: 0.85rem; }
        .status .online { color: #4ade80; }
        .events-list { max-height: 200px; overflow-y: auto; }
        .event-item {
            padding: 0.4rem 0;
            border-bottom: 1px solid #334155;
            font-size: 0.85rem;
        }
        .event-item .event-time { color: #64748b; }
        .event-item .event-desc { color: #fbbf24; }
    </style>
</head>
<body>
    <h1>Edge Gateway Dashboard</h1>
    <p class="subtitle">RPi Zero 2 W Sensor Network Monitor</p>

    <div class="grid" id="current-readings">
        <div class="card">
            <h2>Loading...</h2>
            <div class="value">--</div>
        </div>
    </div>

    <div class="chart-container">
        <h2>Temperature History (Last 6 Hours)</h2>
        <canvas id="tempChart" height="100"></canvas>
    </div>

    <div class="chart-container">
        <h2>Humidity History (Last 6 Hours)</h2>
        <canvas id="humChart" height="100"></canvas>
    </div>

    <div class="grid">
        <div class="card">
            <h2>Connected Devices</h2>
            <div id="device-list">Loading...</div>
        </div>
        <div class="card">
            <h2>Recent Events</h2>
            <div id="events-list" class="events-list">Loading...</div>
        </div>
    </div>

    <p class="status">
        Auto-refresh: every 10 seconds |
        Gateway status: <span id="gw-status" class="online">online</span> |
        <span id="last-update"></span>
    </p>

    <script>
        const REFRESH_INTERVAL = 10000;
        let tempChart = null;
        let humChart = null;

        function createChart(canvasId, label, borderColor, bgColor) {
            const ctx = document.getElementById(canvasId).getContext('2d');
            return new Chart(ctx, {
                type: 'line',
                data: { labels: [], datasets: [] },
                options: {
                    responsive: true,
                    interaction: { intersect: false, mode: 'index' },
                    scales: {
                        x: {
                            ticks: { color: '#64748b', maxTicksLimit: 12 },
                            grid: { color: '#334155' }
                        },
                        y: {
                            ticks: { color: '#64748b' },
                            grid: { color: '#334155' }
                        }
                    },
                    plugins: {
                        legend: { labels: { color: '#94a3b8' } }
                    }
                }
            });
        }

        const COLORS = ['#38bdf8', '#4ade80', '#fbbf24', '#f87171', '#a78bfa', '#fb923c'];

        async function fetchLatest() {
            try {
                const resp = await fetch('/api/latest');
                const data = await resp.json();
                const container = document.getElementById('current-readings');
                container.innerHTML = '';

                data.forEach(item => {
                    const card = document.createElement('div');
                    card.className = 'card';
                    card.innerHTML = `
                        <h2>${item.sensor_type.charAt(0).toUpperCase() + item.sensor_type.slice(1)}</h2>
                        <div class="value">${item.value.toFixed(1)} <span class="unit">${item.unit}</span></div>
                        <div class="device">${item.device_id} | ${new Date(item.timestamp).toLocaleTimeString()}</div>
                    `;
                    container.appendChild(card);
                });
            } catch (e) {
                console.error('Failed to fetch latest:', e);
            }
        }

        async function fetchHistory(chart, sensorType) {
            try {
                const resp = await fetch(`/api/history?hours=6&type=${sensorType}`);
                const data = await resp.json();

                const devices = [...new Set(data.map(d => d.device_id))];
                const datasets = devices.map((dev, i) => {
                    const points = data.filter(d => d.device_id === dev);
                    return {
                        label: dev,
                        data: points.map(p => p.value),
                        borderColor: COLORS[i % COLORS.length],
                        backgroundColor: COLORS[i % COLORS.length] + '20',
                        tension: 0.3,
                        pointRadius: 0,
                        borderWidth: 2,
                        fill: true
                    };
                });

                const allPoints = data.filter(d => d.device_id === devices[0]);
                const labels = allPoints.map(p => {
                    const dt = new Date(p.timestamp);
                    return dt.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
                });

                chart.data.labels = labels;
                chart.data.datasets = datasets;
                chart.update('none');
            } catch (e) {
                console.error(`Failed to fetch ${sensorType} history:`, e);
            }
        }

        async function fetchDevices() {
            try {
                const resp = await fetch('/api/devices');
                const data = await resp.json();
                const container = document.getElementById('device-list');
                container.innerHTML = data.map(d => {
                    const ago = Math.round((Date.now() - new Date(d.last_seen).getTime()) / 1000);
                    const status = ago < 120 ? '🟢' : '🔴';
                    return `<div style="padding:0.3rem 0;border-bottom:1px solid #334155;">
                        ${status} <strong>${d.device_id}</strong> (${d.sensor_types.join(', ')})
                        <br><span style="color:#64748b;font-size:0.8rem;">${d.total_readings} readings, last seen ${ago}s ago</span>
                    </div>`;
                }).join('');
            } catch (e) {
                console.error('Failed to fetch devices:', e);
            }
        }

        async function fetchEvents() {
            try {
                const resp = await fetch('/api/events?limit=20');
                const data = await resp.json();
                const container = document.getElementById('events-list');
                if (data.length === 0) {
                    container.innerHTML = '<div style="color:#64748b;">No events recorded</div>';
                    return;
                }
                container.innerHTML = data.map(e => `
                    <div class="event-item">
                        <span class="event-time">${new Date(e.timestamp).toLocaleString()}</span>
                        <span class="event-desc">${e.device_id}: ${e.description}</span>
                    </div>
                `).join('');
            } catch (e) {
                console.error('Failed to fetch events:', e);
            }
        }

        async function refreshAll() {
            await Promise.all([
                fetchLatest(),
                fetchHistory(tempChart, 'temperature'),
                fetchHistory(humChart, 'humidity'),
                fetchDevices(),
                fetchEvents()
            ]);
            document.getElementById('last-update').textContent =
                'Last update: ' + new Date().toLocaleTimeString();
        }

        window.addEventListener('load', () => {
            tempChart = createChart('tempChart', 'Temperature', '#38bdf8', '#38bdf820');
            humChart = createChart('humChart', 'Humidity', '#4ade80', '#4ade8020');
            refreshAll();
            setInterval(refreshAll, REFRESH_INTERVAL);
        });
    </script>
</body>
</html>