Button Simmulator, Frontend änderungen

tools/button-simulator/.gitignore

@@ -0,0 +1,2 @@
+node_modules/
+package-lock.json

tools/button-simulator/README.md

@@ -0,0 +1,44 @@
+# AquaMaster Button-Simulator
+
+Kleine Node.js-/Express-App zum Simulieren der vier Funktaster
+(`start1`, `stop1`, `start2`, `stop2`) gegen den MQTT-Broker des AquaMasters.
+
+## Installation
+
+```bash
+cd tools/button-simulator
+npm install
+npm start
+```
+
+UI öffnen: <http://localhost:3000>
+
+## Bedienung
+
+1. Mit dem WLAN des AquaMasters verbinden (Default-AP-IP: `192.168.10.1`).
+2. In der UI die Broker-URL prüfen (`mqtt://192.168.10.1:1883`) und auf **Verbinden** klicken.
+3. MAC-Adressen der vier virtuellen Buttons ggf. anpassen — die Default-MACs
+   `AA:BB:CC:DD:EE:01..04` funktionieren für einen frischen Anlernlauf:
+   - Im Web-UI des Masters **Anlernmodus starten**
+   - Im Simulator nacheinander **Start 1 → Stop 1 → Start 2 → Stop 2** drücken
+   - Der Master speichert die MACs und ordnet sie den Rollen zu
+4. Danach lassen sich mit denselben Buttons Timerläufe auslösen.
+
+## Was die App sendet
+
+| Topic                     | Auslöser                  | Payload                        |
+|---------------------------|---------------------------|--------------------------------|
+| `aquacross/button/<MAC>`  | PRESS-Button              | `{"type":1|2,"timestamp":ms}`  |
+| `aquacross/battery/<MAC>` | Slider / Auto-Heartbeat   | `{"voltage":mV}`               |
+| `heartbeat/alive/<MAC>`   | Auto-Heartbeat            | `{"timestamp":ms}`             |
+
+`type=2` wird für Start-Rollen (start1/start2) gesendet, `type=1` für
+Stop-Rollen (stop1/stop2) — genau wie es `src/communication.h` erwartet.
+
+Heartbeat und Battery werden standardmäßig alle 3 s automatisch publiziert,
+sobald eine Verbindung besteht. Intervall/Abschaltung per Formular unten.
+
+## Environment-Variablen
+
+- `PORT` — Webserver-Port (Default: `3000`)
+- `BROKER_URL` — vorbelegte Broker-URL

tools/button-simulator/package.json

@@ -0,0 +1,14 @@
+{
+  "name": "aquamaster-button-simulator",
+  "version": "1.0.0",
+  "description": "Simuliert die vier Funktaster (start1/stop1/start2/stop2) für den AquaMaster MQTT über einen Web-UI-Frontend.",
+  "private": true,
+  "type": "commonjs",
+  "scripts": {
+    "start": "node server.js"
+  },
+  "dependencies": {
+    "express": "^4.19.2",
+    "mqtt": "^5.10.1"
+  }
+}

tools/button-simulator/public/app.js

