From 1c9a743ec37d3bbd26d6dd6d342b18170d37d7e0 Mon Sep 17 00:00:00 2001
From: Mobkom21 <you@example.com>
Date: Mon, 11 May 2026 17:21:08 +0200
Subject: [PATCH] dashboard

---
 mobkom_dashboard.html | 791 ++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 791 insertions(+)
 create mode 100644 mobkom_dashboard.html
diff --git a/mobkom_dashboard.html b/mobkom_dashboard.html
new file mode 100644
index 0000000..41d6ed6
--- /dev/null
+++ b/mobkom_dashboard.html
@@ -0,0 +1,791 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>MOBKOM MQTT Dashboard</title>
+  <script src="https://unpkg.com/mqtt/dist/mqtt.min.js"></script>
+
+  <style>
+    :root {
+      --bg: #0b0f14;
+      --card: #171c22;
+      --card2: #20262e;
+      --border: #2e3742;
+      --text: #e7eef6;
+      --muted: #9aa6b2;
+      --dim: #697581;
+      --cyan: #00c8d7;
+      --green: #2fd17c;
+      --red: #ff5c5c;
+      --orange: #ffb020;
+    }
+
+    * { box-sizing: border-box; }
+
+    body {
+      margin: 0;
+      min-height: 100vh;
+      padding: 20px;
+      background: radial-gradient(circle at top left, rgba(0,200,215,.08), transparent 34%), var(--bg);
+      color: var(--text);
+      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+    }
+
+    .top {
+      max-width: 1500px;
+      margin: 0 auto 16px auto;
+      display: flex;
+      gap: 12px;
+      justify-content: space-between;
+      align-items: flex-end;
+      flex-wrap: wrap;
+    }
+
+    h1 { margin: 0; font-size: 26px; letter-spacing: -0.03em; }
+    .subtitle { color: var(--muted); font-size: 13px; margin-top: 4px; }
+
+    .connect-box {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      flex-wrap: wrap;
+      justify-content: flex-end;
+    }
+
+    input, button { font: inherit; }
+
+    input[type="text"] {
+      width: 260px;
+      color: var(--text);
+      background: var(--card);
+      border: 1px solid var(--border);
+      border-radius: 10px;
+      padding: 10px 12px;
+      outline: none;
+    }
+
+    input[type="text"]:focus {
+      border-color: var(--cyan);
+    }
+
+    button {
+      border: 1px solid rgba(255,255,255,.08);
+      border-radius: 10px;
+      padding: 9px 12px;
+      background: var(--card2);
+      color: var(--text);
+      cursor: pointer;
+    }
+
+    button:hover:not(:disabled) { filter: brightness(1.12); }
+    button:disabled { opacity: .45; cursor: not-allowed; }
+
+    .primary {
+      background: linear-gradient(135deg, #00d4e6, #00a8b7);
+      color: #061014;
+      font-weight: 700;
+      border-color: transparent;
+    }
+
+    .danger {
+      color: #ffb7b7;
+      border-color: rgba(255,92,92,.3);
+      background: rgba(255,92,92,.12);
+    }
+
+    .status {
+      display: inline-flex;
+      align-items: center;
+      gap: 8px;
+      padding: 9px 12px;
+      border-radius: 999px;
+      background: var(--card);
+      border: 1px solid var(--border);
+      color: var(--muted);
+      font-size: 13px;
+    }
+
+    .dot {
+      width: 9px;
+      height: 9px;
+      border-radius: 50%;
+      background: var(--orange);
+      box-shadow: 0 0 12px rgba(255,176,32,.75);
+    }
+
+    .dot.ok { background: var(--green); box-shadow: 0 0 12px rgba(47,209,124,.75); }
+    .dot.err { background: var(--red); box-shadow: 0 0 12px rgba(255,92,92,.75); }
+
+    .dashboard {
+      max-width: 1500px;
+      margin: 0 auto;
+      display: grid;
+      grid-template-columns: repeat(4, minmax(240px, 1fr));
+      gap: 16px;
+    }
+
+    .card {
+      min-height: 420px;
+      background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.012)), var(--card);
+      border: 1px solid rgba(255,255,255,.075);
+      border-radius: 16px;
+      padding: 16px;
+      box-shadow: 0 18px 42px rgba(0,0,0,.32);
+    }
+
+    .card-head {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      gap: 10px;
+      border-bottom: 1px solid var(--border);
+      padding-bottom: 12px;
+      margin-bottom: 12px;
+    }
+
+    .card-title h2 {
+      margin: 0;
+      color: var(--cyan);
+      font-size: 18px;
+    }
+
+    .card-title span {
+      color: var(--dim);
+      font-size: 12px;
+    }
+
+    .sub-btn {
+      font-size: 13px;
+      padding: 8px 10px;
+    }
+
+    .subscribed {
+      color: #b6f7d1;
+      background: rgba(47,209,124,.12);
+      border-color: rgba(47,209,124,.28);
+    }
+
+    .rows { display: grid; gap: 9px; }
+
+    .row {
+      display: grid;
+      grid-template-columns: 82px 1fr auto;
+      gap: 10px;
+      align-items: baseline;
+      padding: 10px;
+      border-radius: 12px;
+      background: rgba(0,0,0,.16);
+      border: 1px solid rgba(255,255,255,.05);
+    }
+
+    .name { color: var(--muted); font-size: 13px; }
+    .value {
+      color: var(--text);
+      font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+      font-size: 16px;
+      overflow-wrap: anywhere;
+    }
+    .unit { color: var(--dim); font-size: 12px; }
+    .path {
+      grid-column: 1 / -1;
+      color: var(--dim);
+      font-size: 11px;
+      font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+      overflow-wrap: anywhere;
+    }
+
+    .led-tools {
+      display: grid;
+      grid-template-columns: 74px 1fr 1fr;
+      gap: 8px;
+      margin-bottom: 10px;
+      align-items: center;
+    }
+
+    input[type="color"] {
+      width: 74px;
+      height: 40px;
+      border-radius: 10px;
+      background: var(--card2);
+      border: 1px solid var(--border);
+      padding: 4px;
+      cursor: pointer;
+    }
+
+    .patterns {
+      display: grid;
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+      gap: 8px;
+      margin-bottom: 12px;
+    }
+
+    .patterns button {
+      font-size: 12px;
+      padding: 8px 8px;
+      border-radius: 9px;
+    }
+
+    .matrix {
+      display: grid;
+      grid-template-columns: repeat(8, 1fr);
+      gap: 5px;
+      padding: 10px;
+      max-width: 360px;
+      background: rgba(0,0,0,.22);
+      border: 1px solid rgba(255,255,255,.06);
+      border-radius: 14px;
+      user-select: none;
+      touch-action: none;
+    }
+
+    .led {
+      aspect-ratio: 1 / 1;
+      border-radius: 5px;
+      background: #2b3036;
+      border: 1px solid rgba(255,255,255,.06);
+      cursor: crosshair;
+    }
+
+    .led:hover {
+      outline: 1px solid var(--cyan);
+    }
+
+    .led-status {
+      margin-top: 12px;
+      padding: 10px;
+      min-height: 40px;
+      color: var(--muted);
+      background: rgba(0,0,0,.16);
+      border: 1px solid rgba(255,255,255,.05);
+      border-radius: 12px;
+      font-size: 12px;
+      font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+      overflow-wrap: anywhere;
+    }
+
+    .log {
+      max-width: 1500px;
+      margin: 16px auto 0 auto;
+      padding: 12px 16px;
+      min-height: 44px;
+      max-height: 130px;
+      overflow-y: auto;
+      color: var(--muted);
+      background: rgba(23,28,34,.78);
+      border: 1px solid rgba(255,255,255,.06);
+      border-radius: 16px;
+      font-size: 12px;
+      font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+      white-space: pre-wrap;
+    }
+
+    @media (max-width: 1200px) {
+      .dashboard { grid-template-columns: repeat(2, minmax(260px, 1fr)); }
+    }
+
+    @media (max-width: 720px) {
+      body { padding: 12px; }
+      .dashboard { grid-template-columns: 1fr; }
+      .card { min-height: auto; }
+      input[type="text"] { width: 100%; }
+      .connect-box { width: 100%; justify-content: flex-start; }
+    }
+  </style>
+</head>
+<body>
+  <div class="top">
+    <div>
+      <h1>MOBKOM MQTT Dashboard</h1>
+      <div class="subtitle">Topics gruppiert nach GPS, SENS, IMU und LED-Matrix</div>
+    </div>
+
+    <div class="connect-box">
+      <input id="brokerInput" type="text" value="ws://192.168.0.95:9001" />
+      <button id="connectBtn" class="primary">Verbinden</button>
+      <button id="disconnectBtn" disabled>Trennen</button>
+      <span class="status"><span id="statusDot" class="dot"></span><span id="statusText">Nicht verbunden</span></span>
+    </div>
+  </div>
+
+  <main class="dashboard">
+    <section class="card">
+      <div class="card-head">
+        <div class="card-title"><h2>GPS</h2><span>MOBKOM/GPS/#</span></div>
+        <button class="sub-btn primary" data-sub="gps">Abonnieren</button>
+      </div>
+      <div class="rows" id="gpsRows"></div>
+    </section>
+
+    <section class="card">
+      <div class="card-head">
+        <div class="card-title"><h2>SENS</h2><span>MOBKOM/SENS/#</span></div>
+        <button class="sub-btn primary" data-sub="sens">Abonnieren</button>
+      </div>
+      <div class="rows" id="sensRows"></div>
+    </section>
+
+    <section class="card">
+      <div class="card-head">
+        <div class="card-title"><h2>IMU</h2><span>MOBKOM/IMU/#</span></div>
+        <button class="sub-btn primary" data-sub="imu">Abonnieren</button>
+      </div>
+      <div class="rows" id="imuRows"></div>
+    </section>
+
+    <section class="card">
+      <div class="card-head">
+        <div class="card-title"><h2>LED Matrix</h2><span>MOBKOM/LED/state_matrix</span></div>
+        <button class="sub-btn primary" data-sub="led">Abonnieren</button>
+      </div>
+
+      <div class="led-tools">
+        <input id="colorInput" type="color" value="#00e5ee" />
+        <button id="readAllBtn">Alle lesen</button>
+        <button id="clearBtn" class="danger">Clear</button>
+      </div>
+
+      <div class="patterns">
+        <button data-pattern="rainbow">Regenbogen</button>
+        <button data-pattern="wave">Welle</button>
+        <button data-pattern="heart">Herz</button>
+        <button data-pattern="smile">Smiley</button>
+        <button data-pattern="swiss">Schweiz</button>
+        <button data-pattern="checker">Schachbrett</button>
+        <button data-pattern="frame">Rahmen</button>
+        <button data-pattern="x">X</button>
+        <button data-pattern="plus">Plus</button>
+        <button data-pattern="diamond">Diamant</button>
+        <button data-pattern="spiral">Spirale</button>
+        <button data-pattern="random">Random</button>
+      </div>
+
+      <div id="matrix" class="matrix"></div>
+      <div id="ledStatus" class="led-status">Status: -</div>
+    </section>
+  </main>
+
+  <div id="log" class="log">Bereit.</div>
+
+  <script>
+    const TOPIC_LED_SET = "MOBKOM/LED/set_pixel";
+    const TOPIC_LED_GET = "MOBKOM/LED/get_pixel";
+    const TOPIC_LED_GET_MATRIX = "MOBKOM/LED/get_matrix";
+    const TOPIC_LED_CLEAR = "MOBKOM/LED/clear";
+    const TOPIC_LED_MATRIX = "MOBKOM/LED/set_matrix";
+    const TOPIC_LED_STATE = "MOBKOM/LED/state";
+    const TOPIC_LED_STATE_MATRIX = "MOBKOM/LED/state_matrix";
+
+    const groups = {
+      gps: {
+        filter: "MOBKOM/GPS/#",
+        container: "gpsRows",
+        rows: [
+          ["N", "MOBKOM/GPS/N", ""],
+          ["E", "MOBKOM/GPS/E", ""],
+          ["Höhe", "MOBKOM/GPS/hoehe", "m"],
+          ["Speed", "MOBKOM/GPS/geschwindigkeit", "km/h"]
+        ]
+      },
+      sens: {
+        filter: "MOBKOM/SENS/#",
+        container: "sensRows",
+        rows: [
+          ["Temp", "MOBKOM/SENS/temp", "°C"],
+          ["Hum", "MOBKOM/SENS/humidity", "%"],
+          ["Press", "MOBKOM/SENS/pressure", "hPa"]
+        ]
+      },
+      imu: {
+        filter: "MOBKOM/IMU/#",
+        container: "imuRows",
+        rows: [
+          ["Pitch", "MOBKOM/IMU/pitch", "°"],
+          ["Roll", "MOBKOM/IMU/roll", "°"],
+          ["Yaw", "MOBKOM/IMU/yaw", "°"],
+          ["X", "MOBKOM/IMU/x", ""],
+          ["Y", "MOBKOM/IMU/y", ""],
+          ["Z", "MOBKOM/IMU/z", ""]
+        ]
+      },
+      led: {
+        filter: "MOBKOM/LED/state_matrix"
+      }
+    };
+
+    const brokerInput = document.getElementById("brokerInput");
+    const connectBtn = document.getElementById("connectBtn");
+    const disconnectBtn = document.getElementById("disconnectBtn");
+    const statusDot = document.getElementById("statusDot");
+    const statusText = document.getElementById("statusText");
+    const colorInput = document.getElementById("colorInput");
+    const matrix = document.getElementById("matrix");
+    const ledStatus = document.getElementById("ledStatus");
+    const readAllBtn = document.getElementById("readAllBtn");
+    const clearBtn = document.getElementById("clearBtn");
+    const logBox = document.getElementById("log");
+
+    let client = null;
+    let isPainting = false;
+    let paintMode = "draw";
+    let patternBusy = false;
+
+    const subscribed = { gps: false, sens: false, imu: false, led: false };
+    const valueEls = {};
+    const ledEls = [];
+
+    function log(msg) {
+      const time = new Date().toLocaleTimeString();
+      logBox.textContent = `[${time}] ${msg}\n` + logBox.textContent;
+    }
+
+    function setStatus(text, state) {
+      statusText.textContent = text;
+      statusDot.classList.remove("ok", "err");
+      if (state === "ok") statusDot.classList.add("ok");
+      if (state === "err") statusDot.classList.add("err");
+    }
+
+    function formatValue(raw) {
+      const n = Number(raw);
+      if (!Number.isFinite(n)) return raw;
+      if (Math.abs(n) >= 10) return n.toFixed(2);
+      return n.toFixed(4);
+    }
+
+    function buildRows() {
+      for (const key of ["gps", "sens", "imu"]) {
+        const group = groups[key];
+        const container = document.getElementById(group.container);
+        container.innerHTML = "";
+
+        for (const [name, topic, unit] of group.rows) {
+          const row = document.createElement("div");
+          row.className = "row";
+
+          const nameEl = document.createElement("div");
+          nameEl.className = "name";
+          nameEl.textContent = name;
+
+          const valueEl = document.createElement("div");
+          valueEl.className = "value";
+          valueEl.textContent = "-";
+
+          const unitEl = document.createElement("div");
+          unitEl.className = "unit";
+          unitEl.textContent = unit;
+
+          const pathEl = document.createElement("div");
+          pathEl.className = "path";
+          pathEl.textContent = topic;
+
+          row.appendChild(nameEl);
+          row.appendChild(valueEl);
+          row.appendChild(unitEl);
+          row.appendChild(pathEl);
+          container.appendChild(row);
+
+          valueEls[topic] = valueEl;
+        }
+      }
+    }
+
+    function hexToRgb(hex) {
+      const h = hex.replace("#", "");
+      return [parseInt(h.slice(0,2), 16), parseInt(h.slice(2,4), 16), parseInt(h.slice(4,6), 16)];
+    }
+
+    function rgbToCss(rgb) {
+      return `rgb(${Number(rgb[0]) || 0}, ${Number(rgb[1]) || 0}, ${Number(rgb[2]) || 0})`;
+    }
+
+    function setLedUi(x, y, rgb) {
+      const idx = y * 8 + x;
+      if (ledEls[idx]) ledEls[idx].style.background = rgbToCss(rgb);
+    }
+
+    function publish(topic, payload) {
+      if (!client || !client.connected) {
+        log("Nicht verbunden. Publish abgebrochen.");
+        return false;
+      }
+      client.publish(topic, payload, { qos: 0, retain: false });
+      return true;
+    }
+
+    function sendPixel(x, y, rgb) {
+      setLedUi(x, y, rgb);
+      publish(TOPIC_LED_SET, JSON.stringify({ pos: [x, y], rgb: rgb }));
+    }
+
+    function readPixel(x, y) {
+      publish(TOPIC_LED_GET, JSON.stringify({ pos: [x, y] }));
+    }
+
+    function readAllPixels() {
+      publish(TOPIC_LED_GET_MATRIX, "ok");
+      ledStatus.textContent = "Status: get_matrix gesendet";
+    }
+
+    function clearMatrix() {
+      publish(TOPIC_LED_CLEAR, "clear");
+      for (let y = 0; y < 8; y++) for (let x = 0; x < 8; x++) setLedUi(x, y, [0,0,0]);
+      ledStatus.textContent = "Status: clear gesendet";
+    }
+
+    function applyMatrix(matrixData) {
+      if (!Array.isArray(matrixData) || matrixData.length !== 8) return false;
+
+      for (let y = 0; y < 8; y++) {
+        if (!Array.isArray(matrixData[y]) || matrixData[y].length !== 8) return false;
+
+        for (let x = 0; x < 8; x++) {
+          const rgb = matrixData[y][x];
+          if (!Array.isArray(rgb) || rgb.length < 3) return false;
+        }
+      }
+
+      for (let y = 0; y < 8; y++) {
+        for (let x = 0; x < 8; x++) {
+          setLedUi(x, y, matrixData[y][x]);
+        }
+      }
+
+      return true;
+    }
+
+    function handleLedState(payload) {
+      ledStatus.textContent = "Status: " + payload;
+      try {
+        const data = JSON.parse(payload);
+
+        // Format 1: {"matrix": [[[r,g,b], ...], ...]}
+        if (data && Array.isArray(data.matrix)) {
+          if (applyMatrix(data.matrix)) return;
+        }
+
+        // Format 2: [[[r,g,b], ...], ...]
+        if (applyMatrix(data)) return;
+
+        // Format 3: [{"pos":[x,y], "rgb":[r,g,b]}]
+        const list = Array.isArray(data) ? data : [data];
+        for (const item of list) {
+          if (!item || !Array.isArray(item.pos) || !Array.isArray(item.rgb)) continue;
+          const x = Number(item.pos[0]);
+          const y = Number(item.pos[1]);
+          if (x < 0 || x > 7 || y < 0 || y > 7) continue;
+          setLedUi(x, y, item.rgb);
+        }
+      } catch (_) {}
+    }
+
+    function createMatrix() {
+      matrix.innerHTML = "";
+      ledEls.length = 0;
+      for (let y = 0; y < 8; y++) {
+        for (let x = 0; x < 8; x++) {
+          const led = document.createElement("button");
+          led.type = "button";
+          led.className = "led";
+          led.title = `(${x}, ${y})`;
+
+          led.addEventListener("pointerdown", (ev) => {
+            ev.preventDefault();
+            isPainting = true;
+            paintMode = ev.button === 2 ? "erase" : "draw";
+            const rgb = paintMode === "erase" ? [0,0,0] : hexToRgb(colorInput.value);
+            sendPixel(x, y, rgb);
+          });
+
+          led.addEventListener("pointerenter", () => {
+            if (!isPainting) return;
+            const rgb = paintMode === "erase" ? [0,0,0] : hexToRgb(colorInput.value);
+            sendPixel(x, y, rgb);
+          });
+
+          led.addEventListener("contextmenu", (ev) => ev.preventDefault());
+          matrix.appendChild(led);
+          ledEls.push(led);
+        }
+      }
+    }
+
+    function hsvToRgb(h, s, v) {
+      let r = 0, g = 0, b = 0;
+      const i = Math.floor(h * 6);
+      const f = h * 6 - i;
+      const p = v * (1 - s);
+      const q = v * (1 - f * s);
+      const t = v * (1 - (1 - f) * s);
+      switch (i % 6) {
+        case 0: r = v; g = t; b = p; break;
+        case 1: r = q; g = v; b = p; break;
+        case 2: r = p; g = v; b = t; break;
+        case 3: r = p; g = q; b = v; break;
+        case 4: r = t; g = p; b = v; break;
+        case 5: r = v; g = p; b = q; break;
+      }
+      return [Math.round(r * 255), Math.round(g * 255), Math.round(b * 255)];
+    }
+
+    function sendPattern(name, fn) {
+      if (patternBusy) return;
+      patternBusy = true;
+
+      const matrixPayload = [];
+
+      for (let y = 0; y < 8; y++) {
+        const row = [];
+        for (let x = 0; x < 8; x++) {
+          const rgb = fn(x, y);
+          row.push(rgb);
+          setLedUi(x, y, rgb);
+        }
+        matrixPayload.push(row);
+      }
+
+      const ok = publish(TOPIC_LED_MATRIX, JSON.stringify({ matrix: matrixPayload }));
+      ledStatus.textContent = ok
+        ? "Status: Muster als ganze Matrix gesendet: " + name
+        : "Status: Muster konnte nicht gesendet werden";
+
+      patternBusy = false;
+    }
+
+    function runPattern(name) {
+      const c = hexToRgb(colorInput.value);
+      const off = [0,0,0];
+      const points = (arr) => new Set(arr.map(p => p.join(",")));
+
+      if (name === "rainbow") sendPattern("Regenbogen", (x,y) => hsvToRgb((x + y) / 14, 1, 1));
+      if (name === "wave") sendPattern("Welle", (x,y) => Math.abs(y - Math.round(3.5 + Math.sin(x * 0.9) * 2.2)) <= 1 ? c : off);
+      if (name === "checker") sendPattern("Schachbrett", (x,y) => (x + y) % 2 === 0 ? c : off);
+      if (name === "frame") sendPattern("Rahmen", (x,y) => (x === 0 || x === 7 || y === 0 || y === 7) ? c : off);
+      if (name === "x") sendPattern("X", (x,y) => (x === y || x + y === 7) ? c : off);
+      if (name === "plus") sendPattern("Plus", (x,y) => (x === 3 || x === 4 || y === 3 || y === 4) ? c : off);
+      if (name === "diamond") sendPattern("Diamant", (x,y) => (Math.abs(x - 3.5) + Math.abs(y - 3.5) <= 3) ? c : off);
+      if (name === "random") sendPattern("Random", () => hsvToRgb(Math.random(), 1, 0.7 + Math.random() * 0.3));
+      if (name === "swiss") sendPattern("Schweiz", (x,y) => (((x === 3 || x === 4) && y >= 1 && y <= 6) || ((y === 3 || y === 4) && x >= 1 && x <= 6)) ? [255,255,255] : [255,0,0]);
+
+      if (name === "heart") {
+        const set = points([[1,1],[2,1],[5,1],[6,1],[0,2],[3,2],[4,2],[7,2],[0,3],[7,3],[1,4],[6,4],[2,5],[5,5],[3,6],[4,6]]);
+        sendPattern("Herz", (x,y) => set.has(`${x},${y}`) ? c : off);
+      }
+
+      if (name === "smile") {
+        const set = points([[2,2],[5,2],[2,3],[5,3],[1,5],[2,6],[3,6],[4,6],[5,6],[6,5]]);
+        sendPattern("Smiley", (x,y) => set.has(`${x},${y}`) ? c : off);
+      }
+
+      if (name === "spiral") {
+        const set = points([[0,0],[1,0],[2,0],[3,0],[4,0],[5,0],[6,0],[7,0],[7,1],[7,2],[7,3],[7,4],[7,5],[7,6],[7,7],[6,7],[5,7],[4,7],[3,7],[2,7],[1,7],[0,7],[0,6],[0,5],[0,4],[0,3],[0,2],[0,1],[1,1],[2,1],[3,1],[4,1],[5,1],[6,1],[6,2],[6,3],[6,4],[6,5],[6,6],[5,6],[4,6],[3,6],[2,6],[1,6],[1,5],[1,4],[1,3],[1,2],[2,2],[3,2],[4,2],[5,2],[5,3],[5,4],[5,5],[4,5],[3,5],[2,5],[2,4],[2,3],[3,3],[4,3],[4,4],[3,4]]);
+        sendPattern("Spirale", (x,y) => set.has(`${x},${y}`) ? c : off);
+      }
+    }
+
+    function updateSubButton(key) {
+      const btn = document.querySelector(`[data-sub="${key}"]`);
+      if (!btn) return;
+      if (subscribed[key]) {
+        btn.textContent = "Abonniert";
+        btn.classList.remove("primary");
+        btn.classList.add("subscribed");
+      } else {
+        btn.textContent = "Abonnieren";
+        btn.classList.add("primary");
+        btn.classList.remove("subscribed");
+      }
+    }
+
+    function toggleSubscribe(key) {
+      if (!client || !client.connected) {
+        log("Erst verbinden.");
+        return;
+      }
+      const topic = groups[key].filter;
+      if (!subscribed[key]) {
+        client.subscribe(topic, { qos: 0 });
+        subscribed[key] = true;
+        log("Subscribed: " + topic);
+      } else {
+        client.unsubscribe(topic);
+        subscribed[key] = false;
+        log("Unsubscribed: " + topic);
+      }
+      updateSubButton(key);
+    }
+
+    function connectMqtt() {
+      const url = brokerInput.value.trim();
+      if (!url) return;
+
+      if (client) {
+        try { client.end(true); } catch (_) {}
+      }
+
+      setStatus("Verbinde...", "idle");
+      client = mqtt.connect(url, {
+        clientId: "mobkom_web_" + Math.random().toString(16).slice(2),
+        clean: true,
+        keepalive: 60,
+        connectTimeout: 8000,
+        reconnectPeriod: 2500
+      });
+
+      client.on("connect", () => {
+        setStatus("Verbunden", "ok");
+        connectBtn.disabled = true;
+        disconnectBtn.disabled = false;
+        log("MQTT verbunden: " + url);
+      });
+
+      client.on("message", (topic, message) => {
+        const payload = message.toString();
+        if (topic === TOPIC_LED_STATE || topic === TOPIC_LED_STATE_MATRIX) {
+          handleLedState(payload);
+        } else if (valueEls[topic]) {
+          valueEls[topic].textContent = formatValue(payload);
+        }
+      });
+
+      client.on("reconnect", () => setStatus("Verbinde neu...", "idle"));
+      client.on("close", () => {
+        setStatus("Getrennt", "idle");
+        connectBtn.disabled = false;
+        disconnectBtn.disabled = true;
+      });
+      client.on("error", (err) => {
+        setStatus("Fehler", "err");
+        log("MQTT Fehler: " + (err.message || err));
+      });
+    }
+
+    function disconnectMqtt() {
+      if (client) client.end();
+      for (const key of Object.keys(subscribed)) {
+        subscribed[key] = false;
+        updateSubButton(key);
+      }
+    }
+
+    buildRows();
+    createMatrix();
+
+    connectBtn.addEventListener("click", connectMqtt);
+    disconnectBtn.addEventListener("click", disconnectMqtt);
+    clearBtn.addEventListener("click", clearMatrix);
+    readAllBtn.addEventListener("click", readAllPixels);
+
+    for (const btn of document.querySelectorAll("[data-sub]")) {
+      btn.addEventListener("click", () => toggleSubscribe(btn.dataset.sub));
+    }
+
+    for (const btn of document.querySelectorAll("[data-pattern]")) {
+      btn.addEventListener("click", () => runPattern(btn.dataset.pattern));
+    }
+
+    window.addEventListener("pointerup", () => { isPainting = false; });
+    window.addEventListener("pointercancel", () => { isPainting = false; });
+  </script>
+</body>
+</html>
