Initial commit: Haussteuerung V2/V3 Web-Interface

.gitignore

@@ -0,0 +1,33 @@
+# Betriebssystem-Dateien
+Thumbs.db
+Thumbs.db:encryptable
+Desktop.ini
+.DS_Store
+*.swp
+*.swo
+
+# Editor/IDE
+.vscode/
+.idea/
+*.sublime-project
+*.sublime-workspace
+
+# Temporäre Dateien
+*.tmp
+*.temp
+*.log
+
+# Node.js (falls zukünftig verwendet)
+node_modules/
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Build-Ausgaben
+dist/
+build/
+
+# Sicherheitskopien
+*.bak
+*.backup
+*~

PROJECT.md

@@ -0,0 +1,177 @@
+# Haussteuerung V2 - Projekt Dokumentation
+
+## Projektübersicht
+Webbasierte Haussteuerung für SPS-Steuerung (AWP-Webserver)
+
+## Dateistruktur
+```
+web/
+├── indexV2.htm           # Hauptseite mit Iframes
+├── form.css              # Zentrales CSS
+├── lichtV2.htm           # Lichtsteuerung
+├── heizungV2.htm         # Heizungssteuerung
+├── steckdosenV2.htm      # Steckdosensteuerung
+├── rolladen.htm          # Rolladensteuerung
+├── stromzaehler.htm      # Stromzähler mit Chart
+├── licht_state.html      # Licht Status (wird von SPS befüllt)
+├── heizung_state.html    # Heizung Status
+├── steckdosen_state.html # Steckdosen Status
+├── stromzaehler_state.html # Stromzähler Status
+├── WebAppConfig.json     # AWP-Webserver Konfiguration
+├── Script/
+│   └── tth_script.js     # JavaScript Funktionen
+└── images/               # Bilder und Icons
+```
+
+## AWP Variablen
+
+### Licht (lichtV2.htm)
+- `"Lichtmerker Küche"`
+- `"Lichtmerker Essen"`
+- `"Lichtmerker Wohnen 1"`
+- `"Lichtmerker Wohnen 2"`
+- `"Lichtmerker HWR"`
+- `"Lichtmerker Arbeiten"`
+- `"Lichtmerker Kind 3"`
+- `"Lichtmerker Dusche"`
+- `"Lichtmerker Abstellraum"`
+- `"Lichtmerker Eltern"`
+- `"Lichtmerker Noah"`
+- `"Lichtmerker Niko"`
+- `"Lichtmerker Bad"`
+- `"Kickertaste"`
+- `"wled_DB".Helligkeit`
+- `"wled_DB".Befehl`
+- `"wled_DB".RGB_hex`
+
+### Heizung (heizungV2.htm)
+- `"Temp Wohnen"`, `"Temp Arbeiten"`, `"Temp HWR"`, `"Temp Bad"`, `"Temp Eltern"`, `"Temp Noah"`, `"Temp Mika"`, `"Temp Niko"`, `"Temp Dusche"`
+- `"Einstellungen".Heizung."Heizung Wohnen min/max"`
+- `"Einstellungen".Heizung."Heizung Arbeiten min/max"`
+- `"Einstellungen".Heizung."Heizung HWR min/max"`
+- `"Einstellungen".Heizung."Heizung Bad min/max"`
+- `"Einstellungen".Heizung."Heizung Eltern min/max"`
+- `"Einstellungen".Heizung."Heizung Kind1 min/max"`
+- `"Einstellungen".Heizung."Heizung Kind2 min/max"`
+- `"Einstellungen".Heizung."Heizung Gäste min/max"`
+- `"Einstellungen".Heizung."Heizung Dusche min/max"`
+
+### Steckdosen (steckdosenV2.htm)
+- `"Steckdose Deele Garder"`
+- `"Steckdose Wohnen"`
+- `"Steckdose Essen"`
+- `"Steckdose Arbeiten"`
+- `"Steckdose Kind 1"`
+- `"Steckdose Kind 2"`
+- `"Steckdose Gäste"`
+- `"Steckdose Eltern"`
+- `"Arduino Settimio"."Funksteckdose 1 an/aus"`
+- `"Arduino Settimio"."KDY 1 an/aus"`
+- `"Arduino Settimio"."KDY 2 an/aus"`
+- `"Arduino Settimio"."Funksteckdose 4 an/aus"`
+
+### Rolladen (rolladen.htm)
+- `"Rolladenmerker Ess l/r/m auf/ab"`
+- `"Rolladenmerker Woh l/r auf/ab"`
+- `"Rolladenmerker Wohtü auf/ab"`
+- `"Rolladenmerker Arbei auf/ab"`
+- `"Rolladenmerker HWR auf/ab"`
+- `"Rolladenmerker Küc l/r auf/ab"`
+- `"Rolladenmerker Elter auf/ab"`
+- `"Rolladenmerker Noah auf/ab"`
+- `"Rolladenmerker Bad auf/ab"`
+- `"Rolladenmerker Niko auf/ab"`
+- `"Rolladenmerker Mika auf/ab"`
+- `"Rolladenmerker Dusche au/ab"`
+- `"Rolladen alle auf/ab"`
+- `"Jalousie_DB".Urlaub`
+
+### Stromzähler (stromzaehler.htm)
+- 12 Zählerwerte aus `stromzaehler_state.html`
+- Berechnung: -1 bis -8 als Differenzwerte
+
+### Sonstige (indexV2.htm)
+- `"Aufgang_Untergang".aktuelle_CPU_Zeit.*`
+- `"Aufgang_Untergang".Aufgang.HOUR/MINUTE`
+- `"Aufgang_Untergang".Untergang.HOUR/MINUTE`
+- `"Aufgang_Untergang".Aufgang_offset`
+- `"Aufgang_Untergang".Untergang_offset`
+- `"Türöffner Handy"`
+- `"Arduino Settimio".Garagentor 1`
+- `"Arduino Settimio".Garagentor 2`
+
+## CSS (form.css)
+- `.ui-card` - Card-Container mit Hintergrund
+- `.ui-table` - Tabellen-Styling
+- `.ui-btn` - Button-Styling (primary, on, off)
+- `.ui-iconbtn` - Icon-Buttons
+- `.auto-style6` - Versteckte Status-Elemente (color: transparent, font-size: 1px)
+
+## JavaScript
+- `tth_script.js` - Icon-Funktionen (leuchtet_icon, heizt_icon, strom_icon, urlaub_icon)
+- Iframe-Resize in indexV2.htm
+- Stromzähler: Differenzberechnung für -1 bis -8
+- Stromzähler: Canvas-basierter Leistungs-Chart (letzte 5 Min.)
+
+## Wichtige Änderungen
+- OutputArea in allen Seiten mit `clip:rect(0,0,0,0)` versteckt
+- Header-Zeile "Raum | Taster" aus steckdosenV2.htm und rolladen.htm entfernt
+- Erste Tabellenzeile nicht mehr hervorgehoben
+- Stromzähler-Werte untereinander angeordnet
+- Stromzähler: -1 bis -8 als Differenzwerte
+
+## Server
+- AWP-Webserver auf SPS (192.168.0.90)
+- Standard-Seite: indexV2.htm
+
+## V3 (Single-Page, neu)
+Parallel zu V2, lässt V2 unangetastet. Erreichbar über `indexV3.htm`.
+
+### Dateien V3
+- `indexV3.htm` — Produktivseite mit SPS-Web-API-Anbindung.
+- `indexV3_preview.htm` — reine Optik-Vorschau ohne SPS, mit Dummy-Daten.
+- `formV3.css` — CSS für V3 (Grid, Karten, responsive Stromzähler-Bereich).
+- `Script/tth_v3_api.js` — JavaScript für `indexV3.htm`.
+
+### Architektur
+- Keine Iframes, keine AWP-Formulare.
+- Kommunikation mit der S7-1500 über die integrierte Web-API (`/api/jsonrpc`).
+- Lesen per `PlcProgram.Read` (Batch), schreiben per `PlcProgram.Write`.
+- Anmeldung über `Api.Login` mit Token (aktuell Benutzer `111`).
+- Status wird zyklisch gelesen und in `lastValues` gepuffert.
+- Schreibaktionen erfolgen direkt beim Klick auf Buttons/Inputs.
+
+### Module in indexV3.htm
+1. **Stromzähler** — Tacho, Werte (Bezug/Einspeisung/Wemos), Power-Chart, Daily-Chart.
+2. **Licht** — 14 Räume + WLED (Helligkeit/Farbe).
+3. **Heizung** — 9 Räume mit IST, SOLL min/max, heizt-Status.
+4. **Rolladen** — alle Räume + Urlaub-Modus.
+5. **Steckdosen** — 8 normale Steckdosen + 4 Funksteckdosen.
+6. **Haus** — Haustür + Garagentor.
+7. **Uhrzeit** — CPU-Uhr, Sonnenauf-/untergang.
+
+### Wichtige Variablen-Unterschiede
+- **Licht:** Lesen aus `licht_state.html` (`"Licht Küche"` etc.), Schreiben auf `"Lichtmerker ..."` etc. (unterschiedliche Variablen!).
+- **Steckdosen:** Lesen und Schreiben identisch. Normale Steckdosen sind Bool: `false` = an, `true` = aus. Funksteckdosen haben separate an/aus-Variablen.
+- **Rolladen:** Separate auf/ab-Variablen, Schreibwert `true`.
+- **Heizung:** SOLL-Werte werden als Float geschrieben.
+- **WLED:** `"wled_DB".Helligkeit` (Int), `"wled_DB".RGB_hex` (String), `"wled_DB".Befehl` (Int).
+
+### Charts
+- **Tacho (`v3_gauge`):** Canvas, 180°-Skala, -8000 bis +8000 W, grün=Einspeisung, rot=Bezug.
+- **Power-Chart (`v3_power_chart`):** Letzte 5 Minuten Leistung, weiche Kurve, Legende "akt. Leistung: xx W".
+- **Daily-Chart (`v3_daily_chart`):** Balken für die letzten 8 Tage, Wochentage als X-Achse, heute gelb hervorgehoben, blaue Linie für täglichen Bezug.
+
+### Responsive Verhalten
+- Stromzähler-Bereich bricht auf kleinen Bildschirmen um.
+- Canvas-Elemente skalieren mit `aspect-ratio: 2 / 1` und bleiben scharf (HiDPI über `fitCanvas`).
+
+### Bekannte Einschränkungen / TODO
+- Login-Daten (`user: '111'`, `password: '1q2w3e$R'`) sind im Klartext in `tth_v3_api.js` hinterlegt.
+- Heizungs-Validierung prüft nur `min < max` clientseitig.
+- Keine Rückmeldung, ob ein Schreibvorgang in der SPS tatsächlich wirksam wurde (nur API-Antwort).
+
+### Preview
+- `indexV3_preview.htm` enthält feste Dummy-Werte und kein Polling.
+- Wird verwendet, um das Layout offline zu testen.
+- Taster in der Preview haben keine Funktion.

Script/tth_script.js

@@ -0,0 +1,107 @@
+// function to check value
+function check()
+{
+	var x = document.getElementById("wert1");
+	if (x.value >= 1  && x.value <= 10 ) 
+	{ 
+		return true;
+	}
+	else 
+	{ 
+		alert ("Enter Flowrate between 1 and 10");
+		document.getElementById("wert1").value = "";
+		return false;
+	}
+}
+
+function check_heizung(raum) {
+	var ist_min = document.getElementById("ist_" + raum + "_min").innerText;
+	var soll_min = document.getElementById("soll_" + raum + "_min").value;
+	var ist_max = document.getElementById("ist_" + raum + "_max").innerText;
+	var soll_max = document.getElementById("soll_" + raum + "_max").value;
+
+	console.log('ist min ' + ist_min);
+	console.log('soll min ' + soll_min);
+	console.log('ist max ' + ist_max);
+	console.log('soll max ' + soll_max);
+
+	if (soll_min != null) { 
+		if (soll_min >= ist_max) {
+		alert ("Temperatur muss kleiner sein als max");
+		document.getElementById("soll_" + raum + "_min").value = "";
+		}
+		return false;
+	}
+	else 
+	{ 
+		return true;
+	}
+	
+	if (soll_max != null) { 
+		if (soll_max <= ist_min) {
+		alert ("Temperatur muss kleiner sein als max");
+		document.getElementById("soll_" + raum + "_max").value = "";
+		}
+		return false;
+	}
+	else 
+	{ 
+		return true;
+	}
+}
+
+function heizt_icon(label, status) {
+	//console.log(label);
+	if (status == 1) {
+	document.getElementById(label).src = "images/heizt1.png";
+	}
+	else {
+	document.getElementById(label).src = "images/heizt0.png";
+	}
+	return(label, status);
+}
+
+function leuchtet_icon(label, status) {
+	//console.log(label);
+	if (status == 1) {
+	document.getElementById(label).src = "images/lampe1.jpg";
+	}
+	else {
+	document.getElementById(label).src = "images/lampe0.jpg";
+	}
+	return(label, status);
+}
+
+function strom_icon(label, status) {
+	//console.log(label);
+	if (status == 1) {
+	document.getElementById(label).src = "images/blitz0.jpg";
+	}
+	else {
+	document.getElementById(label).src = "images/blitz1.jpg";
+	}
+	return(label, status);
+}
+
+function wasser_icon(label, status) {
+	//console.log(label);
+	if (status == 1) {
+	document.getElementById(label).src = "images/wasser0.jpg";
+	}
+	else {
+	document.getElementById(label).src = "images/wasser1.jpg";
+	}
+	return(label, status);
+}
+
+function urlaub_icon(label, status) {
+	//console.log(label);
+	if (status == 1) {
+	document.getElementById(label).src = "images/urlaub1.jpg";
+	}
+	else {
+	document.getElementById(label).src = "images/urlaub0.jpg";
+	}
+	return(label, status);
+}
+

Script/tth_v3.js

@@ -0,0 +1,349 @@
+// ====================================================================
+// tth_v3.js  –  Logik fuer indexV3.htm (Single-Page-Haussteuerung)
+//
+// Liest Status aus den vorhandenen *_state.html Dateien (UNVERAENDERT)
+// per AJAX, parst sie isoliert mit DOMParser und liest die Werte ueber
+// textContent. Dadurch:
+//   - kein innerText/"hidden"-Problem (textContent ist render-unabhaengig)
+//   - keine ID-Kollisionen (jede State-Datei landet in eigenem Dokument)
+// Zeichnet Tacho + Leistungsverlauf selbst auf Canvas -> kein Internet noetig.
+// ====================================================================
+
+(function () {
+	'use strict';
+
+	// Im versteckten Schreib-Iframe (target="awp_sink") NICHTS tun.
+	// Verhindert doppeltes Polling, wenn ein Formular gepostet wird.
+	if (window.top !== window.self) { return; }
+
+	// ---- kleine Helfer -------------------------------------------------
+
+	function txt(doc, id) {
+		var el = doc.getElementById(id);
+		return el ? (el.textContent || '').replace(/\s+/g, ' ').trim() : '';
+	}
+
+	function setText(id, value) {
+		var el = document.getElementById(id);
+		if (el) { el.textContent = value; }
+	}
+
+	// Status-Punkt umschalten. kind: 'on' (gruen) oder 'active' (gelb)
+	function setDot(id, on, kind) {
+		var el = document.getElementById(id);
+		if (!el) { return; }
+		el.classList.remove('v3-status-dot--on', 'v3-status-dot--off', 'v3-status-dot--active');
+		if (on) {
+			el.classList.add(kind === 'active' ? 'v3-status-dot--active' : 'v3-status-dot--on');
+		} else {
+			el.classList.add('v3-status-dot--off');
+		}
+	}
+
+	function pad(n) {
+		n = parseInt(n, 10);
+		if (isNaN(n)) { return '--'; }
+		return n < 10 ? '0' + n : '' + n;
+	}
+
+	// Generischer Poll-Loop: holt url, parst sie, ruft handler(doc),
+	// und plant sich selbst nach 'interval' ms neu (auch bei Fehler).
+	function poll(url, handler, interval) {
+		var xhr = new XMLHttpRequest();
+		xhr.open('GET', url + '?_=' + Date.now(), true);
+		xhr.onreadystatechange = function () {
+			if (xhr.readyState === 4) {
+				if (xhr.status === 200) {
+					try {
+						var doc = new DOMParser().parseFromString(xhr.responseText, 'text/html');
+						handler(doc);
+					} catch (e) { /* defensiv: einzelner Fehler stoppt den Loop nicht */ }
+				}
+				setTimeout(function () { poll(url, handler, interval); }, interval);
+			}
+		};
+		xhr.send(null);
+	}
+
+	// ---- LICHT ---------------------------------------------------------
+	// leuchtetx1..14 == '1' -> an
+	function handleLicht(doc) {
+		for (var i = 1; i <= 14; i++) {
+			setDot('li_dot_' + i, txt(doc, 'leuchtetx' + i) === '1', 'on');
+		}
+	}
+
+	// ---- HEIZUNG -------------------------------------------------------
+	function tempClass(v) {
+		var t = parseFloat(v);
+		if (isNaN(t)) { return 'v3-temp--normal'; }
+		if (t >= 24) { return 'v3-temp--hot'; }
+		if (t >= 22) { return 'v3-temp--warm'; }
+		return 'v3-temp--normal';
+	}
+
+	function handleHeizung(doc) {
+		for (var i = 1; i <= 9; i++) {
+			// aktuelle Temperatur (heiztx101..109)
+			var temp = txt(doc, 'heiztx' + (100 + i));
+			var tEl = document.getElementById('he_temp_' + i);
+			if (tEl) {
+				tEl.textContent = (temp === '' ? '–' : temp + ' °C');
+				tEl.className = 'v3-temp ' + tempClass(temp);
+			}
+			// heizt aktiv? (heiztx1..9)
+			setDot('he_dot_' + i, txt(doc, 'heiztx' + i) === '1', 'active');
+			// aktuell eingestellte Grenzen (heiz_min/max 1..9)
+			var istMin = txt(doc, 'heiz_min' + i);
+			var istMax = txt(doc, 'heiz_max' + i);
+			setText('he_ist_' + i, (istMin || '–') + ' / ' + (istMax || '–'));
+		}
+	}
+
+	// ---- STECKDOSEN ----------------------------------------------------
+	// ACHTUNG: invertierte Logik wie in V2 -> stromx == '0' bedeutet AN.
+	function handleSteckdosen(doc) {
+		for (var i = 1; i <= 8; i++) {
+			setDot('sd_dot_' + i, txt(doc, 'stromx' + i) === '0', 'on');
+		}
+	}
+
+	// ---- STROMZAEHLER --------------------------------------------------
+	var powerHistory = [];
+
+	function addPowerSample(v) {
+		if (!isFinite(v)) { return; }
+		var now = Date.now();
+		powerHistory.push({ t: now, v: v });
+		var cutoff = now - 5 * 60 * 1000; // 5 Minuten
+		while (powerHistory.length && powerHistory[0].t < cutoff) {
+			powerHistory.shift();
+		}
+	}
+
+	// Halbkreis-Tacho auf Canvas, -8000..+8000 W, Farbzonen wie Original-Gauge.
+	function drawGauge(value) {
+		var canvas = document.getElementById('v3_gauge');
+		if (!canvas) { return; }
+		var ctx = canvas.getContext('2d');
+		var w = canvas.width, h = canvas.height;
+		ctx.clearRect(0, 0, w, h);
+
+		var cx = w / 2, cy = h - 18;
+		var r = Math.min(w / 2, h) - 16, lw = 14;
+		var MIN = -8000, MAX = 8000;
+
+		function ang(v) {
+			v = Math.max(MIN, Math.min(MAX, v));
+			return Math.PI + (v - MIN) / (MAX - MIN) * Math.PI; // pi .. 2pi
+		}
+		function zone(from, to, color) {
+			ctx.beginPath();
+			ctx.lineWidth = lw;
+			ctx.strokeStyle = color;
+			ctx.arc(cx, cy, r, ang(from), ang(to));
+			ctx.stroke();
+		}
+
+		zone(MIN, 0, '#2e7d32');      // gruen: Einspeisung / neutral
+		zone(0, 1000, '#f9a825');     // gelb
+		zone(1000, 5000, '#444444');  // neutraler Bereich
+		zone(5000, MAX, '#c62828');   // rot: hoher Bezug
+
+		// Skalenstriche alle 2000 W
+		ctx.strokeStyle = 'rgba(255,255,255,0.7)';
+		ctx.lineWidth = 1;
+		for (var t = MIN; t <= MAX; t += 2000) {
+			var a = ang(t);
+			ctx.beginPath();
+			ctx.moveTo(cx + Math.cos(a) * (r - lw / 2 - 2), cy + Math.sin(a) * (r - lw / 2 - 2));
+			ctx.lineTo(cx + Math.cos(a) * (r + lw / 2 + 2), cy + Math.sin(a) * (r + lw / 2 + 2));
+			ctx.stroke();
+		}
+
+		// Zeiger
+		var v = isFinite(value) ? value : 0;
+		var na = ang(v);
+		ctx.strokeStyle = '#63d4ff';
+		ctx.lineWidth = 3;
+		ctx.beginPath();
+		ctx.moveTo(cx, cy);
+		ctx.lineTo(cx + Math.cos(na) * (r - 4), cy + Math.sin(na) * (r - 4));
+		ctx.stroke();
+		ctx.fillStyle = '#63d4ff';
+		ctx.beginPath();
+		ctx.arc(cx, cy, 5, 0, Math.PI * 2);
+		ctx.fill();
+
+		// Digitalanzeige + Beschriftung
+		ctx.textAlign = 'center';
+		ctx.fillStyle = '#00FF00';
+		ctx.font = 'bold 20px Arial, sans-serif';
+		ctx.fillText(Math.round(v) + ' W', cx, cy - 14);
+		ctx.fillStyle = 'rgba(234,240,255,0.6)';
+		ctx.font = '10px Arial, sans-serif';
+		ctx.fillText('-8000', cx - r, cy + 12);
+		ctx.fillText('+8000', cx + r, cy + 12);
+		ctx.fillText('Leistung', cx, 12);
+	}
+
+	// Leistungsverlauf der letzten 5 Minuten auf Canvas.
+	function drawPowerChart() {
+		var canvas = document.getElementById('v3_power_chart');
+		if (!canvas) { return; }
+		var ctx = canvas.getContext('2d');
+		var w = canvas.width, h = canvas.height;
+
+		ctx.clearRect(0, 0, w, h);
+		ctx.fillStyle = 'rgba(0,0,0,0.35)';
+		ctx.fillRect(0, 0, w, h);
+
+		if (!powerHistory.length) {
+			ctx.fillStyle = 'rgba(234,240,255,0.75)';
+			ctx.font = '12px Segoe UI, Arial, sans-serif';
+			ctx.fillText('Leistung (letzte 5 min) – warte auf Daten…', 12, 24);
+			return;
+		}
+
+		var minV = powerHistory[0].v, maxV = powerHistory[0].v;
+		for (var i = 1; i < powerHistory.length; i++) {
+			var v = powerHistory[i].v;
+			if (v < minV) { minV = v; }
+			if (v > maxV) { maxV = v; }
+		}
+		if (minV === maxV) { minV -= 1; maxV += 1; }
+
+		var padL = 38, padR = 10, padT = 18, padB = 22;
+		var plotW = w - padL - padR;
+		var plotH = h - padT - padB;
+		var t0 = powerHistory[0].t;
+		var t1 = powerHistory[powerHistory.length - 1].t;
+		if (t0 === t1) { t0 -= 1; t1 += 1; }
+
+		// Gitter
+		ctx.strokeStyle = 'rgba(255,255,255,0.10)';
+		ctx.lineWidth = 1;
+		for (var gy = 0; gy <= 4; gy++) {
+			var y = padT + (plotH * gy / 4);
+			ctx.beginPath();
+			ctx.moveTo(padL, y);
+			ctx.lineTo(padL + plotW, y);
+			ctx.stroke();
+		}
+
+		// Beschriftung
+		ctx.fillStyle = 'rgba(234,240,255,0.75)';
+		ctx.font = '12px Segoe UI, Arial, sans-serif';
+		ctx.textAlign = 'left';
+		ctx.fillText('Leistung – letzte 5 min', 12, 14);
+		ctx.fillStyle = 'rgba(234,240,255,0.65)';
+		ctx.font = '11px Segoe UI, Arial, sans-serif';
+		ctx.fillText(Math.round(maxV) + ' W', 6, padT + 10);
+		ctx.fillText(Math.round(minV) + ' W', 6, padT + plotH);
+
+		// Linie
+		ctx.strokeStyle = 'rgba(99,212,255,0.95)';
+		ctx.lineWidth = 2;
+		ctx.beginPath();
+		for (var j = 0; j < powerHistory.length; j++) {
+			var p = powerHistory[j];
+			var x = padL + ((p.t - t0) / (t1 - t0)) * plotW;
+			var yv = padT + (1 - ((p.v - minV) / (maxV - minV))) * plotH;
+			if (j === 0) { ctx.moveTo(x, yv); } else { ctx.lineTo(x, yv); }
+		}
+		ctx.stroke();
+
+		// letzter Punkt
+		var last = powerHistory[powerHistory.length - 1];
+		var lx = padL + ((last.t - t0) / (t1 - t0)) * plotW;
+		var ly = padT + (1 - ((last.v - minV) / (maxV - minV))) * plotH;
+		ctx.fillStyle = 'rgba(124,255,178,0.95)';
+		ctx.beginPath();
+		ctx.arc(lx, ly, 3, 0, Math.PI * 2);
+		ctx.fill();
+	}
+
+	function num(s) {
+		var n = parseFloat(s);
+		return isNaN(n) ? null : n;
+	}
+	function diffText(a, b) {
+		if (a === null || b === null) { return '–'; }
+		return (a - b).toFixed(2) + ' kWh';
+	}
+
+	function handleStrom(doc) {
+		var e = [];
+		for (var i = 1; i <= 12; i++) { e[i] = num(txt(doc, 'stromx' + i)); }
+
+		setText('sz_bezug', (e[1] === null ? '–' : e[1]) + ' kWh');
+		setText('sz_einsp', (e[2] === null ? '–' : e[2]) + ' kWh');
+		setText('sz_leist', (e[3] === null ? '–' : e[3]) + ' W');
+		setText('sz_tag', (e[4] === null ? '–' : e[4]) + ' kWh');
+
+		// Differenzen aufeinanderfolgender Zaehlerstaende (-1 .. -8)
+		setText('sz_d1', diffText(e[1], e[5]));
+		setText('sz_d2', diffText(e[5], e[6]));
+		setText('sz_d3', diffText(e[6], e[7]));
+		setText('sz_d4', diffText(e[7], e[8]));
+		setText('sz_d5', diffText(e[8], e[9]));
+		setText('sz_d6', diffText(e[9], e[10]));
+		setText('sz_d7', diffText(e[10], e[11]));
+		setText('sz_d8', diffText(e[11], e[12]));
+
+		var p = e[3];
+		addPowerSample(p);
+		drawGauge(p === null ? 0 : p);
+		drawPowerChart();
+	}
+
+	// ---- UHR / SONNE / URLAUB -----------------------------------------
+	function handleZeit(doc) {
+		setText('clock_time', pad(txt(doc, 'z_h')) + ':' + pad(txt(doc, 'z_mi')) + ':' + pad(txt(doc, 'z_s')));
+		setText('clock_date', pad(txt(doc, 'z_d')) + '.' + pad(txt(doc, 'z_mo')) + '.' + (txt(doc, 'z_y') || '----'));
+		setText('sun_up', pad(txt(doc, 'z_auf_h')) + ':' + pad(txt(doc, 'z_auf_mi')) + ' Uhr  (Offset ' + (txt(doc, 'z_auf_off') || '0') + ')');
+		setText('sun_down', pad(txt(doc, 'z_unter_h')) + ':' + pad(txt(doc, 'z_unter_mi')) + ' Uhr  (Offset ' + (txt(doc, 'z_unter_off') || '0') + ')');
+		setDot('roll_urlaub_dot', txt(doc, 'z_urlaub') === '1', 'active');
+	}
+
+	// ---- Heizungs-Plausibilitaet (V2-Bug korrigiert) -------------------
+	// Wird per onsubmit aufgerufen; verhindert SOLL-min >= SOLL-max.
+	// Min und Max liegen jetzt in GETRENNTEN Forms (eine Form schreibt nur
+	// ihren Wert). Plausibilitaet trotzdem ueber die ganze Zeile pruefen:
+	// neuer Wert vs. anderes SOLL-Feld bzw. aktuelle IST-Grenze.
+	window.checkHeizungV3 = function (form) {
+		var row = form.closest ? form.closest('.v3-heat-row') : null;
+		if (!row) { return true; }
+		var minEl = row.querySelector('input[data-soll="min"]');
+		var maxEl = row.querySelector('input[data-soll="max"]');
+		var sMin = minEl && minEl.value !== '' ? parseFloat(minEl.value) : null;
+		var sMax = maxEl && maxEl.value !== '' ? parseFloat(maxEl.value) : null;
+		// aktuelle Grenzen aus der IST-Anzeige ("min / max")
+		var istEl = row.querySelector('.v3-muted');
+		var cur = istEl ? istEl.textContent.split('/') : [];
+		var effMin = sMin !== null ? sMin : parseFloat(cur[0]);
+		var effMax = sMax !== null ? sMax : parseFloat(cur[1]);
+		if (!isNaN(effMin) && !isNaN(effMax) && effMin >= effMax) {
+			alert('Min-Temperatur muss kleiner sein als Max.');
+			return false;
+		}
+		return true;
+	};
+
+	// ---- Start ---------------------------------------------------------
+	function init() {
+		poll('licht_state.html', handleLicht, 800);
+		poll('heizung_state.html', handleHeizung, 1000);
+		poll('steckdosen_state.html', handleSteckdosen, 1000);
+		poll('stromzaehler_state.html', handleStrom, 800);
+		poll('zeit_state.html', handleZeit, 1000);
+		drawGauge(0);
+		drawPowerChart();
+	}
+
+	if (document.readyState === 'loading') {
+		document.addEventListener('DOMContentLoaded', init);
+	} else {
+		init();
+	}
+})();

