112 lines
3.6 KiB
HTML
112 lines
3.6 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="de">
|
||
<head>
|
||
<meta charset="UTF-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||
<title>Homing – appRobotHoming</title>
|
||
<link rel="stylesheet" href="/styles.css">
|
||
<link rel="stylesheet" href="/calibration.css">
|
||
</head>
|
||
<body>
|
||
|
||
<!-- HEADER (analog calibration.html) -->
|
||
<div class="calib-topbar">
|
||
<a href="/">← Zurück</a>
|
||
<h1>Homing</h1>
|
||
</div>
|
||
|
||
<div style="max-width:1200px;margin:0 auto;padding:0 16px">
|
||
<div class="sections">
|
||
|
||
<!-- AKTIONEN -->
|
||
<div class="section full">
|
||
<h2>Aktionen</h2>
|
||
|
||
<div class="controls" style="flex-wrap:wrap;gap:12px;align-items:center">
|
||
<button id="btn-homing-run">📷 Foto & Homing berechnen</button>
|
||
<button id="btn-homing-send" disabled
|
||
style="opacity:.4;cursor:not-allowed"
|
||
title="Erst Homing ausführen">
|
||
✅ An Roboter senden
|
||
</button>
|
||
<span id="homing-status" class="status-badge open">○ Warte</span>
|
||
</div>
|
||
|
||
<!-- Fortschrittsbalken -->
|
||
<div id="homing-progress" style="display:none;margin-top:14px">
|
||
<div style="background:var(--border);border-radius:3px;height:5px;overflow:hidden">
|
||
<div id="homing-progress-bar"
|
||
style="height:100%;background:var(--accent);width:0%;transition:width .4s ease"></div>
|
||
</div>
|
||
<span id="homing-progress-text"
|
||
style="font-size:11px;color:var(--muted);display:block;margin-top:4px"></span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- AUSGABE / LOG -->
|
||
<div class="section full">
|
||
<h2>Ausgabe / Log</h2>
|
||
<textarea id="log-homing" readonly
|
||
placeholder="(Ausgabe erscheint hier sobald Homing gestartet wird)"
|
||
style="min-height:180px"></textarea>
|
||
</div>
|
||
|
||
<!-- ANALYSIS & REASONING -->
|
||
<div class="section full">
|
||
<h2>Analysis & Reasoning</h2>
|
||
<textarea id="homing-analysis" readonly
|
||
placeholder="(Zwischenergebnisse je Script erscheinen hier)"
|
||
style="min-height:120px;font-size:12px"></textarea>
|
||
</div>
|
||
|
||
<!-- RESULT RAW JSON + TREE VIEW -->
|
||
<div class="section half">
|
||
<h2>Result – Raw JSON</h2>
|
||
<div class="panel">
|
||
<textarea id="homing-result-json" readonly
|
||
placeholder="(Ergebnis erscheint hier)"
|
||
style="min-height:160px;font-size:12px"></textarea>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="section half">
|
||
<h2>Result – Tree View</h2>
|
||
<div class="panel" style="min-height:160px;padding:14px 16px">
|
||
<div id="homing-result-tree"
|
||
style="font-family:monospace;font-size:13px;line-height:2">
|
||
<span style="color:var(--muted);font-size:12px">(Ergebnis erscheint hier)</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- SNAPSHOT CSV -->
|
||
<div class="section full">
|
||
<h2>Snapshot CSV (Marker)</h2>
|
||
<div id="homing-csv-info"
|
||
style="font-size:11px;color:var(--muted);margin-bottom:8px">
|
||
Marker-Positionen aus aruco_marker_poses.json werden nach dem Homing angezeigt.
|
||
</div>
|
||
<div style="overflow-x:auto">
|
||
<table id="homing-csv-table"
|
||
style="font-size:12px;border-collapse:collapse;width:100%;min-width:500px"></table>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- SNAPSHOTS (Kamerabilder) -->
|
||
<div class="section full">
|
||
<h2>Snapshots (annotierte Kamerabilder)</h2>
|
||
<div id="homing-snapshots"
|
||
style="display:flex;gap:12px;flex-wrap:wrap">
|
||
<span style="color:var(--muted);font-size:12px">
|
||
(Bilder erscheinen nach dem Homing-Run)
|
||
</span>
|
||
</div>
|
||
</div>
|
||
|
||
</div><!-- /.sections -->
|
||
</div>
|
||
|
||
<script src="/homing.js"></script>
|
||
</body>
|
||
</html>
|