feat: v2 multi-session parser + timeline range viewer
This commit is contained in:
Poulpe
@@ -1,24 +1,39 @@
|
||||
#!/usr/bin/env python3
|
||||
"""Parse USV long-format CSV → track.geojson + points.json"""
|
||||
"""Parse USV long-format CSV → track.geojson + points.json + manifest.json
|
||||
v2: multi-session support via --input-dir, retro-compat with --input (single file)
|
||||
"""
|
||||
import argparse
|
||||
import csv
|
||||
import glob
|
||||
import json
|
||||
import os
|
||||
import sys
|
||||
from collections import defaultdict
|
||||
from datetime import datetime, timezone
|
||||
|
||||
MAX_SLIDER_POINTS = 5000
|
||||
MAX_SLIDER_POINTS = 10000
|
||||
|
||||
|
||||
def parse_args():
|
||||
p = argparse.ArgumentParser(description="Parse USV nav CSV")
|
||||
p.add_argument("--input", required=True, help="CSV navigation log")
|
||||
p = argparse.ArgumentParser(description="Parse USV nav CSV v2")
|
||||
g = p.add_mutually_exclusive_group(required=True)
|
||||
g.add_argument("--input", help="Single CSV navigation log (v1 compat)")
|
||||
g.add_argument("--input-dir", help="Directory: glob *navigation_log*.csv")
|
||||
p.add_argument("--output", required=True, help="Output directory")
|
||||
return p.parse_args()
|
||||
|
||||
|
||||
def find_csvs(input_dir):
|
||||
pattern = os.path.join(input_dir, "*navigation_log*.csv")
|
||||
files = sorted(glob.glob(pattern))
|
||||
if not files:
|
||||
print(f"No navigation_log CSVs found in {input_dir}", file=sys.stderr)
|
||||
sys.exit(1)
|
||||
return files
|
||||
|
||||
|
||||
def load_csv(path):
|
||||
"""Load long-format CSV into {timestamp: {field: value}}"""
|
||||
"""Load long-format CSV → {timestamp: {field: value}}"""
|
||||
rows_by_ts = defaultdict(dict)
|
||||
with open(path, newline="", encoding="utf-8") as f:
|
||||
reader = csv.DictReader(f)
|
||||
@@ -41,13 +56,26 @@ def get_float(d, *keys):
|
||||
return None
|
||||
|
||||
|
||||
def build_points(rows_by_ts):
|
||||
"""Build sorted list of {t, lat, lon, heading} where lat/lon valid."""
|
||||
# We need to track last known lat/lon/heading per timestamp cluster.
|
||||
# Strategy: walk timestamps in order, emit a point each time we see a Lat or Lon update.
|
||||
# Accumulate state across timestamps.
|
||||
timestamps = sorted(rows_by_ts.keys())
|
||||
def ts_to_ms(ts_str):
|
||||
"""Convert ISO-like timestamp string to epoch ms (UTC)."""
|
||||
# Try formats: '2026-03-24 09:04:07.123456' or '2026-03-24T09:04:07.123456'
|
||||
for fmt in (
|
||||
"%Y-%m-%dT%H:%M:%S.%f",
|
||||
"%Y-%m-%dT%H:%M:%S",
|
||||
"%Y-%m-%d %H:%M:%S.%f",
|
||||
"%Y-%m-%d %H:%M:%S",
|
||||
):
|
||||
try:
|
||||
dt = datetime.strptime(ts_str, fmt).replace(tzinfo=timezone.utc)
|
||||
return int(dt.timestamp() * 1000)
|
||||
except ValueError:
|
||||
continue
|
||||
return None
|
||||
|
||||
|
||||
def build_points(rows_by_ts, source_name):
|
||||
"""Build sorted list of {t, t_ms, lat, lon, heading, source}."""
|
||||
timestamps = sorted(rows_by_ts.keys())
|
||||
state = {}
|
||||
points = []
|
||||
|
||||
@@ -55,7 +83,6 @@ def build_points(rows_by_ts):
|
||||
updates = rows_by_ts[ts]
|
||||
state.update(updates)
|
||||
|
||||
# Only emit point if we have both Lat and Lon from this or earlier ts
|
||||
lat = get_float(state, "Lat", "RAW_Lat")
|
||||
lon = get_float(state, "Lon", "RAW_Lon")
|
||||
heading = get_float(state, "Heading", "Yaw")
|
||||
@@ -64,7 +91,6 @@ def build_points(rows_by_ts):
|
||||
continue
|
||||
if lat == 0.0 and lon == 0.0:
|
||||
continue
|
||||
# GPS_RAW_INT fallback (1e-7 degrees)
|
||||
if abs(lat) < 1 and abs(lon) < 1:
|
||||
raw_lat = get_float(state, "GPS_RAW_INT_lat")
|
||||
raw_lon = get_float(state, "GPS_RAW_INT_lon")
|
||||
@@ -74,87 +100,200 @@ def build_points(rows_by_ts):
|
||||
else:
|
||||
continue
|
||||
|
||||
# Only emit if Lat or Lon just updated (reduce duplicate consecutive points)
|
||||
if "Lat" in updates or "Lon" in updates or "RAW_Lat" in updates or "RAW_Lon" in updates:
|
||||
t_ms = ts_to_ms(ts)
|
||||
points.append({
|
||||
"t": ts,
|
||||
"t_ms": t_ms,
|
||||
"lat": round(lat, 8),
|
||||
"lon": round(lon, 8),
|
||||
"heading": round(heading, 2) if heading is not None else None,
|
||||
"source": source_name,
|
||||
})
|
||||
|
||||
return points
|
||||
|
||||
|
||||
def sample_points(points, max_n):
|
||||
if len(points) <= max_n:
|
||||
def sample_points_session(points, max_total, n_sessions):
|
||||
"""Sample per session, always keeping first+last point of each session."""
|
||||
if not points:
|
||||
return points
|
||||
step = len(points) / max_n
|
||||
return [points[int(i * step)] for i in range(max_n)]
|
||||
quota = max(10, max_total // max(n_sessions, 1))
|
||||
if len(points) <= quota:
|
||||
return points
|
||||
|
||||
step = (len(points) - 2) / max(quota - 2, 1)
|
||||
sampled = [points[0]]
|
||||
for i in range(1, quota - 1):
|
||||
sampled.append(points[min(int(1 + i * step), len(points) - 2)])
|
||||
sampled.append(points[-1])
|
||||
return sampled
|
||||
|
||||
|
||||
def write_geojson(points, path):
|
||||
coords = [[p["lon"], p["lat"]] for p in points]
|
||||
geojson = {
|
||||
"type": "FeatureCollection",
|
||||
"features": [{
|
||||
def session_bbox(points):
|
||||
lats = [p["lat"] for p in points]
|
||||
lons = [p["lon"] for p in points]
|
||||
return [min(lons), min(lats), max(lons), max(lats)]
|
||||
|
||||
|
||||
def write_outputs(all_sessions, output_dir):
|
||||
"""Write track.geojson, points.json, manifest.json."""
|
||||
os.makedirs(output_dir, exist_ok=True)
|
||||
|
||||
# Colors for multi-track
|
||||
COLORS = ["#00b4d8", "#e94560", "#06d6a0", "#ffd166", "#a855f7", "#f97316"]
|
||||
|
||||
# ── track.geojson (MultiLineString per session) ──
|
||||
features = []
|
||||
for i, sess in enumerate(all_sessions):
|
||||
coords = [[p["lon"], p["lat"]] for p in sess["points"]]
|
||||
features.append({
|
||||
"type": "Feature",
|
||||
"geometry": {"type": "LineString", "coordinates": coords},
|
||||
"properties": {
|
||||
"start": points[0]["t"] if points else None,
|
||||
"end": points[-1]["t"] if points else None,
|
||||
"n_points": len(points),
|
||||
"source_file": sess["source_file"],
|
||||
"source_name": sess["source_name"],
|
||||
"start_iso": sess["t_start"],
|
||||
"end_iso": sess["t_end"],
|
||||
"n_points": len(coords),
|
||||
"color": COLORS[i % len(COLORS)],
|
||||
"session_index": i,
|
||||
}
|
||||
}]
|
||||
}
|
||||
with open(path, "w") as f:
|
||||
})
|
||||
|
||||
geojson = {"type": "FeatureCollection", "features": features}
|
||||
geo_path = os.path.join(output_dir, "track.geojson")
|
||||
with open(geo_path, "w") as f:
|
||||
json.dump(geojson, f)
|
||||
print(f" track.geojson: {len(coords)} coords → {path}")
|
||||
print(f" track.geojson: {len(features)} sessions → {geo_path}")
|
||||
|
||||
# ── points.json (all sampled, sorted by t_ms) ──
|
||||
all_points = []
|
||||
n_sessions = len(all_sessions)
|
||||
for sess in all_sessions:
|
||||
sampled = sample_points_session(sess["points"], MAX_SLIDER_POINTS, n_sessions)
|
||||
all_points.extend(sampled)
|
||||
|
||||
# Sort by t_ms (sessions may overlap in time)
|
||||
all_points.sort(key=lambda p: (p["t_ms"] or 0))
|
||||
|
||||
pts_path = os.path.join(output_dir, "points.json")
|
||||
with open(pts_path, "w") as f:
|
||||
json.dump(all_points, f)
|
||||
print(f" points.json: {len(all_points)} points (sampled) → {pts_path}")
|
||||
|
||||
# ── manifest.json ──
|
||||
all_lats = [p["lat"] for s in all_sessions for p in s["points"]]
|
||||
all_lons = [p["lon"] for s in all_sessions for p in s["points"]]
|
||||
global_bbox = [min(all_lons), min(all_lats), max(all_lons), max(all_lats)]
|
||||
|
||||
all_t_ms = [p["t_ms"] for s in all_sessions for p in s["points"] if p["t_ms"]]
|
||||
t_min_ms = min(all_t_ms) if all_t_ms else None
|
||||
t_max_ms = max(all_t_ms) if all_t_ms else None
|
||||
|
||||
sessions_meta = []
|
||||
for sess in all_sessions:
|
||||
sessions_meta.append({
|
||||
"file": sess["source_file"],
|
||||
"source_name": sess["source_name"],
|
||||
"n_points": sess["n_points_raw"],
|
||||
"t_start": sess["t_start"],
|
||||
"t_end": sess["t_end"],
|
||||
"t_start_ms": sess["t_start_ms"],
|
||||
"t_end_ms": sess["t_end_ms"],
|
||||
"bbox": sess["bbox"],
|
||||
})
|
||||
|
||||
manifest = {
|
||||
"generated_at": datetime.now(timezone.utc).isoformat(),
|
||||
"n_sessions": len(all_sessions),
|
||||
"sessions": sessions_meta,
|
||||
"global_bbox": global_bbox,
|
||||
"t_min": all_sessions[0]["t_start"] if all_sessions else None,
|
||||
"t_max": all_sessions[-1]["t_end"] if all_sessions else None,
|
||||
"t_min_ms": t_min_ms,
|
||||
"t_max_ms": t_max_ms,
|
||||
"n_points_total_raw": sum(s["n_points_raw"] for s in all_sessions),
|
||||
"n_points_sampled": len(all_points),
|
||||
}
|
||||
|
||||
mf_path = os.path.join(output_dir, "manifest.json")
|
||||
with open(mf_path, "w") as f:
|
||||
json.dump(manifest, f, indent=2)
|
||||
print(f" manifest.json → {mf_path}")
|
||||
|
||||
return manifest
|
||||
|
||||
|
||||
def write_points_json(points, path):
|
||||
with open(path, "w") as f:
|
||||
json.dump(points, f)
|
||||
print(f" points.json: {len(points)} points → {path}")
|
||||
def print_global_stats(manifest, all_sessions):
|
||||
print(f"\n=== Stats globales ===")
|
||||
print(f" Sessions: {manifest['n_sessions']}")
|
||||
print(f" Points bruts: {manifest['n_points_total_raw']}")
|
||||
print(f" Points sampled: {manifest['n_points_sampled']}")
|
||||
print(f" t_min: {manifest['t_min']}")
|
||||
print(f" t_max: {manifest['t_max']}")
|
||||
bb = manifest["global_bbox"]
|
||||
print(f" Bbox: lon [{bb[0]:.5f}, {bb[2]:.5f}] lat [{bb[1]:.5f}, {bb[3]:.5f}]")
|
||||
if manifest["t_min_ms"] and manifest["t_max_ms"]:
|
||||
dur_s = (manifest["t_max_ms"] - manifest["t_min_ms"]) / 1000
|
||||
h, rem = divmod(int(dur_s), 3600)
|
||||
m, s = divmod(rem, 60)
|
||||
print(f" Durée totale: {h}h{m:02d}m{s:02d}s")
|
||||
for i, sess in enumerate(all_sessions):
|
||||
print(f" Session {i+1}: {sess['source_name']} {sess['n_points_raw']} pts {sess['t_start']} → {sess['t_end']}")
|
||||
|
||||
|
||||
def print_stats(points):
|
||||
def process_file(path):
|
||||
source_name = os.path.basename(path)
|
||||
print(f"\nChargement {source_name} ...")
|
||||
rows = load_csv(path)
|
||||
print(f" {len(rows)} timestamps uniques")
|
||||
points = build_points(rows, source_name)
|
||||
if not points:
|
||||
print("No valid points found!")
|
||||
return
|
||||
print(f" WARNING: aucun point GPS valide dans {source_name}")
|
||||
return None
|
||||
|
||||
# Filter points without t_ms
|
||||
points = [p for p in points if p["t_ms"] is not None]
|
||||
lats = [p["lat"] for p in points]
|
||||
lons = [p["lon"] for p in points]
|
||||
print(f"\n=== Stats ===")
|
||||
print(f" N points (full): {len(points)}")
|
||||
print(f" First ts: {points[0]['t']}")
|
||||
print(f" Last ts: {points[-1]['t']}")
|
||||
print(f" Bbox lat: {min(lats):.6f} → {max(lats):.6f}")
|
||||
print(f" Bbox lon: {min(lons):.6f} → {max(lons):.6f}")
|
||||
headings = [p["heading"] for p in points if p["heading"] is not None]
|
||||
print(f" Heading data: {'yes' if headings else 'no'} ({len(headings)} values)")
|
||||
return {
|
||||
"source_file": path,
|
||||
"source_name": source_name,
|
||||
"points": points,
|
||||
"n_points_raw": len(points),
|
||||
"t_start": points[0]["t"],
|
||||
"t_end": points[-1]["t"],
|
||||
"t_start_ms": points[0]["t_ms"],
|
||||
"t_end_ms": points[-1]["t_ms"],
|
||||
"bbox": [min(lons), min(lats), max(lons), max(lats)],
|
||||
}
|
||||
|
||||
|
||||
def main():
|
||||
args = parse_args()
|
||||
os.makedirs(args.output, exist_ok=True)
|
||||
|
||||
print(f"Loading {args.input} ...")
|
||||
rows = load_csv(args.input)
|
||||
print(f" {len(rows)} unique timestamps")
|
||||
if args.input:
|
||||
csv_files = [args.input]
|
||||
else:
|
||||
csv_files = find_csvs(args.input_dir)
|
||||
|
||||
points = build_points(rows)
|
||||
print_stats(points)
|
||||
print(f"Fichiers trouvés: {len(csv_files)}")
|
||||
for f in csv_files:
|
||||
print(f" {os.path.basename(f)}")
|
||||
|
||||
if not points:
|
||||
all_sessions = []
|
||||
for path in csv_files:
|
||||
sess = process_file(path)
|
||||
if sess:
|
||||
all_sessions.append(sess)
|
||||
|
||||
if not all_sessions:
|
||||
print("Aucune session valide.", file=sys.stderr)
|
||||
sys.exit(1)
|
||||
|
||||
write_geojson(points, os.path.join(args.output, "track.geojson"))
|
||||
|
||||
sampled = sample_points(points, MAX_SLIDER_POINTS)
|
||||
if len(sampled) < len(points):
|
||||
print(f" Sampled {len(sampled)} points for slider (from {len(points)})")
|
||||
write_points_json(sampled, os.path.join(args.output, "points.json"))
|
||||
|
||||
manifest = write_outputs(all_sessions, args.output)
|
||||
print_global_stats(manifest, all_sessions)
|
||||
print("\nDone.")
|
||||
|
||||
|
||||
|
||||
@@ -2,59 +2,128 @@
|
||||
<html lang="fr">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>COSMA — USV Track Viewer</title>
|
||||
<title>COSMA — USV Multi-Track Viewer v2</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; height: 100vh; }
|
||||
#map { flex: 1; }
|
||||
#map { flex: 1; min-height: 0; }
|
||||
#controls {
|
||||
background: #16213e;
|
||||
padding: 8px 12px;
|
||||
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;
|
||||
border-top: 1px solid #0f3460;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
#slider { flex: 1; cursor: pointer; }
|
||||
#info { font-size: 11px; min-width: 340px; color: #a0c4ff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
|
||||
#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 slider row */
|
||||
#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 slider row */
|
||||
#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; }
|
||||
|
||||
/* noUiSlider overrides */
|
||||
.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 */
|
||||
#legend {
|
||||
position: absolute; bottom: 200px; 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;
|
||||
display: none;
|
||||
}
|
||||
.legend-item { display: flex; align-items: center; gap: 6px; margin: 2px 0; }
|
||||
.legend-dot { width: 12px; height: 4px; border-radius: 2px; flex-shrink: 0; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="map"></div>
|
||||
<div id="legend"></div>
|
||||
<div id="controls">
|
||||
<span id="title">USV Track</span>
|
||||
<input type="range" id="slider" min="0" value="0">
|
||||
<div id="info">Chargement…</div>
|
||||
<div id="top-row">
|
||||
<span id="title">USV Multi-Track v2</span>
|
||||
<span id="stats">Chargement…</span>
|
||||
<button id="btn-reset">Reset window</button>
|
||||
</div>
|
||||
<div id="range-row">
|
||||
<span id="range-label">Fenêtre</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'];
|
||||
|
||||
// ── Map init ──────────────────────────────────────────────────────────────
|
||||
const map = L.map('map', { zoomControl: true });
|
||||
|
||||
const osm = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
|
||||
attribution: '© OpenStreetMap contributors',
|
||||
maxZoom: 19,
|
||||
attribution: '© OpenStreetMap contributors', maxZoom: 19,
|
||||
});
|
||||
osm.addTo(map);
|
||||
|
||||
const seamarks = L.tileLayer('https://tiles.openseamap.org/seamark/{z}/{x}/{y}.png', {
|
||||
attribution: '© OpenSeaMap',
|
||||
maxZoom: 18,
|
||||
opacity: 0.8,
|
||||
attribution: '© OpenSeaMap', maxZoom: 18, opacity: 0.8,
|
||||
});
|
||||
|
||||
// GEBCO bathymetry (tile-based, simpler than WMS)
|
||||
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,
|
||||
}
|
||||
{ attribution: 'GEBCO / NCEI', maxZoom: 13, opacity: 0.6 }
|
||||
);
|
||||
|
||||
L.control.layers(
|
||||
@@ -63,79 +132,207 @@ L.control.layers(
|
||||
{ collapsed: false }
|
||||
).addTo(map);
|
||||
|
||||
// ── SVG arrow marker factory ──────────────────────────────────────────────
|
||||
function makeArrowIcon(heading) {
|
||||
// ── 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="#e94560" stroke="#fff" stroke-width="1.5"/>
|
||||
<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],
|
||||
return L.divIcon({ html: svg, className: '', iconSize: [32,32], iconAnchor: [16,16] });
|
||||
}
|
||||
|
||||
// ── State ─────────────────────────────────────────────────────────────────
|
||||
let allPoints = []; // all sampled points sorted by t_ms
|
||||
let manifest = null;
|
||||
let trackLayers = []; // per-session polyline layers
|
||||
let windowPoints = []; // filtered by range window
|
||||
let cursorMarker = null;
|
||||
let rangeSlider = null;
|
||||
let cursorSlider = null;
|
||||
let tMin = 0, tMax = 0;
|
||||
|
||||
// ── 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(startMs, endMs) {
|
||||
return allPoints.filter(p => p.t_ms >= startMs && p.t_ms <= endMs);
|
||||
}
|
||||
|
||||
function updateWindow(startMs, endMs) {
|
||||
document.getElementById('date-start').textContent = fmtMs(startMs);
|
||||
document.getElementById('date-end').textContent = fmtMs(endMs);
|
||||
|
||||
windowPoints = filterPointsInWindow(startMs, endMs);
|
||||
|
||||
// Rebuild track layers by session
|
||||
trackLayers.forEach(l => map.removeLayer(l));
|
||||
trackLayers = [];
|
||||
|
||||
if (!manifest) return;
|
||||
|
||||
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 }).addTo(map);
|
||||
trackLayers.push(layer);
|
||||
});
|
||||
|
||||
// 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 =
|
||||
`${windowPoints.length} pts dans fenêtre | durée: ${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;
|
||||
|
||||
// Find session color
|
||||
const sessIdx = manifest ? manifest.sessions.findIndex(s => s.source_name === p.source) : 0;
|
||||
const color = COLORS[Math.max(0, sessIdx) % COLORS.length];
|
||||
|
||||
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}`;
|
||||
}
|
||||
|
||||
// ── Legend ────────────────────────────────────────────────────────────────
|
||||
function buildLegend() {
|
||||
if (!manifest || manifest.n_sessions <= 1) return;
|
||||
const el = document.getElementById('legend');
|
||||
el.style.display = 'block';
|
||||
el.innerHTML = manifest.sessions.map((s, i) => {
|
||||
const color = COLORS[i % COLORS.length];
|
||||
const name = s.source_name.replace('_navigation_log', '').replace('.csv', '');
|
||||
return `<div class="legend-item"><div class="legend-dot" style="background:${color}"></div><span>${name}</span></div>`;
|
||||
}).join('');
|
||||
}
|
||||
|
||||
// ── Init sliders ──────────────────────────────────────────────────────────
|
||||
function initSliders() {
|
||||
// Range slider
|
||||
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]);
|
||||
});
|
||||
|
||||
// Cursor slider (single handle inside window)
|
||||
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]));
|
||||
});
|
||||
}
|
||||
|
||||
// ── Data loading ──────────────────────────────────────────────────────────
|
||||
let points = [];
|
||||
let trackLayer = null;
|
||||
let marker = null;
|
||||
// ── Reset window ──────────────────────────────────────────────────────────
|
||||
document.getElementById('btn-reset').addEventListener('click', () => {
|
||||
if (rangeSlider) rangeSlider.set([tMin, tMax]);
|
||||
});
|
||||
|
||||
// ── Main load ─────────────────────────────────────────────────────────────
|
||||
async function loadData() {
|
||||
try {
|
||||
const [trackResp, pointsResp] = await Promise.all([
|
||||
fetch('track.geojson'),
|
||||
fetch('points.json'),
|
||||
const [trackResp, pointsResp, manifestResp] = await Promise.all([
|
||||
fetch('data/track.geojson'),
|
||||
fetch('data/points.json'),
|
||||
fetch('data/manifest.json'),
|
||||
]);
|
||||
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');
|
||||
|
||||
const trackGeo = await trackResp.json();
|
||||
points = await pointsResp.json();
|
||||
allPoints = await pointsResp.json();
|
||||
manifest = await manifestResp.json();
|
||||
|
||||
// Draw track
|
||||
trackLayer = L.geoJSON(trackGeo, {
|
||||
style: { color: '#00b4d8', weight: 2, opacity: 0.8 },
|
||||
// Initial full-track display (all sessions)
|
||||
L.geoJSON(trackGeo, {
|
||||
style: (feature) => ({
|
||||
color: feature.properties.color || '#00b4d8',
|
||||
weight: 2,
|
||||
opacity: 0.5,
|
||||
}),
|
||||
}).addTo(map);
|
||||
map.fitBounds(trackLayer.getBounds(), { padding: [40, 40] });
|
||||
|
||||
// Init slider
|
||||
const slider = document.getElementById('slider');
|
||||
slider.max = points.length - 1;
|
||||
slider.value = 0;
|
||||
slider.addEventListener('input', () => updateMarker(+slider.value));
|
||||
|
||||
// Init marker
|
||||
if (points.length > 0) {
|
||||
const p = points[0];
|
||||
marker = L.marker([p.lat, p.lon], { icon: makeArrowIcon(p.heading || 0) }).addTo(map);
|
||||
updateInfo(0);
|
||||
// Fit bounds
|
||||
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] });
|
||||
}
|
||||
|
||||
document.getElementById('title').textContent = `USV Track — ${points.length} pts`;
|
||||
// Time range
|
||||
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; // safety
|
||||
|
||||
document.getElementById('title').textContent =
|
||||
`USV Multi-Track — ${manifest.n_sessions} sessions — ${manifest.n_points_sampled} pts`;
|
||||
|
||||
buildLegend();
|
||||
initSliders();
|
||||
|
||||
// Initial window = full range
|
||||
windowPoints = [...allPoints];
|
||||
updateStats(tMin, tMax);
|
||||
|
||||
} catch (e) {
|
||||
document.getElementById('info').textContent = 'Erreur: ' + e.message;
|
||||
document.getElementById('stats').textContent = 'Erreur: ' + e.message;
|
||||
console.error(e);
|
||||
}
|
||||
}
|
||||
|
||||
function updateMarker(idx) {
|
||||
const p = points[idx];
|
||||
if (!p || !marker) return;
|
||||
marker.setLatLng([p.lat, p.lon]);
|
||||
marker.setIcon(makeArrowIcon(p.heading || 0));
|
||||
updateInfo(idx);
|
||||
}
|
||||
|
||||
function updateInfo(idx) {
|
||||
const p = points[idx];
|
||||
if (!p) return;
|
||||
const hdg = p.heading !== null ? `${p.heading.toFixed(1)}°` : 'N/A';
|
||||
document.getElementById('info').textContent =
|
||||
`[${idx+1}/${points.length}] ${p.t} | Lat: ${p.lat.toFixed(6)} Lon: ${p.lon.toFixed(6)} | Cap: ${hdg}`;
|
||||
}
|
||||
|
||||
loadData();
|
||||
</script>
|
||||
</body>
|
||||
|
||||
Reference in New Issue
Block a user