WebAppConfig.json

@@ -0,0 +1 @@
+{"directoriesToIgnoreForUpload":[],"resourcesToIgnoreForUpload":["indexV2.htm","indexV3_preview.htm","zeit_state.html","licht_state.html","heizung_state.html","steckdosen_state.html","stromzaehler_state.html","form.css","Script/tth_script.js"],"fileExtensionsToIgnoreForUpload":[],"name":"web","state":1,"type":1,"redirect_mode":0,"default_page":"indexV3.htm","not_found_page":"indexV3.htm","not_authorized_page":"indexV3.htm","protectedResources":[],"pathToWebAppDirectory":"C:\\Users\\Tobias Thebille\\OneDrive\\SPS\\Haus\\HausV2\\web"}

form.css

@@ -0,0 +1,245 @@
+  /* CSS layout */
+body {
+	margin: 0;
+	padding: 0;
+}
+
+#masthead {
+}
+
+#top_nav {
+}
+
+#container {
+	min-width: 600px;
+}
+
+#left_col {
+	width: 200px;
+	float: left;
+}
+
+#page_content {
+	margin-left: 10px;
+}
+
+#footer {
+	clear: both;
+}
+
+
+
+
+
+.onoffswitch {
+    position: relative; width: 90px;
+    -webkit-user-select:none; -moz-user-select:none; -ms-user-select: none;
+}
+.onoffswitch-checkbox {
+    display: none;
+}
+.onoffswitch-label {
+    display: block; overflow: hidden; cursor: pointer;
+    border: 2px solid #999999; border-radius: 20px;
+}
+.onoffswitch-inner {
+    display: block; width: 200%; margin-left: -100%;
+    transition: margin 0.3s ease-in 0s;
+}
+.onoffswitch-inner:before, .onoffswitch-inner:after {
+    display: block; float: left; width: 50%; height: 30px; padding: 0; line-height: 30px;
+    font-size: 14px; color: white; font-family: Trebuchet, Arial, sans-serif; font-weight: bold;
+    box-sizing: border-box;
+}
+.onoffswitch-inner:before {
+    content: "ON";
+    padding-left: 10px;
+    background-color: #34A7C1; color: #FFFFFF;
+}
+.onoffswitch-inner:after {
+    content: "OFF";
+    padding-right: 10px;
+    background-color: #EEEEEE; color: #999999;
+    text-align: right;
+}
+.onoffswitch-switch {
+    display: block; width: 18px; margin: 6px;
+    background: #FFFFFF;
+    position: absolute; top: 0; bottom: 0;
+    right: 56px;
+    border: 2px solid #999999; border-radius: 20px;
+    transition: all 0.3s ease-in 0s; 
+}
+.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner {
+    margin-left: 0;
+}
+.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch {
+    right: 0px; 
+}
+
+/* ---- Modern UI additions (non-breaking) ---- */
+:root{
+	--ui-bg: #070A10;
+	--ui-surface: rgba(255,255,255,0.06);
+	--ui-surface-2: rgba(255,255,255,0.10);
+	--ui-border: rgba(255,255,255,0.14);
+	--ui-text: #EAF0FF;
+	--ui-muted: rgba(234,240,255,0.70);
+	--ui-accent: #63D4FF;
+	--ui-accent-2: #7CFFB2;
+	--ui-danger: #FF5C7A;
+	--ui-shadow: 0 10px 30px rgba(0,0,0,0.45);
+	--ui-radius: 14px;
+	--ui-radius-sm: 10px;
+	--ui-gap: 12px;
+}
+
+html, body{
+	font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
+}
+
+/* Keep inline body colors working, but improve readability */
+body{
+	line-height: 1.35;
+}
+
+h3{
+	margin: 14px 0 10px 0;
+	letter-spacing: 0.2px;
+}
+
+/* Card wrapper (optional) */
+.ui-card{
+	background: var(--ui-surface);
+	border: 1px solid var(--ui-border);
+	border-radius: var(--ui-radius);
+	box-shadow: var(--ui-shadow);
+	padding: 14px;
+	backdrop-filter: blur(8px);
+	/* keep modules compact & left-aligned like original */
+	display: inline-block;
+	max-width: calc(100vw - 24px);
+}
+
+/* Tables */
+table{
+	border-collapse: separate;
+	border-spacing: 0;
+}
+
+table.ui-table, table[border]{
+	background: var(--ui-surface);
+	border: 1px solid var(--ui-border);
+	border-radius: var(--ui-radius);
+	overflow: hidden;
+}
+
+table.ui-table td, table[border] td{
+	border: 1px solid rgba(255,255,255,0.08);
+	padding: 10px 12px;
+	vertical-align: middle;
+}
+
+
+/* Links */
+a{
+	color: var(--ui-accent);
+	text-decoration: none;
+}
+a:hover{
+	text-decoration: underline;
+}
+
+/* Buttons & inputs */
+button.ui-btn,
+input.ui-btn,
+input[type="submit"]{
+	appearance: none;
+	border: 1px solid var(--ui-border);
+	background: rgba(255,255,255,0.08);
+	color: var(--ui-text);
+	border-radius: var(--ui-radius-sm);
+	padding: 10px 12px;
+	font-weight: 650;
+	letter-spacing: 0.2px;
+	cursor: pointer;
+	transition: transform 120ms ease, background 120ms ease, border-color 120ms ease;
+}
+
+button.ui-btn:hover,
+input.ui-btn:hover,
+input[type="submit"]:hover{
+	background: rgba(255,255,255,0.12);
+	border-color: rgba(255,255,255,0.22);
+	transform: translateY(-1px);
+}
+
+button.ui-btn:active,
+input.ui-btn:active,
+input[type="submit"]:active{
+	transform: translateY(0px);
+}
+
+.ui-btn--primary{
+	border-color: rgba(99,212,255,0.35);
+	background: rgba(99,212,255,0.12);
+}
+.ui-btn--on{
+	border-color: rgba(124,255,178,0.35);
+	background: rgba(124,255,178,0.12);
+}
+.ui-btn--off{
+	border-color: rgba(255,92,122,0.35);
+	background: rgba(255,92,122,0.10);
+}
+
+/* Icon buttons (lamp etc.) */
+.ui-iconbtn{
+	border: 1px solid var(--ui-border);
+	background: rgba(255,255,255,0.06);
+	border-radius: 999px;
+	padding: 8px;
+	cursor: pointer;
+}
+.ui-iconbtn:hover{
+	background: rgba(255,255,255,0.10);
+}
+.ui-icon{
+	display: block;
+}
+
+/* Text inputs */
+input[type="text"], input[type="number"]{
+	background: rgba(0,0,0,0.25);
+	color: var(--ui-text);
+	border: 1px solid var(--ui-border);
+	border-radius: 10px;
+	padding: 8px 10px;
+}
+
+/* Range + color */
+input[type="range"]{
+	width: 220px;
+	accent-color: var(--ui-accent);
+}
+input[type="color"]{
+	width: 48px;
+	height: 36px;
+	padding: 0;
+	border: 1px solid var(--ui-border);
+	border-radius: 10px;
+	background: transparent;
+}
+
+/* Iframes (index pages) */
+iframe{
+	border: 0;
+	display: block;
+	background: transparent;
+}
+
+/* Tiny status text coming from *_state.html */
+.auto-style6{
+	color: transparent;
+	font-size: 1px;
+}

formV3.css

