signalk-livedepth-plugin 0.3.0 → 0.3.2

package/public/js/renderer.js

@@ -739,6 +739,7 @@ function parseDepthSeries(result, depthPath2) {
 var DEFAULT_SETTINGS = {
   enabled: true,
   source: "history",
+  quality: "auto",
   historyWindowHours: 1,
   historyResolutionS: 0.1,
   shadeLimitMetres: 10,
@@ -748,6 +749,10 @@ var DEFAULT_SETTINGS = {
   maxDepthMetres: 100,
   safetyDepthMetres: 3
 };
+var ENUM_VALUES = {
+  source: ["history", "tiles"],
+  quality: ["auto", "high", "balanced", "low"]
+};
 function mergeSettings(stored) {
   const out = { ...DEFAULT_SETTINGS };
   if (!stored) {
@@ -757,9 +762,14 @@ function mergeSettings(stored) {
     DEFAULT_SETTINGS
   )) {
     const value = stored[key];
-    if (typeof value === typeof DEFAULT_SETTINGS[key]) {
-      out[key] = value;
+    if (typeof value !== typeof DEFAULT_SETTINGS[key]) {
+      continue;
+    }
+    const allowed = ENUM_VALUES[key];
+    if (allowed && !allowed.includes(value)) {
+      continue;
     }
+    out[key] = value;
   }
   return out;
 }
@@ -773,38 +783,9 @@ var RECORD_BYTES = 5;
 var EARTH_RADIUS = 6378137;
 var ORIGIN_SHIFT = Math.PI * EARTH_RADIUS;
 var WORLD_WIDTH = 2 * ORIGIN_SHIFT;
-var clamp = (v, lo, hi) => v < lo ? lo : v > hi ? hi : v;
-function tileFraction(lon, lat, z) {
-  const n = Math.pow(2, z);
-  const latRad = clamp(lat, -85.05112878, 85.05112878) * Math.PI / 180;
-  const x = (lon + 180) / 360 * n;
-  const y = (1 - Math.log(Math.tan(latRad) + 1 / Math.cos(latRad)) / Math.PI) / 2 * n;
-  return { x, y, n };
-}
-function lngLatToCell(lon, lat, z) {
-  const { x: fx, y: fy, n } = tileFraction(lon, lat, z);
-  const x = clamp(Math.floor(fx), 0, n - 1);
-  const y = clamp(Math.floor(fy), 0, n - 1);
-  const cx = clamp(Math.floor((fx - x) * TILE_SIZE), 0, TILE_SIZE - 1);
-  const cy = clamp(Math.floor((fy - y) * TILE_SIZE), 0, TILE_SIZE - 1);
-  return { x, y, cx, cy };
-}
-function encodeDepth(metres) {
-  if (!Number.isFinite(metres)) return NODATA;
-  return clamp(Math.round(metres * 100), 0, NODATA - 1);
-}
 function decodeDepth(cm) {
   return cm === NODATA ? NaN : cm / 100;
 }
-function mergeCell(cells, key, depthCm, count = 1) {
-  const existing = cells.get(key);
-  if (!existing) {
-    cells.set(key, { depth: depthCm, count: Math.min(255, count) });
-    return;
-  }
-  if (depthCm < existing.depth) existing.depth = depthCm;
-  existing.count = Math.min(255, existing.count + count);
-}
 function decodeTile(bytes) {
   const view = new DataView(bytes.buffer, bytes.byteOffset, bytes.byteLength);
   const cells = /* @__PURE__ */ new Map();
@@ -817,133 +798,6 @@ function decodeTile(bytes) {
   }
   return cells;
 }
-function minPoolTile(children) {
-  const parent = /* @__PURE__ */ new Map();
-  children.forEach((child, index) => {
-    if (!child) return;
-    const dx = index & 1;
-    const dy = index >> 1;
-    for (const [key, { depth, count }] of child) {
-      const cx = key % TILE_SIZE;
-      const cy = Math.floor(key / TILE_SIZE);
-      const pcx = dx * TILE_SIZE + cx >> 1;
-      const pcy = dy * TILE_SIZE + cy >> 1;
-      mergeCell(parent, pcy * TILE_SIZE + pcx, depth, count);
-    }
-  });
-  return parent;
-}
-
-// src/tiles/core/store.ts
-function createMemoryTileStore() {
-  const tiles = /* @__PURE__ */ new Map();
-  const meta = /* @__PURE__ */ new Map();
-  const key = (z, x, y) => `${z}/${x}/${y}`;
-  const read = (z, x, y) => tiles.get(key(z, x, y));
-  const write = (z, x, y, cells) => {
-    if (cells.size === 0) {
-      tiles.delete(key(z, x, y));
-      return;
-    }
-    tiles.set(key(z, x, y), cells);
-  };
-  const merge = (z, x, y, incoming) => {
-    const cells = read(z, x, y) ?? /* @__PURE__ */ new Map();
-    for (const [k, cell] of incoming) {
-      const existing = cells.get(k);
-      if (!existing) {
-        cells.set(k, { depth: cell.depth, count: cell.count });
-      } else {
-        if (cell.depth < existing.depth) existing.depth = cell.depth;
-        existing.count = Math.min(255, existing.count + cell.count);
-      }
-    }
-    write(z, x, y, cells);
-  };
-  const updateAncestors = (z, x, y) => {
-    let lz = z;
-    let lx = x;
-    let ly = y;
-    while (lz > MIN_ZOOM) {
-      const pz = lz - 1;
-      const px = lx >> 1;
-      const py = ly >> 1;
-      const children = [
-        read(lz, px * 2, py * 2),
-        read(lz, px * 2 + 1, py * 2),
-        read(lz, px * 2, py * 2 + 1),
-        read(lz, px * 2 + 1, py * 2 + 1)
-      ];
-      write(pz, px, py, minPoolTile(children));
-      lz = pz;
-      lx = px;
-      ly = py;
-    }
-  };
-  return {
-    read,
-    write,
-    merge,
-    updateAncestors,
-    listTiles: (z) => {
-      const out = [];
-      for (const key2 of tiles.keys()) {
-        const [tz, tx, ty] = key2.split("/");
-        if (Number(tz) === z) {
-          out.push({ x: Number(tx), y: Number(ty) });
-        }
-      }
-      return out;
-    },
-    getMeta: (k) => meta.get(k),
-    setMeta: (k, v) => {
-      meta.set(k, v);
-    },
-    transaction: (fn) => fn(),
-    clear: () => {
-      tiles.clear();
-    },
-    close: () => {
-      tiles.clear();
-    }
-  };
-}
-
-// src/tiles/core/accumulator.ts
-function createTileAccumulator(store, { baseZoom = BASE_ZOOM, ancestors = true } = {}) {
-  const dirty2 = /* @__PURE__ */ new Map();
-  return {
-    add(sample) {
-      if (!Number.isFinite(sample.lon) || !Number.isFinite(sample.lat) || !Number.isFinite(sample.depth) || sample.depth < 0) {
-        return;
-      }
-      const { x, y, cx, cy } = lngLatToCell(sample.lon, sample.lat, baseZoom);
-      const key = `${x},${y}`;
-      let tile = dirty2.get(key);
-      if (!tile) {
-        tile = { z: baseZoom, x, y, cells: /* @__PURE__ */ new Map() };
-        dirty2.set(key, tile);
-      }
-      mergeCell(tile.cells, cy * TILE_SIZE + cx, encodeDepth(sample.depth));
-    },
-    flush() {
-      if (dirty2.size === 0) return;
-      const tiles = [...dirty2.values()];
-      dirty2.clear();
-      store.transaction(() => {
-        for (const tile of tiles) {
-          store.merge(tile.z, tile.x, tile.y, tile.cells);
-          if (ancestors) {
-            store.updateAncestors(tile.z, tile.x, tile.y);
-          }
-        }
-      });
-    },
-    get pending() {
-      return dirty2.size;
-    }
-  };
-}
 
 // src/tiles/core/tile-source.ts
 var RAD2 = Math.PI / 180;
@@ -997,14 +851,14 @@ function tileCellCentre(z, x, y, key) {
   return [lon, lat];
 }
 function cellsToSamples(z, x, y, cells) {
-  const samples2 = [];
+  const samples = [];
   for (const [key, cell] of cells) {
     const depth = decodeDepth(cell.depth);
     if (!Number.isFinite(depth)) continue;
     const [lon, lat] = tileCellCentre(z, x, y, key);
-    samples2.push({ lon, lat, depth });
+    samples.push({ lon, lat, depth });
   }
-  return samples2;
+  return samples;
 }
 function decodeTileSamples(z, x, y, bytes) {
   return cellsToSamples(z, x, y, decodeTile(bytes));
@@ -1035,7 +889,7 @@ var BATHY_BASE = `${ASSET_BASE}/bathymetry`;
 var DEBOUNCE_MS = 400;
 var POLL_MS = 15e3;
 var MAX_TILE_FETCHES = 24;
-var LIVE_FLUSH_MS = 2e3;
+var LIVE_FLUSH_MS = 300;
 var DEFAULT_DEPTH_PATH = "environment.depth.belowTransducer";
 var client = await connectExtension();
 var worker = new Worker(new URL("./render-worker.js", import.meta.url), {
@@ -1044,7 +898,9 @@ var worker = new Worker(new URL("./render-worker.js", import.meta.url), {
 var settings = { ...DEFAULT_SETTINGS };
 var transducer = null;
 var depthPath = DEFAULT_DEPTH_PATH;
-var samples = [];
+var vessel = {};
+var showFootprint = false;
+var baseSamples = [];
 var lastReq = null;
 var busy = false;
 var dirty = false;
@@ -1052,11 +908,12 @@ var rendering = null;
 var renderingLive = false;
 var liveInterval = 200;
 var lastLiveAt = 0;
+var perfScale = 0;
+var perfFrameMs = 0;
+var framesSeen = 0;
+var framesSince = Date.now();
 var timer;
-var lastZoom = 0;
-var clientStore = createMemoryTileStore();
-var clientAccumulator = createTileAccumulator(clientStore);
-var liveDirty = false;
+var pendingLive = [];
 var liveFlushTimer;
 async function loadSettings() {
   try {
@@ -1082,6 +939,9 @@ async function loadMeta() {
     const meta = await res.json();
     transducer = meta.transducer ?? null;
     if (meta.depthPath) depthPath = meta.depthPath;
+    vessel = meta.vessel ?? {};
+    showFootprint = meta.debug?.vesselFootprint === true;
+    publishVessel();
   } catch {
   }
 }
@@ -1117,8 +977,8 @@ async function fetchHistory() {
     const { lon, lat } = correct(row.position[0], row.position[1], row.heading);
     out.push({ lon, lat, depth: row.depth });
   }
-  samples = out;
-  publish();
+  baseSamples = out;
+  publishBase();
 }
 async function fetchTiles(req) {
   const cellMetres = Math.max(req.resolution, 0.01);
@@ -1128,7 +988,6 @@ async function fetchTiles(req) {
     if (xs2.length * ys2.length <= MAX_TILE_FETCHES) break;
     zoom--;
   }
-  lastZoom = zoom;
   const { xs, ys } = tileRangeForBbox(req.bounds, zoom);
   const out = [];
   await Promise.all(
@@ -1146,16 +1005,8 @@ async function fetchTiles(req) {
       })
     )
   );
-  for (const x of xs) {
-    for (const y of ys) {
-      const cells = clientStore.read(lastZoom, x, y);
-      if (cells && cells.size) {
-        out.push(...cellsToSamples(lastZoom, x, y, cells));
-      }
-    }
-  }
-  samples = out;
-  publish();
+  baseSamples = out;
+  publishBase();
 }
 function schedule() {
   clearTimeout(timer);
@@ -1169,8 +1020,8 @@ async function refresh() {
     await fetchTiles(lastReq);
   }
 }
-function publish() {
-  worker.postMessage({ type: "samples", samples });
+function publishBase() {
+  worker.postMessage({ type: "base", samples: baseSamples });
   dirty = true;
   if (lastReq) draw(true);
 }
@@ -1180,13 +1031,19 @@ function startLive() {
   void client.signalk.subscribe(
     ["navigation.position", depthPath, "navigation.headingTrue"],
     (ev) => {
-      if (ev.path === "navigation.position" && Array.isArray(ev.value)) {
-        livePosition = ev.value;
+      if (ev.path === "navigation.position") {
+        const p = ev.value;
+        if (Array.isArray(p)) {
+          livePosition = [p[0], p[1]];
+        } else if (typeof p?.longitude === "number" && typeof p?.latitude === "number") {
+          livePosition = [p.longitude, p.latitude];
+        }
       } else if (ev.path === depthPath && typeof ev.value === "number") {
         liveDepth = ev.value;
       } else if (ev.path === "navigation.headingTrue" && typeof ev.value === "number") {
         liveHeading = ev.value;
       }
+      publishVessel();
       sampleLive();
     }
   ).then((un) => {
@@ -1205,17 +1062,30 @@ function stopLive() {
 var livePosition = null;
 var liveDepth = null;
 var liveHeading;
+function publishVessel() {
+  if (!showFootprint) return;
+  worker.postMessage({
+    type: "vessel",
+    position: livePosition,
+    heading: liveHeading,
+    loa: vessel.loa,
+    beam: vessel.beam
+  });
+  dirty = true;
+  if (lastReq) draw(true);
+}
 function sampleLive() {
   if (!livePosition || liveDepth === null) return;
   const { lon, lat } = correct(livePosition[0], livePosition[1], liveHeading);
-  clientAccumulator.add({ lon, lat, depth: liveDepth });
-  liveDirty = true;
+  pendingLive.push({ lon, lat, depth: liveDepth });
 }
 function flushLive() {
-  if (!liveDirty) return;
-  liveDirty = false;
-  clientAccumulator.flush();
-  if (settings.source === "tiles" && lastReq) void fetchTiles(lastReq);
+  if (pendingLive.length === 0) return;
+  const live = pendingLive;
+  pendingLive = [];
+  worker.postMessage({ type: "live", samples: live });
+  dirty = true;
+  if (lastReq) draw(true);
 }
 function draw(live = false) {
   if (busy || !lastReq || !settings.enabled) return;
@@ -1228,6 +1098,11 @@ function draw(live = false) {
 }
 worker.onmessage = (e) => {
   const msg = e.data;
+  if (msg.type === "perf") {
+    perfScale = msg.scale;
+    perfFrameMs = msg.frameMs;
+    return;
+  }
   const req = rendering;
   const live = renderingLive;
   busy = false;
@@ -1243,6 +1118,16 @@ worker.onmessage = (e) => {
     image: msg.image
   }).catch(() => {
   });
+  framesSeen++;
+  const now = Date.now();
+  if (now - framesSince >= 5e3) {
+    const fps = framesSeen * 1e3 / (now - framesSince);
+    console.info(
+      `[LiveDepth] ${fps.toFixed(1)} frames/s \xB7 render scale ${perfScale.toFixed(2)} \xB7 worker ${perfFrameMs.toFixed(1)} ms/frame`
+    );
+    framesSeen = 0;
+    framesSince = now;
+  }
   if (dirty || lastReq !== req) draw(live);
 };
 await client.subscribe(["overlay.request"], (_name, payload) => {
@@ -1251,6 +1136,7 @@ await client.subscribe(["overlay.request"], (_name, payload) => {
   if (typeof req.liveInterval === "number" && req.liveInterval > 0) {
     liveInterval = req.liveInterval;
   }
+  if (settings.source === "tiles") schedule();
   draw();
 });
 await client.subscribe(["overlay.state"], (_name, payload) => {