signalk-polar-performance-plugin 0.0.56 → 0.0.58

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "signalk-polar-performance-plugin",
-  "version": "0.0.56",
+  "version": "0.0.58",
   "description": "A plugin that calculates performance information based on a (CSV) polar diagram.",
   "main": "plugin/index.js",
   "scripts": {

package/plugin/index.js

@@ -243,89 +243,132 @@ module.exports = function (app) {
       }
 
       if (BSP) {
-        addValue('performance.boatSpeedDamped', BSP, { units: 'm/s' })
+        addValue('performance.boatSpeedDamped', BSP, { 
+          units: 'm/s',
+          description: 'Boat speed after applying damping factor (see Polar Performance Plugin settings).'
+       })
       }
 
       if (TWA) {
         addValue('environment.wind.angleTrueWaterDamped', TWA * port, {
-          units: 'rad'
+          units: 'rad',
+          description: 'True Wind Angle after applying damping factor, negative to port (see Polar Performance Plugin settings).'
         })
       }
 
       if (typeof perfObj.beatAngle !== 'undefined') {
         if (options.beatAngle === true) {
-          addValue('performance.beatAngle', perfObj.beatAngle * port)
+          addValue('performance.beatAngle', perfObj.beatAngle * port, {
+            units: 'rad',
+            description: 'The optimal beat/upwind angle for current TWS, negative to port.'
+          })
         }
         if (options.targetTWA === true) {
-          addValue('performance.targetAngle', perfObj.beatAngle * port)
+          addValue('performance.targetAngle', perfObj.beatAngle * port, {
+            units: 'rad',
+            description: 'The combined and automatic switching optimal beat or run angle for current TWS, negative to port.'
+          })
         }
       }
 
-      if (typeof perfObj.beatVMG !== 'undefined') {
-        addValue('performance.beatAngleVelocityMadeGood', perfObj.beatVMG)
+      if (typeof perfObj.runAngle !== 'undefined') {
+        if (options.beatAngle === true) {
+          addValue('performance.gybeAngle', perfObj.runAngle * port, {
+            units: 'rad',
+            description: 'The optimal run/downwind angle for current TWS, negative to port.'
+          })
+        }
         if (options.targetTWA === true) {
-          addValue('performance.targetVelocityMadeGood', perfObj.beatVMG, {
-            units: 'm/s'
+          addValue('performance.targetAngle', perfObj.runAngle * port, {
+            units: 'rad',
+            description: 'The combined and automatic switching optimal beat or run angle for current TWS, negative to port.'
           })
         }
       }
 
-      if (typeof perfObj.runAngle !== 'undefined') {
-        if (options.beatAngle === true) {
-          addValue('performance.gybeAngle', perfObj.runAngle * port)
-        }
+      if (typeof perfObj.beatVMG !== 'undefined') {
+        addValue('performance.beatAngleVelocityMadeGood', perfObj.beatVMG, {
+          units: 'm/s',
+          description: 'The beat/upwind Velocity Made Good for current boat speed and heading.'
+        })
         if (options.targetTWA === true) {
-          addValue('performance.targetAngle', perfObj.runAngle * port)
+          addValue('performance.targetVelocityMadeGood', perfObj.beatVMG, {
+            units: 'm/s',
+            description: 'The combined and automatic switching beat or run Velocity Made Good for current boat speed and heading.'
+          })
         }
       }
 
       if (typeof perfObj.runVMG !== 'undefined') {
-        addValue('performance.gybeAngleVelocityMadeGood', perfObj.runVMG)
+        addValue('performance.gybeAngleVelocityMadeGood', perfObj.runVMG, {
+          units: 'm/s',
+          description: 'The run/downwind Velocity Made Good for current boat speed and heading.'
+        })
         if (options.targetTWA === true) {
           addValue('performance.targetVelocityMadeGood', perfObj.runVMG, {
-            units: 'rad'
+            units: 'm/s',
+            description: 'The combined and automatic switching beat or run Velocity Made Good for current TWS and TWA.'
           })
         }
       }
 
       if (typeof perfObj.optimumWindAngle !== 'undefined') {
         addValue('performance.optimumWindAngle', perfObj.optimumWindAngle, {
-          units: 'rad'
+          units: 'rad',
+          description: 'The optimum wind angle, negative to port (diff between TWA and environment.wind.directionTrue).'
         })
       }
 
       if (typeof perfObj.targetSpeed !== 'undefined') {
-        addValue('performance.targetSpeed', perfObj.targetSpeed)
+        addValue('performance.targetSpeed', perfObj.targetSpeed, { 
+            units: 'm/s',
+            description: 'Target boat speed based on current TWA.'
+           }
+        )
       }
 
       if (typeof perfObj.polarSpeed !== 'undefined') {
-        addValue('performance.polarSpeed', perfObj.polarSpeed)
-        addValue('performance.polarSpeedRatio', perfObj.polarSpeedRatio)
+        addValue('performance.polarSpeed', perfObj.polarSpeed, { 
+          units: 'm/s',
+          description: 'The polar chart boat speed as per the polar chart for current TWS and TWA.'
+        })
+        addValue('performance.polarSpeedRatio', perfObj.polarSpeedRatio, {
+          units: 'ratio',
+          description: 'The ratio between actual boat speed and polar chart boat speed for current TWS and TWA.'
+        })
         if (typeof perfObj.velocityMadeGood !== 'undefined') {
-          addValue('performance.velocityMadeGood', perfObj.velocityMadeGood)
-          addValue(
-            'performance.polarVelocityMadeGood',
-            perfObj.polarVelocityMadeGood,
-            { units: 'm/s' }
-          )
-          addValue(
-            'performance.polarVelocityMadeGoodRatio',
-            perfObj.polarVelocityMadeGoodRatio,
-            { units: 'ratio' }
-          )
+          addValue('performance.velocityMadeGood', perfObj.velocityMadeGood, {
+            units: 'm/s',
+            description: 'The actual Velocity Made Good based on current heading and boat speed.'
+          })
+          addValue('performance.polarVelocityMadeGood', perfObj.polarVelocityMadeGood, {
+            units: 'm/s',
+            description: 'The polar chart Velocity Made Good indicated in the polar for current TWS and TWA.'
+          })
+          addValue('performance.polarVelocityMadeGoodRatio', perfObj.polarVelocityMadeGoodRatio, {
+            units: 'ratio',
+            description: 'The ratio between actual Velocity Made Good and polar chart indicated Velocity Made Good for current TWS and TWA.'
+          })
         }
       }
 
       if (typeof perfObj.maxSpeed !== 'undefined') {
-        addValue('performance.maxSpeed', perfObj.maxSpeed, { units: 'm/s' })
+        addValue('performance.maxSpeed', perfObj.maxSpeed, { 
+          units: 'm/s',
+          description: 'Maximum boat speed as per polar chart.'
+        })
         addValue('performance.maxSpeedAngle', perfObj.maxSpeedAngle, {
-          units: 'rad'
+          units: 'rad',
+          description: 'The angle to achieve maximum boat speed (not the VMG), based on current TWS, negative to port.'
         })
       }
 
       if (options.tackTrue === true) {
         if (typeof perfObj.tackTrue !== 'undefined') {
-          addValue('performance.tackTrue', perfObj.tackTrue)
+          addValue('performance.tackTrue', perfObj.tackTrue, {
+            units: 'rad',
+            description: 'The Opposite Tack\'s heading relative to True North, based on current TWS.'
+          })
         }
       }
 

package/public/index.html

@@ -1,51 +1,179 @@
 <!DOCTYPE html>
 <html>
-<script type='text/javascript' src="./Chart.min.js"></script>
-<script type='text/javascript' src='/jquery/dist/jquery.min.js'></script>
-<title>Polar performance</title>
-<body style="background-color:#020202;">
+<head>
+    <script type='text/javascript' src="./Chart.min.js"></script>
+    <script type='text/javascript' src="./jquery-3.7.1-min.js"></script>
+    <title>Polar performance</title>
+    <style>
+        body { background-color: #020202; margin: 0; padding: 0; color: white; font-family: Arial, sans-serif; }
+        
+        .chart-container { 
+            width: 100%; 
+            max-width: 1200px; 
+            margin: 0 auto; /* Center the whole thing */
+        }
+        
+        /* New Toolbar Styling - sits below the chart */
+        .config-toolbar {
+            display: flex;
+            justify-content: flex-end; /* Aligns content to the right */
+            align-items: center;
+            padding: 10px 20px;
+            background-color: #0a0a0a; /* Slightly lighter than background */
+            border-top: 1px solid #222;
+        }
+        
+        .config-toolbar label { font-size: 14px; color: #ccc; margin-right: 8px; }
+        
+        .config-toolbar input {
+            width: 50px;
+            background: rgba(0, 0, 0, 0.5);
+            border: 1px solid #555;
+            color: white;
+            text-align: center;
+            border-radius: 2px;
+            padding: 4px;
+            font-size: 14px;
+        }
+    </style>
+</head>
+<body>
 
-<canvas id="myChart" style="width:100%;max-width:1200px"></canvas>
+<div class="chart-container">
+    <canvas id="myChart"></canvas>
+    
+    <!-- Configuration Toolbar (Now below the chart) -->
+    <div class="config-toolbar">
+        <label for="labelPos">Place polar wind speed label at TWA:</label>
+        <input type="number" id="labelPos" value="135" min="0" max="180" onchange="updateLabelPos(this.value)">
+    </div>
+</div>
 
 <script>
 
-var polarSpeed, boatSpeed, TWA
+var polarSpeed, boatSpeed, TWA, TWS
 var myChart, chartData
 
+// GLOBAL CONFIG: Load from storage or default to 135
+window.labelTWA = localStorage.getItem('polarLabelTWA') || 135;
+document.getElementById('labelPos').value = window.labelTWA;
+
+function updateLabelPos(val) {
+    window.labelTWA = val;
+    localStorage.setItem('polarLabelTWA', val);
+    if (myChart) myChart.update();
+}
+
+// --- CUSTOM PLUGIN: DRAW LABELS ---
+Chart.plugins.register({
+  afterDraw: function(chartInstance) {
+    try {
+      var ctx = chartInstance.chart.ctx;
+      var targetAngle = parseFloat(window.labelTWA) || 135; 
+
+      // 1. DRAW LABELS
+      chartInstance.data.datasets.forEach(function(dataset, i) {
+        if (i < 2) return; 
+        
+        var meta = chartInstance.getDatasetMeta(i);
+        if (meta.hidden) return;
+
+        var p1 = null, p2 = null;
+        var p1Meta = null, p2Meta = null;
+
+        // Find interpolation bracket
+        for (var j = 0; j < dataset.data.length - 1; j++) {
+            if (dataset.data[j].x <= targetAngle && dataset.data[j+1].x >= targetAngle) {
+                p1 = dataset.data[j];
+                p2 = dataset.data[j+1];
+                p1Meta = meta.data[j]._model;
+                p2Meta = meta.data[j+1]._model;
+                break;
+            }
+        }
+
+        var x, y;
+        if (p1 && p2) {
+            var ratio = (p2.x - p1.x === 0) ? 0 : (targetAngle - p1.x) / (p2.x - p1.x);
+            x = p1Meta.x + (p2Meta.x - p1Meta.x) * ratio;
+            y = p1Meta.y + (p2Meta.y - p1Meta.y) * ratio;
+        } else {
+            // Fallback
+            var closest = null, minDiff = 100;
+            dataset.data.forEach(function(d, idx) {
+                var diff = Math.abs(d.x - targetAngle);
+                if (diff < minDiff) { minDiff = diff; closest = meta.data[idx]._model; }
+            });
+            if (closest) { x = closest.x; y = closest.y; }
+        }
+
+        // Draw only if on screen and reasonably close to request
+        if (x > 0 && y > 0) {
+            ctx.save();
+            ctx.font = "bold 14px Arial";
+            ctx.textAlign = "center";
+            ctx.textBaseline = "middle";
+            var labelText = String(dataset.label);
+            
+            // Box
+            var textWidth = ctx.measureText(labelText).width;
+            ctx.fillStyle = "rgba(2,2,2,0.9)"; 
+            ctx.fillRect(x - (textWidth/2) - 3, y - 9, textWidth + 6, 18);
+
+            // Text
+            ctx.fillStyle = dataset.borderColor || '#ffffff'; 
+            ctx.fillText(labelText, x, y);
+            ctx.restore();
+        }
+      });
+
+      // 2. REDRAW DOTS (Datasets 0 and 1)
+      [0, 1].forEach(function(i) {
+          var meta = chartInstance.getDatasetMeta(i);
+          if (!meta.hidden) {
+              meta.data.forEach(function(point) {
+                  point.draw();
+              });
+          }
+      });
+
+    } catch (err) {
+      console.log("Label draw error: " + err);
+    }
+  }
+});
+
 $.getJSON("/plugins/signalk-polar-performance-plugin/chartData", function(json) {
 
-  // Add actual values dots
+  // 1. Add actual values dots to the BEGINNING (Indices 0 and 1)
   json.datasets.unshift({
     label: 'Polar Speed',
     backgroundColor: 'rgba(0,255,0,0.7)',
     borderColor: 'rgba(0,255,0,0.2)',
     borderWidth: 1,
-    radius: 30,
-    type: 'bubble',
-    data: [
-      {
-        y: 0,
-        x: 0,
-        r: 10
-      }
-    ]
+    radius: 10, 
+    pointStyle: 'circle',
+    data: [{ y: 0, x: 0, r: 10 }]
   },
   {
     label: 'Boat Speed',
     backgroundColor: 'rgba(0,150,255,0.7)',
     borderColor: 'rgba(0,150,255,0.2)',
     borderWidth: 1,
-    radius: 30,
-    type: 'bubble',
-    data: [
-      {
-        y: 0,
-        x: 0,
-        r: 10
-      }
-    ]
+    radius: 10,
+    pointStyle: 'circle',
+    data: [{ y: 0, x: 0, r: 10 }]
   })
 
+  // 2. BACKUP ORIGINAL COLORS
+  for (var i = 2; i < json.datasets.length; i++) {
+      if (!json.datasets[i].borderColor) {
+          json.datasets[i].borderColor = 'rgba(100, 100, 100, 0.5)';
+      }
+      json.datasets[i]._originalColor = json.datasets[i].borderColor;
+      json.datasets[i].borderWidth = 1; 
+  }
+
   chartData = json
   showChart(chartData)
 })
@@ -65,25 +193,8 @@ function showChart (data) {
       },
       spanGaps: true,
       scales: {
-        x: {
-          type: 'linear',
-          ticks: {
-            color: 'white',
-            font: {
-              size: 14
-            }
-          }
-        },
-        y: {
-          type: 'linear',
-          ticks: {
-            color: 'white',
-            font: {
-              size: 14
-            }
-          }
-        },
         xAxes: [{
+          type: 'linear',
           scaleLabel: {
             display: true,
             labelString: 'True wind angle (TWA)',
@@ -101,6 +212,7 @@ function showChart (data) {
           }
         }],
         yAxes: [{
+          type: 'linear',
           scaleLabel: {
             display: true,
             labelString: 'Target boat speed (POL SPD)',
@@ -122,8 +234,6 @@ function showChart (data) {
         enabled: true,
         callbacks: {
           label: function (tooltipItems, data) {
-            console.log("tooltipItems: " + JSON.stringify(tooltipItems))
-            console.log("data: " + data)
             let label = tooltipItems.xLabel + "° " + tooltipItems.yLabel + " kts"
             return label
           }
@@ -148,74 +258,61 @@ function connect () {
   console.log("connect()")
   ws = new WebSocket((window.location.protocol === 'https:' ? 'wss' : 'ws') + "://" + window.location.host + "/signalk/v1/stream?subscribe=none");
   ws.onopen = function() {
-    
-    // Start listening for value updates
     startListeners();
-
     ws.onmessage = function(event) {
       if (event.data.includes('signalk-server')) {
-        welcomeMessage = event.data;
-        console.log("Skipping welcome message: " + welcomeMessage)
+        console.log("Skipping welcome message")
       } else {
         handleData(JSON.parse(event.data));
       }
     }
-
-    ws.onclose = function() {
-      console.log("WebSocket closed")
-      setTimeout(connect, 500)
-    }
-
-    ws.onerror = function(err) {
-      console.log("WebSocket connection error: " + err.message + " - closing connection");
-      setTimeout(connect, 500)
-    }
-    
+    ws.onclose = function() { setTimeout(connect, 500) }
+    ws.onerror = function(err) { setTimeout(connect, 500) }
   }
 }
 
 window.addEventListener('focus', function () {
   if (ws.readyState == 0) {
-    console.log("Restarting websocket")
     connect()
   }
 })
 
 function startListeners () {
-  var paths = [{'path': 'environment.wind.angleTrueWaterDamped'}, {'path': 'performance.polarSpeed'}, {'path': 'performance.boatSpeedDamped'}]
+  var paths = [
+    {'path': 'environment.wind.angleTrueWaterDamped'}, 
+    {'path': 'performance.polarSpeed'}, 
+    {'path': 'performance.boatSpeedDamped'},
+    {'path': 'environment.wind.speedTrue'} 
+  ]
 
   var subscriptionObject = {
     "context": "vessels.self",
     "policy" : "ideal",
-    "minPeriod": 2000,
+    "minPeriod": 1000, 
     "subscribe": paths
   }
 
-  var subscriptionMessage = JSON.stringify(subscriptionObject);
-  console.log("subscriptionMessage: " + subscriptionMessage);
-  ws.send(subscriptionMessage);
+  ws.send(JSON.stringify(subscriptionObject));
 }
 
 function handleData (data) {
-  if (typeof data.updates[0].meta != 'undefined') {
-    return
-  }
+  if (typeof data.updates[0].meta != 'undefined') return
+  
   var path = data.updates[0].values[0].path
   var value = data.updates[0].values[0].value
 
   if (path == 'performance.polarSpeed') {
     polarSpeed = roundDec(msToKts(value), 1)
-    // console.log('polarSpeed set to %s', polarSpeed)
     chartData.datasets[0].data[0].y = polarSpeed
   } else if (path == 'environment.wind.angleTrueWaterDamped') {
     TWA = roundDec(Math.abs(radToDeg(value)),1)
-    // console.log('TWA set to %s', TWA)
     chartData.datasets[0].data[0].x = TWA
     chartData.datasets[1].data[0].x = TWA
   } else if (path == 'performance.boatSpeedDamped') {
     boatSpeed = roundDec(msToKts(value),1)
-    // console.log('boatSpeed set to %s', boatSpeed)
     chartData.datasets[1].data[0].y = boatSpeed
+  } else if (path == 'environment.wind.speedTrue') {
+    TWS = msToKts(value);
   }
 }
 
@@ -225,7 +322,72 @@ connect()
 setInterval(updateChart, 300)
 
 function updateChart () {
-  myChart.update()
+  if (myChart) {
+    interpolateColors(TWS);
+    myChart.update();
+  }
+}
+
+// --- Interpolate Colors ---
+function interpolateColors(tws) {
+  if (!tws || !chartData) return;
+
+  for (var i = 2; i < chartData.datasets.length; i++) {
+    var dataset = chartData.datasets[i];
+    var lineSpeed = parseFloat(dataset.label); 
+    
+    if (isNaN(lineSpeed)) continue;
+
+    var originalColor = dataset._originalColor; 
+    
+    if (!originalColor) {
+        originalColor = "rgba(100,100,100,0.5)";
+        dataset._originalColor = originalColor;
+    }
+
+    var diff = Math.abs(tws - lineSpeed);
+    var influenceRange = 2.5; 
+    var weight = Math.max(0, 1 - (diff / influenceRange));
+
+    if (weight < 0.05) {
+        dataset.borderColor = originalColor;
+        dataset.borderWidth = 1;
+        dataset.pointBorderColor = originalColor; 
+        dataset.pointBackgroundColor = originalColor;
+    } else {
+        var blended = blendColors(originalColor, "#FFFFFF", weight);
+        dataset.borderColor = blended;
+        dataset.borderWidth = 1 + (3 * weight);
+        dataset.pointBorderColor = blended;
+        dataset.pointBackgroundColor = blended;
+    }
+  }
+}
+
+function blendColors(color1, color2, weight) {
+    var c1 = parseColor(color1); 
+    var c2 = parseColor(color2); 
+    var r = Math.round(c1[0] + (c2[0] - c1[0]) * weight);
+    var g = Math.round(c1[1] + (c2[1] - c1[1]) * weight);
+    var b = Math.round(c1[2] + (c2[2] - c1[2]) * weight);
+    return "rgb(" + r + "," + g + "," + b + ")";
+}
+
+function parseColor(input) {
+    if (!input) return [100,100,100]; 
+    if (input.substr(0,1) == "#") {
+        var col = input.slice(1);
+        if (col.length == 3) col = col[0]+col[0]+col[1]+col[1]+col[2]+col[2];
+        var int = parseInt(col, 16);
+        return [(int >> 16) & 255, (int >> 8) & 255, int & 255];
+    } 
+    else if (input.substr(0,3) == "rgb") {
+        var parts = input.match(/(\d+)/g);
+        if (parts && parts.length >= 3) {
+            return [parseInt(parts[0]), parseInt(parts[1]), parseInt(parts[2])];
+        }
+    }
+    return [100,100,100]; 
 }
 
 function radToDeg(radians) {
@@ -246,4 +408,5 @@ function roundDec (value, decimals) {
 }
 
 </script>
-
+</body>
+</html>