@@ -0,0 +1,762 @@
+:root {
+  --v3-bg: #070A10;
+  --v3-surface: rgba(255,255,255,0.06);
+  --v3-surface-2: rgba(255,255,255,0.10);
+  --v3-border: rgba(255,255,255,0.14);
+  --v3-border-hover: rgba(255,255,255,0.22);
+  --v3-text: #EAF0FF;
+  --v3-text-secondary: rgba(234,240,255,0.70);
+  --v3-accent: #63D4FF;
+  --v3-accent-2: #7CFFB2;
+  --v3-danger: #FF5C7A;
+  --v3-warn: #FFD963;
+  --v3-shadow: 0 10px 30px rgba(0,0,0,0.45);
+  --v3-radius: 14px;
+  --v3-radius-sm: 10px;
+  --v3-gap: 12px;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+html, body {
+  margin: 0;
+  padding: 0;
+  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
+  background: var(--v3-bg);
+  color: var(--v3-text);
+  line-height: 1.4;
+  min-height: 100vh;
+}
+
+.v3-page {
+  max-width: 1400px;
+  margin: 0 auto;
+  padding: 16px;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+/* ---- CARD ---- */
+.v3-card {
+  background: var(--v3-surface);
+  border: 1px solid var(--v3-border);
+  border-radius: var(--v3-radius);
+  box-shadow: var(--v3-shadow);
+  padding: 16px;
+  backdrop-filter: blur(8px);
+  transition: border-color 0.25s ease, box-shadow 0.25s ease;
+}
+
+.v3-card:hover {
+  border-color: var(--v3-border-hover);
+}
+
+.v3-card-title {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 1.1rem;
+  font-weight: 700;
+  margin-bottom: 14px;
+  color: var(--v3-text);
+  letter-spacing: 0.3px;
+}
+
+.v3-card-title span:first-child {
+  font-size: 1.3rem;
+}
+
+.v3-section-title {
+  font-size: 0.9rem;
+  font-weight: 600;
+  color: var(--v3-text-secondary);
+  margin-bottom: 8px;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+
+/* ---- BUTTONS ---- */
+.v3-btn {
+  appearance: none;
+  border: 1px solid var(--v3-border);
+  background: var(--v3-surface-2);
+  color: var(--v3-text);
+  border-radius: var(--v3-radius-sm);
+  padding: 10px 16px;
+  font-weight: 600;
+  font-size: 0.9rem;
+  letter-spacing: 0.2px;
+  cursor: pointer;
+  transition: transform 0.12s ease, background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.v3-btn:hover {
+  background: rgba(255,255,255,0.14);
+  border-color: var(--v3-border-hover);
+  transform: translateY(-1px);
+  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
+}
+
+.v3-btn:active {
+  transform: translateY(0);
+}
+
+.v3-btn--sm {
+  padding: 6px 12px;
+  font-size: 0.8rem;
+}
+
+.v3-btn--primary {
+  border-color: rgba(99,212,255,0.35);
+  background: rgba(99,212,255,0.12);
+  color: var(--v3-accent);
+}
+
+.v3-btn--primary:hover {
+  background: rgba(99,212,255,0.22);
+  border-color: rgba(99,212,255,0.55);
+}
+
+.v3-btn--on {
+  border-color: rgba(124,255,178,0.35);
+  background: rgba(124,255,178,0.12);
+  color: var(--v3-accent-2);
+}
+
+.v3-btn--on:hover {
+  background: rgba(124,255,178,0.22);
+  border-color: rgba(124,255,178,0.55);
+}
+
+.v3-btn--off {
+  border-color: rgba(255,92,122,0.35);
+  background: rgba(255,92,122,0.10);
+  color: var(--v3-danger);
+}
+
+.v3-btn--off:hover {
+  background: rgba(255,92,122,0.20);
+  border-color: rgba(255,92,122,0.55);
+}
+
+/* ---- STATUS DOT ---- */
+.v3-status-dot {
+  display: inline-block;
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  background: rgba(255,255,255,0.2);
+  transition: background 0.3s ease, box-shadow 0.3s ease;
+  flex-shrink: 0;
+}
+
+.v3-status-dot--on {
+  background: var(--v3-accent-2);
+  box-shadow: 0 0 8px rgba(124,255,178,0.6);
+}
+
+.v3-status-dot--off {
+  background: rgba(255,255,255,0.2);
+}
+
+.v3-status-dot--active {
+  background: var(--v3-warn);
+  box-shadow: 0 0 8px rgba(255,217,99,0.6);
+}
+
+.v3-status {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 0.8rem;
+  color: var(--v3-text-secondary);
+}
+
+.v3-title-values {
+  display: inline-flex;
+  align-items: center;
+  gap: 10px;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+}
+
+.v3-title-value {
+  font-size: 0.8rem;
+  font-weight: 600;
+  color: var(--v3-text);
+  background: var(--v3-surface-2);
+  border: 1px solid var(--v3-border);
+  border-radius: var(--v3-radius-sm);
+  padding: 4px 8px;
+  white-space: nowrap;
+}
+
+#hdr_wtemp,
+#hdr_wstand,
+#hdr_wseit,
+#hdr_sbezug,
+#hdr_seinsp {
+  font-size: 0.8rem;
+}
+
+/* ---- ROOM ROW (Licht) ---- */
+.v3-room-row {
+  background: var(--v3-surface);
+  border: 1px solid var(--v3-border);
+  border-radius: var(--v3-radius-sm);
+  padding: 12px 14px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  transition: border-color 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
+}
+
+.v3-room-row:hover {
+  border-color: var(--v3-border-hover);
+}
+
+.v3-room-name {
+  font-weight: 600;
+  font-size: 0.9rem;
+}
+
+.v3-room-controls {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+/* ---- INFO ITEMS ---- */
+.v3-info-item {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.v3-info-label {
+  font-size: 0.7rem;
+  color: var(--v3-text-secondary);
+  text-transform: uppercase;
+  letter-spacing: 0.4px;
+}
+
+.v3-info-value {
+  font-size: 1rem;
+  font-weight: 700;
+  color: var(--v3-text);
+}
+
+/* ---- TEMP ---- */
+.v3-temp {
+  font-size: 1.4rem;
+  font-weight: 700;
+}
+
+.v3-temp--normal {
+  color: var(--v3-text);
+}
+
+.v3-temp--hot {
+  color: var(--v3-danger);
+}
+
+.v3-temp--warm {
+  color: var(--v3-warn);
+}
+
+/* ---- INPUTS ---- */
+.v3-input {
+  background: rgba(0,0,0,0.25);
+  color: var(--v3-text);
+  border: 1px solid var(--v3-border);
+  border-radius: var(--v3-radius-sm);
+  padding: 6px 10px;
+  font-size: 0.9rem;
+  width: 60px;
+  text-align: center;
+  transition: border-color 0.2s ease;
+}
+
+.v3-input:focus {
+  outline: none;
+  border-color: var(--v3-accent);
+}
+
+/* ---- SLIDER ---- */
+.v3-slider {
+  width: 180px;
+  accent-color: var(--v3-accent);
+}
+
+/* ---- COLOR ---- */
+.v3-color {
+  width: 48px;
+  height: 36px;
+  padding: 0;
+  border: 1px solid var(--v3-border);
+  border-radius: var(--v3-radius-sm);
+  background: transparent;
+  cursor: pointer;
+}
+
+/* ---- WLED ---- */
+.v3-wled {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.v3-wled-row {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+
+.v3-wled-label {
+  font-size: 0.85rem;
+  color: var(--v3-text-secondary);
+  min-width: 80px;
+}
+
+.v3-wled-val {
+  font-size: 0.85rem;
+  color: var(--v3-text);
+  font-weight: 600;
+  min-width: 50px;
+}
+
+/* ---- GAUGE ---- */
+.v3-gauge-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+#v3_gauge {
+  border-radius: var(--v3-radius);
+}
+
+/* ---- CHART ---- */
+.v3-chart-container {
+  background: rgba(0,0,0,0.2);
+  border-radius: var(--v3-radius-sm);
+  padding: 8px;
+  overflow: hidden;
+}
+
+#v3_power_chart {
+  width: 100%;
+  height: 200px;
+  display: block;
+}
+
+/* ---- CLOCK ---- */
+.v3-clock {
+  text-align: center;
+  padding: 12px;
+}
+
+.v3-clock-time {
+  font-size: 1.8rem;
+  font-weight: 700;
+  color: var(--v3-accent);
+  font-variant-numeric: tabular-nums;
+}
+
+.v3-clock-date {
+  font-size: 0.9rem;
+  color: var(--v3-text-secondary);
+  margin-bottom: 8px;
+}
+
+.v3-sun-row {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 12px;
+  margin-top: 6px;
+}
+
+.v3-sun-row img {
+  vertical-align: middle;
+}
+
+.v3-sun-text {
+  font-size: 0.9rem;
+  color: var(--v3-text-secondary);
+}
+
+/* ---- IFRAME ---- */
+iframe {
+  border: 0;
+  display: block;
+  background: transparent;
+  width: 100%;
+}
+
+/* ---- RESPONSIVE ---- */
+@media (max-width: 768px) {
+  .v3-page {
+    padding: 8px;
+  }
+  
+  .v3-card {
+    padding: 12px;
+  }
+  
+  .v3-btn {
+    padding: 8px 12px;
+    font-size: 0.8rem;
+  }
+  
+  .v3-wled-row {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+}
+
+/* ---- ANIMATIONS ---- */
+@keyframes pulse-glow {
+  0%, 100% { box-shadow: 0 0 6px rgba(124,255,178,0.4); }
+  50% { box-shadow: 0 0 14px rgba(124,255,178,0.7); }
+}
+
+.v3-status-dot--on {
+  animation: pulse-glow 2s ease-in-out infinite;
+}
+
+/* ---- SCROLLBAR ---- */
+::-webkit-scrollbar {
+  width: 8px;
+}
+
+::-webkit-scrollbar-track {
+  background: var(--v3-bg);
+}
+
+::-webkit-scrollbar-thumb {
+  background: var(--v3-border);
+  border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: var(--v3-border-hover);
+}
+
+/* ====================================================================
+   indexV3 – Grid-Layout & Modul-Bausteine
+   ==================================================================== */
+
+.v3-header {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.v3-header h1 {
+  font-size: 1.5rem;
+  font-weight: 700;
+  margin: 0;
+  letter-spacing: 0.3px;
+}
+
+.v3-header .v3-sub {
+  font-size: 0.85rem;
+  color: var(--v3-text-secondary);
+}
+
+/* Karten strikt untereinander (eine Spalte). Reihenfolge per order unten. */
+.v3-grid {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 16px;
+  align-items: start;
+}
+
+/* Gewuenschte Reihenfolge von oben nach unten:
+   Stromzaehler, Licht, Rolladen, Steckdosen, Heizung, Haus, Uhr.
+   Quell-Reihenfolge im HTML ist:
+   1 Stromzaehler, 2 Licht, 3 Heizung, 4 Rolladen, 5 Steckdosen, 6 Haus, 7 Uhr. */
+.v3-grid > section:nth-child(1) { order: 1; } /* Stromzaehler */
+.v3-grid > section:nth-child(2) { order: 2; } /* Licht */
+.v3-grid > section:nth-child(3) { order: 5; } /* Heizung -> nach unten */
+.v3-grid > section:nth-child(4) { order: 3; } /* Rolladen */
+.v3-grid > section:nth-child(5) { order: 4; } /* Steckdosen */
+.v3-grid > section:nth-child(6) { order: 6; } /* Haus */
+.v3-grid > section:nth-child(7) { order: 7; } /* Uhr */
+
+/* Karten, die mehr Platz brauchen (Heizung, Stromzähler) */
+.v3-card--wide {
+  grid-column: 1 / -1;
+}
+
+.v3-rows {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.v3-muted {
+  color: var(--v3-text-secondary);
+  font-size: 0.8rem;
+  font-variant-numeric: tabular-nums;
+}
+
+/* Verstecktes Schreib-Iframe (AWP-POST-Ziel) */
+.v3-sink {
+  position: fixed;
+  left: -9999px;
+  width: 0;
+  height: 0;
+  border: 0;
+}
+
+/* Knopf-Paare (auf/ab, an/aus) */
+.v3-btn-group {
+  display: flex;
+  gap: 6px;
+  flex-wrap: wrap;
+}
+
+.v3-btn-group form {
+  margin: 0;
+}
+
+/* ---- Heizungs-Zeile ---- */
+.v3-heat-row {
+  display: grid;
+  grid-template-columns: 1.3fr 0.9fr auto 0.9fr auto auto;
+  gap: 10px;
+  align-items: center;
+  background: var(--v3-surface);
+  border: 1px solid var(--v3-border);
+  border-radius: var(--v3-radius-sm);
+  padding: 10px 12px;
+  margin: 0;
+  transition: border-color 0.25s ease;
+}
+
+.v3-heat-row:hover {
+  border-color: var(--v3-border-hover);
+}
+
+.v3-heat-head {
+  display: grid;
+  grid-template-columns: 1.3fr 0.9fr auto 0.9fr auto auto;
+  gap: 10px;
+  padding: 0 12px 4px;
+  font-size: 0.65rem;
+  text-transform: uppercase;
+  letter-spacing: 0.4px;
+  color: var(--v3-text-secondary);
+}
+
+/* Getrennte Schreib-Form je SOLL-Wert (min bzw. max) */
+.v3-heat-set {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  margin: 0;
+}
+
+.v3-heat-set .v3-input {
+  width: 54px;
+}
+
+/* ---- Zähler (Strom + Wasser) ---- */
+.v3-strom-layout {
+	display: grid;
+	grid-template-columns: 1fr 1fr 1fr;
+	grid-template-rows: auto auto;
+	gap: 16px;
+	justify-items: center;
+	align-items: start;
+}
+
+.v3-strom-layout > .v3-gauge-container {
+	grid-column: 1;
+	grid-row: 1;
+}
+
+.v3-strom-values {
+	grid-column: 1;
+	grid-row: 2;
+	display: flex;
+	flex-direction: row;
+	gap: 16px;
+	justify-content: center;
+	align-items: flex-start;
+	min-width: 140px;
+}
+
+.v3-strom-layout > .v3-chart-container:nth-child(3) {
+	grid-column: 2;
+	grid-row: 1 / 3;
+	align-self: center;
+}
+
+.v3-strom-layout > .v3-chart-container:nth-child(4) {
+	grid-column: 3;
+	grid-row: 1 / 3;
+	align-self: center;
+}
+
+.v3-strom-values .v3-info-value {
+	font-size: 0.95rem;
+}
+
+/* Wasserzähler */
+.v3-water-layout {
+	display: grid;
+	grid-template-columns: 1fr;
+	grid-template-rows: auto;
+	gap: 16px;
+	justify-items: start;
+	align-items: start;
+}
+
+.v3-water-layout > .v3-chart-container {
+	grid-column: 1;
+	grid-row: 1;
+	align-self: center;
+	justify-self: start;
+	width: fit-content;
+}
+
+@media (max-width: 1100px) {
+	.v3-strom-layout,
+	.v3-water-layout {
+		grid-template-columns: 1fr;
+		grid-template-rows: auto;
+	}
+
+	.v3-strom-layout > .v3-gauge-container,
+	.v3-strom-layout > .v3-strom-values,
+	.v3-strom-layout > .v3-chart-container:nth-child(3),
+	.v3-strom-layout > .v3-chart-container:nth-child(4),
+	.v3-water-layout > .v3-chart-container {
+		grid-column: 1;
+		grid-row: auto;
+		align-self: center;
+	}
+}
+
+#v3_gauge,
+#v3_power_chart,
+#v3_daily_chart,
+#v3_water_chart {
+  background: rgba(0, 0, 0, 0.25);
+  border-radius: var(--v3-radius-sm);
+  border: 1px solid var(--v3-border);
+  display: block;
+  width: 100%;
+  max-width: 360px;
+  height: auto;
+  aspect-ratio: 2 / 1;
+}
+
+#v3_gauge {
+  border-radius: var(--v3-radius);
+  max-width: 360px;
+  aspect-ratio: 3 / 1;
+}
+
+@media (max-width: 768px) {
+  .v3-heat-row,
+  .v3-heat-head {
+    grid-template-columns: 1fr auto auto;
+    grid-auto-rows: auto;
+  }
+  .v3-heat-head { display: none; }
+}
+
+/* Sanfte Uebergaenge + Schalt-Feedback (V3) */
+.v3-temp { transition: color 0.3s ease; }
+
+@keyframes v3-flash-ok-anim {
+  from { box-shadow: 0 0 0 2px rgba(124, 255, 178, 0.85); }
+  to   { box-shadow: 0 0 0 2px rgba(124, 255, 178, 0); }
+}
+@keyframes v3-flash-err-anim {
+  from { box-shadow: 0 0 0 2px rgba(255, 92, 122, 0.9); }
+  to   { box-shadow: 0 0 0 2px rgba(255, 92, 122, 0); }
+}
+.v3-flash-ok { animation: v3-flash-ok-anim 0.6s ease-out; }
+.v3-flash-err { animation: v3-flash-err-anim 0.6s ease-out; }
+
+/* ---- Poolpumpe Fortschrittsbalken (IST vs. SOLL Laufzeit) ---- */
+.v3-pool-row {
+	display: flex;
+	align-items: center;
+	gap: 10px;
+}
+
+.v3-pool-bar {
+	position: relative;
+	flex: 1;
+	min-width: 0;
+	height: 18px;
+	background: rgba(255,255,255,0.08);
+	border: 1px solid var(--v3-border);
+	border-radius: 999px;
+	overflow: hidden;
+}
+
+.v3-pool-bar-fill {
+	position: absolute;
+	left: 0;
+	top: 0;
+	bottom: 0;
+	width: 0%;
+	background: linear-gradient(90deg, rgba(99,212,255,0.55), rgba(99,212,255,0.95));
+	border-radius: 999px;
+	transition: width 0.6s ease;
+}
+
+.v3-pool-bar-fill--done {
+	background: linear-gradient(90deg, rgba(124,255,178,0.55), rgba(124,255,178,0.95));
+	box-shadow: 0 0 10px rgba(124,255,178,0.5);
+}
+
+.v3-pool-bar-label {
+	position: absolute;
+	left: 0;
+	right: 0;
+	top: 0;
+	bottom: 0;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	font-size: 0.72rem;
+	font-weight: 600;
+	color: var(--v3-text);
+	text-shadow: 0 1px 3px rgba(0,0,0,0.8);
+	white-space: nowrap;
+	pointer-events: none;
+}
+
+.v3-pool-set {
+	display: flex;
+	align-items: center;
+	gap: 8px;
+	flex-shrink: 0;
+}
+
+.v3-pool-set-label {
+	font-size: 0.75rem;
+	color: var(--v3-text-secondary);
+	white-space: nowrap;
+}
+
+.v3-pool-set .v3-input {
+	width: 80px;
+}

formV4.css

@@ -0,0 +1,842 @@
+:root {
+  --v4-bg: #02040A;
+  --v4-surface: rgba(0, 20, 40, 0.35);
+  --v4-surface-2: rgba(0, 30, 60, 0.5);
+  --v4-border: rgba(0, 229, 255, 0.25);
+  --v4-border-hover: rgba(0, 229, 255, 0.55);
+  --v4-text: #E6F7FF;
+  --v4-text-secondary: rgba(230, 247, 255, 0.6);
+  --v4-cyan: #00E5FF;
+  --v4-green: #00FF9C;
+  --v4-amber: #FFB300;
+  --v4-red: #FF3B5C;
+  --v4-mono: 'Consolas', 'JetBrains Mono', 'Courier New', monospace;
+  --v4-sans: 'Segoe UI', system-ui, -apple-system, Arial, sans-serif;
+  --v4-radius: 10px;
+  --v4-glow-cyan: 0 0 12px rgba(0, 229, 255, 0.35);
+  --v4-glow-green: 0 0 12px rgba(0, 255, 156, 0.35);
+  --v4-glow-amber: 0 0 12px rgba(255, 179, 0, 0.35);
+  --v4-glow-red: 0 0 12px rgba(255, 59, 92, 0.35);
+}
+
+* { box-sizing: border-box; }
+
+html, body {
+  margin: 0;
+  padding: 0;
+  font-family: var(--v4-sans);
+  background: var(--v4-bg);
+  color: var(--v4-text);
+  min-height: 100vh;
+}
+
+/* ===== Sternenfeld ===== */
+body::before {
+  content: '';
+  position: fixed;
+  inset: 0;
+  background-image:
+    radial-gradient(1px 1px at 20% 30%, rgba(255,255,255,0.4) 50%, transparent 50%),
+    radial-gradient(1px 1px at 70% 15%, rgba(255,255,255,0.3) 50%, transparent 50%),
+    radial-gradient(1.5px 1.5px at 40% 70%, rgba(255,255,255,0.25) 50%, transparent 50%),
+    radial-gradient(1px 1px at 85% 60%, rgba(255,255,255,0.35) 50%, transparent 50%),
+    radial-gradient(1px 1px at 10% 80%, rgba(255,255,255,0.3) 50%, transparent 50%),
+    radial-gradient(1.5px 1.5px at 55% 40%, rgba(255,255,255,0.2) 50%, transparent 50%),
+    radial-gradient(1px 1px at 90% 90%, rgba(255,255,255,0.3) 50%, transparent 50%),
+    radial-gradient(1px 1px at 30% 10%, rgba(255,255,255,0.4) 50%, transparent 50%);
+  pointer-events: none;
+  z-index: 0;
+}
+
+/* ===== Scanlines ===== */
+.v4-scanlines {
+  position: fixed;
+  inset: 0;
+  pointer-events: none;
+  z-index: 9999;
+  background: repeating-linear-gradient(
+    0deg,
+    rgba(0, 0, 0, 0.12) 0px,
+    rgba(0, 0, 0, 0.12) 1px,
+    transparent 1px,
+    transparent 3px
+  );
+  opacity: 0;
+  transition: opacity 0.3s ease;
+}
+.v4-scanlines.v4-scanlines--on { opacity: 1; }
+
+/* ===== Boot-Sequence ===== */
+.v4-boot {
+  position: fixed;
+  inset: 0;
+  background: var(--v4-bg);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 10000;
+  transition: opacity 0.6s ease;
+}
+.v4-boot.v4-boot--hidden { opacity: 0; pointer-events: none; }
+.v4-boot-inner {
+  width: 420px;
+  max-width: 90vw;
+  border: 1px solid var(--v4-border);
+  border-radius: var(--v4-radius);
+  padding: 24px;
+  background: var(--v4-surface);
+  box-shadow: var(--v4-glow-cyan);
+}
+.v4-boot-logo {
+  text-align: center;
+  font-family: var(--v4-mono);
+  font-size: 1.1rem;
+  color: var(--v4-cyan);
+  text-shadow: var(--v4-glow-cyan);
+  margin-bottom: 20px;
+  letter-spacing: 2px;
+}
+.v4-boot-line {
+  display: flex;
+  justify-content: space-between;
+  font-family: var(--v4-mono);
+  font-size: 0.85rem;
+  color: var(--v4-text-secondary);
+  padding: 4px 0;
+}
+.v4-boot-status { color: var(--v4-amber); }
+.v4-boot-status.v4-boot-ok { color: var(--v4-green); }
+.v4-boot-bar {
+  height: 6px;
+  background: rgba(255,255,255,0.08);
+  border-radius: 3px;
+  margin-top: 16px;
+  overflow: hidden;
+}
+.v4-boot-bar-fill {
+  height: 100%;
+  width: 0%;
+  background: linear-gradient(90deg, var(--v4-cyan), var(--v4-green));
+  box-shadow: var(--v4-glow-cyan);
+  transition: width 0.3s ease;
+}
+.v4-boot-done {
+  text-align: center;
+  font-family: var(--v4-mono);
+  font-size: 1rem;
+  color: var(--v4-green);
+  text-shadow: var(--v4-glow-green);
+  margin-top: 16px;
+  letter-spacing: 3px;
+  opacity: 0;
+  transition: opacity 0.4s ease;
+}
+.v4-boot-done.v4-boot-done--show { opacity: 1; }
+
+/* ===== Seite ===== */
+.v4-page {
+  position: relative;
+  z-index: 1;
+  max-width: 1500px;
+  margin: 0 auto;
+  padding: 12px;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+/* ===== Header ===== */
+.v4-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  gap: 10px;
+  padding: 10px 16px;
+  background: var(--v4-surface);
+  border: 1px solid var(--v4-border);
+  border-radius: var(--v4-radius);
+  box-shadow: var(--v4-glow-cyan);
+}
+.v4-header-logo {
+  font-family: var(--v4-mono);
+  font-size: 1.2rem;
+  font-weight: 700;
+  color: var(--v4-cyan);
+  text-shadow: var(--v4-glow-cyan);
+  letter-spacing: 2px;
+}
+.v4-header-clock { display: flex; align-items: baseline; gap: 10px; }
+.v4-clock-time {
+  font-family: var(--v4-mono);
+  font-size: 1.6rem;
+  font-weight: 700;
+  color: var(--v4-cyan);
+  text-shadow: var(--v4-glow-cyan);
+  font-variant-numeric: tabular-nums;
+}
+.v4-clock-date { font-size: 0.85rem; color: var(--v4-text-secondary); }
+.v4-header-sun { display: flex; gap: 12px; }
+.v4-sun-item {
+  font-family: var(--v4-mono);
+  font-size: 0.9rem;
+  color: var(--v4-amber);
+  text-shadow: var(--v4-glow-amber);
+}
+.v4-header-status { display: flex; align-items: center; gap: 8px; }
+.v4-status-orb {
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+  background: var(--v4-red);
+  box-shadow: var(--v4-glow-red);
+  transition: background 0.3s ease, box-shadow 0.3s ease;
+}
+.v4-status-orb.v4-status-orb--on {
+  background: var(--v4-green);
+  box-shadow: var(--v4-glow-green);
+  animation: v4-pulse 2s ease-in-out infinite;
+}
+.v4-status-text { font-size: 0.8rem; color: var(--v4-text-secondary); }
+
+/* ===== Grid ===== */
+.v4-grid {
+  display: grid;
+  grid-template-columns: 1fr 1.2fr 1fr;
+  gap: 12px;
+  align-items: start;
+}
+
+/* ===== Zone ===== */
+.v4-zone {
+  background: var(--v4-surface);
+  border: 1px solid var(--v4-border);
+  border-radius: var(--v4-radius);
+  padding: 14px;
+  position: relative;
+  box-shadow: 0 0 20px rgba(0, 0, 0, 0.4);
+}
+/* Eck-Clips (Cockpit-Look) */
+.v4-zone::before,
+.v4-zone::after {
+  content: '';
+  position: absolute;
+  width: 14px;
+  height: 14px;
+  border: 2px solid var(--v4-cyan);
+  opacity: 0.6;
+}
+.v4-zone::before { top: -1px; left: -1px; border-right: none; border-bottom: none; }
+.v4-zone::after { bottom: -1px; right: -1px; border-left: none; border-top: none; }
+
+.v4-zone-title {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-family: var(--v4-mono);
+  font-size: 0.95rem;
+  font-weight: 700;
+  color: var(--v4-cyan);
+  text-shadow: var(--v4-glow-cyan);
+  letter-spacing: 2px;
+  margin-bottom: 12px;
+  padding-bottom: 8px;
+  border-bottom: 1px solid var(--v4-border);
+}
+.v4-zone-icon { font-size: 1.1rem; }
+
+.v4-sub-title {
+  font-family: var(--v4-mono);
+  font-size: 0.75rem;
+  font-weight: 700;
+  color: var(--v4-text-secondary);
+  letter-spacing: 2px;
+  margin: 14px 0 8px;
+  text-transform: uppercase;
+}
+
+/* ===== Buttons ===== */
+.v4-btn {
+  appearance: none;
+  border: 1px solid var(--v4-border);
+  background: var(--v4-surface-2);
+  color: var(--v4-text);
+  border-radius: 6px;
+  padding: 8px 14px;
+  font-weight: 600;
+  font-size: 0.85rem;
+  cursor: pointer;
+  transition: transform 0.12s ease, background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+}
+.v4-btn:hover {
+  background: rgba(0, 229, 255, 0.12);
+  border-color: var(--v4-border-hover);
+  transform: translateY(-1px);
+  box-shadow: var(--v4-glow-cyan);
+}
+.v4-btn:active { transform: translateY(0); }
+.v4-btn--primary {
+  border-color: rgba(0, 229, 255, 0.4);
+  background: rgba(0, 229, 255, 0.1);
+  color: var(--v4-cyan);
+}
+.v4-btn--on {
+  border-color: rgba(0, 255, 156, 0.4);
+  background: rgba(0, 255, 156, 0.1);
+  color: var(--v4-green);
+}
+.v4-btn--off {
+  border-color: rgba(255, 59, 92, 0.4);
+  background: rgba(255, 59, 92, 0.1);
+  color: var(--v4-red);
+}
+.v4-btn--big { padding: 12px 18px; font-size: 0.95rem; }
+.v4-btn--icon { padding: 6px 10px; font-size: 1rem; }
+
+/* ===== Flash-Feedback ===== */
+@keyframes v4-flash-ok-anim {
+  from { box-shadow: 0 0 0 2px rgba(0, 255, 156, 0.9); }
+  to   { box-shadow: 0 0 0 2px rgba(0, 255, 156, 0); }
+}
+@keyframes v4-flash-err-anim {
+  from { box-shadow: 0 0 0 2px rgba(255, 59, 92, 0.9); }
+  to   { box-shadow: 0 0 0 2px rgba(255, 59, 92, 0); }
+}
+.v4-flash-ok { animation: v4-flash-ok-anim 0.6s ease-out; }
+.v4-flash-err { animation: v4-flash-err-anim 0.6s ease-out; }
+
+/* ===== Energie-Zone ===== */
+.v4-gauge-wrap {
+  display: flex;
+  justify-content: center;
+  margin-bottom: 10px;
+}
+#v4_gauge {
+  width: 100%;
+  max-width: 360px;
+  height: auto;
+  aspect-ratio: 3 / 2;
+  display: block;
+}
+.v4-energy-stats {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 8px;
+  margin-bottom: 12px;
+}
+.v4-stat {
+  background: var(--v4-surface-2);
+  border: 1px solid var(--v4-border);
+  border-radius: 6px;
+  padding: 8px;
+  text-align: center;
+}
+.v4-stat-label {
+  display: block;
+  font-size: 0.65rem;
+  color: var(--v4-text-secondary);
+  text-transform: uppercase;
+  letter-spacing: 1px;
+  margin-bottom: 4px;
+}
+.v4-stat-value {
+  font-family: var(--v4-mono);
+  font-size: 0.95rem;
+  font-weight: 700;
+  color: var(--v4-text);
+}
+.v4-chart-wrap {
+  background: rgba(0, 0, 0, 0.3);
+  border: 1px solid var(--v4-border);
+  border-radius: 6px;
+  padding: 6px;
+  margin-bottom: 10px;
+  overflow: hidden;
+}
+#v4_power_chart,
+#v4_daily_chart,
+#v4_water_chart {
+  width: 100%;
+  height: auto;
+  aspect-ratio: 2 / 1;
+  display: block;
+}
+.v4-water {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 8px;
+  margin-bottom: 10px;
+}
+.v4-water-item {
+  background: var(--v4-surface-2);
+  border: 1px solid var(--v4-border);
+  border-radius: 6px;
+  padding: 8px;
+  text-align: center;
+}
+.v4-water-label {
+  display: block;
+  font-size: 0.65rem;
+  color: var(--v4-text-secondary);
+  text-transform: uppercase;
+  letter-spacing: 1px;
+  margin-bottom: 4px;
+}
+.v4-water-value {
+  font-family: var(--v4-mono);
+  font-size: 0.9rem;
+  font-weight: 700;
+  color: var(--v4-cyan);
+}
+.v4-wemos {
+  font-family: var(--v4-mono);
+  font-size: 0.8rem;
+  color: var(--v4-text-secondary);
+  text-align: center;
+  padding: 6px;
+  border: 1px dashed var(--v4-border);
+  border-radius: 6px;
+}
+
+/* ===== Kommando-Zone: Licht-Tiles ===== */
+.v4-tiles {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 8px;
+}
+.v4-tile {
+  background: var(--v4-surface-2);
+  border: 1px solid var(--v4-border);
+  border-radius: 8px;
+  padding: 12px 6px;
+  text-align: center;
+  cursor: pointer;
+  transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease;
+  position: relative;
+  overflow: hidden;
+}
+.v4-tile:hover { border-color: var(--v4-border-hover); }
+.v4-tile:active { transform: scale(0.96); }
+.v4-tile-name {
+  display: block;
+  font-size: 0.75rem;
+  font-weight: 600;
+  color: var(--v4-text-secondary);
+  margin-bottom: 6px;
+}
+.v4-tile-orb {
+  display: block;
+  width: 14px;
+  height: 14px;
+  margin: 0 auto;
+  border-radius: 50%;
+  background: rgba(255, 255, 255, 0.15);
+  transition: background 0.3s ease, box-shadow 0.3s ease;
+}
+.v4-tile--on {
+  background: rgba(0, 255, 156, 0.12);
+  border-color: rgba(0, 255, 156, 0.5);
+  box-shadow: var(--v4-glow-green);
+}
+.v4-tile--on .v4-tile-name { color: var(--v4-green); }
+.v4-tile--on .v4-tile-orb {
+  background: var(--v4-green);
+  box-shadow: var(--v4-glow-green);
+  animation: v4-pulse 2s ease-in-out infinite;
+}
+/* Ripple */
+.v4-tile-ripple {
+  position: absolute;
+  border-radius: 50%;
+  background: rgba(0, 229, 255, 0.3);
+  transform: scale(0);
+  animation: v4-ripple 0.5s ease-out;
+  pointer-events: none;
+}
+@keyframes v4-ripple {
+  to { transform: scale(3); opacity: 0; }
+}
+
+/* ===== WLED ===== */
+.v4-wled { display: flex; flex-direction: column; gap: 10px; }
+.v4-wled-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
+.v4-wled-label { font-size: 0.8rem; color: var(--v4-text-secondary); min-width: 80px; }
+.v4-slider { flex: 1; min-width: 120px; accent-color: var(--v4-cyan); }
+.v4-color { width: 48px; height: 36px; padding: 0; border: 1px solid var(--v4-border); border-radius: 6px; background: transparent; cursor: pointer; }
+
+/* ===== Rolladen ===== */
+.v4-rolladen { display: flex; flex-direction: column; gap: 6px; }
+.v4-roll-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  background: var(--v4-surface-2);
+  border: 1px solid var(--v4-border);
+  border-radius: 6px;
+  padding: 6px 10px;
+}
+.v4-roll-name { font-size: 0.8rem; font-weight: 600; }
+.v4-roll-btns { display: flex; gap: 4px; }
+.v4-roll-btns .v4-btn { padding: 4px 8px; font-size: 0.75rem; }
+
+/* ===== Steckdosen ===== */
+.v4-sockets { display: flex; flex-direction: column; gap: 6px; }
+.v4-socket-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  background: var(--v4-surface-2);
+  border: 1px solid var(--v4-border);
+  border-radius: 6px;
+  padding: 6px 10px;
+}
+.v4-socket-name { font-size: 0.8rem; font-weight: 600; }
+.v4-socket-orb {
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  background: rgba(255, 255, 255, 0.15);
+  cursor: pointer;
+  transition: background 0.3s ease, box-shadow 0.3s ease;
+}
+.v4-socket-orb.v4-socket-orb--on {
+  background: var(--v4-green);
+  box-shadow: var(--v4-glow-green);
+  animation: v4-pulse 2s ease-in-out infinite;
+}
+
+/* ===== Haus ===== */
+.v4-house { display: flex; flex-direction: column; gap: 8px; }
+
+/* ===== Funksteckdosen ===== */
+.v4-funk { display: flex; flex-direction: column; gap: 6px; }
+.v4-funk-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  background: var(--v4-surface-2);
+  border: 1px solid var(--v4-border);
+  border-radius: 6px;
+  padding: 6px 10px;
+}
+.v4-funk-state {
+  background: rgba(0, 0, 0, 0.25);
+  border: 1px solid var(--v4-border);
+  border-radius: 6px;
+  padding: 8px;
+  margin-bottom: 10px;
+}
+.v4-funk-grid {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 6px;
+}
+.v4-funk-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 6px;
+  background: var(--v4-surface-2);
+  border: 1px solid var(--v4-border);
+  border-radius: 6px;
+  padding: 5px 8px;
+}
+.v4-funk-name { font-size: 0.75rem; font-weight: 600; color: var(--v4-text-secondary); }
+.v4-funk-val {
+  font-family: var(--v4-mono);
+  font-size: 0.8rem;
+  font-weight: 700;
+  color: var(--v4-text);
+}
+.v4-funk-val.v4-funk-val--on { color: var(--v4-green); text-shadow: var(--v4-glow-green); }
+.v4-funk-val.v4-funk-val--off { color: var(--v4-red); text-shadow: var(--v4-glow-red); }
+.v4-btn-group { display: flex; gap: 4px; flex-wrap: wrap; }
+.v4-funk-row .v4-btn { padding: 4px 8px; font-size: 0.75rem; }
+
+/* ===== Status-Zone: Heizung ===== */
+.v4-heat { display: flex; flex-direction: column; gap: 6px; }
+.v4-heat-row {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  grid-template-rows: auto auto;
+  gap: 6px 12px;
+  align-items: center;
+  background: var(--v4-surface-2);
+  border: 1px solid var(--v4-border);
+  border-radius: 6px;
+  padding: 8px 10px;
+  transition: border-color 0.2s ease;
+}
+.v4-heat-row:hover { border-color: var(--v4-border-hover); }
+.v4-heat-name { font-size: 0.8rem; font-weight: 600; grid-column: 1; grid-row: 1; }
+.v4-heat-tempwrap {
+  grid-column: 2;
+  grid-row: 1;
+  justify-self: end;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+.v4-heat-temp {
+  font-family: var(--v4-mono);
+  font-size: 1.1rem;
+  font-weight: 700;
+  text-align: right;
+}
+.v4-heat-temp--normal { color: var(--v4-text); }
+.v4-heat-temp--warm { color: var(--v4-amber); }
+.v4-heat-temp--hot { color: var(--v4-red); }
+.v4-heat-dot {
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  background: rgba(255, 255, 255, 0.15);
+}
+.v4-heat-dot--on {
+  background: var(--v4-amber);
+  box-shadow: var(--v4-glow-amber);
+  animation: v4-pulse 1.5s ease-in-out infinite;
+}
+.v4-heat-bar-wrap {
+  grid-column: 1 / 3;
+  grid-row: 2;
+  height: 8px;
+  background: rgba(255, 255, 255, 0.08);
+  border-radius: 4px;
+  position: relative;
+  overflow: hidden;
+}
+.v4-heat-set {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+.v4-heat-set--min { grid-column: 1; grid-row: 3; }
+.v4-heat-set--max { grid-column: 2; grid-row: 3; }
+.v4-heat-input { width: 46px; padding: 4px 6px; font-size: 0.8rem; }
+.v4-btn--sm { padding: 4px 8px; font-size: 0.75rem; }
+
+/* ===== Stepper (Drehschalter) ===== */
+.v4-stepper {
+  display: inline-flex;
+  align-items: center;
+  gap: 2px;
+  background: rgba(0, 0, 0, 0.3);
+  border: 1px solid var(--v4-border);
+  border-radius: 999px;
+  padding: 2px;
+}
+.v4-stepper-btn {
+  appearance: none;
+  border: none;
+  background: var(--v4-surface-2);
+  color: var(--v4-cyan);
+  width: 26px;
+  height: 26px;
+  border-radius: 50%;
+  font-size: 1.1rem;
+  font-weight: 700;
+  line-height: 1;
+  cursor: pointer;
+  transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+.v4-stepper-btn:hover {
+  background: rgba(0, 229, 255, 0.2);
+  box-shadow: var(--v4-glow-cyan);
+}
+.v4-stepper-btn:active { transform: scale(0.9); }
+.v4-stepper-val {
+  font-family: var(--v4-mono);
+  font-size: 0.85rem;
+  font-weight: 700;
+  color: var(--v4-text);
+  min-width: 48px;
+  text-align: center;
+  padding: 0 4px;
+}
+.v4-heat-bar {
+  position: absolute;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  width: 0%;
+  background: linear-gradient(90deg, var(--v4-cyan), var(--v4-amber), var(--v4-red));
+  border-radius: 4px;
+  transition: width 0.5s ease;
+}
+.v4-heat-band {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  background: rgba(255, 255, 255, 0.15);
+  border-left: 1px solid rgba(255, 255, 255, 0.3);
+  border-right: 1px solid rgba(255, 255, 255, 0.3);
+}
+
+/* ===== Pool ===== */
+.v4-pool { display: flex; flex-direction: column; gap: 8px; }
+.v4-pool-bar {
+  position: relative;
+  height: 20px;
+  background: rgba(255, 255, 255, 0.08);
+  border: 1px solid var(--v4-border);
+  border-radius: 999px;
+  overflow: hidden;
+}
+.v4-pool-bar-fill {
+  position: absolute;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  width: 0%;
+  background: linear-gradient(90deg, rgba(0, 229, 255, 0.5), var(--v4-cyan));
+  border-radius: 999px;
+  box-shadow: var(--v4-glow-cyan);
+  transition: width 0.6s ease;
+}
+.v4-pool-bar-fill--done {
+  background: linear-gradient(90deg, rgba(0, 255, 156, 0.5), var(--v4-green));
+  box-shadow: var(--v4-glow-green);
+}
+.v4-pool-bar-label {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-family: var(--v4-mono);
+  font-size: 0.75rem;
+  font-weight: 600;
+  color: var(--v4-text);
+  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
+  pointer-events: none;
+}
+.v4-pool-set { display: flex; align-items: center; gap: 8px; }
+.v4-pool-set-label { font-size: 0.75rem; color: var(--v4-text-secondary); }
+.v4-input {
+  background: rgba(0, 0, 0, 0.3);
+  color: var(--v4-text);
+  border: 1px solid var(--v4-border);
+  border-radius: 6px;
+  padding: 6px 10px;
+  font-size: 0.9rem;
+  width: 80px;
+  text-align: center;
+}
+.v4-input:focus { outline: none; border-color: var(--v4-cyan); }
+
+/* ===== Urlaub ===== */
+.v4-urlaub {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  background: var(--v4-surface-2);
+  border: 1px solid var(--v4-border);
+  border-radius: 6px;
+  padding: 10px;
+}
+.v4-urlaub-indicator {
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  background: rgba(255, 255, 255, 0.15);
+  transition: background 0.3s ease, box-shadow 0.3s ease;
+}
+.v4-urlaub-indicator.v4-urlaub-indicator--on {
+  background: var(--v4-amber);
+  box-shadow: var(--v4-glow-amber);
+  animation: v4-pulse 1.5s ease-in-out infinite;
+}
+.v4-urlaub-text {
+  font-family: var(--v4-mono);
+  font-size: 0.9rem;
+  font-weight: 700;
+  color: var(--v4-text-secondary);
+  flex: 1;
+}
+
+/* ===== Footer ===== */
+.v4-footer {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  flex-wrap: wrap;
+  padding: 10px 16px;
+  background: var(--v4-surface);
+  border: 1px solid var(--v4-border);
+  border-radius: var(--v4-radius);
+  box-shadow: var(--v4-glow-cyan);
+}
+.v4-footer-label {
+  font-family: var(--v4-mono);
+  font-size: 0.8rem;
+  color: var(--v4-cyan);
+  text-shadow: var(--v4-glow-cyan);
+  letter-spacing: 1px;
+}
+
+/* ===== Toasts ===== */
+.v4-toasts {
+  position: fixed;
+  bottom: 20px;
+  right: 20px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  z-index: 10001;
+}
+.v4-toast {
+  background: var(--v4-surface-2);
+  border: 1px solid var(--v4-border);
+  border-left: 3px solid var(--v4-cyan);
+  border-radius: 6px;
+  padding: 10px 14px;
+  font-size: 0.85rem;
+  color: var(--v4-text);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
+  animation: v4-toast-in 0.3s ease;
+  max-width: 300px;
+}
+.v4-toast--ok { border-left-color: var(--v4-green); }
+.v4-toast--err { border-left-color: var(--v4-red); }
+@keyframes v4-toast-in {
+  from { transform: translateX(30px); opacity: 0; }
+  to   { transform: translateX(0); opacity: 1; }
+}
+.v4-toast.v4-toast--out { animation: v4-toast-out 0.3s ease forwards; }
+@keyframes v4-toast-out {
+  to { transform: translateX(30px); opacity: 0; }
+}
+
+/* ===== Animationen ===== */
+@keyframes v4-pulse {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.6; }
+}
+
+/* ===== Responsive ===== */
+@media (max-width: 1100px) {
+  .v4-grid { grid-template-columns: 1fr; }
+}
+@media (max-width: 768px) {
+  .v4-page { padding: 8px; }
+  .v4-header { flex-direction: column; align-items: flex-start; }
+  .v4-energy-stats { grid-template-columns: repeat(2, 1fr); }
+  .v4-tiles { grid-template-columns: repeat(2, 1fr); }
+  .v4-water { grid-template-columns: 1fr; }
+}
+
+/* ===== Scrollbar ===== */
+::-webkit-scrollbar { width: 8px; }
+::-webkit-scrollbar-track { background: var(--v4-bg); }
+::-webkit-scrollbar-thumb { background: var(--v4-border); border-radius: 4px; }
+::-webkit-scrollbar-thumb:hover { background: var(--v4-border-hover); }

heizungV2.htm

@@ -0,0 +1,304 @@
+<!-- AWP_In_Variable Name='"Einstellungen".Heizung."Heizung Wohnen min"' -->
+<!-- AWP_In_Variable Name='"Einstellungen".Heizung."Heizung Wohnen max"' -->
+<!-- AWP_In_Variable Name='"Einstellungen".Heizung."Heizung Arbeiten min"' -->
+<!-- AWP_In_Variable Name='"Einstellungen".Heizung."Heizung Arbeiten max"' -->
+<!-- AWP_In_Variable Name='"Einstellungen".Heizung."Heizung HWR min"' -->
+<!-- AWP_In_Variable Name='"Einstellungen".Heizung."Heizung HWR max"' -->
+<!-- AWP_In_Variable Name='"Einstellungen".Heizung."Heizung Bad min"' -->
+<!-- AWP_In_Variable Name='"Einstellungen".Heizung."Heizung Bad max"' -->
+<!-- AWP_In_Variable Name='"Einstellungen".Heizung."Heizung Eltern min"' -->
+<!-- AWP_In_Variable Name='"Einstellungen".Heizung."Heizung Eltern max"' -->
+<!-- AWP_In_Variable Name='"Einstellungen".Heizung."Heizung Kind1 min"' -->
+<!-- AWP_In_Variable Name='"Einstellungen".Heizung."Heizung Kind1 max"' -->
+<!-- AWP_In_Variable Name='"Einstellungen".Heizung."Heizung Kind2 min"' -->
+<!-- AWP_In_Variable Name='"Einstellungen".Heizung."Heizung Kind2 max"' -->
+<!-- AWP_In_Variable Name='"Einstellungen".Heizung."Heizung Gäste min"' -->
+<!-- AWP_In_Variable Name='"Einstellungen".Heizung."Heizung Gäste max"' -->
+<!-- AWP_In_Variable Name='"Einstellungen".Heizung."Heizung Dusche min"' -->
+<!-- AWP_In_Variable Name='"Einstellungen".Heizung."Heizung Dusche max"' -->
+
+
+
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
+<html dir="ltr" xmlns="http://www.w3.org/1999/xhtml">
+
+<head>
+<title>TTh</title>
+<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
+<link href="form.css" rel="stylesheet" type="text/css" />
+<style type="text/css">
+.auto-style2 {
+	font-family: "Arial";
+	font-size: x-large;
+}
+.auto-style3 {
+	text-align: center;
+}
+.auto-style4 {
+	color: #FF0000;
+	font-family: "Arial";
+	font-size: medium;
+	text-align: center;
+}
+.auto-style5 {
+	font-family: "Arial";
+	font-size: x-large;
+	text-align: center;
+}
+.auto-style6 {
+	color: #000000;
+	font-size: xx-small;
+
+}
+.auto-style7 {
+	font-family: "Arial";
+	font-size: x-large;
+	text-align: left;
+}
+</style>
+
+<script src="Script/tth_script.js" type="text/javascript">	</script>
+
+</head>
+
+<body style="color: #00FF00; background-color: #000000">
+
+<div id="masthead">
+</div>
+<div id="top_nav">
+</div>
+<div id="container">
+	
+	<div id="page_content">
+		<div class="ui-card">
+			<table border="1" align="left" class="ui-table">
+				<tr>
+					<td class="auto-style4" style="height: 78px">Raum</td>
+					<td class="auto-style4" style="height: 78px">aktuell °C</td>
+					<td class="auto-style4" style="height: 78px">heizt</td>
+					<td class="auto-style4" style="height: 78px">IST °C min</td>
+					<td class="auto-style4" style="height: 78px">IST °C max</td>
+					<td class="auto-style4" style="height: 78px">SOLL °C min</td>
+					<td class="auto-style4" style="height: 78px">SOLL °C max</td>
+					<td style="height: 78px"></td>
+					
+
+				</tr>
+				<tr>
+					<form action="" method="post">
+						<td class="auto-style4" style="height: 32px">Wohnzimmer</td>
+						<td id="heiztx101x" class="auto-style5" style="height: 32px">:="Temp Wohnen":°C</td>
+						<td class="auto-style5" style="width: 160px">
+						<img id="heizt_icon1" class="ui-icon" height="50" width="50" /></td>
+						<td id="ist_wohn_min" class="auto-style5">:="Einstellungen".Heizung."Heizung Wohnen min":</td>
+						<td id="ist_wohn_max" class="auto-style5">:="Einstellungen".Heizung."Heizung Wohnen max":</td>
+						<td style="height: 32px" class="auto-style3">
+						<input maxlength="4" name='"Einstellungen".Heizung."Heizung Wohnen min"' type="text" style="width: 50px" class="auto-style2" id="soll_wohn_min" /></td>
+						<td style="height: 32px" class="auto-style3">
+						<input maxlength="4" name='"Einstellungen".Heizung."Heizung Wohnen max"' type="text" style="width: 50px" class="auto-style2" id="soll_wohn_max" /></td>
+						<td style="height: 32px">
+						<input type="submit" value="schreiben" class="auto-style2 ui-btn ui-btn--primary" /></td>
+						
+					</form>
+				</tr>
+				<tr>
+					<form action="" method="post">
+						<td class="auto-style4" style="height: 32px">Arbeitszimmer</td>
+						<td id="heiztx102x" class="auto-style5" style="height: 32px">:="Temp Arbeiten":°C</td>
+						<td class="auto-style5" style="width: 160px">
+						<img id="heizt_icon2" class="ui-icon" height="50" width="50" /></td>
+						<td class="auto-style5">:="Einstellungen".Heizung."Heizung Arbeiten min":</td>
+						<td class="auto-style5">:="Einstellungen".Heizung."Heizung Arbeiten max":</td>
+						<td style="height: 32px" class="auto-style3">
+						<input maxlength="4" name='"Einstellungen".Heizung."Heizung Arbeiten min"' type="text" style="width: 50px" class="auto-style2" /></td>
+						<td style="height: 32px" class="auto-style3">
+						<input maxlength="4" name='"Einstellungen".Heizung."Heizung Arbeiten max"' type="text" style="width: 50px" class="auto-style2" /></td>
+						<td style="height: 32px">
+						<input type="submit" value="schreiben" class="auto-style2 ui-btn ui-btn--primary" /></td>
+						
+					</form>
+				</tr>
+				<tr>
+					<form action="" method="post">
+						<td class="auto-style4" style="height: 32px">HWR</td>
+						<td id="heiztx103x" class="auto-style5" style="height: 32px">:="Temp HWR":°C</td>
+						<td class="auto-style5" style="width: 160px">
+						<img id="heizt_icon3" class="ui-icon" height="50" width="50" /></td>
+						<td class="auto-style5">:="Einstellungen".Heizung."Heizung HWR min":</td>
+						<td class="auto-style5">:="Einstellungen".Heizung."Heizung HWR max":</td>
+						<td style="height: 32px" class="auto-style3">
+						<input maxlength="4" name='"Einstellungen".Heizung."Heizung HWR min"' type="text" style="width: 50px" class="auto-style2" /></td>
+						<td style="height: 32px" class="auto-style3">
+						<input maxlength="4" name='"Einstellungen".Heizung."Heizung HWR max"' type="text" style="width: 50px" class="auto-style2" /></td>
+						<td style="height: 32px">
+						<input type="submit" value="schreiben" class="auto-style2 ui-btn ui-btn--primary" /></td>
+						
+					</form>
+				</tr>
+				<tr>
+					<form action="" method="post">
+						<td class="auto-style4" style="height: 32px">Bad oben</td>
+						<td id="heiztx104x" class="auto-style5" style="height: 32px">:="Temp Bad":°C</td>
+						<td class="auto-style5" style="width: 160px">
+						<img id="heizt_icon4" class="ui-icon" height="50" width="50" /></td>
+						<td class="auto-style5">:="Einstellungen".Heizung."Heizung Bad min":</td>
+						<td class="auto-style5">:="Einstellungen".Heizung."Heizung Bad max":</td>
+						<td style="height: 32px" class="auto-style3">
+						<input maxlength="4" name='"Einstellungen".Heizung."Heizung Bad min"' type="text" style="width: 50px" class="auto-style2" /></td>
+						<td style="height: 32px" class="auto-style3">
+						<input maxlength="4" name='"Einstellungen".Heizung."Heizung Bad max"' type="text" style="width: 50px" class="auto-style2" /></td>
+						<td style="height: 32px">
+						<input type="submit" value="schreiben" class="auto-style2 ui-btn ui-btn--primary" /></td>
+						
+					</form>
+				</tr>
+				<tr>
+					<form action="" method="post">
+						<td class="auto-style4" style="height: 32px">Eltern</td>
+						<td id="heiztx105x" class="auto-style5" style="height: 32px">:="Temp Eltern":°C</td>
+						<td class="auto-style5" style="width: 160px">
+						<img id="heizt_icon5" class="ui-icon" height="50" width="50" /></td>
+						<td class="auto-style5">:="Einstellungen".Heizung."Heizung Eltern min":</td>
+						<td class="auto-style5">:="Einstellungen".Heizung."Heizung Eltern max":</td>
+						<td style="height: 32px" class="auto-style3">
+						<input maxlength="4" name='"Einstellungen".Heizung."Heizung Eltern min"' type="text" style="width: 50px" class="auto-style2" /></td>
+						<td style="height: 32px" class="auto-style3">
+						<input maxlength="4" name='"Einstellungen".Heizung."Heizung Eltern max"' type="text" style="width: 50px" class="auto-style2" /></td>
+						<td style="height: 32px">
+						<input type="submit" value="schreiben" class="auto-style2 ui-btn ui-btn--primary" /></td>
+						
+					</form>
+				</tr>
+				<tr>
+					<form action="" method="post">
+						<td class="auto-style4" style="height: 32px">Noah</td>
+						<td id="heiztx106x" class="auto-style5" style="height: 32px">:="Temp Noah":°C</td>
+						<td class="auto-style5" style="width: 160px">
+						<img id="heizt_icon6" class="ui-icon" height="50" width="50" /></td>
+						<td class="auto-style5">:="Einstellungen".Heizung."Heizung Kind1 min":</td>
+						<td class="auto-style5">:="Einstellungen".Heizung."Heizung Kind1 max":</td>
+						<td style="height: 32px" class="auto-style3">
+						<input maxlength="4" name='"Einstellungen".Heizung."Heizung Kind1 min"' type="text" style="width: 50px" class="auto-style2" ></td>
+						<td style="height: 32px" class="auto-style3">
+						<input maxlength="4" name='"Einstellungen".Heizung."Heizung Kind1 max"' type="text" style="width: 50px" class="auto-style2" ></td>
+						<td style="height: 32px">
+						<input type="submit" value="schreiben" class="auto-style2"></td>
+						
+					</form>
+				</tr>
+				<tr>
+					<form action="" method="post">
+						<td class="auto-style4" style="height: 32px">Mika</td>
+						<td id="heiztx107x" class="auto-style5" style="height: 32px">:="Temp Mika":°C</td>
+					<td class="auto-style5" style="width: 160px">
+					<img id="heizt_icon7" class="ui-icon" height="50" width="50"></td>
+						<td class="auto-style5">:="Einstellungen".Heizung."Heizung Kind2 min":</td>
+						<td class="auto-style5">:="Einstellungen".Heizung."Heizung Kind2 max":</td>
+						<td style="height: 32px" class="auto-style3">
+						<input maxlength="4" name='"Einstellungen".Heizung."Heizung Kind2 min"' type="text" style="width: 50px" class="auto-style2" ></td>
+						<td style="height: 32px" class="auto-style3">
+						<input maxlength="4" name='"Einstellungen".Heizung."Heizung Kind2 max"' type="text" style="width: 50px" class="auto-style2" ></td>
+						<td style="height: 32px">
+						<input type="submit" value="schreiben" class="auto-style2"></td>
+						
+					</form>
+				</tr>
+				<tr>
+					<form action="" method="post">
+						<td class="auto-style4" style="height: 32px">Niko</td>
+						<td id="heiztx108x" class="auto-style5" style="height: 32px">:="Temp Niko":°C</td>
+					<td class="auto-style5" style="width: 160px">
+					<img id="heizt_icon8" class="ui-icon" height="50" width="50"></td>
+						<td class="auto-style5">:="Einstellungen".Heizung."Heizung Gäste min":</td>
+						<td class="auto-style5">:="Einstellungen".Heizung."Heizung Gäste max":</td>
+						<td style="height: 32px" class="auto-style3">
+						<input maxlength="4" name='"Einstellungen".Heizung."Heizung Gäste min"' type="text" style="width: 50px" class="auto-style2" ></td>
+						<td style="height: 32px" class="auto-style3">
+						<input maxlength="4" name='"Einstellungen".Heizung."Heizung Gäste max"' type="text" style="width: 50px" class="auto-style2" ></td>
+						<td style="height: 32px">
+						<input type="submit" value="schreiben" class="auto-style2"></td>
+						
+					</form>
+				</tr>
+				<tr>
+					<form action="" method="post">
+						<td class="auto-style4" style="height: 32px">Dusche Gäste</td>
+						<td id="heiztx109x" class="auto-style5" style="height: 32px">:="Temp Dusche":°C</td>
+					<td class="auto-style5" style="width: 160px">
+					<img id="heizt_icon9" class="ui-icon" height="50" width="50"></td>
+						<td class="auto-style5">:="Einstellungen".Heizung."Heizung Dusche min":</td>
+						<td class="auto-style5">:="Einstellungen".Heizung."Heizung Dusche max":</td>
+						<td style="height: 32px" class="auto-style3">
+						<input maxlength="4" name='"Einstellungen".Heizung."Heizung Dusche min"' type="text" style="width: 50px" class="auto-style2" ></td>
+						<td style="height: 32px" class="auto-style3">
+						<input maxlength="4" name='"Einstellungen".Heizung."Heizung Dusche max"' type="text" style="width: 50px" class="auto-style2" ></td>
+						<td style="height: 32px">
+						<input type="submit" value="schreiben" class="auto-style2"></td>
+					</form>
+				</tr>
+			</table>
+		</div>
+	</div>
+</div>
+<div id="footer">
+</div>
+
+<script type="text/javascript">
+
+function showDataTable()
+{
+	if (window.XMLHttpRequest) {
+		// code fuer IE7+, Firefox, Chrome, Opera, Safari
+		xmlhttp = new XMLHttpRequest();
+	} else {
+		// code fuer IE6, IE5
+		xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
+	}
+
+	xmlhttp.open("GET", "heizung_state.html", true);
+
+	xmlhttp.onreadystatechange = function()
+	{
+		if (xmlhttp.readyState == 4 && xmlhttp.status == 200)
+		{
+			document.getElementById("OutputArea").innerHTML = xmlhttp.responseText;
+			// Refresh Timeout zum Neuladen der Daten setzen
+			
+			for (i = 1; i <= 9; i++) {
+			//console.log('i ' + i);
+			var status = document.getElementById('heiztx' + i).innerText;	
+			//console.log('Status' + status);
+			heizt_icon(('heizt_icon' + i), status);
+			}
+			
+			for (i = 101; i <= 109; i++) {
+			document.getElementById("heiztx" + i + "x").innerText = document.getElementById('heiztx' + i).innerText + "°C";	
+			}
+			
+			//document.getElementById("heiztx101x").innerText = document.getElementById("heiztx101").innerText;
+			
+			setTimeout("refreshOutputArea()", 1000);
+		}
+	}
+	xmlhttp.send(null);
+}
+
+function refreshOutputArea()
+{
+	showDataTable();
+}
+
+window.onload = function()
+{
+	refreshOutputArea();
+}
+
+</script>	
+	</head>
+<body>
+
+<div id="OutputArea" style="position:fixed;clip:rect(0,0,0,0);overflow:hidden;"></div>
+
+</body>
+
+</html>

heizung_state.html

@@ -0,0 +1,37 @@
+<p id="heiztx1"><span class="auto-style6">:="Heizung Essen Küche Wohn":</span>
+<p id="heiztx2"><span class="auto-style6">:="Heizung Arbeiten":</span>
+<p id="heiztx3"><span class="auto-style6">:="Heizung HWR":</span>
+<p id="heiztx4"><span class="auto-style6">:="Heizung Bad":</span>
+<p id="heiztx5"><span class="auto-style6">:="Heizung Eltern":</span>
+<p id="heiztx6"><span class="auto-style6">:="Heizung Noah":</span>
+<p id="heiztx7"><span class="auto-style6">:="Heizung Mika":</span>
+<p id="heiztx8"><span class="auto-style6">:="Heizung Niko":</span>
+<p id="heiztx9"><span class="auto-style6">:="Heizung Gäste Dusche":</span>
+<p id="heiztx101"><span class="auto-style6">:="Temp Wohnen":</span>
+<p id="heiztx102"><span class="auto-style6">:="Temp Arbeiten":</span>
+<p id="heiztx103"><span class="auto-style6">:="Temp HWR":</span>
+<p id="heiztx104"><span class="auto-style6">:="Temp Bad":</span>
+<p id="heiztx105"><span class="auto-style6">:="Temp Eltern":</span>
+<p id="heiztx106"><span class="auto-style6">:="Temp Noah":</span>
+<p id="heiztx107"><span class="auto-style6">:="Temp Mika":</span>
+<p id="heiztx108"><span class="auto-style6">:="Temp Niko":</span>
+<p id="heiztx109"><span class="auto-style6">:="Temp Dusche":</span>
+<p id="heiz_min1"><span class="auto-style6">:="Einstellungen".Heizung."Heizung Wohnen min":</span>
+<p id="heiz_max1"><span class="auto-style6">:="Einstellungen".Heizung."Heizung Wohnen max":</span>
+<p id="heiz_min2"><span class="auto-style6">:="Einstellungen".Heizung."Heizung Arbeiten min":</span>
+<p id="heiz_max2"><span class="auto-style6">:="Einstellungen".Heizung."Heizung Arbeiten max":</span>
+<p id="heiz_min3"><span class="auto-style6">:="Einstellungen".Heizung."Heizung HWR min":</span>
+<p id="heiz_max3"><span class="auto-style6">:="Einstellungen".Heizung."Heizung HWR max":</span>
+<p id="heiz_min4"><span class="auto-style6">:="Einstellungen".Heizung."Heizung Bad min":</span>
+<p id="heiz_max4"><span class="auto-style6">:="Einstellungen".Heizung."Heizung Bad max":</span>
+<p id="heiz_min5"><span class="auto-style6">:="Einstellungen".Heizung."Heizung Eltern min":</span>
+<p id="heiz_max5"><span class="auto-style6">:="Einstellungen".Heizung."Heizung Eltern max":</span>
+<p id="heiz_min6"><span class="auto-style6">:="Einstellungen".Heizung."Heizung Kind1 min":</span>
+<p id="heiz_max6"><span class="auto-style6">:="Einstellungen".Heizung."Heizung Kind1 max":</span>
+<p id="heiz_min7"><span class="auto-style6">:="Einstellungen".Heizung."Heizung Kind2 min":</span>
+<p id="heiz_max7"><span class="auto-style6">:="Einstellungen".Heizung."Heizung Kind2 max":</span>
+<p id="heiz_min8"><span class="auto-style6">:="Einstellungen".Heizung."Heizung Gäste min":</span>
+<p id="heiz_max8"><span class="auto-style6">:="Einstellungen".Heizung."Heizung Gäste max":</span>
+<p id="heiz_min9"><span class="auto-style6">:="Einstellungen".Heizung."Heizung Dusche min":</span>
+<p id="heiz_max9"><span class="auto-style6">:="Einstellungen".Heizung."Heizung Dusche max":</span>
+</p>

indexMika_89.htm

@@ -0,0 +1,70 @@
+<!DOCTYPE html>
+<html lang="de">
+
+<head>
+	<meta charset="utf-8" />
+	<meta name="viewport" content="width=device-width, initial-scale=1" />
+	<title>Mika – Zimmersteuerung</title>
+	<link href="formV3.css" rel="stylesheet" type="text/css" />
+</head>
+
+<body>
+	<div class="v3-page">
+		<div class="v3-grid">
+
+			<!-- ============ STROMZÄHLER ============ -->
+			<section class="v3-card v3-card--wide">
+				<div class="v3-card-title"><span>⚡</span><span>Stromzähler</span><span class="v3-status" id="api_status" style="margin-left:auto">verbinde…</span></div>
+				<div class="v3-strom-layout">
+					<div class="v3-gauge-container">
+						<canvas id="v3_gauge" width="360" height="180"></canvas>
+					</div>
+					<div class="v3-strom-values">
+						<div class="v3-info-item"><span class="v3-info-label">Bezug</span><span class="v3-info-value" id="sz_bezug">–</span></div>
+						<div class="v3-info-item"><span class="v3-info-label">Einspeisung</span><span class="v3-info-value" id="sz_einsp">–</span></div>
+						<div class="v3-info-item"><span class="v3-info-label">Wemos RC</span><span class="v3-info-value" id="sz_wemos">–</span></div>
+					</div>
+					<div class="v3-chart-container">
+						<canvas id="v3_power_chart" width="360" height="180"></canvas>
+					</div>
+					<div class="v3-chart-container">
+						<canvas id="v3_daily_chart" width="360" height="180"></canvas>
+					</div>
+				</div>
+			</section>
+
+			<!-- ============ LICHT MIKA ============ -->
+			<section class="v3-card">
+				<div class="v3-card-title"><span>💡</span><span>Licht Mika</span></div>
+				<div class="v3-rows">
+					<div class="v3-room-row">
+						<span class="v3-room-name">Mika</span>
+						<span class="v3-room-controls">
+							<span class="v3-status-dot v3-status-dot--off" id="li_dot_13"></span>
+							<button class="v3-btn v3-btn--sm" type="button" data-var='"Lichtmerker Kind 3"' data-value="true">schalten</button>
+						</span>
+					</div>
+				</div>
+			</section>
+
+			<!-- ============ ROLLADEN MIKA ============ -->
+			<section class="v3-card">
+				<div class="v3-card-title"><span>🪟</span><span>Rolladen Mika</span></div>
+				<div class="v3-rows">
+					<div class="v3-room-row">
+						<span class="v3-room-name">Mika</span>
+						<span class="v3-btn-group">
+							<button class="v3-btn v3-btn--sm" type="button" data-var='"Rolladenmerker Mika auf"' data-value="true">hoch</button>
+							<button class="v3-btn v3-btn--sm" type="button" data-var='"Rolladenmerker Mika ab"' data-value="true">runter</button>
+						</span>
+					</div>
+				</div>
+			</section>
+
+		</div>
+	</div>
+
+	<script src="Script/tth_v3_api.js" type="text/javascript"></script>
+</body>
+
+</html>

indexNiko_17.htm

@@ -0,0 +1,70 @@
+<!DOCTYPE html>
+<html lang="de">
+
+<head>
+	<meta charset="utf-8" />
+	<meta name="viewport" content="width=device-width, initial-scale=1" />
+	<title>Niko – Zimmersteuerung</title>
+	<link href="formV3.css" rel="stylesheet" type="text/css" />
+</head>
+
+<body>
+	<div class="v3-page">
+		<div class="v3-grid">
+
+			<!-- ============ STROMZÄHLER ============ -->
+			<section class="v3-card v3-card--wide">
+				<div class="v3-card-title"><span>⚡</span><span>Stromzähler</span><span class="v3-status" id="api_status" style="margin-left:auto">verbinde…</span></div>
+				<div class="v3-strom-layout">
+					<div class="v3-gauge-container">
+						<canvas id="v3_gauge" width="360" height="180"></canvas>
+					</div>
+					<div class="v3-strom-values">
+						<div class="v3-info-item"><span class="v3-info-label">Bezug</span><span class="v3-info-value" id="sz_bezug">–</span></div>
+						<div class="v3-info-item"><span class="v3-info-label">Einspeisung</span><span class="v3-info-value" id="sz_einsp">–</span></div>
+						<div class="v3-info-item"><span class="v3-info-label">Wemos RC</span><span class="v3-info-value" id="sz_wemos">–</span></div>
+					</div>
+					<div class="v3-chart-container">
+						<canvas id="v3_power_chart" width="360" height="180"></canvas>
+					</div>
+					<div class="v3-chart-container">
+						<canvas id="v3_daily_chart" width="360" height="180"></canvas>
+					</div>
+				</div>
+			</section>
+
+			<!-- ============ LICHT NIKO ============ -->
+			<section class="v3-card">
+				<div class="v3-card-title"><span>💡</span><span>Licht Niko</span></div>
+				<div class="v3-rows">
+					<div class="v3-room-row">
+						<span class="v3-room-name">Niko</span>
+						<span class="v3-room-controls">
+							<span class="v3-status-dot v3-status-dot--off" id="li_dot_7"></span>
+							<button class="v3-btn v3-btn--sm" type="button" data-var='"Lichtmerker Niko"' data-value="true">schalten</button>
+						</span>
+					</div>
+				</div>
+			</section>
+
+			<!-- ============ ROLLADEN NIKO ============ -->
+			<section class="v3-card">
+				<div class="v3-card-title"><span>🪟</span><span>Rolladen Niko</span></div>
+				<div class="v3-rows">
+					<div class="v3-room-row">
+						<span class="v3-room-name">Niko</span>
+						<span class="v3-btn-group">
+							<button class="v3-btn v3-btn--sm" type="button" data-var='"Rolladenmerker Niko auf"' data-value="true">hoch</button>
+							<button class="v3-btn v3-btn--sm" type="button" data-var='"Rolladenmerker Niko ab"' data-value="true">runter</button>
+						</span>
+					</div>
+				</div>
+			</section>
+
+		</div>
+	</div>
+
+	<script src="Script/tth_v3_api.js" type="text/javascript"></script>
+</body>
+
+</html>

indexNoah_23.htm

@@ -0,0 +1,70 @@
+<!DOCTYPE html>
+<html lang="de">
+
+<head>
+	<meta charset="utf-8" />
+	<meta name="viewport" content="width=device-width, initial-scale=1" />
+	<title>Noah – Zimmersteuerung</title>
+	<link href="formV3.css" rel="stylesheet" type="text/css" />
+</head>
+
+<body>
+	<div class="v3-page">
+		<div class="v3-grid">
+
+			<!-- ============ STROMZÄHLER ============ -->
+			<section class="v3-card v3-card--wide">
+				<div class="v3-card-title"><span>⚡</span><span>Stromzähler</span><span class="v3-status" id="api_status" style="margin-left:auto">verbinde…</span></div>
+				<div class="v3-strom-layout">
+					<div class="v3-gauge-container">
+						<canvas id="v3_gauge" width="360" height="180"></canvas>
+					</div>
+					<div class="v3-strom-values">
+						<div class="v3-info-item"><span class="v3-info-label">Bezug</span><span class="v3-info-value" id="sz_bezug">–</span></div>
+						<div class="v3-info-item"><span class="v3-info-label">Einspeisung</span><span class="v3-info-value" id="sz_einsp">–</span></div>
+						<div class="v3-info-item"><span class="v3-info-label">Wemos RC</span><span class="v3-info-value" id="sz_wemos">–</span></div>
+					</div>
+					<div class="v3-chart-container">
+						<canvas id="v3_power_chart" width="360" height="180"></canvas>
+					</div>
+					<div class="v3-chart-container">
+						<canvas id="v3_daily_chart" width="360" height="180"></canvas>
+					</div>
+				</div>
+			</section>
+
+			<!-- ============ LICHT NOAH ============ -->
+			<section class="v3-card">
+				<div class="v3-card-title"><span>💡</span><span>Licht Noah</span></div>
+				<div class="v3-rows">
+					<div class="v3-room-row">
+						<span class="v3-room-name">Noah</span>
+						<span class="v3-room-controls">
+							<span class="v3-status-dot v3-status-dot--off" id="li_dot_11"></span>
+							<button class="v3-btn v3-btn--sm" type="button" data-var='"Lichtmerker Noah"' data-value="true">schalten</button>
+						</span>
+					</div>
+				</div>
+			</section>
+
+			<!-- ============ ROLLADEN NOAH ============ -->
+			<section class="v3-card">
+				<div class="v3-card-title"><span>🪟</span><span>Rolladen Noah</span></div>
+				<div class="v3-rows">
+					<div class="v3-room-row">
+						<span class="v3-room-name">Noah</span>
+						<span class="v3-btn-group">
+							<button class="v3-btn v3-btn--sm" type="button" data-var='"Rolladenmerker Noah auf"' data-value="true">hoch</button>
+							<button class="v3-btn v3-btn--sm" type="button" data-var='"Rolladenmerker Noah ab"' data-value="true">runter</button>
+						</span>
+					</div>
+				</div>
+			</section>
+
+		</div>
+	</div>
+
+	<script src="Script/tth_v3_api.js" type="text/javascript"></script>
+</body>
+
+</html>

indexV2.htm

@@ -0,0 +1,131 @@
+<!-- AWP_In_Variable Name='"Aufgang_Untergang".aktuelle_CPU_Zeit.YEAR' -->
+<!-- AWP_In_Variable Name='"Aufgang_Untergang".aktuelle_CPU_Zeit.MONTH' -->
+<!-- AWP_In_Variable Name='"Aufgang_Untergang".aktuelle_CPU_Zeit.DAY' -->
+<!-- AWP_In_Variable Name='"Aufgang_Untergang".aktuelle_CPU_Zeit.HOUR' -->
+<!-- AWP_In_Variable Name='"Aufgang_Untergang".aktuelle_CPU_Zeit.MINUTE' -->
+<!-- AWP_In_Variable Name='"Aufgang_Untergang".aktuelle_CPU_Zeit.SECOND' -->
+<!-- AWP_In_Variable Name='"Aufgang_Untergang".Aufgang.HOUR' -->
+<!-- AWP_In_Variable Name='"Aufgang_Untergang".Aufgang.MINUTE' -->
+<!-- AWP_In_Variable Name='"Aufgang_Untergang".Untergang.HOUR' -->
+<!-- AWP_In_Variable Name='"Aufgang_Untergang".Untergang.MINUTE' -->
+<!-- AWP_In_Variable Name='"Aufgang_Untergang".Aufgang_offset' -->
+<!-- AWP_In_Variable Name='"Aufgang_Untergang".Untergang_offset' -->
+
+<!-- AWP_In_Variable Name='"Türöffner Handy"' -->
+
+<!-- AWP_In_Variable Name='"Arduino Settimio".Garagentor 1' -->
+<!-- AWP_In_Variable Name='"Arduino Settimio".Garagentor 2' -->
+
+
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
+<html dir="ltr" xmlns="http://www.w3.org/1999/xhtml">
+
+<head>
+<title>Haussteuerung</title>
+<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
+<link href="form.css" rel="stylesheet" type="text/css" />
+<style type="text/css">
+.auto-style1 {
+	color: #FF0000;
+	font-family: "Arial";
+}
+.auto-style3 {
+	margin-right: 0px;
+}
+.auto-style5 {
+	font-family: "Arial";
+	font-size: x-large;
+	text-align: left;
+}
+
+.auto-style6 {
+	vertical-align: middle;
+}
+
+.auto-style7 {
+	text-align: center;
+}
+
+</style>
+</head>
+
+<body style="color: #00FF00; background-color: #000000;">
+	<div id="page_content">
+		<iframe id="frame_stromzaehler" name="frame_stromzaehler" src="stromzaehler.htm" style="width: 100%; min-height: 200px" scrolling="no"></iframe>
+		<iframe id="frame_licht" name="frame_licht" src="lichtV2.htm" style="width: 100%; min-height: 1200px" scrolling="no">
+			Der Browser unterstützt keine Inlineframes oder ist aktuell so konfiguriert, dass Inlineframes nicht angezeigt werden.
+		</iframe>
+		<iframe id="frame_rolladen" name="frame_rolladen" src="rolladen.htm" style="width: 100%; min-height: 1400px" class="auto-style3" scrolling="no">
+			Der Browser unterstützt keine Inlineframes oder ist aktuell so konfiguriert, dass Inlineframes nicht angezeigt werden.
+		</iframe>
+		<iframe id="frame_steckdosen" name="frame_steckdosen" src="steckdosenV2.htm" style="width: 100%; min-height: 1400px" class="auto-style3" scrolling="no">
+			Der Browser unterstützt keine Inlineframes oder ist aktuell so konfiguriert, dass Inlineframes nicht angezeigt werden.
+		</iframe>
+		<iframe id="frame_heizung" name="frame_heizung" src="heizungV2.htm" style="width: 100%; min-height: 800px" class="auto-style3" scrolling="no">
+			Der Browser unterstützt keine Inlineframes oder ist aktuell so konfiguriert, dass Inlineframes nicht angezeigt werden.
+		</iframe>
+
+		<h3 class="auto-style5">Haustür</h3>
+		<form action="" method="post">
+			<input style="height: 45px; width: 100px" type="submit" value="öffnen" />
+			<input name='"Türöffner Handy"' type="hidden" value="1" />
+		</form>
+
+		<h3 class="auto-style5">Garagentor</h3>
+		<form action="" method="post" style="display: inline-block; margin-right: 10px;">
+			<input style="height: 45px; width: 100px" type="submit" value="links" />
+			<input name='"Arduino Settimio".Garagentor 1' type="hidden" value="1" />
+		</form>
+		<form action="" method="post" style="display: inline-block;">
+			<input style="height: 45px; width: 100px" type="submit" value="rechts" />
+			<input name='"Arduino Settimio".Garagentor 2' type="hidden" value="1" />
+		</form>
+
+		<div id="clock">
+			<h3 class="auto-style5">Haussteuerung</h3>
+			<p class="auto-style5">
+				<span class="auto-style5" style="height: 32px">
+					:="Aufgang_Untergang".aktuelle_CPU_Zeit.DAY:-:="Aufgang_Untergang".aktuelle_CPU_Zeit.MONTH:-:="Aufgang_Untergang".aktuelle_CPU_Zeit.YEAR:
+					:="Aufgang_Untergang".aktuelle_CPU_Zeit.HOUR:::="Aufgang_Untergang".aktuelle_CPU_Zeit.MINUTE:
+					CPU Uhrzeit
+				</span>
+				<br />
+				<img class="auto-style6" height="40" src="images/aufgang.png" width="57" />
+				:="Aufgang_Untergang".Aufgang.HOUR:::="Aufgang_Untergang".Aufgang.MINUTE: Uhr
+				offset :="Aufgang_Untergang".Aufgang_offset:
+				<br />
+				<img class="auto-style6" height="40" src="images/untergang.png" width="57" />
+				:="Aufgang_Untergang".Untergang.HOUR:::="Aufgang_Untergang".Untergang.MINUTE: Uhr
+				offset :="Aufgang_Untergang".Untergang_offset:
+			</p>
+		</div>
+	</div>
+
+	<script type="text/javascript">
+		function resizeIframes() {
+			var iframes = document.querySelectorAll('iframe');
+			iframes.forEach(function(iframe) {
+				try {
+					var iframeDoc = iframe.contentWindow.document;
+					if (iframeDoc && iframeDoc.body) {
+						var height = iframeDoc.body.scrollHeight;
+						if (height > 0) {
+							iframe.style.height = height + 'px';
+						}
+					}
+				} catch(e) {
+					console.log('Iframe resize error:', e);
+				}
+			});
+		}
+
+		// Resize after iframes load
+		window.addEventListener('load', function() {
+			setTimeout(resizeIframes, 500);
+			setTimeout(resizeIframes, 1500);
+			setTimeout(resizeIframes, 3000);
+		});
+	</script>
+</body>
+
+</html>

indexV3.htm

@@ -0,0 +1,173 @@
+<!DOCTYPE html>
+<!-- NUR ZUR OPTIK-VORSCHAU OHNE SPS. Setzt feste Dummy-Werte per Inline-Script. -->
+<!-- Kein Polling, keine AWP-Platzhalter. Produktivseite ist indexV3.htm. -->
+<html lang="de">
+
+<head>
+	<meta charset="utf-8" />
+	<meta name="viewport" content="width=device-width, initial-scale=1" />
+	<title>Haussteuerung V3</title>
+	<link href="formV3.css" rel="stylesheet" type="text/css" />
+</head>
+
+	<body>
+	<div class="v3-page">
+
+		<div class="v3-grid">
+
+			<!-- ============ ZÄHLER ============ -->
+			<section class="v3-card v3-card--wide">
+				<div class="v3-card-title">
+					<span>⚡💧</span>
+					<span>Zähler</span>
+					<span class="v3-title-values" style="margin-left:auto">
+						<span class="v3-title-value" id="hdr_wtemp">–</span>
+						<span class="v3-title-value" id="hdr_wstand">–</span>
+						<span class="v3-title-value" id="hdr_wseit">–</span>
+						<span class="v3-title-value" id="hdr_sbezug">–</span>
+						<span class="v3-title-value" id="hdr_seinsp">–</span>
+					</span>
+					<span class="v3-status" id="api_status">verbinde…</span>
+				</div>
+
+				<!-- Stromzähler -->
+				<div class="v3-section-title">Strom</div>
+				<div class="v3-strom-layout">
+					<div class="v3-gauge-container">
+						<canvas id="v3_gauge" width="360" height="120"></canvas>
+					</div>
+					<div class="v3-strom-values">
+						<div class="v3-info-item"><span class="v3-info-label">Wemos RC</span><span class="v3-info-value" id="sz_wemos">–</span></div>
+					</div>
+					<div class="v3-chart-container">
+						<canvas id="v3_power_chart" width="360" height="180"></canvas>
+					</div>
+					<div class="v3-chart-container">
+						<canvas id="v3_daily_chart" width="360" height="180"></canvas>
+					</div>
+				</div>
+
+				<!-- Wasserzähler -->
+				<div class="v3-section-title" style="margin-top:18px;font-size:0.9rem">Wasser</div>
+				<div class="v3-water-layout">
+					<div class="v3-chart-container">
+						<canvas id="v3_water_chart" width="360" height="180"></canvas>
+					</div>
+				</div>
+			</section>
+
+			<!-- ============ LICHT ============ -->
+			<section class="v3-card">
+				<div class="v3-card-title"><span>💡</span><span>Licht</span></div>
+				<div class="v3-rows">
+					<div class="v3-room-row"><span class="v3-room-name">Küche</span><span class="v3-room-controls"><span class="v3-status-dot v3-status-dot--off" id="li_dot_1"></span><button class="v3-btn v3-btn--sm" type="button" data-var='"Lichtmerker Küche"' data-value="true">schalten</button></span></div>
+					<div class="v3-room-row"><span class="v3-room-name">Esszimmer</span><span class="v3-room-controls"><span class="v3-status-dot v3-status-dot--off" id="li_dot_2"></span><button class="v3-btn v3-btn--sm" type="button" data-var='"Lichtmerker Essen"' data-value="true">schalten</button></span></div>
+					<div class="v3-room-row"><span class="v3-room-name">Wohnzimmer 1</span><span class="v3-room-controls"><span class="v3-status-dot v3-status-dot--off" id="li_dot_3"></span><button class="v3-btn v3-btn--sm" type="button" data-var='"Lichtmerker Wohnen 1"' data-value="true">schalten</button></span></div>
+					<div class="v3-room-row"><span class="v3-room-name">Wohnzimmer 2</span><span class="v3-room-controls"><span class="v3-status-dot v3-status-dot--off" id="li_dot_4"></span><button class="v3-btn v3-btn--sm" type="button" data-var='"Lichtmerker Wohnen 2"' data-value="true">schalten</button></span></div>
+					<div class="v3-room-row"><span class="v3-room-name">Arbeitszimmer</span><span class="v3-room-controls"><span class="v3-status-dot v3-status-dot--off" id="li_dot_5"></span><button class="v3-btn v3-btn--sm" type="button" data-var='"Lichtmerker Arbeiten"' data-value="true">schalten</button></span></div>
+					<div class="v3-room-row"><span class="v3-room-name">Hauswirtschaftsraum</span><span class="v3-room-controls"><span class="v3-status-dot v3-status-dot--off" id="li_dot_6"></span><button class="v3-btn v3-btn--sm" type="button" data-var='"Lichtmerker HWR"' data-value="true">schalten</button></span></div>
+					<div class="v3-room-row"><span class="v3-room-name">Niko</span><span class="v3-room-controls"><span class="v3-status-dot v3-status-dot--off" id="li_dot_7"></span><button class="v3-btn v3-btn--sm" type="button" data-var='"Lichtmerker Niko"' data-value="true">schalten</button></span></div>
+					<div class="v3-room-row"><span class="v3-room-name">Dusche</span><span class="v3-room-controls"><span class="v3-status-dot v3-status-dot--off" id="li_dot_8"></span><button class="v3-btn v3-btn--sm" type="button" data-var='"Lichtmerker Dusche"' data-value="true">schalten</button></span></div>
+					<div class="v3-room-row"><span class="v3-room-name">Abstellraum</span><span class="v3-room-controls"><span class="v3-status-dot v3-status-dot--off" id="li_dot_9"></span><button class="v3-btn v3-btn--sm" type="button" data-var='"Lichtmerker Abstellraum"' data-value="true">schalten</button></span></div>
+					<div class="v3-room-row"><span class="v3-room-name">Schlafzimmer</span><span class="v3-room-controls"><span class="v3-status-dot v3-status-dot--off" id="li_dot_10"></span><button class="v3-btn v3-btn--sm" type="button" data-var='"Lichtmerker Eltern"' data-value="true">schalten</button></span></div>
+					<div class="v3-room-row"><span class="v3-room-name">Noah</span><span class="v3-room-controls"><span class="v3-status-dot v3-status-dot--off" id="li_dot_11"></span><button class="v3-btn v3-btn--sm" type="button" data-var='"Lichtmerker Noah"' data-value="true">schalten</button></span></div>
+					<div class="v3-room-row"><span class="v3-room-name">Badezimmer</span><span class="v3-room-controls"><span class="v3-status-dot v3-status-dot--off" id="li_dot_12"></span><button class="v3-btn v3-btn--sm" type="button" data-var='"Lichtmerker Bad"' data-value="true">schalten</button></span></div>
+					<div class="v3-room-row"><span class="v3-room-name">Mika</span><span class="v3-room-controls"><span class="v3-status-dot v3-status-dot--off" id="li_dot_13"></span><button class="v3-btn v3-btn--sm" type="button" data-var='"Lichtmerker Kind 3"' data-value="true">schalten</button></span></div>
+					<div class="v3-room-row"><span class="v3-room-name">Kickertaste</span><span class="v3-room-controls"><span class="v3-status-dot v3-status-dot--off" id="li_dot_14"></span><button class="v3-btn v3-btn--sm" type="button" data-var='"Kickertaste"' data-value="true">schalten</button></span></div>
+				</div>
+				<div class="v3-section-title" style="margin-top:14px">WLED Bad</div>
+				<div class="v3-wled">
+					<div class="v3-wled-row"><button class="v3-btn v3-btn--sm" type="button" data-var='"wled_DB".Befehl' data-value="1">Umschalten</button></div>
+					<div class="v3-wled-row"><span class="v3-wled-label">Helligkeit</span><input class="v3-slider" id="wled_bright" type="range" min="1" max="255" value="180"><button class="v3-btn v3-btn--sm v3-btn--primary" type="button" data-wled="bright">schreiben</button></div>
+					<div class="v3-wled-row"><span class="v3-wled-label">Farbe</span><input class="v3-color" id="wled_color" type="color" value="#ff0000"><button class="v3-btn v3-btn--sm v3-btn--primary" type="button" data-wled="color">schreiben</button></div>
+				</div>
+			</section>
+
+			<!-- ============ HEIZUNG ============ -->
+			<section class="v3-card v3-card--wide">
+				<div class="v3-card-title"><span>🔥</span><span>Heizung</span></div>
+				<div class="v3-heat-head"><span>Raum</span><span>Aktuell</span><span>heizt</span><span>IST min/max</span><span>SOLL min</span><span>SOLL max</span></div>
+				<div class="v3-rows">
+					<div class="v3-heat-row"><span class="v3-room-name">Wohnzimmer</span><span class="v3-temp v3-temp--normal" id="he_temp_1">–</span><span class="v3-status-dot v3-status-dot--off" id="he_dot_1"></span><span class="v3-muted" id="he_ist_1">–/–</span><span class="v3-heat-set"><input class="v3-input" id="he_min_1" placeholder="min"><button class="v3-btn v3-btn--sm v3-btn--primary" type="button" data-write-input="he_min_1" data-var='"Einstellungen".Heizung."Heizung Wohnen min"' data-kind="min">OK</button></span><span class="v3-heat-set"><input class="v3-input" id="he_max_1" placeholder="max"><button class="v3-btn v3-btn--sm v3-btn--primary" type="button" data-write-input="he_max_1" data-var='"Einstellungen".Heizung."Heizung Wohnen max"' data-kind="max">OK</button></span></div>
+					<div class="v3-heat-row"><span class="v3-room-name">Arbeitszimmer</span><span class="v3-temp v3-temp--normal" id="he_temp_2">–</span><span class="v3-status-dot v3-status-dot--off" id="he_dot_2"></span><span class="v3-muted" id="he_ist_2">–/–</span><span class="v3-heat-set"><input class="v3-input" id="he_min_2" placeholder="min"><button class="v3-btn v3-btn--sm v3-btn--primary" type="button" data-write-input="he_min_2" data-var='"Einstellungen".Heizung."Heizung Arbeiten min"' data-kind="min">OK</button></span><span class="v3-heat-set"><input class="v3-input" id="he_max_2" placeholder="max"><button class="v3-btn v3-btn--sm v3-btn--primary" type="button" data-write-input="he_max_2" data-var='"Einstellungen".Heizung."Heizung Arbeiten max"' data-kind="max">OK</button></span></div>
+					<div class="v3-heat-row"><span class="v3-room-name">HWR</span><span class="v3-temp v3-temp--normal" id="he_temp_3">–</span><span class="v3-status-dot v3-status-dot--off" id="he_dot_3"></span><span class="v3-muted" id="he_ist_3">–/–</span><span class="v3-heat-set"><input class="v3-input" id="he_min_3" placeholder="min"><button class="v3-btn v3-btn--sm v3-btn--primary" type="button" data-write-input="he_min_3" data-var='"Einstellungen".Heizung."Heizung HWR min"' data-kind="min">OK</button></span><span class="v3-heat-set"><input class="v3-input" id="he_max_3" placeholder="max"><button class="v3-btn v3-btn--sm v3-btn--primary" type="button" data-write-input="he_max_3" data-var='"Einstellungen".Heizung."Heizung HWR max"' data-kind="max">OK</button></span></div>
+					<div class="v3-heat-row"><span class="v3-room-name">Bad oben</span><span class="v3-temp v3-temp--normal" id="he_temp_4">–</span><span class="v3-status-dot v3-status-dot--off" id="he_dot_4"></span><span class="v3-muted" id="he_ist_4">–/–</span><span class="v3-heat-set"><input class="v3-input" id="he_min_4" placeholder="min"><button class="v3-btn v3-btn--sm v3-btn--primary" type="button" data-write-input="he_min_4" data-var='"Einstellungen".Heizung."Heizung Bad min"' data-kind="min">OK</button></span><span class="v3-heat-set"><input class="v3-input" id="he_max_4" placeholder="max"><button class="v3-btn v3-btn--sm v3-btn--primary" type="button" data-write-input="he_max_4" data-var='"Einstellungen".Heizung."Heizung Bad max"' data-kind="max">OK</button></span></div>
+					<div class="v3-heat-row"><span class="v3-room-name">Eltern</span><span class="v3-temp v3-temp--normal" id="he_temp_5">–</span><span class="v3-status-dot v3-status-dot--off" id="he_dot_5"></span><span class="v3-muted" id="he_ist_5">–/–</span><span class="v3-heat-set"><input class="v3-input" id="he_min_5" placeholder="min"><button class="v3-btn v3-btn--sm v3-btn--primary" type="button" data-write-input="he_min_5" data-var='"Einstellungen".Heizung."Heizung Eltern min"' data-kind="min">OK</button></span><span class="v3-heat-set"><input class="v3-input" id="he_max_5" placeholder="max"><button class="v3-btn v3-btn--sm v3-btn--primary" type="button" data-write-input="he_max_5" data-var='"Einstellungen".Heizung."Heizung Eltern max"' data-kind="max">OK</button></span></div>
+					<div class="v3-heat-row"><span class="v3-room-name">Noah</span><span class="v3-temp v3-temp--normal" id="he_temp_6">–</span><span class="v3-status-dot v3-status-dot--off" id="he_dot_6"></span><span class="v3-muted" id="he_ist_6">–/–</span><span class="v3-heat-set"><input class="v3-input" id="he_min_6" placeholder="min"><button class="v3-btn v3-btn--sm v3-btn--primary" type="button" data-write-input="he_min_6" data-var='"Einstellungen".Heizung."Heizung Kind1 min"' data-kind="min">OK</button></span><span class="v3-heat-set"><input class="v3-input" id="he_max_6" placeholder="max"><button class="v3-btn v3-btn--sm v3-btn--primary" type="button" data-write-input="he_max_6" data-var='"Einstellungen".Heizung."Heizung Kind1 max"' data-kind="max">OK</button></span></div>
+					<div class="v3-heat-row"><span class="v3-room-name">Mika</span><span class="v3-temp v3-temp--normal" id="he_temp_7">–</span><span class="v3-status-dot v3-status-dot--off" id="he_dot_7"></span><span class="v3-muted" id="he_ist_7">–/–</span><span class="v3-heat-set"><input class="v3-input" id="he_min_7" placeholder="min"><button class="v3-btn v3-btn--sm v3-btn--primary" type="button" data-write-input="he_min_7" data-var='"Einstellungen".Heizung."Heizung Kind2 min"' data-kind="min">OK</button></span><span class="v3-heat-set"><input class="v3-input" id="he_max_7" placeholder="max"><button class="v3-btn v3-btn--sm v3-btn--primary" type="button" data-write-input="he_max_7" data-var='"Einstellungen".Heizung."Heizung Kind2 max"' data-kind="max">OK</button></span></div>
+					<div class="v3-heat-row"><span class="v3-room-name">Niko</span><span class="v3-temp v3-temp--normal" id="he_temp_8">–</span><span class="v3-status-dot v3-status-dot--off" id="he_dot_8"></span><span class="v3-muted" id="he_ist_8">–/–</span><span class="v3-heat-set"><input class="v3-input" id="he_min_8" placeholder="min"><button class="v3-btn v3-btn--sm v3-btn--primary" type="button" data-write-input="he_min_8" data-var='"Einstellungen".Heizung."Heizung Gäste min"' data-kind="min">OK</button></span><span class="v3-heat-set"><input class="v3-input" id="he_max_8" placeholder="max"><button class="v3-btn v3-btn--sm v3-btn--primary" type="button" data-write-input="he_max_8" data-var='"Einstellungen".Heizung."Heizung Gäste max"' data-kind="max">OK</button></span></div>
+					<div class="v3-heat-row"><span class="v3-room-name">Dusche Gäste</span><span class="v3-temp v3-temp--normal" id="he_temp_9">–</span><span class="v3-status-dot v3-status-dot--off" id="he_dot_9"></span><span class="v3-muted" id="he_ist_9">–/–</span><span class="v3-heat-set"><input class="v3-input" id="he_min_9" placeholder="min"><button class="v3-btn v3-btn--sm v3-btn--primary" type="button" data-write-input="he_min_9" data-var='"Einstellungen".Heizung."Heizung Dusche min"' data-kind="min">OK</button></span><span class="v3-heat-set"><input class="v3-input" id="he_max_9" placeholder="max"><button class="v3-btn v3-btn--sm v3-btn--primary" type="button" data-write-input="he_max_9" data-var='"Einstellungen".Heizung."Heizung Dusche max"' data-kind="max">OK</button></span></div>
+				</div>
+			</section>
+
+			<!-- ============ ROLLADEN ============ -->
+			<section class="v3-card">
+				<div class="v3-card-title"><span>🪟</span><span>Rollladen</span></div>
+				<div class="v3-rows">
+					<div class="v3-room-row"><span class="v3-room-name">alle Rollladen</span><span class="v3-btn-group"><button class="v3-btn v3-btn--sm" type="button" data-vars='"Rolladenmerker Küc l auf","Rolladenmerker Küc r auf","Rolladenmerker Ess l auf","Rolladenmerker Ess m auf","Rolladenmerker Ess r auf","Rolladenmerker Woh l auf","Rolladenmerker Woh r auf","Rolladenmerker Wohtü auf"' data-value="true">Wochenende morgens</button><button class="v3-btn v3-btn--sm" type="button" data-var='"Rolladen alle auf"' data-value="true">hoch</button><button class="v3-btn v3-btn--sm" type="button" data-var='"Rolladen alle ab"' data-value="true">runter</button></span></div>
+					<div class="v3-room-row"><span class="v3-room-name">Küche</span><span class="v3-btn-group"><button class="v3-btn v3-btn--sm" type="button" data-var='"Rolladenmerker Küc l auf"' data-value="true">li ↑</button><button class="v3-btn v3-btn--sm" type="button" data-var='"Rolladenmerker Küc l ab"' data-value="true">li ↓</button><button class="v3-btn v3-btn--sm" type="button" data-var='"Rolladenmerker Küc r auf"' data-value="true">re ↑</button><button class="v3-btn v3-btn--sm" type="button" data-var='"Rolladenmerker Küc r ab"' data-value="true">re ↓</button></span></div>
+					<div class="v3-room-row"><span class="v3-room-name">Esszimmer</span><span class="v3-btn-group"><button class="v3-btn v3-btn--sm" type="button" data-var='"Rolladenmerker Ess l auf"' data-value="true">li ↑</button><button class="v3-btn v3-btn--sm" type="button" data-var='"Rolladenmerker Ess l ab"' data-value="true">li ↓</button><button class="v3-btn v3-btn--sm" type="button" data-var='"Rolladenmerker Ess m auf"' data-value="true">mi ↑</button><button class="v3-btn v3-btn--sm" type="button" data-var='"Rolladenmerker Ess m ab"' data-value="true">mi ↓</button><button class="v3-btn v3-btn--sm" type="button" data-var='"Rolladenmerker Ess r auf"' data-value="true">re ↑</button><button class="v3-btn v3-btn--sm" type="button" data-var='"Rolladenmerker Ess r ab"' data-value="true">re ↓</button></span></div>
+					<div class="v3-room-row"><span class="v3-room-name">Wohnzimmer</span><span class="v3-btn-group"><button class="v3-btn v3-btn--sm" type="button" data-var='"Rolladenmerker Woh l auf"' data-value="true">li ↑</button><button class="v3-btn v3-btn--sm" type="button" data-var='"Rolladenmerker Woh l ab"' data-value="true">li ↓</button><button class="v3-btn v3-btn--sm" type="button" data-var='"Rolladenmerker Woh r auf"' data-value="true">re ↑</button><button class="v3-btn v3-btn--sm" type="button" data-var='"Rolladenmerker Woh r ab"' data-value="true">re ↓</button><button class="v3-btn v3-btn--sm" type="button" data-var='"Rolladenmerker Wohtü auf"' data-value="true">Tür ↑</button><button class="v3-btn v3-btn--sm" type="button" data-var='"Rolladenmerker Wohtü ab"' data-value="true">Tür ↓</button></span></div>
+					<div class="v3-room-row"><span class="v3-room-name">Arbeitszimmer</span><span class="v3-btn-group"><button class="v3-btn v3-btn--sm" type="button" data-var='"Rolladenmerker Arbei auf"' data-value="true">hoch</button><button class="v3-btn v3-btn--sm" type="button" data-var='"Rolladenmerker Arbei ab"' data-value="true">runter</button></span></div>
+					<div class="v3-room-row"><span class="v3-room-name">Hauswirtschaftsraum</span><span class="v3-btn-group"><button class="v3-btn v3-btn--sm" type="button" data-var='"Rolladenmerker HWR auf"' data-value="true">hoch</button><button class="v3-btn v3-btn--sm" type="button" data-var='"Rolladenmerker HWR ab"' data-value="true">runter</button></span></div>
+					<div class="v3-room-row"><span class="v3-room-name">Niko</span><span class="v3-btn-group"><button class="v3-btn v3-btn--sm" type="button" data-var='"Rolladenmerker Niko auf"' data-value="true">hoch</button><button class="v3-btn v3-btn--sm" type="button" data-var='"Rolladenmerker Niko ab"' data-value="true">runter</button></span></div>
+					<div class="v3-room-row"><span class="v3-room-name">Dusche</span><span class="v3-btn-group"><button class="v3-btn v3-btn--sm" type="button" data-var='"Rolladenmerker Dusche au"' data-value="true">hoch</button><button class="v3-btn v3-btn--sm" type="button" data-var='"Rolladenmerker Dusche ab"' data-value="true">runter</button></span></div>
+					<div class="v3-room-row"><span class="v3-room-name">Schlafzimmer</span><span class="v3-btn-group"><button class="v3-btn v3-btn--sm" type="button" data-var='"Rolladenmerker Elter auf"' data-value="true">hoch</button><button class="v3-btn v3-btn--sm" type="button" data-var='"Rolladenmerker Elter ab"' data-value="true">runter</button></span></div>
+					<div class="v3-room-row"><span class="v3-room-name">Noah</span><span class="v3-btn-group"><button class="v3-btn v3-btn--sm" type="button" data-var='"Rolladenmerker Noah auf"' data-value="true">hoch</button><button class="v3-btn v3-btn--sm" type="button" data-var='"Rolladenmerker Noah ab"' data-value="true">runter</button></span></div>
+					<div class="v3-room-row"><span class="v3-room-name">Badezimmer</span><span class="v3-btn-group"><button class="v3-btn v3-btn--sm" type="button" data-var='"Rolladenmerker Bad auf"' data-value="true">hoch</button><button class="v3-btn v3-btn--sm" type="button" data-var='"Rolladenmerker Bad ab"' data-value="true">runter</button></span></div>
+					<div class="v3-room-row"><span class="v3-room-name">Mika</span><span class="v3-btn-group"><button class="v3-btn v3-btn--sm" type="button" data-var='"Rolladenmerker Mika auf"' data-value="true">hoch</button><button class="v3-btn v3-btn--sm" type="button" data-var='"Rolladenmerker Mika ab"' data-value="true">runter</button></span></div>
+					<div class="v3-room-row"><span class="v3-room-name">Urlaub <span class="v3-status-dot v3-status-dot--off" id="roll_urlaub_dot"></span></span><span class="v3-btn-group"><button class="v3-btn v3-btn--sm v3-btn--on" type="button" data-var='"Jalousie_DB".Urlaub' data-value="true">an</button><button class="v3-btn v3-btn--sm v3-btn--off" type="button" data-var='"Jalousie_DB".Urlaub' data-value="false">aus</button></span></div>
+				</div>
+			</section>
+
+			<!-- ============ STECKDOSEN ============ -->
+			<section class="v3-card">
+				<div class="v3-card-title"><span>🔌</span><span>Steckdosen</span></div>
+				<div class="v3-rows">
+					<div class="v3-room-row"><span class="v3-room-name">Deele</span><span class="v3-room-controls"><span class="v3-status-dot v3-status-dot--off" id="sd_dot_1"></span><span class="v3-btn-group"><button class="v3-btn v3-btn--sm v3-btn--on" type="button" data-var='"Steckdose Deele Garder"' data-value="false">an</button><button class="v3-btn v3-btn--sm v3-btn--off" type="button" data-var='"Steckdose Deele Garder"' data-value="true">aus</button></span></span></div>
+					<div class="v3-room-row"><span class="v3-room-name">Wohnzimmer</span><span class="v3-room-controls"><span class="v3-status-dot v3-status-dot--off" id="sd_dot_2"></span><span class="v3-btn-group"><button class="v3-btn v3-btn--sm v3-btn--on" type="button" data-var='"Steckdose Wohnen"' data-value="false">an</button><button class="v3-btn v3-btn--sm v3-btn--off" type="button" data-var='"Steckdose Wohnen"' data-value="true">aus</button></span></span></div>
+					<div class="v3-room-row"><span class="v3-room-name">Esszimmer</span><span class="v3-room-controls"><span class="v3-status-dot v3-status-dot--off" id="sd_dot_3"></span><span class="v3-btn-group"><button class="v3-btn v3-btn--sm v3-btn--on" type="button" data-var='"Steckdose Essen"' data-value="false">an</button><button class="v3-btn v3-btn--sm v3-btn--off" type="button" data-var='"Steckdose Essen"' data-value="true">aus</button></span></span></div>
+					<div class="v3-room-row"><span class="v3-room-name">Arbeitszimmer</span><span class="v3-room-controls"><span class="v3-status-dot v3-status-dot--off" id="sd_dot_4"></span><span class="v3-btn-group"><button class="v3-btn v3-btn--sm v3-btn--on" type="button" data-var='"Steckdose Arbeiten"' data-value="false">an</button><button class="v3-btn v3-btn--sm v3-btn--off" type="button" data-var='"Steckdose Arbeiten"' data-value="true">aus</button></span></span></div>
+					<div class="v3-room-row"><span class="v3-room-name">Noah</span><span class="v3-room-controls"><span class="v3-status-dot v3-status-dot--off" id="sd_dot_5"></span><span class="v3-btn-group"><button class="v3-btn v3-btn--sm v3-btn--on" type="button" data-var='"Steckdose Kind 1"' data-value="false">an</button><button class="v3-btn v3-btn--sm v3-btn--off" type="button" data-var='"Steckdose Kind 1"' data-value="true">aus</button></span></span></div>
+					<div class="v3-room-row"><span class="v3-room-name">Mika</span><span class="v3-room-controls"><span class="v3-status-dot v3-status-dot--off" id="sd_dot_6"></span><span class="v3-btn-group"><button class="v3-btn v3-btn--sm v3-btn--on" type="button" data-var='"Steckdose Kind 2"' data-value="false">an</button><button class="v3-btn v3-btn--sm v3-btn--off" type="button" data-var='"Steckdose Kind 2"' data-value="true">aus</button></span></span></div>
+					<div class="v3-room-row"><span class="v3-room-name">Niko</span><span class="v3-room-controls"><span class="v3-status-dot v3-status-dot--off" id="sd_dot_7"></span><span class="v3-btn-group"><button class="v3-btn v3-btn--sm v3-btn--on" type="button" data-var='"Steckdose Gäste"' data-value="false">an</button><button class="v3-btn v3-btn--sm v3-btn--off" type="button" data-var='"Steckdose Gäste"' data-value="true">aus</button></span></span></div>
+					<div class="v3-room-row"><span class="v3-room-name">Eltern</span><span class="v3-room-controls"><span class="v3-status-dot v3-status-dot--off" id="sd_dot_8"></span><span class="v3-btn-group"><button class="v3-btn v3-btn--sm v3-btn--on" type="button" data-var='"Steckdose Eltern"' data-value="false">an</button><button class="v3-btn v3-btn--sm v3-btn--off" type="button" data-var='"Steckdose Eltern"' data-value="true">aus</button></span></span></div>
+					<div class="v3-section-title" style="margin-top:10px">Funksteckdosen</div>
+					<div class="v3-room-row"><span class="v3-room-name">Funksteckdose 1</span><span class="v3-btn-group"><button class="v3-btn v3-btn--sm v3-btn--on" type="button" data-var='"Arduino Settimio"."Funksteckdose 1 an"' data-value="true">an</button><button class="v3-btn v3-btn--sm v3-btn--off" type="button" data-var='"Arduino Settimio"."Funksteckdose 1 aus"' data-value="true">aus</button></span></div>
+					<div class="v3-room-row"><span class="v3-room-name">Saunalampe</span><span class="v3-btn-group"><button class="v3-btn v3-btn--sm v3-btn--on" type="button" data-var='"Arduino Settimio"."KDY 1 an"' data-value="true">an</button><button class="v3-btn v3-btn--sm v3-btn--off" type="button" data-var='"Arduino Settimio"."KDY 1 aus"' data-value="true">aus</button></span></div>
+					<div class="v3-room-row"><span class="v3-room-name">KDY2</span><span class="v3-btn-group"><button class="v3-btn v3-btn--sm v3-btn--on" type="button" data-var='"Arduino Settimio"."KDY 2 an"' data-value="true">an</button><button class="v3-btn v3-btn--sm v3-btn--off" type="button" data-var='"Arduino Settimio"."KDY 2 aus"' data-value="true">aus</button></span></div>
+					<div class="v3-room-row"><span class="v3-room-name">Poolpumpe</span><span class="v3-room-controls"><span class="v3-btn-group"><button class="v3-btn v3-btn--sm v3-btn--on" type="button" data-var='"Arduino Settimio"."Funksteckdose 4 an"' data-value="true">an</button><button class="v3-btn v3-btn--sm v3-btn--off" type="button" data-var='"Arduino Settimio"."Funksteckdose 4 aus"' data-value="true">aus</button></span></span></div>
+					<div class="v3-pool-row">
+						<div class="v3-pool-bar"><div class="v3-pool-bar-fill" id="sd_pool_bar"></div><span class="v3-pool-bar-label" id="sd_pool_bar_label">– / –</span></div>
+						<div class="v3-pool-set"><span class="v3-pool-set-label">SOLL min</span><input class="v3-input" id="sd_pool_max_input" type="number" min="0" placeholder="min"><button class="v3-btn v3-btn--sm v3-btn--primary" type="button" data-write-input="sd_pool_max_input" data-pool-max="1" data-var='"Funksteckdosen_DB"."Poolpumpe min Laufzeit/Tag"'>OK</button></div>
+					</div>
+				</div>
+			</section>
+
+			<!-- ============ HAUS ============ -->
+			<section class="v3-card">
+				<div class="v3-card-title"><span>🚪</span><span>Haus</span></div>
+				<div class="v3-rows">
+					<div class="v3-room-row"><span class="v3-room-name">Haustür</span><span class="v3-btn-group"><button class="v3-btn v3-btn--primary" type="button" data-var='"Türöffner Handy"' data-value="true">öffnen</button></span></div>
+					<div class="v3-room-row"><span class="v3-room-name">Garagentor</span><span class="v3-btn-group"><button class="v3-btn v3-btn--sm" type="button" data-var='"Arduino Settimio"."Garagentor 1"' data-value="true">links</button><button class="v3-btn v3-btn--sm" type="button" data-var='"Arduino Settimio"."Garagentor 2"' data-value="true">rechts</button></span></div>
+				</div>
+			</section>
+
+			<!-- ============ UHR / SONNE ============ -->
+			<section class="v3-card">
+				<div class="v3-card-title"><span>🕐</span><span>Uhrzeit</span></div>
+				<div class="v3-clock">
+					<div class="v3-clock-date" id="clock_date">--.--.----</div>
+					<div class="v3-clock-time" id="clock_time">--:--:--</div>
+					<div class="v3-sun-row"><img src="images/aufgang.png" height="40" width="57" alt="Aufgang"><span class="v3-sun-text" id="sun_up">--:-- Uhr</span></div>
+					<div class="v3-sun-row"><img src="images/untergang.png" height="40" width="57" alt="Untergang"><span class="v3-sun-text" id="sun_down">--:-- Uhr</span></div>
+				</div>
+			</section>
+
+		</div>
+	</div>
+
+	<script src="Script/tth_v3_api.js" type="text/javascript"></script>
+</body>
+
+</html>

indexV4.htm

@@ -0,0 +1,175 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+	<meta charset="utf-8" />
+	<meta name="viewport" content="width=device-width, initial-scale=1" />
+	<title>HAUS-BRÜCKE V4</title>
+	<link href="formV4.css" rel="stylesheet" type="text/css" />
+</head>
+<body>
+
+	<!-- Boot-Sequence -->
+	<div class="v4-boot" id="v4_boot">
+		<div class="v4-boot-inner">
+			<div class="v4-boot-logo">◢ HAUS-BRÜCKE SYSTEM V4.0 ◣</div>
+			<div class="v4-boot-line"><span>VERBINDE ZUR SPS</span><span class="v4-boot-status" id="boot_sps">…</span></div>
+			<div class="v4-boot-line"><span>LADE ENERGIE-MODUL</span><span class="v4-boot-status" id="boot_energie">…</span></div>
+			<div class="v4-boot-line"><span>LADE KOMMANDO-MODUL</span><span class="v4-boot-status" id="boot_kommando">…</span></div>
+			<div class="v4-boot-line"><span>LADE STATUS-MODUL</span><span class="v4-boot-status" id="boot_status">…</span></div>
+			<div class="v4-boot-bar"><div class="v4-boot-bar-fill" id="boot_bar"></div></div>
+			<div class="v4-boot-done" id="boot_done">SYSTEM ONLINE</div>
+		</div>
+	</div>
+
+	<!-- Scanline-Overlay -->
+	<div class="v4-scanlines" id="v4_scanlines"></div>
+
+	<div class="v4-page" id="v4_page">
+
+		<!-- ============ HEADER ============ -->
+		<header class="v4-header">
+			<div class="v4-header-logo">◢ HAUS-BRÜCKE</div>
+			<div class="v4-header-clock">
+				<span class="v4-clock-time" id="clock_time">--:--:--</span>
+				<span class="v4-clock-date" id="clock_date">--.--.----</span>
+			</div>
+			<div class="v4-header-sun">
+				<span class="v4-sun-item" title="Sonnenaufgang">☀ <span id="sun_up">--:--</span></span>
+				<span class="v4-sun-item" title="Sonnenuntergang">☾ <span id="sun_down">--:--</span></span>
+			</div>
+			<div class="v4-header-status">
+				<span class="v4-status-orb" id="api_status_orb"></span>
+				<span class="v4-status-text" id="api_status">verbinde…</span>
+				<button class="v4-btn v4-btn--icon" id="scan_toggle" title="Scanlines umschalten">▦</button>
+			</div>
+		</header>
+
+		<!-- ============ HAUPTGRID ============ -->
+		<div class="v4-grid">
+
+			<!-- ===== ZONE 1: ENERGIE ===== -->
+			<section class="v4-zone v4-zone--energy">
+				<div class="v4-zone-title"><span class="v4-zone-icon">⚡</span> ENERGIE</div>
+
+				<div class="v4-gauge-wrap">
+					<canvas id="v4_gauge" width="360" height="200"></canvas>
+				</div>
+
+				<div class="v4-energy-stats">
+					<div class="v4-stat"><span class="v4-stat-label">Bezug</span><span class="v4-stat-value" id="sz_bezug">–</span></div>
+					<div class="v4-stat"><span class="v4-stat-label">Einspeisung</span><span class="v4-stat-value" id="sz_einsp">–</span></div>
+					<div class="v4-stat"><span class="v4-stat-label">Leistung</span><span class="v4-stat-value" id="sz_leist">–</span></div>
+					<div class="v4-stat"><span class="v4-stat-label">Heute</span><span class="v4-stat-value" id="sz_tag">–</span></div>
+				</div>
+
+				<div class="v4-chart-wrap">
+					<canvas id="v4_power_chart" width="360" height="180"></canvas>
+				</div>
+				<div class="v4-wemos" id="sz_wemos">–</div>
+
+				<div class="v4-chart-wrap">
+					<canvas id="v4_daily_chart" width="360" height="180"></canvas>
+				</div>
+
+				<div class="v4-water">
+					<div class="v4-water-item"><span class="v4-water-label">Wasser</span><span class="v4-water-value" id="hdr_wtemp">–</span></div>
+					<div class="v4-water-item"><span class="v4-water-label">Stand</span><span class="v4-water-value" id="hdr_wstand">–</span></div>
+					<div class="v4-water-item"><span class="v4-water-label">seit Ablesung</span><span class="v4-water-value" id="hdr_wseit">–</span></div>
+				</div>
+				<div class="v4-chart-wrap">
+					<canvas id="v4_water_chart" width="360" height="180"></canvas>
+				</div>
+			</section>
+
+			<!-- ===== ZONE 2: KOMMANDO ===== -->
+			<section class="v4-zone v4-zone--command">
+				<div class="v4-zone-title"><span class="v4-zone-icon">🎛</span> KOMMANDO</div>
+
+				<div class="v4-sub-title">LICHT</div>
+				<div class="v4-tiles" id="v4_light_tiles"></div>
+
+				<div class="v4-sub-title">WLED BAD</div>
+				<div class="v4-wled">
+					<div class="v4-wled-row">
+						<button class="v4-btn" type="button" data-var='"wled_DB".Befehl' data-value="1">Umschalten</button>
+					</div>
+					<div class="v4-wled-row">
+						<span class="v4-wled-label">Helligkeit</span>
+						<input class="v4-slider" id="wled_bright" type="range" min="1" max="255" value="180">
+						<button class="v4-btn v4-btn--primary" type="button" data-wled="bright">schreiben</button>
+					</div>
+					<div class="v4-wled-row">
+						<span class="v4-wled-label">Farbe</span>
+						<input class="v4-color" id="wled_color" type="color" value="#ff0000">
+						<button class="v4-btn v4-btn--primary" type="button" data-wled="color">schreiben</button>
+					</div>
+				</div>
+
+			<div class="v4-sub-title">ROLLADEN</div>
+			<div class="v4-rolladen">
+				<div class="v4-roll-row">
+					<span class="v4-roll-name">alle Rollladen</span>
+					<span class="v4-btn-group">
+						<button class="v4-btn v4-btn--sm" type="button" data-vars='"Rolladenmerker Küc l auf","Rolladenmerker Küc r auf","Rolladenmerker Ess l auf","Rolladenmerker Ess m auf","Rolladenmerker Ess r auf","Rolladenmerker Woh l auf","Rolladenmerker Woh r auf","Rolladenmerker Wohtü auf"' data-value="true">Wochenende morgens</button>
+						<button class="v4-btn v4-btn--sm v4-btn--on" type="button" data-var='"Rolladen alle auf"' data-value="true">hoch</button>
+						<button class="v4-btn v4-btn--sm v4-btn--off" type="button" data-var='"Rolladen alle ab"' data-value="true">runter</button>
+					</span>
+				</div>
+			</div>
+			<div class="v4-rolladen" id="v4_rolladen"></div>
+
+				<div class="v4-sub-title">STECKDOSEN</div>
+				<div class="v4-sockets" id="v4_sockets"></div>
+
+				<div class="v4-sub-title">FUNKSTECKDOSEN</div>
+				<div class="v4-funk">
+					<div class="v4-funk-row"><span class="v4-funk-name">Funksteckdose 1</span><span class="v4-btn-group"><button class="v4-btn v4-btn--on" type="button" data-funk="Funksteckdose 1" data-var='"Arduino Settimio"."Funksteckdose 1 an"' data-value="true">an</button><button class="v4-btn v4-btn--off" type="button" data-funk="Funksteckdose 1" data-var='"Arduino Settimio"."Funksteckdose 1 aus"' data-value="true">aus</button></span></div>
+					<div class="v4-funk-row"><span class="v4-funk-name">Saunalampe</span><span class="v4-btn-group"><button class="v4-btn v4-btn--on" type="button" data-funk="Saunalampe" data-var='"Arduino Settimio"."KDY 1 an"' data-value="true">an</button><button class="v4-btn v4-btn--off" type="button" data-funk="Saunalampe" data-var='"Arduino Settimio"."KDY 1 aus"' data-value="true">aus</button></span></div>
+					<div class="v4-funk-row"><span class="v4-funk-name">KDY2</span><span class="v4-btn-group"><button class="v4-btn v4-btn--on" type="button" data-funk="KDY2" data-var='"Arduino Settimio"."KDY 2 an"' data-value="true">an</button><button class="v4-btn v4-btn--off" type="button" data-funk="KDY2" data-var='"Arduino Settimio"."KDY 2 aus"' data-value="true">aus</button></span></div>
+					<div class="v4-funk-row"><span class="v4-funk-name">Poolpumpe</span><span class="v4-btn-group"><button class="v4-btn v4-btn--on" type="button" data-funk="Poolpumpe" data-var='"Arduino Settimio"."Funksteckdose 4 an"' data-value="true">an</button><button class="v4-btn v4-btn--off" type="button" data-funk="Poolpumpe" data-var='"Arduino Settimio"."Funksteckdose 4 aus"' data-value="true">aus</button></span></div>
+				</div>
+
+				<div class="v4-sub-title">HAUS</div>
+				<div class="v4-house">
+					<button class="v4-btn v4-btn--primary v4-btn--big" type="button" data-var='"Türöffner Handy"' data-value="true">🚪 Haustür öffnen</button>
+					<button class="v4-btn v4-btn--big" type="button" data-var='"Arduino Settimio"."Garagentor 1"' data-value="true">🚗 Garage links</button>
+					<button class="v4-btn v4-btn--big" type="button" data-var='"Arduino Settimio"."Garagentor 2"' data-value="true">🚗 Garage rechts</button>
+				</div>
+			</section>
+
+			<!-- ===== ZONE 3: STATUS ===== -->
+			<section class="v4-zone v4-zone--status">
+				<div class="v4-zone-title"><span class="v4-zone-icon">📊</span> STATUS</div>
+
+				<div class="v4-sub-title">HEIZUNG</div>
+				<div class="v4-heat" id="v4_heat"></div>
+
+				<div class="v4-sub-title">POOLPUMPE</div>
+				<div class="v4-pool">
+					<div class="v4-pool-bar"><div class="v4-pool-bar-fill" id="sd_pool_bar"></div><span class="v4-pool-bar-label" id="sd_pool_bar_label">– / –</span></div>
+					<div class="v4-pool-set">
+						<span class="v4-pool-set-label">SOLL min</span>
+						<input class="v4-input" id="sd_pool_max_input" type="number" min="0" placeholder="min">
+						<button class="v4-btn v4-btn--primary" type="button" data-write-input="sd_pool_max_input" data-pool-max="1" data-var='"Funksteckdosen_DB"."Poolpumpe min Laufzeit/Tag"'>OK</button>
+					</div>
+				</div>
+
+				<div class="v4-sub-title">URLAUB</div>
+				<div class="v4-urlaub">
+					<span class="v4-urlaub-indicator" id="roll_urlaub_dot"></span>
+					<span class="v4-urlaub-text" id="roll_urlaub_text">AUS</span>
+					<button class="v4-btn v4-btn--on" type="button" data-var='"Jalousie_DB".Urlaub' data-value="true">an</button>
+					<button class="v4-btn v4-btn--off" type="button" data-var='"Jalousie_DB".Urlaub' data-value="false">aus</button>
+				</div>
+			</section>
+
+		</div>
+
+	</div>
+
+	<!-- Toast-Container -->
+	<div class="v4-toasts" id="v4_toasts"></div>
+
+	<script src="Script/tth_v4.js" type="text/javascript"></script>
+</body>
+</html>

lichtV2.htm

@@ -0,0 +1,305 @@
+<!-- AWP_In_Variable Name='"Lichtmerker Küche"' -->
+<!-- AWP_In_Variable Name='"Lichtmerker Essen"' -->
+<!-- AWP_In_Variable Name='"Lichtmerker Wohnen 1"' -->
+<!-- AWP_In_Variable Name='"Lichtmerker Wohnen 2"' -->
+<!-- AWP_In_Variable Name='"Lichtmerker HWR"' -->
+<!-- AWP_In_Variable Name='"Lichtmerker Arbeiten"' -->
+<!-- AWP_In_Variable Name='"Lichtmerker Kind 3"' -->
+<!-- AWP_In_Variable Name='"Lichtmerker Dusche"' -->
+<!-- AWP_In_Variable Name='"Lichtmerker Abstellraum"' -->
+<!-- AWP_In_Variable Name='"Lichtmerker Eltern"' -->
+<!-- AWP_In_Variable Name='"Lichtmerker Noah"' -->
+<!-- AWP_In_Variable Name='"Lichtmerker Niko"' -->
+<!-- AWP_In_Variable Name='"Lichtmerker Bad"' -->
+<!-- AWP_In_Variable Name='"Kickertaste"' -->
+<!-- AWP_In_Variable Name='"wled_DB".Helligkeit' -->
+<!-- AWP_In_Variable Name='"wled_DB".Befehl' -->
+<!-- AWP_In_Variable Name='"wled_DB".RGB_hex' -->
+
+
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
+<html dir="ltr" xmlns="http://www.w3.org/1999/xhtml">
+
+<head>
+<title>TTh</title>
+<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
+<link href="form.css" rel="stylesheet" type="text/css" />
+<style type="text/css">
+.auto-style1 {
+	color: #FF0000;
+	font-family: "Arial";
+}
+.auto-style4 {
+	font-family: "Arial";
+	font-size: x-large;
+	text-align: left;
+}
+.auto-style5 {
+	font-family: "Arial";
+	font-size: x-large;
+	text-align: center;
+}
+.auto-style6 {
+	color: #000000;
+	font-size: xx-small;
+}
+
+</style>
+
+<script src="Script/tth_script.js" type="text/javascript">	</script>
+
+</head>
+
+<body style="color: #00FF00; background-color: #000000">
+
+<div id="masthead">
+</div>
+<div id="top_nav">
+</div>
+<div id="container">
+	
+	<div id="page_content">
+		<div class="ui-card">
+			<table border="1" align="left" class="ui-table">
+				<tr>
+					<td class="auto-style1">Küche</td>
+					<td>
+						<form action="" method="post">
+							<button class="ui-iconbtn" type="submit">
+							<img id="leuchtet_icon1" class="ui-icon" src="images/lampe0.jpg" height="50" width="50" />
+							<input name='"Lichtmerker Küche"' type="hidden" value="1">
+							</button>
+						</form>
+					</td>
+				</tr>
+				<tr>
+					<td class="auto-style1">Esszimmer</td>
+					<td>
+						<form action="" method="post">
+							<button class="ui-iconbtn" type="submit">
+							<img id="leuchtet_icon2" class="ui-icon" src="images/lampe0.jpg" height="50" width="50" />
+							<input name='"Lichtmerker Essen"' type="hidden" value="1">
+							</button>
+						</form>
+					</td>
+				</tr>
+
+				<tr>
+					<td class="auto-style1">Wohnzimmer</td>
+					<td>
+						<form action="" method="post">
+							<button class="ui-iconbtn" type="submit">
+							<img id="leuchtet_icon3" class="ui-icon" src="images/lampe0.jpg" height="50" width="50" />
+							<input name='"Lichtmerker Wohnen 1"' type="hidden" value="1">
+							</button>
+						</form>
+						<form action="" method="post">
+							<button class="ui-iconbtn" type="submit">
+							<img id="leuchtet_icon4" class="ui-icon" src="images/lampe0.jpg" height="50" width="50" />
+							<input name='"Lichtmerker Wohnen 2"' type="hidden" value="1">
+							</button>
+						</form>
+					</td>
+					</tr>
+									<tr>
+					<td class="auto-style1">Arbeitszimmer</td>
+					<td>
+						<form action="" method="post">
+							<button class="ui-iconbtn" type="submit">
+							<img id="leuchtet_icon5" class="ui-icon" src="images/lampe0.jpg" height="50" width="50" />
+							<input name='"Lichtmerker Arbeiten"' type="hidden" value="1">
+							</button>
+						</form>
+					</td>
+				</tr>
+
+				<tr>
+					<td class="auto-style1">Hauswirtschaftsraum</td>
+					<td>
+						<form action="" method="post">
+							<button class="ui-iconbtn" type="submit">
+							<img id="leuchtet_icon6" class="ui-icon" src="images/lampe0.jpg" height="50" width="50" />
+							<input name='"Lichtmerker HWR"' type="hidden" value="1">
+							</button>
+						</form>
+					</td>
+				</tr>
+					
+				<tr>
+					<td class="auto-style1">Niko</td>
+					<td>
+						<form action="" method="post">
+							<button class="ui-iconbtn" type="submit">
+							<img id="leuchtet_icon7" class="ui-icon" src="images/lampe0.jpg" height="50" width="50" />
+							<input name='"Lichtmerker Niko"' type="hidden" value="1">
+							</button>
+						</form>
+					</td>
+				</tr>
+	
+				<tr>
+					<td class="auto-style1">Dusche</td>
+					<td>
+						<form action="" method="post">
+							<button class="ui-iconbtn" type="submit">
+							<img id="leuchtet_icon8" class="ui-icon" src="images/lampe0.jpg" height="50" width="50" />
+							<input name='"Lichtmerker Dusche"' type="hidden" value="1">
+							</button>
+						</form>
+					</td>
+				</tr>
+
+				<tr>
+					<td class="auto-style1">Abstellraum</td>
+					<td>
+						<form action="" method="post">
+							<button class="ui-iconbtn" type="submit">
+							<img id="leuchtet_icon9" class="ui-icon" src="images/lampe0.jpg" height="50" width="50" />
+							<input name='"Lichtmerker Abstellraum"' type="hidden" value="1">
+							</button>
+						</form>
+					</td>
+				</tr>
+
+				<tr>
+					<td class="auto-style1">Schalfzimmer</td>
+					<td>
+						<form action="" method="post">
+							<button class="ui-iconbtn" type="submit">
+							<img id="leuchtet_icon10" class="ui-icon" src="images/lampe0.jpg" height="50" width="50" />
+							<input name='"Lichtmerker Eltern"' type="hidden" value="1">
+							</button>
+						</form>
+					</td>
+				</tr>
+
+				<tr>
+					<td class="auto-style1">Noah</td>
+					<td>
+						<form action="" method="post">
+							<button class="ui-iconbtn" type="submit">
+							<img id="leuchtet_icon11" class="ui-icon" src="images/lampe0.jpg" height="50" width="50" />
+							<input name='"Lichtmerker Noah"' type="hidden" value="1">
+							</button>
+						</form>
+					</td>
+				</tr>
+
+				<tr>
+					<td>
+					<a href="http://192.168.0.113" class="auto-style1">Badezimmer</a>
+					</td>
+					<td>
+						<form action="" method="post">
+							<button class="ui-iconbtn" type="submit">
+							<img id="leuchtet_icon12" class="ui-icon" src="images/lampe0.jpg" height="50" width="50" />
+							<input name='"Lichtmerker Bad"' type="hidden" value="1">
+							</button>
+						</form>
+					</td>
+					<td>
+						<form action="" method="post">
+							<button class="ui-iconbtn" type="submit">
+							<img class="ui-icon" src="images/FX_149.gif" height="50" width="50" />
+							<input name='"wled_DB".Befehl' type="hidden" value="1">
+							</button>
+						</form>
+					</td>
+					<td>
+						<form action="" method="post">
+							<input type="range" id="helligkeit" name='"wled_DB".Helligkeit' min="1" max="255" /><br><br>
+							<input name='"wled_DB".Befehl' type="hidden" value="4">
+							<input type="submit" value="schreiben" class="auto-style2 ui-btn ui-btn--primary"></td>
+						</form>
+					</td>
+					<td>
+						<form action="" method="post">
+							<input type="color" id="farbe" name='"wled_DB".RGB_hex' value="#ff0000"><br><br>
+							<input name='"wled_DB".Befehl' type="hidden" value="5">
+							<input type="submit" value="schreiben" class="auto-style2 ui-btn ui-btn--primary"></td>
+						</form>
+					</td>
+				</tr>
+
+				<tr>
+					<td class="auto-style1">Mika</td>
+					<td>
+						<form action="" method="post">
+							<button class="ui-iconbtn" type="submit">
+							<img id="leuchtet_icon13" class="ui-icon" src="images/lampe0.jpg" height="50" width="50" />
+							<input name='"Lichtmerker Kind 3"' type="hidden" value="1">
+							</button>
+						</form>
+					</td>
+				</tr>
+				
+				<tr>
+					<td class="auto-style1">Kickertaste</td>
+					<td>
+						<form action="" method="post">
+							<button class="ui-iconbtn" type="submit">
+							<img id="leuchtet_icon14" class="ui-icon" src="images/lampe0.jpg" height="50" width="50" />
+							<input name='"Kickertaste"' type="hidden" value="1">
+							</button>
+						</form>
+					</td>
+				</tr>
+			</table>
+		</div>
+	</div>
+</div>
+<div id="footer">
+</div>
+
+<div id="OutputArea" style="position:fixed;clip:rect(0,0,0,0);overflow:hidden;"></div>
+
+<script type="text/javascript">
+function showDataTable()
+{
+	var xmlhttp;
+	if (window.XMLHttpRequest) {
+		// code fuer IE7+, Firefox, Chrome, Opera, Safari
+		xmlhttp = new XMLHttpRequest();
+	} else {
+		// code fuer IE6, IE5
+		xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
+	}
+
+	xmlhttp.open("GET", "licht_state.html", true);
+
+	xmlhttp.onreadystatechange = function()
+	{
+		if (xmlhttp.readyState == 4 && xmlhttp.status == 200)
+		{
+			var output = document.getElementById("OutputArea");
+			if (output) {
+				output.innerHTML = xmlhttp.responseText;
+			}
+
+			for (var i = 1; i <= 14; i++) {
+				var el = document.getElementById('leuchtetx' + i);
+				if (!el) { continue; }
+				var status = el.innerText;
+				leuchtet_icon(('leuchtet_icon' + i), status);
+			}
+
+			setTimeout(refreshOutputArea, 500);
+		}
+	};
+	xmlhttp.send(null);
+}
+
+function refreshOutputArea()
+{
+	showDataTable();
+}
+
+window.onload = function()
+{
+	refreshOutputArea();
+};
+</script>
+
+</body>
+
+</html>

licht_state.html

@@ -0,0 +1,15 @@
+<p id="leuchtetx1"><span class="auto-style6">:="Licht Küche":</span>
+<p id="leuchtetx2"><span class="auto-style6">:="Licht Essen":</span>
+<p id="leuchtetx3"><span class="auto-style6">:="Licht Wohnen 1":</span>
+<p id="leuchtetx4"><span class="auto-style6">:="Licht Wohnen 2":</span>
+<p id="leuchtetx5"><span class="auto-style6">:="Licht Arbeiten":</span>
+<p id="leuchtetx6"><span class="auto-style6">:="Licht HWR":</span>
+<p id="leuchtetx7"><span class="auto-style6">:="Licht Niko":</span>
+<p id="leuchtetx8"><span class="auto-style6">:="Licht Dusche":</span>
+<p id="leuchtetx9"><span class="auto-style6">:="Licht Abstellraum":</span>
+<p id="leuchtetx10"><span class="auto-style6">:="Licht Eltern":</span>
+<p id="leuchtetx11"><span class="auto-style6">:="Licht Noah":</span>
+<p id="leuchtetx12"><span class="auto-style6">:="Licht Bad 2":</span>
+<p id="leuchtetx13"><span class="auto-style6">:="Licht Kind 3":</span>
+<p id="leuchtetx14"><span class="auto-style6">:="Licht Deele":</span>
+</p>

rolladen.htm

@@ -0,0 +1,337 @@
+<!-- AWP_In_Variable Name='"Rolladenmerker Ess l auf"' -->
+<!-- AWP_In_Variable Name='"Rolladenmerker Ess l ab"' -->
+<!-- AWP_In_Variable Name='"Rolladenmerker Woh l auf"' -->
+<!-- AWP_In_Variable Name='"Rolladenmerker Woh l ab"' -->
+<!-- AWP_In_Variable Name='"Rolladenmerker Woh r auf"' -->
+<!-- AWP_In_Variable Name='"Rolladenmerker Woh r ab"' -->
+<!-- AWP_In_Variable Name='"Rolladenmerker Arbei auf"' -->
+<!-- AWP_In_Variable Name='"Rolladenmerker Arbei ab"' -->
+<!-- AWP_In_Variable Name='"Rolladenmerker HWR auf"' -->
+<!-- AWP_In_Variable Name='"Rolladenmerker HWR ab"' -->
+<!-- AWP_In_Variable Name='"Rolladenmerker Küc l auf"' -->
+<!-- AWP_In_Variable Name='"Rolladenmerker Küc l ab"' -->
+<!-- AWP_In_Variable Name='"Rolladenmerker Elter auf"' -->
+<!-- AWP_In_Variable Name='"Rolladenmerker Elter ab"' -->
+<!-- AWP_In_Variable Name='"Rolladenmerker Noah auf"' -->
+<!-- AWP_In_Variable Name='"Rolladenmerker Noah ab"' -->
+<!-- AWP_In_Variable Name='"Rolladenmerker Bad auf"' -->
+<!-- AWP_In_Variable Name='"Rolladenmerker Bad ab"' -->
+<!-- AWP_In_Variable Name='"Rolladenmerker Ess m auf"' -->
+<!-- AWP_In_Variable Name='"Rolladenmerker Ess m ab"' -->
+<!-- AWP_In_Variable Name='"Rolladenmerker Ess r auf"' -->
+<!-- AWP_In_Variable Name='"Rolladenmerker Ess r ab"' -->
+<!-- AWP_In_Variable Name='"Rolladenmerker Niko ab"' -->
+<!-- AWP_In_Variable Name='"Rolladenmerker Niko auf"' -->
+<!-- AWP_In_Variable Name='"Rolladenmerker Küc r auf"' -->
+<!-- AWP_In_Variable Name='"Rolladenmerker Küc r ab"' -->
+<!-- AWP_In_Variable Name='"Rolladenmerker Mika auf"' -->
+<!-- AWP_In_Variable Name='"Rolladenmerker Mika ab"' -->
+<!-- AWP_In_Variable Name='"Rolladenmerker Wohtü ab"' -->
+<!-- AWP_In_Variable Name='"Rolladenmerker Wohtü auf"' -->
+<!-- AWP_In_Variable Name='"Rolladenmerker Dusche au"' -->
+<!-- AWP_In_Variable Name='"Rolladenmerker Dusche ab"' -->
+<!-- AWP_In_Variable Name='"Rolladen alle auf"' -->
+<!-- AWP_In_Variable Name='"Rolladen alle ab"' -->
+
+<!-- AWP_In_Variable Name='"Jalousie_DB".Urlaub' -->
+
+
+
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
+<html dir="ltr" xmlns="http://www.w3.org/1999/xhtml">
+
+<head>
+	<title>TTh</title>
+	<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
+	<link href="form.css" rel="stylesheet" type="text/css" />
+	<style type="text/css">
+		.auto-style1 {
+			color: #FF0000;
+			font-family: "Arial";
+		}
+
+		.auto-style4 {
+			font-family: "Arial";
+			font-size: x-large;
+			text-align: left;
+		}
+
+		.auto-style5 {
+			font-family: "Arial";
+			font-size: x-large;
+			text-align: center;
+		}
+
+		.auto-style6 {
+			color: #000000;
+			font-size: xx-small;
+		}
+	</style>
+
+	<script src="Script/tth_script.js" type="text/javascript">	</script>
+
+</head>
+
+<body style="color: #00FF00; background-color: #000000">
+
+	<div id="masthead">
+	</div>
+	<div id="top_nav">
+	</div>
+	<div id="container">
+
+		<div id="page_content">
+			<div class="ui-card">
+				<table border="1" align="left" class="ui-table">
+					<tr>
+						<td class="auto-style1">alle Rolladen</td>
+						<td>
+							<form action="" method="post">
+								<input style="height: 45px; width: 100px" type="submit" value="hoch">
+								<input name='"Rolladen alle auf"' type="hidden" value="1">
+							</form>
+							<form action="" method="post">
+								<input style="height: 45px; width: 100px" type="submit" value="runter">
+								<input name='"Rolladen alle ab"' type="hidden" value="1">
+							</form>
+						</td>
+					</tr>
+					<tr>
+						<td class="auto-style1">Küche</td>
+						<td>
+							<form action="" method="post">
+								<input style="height: 45px; width: 100px" type="submit" value="links hoch">
+								<input name='"Rolladenmerker Küc l auf"' type="hidden" value="1">
+							</form>
+							<form action="" method="post">
+								<input style="height: 45px; width: 100px" type="submit" value="links runter">
+								<input name='"Rolladenmerker Küc l ab"' type="hidden" value="1">
+							</form>
+						<td>
+							<form action="" method="post">
+								<input style="height: 45px; width: 100px" type="submit" value="rechts hoch">
+								<input name='"Rolladenmerker Küc r auf"' type="hidden" value="1">
+							</form>
+							<form action="" method="post">
+								<input style="height: 45px; width: 100px" type="submit" value="rechts runter">
+								<input name='"Rolladenmerker Küc r ab"' type="hidden" value="1">
+							</form>
+						</td>
+						</td>
+					</tr>
+					<tr>
+						<td class="auto-style1">Esszimmer</td>
+						<td>
+							<form action="" method="post">
+								<input style="height: 45px; width: 100px" type="submit" value="links hoch">
+								<input name='"Rolladenmerker Ess l auf"' type="hidden" value="1">
+							</form>
+							<form action="" method="post">
+								<input style="height: 45px; width: 100px" type="submit" value="links runter">
+								<input name='"Rolladenmerker Ess l ab"' type="hidden" value="1">
+							</form>
+						<td>
+							<form action="" method="post">
+								<input style="height: 45px; width: 100px" type="submit" value="Mitte hoch">
+								<input name='"Rolladenmerker Ess m auf"' type="hidden" value="1">
+							</form>
+							<form action="" method="post">
+								<input style="height: 45px; width: 100px" type="submit" value="Mitte runter">
+								<input name='"Rolladenmerker Ess m ab"' type="hidden" value="1">
+							</form>
+						</td>
+						<td>
+							<form action="" method="post">
+								<input style="height: 45px; width: 100px" type="submit" value="rechts hoch">
+								<input name='"Rolladenmerker Ess r auf"' type="hidden" value="1">
+							</form>
+							<form action="" method="post">
+								<input style="height: 45px; width: 100px" type="submit" value="rechts runter">
+								<input name='"Rolladenmerker Ess r ab"' type="hidden" value="1">
+							</form>
+						</td>
+						</td>
+					</tr>
+
+					<tr>
+						<td class="auto-style1">Wohnzimmer</td>
+						<td>
+							<form action="" method="post">
+								<input style="height: 45px; width: 100px" type="submit" value="links hoch">
+								<input name='"Rolladenmerker Woh l auf"' type="hidden" value="1">
+							</form>
+							<form action="" method="post">
+								<input style="height: 45px; width: 100px" type="submit" value="links runter">
+								<input name='"Rolladenmerker Woh l ab"' type="hidden" value="1">
+							</form>
+						<td>
+							<form action="" method="post">
+								<input style="height: 45px; width: 100px" type="submit" value="rechts hoch">
+								<input name='"Rolladenmerker Woh r auf"' type="hidden" value="1">
+							</form>
+							<form action="" method="post">
+								<input style="height: 45px; width: 100px" type="submit" value="rechts runter">
+								<input name='"Rolladenmerker Woh r ab"' type="hidden" value="1">
+							</form>
+						</td>
+						<td>
+							<form action="" method="post">
+								<input style="height: 45px; width: 100px" type="submit" value="Tür hoch">
+								<input name='"Rolladenmerker Wohtü auf"' type="hidden" value="1">
+							</form>
+							<form action="" method="post">
+								<input style="height: 45px; width: 100px" type="submit" value="Tür runter">
+								<input name='"Rolladenmerker Wohtü ab"' type="hidden" value="1">
+							</form>
+						</td>
+						</td>
+					</tr>
+					<tr>
+						<td class="auto-style1">Arbeitszimmer</td>
+						<td>
+							<form action="" method="post">
+								<input style="height: 45px; width: 100px" type="submit" value="hoch">
+								<input name='"Rolladenmerker Arbei auf"' type="hidden" value="1">
+							</form>
+							<form action="" method="post">
+								<input style="height: 45px; width: 100px" type="submit" value="runter">
+								<input name='"Rolladenmerker Arbei ab"' type="hidden" value="1">
+							</form>
+						</td>
+					</tr>
+
+					<tr>
+						<td class="auto-style1">Hauswirtschaftsraum</td>
+						<td>
+							<form action="" method="post">
+								<input style="height: 45px; width: 100px" type="submit" value="hoch">
+								<input name='"Rolladenmerker HWR auf"' type="hidden" value="1">
+							</form>
+							<form action="" method="post">
+								<input style="height: 45px; width: 100px" type="submit" value="runter">
+								<input name='"Rolladenmerker HWR ab"' type="hidden" value="1">
+							</form>
+						</td>
+					</tr>
+
+					<tr>
+						<td class="auto-style1">Niko</td>
+						<td>
+							<form action="" method="post">
+								<input style="height: 45px; width: 100px" type="submit" value="hoch">
+								<input name='"Rolladenmerker Niko auf"' type="hidden" value="1">
+							</form>
+							<form action="" method="post">
+								<input style="height: 45px; width: 100px" type="submit" value="runter">
+								<input name='"Rolladenmerker Niko ab"' type="hidden" value="1">
+							</form>
+						</td>
+					</tr>
+
+					<tr>
+						<td class="auto-style1">Dusche</td>
+						<td>
+							<form action="" method="post">
+								<input style="height: 45px; width: 100px" type="submit" value="hoch">
+								<input name='"Rolladenmerker Dusche au"' type="hidden" value="1">
+							</form>
+							<form action="" method="post">
+								<input style="height: 45px; width: 100px" type="submit" value="runter">
+								<input name='"Rolladenmerker Dusche ab"' type="hidden" value="1">
+							</form>
+						</td>
+					</tr>
+
+					<tr>
+						<td class="auto-style1">Schlafzimmer</td>
+						<td>
+							<form action="" method="post">
+								<input style="height: 45px; width: 100px" type="submit" value="hoch">
+								<input name='"Rolladenmerker Elter auf"' type="hidden" value="1">
+							</form>
+							<form action="" method="post">
+								<input style="height: 45px; width: 100px" type="submit" value="runter">
+								<input name='"Rolladenmerker Elter ab"' type="hidden" value="1">
+							</form>
+						</td>
+					</tr>
+
+					<tr>
+						<td class="auto-style1">Noah</td>
+						<td>
+							<form action="" method="post">
+								<input style="height: 45px; width: 100px" type="submit" value="hoch">
+								<input name='"Rolladenmerker Noah auf"' type="hidden" value="1">
+							</form>
+							<form action="" method="post">
+								<input style="height: 45px; width: 100px" type="submit" value="runter">
+								<input name='"Rolladenmerker Noah ab"' type="hidden" value="1">
+							</form>
+						</td>
+					</tr>
+
+					<tr>
+						<td class="auto-style1">Badezimmer</td>
+						<td>
+							<form action="" method="post">
+								<input style="height: 45px; width: 100px" type="submit" value="hoch">
+								<input name='"Rolladenmerker Bad auf"' type="hidden" value="1">
+							</form>
+							<form action="" method="post">
+								<input style="height: 45px; width: 100px" type="submit" value="runter">
+								<input name='"Rolladenmerker Bad ab"' type="hidden" value="1">
+							</form>
+						</td>
+					</tr>
+
+					<tr>
+						<td class="auto-style1">Mika</td>
+						<td>
+							<form action="" method="post">
+								<input style="height: 45px; width: 100px" type="submit" value="hoch">
+								<input name='"Rolladenmerker Mika auf"' type="hidden" value="1">
+							</form>
+							<form action="" method="post">
+								<input style="height: 45px; width: 100px" type="submit" value="runter">
+								<input name='"Rolladenmerker Mika ab"' type="hidden" value="1">
+							</form>
+						</td>
+					</tr>
+
+					<tr>
+						<td class="auto-style1">Urlaub</td>
+						<td>
+							<form action="" method="post">
+								<input style="height: 45px; width: 100px" type="submit" value="an">
+								<input name='"Jalousie_DB".Urlaub' type="hidden" value="1">
+							</form>
+							<form action="" method="post">
+								<input style="height: 45px; width: 100px" type="submit" value="aus">
+								<input name='"Jalousie_DB".Urlaub' type="hidden" value="0">
+							</form>
+						</td>
+						<td class="auto-style5" style="width: 160px">
+							<img id="urlaub_icon1" height="66" width="100">
+						</td>
+					</tr>
+				</table>
+			</div>
+		</div>
+	</div>
+	<div id="footer">
+	</div>
+
+	<p id="urlaubx1"><span class="auto-style6">:="Jalousie_DB".Urlaub:</span>
+
+		<div id="OutputArea" style="position:fixed;clip:rect(0,0,0,0);overflow:hidden;"></div>
+
+		<script>
+
+			var status = document.getElementById('urlaubx1').innerText;
+			urlaub_icon(('urlaub_icon1'), status);
+
+		</script>
+
+</body>
+
+</html>

steckdosenV2.htm

@@ -0,0 +1,307 @@
+<!-- AWP_In_Variable Name='"Steckdose Deele Garder"' -->
+<!-- AWP_In_Variable Name='"Steckdose Wohnen"' -->
+<!-- AWP_In_Variable Name='"Steckdose Essen"' -->
+<!-- AWP_In_Variable Name='"Steckdose Arbeiten"' -->
+<!-- AWP_In_Variable Name='"Steckdose Kind 1"' -->
+<!-- AWP_In_Variable Name='"Steckdose Bad / WC"' -->
+<!-- AWP_In_Variable Name='"Steckdose Kind 2"' -->
+<!-- AWP_In_Variable Name='"Steckdose Eltern"' -->
+<!-- AWP_In_Variable Name='"Steckdose Gäste"' -->
+<!-- AWP_In_Variable Name='"Steckdose Dusche Abstell"' -->
+<!-- AWP_In_Variable Name='"Arduino Settimio"."Funksteckdose 1 an"' -->
+<!-- AWP_In_Variable Name='"Arduino Settimio"."Funksteckdose 1 aus"' -->
+<!-- AWP_In_Variable Name='"Arduino Settimio"."KDY 1 an"' -->
+<!-- AWP_In_Variable Name='"Arduino Settimio"."KDY 1 aus"' -->
+<!-- AWP_In_Variable Name='"Arduino Settimio"."KDY 2 an"' -->
+<!-- AWP_In_Variable Name='"Arduino Settimio"."KDY 2 aus"' -->
+<!-- AWP_In_Variable Name='"Arduino Settimio"."Funksteckdose 4 an"' -->
+<!-- AWP_In_Variable Name='"Arduino Settimio"."Funksteckdose 4 aus"' -->
+
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
+<html dir="ltr" xmlns="http://www.w3.org/1999/xhtml">
+
+<head>
+<title>TTh</title>
+<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
+<link href="form.css" rel="stylesheet" type="text/css" />
+<style type="text/css">
+.auto-style1 {
+	color: #FF0000;
+	font-family: "Arial";
+}
+.auto-style4 {
+	font-family: "Arial";
+	font-size: x-large;
+	text-align: left;
+}
+.auto-style5 {
+	font-family: "Arial";
+	font-size: x-large;
+	text-align: center;
+}
+.auto-style6 {
+	color: #000000;
+	font-size: xx-small;
+}
+
+</style>
+
+<script src="Script/tth_script.js" type="text/javascript">	</script>
+
+</head>
+
+<body style="color: #00FF00; background-color: #000000">
+
+<div id="masthead">
+</div>
+<div id="top_nav">
+</div>
+<div id="container">
+	
+	<div id="page_content">
+		<div class="ui-card">
+			<table border="1" align="left" class="ui-table">
+				<tr>
+					<td class="auto-style1">Deele</td>
+					<td>
+						<form action="" method="post">
+							<input class="ui-btn ui-btn--off" style="height: 45px; width: 100px" type="submit" value="aus">
+							<input name='"Steckdose Deele Garder"' type="hidden" value=1>
+						</form>
+						<form action="" method="post">
+							<input class="ui-btn ui-btn--on" style="height: 45px; width: 100px" type="submit" value="an">
+							<input name='"Steckdose Deele Garder"' type="hidden" value=0>
+						</form>
+					</td>
+					<td class="auto-style5" style="width: 160px">
+					<img id="strom_icon1" class="ui-icon" height="75" width="37" />					
+					</td>
+				</tr>
+				<tr>
+					<td class="auto-style1">Wohnzimmer</td>
+					<td>
+						<form action="" method="post">
+							<input class="ui-btn ui-btn--off" style="height: 45px; width: 100px" type="submit" value="aus">
+							<input name='"Steckdose Wohnen"' type="hidden" value="1">
+						</form>
+						<form action="" method="post">
+							<input class="ui-btn ui-btn--on" style="height: 45px; width: 100px" type="submit" value="an">
+							<input name='"Steckdose Wohnen"' type="hidden" value="0">
+						</form>
+					</td>
+					<td class="auto-style5" style="width: 160px">
+					<img id="strom_icon2" class="ui-icon" height="75" width="37" />					
+					</td>
+				</tr>
+
+				<tr>
+					<td class="auto-style1">Esszimmer</td>
+					<td>
+						<form action="" method="post">
+							<input class="ui-btn ui-btn--off" style="height: 45px; width: 100px" type="submit" value="aus">
+							<input name='"Steckdose Essen"' type="hidden" value="1">
+						</form>
+						<form action="" method="post">
+							<input class="ui-btn ui-btn--on" style="height: 45px; width: 100px" type="submit" value="an">
+							<input name='"Steckdose Essen"' type="hidden" value="0">
+						</form>
+					</td>
+					<td class="auto-style5" style="width: 160px">
+					<img id="strom_icon3" class="ui-icon" height="75" width="37" /><br>
+					</td>
+				</tr>
+				
+				<tr>
+					<td class="auto-style1">Arbeitszimmer</td>
+					<td>
+						<form action="" method="post">
+							<input class="ui-btn ui-btn--off" style="height: 45px; width: 100px" type="submit" value="aus">
+							<input name='"Steckdose Arbeiten"' type="hidden" value="1">
+						</form>
+						<form action="" method="post">
+							<input class="ui-btn ui-btn--on" style="height: 45px; width: 100px" type="submit" value="an">
+							<input name='"Steckdose Arbeiten"' type="hidden" value="0">
+						</form>
+					</td>
+					<td class="auto-style5" style="width: 160px">
+					<img id="strom_icon4" class="ui-icon" height="75" width="37" />					
+					</td>
+				</tr>
+
+				<tr>
+					<td class="auto-style1">Steckdose Noah</td>
+					<td>
+						<form action="" method="post">
+							<input class="ui-btn ui-btn--off" style="height: 45px; width: 100px" type="submit" value="aus">
+							<input name='"Steckdose Kind 1"' type="hidden" value="1">
+						</form>
+						<form action="" method="post">
+							<input class="ui-btn ui-btn--on" style="height: 45px; width: 100px" type="submit" value="an">
+							<input name='"Steckdose Kind 1"' type="hidden" value="0">
+						</form>
+					</td>
+					<td class="auto-style5" style="width: 160px">
+					<img id="strom_icon5" class="ui-icon" height="75" width="37" />					
+					</td>
+				</tr>
+					
+				<tr>
+					<td class="auto-style1">Steckdose Mika</td>
+					<td>
+						<form action="" method="post">
+							<input class="ui-btn ui-btn--off" style="height: 45px; width: 100px" type="submit" value="aus">
+							<input name='"Steckdose Kind 2"' type="hidden" value="1">
+						</form>
+						<form action="" method="post">
+							<input class="ui-btn ui-btn--on" style="height: 45px; width: 100px" type="submit" value="an">
+							<input name='"Steckdose Kind 2"' type="hidden" value="0">
+						</form>
+					</td>
+					<td class="auto-style5" style="width: 160px">
+					<img id="strom_icon6" class="ui-icon" height="75" width="37" />					
+					</td>
+				</tr>
+	
+					<tr>
+					<td class="auto-style1">Steckdose Niko</td>
+					<td>
+						<form action="" method="post">
+							<input class="ui-btn ui-btn--off" style="height: 45px; width: 100px" type="submit" value="aus">
+							<input name='"Steckdose Gäste"' type="hidden" value="1">
+						</form>
+						<form action="" method="post">
+							<input class="ui-btn ui-btn--on" style="height: 45px; width: 100px" type="submit" value="an">
+							<input name='"Steckdose Gäste"' type="hidden" value="0">
+						</form>
+					</td>
+					<td class="auto-style5" style="width: 160px">
+					<img id="strom_icon7" class="ui-icon" height="75" width="37" />					
+					</td>
+				</tr>
+	
+				<tr>
+					<td class="auto-style1">Steckdose Eltern</td>
+					<td>
+						<form action="" method="post">
+							<input class="ui-btn ui-btn--off" style="height: 45px; width: 100px" type="submit" value="aus">
+							<input name='"Steckdose Eltern"' type="hidden" value="1">
+						</form>
+						<form action="" method="post">
+							<input class="ui-btn ui-btn--on" style="height: 45px; width: 100px" type="submit" value="an">
+							<input name='"Steckdose Eltern"' type="hidden" value="0">
+						</form>
+					</td>
+					<td class="auto-style5" style="width: 160px">
+					<img id="strom_icon8" class="ui-icon" height="75" width="37" />					
+					</td>
+				</tr>
+				
+				<tr>
+					<td class="auto-style1">Funksteckdose 1</td>
+					<td>
+						<form action="" method="post">
+							<input class="ui-btn ui-btn--on" style="height: 45px; width: 100px" type="submit" value="an">
+							<input name='"Arduino Settimio"."Funksteckdose 1 an"' type="hidden" value="1">
+						</form>
+						<form action="" method="post">
+							<input class="ui-btn ui-btn--off" style="height: 45px; width: 100px" type="submit" value="aus">
+							<input name='"Arduino Settimio"."Funksteckdose 1 aus"' type="hidden" value="1">
+						</form>
+				</tr>
+				
+								<tr>
+				<td class="auto-style1">Saunalampe</td>
+					<td>
+						<form action="" method="post">
+							<input class="ui-btn ui-btn--on" style="height: 45px; width: 100px" type="submit" value="an">
+							<input name='"Arduino Settimio"."KDY 1 an"' type="hidden" value="1">
+						</form>
+						<form action="" method="post">
+							<input class="ui-btn ui-btn--off" style="height: 45px; width: 100px" type="submit" value="aus">
+							<input name='"Arduino Settimio"."KDY 1 aus"' type="hidden" value="1">
+						</form>
+				</tr>
+				
+				<td class="auto-style1">KDY2</td>
+					<td>
+						<form action="" method="post">
+							<input class="ui-btn ui-btn--on" style="height: 45px; width: 100px" type="submit" value="an">
+							<input name='"Arduino Settimio"."KDY 2 an"' type="hidden" value="1">
+						</form>
+						<form action="" method="post">
+							<input class="ui-btn ui-btn--off" style="height: 45px; width: 100px" type="submit" value="aus">
+							<input name='"Arduino Settimio"."KDY 2 aus"' type="hidden" value="1">
+						</form>
+				</tr>
+				
+								<tr>
+					<td class="auto-style1">Poolpumpe</td>
+					<td>
+						<form action="" method="post">
+									<input class="ui-btn ui-btn--on" style="height: 45px; width: 100px" type="submit" value="an">
+							<input name='"Arduino Settimio"."Funksteckdose 4 an"' type="hidden" value="1">
+						</form>
+						<form action="" method="post">
+									<input class="ui-btn ui-btn--off" style="height: 45px; width: 100px" type="submit" value="aus">
+							<input name='"Arduino Settimio"."Funksteckdose 4 aus"' type="hidden" value="1">
+						</form>
+				</tr>
+
+			</table>
+		</div>
+	</div>
+</div>
+<div id="footer">
+</div>
+
+<script type="text/javascript">
+
+function showDataTable()
+{
+	if (window.XMLHttpRequest) {
+		// code fuer IE7+, Firefox, Chrome, Opera, Safari
+		xmlhttp = new XMLHttpRequest();
+	} else {
+		// code fuer IE6, IE5
+		xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
+	}
+
+	xmlhttp.open("GET", "steckdosen_state.html", true);
+
+	xmlhttp.onreadystatechange = function()
+	{
+		if (xmlhttp.readyState == 4 && xmlhttp.status == 200)
+		{
+			document.getElementById("OutputArea").innerHTML = xmlhttp.responseText;
+			// Refresh Timeout zum Neuladen der Daten setzen
+			
+			for (i = 1; i <= 8; i++) {
+			var status = document.getElementById('stromx' + i).innerText;
+			strom_icon(('strom_icon' + i), status);
+			}
+			
+			setTimeout("refreshOutputArea()", 1000);
+		}
+	}
+	xmlhttp.send(null);
+}
+
+function refreshOutputArea()
+{
+	showDataTable();
+}
+
+window.onload = function()
+{
+	refreshOutputArea();
+}
+
+</script>	
+	</head>
+<body>
+
+<div id="OutputArea" style="position:fixed;clip:rect(0,0,0,0);overflow:hidden;"></div>
+
+</body>
+
+</html>

steckdosen_state.html

@@ -0,0 +1,9 @@
+<p id="stromx1"><span class="auto-style6">:="Steckdose Deele Garder":</span>
+<p id="stromx2"><span class="auto-style6">:="Steckdose Wohnen":</span>
+<p id="stromx3"><span class="auto-style6">:="Steckdose Essen":</span>
+<p id="stromx4"><span class="auto-style6">:="Steckdose Arbeiten":</span>
+<p id="stromx5"><span class="auto-style6">:="Steckdose Kind 1":</span>
+<p id="stromx6"><span class="auto-style6">:="Steckdose Kind 2":</span>
+<p id="stromx7"><span class="auto-style6">:="Steckdose Gäste":</span>
+<p id="stromx8"><span class="auto-style6">:="Steckdose Eltern":</span>
+</p>

stromzaehler.htm

@@ -0,0 +1,386 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
+<html dir="ltr" xmlns="http://www.w3.org/1999/xhtml">
+
+<head>
+	<title>TTh</title>
+	<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
+	<link href="form.css" rel="stylesheet" type="text/css" />
+	<style type="text/css">
+		.auto-style1 {
+			color: #FF0000;
+			font-family: "Arial";
+		}
+
+		.auto-style4 {
+			font-family: "Arial";
+			font-size: x-large;
+			text-align: left;
+		}
+
+		.auto-style5 {
+			font-family: "Arial";
+			font-size: x-large;
+			text-align: center;
+		}
+
+		.auto-style6 {
+			color: #000000;
+			font-size: xx-small;
+		}
+
+		.auto-style10 {
+			color: #FF0000;
+			font-family: "Arial";
+			font-size: 11px;
+			line-height: 1.15;
+			margin: 2px 0;
+		}
+
+		.sz-layout {
+			display: flex;
+			align-items: flex-start;
+			gap: 16px;
+			padding: 8px 0;
+		}
+
+		.sz-values {
+			min-width: 180px;
+			display: flex;
+			flex-direction: column;
+			gap: 2px;
+		}
+
+		.sz-chart-wrap {
+			min-width: 360px;
+		}
+
+		#powerChart {
+			width: 360px;
+			height: 180px;
+			display: block;
+			border-radius: 12px;
+			background: rgba(255,255,255,0.06);
+			border: 1px solid rgba(255,255,255,0.14);
+		}
+	</style>
+
+</head>
+
+<body style="color: #00FF00; background-color: #000000">
+
+	<div id="masthead">
+	</div>
+	<div id="top_nav">
+	</div>
+	<div id="container">
+		<div id="page_content">
+			<div class="sz-layout">
+				<div>
+					<p id="tacho_div"></p>
+				</div>
+				<div class="sz-values">
+					<p class="auto-style10" id="ergebnisx1"></p>
+					<p class="auto-style10" id="ergebnisx2"></p>
+					<p class="auto-style10" id="ergebnisx3"></p>
+					<p class="auto-style10" id="ergebnisx4"></p>
+					<p class="auto-style10" id="ergebnisx5"></p>
+					<p class="auto-style10" id="ergebnisx6"></p>
+					<p class="auto-style10" id="ergebnisx7"></p>
+					<p class="auto-style10" id="ergebnisx8"></p>
+					<p class="auto-style10" id="ergebnisx9"></p>
+					<p class="auto-style10" id="ergebnisx10"></p>
+					<p class="auto-style10" id="ergebnisx11"></p>
+					<p class="auto-style10" id="ergebnisx12"></p>
+				</div>
+				<div class="sz-chart-wrap">
+					<canvas id="powerChart" width="360" height="180"></canvas>
+				</div>
+			</div>
+		</div>
+	</div>
+
+
+
+
+	<div id="footer">
+
+	</div>
+
+
+
+	<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
+	<script type="text/javascript">
+		let ergebnis = [];
+		let ergebnis_min = [];
+		let powerHistory = [];
+
+		// Chart aktuelle Leistung 20s
+		google.charts.load('current', { 'packages': ['corechart'] });
+		google.charts.setOnLoadCallback(drawChart_live);
+
+		function drawChart_live() {
+			var data = google.visualization.arrayToDataTable([
+				['Stunde', 'kWh'],
+				['0', parseInt(liveChart[1])],
+				['1', parseInt(liveChart[2])],
+				['2', parseInt(liveChart[3])],
+				['3', parseInt(liveChart[4])],
+				['4', parseInt(liveChart[5])],
+				['5', parseInt(liveChart[6])],
+				['6', parseInt(liveChart[7])],
+				['8', parseInt(liveChart[8])],
+				['9', parseInt(liveChart[9])],
+				['10', parseInt(liveChart[10])],
+				['11', parseInt(liveChart[11])],
+				['12', parseInt(liveChart[12])],
+				['13', parseInt(liveChart[13])],
+				['14', parseInt(liveChart[14])],
+				['15', parseInt(liveChart[15])],
+				['16', parseInt(liveChart[16])],
+				['17', parseInt(liveChart[17])],
+				['18', parseInt(liveChart[18])],
+				['19', parseInt(liveChart[19])],
+				['20', parseInt(liveChart[20])]
+			]);
+
+
+
+			var options = {
+				title: 'Verlauf [s]',
+				backgroundColor: 'black',
+				chartArea: { left: 40, top: 0, width: '100%', height: '90%' },
+				//SvAxis: {maxValue: 8000, minValue: -8000},
+				curveType: 'function',
+				legend: { position: 'none' }
+			};
+
+			var chart_live = new google.visualization.LineChart(document.getElementById('curve_chart'));
+
+			chart_live.draw(data, options);
+
+		}
+
+		function addPowerSample(value) {
+			var now = Date.now();
+			if (!isFinite(value)) return;
+			// store a point on every value update (each successful poll)
+			powerHistory.push({ t: now, v: value });
+			var cutoff = now - (5 * 60 * 1000); // 5 minutes
+			while (powerHistory.length && powerHistory[0].t < cutoff) {
+				powerHistory.shift();
+			}
+		}
+
+		function drawPowerChart() {
+			var canvas = document.getElementById('powerChart');
+			if (!canvas) return;
+			var ctx = canvas.getContext('2d');
+			var w = canvas.width, h = canvas.height;
+
+			// background
+			ctx.clearRect(0, 0, w, h);
+			ctx.fillStyle = 'rgba(0,0,0,0.35)';
+			ctx.fillRect(0, 0, w, h);
+
+			// no data yet
+			if (!powerHistory.length) {
+				ctx.fillStyle = 'rgba(234,240,255,0.75)';
+				ctx.font = '12px Segoe UI, Arial, sans-serif';
+				ctx.fillText('Leistung (letzte 5 min) – warte auf Daten…', 12, 24);
+				return;
+			}
+
+			var minV = powerHistory[0].v, maxV = powerHistory[0].v;
+			for (var i = 1; i < powerHistory.length; i++) {
+				var v = powerHistory[i].v;
+				if (v < minV) minV = v;
+				if (v > maxV) maxV = v;
+			}
+			if (minV === maxV) { minV -= 1; maxV += 1; }
+
+			var padL = 38, padR = 10, padT = 18, padB = 22;
+			var plotW = w - padL - padR;
+			var plotH = h - padT - padB;
+			var t0 = powerHistory[0].t;
+			var t1 = powerHistory[powerHistory.length - 1].t;
+			if (t0 === t1) { t0 -= 1; t1 += 1; }
+
+			// grid
+			ctx.strokeStyle = 'rgba(255,255,255,0.10)';
+			ctx.lineWidth = 1;
+			for (var gy = 0; gy <= 4; gy++) {
+				var y = padT + (plotH * gy / 4);
+				ctx.beginPath();
+				ctx.moveTo(padL, y);
+				ctx.lineTo(padL + plotW, y);
+				ctx.stroke();
+			}
+
+			// labels
+			ctx.fillStyle = 'rgba(234,240,255,0.75)';
+			ctx.font = '12px Segoe UI, Arial, sans-serif';
+			ctx.fillText('Leistung – letzte 5 min', 12, 14);
+
+			ctx.fillStyle = 'rgba(234,240,255,0.65)';
+			ctx.font = '11px Segoe UI, Arial, sans-serif';
+			ctx.fillText(Math.round(maxV) + ' W', 6, padT + 10);
+			ctx.fillText(Math.round(minV) + ' W', 6, padT + plotH);
+
+			// line
+			ctx.strokeStyle = 'rgba(99,212,255,0.95)';
+			ctx.lineWidth = 2;
+			ctx.beginPath();
+			for (var j = 0; j < powerHistory.length; j++) {
+				var p = powerHistory[j];
+				var x = padL + ((p.t - t0) / (t1 - t0)) * plotW;
+				var yv = padT + (1 - ((p.v - minV) / (maxV - minV))) * plotH;
+				if (j === 0) ctx.moveTo(x, yv); else ctx.lineTo(x, yv);
+			}
+			ctx.stroke();
+
+			// last point
+			var last = powerHistory[powerHistory.length - 1];
+			var lx = padL + ((last.t - t0) / (t1 - t0)) * plotW;
+			var ly = padT + (1 - ((last.v - minV) / (maxV - minV))) * plotH;
+			ctx.fillStyle = 'rgba(124,255,178,0.95)';
+			ctx.beginPath();
+			ctx.arc(lx, ly, 3, 0, Math.PI * 2);
+			ctx.fill();
+
+			ctx.fillStyle = 'rgba(234,240,255,0.85)';
+			ctx.font = '12px Segoe UI, Arial, sans-serif';
+			ctx.fillText(Math.round(last.v) + ' W', w - 86, 14);
+		}
+
+		// Minuten
+		function drawChart_Minuten() {
+			let array_min = [];
+			for (i = 0; i <= 59; i++) {
+				if (parseFloat(ergebnis_min[i]) > 0) {
+					array_min[i, parseFloat(ergebnis_min[i])];
+				} else {
+					break;
+				};
+			}
+			var data = google.visualization.arrayToDataTable([array_min]);
+
+			var options = {
+				title: 'Tag',
+				titleTextStyle: { color: 'red' },
+				backgroundColor: 'black',
+				chartArea: { left: 40, top: 20, width: '100%', height: '90%' },
+				hAxis: { maxValue: 59, minValue: 0, titleTextStyle: { color: 'red' }, textStyle: { color: 'red' } },
+				vAxis: { title: 'kWh', titleTextStyle: { color: 'red' }, textStyle: { color: 'red' } },
+				legend: 'none',
+				trendlines: { 0: { type: 'linear', color: 'red' } },
+			};
+
+			var chart_Minute = new google.visualization.ScatterChart(document.getElementById('chart_div_Minute'));
+			chart_Minute.draw(data, options);
+		}
+
+		// Tacho
+		google.charts.load('current', { 'packages': ['gauge'] });
+		google.charts.setOnLoadCallback(drawTacho);
+
+		function drawTacho() {
+
+			var data = google.visualization.arrayToDataTable([
+				['Label', 'Value'],
+				['Leistung', 50]
+			]);
+
+			var options = {
+				width: 200, height: 200,
+				max: 8000, min: -8000,
+				greenFrom: -9000, greenTo: 0,
+				redFrom: 5000, redTo: 9000,
+				yellowFrom: 0, yellowTo: 1000,
+				minorTicks: 5
+			};
+
+			var tacho = new google.visualization.Gauge(document.getElementById("tacho_div"));
+
+			tacho.draw(data, options);
+
+			setInterval(function () {
+				data.setValue(0, 1, parseInt(ergebnis[3]));
+				tacho.draw(data, options);
+				//dia_leistung();
+			}, 1000);
+		}
+
+
+
+
+		function showDataTable() {
+			var xmlhttp;
+			if (window.XMLHttpRequest) {
+				// code fuer IE7+, Firefox, Chrome, Opera, Safari
+				xmlhttp = new XMLHttpRequest();
+			} else {
+				// code fuer IE6, IE5
+				xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
+			}
+
+			xmlhttp.open("GET", "stromzaehler_state.html", true);
+
+			xmlhttp.onreadystatechange = function () {
+				if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
+					var outputArea = document.getElementById("OutputArea");
+					if (outputArea) outputArea.innerHTML = xmlhttp.responseText;
+					// Refresh Timeout zum Neuladen der Daten setzen
+
+					for (i = 1; i <= 12; i++) {
+						var node = document.getElementById('stromx' + i);
+						ergebnis[i] = node ? node.innerText : '';
+					}
+
+					var p = parseFloat(ergebnis[3]);
+					addPowerSample(p);
+					drawPowerChart();
+
+					document.getElementById('ergebnisx1').innerHTML = 'Bezug: ' + ergebnis[1] + ' kWh';
+					document.getElementById('ergebnisx2').innerHTML = 'Einspeisung: ' + ergebnis[2] + ' kWh';
+					document.getElementById('ergebnisx3').innerHTML = 'aktuelle Leistung: ' + ergebnis[3] + ' W';
+					document.getElementById('ergebnisx4').innerHTML = 'täglicher Bezug: ' + ergebnis[4] + ' kWh';
+					var diff1 = parseFloat(ergebnis[1]) - parseFloat(ergebnis[5]);
+					var diff2 = parseFloat(ergebnis[5]) - parseFloat(ergebnis[6]);
+					var diff3 = parseFloat(ergebnis[6]) - parseFloat(ergebnis[7]);
+					var diff4 = parseFloat(ergebnis[7]) - parseFloat(ergebnis[8]);
+					var diff5 = parseFloat(ergebnis[8]) - parseFloat(ergebnis[9]);
+					var diff6 = parseFloat(ergebnis[9]) - parseFloat(ergebnis[10]);
+					var diff7 = parseFloat(ergebnis[10]) - parseFloat(ergebnis[11]);
+					var diff8 = parseFloat(ergebnis[11]) - parseFloat(ergebnis[12]);
+					document.getElementById('ergebnisx5').innerHTML = '-1: ' + (isNaN(diff1) ? '-' : diff1.toFixed(2)) + ' kWh';
+					document.getElementById('ergebnisx6').innerHTML = '-2: ' + (isNaN(diff2) ? '-' : diff2.toFixed(2)) + ' kWh';
+					document.getElementById('ergebnisx7').innerHTML = '-3: ' + (isNaN(diff3) ? '-' : diff3.toFixed(2)) + ' kWh';
+					document.getElementById('ergebnisx8').innerHTML = '-4: ' + (isNaN(diff4) ? '-' : diff4.toFixed(2)) + ' kWh';
+					document.getElementById('ergebnisx9').innerHTML = '-5: ' + (isNaN(diff5) ? '-' : diff5.toFixed(2)) + ' kWh';
+					document.getElementById('ergebnisx10').innerHTML = '-6: ' + (isNaN(diff6) ? '-' : diff6.toFixed(2)) + ' kWh';
+					document.getElementById('ergebnisx11').innerHTML = '-7: ' + (isNaN(diff7) ? '-' : diff7.toFixed(2)) + ' kWh';
+					document.getElementById('ergebnisx12').innerHTML = '-8: ' + (isNaN(diff8) ? '-' : diff8.toFixed(2)) + ' kWh';
+
+					setTimeout(refreshOutputArea, 500);
+				}
+			}
+			xmlhttp.send(null);
+		}
+
+
+		function refreshOutputArea() {
+			showDataTable();
+		}
+
+		window.onload = function () {
+			refreshOutputArea();
+
+		}
+
+	</script>
+
+	</div>
+	<div id="OutputArea" style="position:fixed;clip:rect(0,0,0,0);overflow:hidden;"></div>
+</body>
+
+</html>

