feat: Add a real-time Shelly device status dashboard with WebSocket updates and associated model images.

rules/waterButtonLearnAndCall.js

@@ -17,6 +17,7 @@ const __dirname = path.dirname(__filename);
 
 const sleep = (ms) => new Promise(resolve => setTimeout(resolve, ms));
 const STATE_FILE = path.join(__dirname, 'timer_state.json');
+const WATER_BUTTON_MAC = '08A6F773510C';
 const REMOTE_SWITCH_MAC = 'CC8DA243B0A0';
 
 // Helper to set local light and sync remote switch inversely
@@ -72,7 +73,7 @@ function getState(mac) {
 export default {
     async run(ctx) {
         // Auto-on for water button when it connects (only if remote switch is online)
-        if (ctx.trigger.mac === '08A6F773510C' && ctx.trigger.field === 'online' && ctx.trigger.event === true) {
+        if (ctx.trigger.mac === WATER_BUTTON_MAC && ctx.trigger.field === 'online' && ctx.trigger.event === true) {
             const remoteSwitchConnected = await ctx.getState(REMOTE_SWITCH_MAC, 'system', 'online');
             if (remoteSwitchConnected === true) {
                 ctx.log('Water button connected - remote switch online, turning light on');
@@ -81,14 +82,14 @@ export default {
                 // Double flash to indicate both devices are connected
                 ctx.log('Double flashing to confirm connection');
                 for (let i = 0; i < 2; i++) {
-                    await ctx.sendRPC('08A6F773510C', 'Light.Set', { id: 0, on: true, brightness: 20 });
+                    await ctx.sendRPC(WATER_BUTTON_MAC, 'Light.Set', { id: 0, on: true, brightness: 20 });
                     await sleep(200);
-                    await ctx.sendRPC('08A6F773510C', 'Light.Set', { id: 0, on: false, brightness: 0 });
+                    await ctx.sendRPC(WATER_BUTTON_MAC, 'Light.Set', { id: 0, on: false, brightness: 0 });
                     await sleep(200);
                 }
             } else {
                 ctx.log('Water button connected - remote switch offline, keeping light off');
-                await ctx.sendRPC('08A6F773510C', 'Light.Set', { id: 0, on: false, brightness: 0 });
+                await ctx.sendRPC(WATER_BUTTON_MAC, 'Light.Set', { id: 0, on: false, brightness: 0 });
             }
             return;
         }
@@ -100,24 +101,24 @@ export default {
 
             // Double flash the light
             for (let i = 0; i < 2; i++) {
-                await ctx.sendRPC('08A6F773510C', 'Light.Set', { id: 0, on: true, brightness: 20 });
+                await ctx.sendRPC(WATER_BUTTON_MAC, 'Light.Set', { id: 0, on: true, brightness: 20 });
                 await sleep(200);
-                await ctx.sendRPC('08A6F773510C', 'Light.Set', { id: 0, on: false, brightness: 0 });
+                await ctx.sendRPC(WATER_BUTTON_MAC, 'Light.Set', { id: 0, on: false, brightness: 0 });
                 await sleep(200);
             }
 
             // Turn light on after flash
-            await setLight(ctx, '08A6F773510C', true, 20);
+            await setLight(ctx, WATER_BUTTON_MAC, true, 20);
             return;
         }
 
         // Turn off light when remote switch goes offline
         if (ctx.trigger.mac === REMOTE_SWITCH_MAC && ctx.trigger.field === 'online' && ctx.trigger.event === false) {
             ctx.log('Remote switch went offline - turning light off');
-            await ctx.sendRPC('08A6F773510C', 'Light.Set', { id: 0, on: false, brightness: 0 });
+            await ctx.sendRPC(WATER_BUTTON_MAC, 'Light.Set', { id: 0, on: false, brightness: 0 });
 
             // Clear any pending timer
-            const state = getState('08A6F773510C');
+            const state = getState(WATER_BUTTON_MAC);
             if (state.timer) {
                 clearTimeout(state.timer);
                 state.timer = null;

server.js

@@ -4,6 +4,7 @@ import path from 'path';
 import sqlite3 from 'sqlite3';
 import { fileURLToPath } from 'url';
 import { initRuleEngine, loadRules, runRules, watchRules } from './rule_engine.js';
+import { broadcastEvent, startStatusServer } from './status_server.js';
 
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);
@@ -143,6 +144,7 @@ function checkAndLogEvent(mac, component, field, type, event, connectionId = nul
             if (connectionId) console.log(`[ID: ${connectionId}] Event logged: ${event} on ${component} (${field})`);
             db.run("INSERT INTO events (channel_id, event, timestamp) VALUES (?, ?, ?)", [channelId, String(event), new Date().toISOString()]);
             forwardToUpstream();
+            broadcastEvent(mac, component, field, type, event);
             runRules(mac, component, field, type, event);
             return;
         }
@@ -160,6 +162,7 @@ function checkAndLogEvent(mac, component, field, type, event, connectionId = nul
                 if (connectionId) console.log(`[ID: ${connectionId}] Status change logged: ${event} on ${component} (${field})`);
                 db.run("INSERT INTO events (channel_id, event, timestamp) VALUES (?, ?, ?)", [channelId, currentEventStr, new Date().toISOString()]);
                 forwardToUpstream();
+                broadcastEvent(mac, component, field, type, currentEventStr);
                 runRules(mac, component, field, type, currentEventStr);
             }
         });
@@ -179,6 +182,9 @@ loadRules().then(() => {
     console.error('Error loading rules:', err);
 });
 
+// Start status dashboard server
+startStatusServer();
+
 // Global counter for connection IDs
 let connectionIdCounter = 0;
 
@@ -349,11 +355,17 @@ wss.on('connection', (ws, req) => {
             if (data.method === 'NotifyEvent') {
                 if (data.params && data.params.events) {
                     const mac = connectionDeviceMap.get(connectionId);
-                    // Even if we don't have MAC from map yet (unlikely for identified device), we can try data.src or skip
+                    // Known button event types to store
+                    const knownButtonEvents = ['single_push', 'double_push', 'triple_push', 'long_push', 'btn_down', 'btn_up'];
+
                     if (mac) {
                         data.params.events.forEach(evt => {
-                            // Pass the button event (btn_down/up/etc) as values
+                            // Only store known input button events
-                            checkAndLogEvent(mac, evt.component, 'button', 'enum', evt.event, connectionId);
+                            if (evt.component.startsWith('input') && knownButtonEvents.includes(evt.event)) {
+                                checkAndLogEvent(mac, evt.component, 'button', 'enum', evt.event, connectionId);
+                            } else {
+                                console.log(`[ID: ${connectionId}] Skipped unknown event: ${evt.component} -> ${evt.event}`);
+                            }
                         });
                     }
                 }

status_server.js

@@ -0,0 +1,583 @@
+import http from 'http';
+import fs from 'fs';
+import path from 'path';
+import { fileURLToPath } from 'url';
+import { WebSocketServer } from 'ws';
+import sqlite3 from 'sqlite3';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+const PORT = 8081;
+const MODEL_PICS_DIR = path.join(__dirname, 'modelPics');
+
+// SQLite database connection (read-only for status queries)
+const db = new sqlite3.Database('devices.db', sqlite3.OPEN_READONLY);
+
+// WebSocket clients for broadcasting
+const wsClients = new Set();
+
+// Query initial status data
+function getStatusData() {
+    return new Promise((resolve, reject) => {
+        const sql = `
+            SELECT d.mac, d.model, d.connected, d.last_seen,
+                   c.id as channel_id, c.component, c.field, c.type,
+                   (SELECT e.event FROM events e WHERE e.channel_id = c.id ORDER BY e.id DESC LIMIT 1) as last_event,
+                   (SELECT e.timestamp FROM events e WHERE e.channel_id = c.id ORDER BY e.id DESC LIMIT 1) as last_ts
+            FROM devices d
+            LEFT JOIN channels c ON c.mac = d.mac
+            ORDER BY d.mac, c.component, c.field
+        `;
+        db.all(sql, [], (err, rows) => {
+            if (err) reject(err);
+            else {
+                // Group by device
+                const devices = {};
+                for (const row of rows) {
+                    if (!devices[row.mac]) {
+                        devices[row.mac] = {
+                            mac: row.mac,
+                            model: row.model,
+                            connected: row.connected,
+                            last_seen: row.last_seen,
+                            channels: []
+                        };
+                    }
+                    if (row.channel_id) {
+                        devices[row.mac].channels.push({
+                            id: row.channel_id,
+                            component: row.component,
+                            field: row.field,
+                            type: row.type,
+                            event: row.last_event,
+                            timestamp: row.last_ts
+                        });
+                    }
+                }
+                resolve(Object.values(devices));
+            }
+        });
+    });
+}
+
+// Broadcast event to all connected WebSocket clients
+export function broadcastEvent(mac, component, field, type, event) {
+    const message = JSON.stringify({
+        type: 'event',
+        mac,
+        component,
+        field,
+        eventType: type,
+        event,
+        timestamp: new Date().toISOString()
+    });
+    for (const client of wsClients) {
+        if (client.readyState === 1) { // OPEN
+            client.send(message);
+        }
+    }
+}
+
+// HTML Dashboard
+const dashboardHTML = `<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Shelly Status Dashboard</title>
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
+    <style>
+        :root {
+            --bg-primary: #0f0f14;
+            --bg-secondary: #1a1a24;
+            --bg-card: rgba(30, 30, 45, 0.8);
+            --border-color: rgba(255, 255, 255, 0.1);
+            --text-primary: #ffffff;
+            --text-secondary: #a0a0b0;
+            --accent-online: #22c55e;
+            --accent-offline: #ef4444;
+            --accent-blue: #3b82f6;
+        }
+        
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        
+        body {
+            font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
+            background: var(--bg-primary);
+            color: var(--text-primary);
+            min-height: 100vh;
+            padding: 2rem;
+        }
+        
+        .header {
+            text-align: center;
+            margin-bottom: 2rem;
+        }
+        
+        .header h1 {
+            font-size: 2rem;
+            font-weight: 700;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+        }
+        
+        .header p {
+            color: var(--text-secondary);
+            margin-top: 0.5rem;
+        }
+        
+        .status-indicator {
+            display: inline-flex;
+            align-items: center;
+            gap: 0.5rem;
+            font-size: 0.875rem;
+        }
+        
+        .status-dot {
+            width: 10px;
+            height: 10px;
+            border-radius: 50%;
+            animation: pulse 2s infinite;
+        }
+        
+        .status-dot.connected {
+            background: var(--accent-online);
+            box-shadow: 0 0 10px var(--accent-online);
+        }
+        
+        #connection-status.connected {
+            color: var(--accent-online);
+        }
+        
+        @keyframes pulse {
+            0%, 100% { opacity: 1; }
+            50% { opacity: 0.5; }
+        }
+        
+        .devices-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
+            gap: 1.5rem;
+            max-width: 1400px;
+            margin: 0 auto;
+        }
+        
+        .device-card {
+            background: var(--bg-card);
+            border: 1px solid var(--border-color);
+            border-radius: 16px;
+            padding: 1.5rem;
+            backdrop-filter: blur(10px);
+            transition: transform 0.2s, box-shadow 0.2s;
+        }
+        
+        .device-card:hover {
+            transform: translateY(-4px);
+            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
+        }
+        
+        .device-card.flash {
+            animation: flash-update 0.5s ease-out;
+        }
+        
+        @keyframes flash-update {
+            0% { box-shadow: 0 0 30px rgba(59, 130, 246, 0.8); }
+            100% { box-shadow: none; }
+        }
+        
+        .device-header {
+            display: flex;
+            align-items: center;
+            gap: 1rem;
+            margin-bottom: 1rem;
+            padding-bottom: 1rem;
+            border-bottom: 1px solid var(--border-color);
+        }
+        
+        .device-image {
+            width: 64px;
+            height: 64px;
+            object-fit: contain;
+            border-radius: 8px;
+            background: var(--bg-secondary);
+            padding: 8px;
+        }
+        
+        .device-info {
+            flex: 1;
+        }
+        
+        .device-mac {
+            font-family: monospace;
+            font-size: 0.9rem;
+            font-weight: 600;
+        }
+        
+        .device-model {
+            font-size: 0.75rem;
+            color: var(--text-secondary);
+            margin-top: 2px;
+        }
+        
+        .device-status {
+            display: flex;
+            align-items: center;
+            gap: 0.5rem;
+            padding: 0.375rem 0.75rem;
+            border-radius: 999px;
+            font-size: 0.75rem;
+            font-weight: 600;
+            text-transform: uppercase;
+        }
+        
+        .device-status.online {
+            background: rgba(34, 197, 94, 0.2);
+            color: var(--accent-online);
+        }
+        
+        .device-status.offline {
+            background: rgba(239, 68, 68, 0.2);
+            color: var(--accent-offline);
+        }
+        
+        .device-status .dot {
+            width: 6px;
+            height: 6px;
+            border-radius: 50%;
+            background: currentColor;
+        }
+        
+        .channels-table {
+            width: 100%;
+            font-size: 0.8rem;
+        }
+        
+        .channels-table th {
+            text-align: left;
+            color: var(--text-secondary);
+            font-weight: 500;
+            padding: 0.5rem 0;
+            border-bottom: 1px solid var(--border-color);
+        }
+        
+        .channels-table td {
+            padding: 0.5rem 0;
+            border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+        }
+        
+        .channels-table tr:last-child td {
+            border-bottom: none;
+        }
+        
+        .channel-component {
+            font-family: monospace;
+            color: var(--accent-blue);
+        }
+        
+        .channel-field {
+            color: var(--text-secondary);
+        }
+        
+        .channel-event {
+            font-family: monospace;
+            font-weight: 500;
+        }
+        
+        .channel-timestamp {
+            font-size: 0.7rem;
+            color: var(--text-secondary);
+        }
+        
+        .channel-event.flash {
+            animation: value-flash 0.5s ease-out;
+        }
+        
+        @keyframes value-flash {
+            0% { color: #fbbf24; transform: scale(1.1); }
+            100% { color: inherit; transform: scale(1); }
+        }
+        
+        .empty-state {
+            text-align: center;
+            padding: 4rem 2rem;
+            color: var(--text-secondary);
+        }
+        
+        .empty-state svg {
+            width: 64px;
+            height: 64px;
+            margin-bottom: 1rem;
+            opacity: 0.5;
+        }
+    </style>
+</head>
+<body>
+    <div class="header">
+        <h1>Shelly Status Dashboard</h1>
+        <p class="status-indicator">
+            <span class="status-dot" id="ws-dot"></span>
+            <span id="connection-status">Connecting...</span>
+        </p>
+    </div>
+    
+    <div id="devices-container" class="devices-grid">
+        <div class="empty-state">
+            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 3v2m6-2v2M9 19v2m6-2v2M5 9H3m2 6H3m18-6h-2m2 6h-2M7 19h10a2 2 0 002-2V7a2 2 0 00-2-2H7a2 2 0 00-2 2v10a2 2 0 002 2z" />
+            </svg>
+            <p>Loading devices...</p>
+        </div>
+    </div>
+
+    <script>
+        let devices = {};
+        let ws;
+        
+        function connectWebSocket() {
+            ws = new WebSocket('ws://' + window.location.host);
+            
+            ws.onopen = () => {
+                document.getElementById('ws-dot').classList.add('connected');
+                document.getElementById('connection-status').textContent = 'Connected';
+                document.getElementById('connection-status').classList.add('connected');
+            };
+            
+            ws.onclose = () => {
+                document.getElementById('ws-dot').classList.remove('connected');
+                document.getElementById('connection-status').textContent = 'Disconnected - Reconnecting...';
+                document.getElementById('connection-status').classList.remove('connected');
+                setTimeout(connectWebSocket, 2000);
+            };
+            
+            ws.onmessage = (event) => {
+                const data = JSON.parse(event.data);
+                
+                if (data.type === 'init') {
+                    // Initial data load
+                    devices = {};
+                    for (const device of data.devices) {
+                        devices[device.mac] = device;
+                    }
+                    renderDevices();
+                } else if (data.type === 'event') {
+                    // Real-time event update
+                    handleEvent(data);
+                }
+            };
+        }
+        
+        function handleEvent(data) {
+            const { mac, component, field, event, eventType } = data;
+            
+            if (!devices[mac]) {
+                // New device, request full refresh
+                return;
+            }
+            
+            // Flash the device card
+            const card = document.querySelector(\`[data-mac="\${mac}"]\`);
+            if (card) {
+                card.classList.remove('flash');
+                void card.offsetWidth; // Trigger reflow
+                card.classList.add('flash');
+            }
+            
+            // Update channel value
+            const device = devices[mac];
+            let channel = device.channels.find(c => c.component === component && c.field === field);
+            
+            if (channel) {
+                channel.event = event;
+                channel.timestamp = data.timestamp;
+            } else {
+                device.channels.push({
+                    component,
+                    field,
+                    type: eventType,
+                    event,
+                    timestamp: data.timestamp
+                });
+            }
+            
+            // Update online status if it's a system.online event
+            if (component === 'system' && field === 'online') {
+                device.connected = event === 'true' || event === true ? 1 : 0;
+            }
+            
+            // Re-render the specific device card
+            renderDevice(device);
+            
+            // Flash the updated value
+            const eventCell = document.querySelector(\`[data-mac="\${mac}"] [data-channel="\${component}_\${field}"]\`);
+            if (eventCell) {
+                eventCell.classList.remove('flash');
+                void eventCell.offsetWidth;
+                eventCell.classList.add('flash');
+            }
+        }
+        
+        function renderDevices() {
+            const container = document.getElementById('devices-container');
+            
+            if (Object.keys(devices).length === 0) {
+                container.innerHTML = \`
+                    <div class="empty-state">
+                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 3v2m6-2v2M9 19v2m6-2v2M5 9H3m2 6H3m18-6h-2m2 6h-2M7 19h10a2 2 0 002-2V7a2 2 0 00-2-2H7a2 2 0 00-2 2v10a2 2 0 002 2z" />
+                        </svg>
+                        <p>No devices found</p>
+                    </div>
+                \`;
+                return;
+            }
+            
+            container.innerHTML = Object.values(devices).map(d => renderDeviceHTML(d)).join('');
+        }
+        
+        function renderDevice(device) {
+            const existing = document.querySelector(\`[data-mac="\${device.mac}"]\`);
+            if (existing) {
+                const temp = document.createElement('div');
+                temp.innerHTML = renderDeviceHTML(device);
+                existing.outerHTML = temp.innerHTML;
+            }
+        }
+        
+        function renderDeviceHTML(device) {
+            const isOnline = device.connected === 1;
+            const statusClass = isOnline ? 'online' : 'offline';
+            const statusText = isOnline ? 'Online' : 'Offline';
+            
+            const channelsHTML = device.channels.length > 0 ? \`
+                <table class="channels-table">
+                    <thead>
+                        <tr>
+                            <th>Component</th>
+                            <th>Field</th>
+                            <th>Value</th>
+                            <th>When</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        \${device.channels.map(ch => \`
+                            <tr>
+                                <td class="channel-component">\${ch.component}</td>
+                                <td class="channel-field">\${ch.field}</td>
+                                <td class="channel-event" data-channel="\${ch.component}_\${ch.field}">\${ch.event ?? '-'}</td>
+                                <td class="channel-timestamp">\${formatTimestamp(ch.timestamp)}</td>
+                            </tr>
+                        \`).join('')}
+                    </tbody>
+                </table>
+            \` : '<p style="color: var(--text-secondary); font-size: 0.8rem;">No channels</p>';
+            
+            return \`
+                <div class="device-card" data-mac="\${device.mac}">
+                    <div class="device-header">
+                        <img class="device-image" src="/modelPics/\${device.model}.png" 
+                             onerror="this.src='data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22%23666%22><rect width=%2224%22 height=%2224%22 rx=%224%22/><text x=%2212%22 y=%2216%22 text-anchor=%22middle%22 fill=%22%23999%22 font-size=%228%22>?</text></svg>'"
+                             alt="\${device.model}">
+                        <div class="device-info">
+                            <div class="device-mac">\${device.mac}</div>
+                            <div class="device-model">\${device.model}</div>
+                        </div>
+                        <div class="device-status \${statusClass}">
+                            <span class="dot"></span>
+                            \${statusText}
+                        </div>
+                    </div>
+                    \${channelsHTML}
+                </div>
+            \`;
+        }
+        
+        function formatTimestamp(ts) {
+            if (!ts) return '-';
+            const date = new Date(ts);
+            const now = new Date();
+            const diffMs = now - date;
+            const diffMins = Math.floor(diffMs / 60000);
+            const diffHours = Math.floor(diffMs / 3600000);
+            const diffDays = Math.floor(diffMs / 86400000);
+            
+            if (diffMins < 1) return 'just now';
+            if (diffMins < 60) return \`\${diffMins}m ago\`;
+            if (diffHours < 24) return \`\${diffHours}h ago\`;
+            if (diffDays < 7) return \`\${diffDays}d ago\`;
+            return date.toLocaleDateString();
+        }
+        
+        connectWebSocket();
+    </script>
+</body>
+</html>`;
+
+// Create HTTP server
+const server = http.createServer(async (req, res) => {
+    const url = new URL(req.url, `http://${req.headers.host}`);
+
+    // Serve model images
+    if (url.pathname.startsWith('/modelPics/')) {
+        const filename = path.basename(url.pathname);
+        const filepath = path.join(MODEL_PICS_DIR, filename);
+
+        if (fs.existsSync(filepath)) {
+            res.writeHead(200, { 'Content-Type': 'image/png' });
+            fs.createReadStream(filepath).pipe(res);
+        } else {
+            res.writeHead(404);
+            res.end('Not found');
+        }
+        return;
+    }
+
+    // Serve dashboard
+    if (url.pathname === '/' || url.pathname === '/index.html') {
+        res.writeHead(200, { 'Content-Type': 'text/html' });
+        res.end(dashboardHTML);
+        return;
+    }
+
+    res.writeHead(404);
+    res.end('Not found');
+});
+
+// Create WebSocket server attached to HTTP server
+const wss = new WebSocketServer({ server });
+
+wss.on('connection', async (ws) => {
+    console.log('[Status] Browser client connected');
+    wsClients.add(ws);
+
+    // Send initial status data
+    try {
+        const devices = await getStatusData();
+        ws.send(JSON.stringify({ type: 'init', devices }));
+    } catch (err) {
+        console.error('[Status] Error fetching initial data:', err);
+    }
+
+    ws.on('close', () => {
+        console.log('[Status] Browser client disconnected');
+        wsClients.delete(ws);
+    });
+});
+
+// Start server function
+export function startStatusServer() {
+    server.listen(PORT, () => {
+        console.log(`[Status] Dashboard server running at http://localhost:${PORT}`);
+    });
+}
+
+// Allow running standalone
+if (process.argv[1] === fileURLToPath(import.meta.url)) {
+    startStatusServer();
+}