appRobotHoming/public/calibration_marker.html

<div class="sections">

  <!-- ── Aktuelle Marker ──────────────────────────────────────────────────── -->
  <div class="section full">
    <h2>Aktuelle Marker <span class="status-badge open">aus robot.json</span></h2>
    <p style="font-size:12px;color:var(--muted);margin-top:8px;margin-bottom:10px">
      Arm-Marker aller Links (Board-Marker ausgeblendet). Spin = Drehung um die Marker-Normale in Grad.
    </p>
    <div id="marker-table-wrap">
      <p style="font-size:12px;color:var(--muted)">(wird geladen …)</p>
    </div>
    <div class="controls" style="margin-top:12px">
      <button id="btn-marker-reload">Neu laden</button>
    </div>
  </div>

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

    <!-- Auswahl Link / Marker -->
    <div style="margin-top:14px;display:flex;flex-wrap:wrap;align-items:center;gap:10px;font-size:12px;color:var(--text)">
      <label>Link
        <select id="marker-action-link"
          style="margin-left:6px;background:#1e293b;border:1px solid #334155;color:#c8cdd8;border-radius:3px;padding:3px 8px;font:inherit;font-size:12px;cursor:pointer">
          <option value="Arm1">Arm1</option>
          <option value="Ellbow">Ellbow</option>
          <option value="Arm2">Arm2</option>
          <option value="Hand">Hand</option>
          <option value="Palm">Palm</option>
          <option value="FingerA">FingerA</option>
          <option value="FingerB">FingerB</option>
        </select>
      </label>

      <label>Marker-ID
        <select id="marker-action-id"
          style="margin-left:6px;background:#1e293b;border:1px solid #334155;color:#c8cdd8;border-radius:3px;padding:3px 8px;font:inherit;font-size:12px;cursor:pointer">
          <option value="">– wählen –</option>
        </select>
      </label>

      <span id="marker-spin-current" style="color:var(--muted);font-size:11px">–</span>
    </div>

    <!-- Spin-Aktionen -->
    <div style="margin-top:12px">
      <p style="font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;margin-bottom:8px">
        Spin (Drehung um Marker-Normale)
      </p>
      <div style="display:flex;flex-wrap:wrap;gap:8px;align-items:center">
        <button id="btn-spin-minus90"
          style="background:#1e293b;color:#c8cdd8;border:1px solid #334155;border-radius:3px;padding:5px 14px;cursor:pointer;font:inherit;font-size:12px">
          −90°
        </button>
        <button id="btn-spin-plus90"
          style="background:#1e293b;color:#c8cdd8;border:1px solid #334155;border-radius:3px;padding:5px 14px;cursor:pointer;font:inherit;font-size:12px">
          +90°
        </button>
        <button id="btn-spin-180"
          style="background:#1e293b;color:#c8cdd8;border:1px solid #334155;border-radius:3px;padding:5px 14px;cursor:pointer;font:inherit;font-size:12px">
          180°
        </button>
        <span style="font-size:10px;color:var(--muted)">→ wird sofort in robot.json gespeichert und im Viewer aktualisiert</span>
      </div>
    </div>

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

  <!-- ── Homing ───────────────────────────────────────────────────────────── -->
  <div class="section full">
    <h2>Homing</h2>
    <p style="font-size:12px;color:var(--muted);margin-bottom:12px">
      Startet einen vollständigen Homing-Run (Foto aller Kameras → ArUco-Erkennung → Gelenk-Winkel).
      Der Viewer wird anschliessend mit den neuen Messwerten aktualisiert.
    </p>
    <div style="display:flex;align-items:center;gap:12px;flex-wrap:wrap">
      <button id="btn-marker-homing"
        style="background:#1d4ed8;color:#fff;border:none;border-radius:3px;padding:6px 16px;cursor:pointer;font:inherit;font-size:12px">
        Foto &amp; Homing berechnen
      </button>
      <span id="marker-homing-status" style="font-size:11px;color:var(--muted)"></span>
    </div>
  </div>

  <!-- ── Log ──────────────────────────────────────────────────────────────── -->
  <div class="section full">
    <h2>Log</h2>
    <textarea id="log-marker" readonly placeholder="(Aktionen und Homing-Output erscheinen hier)"
      style="height:140px"></textarea>
  </div>

  <!-- ── Viewer ───────────────────────────────────────────────────────────── -->
  <div class="section full">
    <h2>Viewer</h2>
    <p style="font-size:12px;color:var(--muted);margin-bottom:10px">
      Zeigt das Roboter-Modell mit den Arm-Markern (aus robot.json) und — nach einem Homing-Run —
      die beobachteten Marker als Kugeln mit Abweichungs-Linien.
      Nach einer Spin-Änderung oder einem Homing-Run wird der Viewer automatisch neu geladen.
    </p>
    <iframe
      id="marker-viewer-frame"
      src="/boardViewer.html?mode=homing"
      style="width:100%;height:740px;border:1px solid #334155;border-radius:6px;background:#0d0f13;display:block"
      title="Marker-Viewer"
    ></iframe>
  </div>

</div>