appRobotHoming/public/calibration_board.html

<div class="sections">

  <div class="section full">
    <h2>Board – ArUco &amp; Kamera-Pose</h2>
    <div class="info-grid" style="margin-top: 14px;">
      <span class="info-label">Ablauf</span>
      <span class="info-value" style="font-family: inherit; font-size: 13px; color: var(--muted);">
        Foto aufnehmen → ArUco erkennen → Kamera-Pose schätzen
      </span>
      <span class="info-label">Schritte</span>
      <span class="info-value" style="font-family: inherit; font-size: 13px; color: var(--muted);">
        1_detect_aruco_observations &nbsp;→&nbsp; 2_estimate_camera_from_observations
      </span>
      <span class="info-label">Letzter Run</span>
      <span class="info-value" id="board-last-run">–</span>
    </div>
    <div class="controls" style="margin-top: 16px;">
      <button id="btn-board-run">Board erkennen</button>
      <button disabled title="Folgt später">Ergebnis anzeigen</button>
    </div>
  </div>

  <!-- ── Aktionen ─────────────────────────────────────────────────────────── -->
  <div class="section full">
    <h2>Aktionen</h2>

    <!-- Aktion 1: Z-Bereich Zuordnung -->
    <div style="margin-top:14px">
      <p style="font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;margin-bottom:8px">
        Z-Bereich Zuordnung
      </p>
      <div style="display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:12px;color:var(--text)">
        z&nbsp;von
        <input id="act-z-min" type="number" step="0.5" placeholder="-30"
               style="width:72px;background:#1e293b;border:1px solid #334155;color:#c8cdd8;border-radius:3px;padding:3px 7px;font:inherit;font-size:12px">
        bis
        <input id="act-z-max" type="number" step="0.5" placeholder="-24"
               style="width:72px;background:#1e293b;border:1px solid #334155;color:#c8cdd8;border-radius:3px;padding:3px 7px;font:inherit;font-size:12px">
        mm &ensp;→&ensp; Set
        <input id="act-set" type="text" placeholder="A0"
               style="width:72px;background:#1e293b;border:1px solid #334155;color:#c8cdd8;border-radius:3px;padding:3px 7px;font:inherit;font-size:12px">
        Link
        <input id="act-link" type="text" placeholder="Board"
               style="width:90px;background:#1e293b;border:1px solid #334155;color:#c8cdd8;border-radius:3px;padding:3px 7px;font:inherit;font-size:12px">
        <button id="btn-act-assign"
                style="background:#1e293b;color:#c8cdd8;border:1px solid #4a9eff;border-radius:3px;padding:4px 14px;cursor:pointer;font:inherit;font-size:12px">
          Zuordnen
        </button>
      </div>
    </div>

    <!-- Aktion 2: Zuordnung entfernen -->
    <div style="margin-top:14px">
      <p style="font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;margin-bottom:8px">
        Zuordnung entfernen
      </p>
      <div style="display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:12px;color:var(--text)">
        ID
        <input id="act-rm-id" type="number" placeholder="z.B. 46"
               style="width:90px;background:#1e293b;border:1px solid #334155;color:#c8cdd8;border-radius:3px;padding:3px 7px;font:inherit;font-size:12px">
        aus
        <label style="cursor:pointer;display:flex;align-items:center;gap:4px">
          <input type="radio" name="act-rm-from" value="set" checked> Set
        </label>
        <label style="cursor:pointer;display:flex;align-items:center;gap:4px">
          <input type="radio" name="act-rm-from" value="link"> Link&nbsp;<span style="color:var(--muted);font-size:10px">(nur falls Set leer)</span>
        </label>
        <button id="btn-act-remove"
                style="background:#1e293b;color:#c8cdd8;border:1px solid #ef4444;border-radius:3px;padding:4px 14px;cursor:pointer;font:inherit;font-size:12px">
          Entfernen
        </button>
      </div>
    </div>

    <!-- Ergebnis-Zeile -->
    <div id="act-result" style="margin-top:10px;font-size:11px;min-height:18px;color:var(--muted)"></div>
  </div>

  <div class="section full">
    <h2>Ausgabe / Log</h2>
    <textarea id="log-board" readonly placeholder="(Ausgabe erscheint hier)"></textarea>
  </div>

  <div class="section full">
    <h2>Board-Viewer</h2>
    <p style="font-size: 12px; color: var(--muted); margin-bottom: 10px;">
      Wird nach jedem Board-Run automatisch aktualisiert.
    </p>
    <iframe
      id="board-viewer-frame"
      src="/boardViewer.html"
      style="width: 100%; height: 740px; border: 1px solid #334155; border-radius: 6px; background: #0d0f13; display: block;"
      title="Board-Viewer"
    ></iframe>
  </div>

  <div class="section full">
    <h2>Marker-Positionen (letzter Run)</h2>
    <div id="board-marker-table-wrap" style="overflow-x:auto;margin-top:10px;">
      <p style="font-size:12px;color:var(--muted);padding:4px 0">(Erscheint nach einem Board-Run mit ≥2 Kameras)</p>
    </div>
  </div>

</div>