From 8505bc5a5a6d6983b078da635794ae5357309304 Mon Sep 17 00:00:00 2001
From: Stefan `Sec` Zehl <sec@42.org>
Date: Thu, 25 Apr 2024 22:31:55 +0200
Subject: [PATCH] [map] add mt-pos map

---
 html/mtmap.html | 409 ++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 409 insertions(+)
 create mode 100644 html/mtmap.html
diff --git a/html/mtmap.html b/html/mtmap.html
new file mode 100644
index 0000000..04e120f
--- /dev/null
+++ b/html/mtmap.html
@@ -0,0 +1,409 @@
+<!doctype html>
+<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
+<meta content="utf-8" http-equiv="encoding">
+<link rel="shortcut icon" href="favicon.ico" />
+<html lang="en">
+  <head>
+	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ol@v9.1.0/ol.css" type="text/css" integrity="sha384-PpyAaiUdY+s8ycCAmYsYkyq9cQgPWrtjtiv4/NzjY5FHo+7R5wdgdpqPAOl+No0J" crossorigin="anonymous">
+	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ol-ext@4.0.18/dist/ol-ext.min.css" integrity="sha384-P3rje4kvN3abflinwnEm/qFnQdXNe0Q0/zkL2LsNzHGmq9u3r1aydjY880SN8Us3" crossorigin="anonymous">
+	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
+
+    <style>
+	  .map {
+		position: absolute;
+		top: 0;
+		left: 0;
+		height: 100%;
+		width: 100%;
+      }
+	  .center-map {
+		top: 65px;
+		left: .5em;
+	  }
+	  .ol-touch .center-map {
+		top: 80px;
+	  }
+	  .ovl {
+		position: absolute;
+		top: 5px;
+		right: 5px;
+		background: white;
+		z-index: 1000;
+	   }
+
+	  .ol-control.ol-legend {
+		bottom: 1.5em;
+		left: auto;
+		right: .5em;
+	  }
+
+	  .ol-button i {
+		color: inherit;
+	  }
+
+	  .ol-control.ol-bar .ol-toggle.ol-active > button {
+		background-color: #fff;
+		color: inherit;
+	  }
+
+    </style>
+    <script src="https://cdn.jsdelivr.net/npm/ol@v9.1.0/dist/ol.js" integrity="sha384-SD/ncgTfeuQTb89UTe6nsqPzp0mGjAZ1E3ieIxVnvJBw5hk+Ppc4FdkUBpALqTjL" crossorigin="anonymous"></script>
+    <script src="https://cdn.jsdelivr.net/npm/proj4@2.11.0/dist/proj4.min.js" integrity="sha384-Ua2mIaFXxfu2jpwEj6aO+7FS4fghlnXujM7X0xxgIX7E5S03Y78r0j5iHuOj3DVg" crossorigin="anonymous"></script>
+    <script src="https://cdn.jsdelivr.net/npm/ol-ext@4.0.18/dist/ol-ext.min.js" integrity="sha384-W1a9XBd7x3B3gcyPlNrsCnnyZVtJ4Nr5D5+fYIsw6cf73QTJ+wICxbfSToT3goMA" crossorigin="anonymous"></script>
+    <title>Iridium-Live MT</title>
+  </head>
+  <body>
+    <h3 id="title">Iridium-Live</h3>
+    <div id="map" class="map" tabindex="0"><div id="info"></div><div id="time" class="ovl">(loading...)</div></div>
+    <script type="text/javascript">
+//
+// Config
+//
+
+// add some "jitter" to points so multiple identical points become more obvious
+let jitter = true
+let animate = true
+
+
+// start map with custom tiles
+const tileLayer = new ol.layer.Tile({
+		source: new ol.source.OSM({
+		  url: 'https://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer/tile/{z}/{y}/{x}',
+		  attributions: 'Tiles &copy; Esri'
+		})
+	  });
+
+var map = new ol.Map({
+	target: 'map',
+	layers: [tileLayer],
+	view: new ol.View({
+		center: ol.proj.fromLonLat([0.00, 0.00]),
+		zoom: 4
+	})
+});
+
+// add "graphics" layer
+var vectorSource = new ol.source.Vector({wrapX: false});
+var vectorLayer = new ol.layer.Vector({ source: vectorSource });
+map.addLayer(vectorLayer);
+
+// Define & add a new legend
+function getFeatureStyle (feature) {
+  return [
+	new ol.style.Style ({
+		  image: new ol.style.Circle({
+			  radius: 5,
+			  fill: new ol.style.Fill({color: 'rgba('+feature.get('color')+',0.5)'}),
+		  })
+	  })
+  ]
+}
+
+var legend = new ol.legend.Legend({
+    title: '',
+    style: getFeatureStyle,
+    margin: 0,
+    size: [20, 20]
+});
+
+map.addControl(new ol.control.Legend({
+    collapsible: false,
+    legend: legend,
+}));
+
+legend.addItem({ title: 'sbd', properties: { color: '255,0,0' }, typeGeom: 'Point'});
+legend.addItem({ title: 'gsm', properties: { color: '0,0,255' }, typeGeom: 'Point'});
+
+// Add some controls
+var mainbar = new ol.control.Bar({
+    className: "mainbar",
+});
+map.addControl(mainbar);
+mainbar.setPosition("top-left");
+
+// Refresh Button
+let refreshCtrl = new ol.control.Button({
+    html: '<i class="fa fa-refresh"></i>',
+    className: "refreshtoggle",
+    title: "Refresh",
+    handleClick: function () {
+        refreshCtrl.active = !refreshCtrl.active;
+
+        if (refreshCtrl.active) {
+            refreshCtrl.setHtml('<i class="fa fa-toggle-on"></i>');
+        } else {
+            refreshCtrl.setHtml('<i class="fa fa-toggle-off"></i>');
+        };
+		setRefresh(refreshCtrl.active);
+    }
+});
+refreshCtrl.active = true;
+
+// Center Button
+let centerCtrl = new ol.control.Button({
+    html: '<i class="fa fa-square-o"></i>',
+    className: "center",
+    title: "Center",
+    handleClick: function () {
+        centerMap();
+    }
+});
+
+mainbar.addControl(centerCtrl);
+mainbar.addControl(refreshCtrl);
+mainbar.addControl (new ol.control.FullScreen());
+
+// Define & add our geocentric projection
+proj4.defs(
+	'geocent',
+	'+proj=geocent +datum=WGS84 +ellps=WGS84 +units=m +no_defs'
+);
+ol.proj.proj4.register(proj4);
+
+//
+// Helper functions
+//
+
+function setRefresh(active){
+	console.log("Refresh is now", active);
+
+	// XXX: TBD
+	if (active){
+		// reload js and start again
+		// (maybe some anti-rapid-reload protection)
+		refresh(true);
+	}else{
+		// cancel timeout (paint_id)
+		clearTimeout(refresh_id);
+	}
+}
+
+function centerMap() {
+    // layer magic - center map on tracks
+    let extent = ol.extent.createEmpty();
+    map.getLayers().forEach(function (layer) {
+        if (layer instanceof ol.layer.Vector) {
+            source = layer.getSource()
+            source.getFeatures().forEach(function (feature) {
+                ol.extent.extend(extent, feature.getGeometry().getExtent());
+            })
+//			ol.extent.extend(extent, layer.getSource().getFeatures().getGeometry().getExtent());
+        }
+    });
+	try {
+		map.getView().fit(extent, { padding: [25, 10, 50, 10], maxZoom: 6 }); // top, _, bottom, _
+	} catch(e) { // extent could be empty
+		return;
+	}
+//	map.getView().animate({ center: extent, duration: 1000, });
+}
+
+// Proper ISO timestamp (with timezone)
+Date.prototype.toISOString = function() {
+	var tzo = -this.getTimezoneOffset(),
+		dif = tzo >= 0 ? '+' : '-',
+		pad = function(num) {
+			var norm = Math.floor(Math.abs(num));
+			return (norm < 10 ? '0' : '') + norm;
+		};
+	return this.getFullYear() +
+		'-' + pad(this.getMonth() + 1) +
+		'-' + pad(this.getDate()) +
+		'T' + pad(this.getHours()) +
+		':' + pad(this.getMinutes()) +
+		':' + pad(this.getSeconds()) +
+		dif + pad(tzo / 60) +
+		':' + pad(tzo % 60);
+}
+
+timeElement = document.getElementById('time');
+function setTime(time_t) {
+    timeElement.textContent = new Date(time_t * 1000).toISOString();
+}
+
+function splitmix32(a) {
+ return function() {
+   a |= 0;
+   a = a + 0x9e3779b9 | 0;
+   let t = a ^ a >>> 16;
+   t = Math.imul(t, 0x21f0aaad);
+   t = t ^ t >>> 15;
+   t = Math.imul(t, 0x735a2d97);
+   return ((t = t ^ t >>> 15) >>> 0) / 4294967296;
+  }
+}
+
+function type2color(type) {
+    let color = "255, 0, 0";
+    if (type == "gsm") {
+        color = "0, 0, 255";
+    }
+    return color;
+}
+
+//
+// Main code
+//
+
+let refresh_id = undefined;
+let lastData = undefined;
+
+async function refresh(first) {
+	clearTimeout(paint_id); // kill, if still running
+	
+	console.log("refreshing",first?"(first)":"...");
+
+	const resp = await fetch("mt.json", (first) ? {} : { cache: "no-cache" });
+	const data = await resp.json();
+
+	console.log("fetched", new Date().toISOString(), "time diff",(Date.now() - new Date(data["time"]*1000))/1000,"s")
+
+	if (data["time"] != lastData){ // new data
+		lastData = data["time"];
+
+		paint_data(data); // will paint up to "interval"
+
+		if (first) {
+			centerMap();
+		};
+	} else {
+		console.log("stale file received.");
+	}
+
+    const redo = data["interval"];
+    console.log("will refresh in", redo, "s");
+	if (redo > 2){ // enforce min of 2 secs
+		refresh_id = setTimeout(refresh, redo * 1000);
+	}
+}
+
+var paint_id = undefined;
+
+function paint_data(data){
+	// delete old (if present)
+	const features = vectorSource.getFeatures();
+	if (features != null && features.length > 0) {
+		for (x in features) {
+			vectorSource.removeFeature(features[x]);
+		}
+	}
+
+	// paint new
+	console.log("MT positions:", data["mt_pos"].length);
+	const stime=data['time']-data['interval'];
+	setTime(stime);
+
+  	interactivePainter(stime, data["mt_pos"], 0);
+}
+
+function interactivePainter(stime, todo, idx){
+	console.log("iP:", stime, todo.length, idx);
+	setTime(stime);
+
+	while(idx < todo.length && ( todo[idx].ts <= stime || !animate )){
+		paint_mt(todo[idx], stime);
+		idx++;
+	}
+	if (idx < todo.length){
+	    const nxt = todo[idx].ts-stime;
+	    console.log("next paint:",nxt);
+		paint_id = setTimeout(interactivePainter, nxt*1000, stime + nxt, todo, idx);
+	}else{
+		console.log("data exhausted");
+	}
+}
+
+//
+// "graphics" code
+//
+function paint_mt(mt, curtime) {
+    console.log("paint_mt",mt.xyz, mt.ts- curtime);
+
+    // transform coords
+	const prng = splitmix32(Math.trunc(mt.ts))
+
+	if (jitter){
+		mt.xyz = mt.xyz.map(function (c) { return c + (prng()-0.5) * 0.2 }); // +/- 100m
+	}
+
+    const points = ol.proj.transform(
+        mt.xyz.map(function (km) {
+            return 1000 * km
+        }),
+        'geocent', // EPSG:4978?
+        'EPSG:3857'
+    );
+
+    // setup & add mt circle
+    const featurePoint = new ol.Feature({
+        time: mt.time,
+        geometry: new ol.geom.Point(points)
+    });
+
+    const color = type2color(mt["type"])
+
+    const satCircle = new ol.style.Style({
+        image: new ol.style.Circle({
+            radius: 3,
+            fill: new ol.style.Fill({
+                color: 'rgba(' + color + ',0.5)'
+            }),
+        }),
+    });
+
+    featurePoint.setStyle(satCircle);
+    vectorSource.addFeature(featurePoint);
+
+    if (curtime - mt.ts < 1 && animate) { // in the past?
+		flash(featurePoint, color);
+    }
+};
+
+var info = document.getElementById('info');
+
+const duration = 2000; // ms
+function flash(feature, color) {
+  const start = Date.now();
+  const flashGeom = feature.getGeometry().clone();
+  const listenerKey = tileLayer.on('postrender', animate);
+
+  function animate(event) {
+    const frameState = event.frameState;
+    const elapsed = frameState.time - start;
+    if (elapsed >= duration) {
+      ol.Observable.unByKey(listenerKey);
+      return;
+    }
+    const vectorContext = ol.render.getVectorContext(event);
+    const elapsedRatio = elapsed / duration;
+    const radius = ol.easing.easeOut(elapsedRatio) * 10 + 5;
+    const opacity = ol.easing.easeOut((1 - elapsedRatio)**2);
+
+    const style = new ol.style.Style({
+      image: new ol.style.Circle({
+        radius: radius,
+        stroke: new ol.style.Stroke({
+          color: 'rgba(' + color + ', ' + opacity + ')',
+          width: 0.25 + opacity,
+        }),
+      }),
+    });
+
+    vectorContext.setStyle(style);
+    vectorContext.drawGeometry(flashGeom);
+    // tell OpenLayers to continue postrender animation
+    map.render();
+  }
+}
+
+//
+// Startup
+//
+
+console.log("1 px =",ol.proj.getPointResolution('EPSG:4326', 1, [48, 13], 'm'))
+refresh(true);
+document.getElementById('map').focus();
+
+    </script>
+  </body>
+</html>
