speedandcurrent 1.4.2 → 1.5.1

package/public/app.js

@@ -12,40 +12,55 @@ let vSpeed = 1;
 let dSpeed = 1;
 
 
+const LS_KEYS = {
+  speed: 'sc_speed_unit',
+  angle: 'sc_angle_unit',
+  color: 'sc_color_mode',
+  metrics: 'sc_table_metrics'
+};
+
 export function handleSpeedUnitChange(value) {
   if (value == "knots") {
     vSpeed = 1.943844;
     dSpeed = 1;
+    localStorage.setItem(LS_KEYS.speed, 'knots');
     return;
   }
   if (value == "kmh") {
     vSpeed = 3.6;
     dSpeed = 1;
+    localStorage.setItem(LS_KEYS.speed, 'kmh');
     return;
   }
   vSpeed = 1;
   dSpeed = 1;
+  localStorage.setItem(LS_KEYS.speed, 'ms');
 }
 
 export function handleAngleUnitChange(value) {
   if (value == "degrees") {
     vAngle = 180 / Math.PI;
     dAngle = 0;
+    localStorage.setItem(LS_KEYS.angle, 'degrees');
     return;
   }
   vAngle = 1;
   dAngle = 2;
+  localStorage.setItem(LS_KEYS.angle, 'radians');
 }
 
 
 
