signalk-livedepth-plugin 0.3.4 → 0.3.12

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "signalk-livedepth-plugin",
-  "version": "0.3.4",
+  "version": "0.3.12",
   "description": "Build and visualise a depth map from your own soundings, live on the chart as your vessel moves.",
   "keywords": [
     "signalk-node-server-plugin",

package/public/js/config.js

@@ -667,10 +667,19 @@ var DEFAULT_SETTINGS = {
   enabled: true,
   source: "history",
   quality: "auto",
+  fullResolution: true,
+  vectorContours: true,
+  msaa: true,
+  fieldCells: 2048,
+  contourWidthPx: 1,
+  minorContourWidthPx: 0.75,
+  majorContourColor: "#000000",
+  minorContourColor: "#9aa4a8",
   historyWindowHours: 1,
   historyResolutionS: 0.1,
   shadeLimitMetres: 10,
-  contourIntervalMetres: 1,
+  contourIntervalMetres: 1.524,
+  minorContourMetres: 0.3048,
   fillMetres: 6,
   cellPx: 24,
   mergeTolerance: 0.15,
@@ -685,9 +694,13 @@ var SETTINGS_BOUNDS = {
   historyWindowHours: { min: 0.1, max: 168, step: 0.1 },
   historyResolutionS: { min: 0.01, max: 60, step: 0.01 },
   shadeLimitMetres: { min: 1, max: 200, step: 1 },
-  contourIntervalMetres: { min: 0.5, max: 50, step: 0.5 },
+  contourIntervalMetres: { min: 0.3048, max: 50, step: 0.3048 },
+  minorContourMetres: { min: 0.3048, max: 50, step: 0.3048 },
   fillMetres: { min: 0, max: 20, step: 1 },
   cellPx: { min: 4, max: 128, step: 1 },
+  fieldCells: { min: 256, max: 4096, step: 256 },
+  contourWidthPx: { min: 0.5, max: 6, step: 0.5 },
+  minorContourWidthPx: { min: 0.5, max: 6, step: 0.25 },
   mergeTolerance: { min: 0, max: 1, step: 0.01 },
   maxDepthMetres: { min: 1, max: 500, step: 1 },
   safetyDepthMetres: { min: 0, max: 50, step: 0.5 }
@@ -742,8 +755,14 @@ var FIELDS = [
   },
   {
     key: "contourIntervalMetres",
-    label: "Isobath interval",
-    hint: "Depth between isobaths.",
+    label: "Major isobath interval",
+    hint: "Depth between index isobaths; every multiple of this is a major contour.",
+    depth: true
+  },
+  {
+    key: "minorContourMetres",
+    label: "Minor isobath interval",
+    hint: "Depth between the minor isobaths.",
     depth: true
   },
   {
@@ -774,8 +793,71 @@ var FIELDS = [
     label: "Safety depth",
     hint: "Samples at or below this depth are marked individually.",
     depth: true
+  },
+  {
+    key: "fieldCells",
+    label: "Field resolution",
+    hint: "Depth-field cells across the view; higher resolves finer contours."
+  },
+  {
+    key: "contourWidthPx",
+    label: "Major contour width",
+    hint: "Major (index) isobar line width.",
+    suffix: "px"
+  },
+  {
+    key: "minorContourWidthPx",
+    label: "Minor contour width",
+    hint: "Minor isobar line width.",
+    suffix: "px"
+  }
+];
+var TOGGLES = [
+  {
+    key: "fullResolution",
+    label: "Full surface resolution",
+    hint: "Draw the shaded surface at the display's full size instead of the quality scale (like crowd-depth)."
+  },
+  {
+    key: "vectorContours",
+    label: "Vector contours",
+    hint: "Draw isobars as vector lines, crisp at any zoom, instead of the per-fragment approximation."
+  },
+  {
+    key: "msaa",
+    label: "Smooth edges (MSAA)",
+    hint: "Antialias the WebGL surface edges; applied on the next frame."
+  }
+];
+var COLOR_FIELDS = [
+  {
+    key: "majorContourColor",
+    label: "Major contour colour",
+    hint: "Colour of the index (major) isobars."
+  },
+  {
+    key: "minorContourColor",
+    label: "Minor contour colour",
+    hint: "Colour of the minor isobars."
   }
 ];
+var GRAPHICS = [
+  { kind: "quality" },
+  { kind: "toggle", key: "vectorContours" },
+  { kind: "field", key: "contourWidthPx" },
+  { kind: "field", key: "minorContourWidthPx" },
+  { kind: "color", key: "majorContourColor" },
+  { kind: "color", key: "minorContourColor" },
+  { kind: "toggle", key: "fullResolution" },
+  { kind: "toggle", key: "msaa" },
+  { kind: "field", key: "fieldCells" }
+];
+var fieldByKey = new Map(FIELDS.map((field) => [field.key, field]));
+var toggleByKey = new Map(TOGGLES.map((toggle) => [toggle.key, toggle]));
+var colorByKey = new Map(COLOR_FIELDS.map((field) => [field.key, field]));
+var graphicsFieldKeys = new Set(
+  GRAPHICS.flatMap((item) => item.kind === "field" ? [item.key] : [])
+);
 var unitSymbol = () => depthUnit === "foot" ? "ft" : "m";
 var toDisplay = (metres) => depthUnit === "foot" ? metres / METRES_PER_FOOT : metres;
 var fromDisplay = (value) => depthUnit === "foot" ? value * METRES_PER_FOOT : value;
@@ -843,6 +925,28 @@ function numberField(field) {
   }
   return wrap2;
 }
+function toggleField(toggle) {
+  const wrap2 = document.createElement("label");
+  wrap2.className = "field row";
+  const name = document.createElement("span");
+  name.className = "name";
+  name.textContent = toggle.label;
+  const input = document.createElement("input");
+  input.type = "checkbox";
+  input.checked = Boolean(settings[toggle.key]);
+  input.addEventListener("change", () => {
+    settings[toggle.key] = input.checked;
+    void save();
+  });
+  wrap2.append(name, input);
+  if (toggle.hint) {
+    const hint = document.createElement("span");
+    hint.className = "hint";
+    hint.textContent = toggle.hint;
+    wrap2.appendChild(hint);
+  }
+  return wrap2;
+}
 function build() {
   root.replaceChildren();
   historyRows.length = 0;
@@ -891,6 +995,57 @@ function build() {
   sourceHint.textContent = "History draws the vessel's own recorded track; tiles draw the server-built bathymetry store, extended live.";
   source.appendChild(sourceHint);
   root.appendChild(source);
+  for (const field of FIELDS) {
+    if (!graphicsFieldKeys.has(field.key)) {
+      root.appendChild(numberField(field));
+    }
+  }
+  const graphicsHeading = document.createElement("h3");
+  graphicsHeading.textContent = "Graphics Settings";
+  root.appendChild(graphicsHeading);
+  for (const item of GRAPHICS) {
+    if (item.kind === "quality") {
+      root.appendChild(qualityField());
+    } else if (item.kind === "toggle") {
+      const toggle = toggleByKey.get(item.key);
+      if (toggle) {
+        root.appendChild(toggleField(toggle));
+      }
+    } else if (item.kind === "color") {
+      const color = colorByKey.get(item.key);
+      if (color) {
+        root.appendChild(colorField(color));
+      }
+    } else {
+      const field = fieldByKey.get(item.key);
+      if (field) {
+        root.appendChild(numberField(field));
+      }
+    }
+  }
+  syncHistoryDisabled();
+}
+function colorField(field) {
+  const wrap2 = document.createElement("label");
+  wrap2.className = "field row";
+  const name = document.createElement("span");
+  name.className = "name";
+  name.textContent = field.label;
+  const input = document.createElement("input");
+  input.type = "color";
+  input.value = settings[field.key];
+  input.addEventListener("input", () => {
+    settings[field.key] = input.value;
+    void save();
+  });
+  wrap2.append(name, input);
+  const hint = document.createElement("span");
+  hint.className = "hint";
+  hint.textContent = field.hint;
+  wrap2.appendChild(hint);
+  return wrap2;
+}
+function qualityField() {
   const quality = document.createElement("label");
   quality.className = "field";
   const qualityName = document.createElement("span");
@@ -918,11 +1073,7 @@ function build() {
   qualityHint.className = "hint";
   qualityHint.textContent = "Scales the shaded depth surface only; soundings, circles and labels always render at full resolution. Auto adapts to this GPU.";
   quality.appendChild(qualityHint);
-  root.appendChild(quality);
-  for (const field of FIELDS) {
-    root.appendChild(numberField(field));
-  }
-  syncHistoryDisabled();
+  return quality;
 }
 async function save() {
   await client.state.set(settings);