stromzaehler_state.html

@@ -0,0 +1,12 @@
+<p id="stromx1"><span class="auto-style6">:="Stromzähler".Stromzähler."Zählerstand Bezug":</span></p>
+<p id="stromx2"><span class="auto-style6">:="Stromzähler".Stromzähler."Zählerstand Einspeisung":</span></p>
+<p id="stromx3"><span class="auto-style6">:="Stromzähler".Stromzähler."aktuelle Leistung":</span></p>
+<p id="stromx4"><span class="auto-style6">:="Stromzähler".Stromzähler.Aufzeichnung."täglicher Bezug":</span></p>
+<p id="stromx5"><span class="auto-style6">:="Stromzähler".Stromzähler.Aufzeichnung.Zählerstand[0]."Zählerstand Bezug":</span></p>
+<p id="stromx6"><span class="auto-style6">:="Stromzähler".Stromzähler.Aufzeichnung.Zählerstand[1]."Zählerstand Bezug":</span></p>
+<p id="stromx7"><span class="auto-style6">:="Stromzähler".Stromzähler.Aufzeichnung.Zählerstand[2]."Zählerstand Bezug":</span></p>
+<p id="stromx8"><span class="auto-style6">:="Stromzähler".Stromzähler.Aufzeichnung.Zählerstand[3]."Zählerstand Bezug":</span></p>
+<p id="stromx9"><span class="auto-style6">:="Stromzähler".Stromzähler.Aufzeichnung.Zählerstand[4]."Zählerstand Bezug":</span></p>
+<p id="stromx10"><span class="auto-style6">:="Stromzähler".Stromzähler.Aufzeichnung.Zählerstand[5]."Zählerstand Bezug":</span></p>
+<p id="stromx11"><span class="auto-style6">:="Stromzähler".Stromzähler.Aufzeichnung.Zählerstand[6]."Zählerstand Bezug":</span></p>
+<p id="stromx12"><span class="auto-style6">:="Stromzähler".Stromzähler.Aufzeichnung.Zählerstand[7]."Zählerstand Bezug":</span></p>

