63 lines
2.7 KiB
HTML
63 lines
2.7 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="fr">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>COSMA NAV — Trajectory Viewer</title>
|
|
<style>
|
|
* { margin: 0; padding: 0; box-sizing: border-box; }
|
|
body { background: #06060f; color: #ccc; font-family: 'Courier New', monospace; overflow: hidden; }
|
|
canvas { display: block; }
|
|
#legend {
|
|
position: fixed; top: 16px; left: 16px;
|
|
background: rgba(4,4,16,0.85); padding: 14px 18px;
|
|
border-radius: 8px; border: 1px solid #223;
|
|
font-size: 12px; min-width: 180px; backdrop-filter: blur(4px);
|
|
}
|
|
#legend h3 { color: #8af; margin-bottom: 10px; font-size: 13px; letter-spacing: 1px; }
|
|
#legend label { display: flex; align-items: center; gap: 8px; cursor: pointer; margin: 5px 0; user-select: none; }
|
|
.swatch { width: 10px; height: 10px; border-radius: 2px; flex-shrink: 0; }
|
|
#info {
|
|
position: fixed; bottom: 16px; left: 16px;
|
|
background: rgba(4,4,16,0.85); padding: 8px 14px;
|
|
border-radius: 6px; font-size: 11px; color: #89a;
|
|
backdrop-filter: blur(4px); border: 1px solid #223;
|
|
}
|
|
#status {
|
|
position: fixed; top: 16px; right: 16px;
|
|
background: rgba(4,4,16,0.85); padding: 8px 14px;
|
|
border-radius: 6px; font-size: 11px; color: #67d;
|
|
backdrop-filter: blur(4px); border: 1px solid #223;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="legend">
|
|
<h3>COSMA NAV</h3>
|
|
<label><input type="checkbox" checked data-layer="usv_gps">
|
|
<span class="swatch" style="background:#3a9fff"></span>USV GPS</label>
|
|
<label><input type="checkbox" checked data-layer="auv_depth">
|
|
<span class="swatch" style="background:#44ffaa"></span>AUV depth</label>
|
|
<label><input type="checkbox" checked data-layer="usbl">
|
|
<span class="swatch" style="background:#ff6b35"></span>USBL fixes</label>
|
|
<label><input type="checkbox" checked data-layer="fused">
|
|
<span class="swatch" style="background:#ffffff"></span>Fused world</label>
|
|
<label><input type="checkbox" checked data-layer="lingbot_local">
|
|
<span class="swatch" style="background:#ffd700"></span>lingbot local</label>
|
|
<label><input type="checkbox" checked data-layer="frustums">
|
|
<span class="swatch" style="background:#ffd70066"></span>Frustums</label>
|
|
<label><input type="checkbox" checked data-layer="ply">
|
|
<span class="swatch" style="background:#556"></span>Point cloud</label>
|
|
</div>
|
|
<div id="status">Loading…</div>
|
|
<div id="info">Orbit: drag · Zoom: scroll · Pan: right-drag</div>
|
|
|
|
<script type="importmap">
|
|
{"imports":{
|
|
"three":"https://cdn.jsdelivr.net/npm/three@0.160/build/three.module.js",
|
|
"three/addons/":"https://cdn.jsdelivr.net/npm/three@0.160/examples/jsm/"
|
|
}}
|
|
</script>
|
|
<script type="module" src="/static/js/scene.js"></script>
|
|
</body>
|
|
</html>
|