@@ -0,0 +1,96 @@
+const $ = (sel, root = document) => root.querySelector(sel);
+const $$ = (sel, root = document) => [...root.querySelectorAll(sel)];
+
+async function api(path, body) {
+  const opts = { method: body ? "POST" : "GET" };
+  if (body) {
+    opts.headers = { "Content-Type": "application/json" };
+    opts.body = JSON.stringify(body);
+  }
+  const res = await fetch(path, opts);
+  return res.json();
+}
+
+function formatLog(entries) {
+  return entries
+    .map((e) => {
+      const ts = new Date(e.t).toLocaleTimeString();
+      const arrow = e.direction === "out" ? "→" : e.direction === "in" ? "←" : e.direction === "err" ? "✖" : "·";
+      return `${ts} ${arrow} ${e.text}`;
+    })
+    .join("\n");
+}
+
+let lastKnownButtons = null;
+
+async function refreshStatus() {
+  try {
+    const s = await api("/api/status");
+    $("#status").textContent = s.connected ? "online" : "offline";
+    $("#status").className = "status " + (s.connected ? "online" : "offline");
+
+    if (!lastKnownButtons) {
+      $("#brokerUrl").value = s.brokerUrl;
+      $("#hbEnabled").checked = s.heartbeatEnabled;
+      $("#hbInterval").value = s.heartbeatIntervalMs;
+      for (const key of ["start1", "stop1", "start2", "stop2"]) {
+        const card = $(`.button-card[data-button="${key}"]`);
+        card.querySelector(".mac").value = s.buttons[key].mac;
+        card.querySelector(".mv").value = s.buttons[key].voltage;
+        card.querySelector(".mv-value").textContent = s.buttons[key].voltage;
+      }
+      lastKnownButtons = s.buttons;
+    }
+
+    $("#log").textContent = formatLog(s.log);
+    $("#log").scrollTop = $("#log").scrollHeight;
+  } catch (err) {
+    console.error(err);
+  }
+}
+
+$("#btnConnect").addEventListener("click", async () => {
+  await api("/api/connect", { brokerUrl: $("#brokerUrl").value.trim() });
+  refreshStatus();
+});
+
+$("#btnDisconnect").addEventListener("click", async () => {
+  await api("/api/disconnect", {});
+  refreshStatus();
+});
+
+$("#btnHbApply").addEventListener("click", async () => {
+  await api("/api/heartbeat", {
+    enabled: $("#hbEnabled").checked,
+    intervalMs: parseInt($("#hbInterval").value, 10),
+  });
+  refreshStatus();
+});
+
+$$(".button-card").forEach((card) => {
+  const button = card.dataset.button;
+  const macInput = card.querySelector(".mac");
+  const mvInput = card.querySelector(".mv");
+  const mvValue = card.querySelector(".mv-value");
+  const pressBtn = card.querySelector(".press");
+
+  macInput.addEventListener("change", async () => {
+    await api("/api/config", { button, mac: macInput.value.trim() });
+  });
+
+  mvInput.addEventListener("input", () => {
+    mvValue.textContent = mvInput.value;
+  });
+
+  mvInput.addEventListener("change", async () => {
+    await api("/api/battery", { button, voltage: parseInt(mvInput.value, 10) });
+  });
+
+  pressBtn.addEventListener("click", async () => {
+    await api("/api/press", { button });
+    refreshStatus();
+  });
+});
+
+refreshStatus();
+setInterval(refreshStatus, 1500);

tools/button-simulator/public/index.html

@@ -0,0 +1,95 @@
+<!doctype html>
+<html lang="de">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>AquaMaster Button-Simulator</title>
+  <link rel="stylesheet" href="style.css" />
+</head>
+<body>
+  <header>
+    <h1>AquaMaster Button-Simulator</h1>
+    <div class="connection">
+      <input id="brokerUrl" type="text" placeholder="mqtt://192.168.10.1:1883" />
+      <button id="btnConnect" class="primary">Verbinden</button>
+      <button id="btnDisconnect">Trennen</button>
+      <span id="status" class="status offline">offline</span>
+    </div>
+  </header>
+
+  <section class="grid">
+    <div class="lane lane1">
+      <h2>Bahn 1</h2>
+      <div class="button-card" data-button="start1">
+        <div class="button-header">
+          <span class="role">Start 1</span>
+          <input class="mac" type="text" spellcheck="false" />
+        </div>
+        <button class="press press-start">PRESS</button>
+        <div class="battery">
+          <label>Akku (mV): <span class="mv-value">3700</span></label>
+          <input class="mv" type="range" min="3000" max="4200" step="10" value="3700" />
+        </div>
+      </div>
+
+      <div class="button-card" data-button="stop1">
+        <div class="button-header">
+          <span class="role">Stop 1</span>
+          <input class="mac" type="text" spellcheck="false" />
+        </div>
+        <button class="press press-stop">PRESS</button>
+        <div class="battery">
+          <label>Akku (mV): <span class="mv-value">3700</span></label>
+          <input class="mv" type="range" min="3000" max="4200" step="10" value="3700" />
+        </div>
+      </div>
+    </div>
+
+    <div class="lane lane2">
+      <h2>Bahn 2</h2>
+      <div class="button-card" data-button="start2">
+        <div class="button-header">
+          <span class="role">Start 2</span>
+          <input class="mac" type="text" spellcheck="false" />
+        </div>
+        <button class="press press-start">PRESS</button>
+        <div class="battery">
+          <label>Akku (mV): <span class="mv-value">3700</span></label>
+          <input class="mv" type="range" min="3000" max="4200" step="10" value="3700" />
+        </div>
+      </div>
+
+      <div class="button-card" data-button="stop2">
+        <div class="button-header">
+          <span class="role">Stop 2</span>
+          <input class="mac" type="text" spellcheck="false" />
+        </div>
+        <button class="press press-stop">PRESS</button>
+        <div class="battery">
+          <label>Akku (mV): <span class="mv-value">3700</span></label>
+          <input class="mv" type="range" min="3000" max="4200" step="10" value="3700" />
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <section class="controls">
+    <label>
+      <input id="hbEnabled" type="checkbox" checked />
+      Heartbeat + Battery automatisch senden
+    </label>
+    <label>
+      Intervall (ms):
+      <input id="hbInterval" type="number" min="500" max="60000" step="500" value="3000" />
+    </label>
+    <button id="btnHbApply">Übernehmen</button>
+  </section>
+
+  <section class="log-wrap">
+    <h3>Log</h3>
+    <pre id="log"></pre>
+  </section>
+
+  <script src="app.js"></script>
+</body>
+</html>

