speedandcurrent 2.3.3 → 2.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "speedandcurrent",
-  "version": "2.3.3",
+  "version": "2.4.0",
   "description": "A plugin that automatically corrects boat speed and calculates current and leeway using sensor fusion.",
   "main": "index.js",
   "scripts": {
@@ -41,7 +41,7 @@
   },
   "dependencies": {
     "kalman-filter": "^2.3.0",
-    "signalkutilities": "^3.1.2"
+    "signalkutilities": "^3.1.6"
   },
   "files": [
     "icon.png",

package/public/TableRenderer.js

@@ -1,14 +1,18 @@
 // TableRenderer — purpose-built renderer for the correction table.
 // Rows = speed bins (knots), columns = heel bins (degrees).
 // Each learned cell shows factor deviation (±%) and leeway (°).
-// Background encodes factor: green = paddlewheel reads slow, orange = reads fast.
-// Active cell (last updated) gets a bold border; interpolation neighbours get a faint tint.
+// Background encodes factor and leeway; a bottom bar encodes fusion weight.
+// Active cell (last updated) gets a thin black border.
 
 const RAD_TO_DEG = 180 / Math.PI;
 const MPS_TO_KNOTS = 1.943844;
 
 const DEFAULT_SPEED_SYMBOL = 'kn';
 const DEFAULT_HEEL_SYMBOL  = '°';
+
+const MARKER_CORRECTED_COLOR = '#0d6efd';
+const MARKER_RAW_COLOR = '#dc3545';
+const MARKER_DOT_RADIUS = 8;
 function fmtSpeed(mps)  { return (mps * MPS_TO_KNOTS).toFixed(1); }
 function fmtHeel(rad)   { return (rad * RAD_TO_DEG).toFixed(0); }
 function fmtFactor(f)   { const p = (f - 1) * 100; return (p >= 0 ? '+' : '') + p.toFixed(1) + '%'; }
@@ -38,7 +42,75 @@ class TableRenderer {
       el.appendChild(this._dataRow(r, rIndex, col, table, maxDev, fmtSpeedFn));
       rIndex++;
     }
-    return el;
+
+    const wrap = document.createElement('div');
+    wrap.classList.add('Table2D-wrap');
+    wrap.appendChild(el);
+    const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+    svg.classList.add('Table2D-markers');
+    wrap.appendChild(svg);
+    return wrap;
+  }
+
+  // Overlay a dot for the uncorrected (raw) speed and a dot for the corrected
+  // speed, both positioned at the raw heel column.
+  // wrap: the element returned by render(). row/col: the table's axis config
+  // ({min,max,step}). marker: { rawSpeed, heel, correctedSpeed } in raw (SI)
+  // units, or null/undefined to clear the overlay.
+  renderMarkers(wrap, row, col, marker) {
+    const svg = wrap.querySelector('.Table2D-markers');
+    const table = wrap.querySelector('.Table2D');
+    if (!svg || !table) return;
+    svg.innerHTML = '';
+    if (!marker) return;
+    const { rawSpeed, heel, correctedSpeed } = marker;
+    if (![rawSpeed, heel, correctedSpeed].every(Number.isFinite)) return;
+
+    const wrapRect = wrap.getBoundingClientRect();
+    svg.setAttribute('width', wrapRect.width);
+    svg.setAttribute('height', wrapRect.height);
+
+    const rowHeaders = [...table.querySelectorAll('th.TableRowHeader:not(.TableCorner)')];
+    const colHeaders = [...table.querySelectorAll('th.TablecolumnHeader')];
+    if (!rowHeaders.length || !colHeaders.length) return;
+
+    const centerY = rowHeaders.map(th => {
+      const r = th.getBoundingClientRect();
+      return (r.top + r.bottom) / 2 - wrapRect.top;
+    });
+    const centerX = colHeaders.map(th => {
+      const r = th.getBoundingClientRect();
+      return (r.left + r.right) / 2 - wrapRect.left;
+    });
+
+    const x       = this._lerpAxis(centerX, (heel - col.min) / col.step);
+    const yRaw    = this._lerpAxis(centerY, (rawSpeed - row.min) / row.step);
+    const yCorr   = this._lerpAxis(centerY, (correctedSpeed - row.min) / row.step);
+
+    svg.appendChild(this._markerDot(x, yRaw, MARKER_RAW_COLOR));
+    svg.appendChild(this._markerDot(x, yCorr, MARKER_CORRECTED_COLOR));
+  }
+
+  // Interpolate a continuous axis index (may be fractional, out of range) against
+  // an array of known pixel centers for each axis bin.
+  _lerpAxis(centers, frac) {
+    const n = centers.length;
+    const f = Math.max(0, Math.min(n - 1, frac));
+    const i0 = Math.floor(f);
+    const i1 = Math.min(i0 + 1, n - 1);
+    const t = f - i0;
+    return centers[i0] + (centers[i1] - centers[i0]) * t;
+  }
+
+  _markerDot(x, y, color) {
+    const circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
+    circle.setAttribute('cx', x);
+    circle.setAttribute('cy', y);
+    circle.setAttribute('r', MARKER_DOT_RADIUS);
+    circle.setAttribute('fill', color);
+    circle.setAttribute('stroke', '#fff');
+    circle.setAttribute('stroke-width', 1);
+    return circle;
   }
 
   _headerRow(col, cornerText, fmtHeelFn) {
@@ -89,7 +161,7 @@ class TableRenderer {
       td.appendChild(d);
       const color = this._factorColor(factor, maxDev);
       if (leeway !== null) {
-        const angleDeg = 90 + leeway * RAD_TO_DEG * 1;
+        const angleDeg = 90 + leeway * RAD_TO_DEG;
         td.style.background = `repeating-linear-gradient(
           ${angleDeg}deg,
           ${color} 0px, ${color} 9px,
@@ -107,13 +179,19 @@ class TableRenderer {
     }
 
     const attrs = cell.displayAttributes;
-    if (attrs?.selected)          td.classList.add('cell--active');
-    else if (attrs?.normWeight > 0) td.classList.add('cell--neighbour');
+    if (Number.isFinite(attrs?.normWeight) && attrs.normWeight > 0) {
+      const d = document.createElement('div');
+      d.className = 'cell-weight';
+      const weight = Math.max(0, Math.min(1, attrs.normWeight));
+      d.style.width = `${weight * 100}%`;
+      d.title = `Fusion weight ${(weight * 100).toFixed(1)}%`;
+      td.appendChild(d);
+    }
+    if (attrs?.selected) td.classList.add('cell--active');
 
     return td;
   }
 
-  // Find the largest absolute factor deviation from 1 to normalise the color scale.
   _computeMaxDev(table) {
     let maxDev = 0;
     for (const row of table) {
@@ -123,21 +201,18 @@ class TableRenderer {
         if (dev > maxDev) maxDev = dev;
       }
     }
-    return maxDev || 0.05; // avoid a fully white table when all factors are near 1
+    return maxDev || 0.05;
   }
 
-  // factor < 1: paddlewheel reads fast → white→orange
-  // factor > 1: paddlewheel reads slow → white→green
   _factorColor(factor, maxDev) {
     if (!Number.isFinite(factor)) return '';
     const dev = factor - 1;
     if (Math.abs(dev) < 1e-6) return '';
-    const a = Math.min(1, Math.abs(dev) / maxDev);
+    const intensity = Math.min(1, Math.abs(dev) / maxDev);
     if (dev < 0) {
-      return `rgb(255,${Math.round(255 - 90 * a)},${Math.round(255 * (1 - a))})`; // white→orange
-    } else {
-      return `rgb(${Math.round(255 * (1 - a))},${Math.round(255 - 95 * a)},${Math.round(255 - 175 * a)})`; // white→green
+      return `rgb(255,${Math.round(255 - 90 * intensity)},${Math.round(255 * (1 - intensity))})`;
     }
+    return `rgb(${Math.round(255 * (1 - intensity))},${Math.round(255 - 95 * intensity)},${Math.round(255 - 175 * intensity)})`;
   }
 }