591 lines
23 KiB
HTML
591 lines
23 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="fr">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>COSMA — NAV Viewer v4</title>
|
|
<meta name="viewport" content="width=device-width,initial-scale=1">
|
|
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"/>
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/15.7.1/nouislider.min.css"/>
|
|
<style>
|
|
* { box-sizing: border-box; margin: 0; padding: 0; }
|
|
body { font-family: monospace; background: #1a1a2e; color: #e0e0e0; display: flex; flex-direction: column; min-height: 100vh; }
|
|
#map { flex: 1; min-height: 0; }
|
|
#controls {
|
|
background: #16213e;
|
|
padding: 10px 14px 8px;
|
|
border-top: 1px solid #0f3460;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 7px;
|
|
flex-shrink: 0;
|
|
}
|
|
#top-row {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
flex-wrap: wrap;
|
|
}
|
|
#title { font-size: 13px; font-weight: bold; color: #e94560; white-space: nowrap; }
|
|
#stats { font-size: 11px; color: #a0c4ff; flex: 1; }
|
|
#btn-reset {
|
|
background: #0f3460; border: 1px solid #00b4d8; color: #00b4d8;
|
|
padding: 3px 10px; cursor: pointer; font-family: monospace; font-size: 11px;
|
|
border-radius: 2px;
|
|
}
|
|
#btn-reset:hover { background: #00b4d8; color: #1a1a2e; }
|
|
#range-row { display: flex; align-items: center; gap: 10px; }
|
|
#range-label { font-size: 10px; color: #666; white-space: nowrap; }
|
|
#range-slider-wrap { flex: 1; padding: 4px 0; }
|
|
#range-dates { display: flex; justify-content: space-between; font-size: 10px; color: #a0c4ff; }
|
|
#cursor-row { display: flex; align-items: center; gap: 10px; }
|
|
#cursor-label { font-size: 10px; color: #666; white-space: nowrap; }
|
|
#cursor-slider-wrap { flex: 1; }
|
|
#cursor-info { font-size: 11px; color: #e0e0e0; min-width: 280px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
|
|
.noUi-target { background: #0f3460; border: none; border-radius: 2px; box-shadow: none; }
|
|
.noUi-horizontal { height: 6px; }
|
|
.noUi-connect { background: #00b4d8; }
|
|
.noUi-handle {
|
|
background: #00b4d8; border: 2px solid #fff;
|
|
border-radius: 50%; width: 14px !important; height: 14px !important;
|
|
top: -5px !important; right: -7px !important;
|
|
box-shadow: none; cursor: pointer;
|
|
}
|
|
.noUi-handle::before, .noUi-handle::after { display: none; }
|
|
#cursor-slider .noUi-connect { background: #e94560; }
|
|
#cursor-slider .noUi-handle { background: #e94560; }
|
|
#legend {
|
|
position: absolute; bottom: 210px; left: 10px; z-index: 1000;
|
|
background: rgba(22,33,62,0.92); padding: 8px 10px; border: 1px solid #0f3460;
|
|
font-size: 11px; font-family: monospace;
|
|
}
|
|
.legend-item { display: flex; align-items: center; gap: 6px; margin: 2px 0; }
|
|
.legend-dot { width: 14px; height: 4px; border-radius: 2px; flex-shrink: 0; }
|
|
.legend-dashed { border-top: 2px dashed #888; width: 14px; flex-shrink: 0; }
|
|
/* USBL stats panel */
|
|
#usbl-panel {
|
|
position: absolute; top: 10px; left: 50px; z-index: 1000;
|
|
background: rgba(22,33,62,0.88); padding: 8px 12px; border: 1px solid #0f3460;
|
|
font-size: 11px; font-family: monospace; min-width: 180px;
|
|
display: none;
|
|
}
|
|
#usbl-panel .uprow { display: flex; justify-content: space-between; gap: 16px; margin: 1px 0; }
|
|
#usbl-panel .uplabel { color: #666; }
|
|
#usbl-panel .upval { color: #ff8800; font-weight: bold; }
|
|
#usbl-panel .badge {
|
|
display: inline-block; background: #ff8800; color: #1a1a2e;
|
|
font-size: 9px; font-weight: bold; padding: 1px 4px; border-radius: 2px; margin-top: 4px;
|
|
}
|
|
/* Layer toggles */
|
|
#layer-toggles {
|
|
display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
|
|
}
|
|
.layer-btn {
|
|
font-family: monospace; font-size: 10px; padding: 2px 8px; cursor: pointer;
|
|
border-radius: 2px; border: 1px solid; background: transparent;
|
|
}
|
|
.layer-btn.active { opacity: 1; }
|
|
.layer-btn.inactive { opacity: 0.35; }
|
|
#btn-usv { color: #00b4d8; border-color: #00b4d8; }
|
|
#btn-auv { color: #ff8800; border-color: #ff8800; }
|
|
#btn-vec { color: #888; border-color: #888; }
|
|
#btn-usbl-panel { color: #aaa; border-color: #444; }
|
|
#graphs-section { background:#12122a; border-top:1px solid #0f3460; overflow-y:auto; max-height:40vh; flex-shrink:0; }
|
|
.chart-container { padding:6px 12px 4px; border-bottom:1px solid #0f3460; }
|
|
.chart-container canvas { display:block; }
|
|
.chart-title { font-size:10px; color:#a0c4ff; margin-bottom:2px; font-family:monospace; }
|
|
</style>
|
|
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-annotation@3/dist/chartjs-plugin-annotation.min.js"></script>
|
|
</head>
|
|
<body>
|
|
<div id="map"></div>
|
|
<div id="legend"></div>
|
|
<div id="usbl-panel">
|
|
<div class="uprow"><span class="uplabel">Dist</span><span class="upval" id="up-dist">—</span></div>
|
|
<div class="uprow"><span class="uplabel">Az (rel)</span><span class="upval" id="up-az">—</span></div>
|
|
<div class="uprow"><span class="uplabel">Elev</span><span class="upval" id="up-elev">—</span></div>
|
|
<div class="uprow"><span class="uplabel">SNR</span><span class="upval" id="up-snr">—</span></div>
|
|
<div><span class="badge">REL HEADING</span></div>
|
|
</div>
|
|
<div id="controls">
|
|
<div id="top-row">
|
|
<span id="title">COSMA NAV v3</span>
|
|
<span id="stats">Chargement...</span>
|
|
<div id="layer-toggles">
|
|
<button class="layer-btn active" id="btn-usv" onclick="toggleLayer('usv')">USV track</button>
|
|
<button class="layer-btn active" id="btn-auv" onclick="toggleLayer('auv')">AUV track</button>
|
|
<button class="layer-btn active" id="btn-vec" onclick="toggleLayer('vec')">Vecteur USBL</button>
|
|
<button class="layer-btn active" id="btn-usbl-panel" onclick="toggleLayer('panel')">Stats USBL</button>
|
|
</div>
|
|
<button id="btn-reset">Reset window</button>
|
|
</div>
|
|
<div id="range-row">
|
|
<span id="range-label">Fenetre</span>
|
|
<div id="range-slider-wrap"><div id="range-slider"></div></div>
|
|
</div>
|
|
<div id="range-dates">
|
|
<span id="date-start">-</span>
|
|
<span id="date-end">-</span>
|
|
</div>
|
|
<div id="cursor-row">
|
|
<span id="cursor-label">Curseur</span>
|
|
<div id="cursor-slider-wrap"><div id="cursor-slider"></div></div>
|
|
<div id="cursor-info">-</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/15.7.1/nouislider.min.js"></script>
|
|
<script>
|
|
// == Constants ==
|
|
const COLORS = ['#00b4d8','#e94560','#06d6a0','#ffd166','#a855f7','#f97316'];
|
|
const AUV_COLOR = '#ff8800';
|
|
|
|
// == Map init ==
|
|
const map = L.map('map', { zoomControl: true });
|
|
const osm = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
|
|
attribution: '(c) OpenStreetMap contributors', maxZoom: 19,
|
|
});
|
|
osm.addTo(map);
|
|
const seamarks = L.tileLayer('https://tiles.openseamap.org/seamark/{z}/{x}/{y}.png', {
|
|
attribution: '(c) OpenSeaMap', maxZoom: 18, opacity: 0.8,
|
|
});
|
|
const gebco = L.tileLayer(
|
|
'https://tiles.arcgis.com/tiles/C8EMgrsFcRFL6LrL/arcgis/rest/services/GEBCO_basemap_NCEI/MapServer/tile/{z}/{y}/{x}',
|
|
{ attribution: 'GEBCO / NCEI', maxZoom: 13, opacity: 0.6 }
|
|
);
|
|
L.control.layers(
|
|
{ 'OpenStreetMap': osm },
|
|
{ 'OpenSeaMap (balises)': seamarks, 'GEBCO (bathymetrie)': gebco },
|
|
{ collapsed: false }
|
|
).addTo(map);
|
|
|
|
// == Arrow marker ==
|
|
function makeArrowIcon(heading, color) {
|
|
color = color || '#e94560';
|
|
const svg = `<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="-16 -16 32 32">
|
|
<g transform="rotate(${heading || 0})">
|
|
<polygon points="0,-12 6,8 0,4 -6,8" fill="${color}" stroke="#fff" stroke-width="1.5"/>
|
|
</g>
|
|
</svg>`;
|
|
return L.divIcon({ html: svg, className: '', iconSize: [32,32], iconAnchor: [16,16] });
|
|
}
|
|
function makeAuvIcon() {
|
|
const svg = `<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="-10 -10 20 20">
|
|
<circle r="7" fill="${AUV_COLOR}" stroke="#fff" stroke-width="2"/>
|
|
<circle r="2" fill="#fff"/>
|
|
</svg>`;
|
|
return L.divIcon({ html: svg, className: '', iconSize: [20,20], iconAnchor: [10,10] });
|
|
}
|
|
|
|
// == Binary search ==
|
|
function bisectLeft(arr, val) {
|
|
let lo = 0, hi = arr.length;
|
|
while (lo < hi) {
|
|
const mid = (lo + hi) >> 1;
|
|
if (arr[mid].t_ms < val) lo = mid + 1; else hi = mid;
|
|
}
|
|
return lo;
|
|
}
|
|
function findNearest(arr, tms) {
|
|
if (!arr.length) return null;
|
|
let i = bisectLeft(arr, tms);
|
|
if (i === 0) return arr[0];
|
|
if (i >= arr.length) return arr[arr.length - 1];
|
|
return (arr[i].t_ms - tms) < (tms - arr[i-1].t_ms) ? arr[i] : arr[i-1];
|
|
}
|
|
|
|
// == State ==
|
|
let allPoints = [];
|
|
let usblPoints = []; // from usbl.json (sorted by t_ms)
|
|
let manifest = null;
|
|
let usblMeta = null;
|
|
let trackLayers = [];
|
|
let auvTrackLayer = null;
|
|
let windowPoints = [];
|
|
let usblWindow = [];
|
|
|
|
// == Graph state ==
|
|
let charts = {};
|
|
let mcapSignals = null;
|
|
let usvPwm = null;
|
|
|
|
const PWM_COLORS_AUV = ['#ff8800','#ffd166','#06d6a0','#00b4d8','#a855f7','#f97316','#e94560','#88c0d0'];
|
|
const PWM_COLORS_USV = ['#00b4d8','#0096b4','#0077a0','#005f8c','#ffd166','#e6b800','#c49a00','#a07d00'];
|
|
|
|
function makeChartOptions() {
|
|
return {
|
|
animation: false, parsing: false, responsive: true, maintainAspectRatio: false,
|
|
plugins: {
|
|
legend: { display: false, labels: { color:'#a0c4ff', font:{size:9,family:'monospace'}, boxWidth:12 } },
|
|
annotation: { annotations: {} }
|
|
},
|
|
scales: {
|
|
x: { type:'linear', ticks:{ color:'#666', font:{size:9,family:'monospace'}, maxTicksLimit:8,
|
|
callback:(v)=>new Date(v).toISOString().substr(11,8) }, grid:{color:'#1a1a3e'} },
|
|
y: { ticks:{ color:'#666', font:{size:9,family:'monospace'}, maxTicksLimit:5 }, grid:{color:'#1a1a3e'} },
|
|
},
|
|
};
|
|
}
|
|
|
|
function initCharts() {
|
|
const mkDs = (lbl, col) => ({ label:lbl, data:[], borderColor:col, borderWidth:1.5, pointRadius:0, tension:0 });
|
|
charts.depth = new Chart(document.getElementById('chart-depth'), { type:'line', data:{datasets:[mkDs('depth','#06d6a0')]}, options:makeChartOptions() });
|
|
charts.pwmAuv = new Chart(document.getElementById('chart-pwm-auv'), { type:'line', data:{datasets:[]}, options:makeChartOptions() });
|
|
charts.pwmUsv = new Chart(document.getElementById('chart-pwm-usv'), { type:'line', data:{datasets:[]}, options:makeChartOptions() });
|
|
charts.usbl = new Chart(document.getElementById('chart-usbl'), { type:'line', data:{datasets:[mkDs('dist','#a855f7')]}, options:makeChartOptions() });
|
|
}
|
|
|
|
function updateGraphCursor(t_ms) {
|
|
const ann = { type:'line', xMin:t_ms, xMax:t_ms, borderColor:'#e94560', borderWidth:1.5, borderDash:[4,2] };
|
|
for (const c of Object.values(charts)) { c.options.plugins.annotation.annotations = {cursor:ann}; c.update('none'); }
|
|
}
|
|
|
|
function updateGraphWindow(t0, t1) {
|
|
for (const c of Object.values(charts)) { c.options.scales.x.min=t0; c.options.scales.x.max=t1; c.update('none'); }
|
|
}
|
|
|
|
function populateCharts() {
|
|
if (mcapSignals) {
|
|
if (mcapSignals.depth) {
|
|
charts.depth.data.datasets[0].data = mcapSignals.depth.map(p=>({x:p.t,y:p.v}));
|
|
charts.depth.update('none');
|
|
}
|
|
if (mcapSignals.pwm_auv) {
|
|
const {channels,samples} = mcapSignals.pwm_auv;
|
|
charts.pwmAuv.data.datasets = channels.map((ch,i)=>({
|
|
label:'Ch'+ch, data:samples.map(s=>({x:s.t,y:s.v[i]})),
|
|
borderColor:PWM_COLORS_AUV[i%8], borderWidth:1, pointRadius:0, tension:0
|
|
}));
|
|
charts.pwmAuv.options.plugins.legend.display = channels.length > 1;
|
|
charts.pwmAuv.update('none');
|
|
}
|
|
}
|
|
if (usvPwm && usvPwm.M) {
|
|
const keys = Object.keys(usvPwm.M).sort();
|
|
charts.pwmUsv.data.datasets = keys.map((k,i)=>({
|
|
label:k, data:usvPwm.M[k].map(p=>({x:p.t,y:p.v})),
|
|
borderColor:PWM_COLORS_USV[i%8], borderWidth:1, pointRadius:0, tension:0
|
|
}));
|
|
charts.pwmUsv.options.plugins.legend.display = keys.length > 1;
|
|
charts.pwmUsv.update('none');
|
|
}
|
|
if (usblPoints && usblPoints.length) {
|
|
charts.usbl.data.datasets[0].data = usblPoints.map(p=>({x:p.t_ms, y:p.dist!==undefined?p.dist:p.distance}));
|
|
charts.usbl.update('none');
|
|
}
|
|
}
|
|
let cursorMarker = null;
|
|
let auvMarker = null;
|
|
let usblVector = null;
|
|
let rangeSlider = null;
|
|
let cursorSlider = null;
|
|
let tMin = 0, tMax = 0;
|
|
|
|
// layer visibility
|
|
const layerVis = { usv: true, auv: true, vec: true, panel: true };
|
|
|
|
// == Layer toggles ==
|
|
function toggleLayer(name) {
|
|
layerVis[name] = !layerVis[name];
|
|
const btn = document.getElementById('btn-' + (name === 'panel' ? 'usbl-panel' : name));
|
|
btn.classList.toggle('active', layerVis[name]);
|
|
btn.classList.toggle('inactive', !layerVis[name]);
|
|
|
|
if (name === 'usv') {
|
|
trackLayers.forEach(l => layerVis.usv ? map.addLayer(l) : map.removeLayer(l));
|
|
}
|
|
if (name === 'auv') {
|
|
if (auvTrackLayer) { layerVis.auv ? map.addLayer(auvTrackLayer) : map.removeLayer(auvTrackLayer); }
|
|
if (auvMarker) { layerVis.auv ? map.addLayer(auvMarker) : map.removeLayer(auvMarker); }
|
|
}
|
|
if (name === 'vec') {
|
|
if (usblVector) { layerVis.vec ? map.addLayer(usblVector) : map.removeLayer(usblVector); }
|
|
}
|
|
if (name === 'panel') {
|
|
document.getElementById('usbl-panel').style.display = layerVis.panel ? 'block' : 'none';
|
|
}
|
|
}
|
|
|
|
// == Utils ==
|
|
function fmtMs(ms) {
|
|
if (!ms) return '-';
|
|
return new Date(ms).toISOString().replace('T',' ').slice(0,19) + ' UTC';
|
|
}
|
|
function fmtDuration(ms) {
|
|
const s = Math.floor(ms / 1000);
|
|
const h = Math.floor(s / 3600);
|
|
const m = Math.floor((s % 3600) / 60);
|
|
const sc = s % 60;
|
|
return h > 0 ? `${h}h${String(m).padStart(2,'0')}m` : `${m}m${String(sc).padStart(2,'0')}s`;
|
|
}
|
|
|
|
// == Range window filtering ==
|
|
function filterPointsInWindow(arr, startMs, endMs) {
|
|
const lo = bisectLeft(arr, startMs);
|
|
const result = [];
|
|
for (let i = lo; i < arr.length && arr[i].t_ms <= endMs; i++) result.push(arr[i]);
|
|
return result;
|
|
}
|
|
|
|
function rebuildAuvTrackLayer() {
|
|
if (auvTrackLayer) { map.removeLayer(auvTrackLayer); auvTrackLayer = null; }
|
|
if (usblWindow.length < 2) return;
|
|
const coords = usblWindow.map(p => [p.auv_lat, p.auv_lon]);
|
|
auvTrackLayer = L.polyline(coords, { color: AUV_COLOR, weight: 2.5, opacity: 0.85 });
|
|
if (layerVis.auv) auvTrackLayer.addTo(map);
|
|
}
|
|
|
|
function updateWindow(startMs, endMs) {
|
|
document.getElementById('date-start').textContent = fmtMs(startMs);
|
|
document.getElementById('date-end').textContent = fmtMs(endMs);
|
|
|
|
windowPoints = filterPointsInWindow(allPoints, startMs, endMs);
|
|
usblWindow = filterPointsInWindow(usblPoints, startMs, endMs);
|
|
|
|
// Rebuild USV track layers by session
|
|
trackLayers.forEach(l => map.removeLayer(l));
|
|
trackLayers = [];
|
|
if (manifest) {
|
|
const sessionGroups = {};
|
|
windowPoints.forEach(p => {
|
|
if (!sessionGroups[p.source]) sessionGroups[p.source] = [];
|
|
sessionGroups[p.source].push(p);
|
|
});
|
|
manifest.sessions.forEach((sess, i) => {
|
|
const pts = sessionGroups[sess.source_name] || [];
|
|
if (pts.length < 2) return;
|
|
const coords = pts.map(p => [p.lat, p.lon]);
|
|
const color = COLORS[i % COLORS.length];
|
|
const layer = L.polyline(coords, { color, weight: 2.5, opacity: 0.85 });
|
|
trackLayers.push(layer);
|
|
if (layerVis.usv) layer.addTo(map);
|
|
});
|
|
}
|
|
|
|
// Rebuild AUV track
|
|
rebuildAuvTrackLayer();
|
|
|
|
// Update cursor slider range
|
|
if (cursorSlider && windowPoints.length > 0) {
|
|
cursorSlider.updateOptions({
|
|
range: { min: 0, max: Math.max(windowPoints.length - 1, 1) },
|
|
});
|
|
cursorSlider.set(0);
|
|
}
|
|
|
|
updateStats(startMs, endMs);
|
|
}
|
|
|
|
function updateStats(startMs, endMs) {
|
|
const dur = endMs - startMs;
|
|
document.getElementById('stats').textContent =
|
|
`USV: ${windowPoints.length} pts | AUV: ${usblWindow.length} pts | ${fmtDuration(dur)} | sessions: ${manifest ? manifest.n_sessions : '?'}`;
|
|
}
|
|
|
|
// == Cursor ==
|
|
function updateCursor(idx) {
|
|
idx = Math.max(0, Math.min(idx, windowPoints.length - 1));
|
|
const p = windowPoints[idx];
|
|
if (!p) return;
|
|
|
|
const sessIdx = manifest ? manifest.sessions.findIndex(s => s.source_name === p.source) : 0;
|
|
const color = COLORS[Math.max(0, sessIdx) % COLORS.length];
|
|
|
|
// USV cursor marker
|
|
if (!cursorMarker) {
|
|
cursorMarker = L.marker([p.lat, p.lon], { icon: makeArrowIcon(p.heading || 0, color), zIndexOffset: 1000 }).addTo(map);
|
|
} else {
|
|
cursorMarker.setLatLng([p.lat, p.lon]);
|
|
cursorMarker.setIcon(makeArrowIcon(p.heading || 0, color));
|
|
}
|
|
|
|
const hdg = p.heading !== null && p.heading !== undefined ? `${p.heading.toFixed(1)}` : 'N/A';
|
|
document.getElementById('cursor-info').textContent =
|
|
`[${idx+1}/${windowPoints.length}] ${p.t} | ${p.lat.toFixed(6)}, ${p.lon.toFixed(6)} | cap: ${hdg} | ${p.source}`;
|
|
|
|
// Find nearest USBL point
|
|
const nearest = findNearest(usblWindow, p.t_ms);
|
|
if (nearest) {
|
|
updateAuvCursor(nearest, p);
|
|
} else {
|
|
clearAuvCursor();
|
|
}
|
|
}
|
|
|
|
function updateAuvCursor(up, usvPt) {
|
|
// AUV marker
|
|
if (layerVis.auv) {
|
|
if (!auvMarker) {
|
|
auvMarker = L.marker([up.auv_lat, up.auv_lon], { icon: makeAuvIcon(), zIndexOffset: 900 }).addTo(map);
|
|
} else {
|
|
if (!map.hasLayer(auvMarker)) map.addLayer(auvMarker);
|
|
auvMarker.setLatLng([up.auv_lat, up.auv_lon]);
|
|
}
|
|
}
|
|
|
|
// USBL vector USV -> AUV
|
|
const usvPos = usvPt ? [usvPt.lat, usvPt.lon] : [up.usv_lat, up.usv_lon];
|
|
const auvPos = [up.auv_lat, up.auv_lon];
|
|
if (layerVis.vec) {
|
|
if (!usblVector) {
|
|
usblVector = L.polyline([usvPos, auvPos], {
|
|
color: '#888', weight: 1.5, dashArray: '6,4', opacity: 0.9
|
|
}).addTo(map);
|
|
} else {
|
|
if (!map.hasLayer(usblVector)) map.addLayer(usblVector);
|
|
usblVector.setLatLngs([usvPos, auvPos]);
|
|
}
|
|
usblVector.bindTooltip(`Dist ${up.dist.toFixed(1)}m / Az ${up.az.toFixed(1)}deg`, { permanent: false, className: 'usbl-tip' });
|
|
}
|
|
|
|
// Stats panel
|
|
if (layerVis.panel) {
|
|
document.getElementById('usbl-panel').style.display = 'block';
|
|
document.getElementById('up-dist').textContent = `${up.dist.toFixed(2)} m`;
|
|
document.getElementById('up-az').textContent = `${up.az.toFixed(1)} deg`;
|
|
document.getElementById('up-elev').textContent = `${up.elev.toFixed(1)} deg`;
|
|
document.getElementById('up-snr').textContent = `${up.snr.toFixed(1)}`;
|
|
}
|
|
}
|
|
|
|
function clearAuvCursor() {
|
|
if (auvMarker) { map.removeLayer(auvMarker); auvMarker = null; }
|
|
if (usblVector) { map.removeLayer(usblVector); usblVector = null; }
|
|
}
|
|
|
|
// == Legend ==
|
|
function buildLegend() {
|
|
const el = document.getElementById('legend');
|
|
el.style.display = 'block';
|
|
let html = '';
|
|
if (manifest) {
|
|
manifest.sessions.forEach((s, i) => {
|
|
const color = COLORS[i % COLORS.length];
|
|
const name = s.source_name.replace('_navigation_log','').replace('.csv','');
|
|
html += `<div class="legend-item"><div class="legend-dot" style="background:${color}"></div><span>USV ${name}</span></div>`;
|
|
});
|
|
}
|
|
html += `<div class="legend-item"><div class="legend-dot" style="background:${AUV_COLOR}"></div><span>AUV (USBL proj.)</span></div>`;
|
|
html += `<div class="legend-item"><div class="legend-dashed"></div><span>Vecteur USBL</span></div>`;
|
|
el.innerHTML = html;
|
|
}
|
|
|
|
// == Init sliders ==
|
|
function initSliders() {
|
|
rangeSlider = noUiSlider.create(document.getElementById('range-slider'), {
|
|
start: [tMin, tMax],
|
|
connect: true,
|
|
range: { min: tMin, max: tMax },
|
|
step: 1000,
|
|
behaviour: 'drag',
|
|
});
|
|
rangeSlider.on('update', (values) => {
|
|
updateWindow(+values[0], +values[1]);
|
|
});
|
|
|
|
cursorSlider = noUiSlider.create(document.getElementById('cursor-slider'), {
|
|
start: [0],
|
|
range: { min: 0, max: Math.max(allPoints.length - 1, 1) },
|
|
step: 1,
|
|
});
|
|
cursorSlider.on('update', (values) => {
|
|
updateCursor(Math.round(+values[0]));
|
|
});
|
|
}
|
|
|
|
// == Reset ==
|
|
document.getElementById('btn-reset').addEventListener('click', () => {
|
|
if (rangeSlider) rangeSlider.set([tMin, tMax]);
|
|
});
|
|
|
|
// == Main load ==
|
|
async function loadData() {
|
|
try {
|
|
const [trackResp, pointsResp, manifestResp, usblResp, auvTrackResp] = await Promise.all([
|
|
fetch('data/track.geojson'),
|
|
fetch('data/points.json'),
|
|
fetch('data/manifest.json'),
|
|
fetch('data/usbl.json'),
|
|
fetch('data/auv_track.geojson'),
|
|
]);
|
|
if (!trackResp.ok) throw new Error('track.geojson not found');
|
|
if (!pointsResp.ok) throw new Error('points.json not found');
|
|
if (!manifestResp.ok) throw new Error('manifest.json not found');
|
|
if (!usblResp.ok) throw new Error('usbl.json not found');
|
|
if (!auvTrackResp.ok) throw new Error('auv_track.geojson not found');
|
|
|
|
const trackGeo = await trackResp.json();
|
|
allPoints = await pointsResp.json();
|
|
manifest = await manifestResp.json();
|
|
usblMeta = await usblResp.json();
|
|
const auvTrackGeo = await auvTrackResp.json();
|
|
|
|
// Sort USBL points by t_ms (already sorted but ensure)
|
|
usblPoints = usblMeta.points.sort((a, b) => a.t_ms - b.t_ms);
|
|
|
|
// Static USV track (all sessions, faded)
|
|
L.geoJSON(trackGeo, {
|
|
style: (f) => ({ color: f.properties.color || '#00b4d8', weight: 2, opacity: 0.35 }),
|
|
}).addTo(map);
|
|
|
|
// Static AUV track (always visible as background)
|
|
auvTrackLayer = L.geoJSON(auvTrackGeo, {
|
|
style: (f) => ({ color: AUV_COLOR, weight: 2, opacity: 0.35 }),
|
|
}).addTo(map);
|
|
|
|
// Fit bounds to USV
|
|
if (allPoints.length > 0) {
|
|
const lats = allPoints.map(p => p.lat);
|
|
const lons = allPoints.map(p => p.lon);
|
|
map.fitBounds([[Math.min(...lats), Math.min(...lons)], [Math.max(...lats), Math.max(...lons)]], { padding: [40,40] });
|
|
}
|
|
|
|
tMin = manifest.t_min_ms || Math.min(...allPoints.map(p => p.t_ms || Infinity));
|
|
tMax = manifest.t_max_ms || Math.max(...allPoints.map(p => p.t_ms || -Infinity));
|
|
if (tMin === tMax) tMax = tMin + 1000;
|
|
|
|
document.getElementById('title').textContent =
|
|
`COSMA v4 — USV ${manifest.n_sessions} sess. ${manifest.n_points_sampled} pts | AUV ${usblMeta.n_points} pts`;
|
|
|
|
buildLegend();
|
|
initSliders();
|
|
windowPoints = [...allPoints];
|
|
usblWindow = [...usblPoints];
|
|
updateStats(tMin, tMax);
|
|
|
|
} catch (e) {
|
|
document.getElementById('stats').textContent = 'Erreur: ' + e.message;
|
|
console.error(e);
|
|
}
|
|
}
|
|
|
|
async function loadGraphData() {
|
|
initCharts();
|
|
try {
|
|
const [mcapResp, usvPwmResp] = await Promise.allSettled([
|
|
fetch('data/mcap_signals.json'),
|
|
fetch('data/usv_pwm.json'),
|
|
]);
|
|
if (mcapResp.status === 'fulfilled' && mcapResp.value.ok) {
|
|
mcapSignals = await mcapResp.value.json();
|
|
}
|
|
if (usvPwmResp.status === 'fulfilled' && usvPwmResp.value.ok) {
|
|
usvPwm = await usvPwmResp.value.json();
|
|
}
|
|
populateCharts();
|
|
} catch (e) { console.warn('Graph data load error:', e); }
|
|
}
|
|
|
|
loadData().then(() => { populateCharts(); });
|
|
loadGraphData();
|
|
</script>
|
|
<div id="graphs-section">
|
|
<div class="chart-container"><div class="chart-title">Profondeur AUV (m)</div><canvas id="chart-depth" height="80"></canvas></div>
|
|
<div class="chart-container"><div class="chart-title">PWM AUV (canaux)</div><canvas id="chart-pwm-auv" height="80"></canvas></div>
|
|
<div class="chart-container"><div class="chart-title">PWM USV (M1-M8)</div><canvas id="chart-pwm-usv" height="80"></canvas></div>
|
|
<div class="chart-container"><div class="chart-title">USBL Distance (m)</div><canvas id="chart-usbl" height="60"></canvas></div>
|
|
</div>
|
|
</body>
|
|
</html>
|