tools/button-simulator/public/style.css

@@ -0,0 +1,189 @@
+* { box-sizing: border-box; }
+
+body {
+  margin: 0;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+  background: #0f172a;
+  color: #e2e8f0;
+  padding: 16px;
+}
+
+header {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  margin-bottom: 16px;
+}
+
+header h1 {
+  margin: 0;
+  font-size: 20px;
+  font-weight: 600;
+}
+
+.connection {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  flex-wrap: wrap;
+}
+
+.connection input {
+  flex: 1;
+  min-width: 220px;
+  padding: 8px 10px;
+  background: #1e293b;
+  border: 1px solid #334155;
+  border-radius: 6px;
+  color: #e2e8f0;
+  font-family: monospace;
+}
+
+button {
+  padding: 8px 14px;
+  border: 1px solid #334155;
+  background: #1e293b;
+  color: #e2e8f0;
+  border-radius: 6px;
+  cursor: pointer;
+  font-weight: 500;
+}
+
+button:hover { background: #334155; }
+button.primary { background: #2563eb; border-color: #2563eb; }
+button.primary:hover { background: #1d4ed8; }
+
+.status {
+  padding: 4px 10px;
+  border-radius: 99px;
+  font-size: 12px;
+  font-weight: 600;
+  text-transform: uppercase;
+}
+.status.online  { background: #14532d; color: #86efac; }
+.status.offline { background: #7f1d1d; color: #fca5a5; }
+
+.grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 16px;
+  margin-bottom: 16px;
+}
+
+@media (max-width: 720px) {
+  .grid { grid-template-columns: 1fr; }
+}
+
+.lane {
+  background: #1e293b;
+  border: 1px solid #334155;
+  border-radius: 10px;
+  padding: 12px;
+}
+
+.lane h2 {
+  margin: 0 0 10px;
+  font-size: 14px;
+  text-transform: uppercase;
+  letter-spacing: 1px;
+  color: #94a3b8;
+}
+
+.button-card {
+  background: #0f172a;
+  border: 1px solid #334155;
+  border-radius: 8px;
+  padding: 10px;
+  margin-bottom: 10px;
+}
+
+.button-card:last-child { margin-bottom: 0; }
+
+.button-header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 8px;
+}
+
+.role {
+  font-weight: 700;
+  font-size: 13px;
+  min-width: 60px;
+}
+
+.mac {
+  flex: 1;
+  padding: 6px 8px;
+  font-family: monospace;
+  font-size: 12px;
+  background: #1e293b;
+  border: 1px solid #334155;
+  border-radius: 4px;
+  color: #e2e8f0;
+}
+
+.press {
+  width: 100%;
+  padding: 16px;
+  font-size: 18px;
+  font-weight: 700;
+  letter-spacing: 2px;
+  margin-bottom: 8px;
+}
+
+.press-start { background: #166534; border-color: #166534; }
+.press-start:hover { background: #15803d; }
+.press-stop { background: #991b1b; border-color: #991b1b; }
+.press-stop:hover { background: #b91c1c; }
+.press:active { transform: scale(0.98); }
+
+.battery label {
+  display: block;
+  font-size: 12px;
+  color: #94a3b8;
+  margin-bottom: 4px;
+}
+
+.battery input[type="range"] { width: 100%; }
+
+.controls {
+  background: #1e293b;
+  border: 1px solid #334155;
+  border-radius: 10px;
+  padding: 12px;
+  display: flex;
+  gap: 16px;
+  align-items: center;
+  flex-wrap: wrap;
+  margin-bottom: 16px;
+}
+
+.controls label { font-size: 13px; display: flex; align-items: center; gap: 6px; }
+.controls input[type="number"] {
+  width: 80px;
+  padding: 6px 8px;
+  background: #0f172a;
+  border: 1px solid #334155;
+  border-radius: 4px;
+  color: #e2e8f0;
+}
+
+.log-wrap {
+  background: #1e293b;
+  border: 1px solid #334155;
+  border-radius: 10px;
+  padding: 12px;
+}
+
+.log-wrap h3 { margin: 0 0 8px; font-size: 13px; color: #94a3b8; }
+
+#log {
+  margin: 0;
+  max-height: 260px;
+  overflow-y: auto;
+  font-family: monospace;
+  font-size: 11px;
+  white-space: pre-wrap;
+  color: #cbd5e1;
+}

tools/button-simulator/server.js

@@ -0,0 +1,209 @@
+const express = require("express");
+const mqtt = require("mqtt");
+const path = require("path");
+
+const PORT = process.env.PORT || 3000;
+
+const BUTTON_KEYS = ["start1", "stop1", "start2", "stop2"];
+
+const state = {
+  brokerUrl: process.env.BROKER_URL || "mqtt://192.168.1.209:1883",
+  connected: false,
+  lastError: null,
+  heartbeatEnabled: true,
+  heartbeatIntervalMs: 3000,
+  buttons: {
+    start1: { mac: "AA:BB:CC:DD:EE:01", voltage: 3700 },
+    stop1:  { mac: "AA:BB:CC:DD:EE:02", voltage: 3700 },
+    start2: { mac: "AA:BB:CC:DD:EE:03", voltage: 3700 },
+    stop2:  { mac: "AA:BB:CC:DD:EE:04", voltage: 3700 },
+  },
+  log: [],
+};
+
+let client = null;
+let heartbeatTimer = null;
+let bootTime = Date.now();
+
+function logEvent(direction, text) {
+  const entry = { t: Date.now(), direction, text };
+  state.log.push(entry);
+  if (state.log.length > 200) state.log.shift();
+  const arrow = direction === "out" ? "→" : direction === "in" ? "←" : "·";
+  console.log(`[${new Date(entry.t).toISOString()}] ${arrow} ${text}`);
+}
+
+function publish(topic, payload) {
+  if (!client || !state.connected) {
+    logEvent("err", `publish abgelehnt (nicht verbunden): ${topic}`);
+    return false;
+  }
+  const body = typeof payload === "string" ? payload : JSON.stringify(payload);
+  client.publish(topic, body, { qos: 0 }, (err) => {
+    if (err) logEvent("err", `publish fehlgeschlagen ${topic}: ${err.message}`);
+  });
+  logEvent("out", `${topic}  ${body}`);
+  return true;
+}
+
+function startHeartbeats() {
+  stopHeartbeats();
+  if (!state.heartbeatEnabled) return;
+  heartbeatTimer = setInterval(() => {
+    if (!state.connected) return;
+    const now = Date.now();
+    const uptime = now - bootTime;
+    for (const key of BUTTON_KEYS) {
+      const mac = state.buttons[key].mac;
+      publish(`heartbeat/alive/${mac}`, { timestamp: now, uptime });
+      publish(`aquacross/battery/${mac}`, {
+        timestamp: now,
+        voltage: state.buttons[key].voltage,
+      });
+    }
+  }, state.heartbeatIntervalMs);
+}
+
+function stopHeartbeats() {
+  if (heartbeatTimer) {
+    clearInterval(heartbeatTimer);
+    heartbeatTimer = null;
+  }
+}
+
+function connectBroker(url) {
+  disconnectBroker();
+  state.brokerUrl = url;
+  state.lastError = null;
+  logEvent("sys", `Verbinde zu ${url} ...`);
+
+  client = mqtt.connect(url, {
+    clientId: `button-simulator-${Math.random().toString(16).slice(2, 10)}`,
+    reconnectPeriod: 0,
+    connectTimeout: 5000,
+    clean: true,
+  });
+
+  client.on("connect", () => {
+    state.connected = true;
+    bootTime = Date.now();
+    logEvent("sys", `Verbunden mit ${url}`);
+    startHeartbeats();
+  });
+
+  client.on("error", (err) => {
+    state.lastError = err.message;
+    logEvent("err", `MQTT Fehler: ${err.message}`);
+  });
+
+  client.on("close", () => {
+    if (state.connected) logEvent("sys", "Verbindung geschlossen");
+    state.connected = false;
+    stopHeartbeats();
+  });
+
+  client.on("offline", () => {
+    state.connected = false;
+    logEvent("sys", "offline");
+  });
+}
+
+function disconnectBroker() {
+  stopHeartbeats();
+  if (client) {
+    try { client.end(true); } catch (_) {}
+    client = null;
+  }
+  state.connected = false;
+}
+
+const app = express();
+app.use(express.json());
+app.use(express.static(path.join(__dirname, "public")));
+
+app.get("/api/status", (_req, res) => {
+  res.json({
+    brokerUrl: state.brokerUrl,
+    connected: state.connected,
+    lastError: state.lastError,
+    heartbeatEnabled: state.heartbeatEnabled,
+    heartbeatIntervalMs: state.heartbeatIntervalMs,
+    buttons: state.buttons,
+    log: state.log.slice(-80),
+  });
+});
+
+app.post("/api/connect", (req, res) => {
+  const url = (req.body && req.body.brokerUrl) || state.brokerUrl;
+  connectBroker(url);
+  res.json({ ok: true });
+});
+
+app.post("/api/disconnect", (_req, res) => {
+  disconnectBroker();
+  logEvent("sys", "Getrennt (manuell)");
+  res.json({ ok: true });
+});
+
+app.post("/api/config", (req, res) => {
+  const { button, mac, voltage } = req.body || {};
+  if (!BUTTON_KEYS.includes(button)) {
+    return res.status(400).json({ ok: false, error: "unbekannter Button" });
+  }
+  if (typeof mac === "string" && mac.length > 0) {
+    state.buttons[button].mac = mac.toUpperCase();
+  }
+  if (typeof voltage === "number" && voltage >= 2500 && voltage <= 4500) {
+    state.buttons[button].voltage = Math.round(voltage);
+  }
+  res.json({ ok: true, button: state.buttons[button] });
+});
+
+app.post("/api/heartbeat", (req, res) => {
+  const { enabled, intervalMs } = req.body || {};
+  if (typeof enabled === "boolean") state.heartbeatEnabled = enabled;
+  if (typeof intervalMs === "number" && intervalMs >= 500 && intervalMs <= 60000) {
+    state.heartbeatIntervalMs = Math.round(intervalMs);
+  }
+  if (state.connected) startHeartbeats();
+  res.json({
+    ok: true,
+    heartbeatEnabled: state.heartbeatEnabled,
+    heartbeatIntervalMs: state.heartbeatIntervalMs,
+  });
+});
+
+app.post("/api/press", (req, res) => {
+  const { button } = req.body || {};
+  if (!BUTTON_KEYS.includes(button)) {
+    return res.status(400).json({ ok: false, error: "unbekannter Button" });
+  }
+  // start* sendet type=2, stop* sendet type=1 (siehe communication.h)
+  const type = button.startsWith("start") ? 2 : 1;
+  const mac = state.buttons[button].mac;
+  const payload = { type, timestamp: Date.now() };
+  const ok = publish(`aquacross/button/${mac}`, payload);
+  res.json({ ok, button, mac, payload });
+});
+
+app.post("/api/battery", (req, res) => {
+  const { button, voltage } = req.body || {};
+  if (!BUTTON_KEYS.includes(button)) {
+    return res.status(400).json({ ok: false, error: "unbekannter Button" });
+  }
+  if (typeof voltage !== "number") {
+    return res.status(400).json({ ok: false, error: "voltage fehlt" });
+  }
+  state.buttons[button].voltage = Math.round(voltage);
+  const mac = state.buttons[button].mac;
+  const ok = publish(`aquacross/battery/${mac}`, {
+    timestamp: Date.now(),
+    voltage: state.buttons[button].voltage,
+  });
+  res.json({ ok, button, mac, voltage: state.buttons[button].voltage });
+});
+
+app.listen(PORT, () => {
+  console.log(`Button-Simulator läuft: http://localhost:${PORT}`);
+  console.log(`Broker (Default): ${state.brokerUrl}`);
+});