-export function handleTableStyleChange(value) {
-  //console.log(value);
-  if (value == "cartesian") {
-    tableRenderer.setCellFormat(cartesian);
-  }
-  else {
-    tableRenderer.setCellFormat(polar);
+// Removed table style switch; rendering is driven by metrics selection.
+
+export function handleColorModeChange(value) {
+  if (tableRenderer && tableRenderer.setColorMode) {
+    tableRenderer.setColorMode(value);
+    localStorage.setItem(LS_KEYS.color, value);
+    // re-render immediately using last data if available
+    // fetchAndUpdateData will repaint next tick; do a quick repaint now if cached
+    // (Simplest approach: trigger fetch)
+    fetchAndUpdateData();
   }
 }
 
@@ -59,42 +74,83 @@ function cSpeed(value) {
   return value.toFixed(dSpeed);
 }
 
+let selectedMetrics = {
+  correction: true,
+  factor: true,
+  leeway: true,
+  trace: false,
+  N: true,
+};
+
+function buildCellContent(parts) {
+  // parts is array of strings; filter falsy and join
+  return parts.filter(Boolean).join('\n');
+}
+
 function cartesian(correction, speed, heel) {
   if (correction.N == 0) return null;
-  return ` <div><strong>X:</strong> ${cSpeed(correction.x)}</div>
-           <div><strong>Y:</strong> ${cSpeed(correction.y)}</div>
-           <div><strong>N:</strong> ${correction.N}</div>
-          `;
+  const bits = [];
+  if (selectedMetrics.correction) {
+    bits.push(` <div><strong>X:</strong> ${cSpeed(correction.x)}</div>`);
+    bits.push(` <div><strong>Y:</strong> ${cSpeed(correction.y)}</div>`);
+  }
+  if (selectedMetrics.trace && Number.isFinite(correction.trace)) {
+    bits.push(` <div><strong>trace:</strong> ${Number(correction.trace).toPrecision(2)}</div>`);
+  }
+  if (selectedMetrics.N) {
+    bits.push(` <div><strong>N:</strong> ${correction.N}</div>`);
+  }
+  return buildCellContent(bits);
 }
 
 function polar(correction, speed, heel) {
   if (speed == 0 || correction.N == 0) return null;
-  const factor = (correction.x + speed) / speed;
-  return ` <div><strong>factor:</strong> ${factor.toFixed(2)}</div>
-           <div><strong>leeway:</strong> ${cAngle(Math.atan2(correction.y, speed))}</div>
-           <div><strong>N:</strong> ${correction.N}</div>
-          `;
-}
-
-function formatCellX(value, speed, heel) {
-  if (value.N == 0) return null;
-  return cSpeed(value.x);
-}
-
-function formatCellY(value, speed, heel) {
-  if (value.N == 0) return null;
-  return Math.abs(cSpeed(value.y));
-}
-
-function formatCellXPolar(value, speed, heel) {
-  if (value.N == 0) return null;
-  const factor = (correction.x + speed) / speed;
-  return factor.toFixed(2);
+  const bits = [];
+  // Prefer server-provided values when available
+  const factor = Number.isFinite(correction.factor) ? correction.factor : (speed > 0 ? (correction.x + speed) / speed : 0);
+  const leewayRad = Number.isFinite(correction.leeway) ? correction.leeway : Math.atan2(correction.y, speed + correction.x);
+  const leewayDisplay = leewayRad; // signed value; color uses |leeway|
+
+  if (selectedMetrics.factor) {
+    bits.push(` <div><strong>factor:</strong> ${factor.toFixed(2)}</div>`);
+  }
+  if (selectedMetrics.leeway) {
+    bits.push(` <div><strong>leeway:</strong> ${cAngle(leewayDisplay)}</div>`);
+  }
+  if (selectedMetrics.trace && Number.isFinite(correction.trace)) {
+    bits.push(` <div><strong>trace:</strong> ${Number(correction.trace).toPrecision(2)}</div>`);
+  }
+  if (selectedMetrics.N) {
+    bits.push(` <div><strong>N:</strong> ${correction.N}</div>`);
+  }
+  return buildCellContent(bits);
 }
 
-function formatCellYPolar(value, speed, heel) {
-  if (value.N == 0) return null;
-  return Math.abs(cAngle(Math.atan2(value.y, speed)));
+function unifiedCellRenderer(correction, speed, heel) {
+  // Combines polar-oriented metrics and cartesian correction based on selections
+  if (correction.N == 0) return null;
+  const bits = [];
+  // Polar-ish metrics
+  if (selectedMetrics.factor && (speed !== 0)) {
+    const factor = Number.isFinite(correction.factor) ? correction.factor : (speed > 0 ? (correction.x + speed) / speed : 0);
+    bits.push(` <div><strong>factor:</strong> ${factor.toFixed(2)}</div>`);
+  }
+  if (selectedMetrics.leeway && (speed !== 0)) {
+    const leewayRad = Number.isFinite(correction.leeway) ? correction.leeway : Math.atan2(correction.y, speed + correction.x);
+    bits.push(` <div><strong>leeway:</strong> ${cAngle(leewayRad)}</div>`);
+  }
+  // Cartesian correction (always available)
+  if (selectedMetrics.correction) {
+    bits.push(` <div><strong>X:</strong> ${cSpeed(correction.x)}</div>`);
+    bits.push(` <div><strong>Y:</strong> ${cSpeed(correction.y)}</div>`);
+  }
+  if (selectedMetrics.trace && Number.isFinite(correction.trace)) {
+    bits.push(` <div><strong>trace:</strong> ${Number(correction.trace).toPrecision(2)}</div>`);
+  }
+  if (selectedMetrics.N) {
+    bits.push(` <div><strong>N:</strong> ${correction.N}</div>`);
+  }
+  return buildCellContent(bits);
 }
 
 
@@ -104,26 +160,54 @@ async function getFromServer(endpoint) {
     const response = await fetch(`${API_BASE_URL}/${endpoint}`, {
       method: 'GET',
       headers: {
-        'Content-Type': 'application/json'
-      }
+        'Accept': 'application/json'
+      },
+      credentials: 'same-origin' // include cookies for auth
     });
 
+    const msgEl = document.getElementById("message");
+    const contentType = response.headers.get('content-type') || '';
+
+    // Auth errors: show friendly message and pause updates
+    if (response.status === 401 || response.status === 403) {
+      if (msgEl) {
+        msgEl.innerHTML = 'Not signed in. Please <a href="/">sign in</a> to the Signal K server, then reload this page.';
+      }
+      if (updateTimer) {
+        clearInterval(updateTimer);
+        updatesPaused = true;
+        const toggleButton = document.getElementById('toggle-updates');
+        if (toggleButton) toggleButton.textContent = "Resume";
+      }
+      return null;
+    }
+
+    // Service not running or other HTTP errors
     if (!response.ok) {
       if (response.status === 503) {
-        document.getElementById("message").innerHTML = "Plugin is not running";
+        if (msgEl) msgEl.textContent = "Plugin is not running";
       } else {
-        document.getElementById("message").innerHTML = "Failed to fetch data. Error: " + response.status + " " + response.statusText;
+        if (msgEl) msgEl.textContent = `Failed to fetch data (${response.status} ${response.statusText}).`;
       }
-    }
-    else {
-      document.getElementById("message").innerHTML = "";
+      return null;
     }
 
-    const data = await response.json();
-    return data;
+    // Only parse JSON when content-type matches
+    if (contentType.includes('application/json')) {
+      const data = await response.json();
+      if (msgEl) msgEl.textContent = "";
+      return data;
+    } else {
+      // Likely an HTML login page or plain text error
+      if (msgEl) {
+        msgEl.innerHTML = 'Unexpected server response. If you are not signed in, please <a href="/">sign in</a> to the Signal K server, then reload.';
+      }
+      return null;
+    }
   } catch (error) {
     console.error("Failed to fetch data from server:", error);
-    document.getElementById("message").innerHTML = error;
+    const msgEl = document.getElementById("message");
+    if (msgEl) msgEl.textContent = `Network error: ${error && error.message ? error.message : String(error)}`;
     return null;
   }
 }
@@ -160,7 +244,7 @@ function updatePolar(data) {
   const table = document.createElement('table');
   table.classList.add('polar');
   const headerRow = document.createElement('tr');
-  headerRow.innerHTML = '<th>Label</th><th>Speed</th><th>Angle</th>';
+  headerRow.innerHTML = '<th>Label</th><th>Speed</th><th>Angle</th><th>Trace</th>';
   table.appendChild(headerRow);
 
   data.polars.forEach(polar => {
@@ -168,7 +252,10 @@ function updatePolar(data) {
     if (polar.id) {
       row.id = polar.id;
     }
-    row.innerHTML = `<td>${polar.displayAttributes.label}</td><td>${cSpeed(polar.magnitude)}</td><td>${cAngle(polar.angle)}</td>`;
+    if (polar.displayAttributes.unstable) {
+      row.classList.add('unstable');
+    }
+  row.innerHTML = `<td>${polar.displayAttributes.label}</td><td>${cSpeed(polar.magnitude)}</td><td>${cAngle(polar.angle)}</td><td>${(polar.trace !== undefined && polar.trace !== null ? Number(polar.trace).toPrecision(2) : '')}</td>`;
     table.appendChild(row);
   });
 
@@ -182,7 +269,7 @@ function updateDelta(data) {
   const table = document.createElement('table');
   table.classList.add('delta');
   const headerRow = document.createElement('tr');
-  headerRow.innerHTML = '<th>Label</th><th>Value</th>';
+  headerRow.innerHTML = '<th>Label</th><th>Value</th><th>Variance</th>';
   table.appendChild(headerRow);
 
   data.deltas.forEach(delta => {
@@ -190,7 +277,10 @@ function updateDelta(data) {
     if (delta.id) {
       row.id = delta.id;
     }
-    row.innerHTML = `<td>${delta.displayAttributes.label}</td><td>${cAngle(delta.value)}</td>`;
+    if (delta.displayAttributes.unstable) {
+      row.classList.add('unstable');
+    }
+  row.innerHTML = `<td>${delta.displayAttributes.label}</td><td>${cAngle(delta.value)}</td><td>${(delta.variance !== undefined && delta.variance !== null ? Number(delta.variance).toPrecision(2) : '')}</td>`;
     table.appendChild(row);
   });
 
@@ -213,6 +303,9 @@ function updateAttitude(data) {
     if (attitude.id) {
       row.id = attitude.id;
     }
+    if (attitude.displayAttributes.unstable) {
+      row.classList.add('unstable');
+    }
     row.innerHTML = `<td>${attitude.displayAttributes.label}</td><td>${cAngle(attitude.value.roll)}</td><td>${cAngle(attitude.value.pitch)}</td><td>${cAngle(attitude.value.yaw)}</td>`;
     table.appendChild(row);
   });
@@ -223,7 +316,6 @@ function updateTable(data) {
   const tableContainer = document.getElementById('table-container');
   tableContainer.innerHTML = '';
     data.tables.forEach(table => {
-
     const tableElement = tableRenderer.render(table);
     tableContainer.appendChild(tableElement);
   });
@@ -268,21 +360,88 @@ export function toggleUpdates() {
 
 //document.getElementById('toggle-updates').addEventListener('click', toggleUpdates);
 
-handleSpeedUnitChange("knots");
-handleAngleUnitChange("degrees");
-
 const tableRenderer = new TableRenderer();
-handleTableStyleChange("cartesian");
 tableRenderer.setColumnHeaderFormat(cAngle);
 tableRenderer.setRowHeaderFormat(cSpeed);
+// Default cell format is unified and driven by metrics; set to polar-like by default
+tableRenderer.setCellFormat(unifiedCellRenderer);
+
+function initSettingsFromStorage() {
+  try {
+    const speedUnit = localStorage.getItem(LS_KEYS.speed) || 'knots';
+    const angleUnit = localStorage.getItem(LS_KEYS.angle) || 'degrees';
+    const colorMode = localStorage.getItem(LS_KEYS.color) || 'none';
+    const metricsRaw = localStorage.getItem(LS_KEYS.metrics);
+
+    const speedEl = document.getElementById('speed-unit');
+    const angleEl = document.getElementById('angle-unit');
+    const colorEl = document.getElementById('color-mode');
+    const metricsEls = {
+      correction: document.getElementById('show-correction'),
+      factor: document.getElementById('show-factor'),
+      leeway: document.getElementById('show-leeway'),
+      trace: document.getElementById('show-trace'),
+      N: document.getElementById('show-N'),
+    };
+    if (speedEl) speedEl.value = speedUnit;
+    if (angleEl) angleEl.value = angleUnit;
+    if (colorEl) colorEl.value = colorMode;
+    if (metricsRaw) {
+      try {
+        const parsed = JSON.parse(metricsRaw);
+        selectedMetrics = { ...selectedMetrics, ...parsed };
+      } catch {}
+    }
+    // Initialize checkboxes to match selectedMetrics
+    if (metricsEls.correction) metricsEls.correction.checked = !!selectedMetrics.correction;
+    if (metricsEls.factor) metricsEls.factor.checked = !!selectedMetrics.factor;
+    if (metricsEls.leeway) metricsEls.leeway.checked = !!selectedMetrics.leeway;
+    if (metricsEls.trace) metricsEls.trace.checked = !!selectedMetrics.trace;
+    if (metricsEls.N) metricsEls.N.checked = !!selectedMetrics.N;
+
+    // Apply handlers (order: units, then renderer-dependent)
+    handleSpeedUnitChange(speedUnit);
+    handleAngleUnitChange(angleUnit);
+    handleColorModeChange(colorMode);
+  } catch (e) {
+    // Fallback to defaults on any error
+    handleSpeedUnitChange('knots');
+    handleAngleUnitChange('degrees');
+    handleColorModeChange('none');
+  }
+}
+
+export function handleMetricsChange() {
+  const metricsEls = {
+    correction: document.getElementById('show-correction'),
+    factor: document.getElementById('show-factor'),
+    leeway: document.getElementById('show-leeway'),
+    trace: document.getElementById('show-trace'),
+    N: document.getElementById('show-N'),
+  };
+  selectedMetrics = {
+    correction: metricsEls.correction ? !!metricsEls.correction.checked : selectedMetrics.correction,
+    factor: metricsEls.factor ? !!metricsEls.factor.checked : selectedMetrics.factor,
+    leeway: metricsEls.leeway ? !!metricsEls.leeway.checked : selectedMetrics.leeway,
+    trace: metricsEls.trace ? !!metricsEls.trace.checked : selectedMetrics.trace,
+    N: metricsEls.N ? !!metricsEls.N.checked : selectedMetrics.N,
+  };
+  try {
+    localStorage.setItem(LS_KEYS.metrics, JSON.stringify(selectedMetrics));
+  } catch {}
+  // Re-render with current data (trigger fetch or reuse last render by forcing a refresh)
+  fetchAndUpdateData();
+}
 
 
 // Attach functions to the window object to make them globally accessible
 window.handleSpeedUnitChange = handleSpeedUnitChange;
 window.handleAngleUnitChange = handleAngleUnitChange;
-window.handleTableStyleChange = handleTableStyleChange;
+window.handleColorModeChange = handleColorModeChange;
+window.handleMetricsChange = handleMetricsChange;
 window.toggleUpdates = toggleUpdates;
 
 
 // Initial fetch and start updates
+initSettingsFromStorage();
 startUpdates();

package/public/index.html

@@ -30,16 +30,31 @@
       </select>
     </div>
 
-    <!-- Table style Selection -->
+        <!-- Metrics Selection -->
+    <div class="menu-item" id="metrics-group">
+      <span>Show:</span>
+      <label><input type="checkbox" id="show-correction" onchange="handleMetricsChange()"> correction</label>
+      <label><input type="checkbox" id="show-factor" onchange="handleMetricsChange()"> factor</label>
+      <label><input type="checkbox" id="show-leeway" onchange="handleMetricsChange()"> leeway</label>
+      <label><input type="checkbox" id="show-trace" onchange="handleMetricsChange()"> trace</label>
+      <label><input type="checkbox" id="show-N" onchange="handleMetricsChange()"> N</label>
+    </div>
+
+    <!-- Color Mode Selection -->
     <div class="menu-item dropdown">
-      <label for="table-style">Table style:</label>
-      <select id="table-style" onchange="handleTableStyleChange(this.value)">
-        <option value="cartesian" selected>cartesian</option>
-        <option value="polar" >polar</option>
+      <label for="color-mode">Table coloring:</label>
+      <select id="color-mode" onchange="handleColorModeChange(this.value)">
+        <option value="none" selected>none</option>
+        <option value="weight">weight</option>
+        <option value="leeway">leeway</option>
+        <option value="factor">factor</option>
+        <option value="trace">trace</option>
       </select>
     </div>
 
 
+
+
     <!-- Pause Button -->
     <button id="toggle-updates" class="menu-item" onclick="toggleUpdates()">Pause</button>
 

package/public/main.css

@@ -28,6 +28,7 @@
   color: black;
 }
 
+
 /* --- Instance IDs for Specific Colors --- */
 #heading {
   color: var(--heading-color);
@@ -86,8 +87,7 @@ th, td {
   font-size: 11px;
 }
 .selectedCell {
-  color: #fff;
-  background-color: #1976d2;
+  color: rgb(17, 204, 0);
 }
 .emptyCell {
 }

package/CHANGELOG.md

@@ -1,28 +0,0 @@
-# Changelog
-
-All notable changes to this project will be documented in this file.
-
-The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
-
-## [1.0.1] - 2025-1-27
-### Added
-- basic functionality to estimate speed, leeway and current using Kalman filters
-- basic functionality for a webapp that shows what is going on
-
-## [1.1.0] - 2025-8-20
-### Changed
-- Path names for current. It now is self.environment.current.setTrue and self.environment.current.drift
-### Fixed
-- Case error in filename that prevented the webapp from displaying the correction table
-- Corrected speed through water is now calculated when the correction table is fixed
-
-## [1.3.0] - ntb
-### Changed
-- Simplified code
-- Less CPU usage
-### Added
-- Option to set the source for input paths
-- Smart heartbeat. Calculations will run right after an update of the path that has the lowest update frequency
-- Oversampling for quick update inputs to get better variance
-### Fixed
-- Angles are now reported in the appropriate range, 0 to 2 * PI or -PI to PI, depending on path

package/models.md

@@ -1,26 +0,0 @@
-## Correction model
-### raw
-\vec{correction} = \mathbb{R}(-heading) \cdot \vec{groundSpeed} - \vec{boatSpeed} - \mathbb{R}(-heading) \cdot \vec{waterSpeed}
-
-### link
-https://latex.codecogs.com/svg.image?\vec{correction}=\mathbb{R}(-heading)\cdot\vec{groundSpeed}-\vec{boatSpeed}-\mathbb{R}(-heading)\cdot\vec{waterSpeed}
-
-### html
-<img src="https://latex.codecogs.com/png.image?\dpi{110}\vec{correction}=\mathbb{R}(-heading)\cdot\vec{groundSpeed}-\vec{boatSpeed}-\mathbb{R}(-heading)\cdot\vec{waterSpeed}" title="\vec{correction}=\mathbb{R}(-heading)\cdot\vec{groundSpeed}-\vec{boatSpeed}-\mathbb{R}(-heading)\cdot\vec{waterSpeed}" />
-
-### image
-
-![correction model](correctionModel.png)
-
-## current model
-### raw
-\vec{waterSpeed} = \vec{groundSpeed} - \mathbb{R}(heading) \cdot(\vec{boatSpeed}+\vec{correction}) 
-### link
-https://latex.codecogs.com/svg.image?\vec{waterSpeed}=\vec{groundSpeed}-\mathbb{R}(heading)\cdot(\vec{boatSpeed}&plus;\vec{correction})
-### html
-<img src="https://latex.codecogs.com/svg.image?\vec{waterSpeed}=\vec{groundSpeed}-\mathbb{R}(heading)\cdot(\vec{boatSpeed}&plus;\vec{correction})" title="\vec{waterSpeed}=\vec{groundSpeed}-\mathbb{R}(heading)\cdot(\vec{boatSpeed}+\vec{correction})" />
-
-
-### image
-
-![correction model](currentModel.png)

package/public/surfaceplot.html

@@ -1,78 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Surface Plot</title>
-  <!-- Correct Plotly.js CDN -->
-  <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
-</head>
-
-<body>
-  <div id="surfacePlotX" style="width: 1024px; height: 800px;"></div>
-  <div id="surfacePlotY" style="width: 1024px; height: 800px;"></div>
-
-  <script>
-    // Data for the correction table
-    const x = [0, 5, 10, 15, 20]; // Speed axis
-    const y = [0, 10, 20, 30, 40]; // Heel axis
-
-    // Correction values for the X surface
-    const zX = [
-      [0, 1, 2, 3, 4],
-      [1, 2, 3, 4, 5],
-      [2, 3, 4, 5, 6],
-      [3, 4, 5, 6, 7],
-      [4, 5, 6, 7, 8],
-    ];
-
-    // Correction values for the Y surface
-    const zY = [
-      [0, -1, -2, -3, -4],
-      [-1, -2, -3, -4, -5],
-      [-2, -3, -4, -5, -6],
-      [-3, -4, -5, -6, -7],
-      [-4, -5, -6, -7, -8],
-    ];
-
-    // Surface plot for X correction
-    const dataX = {
-      x: x,
-      y: y,
-      z: zX,
-      type: 'surface',
-      colorscale: 'Viridis',
-    };
-
-    // Surface plot for Y correction
-    const dataY = {
-      x: x,
-      y: y,
-      z: zY,
-      type: 'surface',
-      colorscale: 'Cividis',
-    };
-
-    // Render plots
-    Plotly.newPlot('surfacePlotX', [dataX], {
-      title: 'X Correction Surface',
-      scene: {
-        xaxis: { title: 'Speed' },
-        yaxis: { title: 'Heel' },
-        zaxis: { title: 'X Correction' },
-      },
-    });
-
-    Plotly.newPlot('surfacePlotY', [dataY], {
-      title: 'Y Correction Surface',
-      scene: {
-        xaxis: { title: 'Speed' },
-        yaxis: { title: 'Heel' },
-        zaxis: { title: 'Y Correction' },
-      },
-    });
-  </script>
-</body>
-
-</html>