zeit_state.html

@@ -0,0 +1,14 @@
+<!-- V3 State: CPU-Uhr, Sonnenzeiten, Urlaub. Wird von indexV3.htm / tth_v3.js gepollt. -->
+<p id="z_y">:="Aufgang_Untergang".aktuelle_CPU_Zeit.YEAR:</p>
+<p id="z_mo">:="Aufgang_Untergang".aktuelle_CPU_Zeit.MONTH:</p>
+<p id="z_d">:="Aufgang_Untergang".aktuelle_CPU_Zeit.DAY:</p>
+<p id="z_h">:="Aufgang_Untergang".aktuelle_CPU_Zeit.HOUR:</p>
+<p id="z_mi">:="Aufgang_Untergang".aktuelle_CPU_Zeit.MINUTE:</p>
+<p id="z_s">:="Aufgang_Untergang".aktuelle_CPU_Zeit.SECOND:</p>
+<p id="z_auf_h">:="Aufgang_Untergang".Aufgang.HOUR:</p>
+<p id="z_auf_mi">:="Aufgang_Untergang".Aufgang.MINUTE:</p>
+<p id="z_unter_h">:="Aufgang_Untergang".Untergang.HOUR:</p>
+<p id="z_unter_mi">:="Aufgang_Untergang".Untergang.MINUTE:</p>
+<p id="z_auf_off">:="Aufgang_Untergang".Aufgang_offset:</p>
+<p id="z_unter_off">:="Aufgang_Untergang".Untergang_offset:</p>
+<p id="z_urlaub">:="Jalousie_DB".Urlaub:</p>