Config Page

2026-06-07 10:03:34 +02:00
parent f205418640
commit faccbf55ce
16 changed files with 5375 additions and 69 deletions
--- a/public/config.html
+++ b/public/config.html
@@ -0,0 +1,80 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>AppRobotWebcam · Konfiguration</title>
+  <style>
+    * { box-sizing: border-box; margin: 0; padding: 0; }
+    body { background: #0f0f0f; color: #e0e0e0; font-family: monospace; }
+
+    header {
+      display: flex; align-items: center; gap: 12px;
+      padding: 10px 16px; background: #1a1a1a; border-bottom: 1px solid #333;
+    }
+    h1 { font-size: 1rem; font-weight: normal; letter-spacing: 0.05em; }
+
+    a.back {
+      margin-left: auto; color: #8cf; text-decoration: none;
+      border: 1px solid #468; padding: 5px 12px; border-radius: 3px; font-size: 0.82rem;
+    }
+    a.back:hover { background: #1d2d3d; }
+
+    main { padding: 16px; max-width: 760px; }
+
+    table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
+    th, td { text-align: left; padding: 8px 10px; border-bottom: 1px solid #2a2a2a; }
+    th { color: #888; font-weight: normal; }
+
+    select {
+      background: #1a1a1a; color: #e0e0e0; border: 1px solid #444;
+      padding: 4px 8px; font-family: monospace; font-size: 0.85rem; border-radius: 3px;
+    }
+    .warn-badge { color: #fb4; cursor: help; }
+    .cur { color: #777; }
+
+    .actions { margin-top: 16px; display: flex; align-items: center; gap: 14px; }
+    #saveBtn {
+      background: #2a4a2a; color: #8f8; border: 1px solid #4a8;
+      padding: 7px 16px; font-family: monospace; font-size: 0.85rem;
+      cursor: pointer; border-radius: 3px;
+    }
+    #saveBtn:hover:not(:disabled) { background: #3a6a3a; }
+    #saveBtn:disabled { opacity: 0.4; cursor: default; }
+
+    #status { font-size: 0.8rem; color: #888; }
+    #status.ok  { color: #6d6; }
+    #status.err { color: #f66; }
+
+    .hint { margin-top: 18px; font-size: 0.75rem; color: #666; line-height: 1.6; }
+  </style>
+</head>
+<body>
+  <header>
+    <h1>AppRobotWebcam · Konfiguration</h1>
+    <a class="back" href="/">← zum Viewer</a>
+  </header>
+
+  <main>
+    <table>
+      <thead>
+        <tr><th>ID</th><th>Name</th><th>Live-Auflösung</th><th>aktuell</th></tr>
+      </thead>
+      <tbody id="rows"><tr><td colspan="4">lädt…</td></tr></tbody>
+    </table>
+
+    <div class="actions">
+      <button id="saveBtn" disabled>Speichern &amp; Anwenden</button>
+      <span id="status">lädt…</span>
+    </div>
+
+    <p class="hint">
+      Auflösungs-Änderung ist sofort aktiv (laufende Streams frieren kurz ein).<br>
+      „Aus" bzw. Wiedereinschalten wirkt erst nach Neuladen des Viewers.<br>
+      ⚠ C920 (cam2) braucht bei kleinen 4:3-Auflösungen überdurchschnittlich Bandbreite (siehe doc/12).
+    </p>
+  </main>
+
+  <script src="config.js" defer></script>
+</body>
+</html>
--- a/public/config.js
+++ b/public/config.js
@@ -0,0 +1,94 @@
+'use strict';
+
+// Kamera-Konfiguration: liest GET /api/config, baut pro Kamera eine ComboBox
+// (Aus + erlaubte Auflösungen), POSTet die Auswahl zurück. Server wendet die
+// Auflösung sofort an (Hot-Reload) und persistiert in cameras.json.
+
+const OFF = '__off__';
+let liveSizes = [];
+
+async function load() {
+  const r = await fetch('/api/config');
+  if (!r.ok) throw new Error(`HTTP ${r.status}`);
+  const cfg = await r.json();
+  liveSizes = cfg.liveSizes || [];
+  render(cfg.cameras || []);
+  setStatus('bereit', '');
+  document.getElementById('saveBtn').disabled = false;
+}
+
+function render(cameras) {
+  const tbody = document.getElementById('rows');
+  tbody.innerHTML = '';
+  for (const cam of cameras) {
+    const tr = document.createElement('tr');
+
+    const tdId = document.createElement('td');
+    tdId.textContent = cam.id;
+
+    const tdName = document.createElement('td');
+    tdName.textContent = cam.name || cam.id;
+    if (cam.id === 'cam2') {
+      const w = document.createElement('span');
+      w.className = 'warn-badge';
+      w.textContent = ' ⚠';
+      w.title = 'C920: bei kleinen 4:3-Auflösungen überdurchschnittlich Bandbreite';
+      tdName.appendChild(w);
+    }
+
+    const tdSel = document.createElement('td');
+    const sel = document.createElement('select');
+    sel.dataset.id = cam.id;
+    const isOff = cam.stream === false;
+    sel.add(new Option('Aus', OFF, false, isOff));
+    for (const s of liveSizes) {
+      sel.add(new Option(s.replace('x', '×'), s, false, !isOff && cam.liveSize === s));
+    }
+    tdSel.appendChild(sel);
+
+    const tdCur = document.createElement('td');
+    tdCur.className = 'cur';
+    tdCur.textContent = isOff ? 'aus' : (cam.liveSize || '?');
+
+    tr.append(tdId, tdName, tdSel, tdCur);
+    tbody.appendChild(tr);
+  }
+}
+
+function collect() {
+  return Array.from(document.querySelectorAll('select[data-id]')).map((sel) => {
+    const id = sel.dataset.id;
+    if (sel.value === OFF) return { id, stream: false };
+    return { id, stream: true, liveSize: sel.value };
+  });
+}
+
+async function save() {
+  const btn = document.getElementById('saveBtn');
+  btn.disabled = true;
+  setStatus('speichert…', '');
+  try {
+    const r = await fetch('/api/config', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ cameras: collect() }),
+    });
+    const body = await r.json().catch(() => ({}));
+    if (!r.ok) throw new Error(body.error || `HTTP ${r.status}`);
+    render(body.cameras || []);
+    setStatus('gespeichert & angewendet', 'ok');
+  } catch (e) {
+    setStatus('Fehler: ' + e.message, 'err');
+  } finally {
+    btn.disabled = false;
+  }
+}
+
+function setStatus(text, cls) {
+  const el = document.getElementById('status');
+  el.textContent = text;
+  el.className = cls || '';
+}
+
+document.getElementById('saveBtn').addEventListener('click', save);
+load().catch((e) => setStatus('Laden fehlgeschlagen: ' + e.message, 'err'));
--- a/public/index.html
+++ b/public/index.html
@@ -24,6 +24,13 @@
    #snapAllBtn:hover:not(:disabled) { background: #3a6a3a; }
    #snapAllBtn:disabled { opacity: 0.4; cursor: default; }

+    /* Config-Link – rechts neben dem Snapshot-Button */
+    #configLink {
+      color: #8cf; text-decoration: none; border: 1px solid #468;
+      padding: 5px 12px; border-radius: 3px; font-size: 0.82rem; letter-spacing: 0.03em;
+    }
+    #configLink:hover { background: #1d2d3d; }
+
    /* Überlast-Banner */
    #notice {
      display: none; align-items: center; gap: 10px;
@@ -88,6 +95,7 @@
    <h1>AppRobotWebcam</h1>
    <span id="statusText">Verbinde...</span>
    <button id="snapAllBtn" disabled>⬇ Snapshot alle</button>
+    <a id="configLink" href="config.html" title="Kamera-Konfiguration">⚙ Config</a>
  </header>

  <div id="notice"></div>