add thunder configuration

Signed-off-by: Peter Siegmund <developer@mars3142.org>

firmware/README-API.md

@@ -154,6 +154,34 @@ Turns the main light on or off.
 
 ---
 
+#### Set Thunder Effect
+
+Turns the thunder/lightning effect on or off.
+
+- **URL:** `/api/light/thunder`
+- **Method:** `POST`
+- **Content-Type:** `application/json`
+- **Request Body:**
+
+```json
+{
+  "on": true
+}
+```
+
+| Field | Type    | Required | Description                    |
+|-------|---------|----------|--------------------------------|
+| on    | boolean | Yes      | `true` = on, `false` = off     |
+
+- **Response:** `200 OK` on success
+
+**Notes:**
+- When enabled, random lightning flashes are triggered
+- Can be combined with any light mode
+- Thunder effect stops automatically when light is turned off
+
+---
+
 #### Set Light Mode
 
 Sets the lighting mode.
@@ -211,6 +239,7 @@ Returns current light status (alternative to WebSocket).
 ```json
 {
   "on": true,
+  "thunder": false,
   "mode": "simulation",
   "schema": "schema_01.csv",
   "color": {
@@ -221,12 +250,13 @@ Returns current light status (alternative to WebSocket).
 }
 ```
 
-| Field  | Type    | Description                          |
-|--------|---------|--------------------------------------|
-| on     | boolean | Current power state                  |
-| mode   | string  | Current mode (day/night/simulation)  |
-| schema | string  | Active schema filename               |
-| color  | object  | Current RGB color being displayed    |
+| Field   | Type    | Description                          |
+|---------|---------|--------------------------------------|
+| on      | boolean | Current power state                  |
+| thunder | boolean | Current thunder effect state         |
+| mode    | string  | Current mode (day/night/simulation)  |
+| schema  | string  | Active schema filename               |
+| color   | object  | Current RGB color being displayed    |
 
 ---
 

firmware/storage/www/index.html

@@ -40,7 +40,6 @@
                 <h2 data-i18n="control.light.title">Lichtsteuerung</h2>
 
                 <div class="control-section">
-                    <h3 data-i18n="control.light.onoff">Ein/Aus</h3>
                     <div class="control-group">
                         <div class="toggle-row">
                             <span class="toggle-label" data-i18n="control.light.light">Licht</span>
@@ -49,6 +48,13 @@
                                 <span class="toggle-icon" id="light-icon">💡</span>
                             </button>
                         </div>
+                        <div class="toggle-row">
+                            <span class="toggle-label" data-i18n="control.light.thunder">Gewitter</span>
+                            <button class="toggle-switch" id="thunder-toggle" onclick="toggleThunder()">
+                                <span class="toggle-state" id="thunder-state" data-i18n="common.off">AUS</span>
+                                <span class="toggle-icon" id="thunder-icon">⚡</span>
+                            </button>
+                        </div>
                     </div>
                     <div id="light-status" class="status"></div>
                 </div>

firmware/storage/www/js/app.js

@@ -47,6 +47,7 @@ document.addEventListener('DOMContentLoaded', async () => {
     await initCapabilities();
     initWebSocket();
     updateConnectionStatus();
+    loadLightStatus();
 
     // Only load scenes and devices if thread is enabled
     if (isThreadEnabled()) {

firmware/storage/www/js/i18n.js

@@ -33,8 +33,8 @@ const translations = {
 
         // Light Control
         'control.light.title': 'Lichtsteuerung',
-        'control.light.onoff': 'Ein/Aus',
         'control.light.light': 'Licht',
+        'control.light.thunder': 'Gewitter',
         'control.mode.title': 'Betriebsmodus',
         'control.schema.active': 'Aktives Schema',
         'control.status.title': 'Aktueller Status',
@@ -204,8 +204,8 @@ const translations = {
 
         // Light Control
         'control.light.title': 'Light Control',
-        'control.light.onoff': 'On/Off',
         'control.light.light': 'Light',
+        'control.light.thunder': 'Thunder',
         'control.mode.title': 'Operating Mode',
         'control.schema.active': 'Active Schema',
         'control.status.title': 'Current Status',

firmware/storage/www/js/light.js

@@ -1,4 +1,6 @@
 // Light control
+let thunderOn = false;
+
 async function toggleLight() {
     lightOn = !lightOn;
     updateLightToggle();
@@ -36,6 +38,44 @@ function updateLightToggle() {
     }
 }
 
+// Thunder control
+async function toggleThunder() {
+    thunderOn = !thunderOn;
+    updateThunderToggle();
+
+    try {
+        const response = await fetch('/api/light/thunder', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ on: thunderOn })
+        });
+
+        if (response.ok) {
+            showStatus('light-status', `${t('control.light.thunder')} ${thunderOn ? t('common.on') : t('common.off')}`, 'success');
+        } else {
+            throw new Error(t('error'));
+        }
+    } catch (error) {
+        showStatus('light-status', `Demo: ${t('control.light.thunder')} ${thunderOn ? t('common.on') : t('common.off')}`, 'success');
+    }
+}
+
+function updateThunderToggle() {
+    const toggle = document.getElementById('thunder-toggle');
+    const state = document.getElementById('thunder-state');
+    const icon = document.getElementById('thunder-icon');
+
+    if (thunderOn) {
+        toggle.classList.add('active');
+        state.textContent = t('common.on');
+        icon.textContent = '⛈️';
+    } else {
+        toggle.classList.remove('active');
+        state.textContent = t('common.off');
+        icon.textContent = '⚡';
+    }
+}
+
 // Mode control
 async function setMode(mode) {
     currentMode = mode;
@@ -100,3 +140,52 @@ async function setActiveSchema() {
         document.getElementById('current-schema').textContent = schemaName;
     }
 }
+
+/**
+ * Load light status from server
+ */
+async function loadLightStatus() {
+    try {
+        const response = await fetch('/api/light/status');
+        if (response.ok) {
+            const status = await response.json();
+
+            // Update light state
+            if (typeof status.on === 'boolean') {
+                lightOn = status.on;
+                updateLightToggle();
+            }
+
+            // Update thunder state
+            if (typeof status.thunder === 'boolean') {
+                thunderOn = status.thunder;
+                updateThunderToggle();
+            }
+
+            // Update mode
+            if (status.mode) {
+                currentMode = status.mode;
+                updateModeButtons();
+                updateSimulationOptions();
+                document.getElementById('current-mode').textContent = t(`mode.${status.mode}`);
+            }
+
+            // Update schema
+            if (status.schema) {
+                document.getElementById('active-schema').value = status.schema;
+                const schemaNum = status.schema.replace('schema_0', '').replace('.csv', '');
+                document.getElementById('current-schema').textContent = t(`schema.name.${schemaNum}`);
+            }
+
+            // Update current color
+            if (status.color) {
+                const colorPreview = document.getElementById('current-color');
+                if (colorPreview) {
+                    colorPreview.style.backgroundColor = `rgb(${status.color.r}, ${status.color.g}, ${status.color.b})`;
+                }
+            }
+        }
+    } catch (error) {
+        console.log('Light status not available');
+    }
+}