From 21a089adf2c53c860c7dec112f437e89afeabc10 Mon Sep 17 00:00:00 2001
From: jessikitty <jess.rogerson.29@outlook.com>
Date: Mon, 15 Dec 2025 16:10:55 +1100
Subject: [PATCH] Add web interface for relay control (reference
 implementation)

---
 web_interface/index.html | 373 +++++++++++++++++++++++++++++++++++++++
 1 file changed, 373 insertions(+)
 create mode 100644 web_interface/index.html
diff --git a/web_interface/index.html b/web_interface/index.html
new file mode 100644
index 0000000..0e3a87e
--- /dev/null
+++ b/web_interface/index.html
@@ -0,0 +1,373 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>ESP32 Relay Controller</title>
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+
+        body {
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            min-height: 100vh;
+            padding: 20px;
+        }
+
+        .container {
+            max-width: 800px;
+            margin: 0 auto;
+            background: white;
+            border-radius: 20px;
+            box-shadow: 0 20px 60px rgba(0,0,0,0.3);
+            overflow: hidden;
+        }
+
+        .header {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            color: white;
+            padding: 30px;
+            text-align: center;
+        }
+
+        .header h1 {
+            font-size: 28px;
+            margin-bottom: 10px;
+        }
+
+        .status-badge {
+            display: inline-block;
+            padding: 8px 16px;
+            border-radius: 20px;
+            font-size: 14px;
+            font-weight: bold;
+            margin-top: 10px;
+        }
+
+        .status-disconnected {
+            background: #e74c3c;
+        }
+
+        .status-connected {
+            background: #27ae60;
+        }
+
+        .content {
+            padding: 30px;
+        }
+
+        .connection-section {
+            margin-bottom: 30px;
+            padding: 20px;
+            background: #f8f9fa;
+            border-radius: 10px;
+        }
+
+        .btn {
+            padding: 12px 24px;
+            border: none;
+            border-radius: 8px;
+            font-size: 16px;
+            font-weight: 600;
+            cursor: pointer;
+            transition: all 0.3s ease;
+            margin: 5px;
+        }
+
+        .btn-primary {
+            background: #667eea;
+            color: white;
+        }
+
+        .btn-primary:hover {
+            background: #5568d3;
+            transform: translateY(-2px);
+            box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4);
+        }
+
+        .btn-danger {
+            background: #e74c3c;
+            color: white;
+        }
+
+        .btn-danger:hover {
+            background: #c0392b;
+        }
+
+        .btn:disabled {
+            opacity: 0.5;
+            cursor: not-allowed;
+        }
+
+        .relay-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
+            gap: 15px;
+            margin-top: 20px;
+        }
+
+        .relay-card {
+            background: white;
+            border: 2px solid #e0e0e0;
+            border-radius: 12px;
+            padding: 20px;
+            text-align: center;
+            transition: all 0.3s ease;
+        }
+
+        .relay-card:hover {
+            transform: translateY(-5px);
+            box-shadow: 0 5px 20px rgba(0,0,0,0.1);
+        }
+
+        .relay-card.active {
+            border-color: #27ae60;
+            background: #d4edda;
+        }
+
+        .relay-number {
+            font-size: 14px;
+            color: #666;
+            margin-bottom: 10px;
+            font-weight: 600;
+        }
+
+        .relay-status {
+            font-size: 24px;
+            margin: 10px 0;
+        }
+
+        .controls {
+            margin-top: 30px;
+            display: flex;
+            gap: 10px;
+            flex-wrap: wrap;
+            justify-content: center;
+        }
+
+        .log-section {
+            margin-top: 30px;
+            background: #f8f9fa;
+            border-radius: 10px;
+            padding: 20px;
+        }
+
+        .log-section h3 {
+            margin-bottom: 15px;
+            color: #333;
+        }
+
+        #log {
+            background: #1e1e1e;
+            color: #00ff00;
+            padding: 15px;
+            border-radius: 8px;
+            max-height: 200px;
+            overflow-y: auto;
+            font-family: 'Courier New', monospace;
+            font-size: 12px;
+            white-space: pre-wrap;
+        }
+
+        .warning {
+            background: #fff3cd;
+            border: 1px solid #ffc107;
+            color: #856404;
+            padding: 15px;
+            border-radius: 8px;
+            margin-bottom: 20px;
+        }
+
+        .warning strong {
+            display: block;
+            margin-bottom: 5px;
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <div class="header">
+            <h1>🔌 ESP32 Relay Controller</h1>
+            <div class="status-badge" id="statusBadge">Disconnected</div>
+        </div>
+
+        <div class="content">
+            <div class="warning">
+                <strong>⚠️ Browser Compatibility</strong>
+                This interface uses Web Bluetooth API which is currently only supported in Chrome, Edge, and Opera browsers. 
+                For mobile control, use Serial Bluetooth Terminal apps instead.
+            </div>
+
+            <div class="connection-section">
+                <h3>Connection</h3>
+                <button class="btn btn-primary" id="connectBtn" onclick="connectDevice()">
+                    Connect to ESP32
+                </button>
+                <button class="btn btn-danger" id="disconnectBtn" onclick="disconnectDevice()" disabled>
+                    Disconnect
+                </button>
+            </div>
+
+            <div id="relaySection" style="display: none;">
+                <h3>Relay Controls</h3>
+                <div class="relay-grid" id="relayGrid">
+                    <!-- Relay cards will be generated here -->
+                </div>
+
+                <div class="controls">
+                    <button class="btn btn-primary" onclick="sendCommand('ALL_ON')">
+                        All ON
+                    </button>
+                    <button class="btn btn-danger" onclick="sendCommand('ALL_OFF')">
+                        All OFF
+                    </button>
+                    <button class="btn btn-primary" onclick="sendCommand('STATUS')">
+                        Refresh Status
+                    </button>
+                </div>
+            </div>
+
+            <div class="log-section">
+                <h3>Activity Log</h3>
+                <div id="log"></div>
+            </div>
+        </div>
+    </div>
+
+    <script>
+        let device;
+        let characteristic;
+        const relayStates = new Array(8).fill(false);
+
+        function log(message) {
+            const logDiv = document.getElementById('log');
+            const timestamp = new Date().toLocaleTimeString();
+            logDiv.textContent += `[${timestamp}] ${message}\n`;
+            logDiv.scrollTop = logDiv.scrollHeight;
+        }
+
+        function updateUI(connected) {
+            const statusBadge = document.getElementById('statusBadge');
+            const connectBtn = document.getElementById('connectBtn');
+            const disconnectBtn = document.getElementById('disconnectBtn');
+            const relaySection = document.getElementById('relaySection');
+
+            if (connected) {
+                statusBadge.textContent = 'Connected';
+                statusBadge.className = 'status-badge status-connected';
+                connectBtn.disabled = true;
+                disconnectBtn.disabled = false;
+                relaySection.style.display = 'block';
+            } else {
+                statusBadge.textContent = 'Disconnected';
+                statusBadge.className = 'status-badge status-disconnected';
+                connectBtn.disabled = false;
+                disconnectBtn.disabled = true;
+                relaySection.style.display = 'none';
+            }
+        }
+
+        function createRelayCards() {
+            const grid = document.getElementById('relayGrid');
+            grid.innerHTML = '';
+            
+            for (let i = 0; i < 8; i++) {
+                const card = document.createElement('div');
+                card.className = 'relay-card';
+                card.id = `relay${i}`;
+                card.innerHTML = `
+                    <div class="relay-number">Relay ${i + 1}</div>
+                    <div class="relay-status">⚫</div>
+                    <button class="btn btn-primary" onclick="toggleRelay(${i})">
+                        Toggle
+                    </button>
+                `;
+                grid.appendChild(card);
+            }
+        }
+
+        async function connectDevice() {
+            try {
+                log('Requesting Bluetooth Device...');
+                
+                // Note: Web Bluetooth doesn't support Bluetooth Serial directly
+                // This is a demonstration of the concept
+                // For actual implementation, you would need to use Web Serial API
+                // or a Bluetooth Low Energy (BLE) version of the firmware
+                
+                device = await navigator.bluetooth.requestDevice({
+                    filters: [{ name: 'ESP32-Relay-8CH' }],
+                    optionalServices: ['generic_access']
+                });
+
+                log(`Connected to ${device.name}`);
+                updateUI(true);
+                createRelayCards();
+                
+                // Request initial status
+                setTimeout(() => sendCommand('STATUS'), 500);
+                
+            } catch (error) {
+                log(`Error: ${error.message}`);
+                alert('Web Bluetooth Classic is not supported. Please use:\n' +
+                      '1. Serial Bluetooth Terminal app on mobile\n' +
+                      '2. Chrome\'s Web Serial API (requires different firmware)\n' +
+                      '3. PuTTY or similar on desktop');
+            }
+        }
+
+        function disconnectDevice() {
+            if (device && device.gatt.connected) {
+                device.gatt.disconnect();
+            }
+            log('Disconnected');
+            updateUI(false);
+        }
+
+        function sendCommand(command) {
+            // This is a placeholder - actual implementation would use Web Serial API
+            log(`Sending: ${command}`);
+            
+            // Simulate response for demo
+            if (command === 'STATUS') {
+                log('=== Relay Status ===');
+                for (let i = 0; i < 8; i++) {
+                    log(`Relay ${i + 1}: ${relayStates[i] ? 'ON' : 'OFF'}`);
+                    updateRelayCard(i, relayStates[i]);
+                }
+                log('===================');
+            }
+        }
+
+        function toggleRelay(index) {
+            const newState = !relayStates[index];
+            const command = newState ? `ON${index + 1}` : `OFF${index + 1}`;
+            sendCommand(command);
+            relayStates[index] = newState;
+            updateRelayCard(index, newState);
+        }
+
+        function updateRelayCard(index, state) {
+            const card = document.getElementById(`relay${index}`);
+            const status = card.querySelector('.relay-status');
+            
+            if (state) {
+                card.classList.add('active');
+                status.textContent = '🟢';
+            } else {
+                card.classList.remove('active');
+                status.textContent = '⚫';
+            }
+        }
+
+        // Initialize
+        log('ESP32 Relay Controller Ready');
+        log('Click "Connect to ESP32" to begin');
+        log('Note: This demo requires Web Bluetooth support');
+    </script>
+</body>
+</html>
