speedandcurrent 1.0.0

package/public/style.css

@@ -0,0 +1,184 @@
+body {
+  font-family: Arial, sans-serif;
+  display: flex;
+ 
+  position: relative;
+    display: flex;
+      flex-direction: column;
+      margin: 0;
+}
+
+section {
+  width: 100%;
+  padding: 10px;
+  box-sizing: border-box;
+}
+
+
+svg {
+  border: 1px solid #ccc;
+  width: 50%;
+  height: auto;
+  aspect-ratio: 1 / 1;
+}
+
+.label {
+  font-size: 12px;
+  text-anchor: middle;
+}
+
+table {
+  border-collapse: collapse;
+}
+
+/* .correctionTable {
+  
+} */
+
+th,
+td {
+  border: 1px solid black;
+  padding: 5px;
+}
+
+th {
+  background-color: #a2a2a2;
+}
+
+/* tr:nth-child(even) {
+  background-color: #f2f2f2;
+} */
+
+.TablecolumnHeader {
+  text-align: center;
+  background-color: #a2a2a2;
+}
+
+.TableRowHeader {
+  text-align: right;
+  background-color: #a2a2a2;
+}
+
+.TableCell {
+  width: 60px;
+    /* Adjust the size as needed */
+    height: 60px;
+    /* Same as width to make it square */
+    text-align: center;
+    vertical-align: middle;
+    font-size: 11px;
+    background-color:white;
+}
+
+.selectedCell {
+  background-color: #ff0000;
+  color: #fff;
+}
+
+.emptyCell {
+  background-color: #f2f2f2;
+}
+
+/* Fixed menu bar */
+.menu-bar {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  background: #6a6a6a;
+  color: black;
+  display: flex;
+  align-items: center;
+  padding: 10px 20px;
+  gap: 20px;
+  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2);
+  z-index: 1000;
+}
+
+/* Menu items */
+.menu-item {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  cursor: pointer;
+}
+
+/* Labels */
+.menu-item label {
+  font-size: 14px;
+  color: black;
+}
+
+/* Dropdowns styled as text with dropdown arrow */
+.menu-item select {
+  background: transparent;
+  border: none;
+  border: 1px solid #888;
+  color: black;
+  font-size: 14px;
+  appearance: none;
+  padding-right: 15px;
+  cursor: pointer;
+}
+
+/* Custom dropdown styling */
+.menu-item select::-ms-expand {
+  display: none;
+}
+
+
+/* Pause Button */
+ #toggle-updates {
+  background: transparent;
+  border: 1px solid #888;
+  padding: 5px 15px;
+  border-radius: 4px;
+  cursor: pointer;
+}
+
+ #toggle-updates:hover {
+  background: #555;
+}
+
+/* Push content below fixed menu */
+.content {
+  margin-top: 60px;
+  : 20px;
+}
+
+.boatSpeed {
+  background-color: lightseagreen;
+}
+
+.correction {
+  background-color: red;
+}
+
+.correctedSpeed {
+  background-color: seagreen;
+}
+
+.residual {
+  background-color: rgb(250, 140, 158);
+}
+
+.current {
+  background-color: rgb(52, 52, 255);
+}
+
+
+.groundSpeed {
+  background-color: brown;
+}
+
+.surfacePlot {
+  width: 100%;
+  
+  height: 100%;
+  border: 1px solid black;
+  /* Keep the border for recognition */
+  padding: 0;
+  margin: 0;
+  position: relative;
+  /* Ensure it can be positioned correctly */
+}

package/public/surfaceplot.html

@@ -0,0 +1,78 @@
+<!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>

package/public/vectors.css

@@ -0,0 +1,59 @@
+body {
+  font-family: Arial, sans-serif;
+  display: flex;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  margin: 0;
+}
+
+
+svg {
+  width: 100vmin;
+  height: 100vmin;
+}
+
+
+
+line {
+  stroke-width: 1;
+  stroke: green;
+}
+
+#hull {
+  stroke: purple;
+  stroke-width: 1;
+  stroke-linecap: round;
+}
+
+#mast {
+  stroke: purple;
+  stroke-width: 1;
+  stroke-linecap: round;
+}
+
+#boatSpeed {
+  stroke: lightseagreen;
+}
+
+#correction {
+  stroke: red;
+}
+
+
+#correctedSpeed {
+  stroke: seagreen;
+}
+
+#residual {
+  stroke: rgb(250, 140, 158);
+}
+
+#current {
+  stroke: rgb(52, 52, 255) ;
+}
+
+
+#groundSpeed {
+  stroke: brown;
+}

package/public/vectors.html

@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Wind vectors</title>
+    <link rel="stylesheet" href="vectors.css">
+  </head>
+
+<body>
+ <div id="message"></div>
+ 
+  <svg height="400" width="400" xmlns="http://www.w3.org/2000/svg" viewbox="-100 -100 200 200" id="canvas">
+
+    <!-- Draw the paths -->
+
+
+    <path id="hull" d="M -45 10  Q 15 25 30 0 Q 15 -25 -45 -10 z" stroke="black" fill="none" stroke-width="1"
+      transform="rotate(-90), scale(1, 1)" />
+
+    <line id="mast" x1="0" y1="0" x2="1" y2="8" stroke="brown" stroke-width="2" transform="rotate(-90)" />
+
+
+    Sorry, your browser does not support inline SVG.
+  </svg>
+
+</body>
+ <script src="vectors.js"></script>
+
+</html>

package/public/vectors.js

@@ -0,0 +1,165 @@
+const API_BASE_URL = "/plugins/speedandcurrent";
+let previous = 0;
+let lastTime = new Date();
+
+function getHeading(data) {
+  let heading = 0;
+  data.deltas.forEach(delta => {
+    if (delta.id == "heading") {
+      heading = delta.value * 180 / Math.PI;
+    }
+  });
+  return heading;
+}
+
+function getOffset(att, height) {
+  let offset = { x: 0, y: 0 };
+  offset.x = Math.sin(att.pitch) * height * 7.5;
+  offset.y = Math.sin(att.roll) * height * 7.5;
+  return offset;
+}
+
+function getAtt(data) {
+  let att = { pitch: 0, roll: 0 };
+  data.deltas.forEach(delta => {
+    if (delta.id == "attitude") {
+      att.pitch = (delta.value.pitch);
+      att.roll = (delta.value.roll);
+    }
+  });
+  return att;
+}
+
+function getLargest(data) {
+  let largest = 1;
+  data.polars.forEach(polar => {
+    if (polar.id != "sensorSpeed")
+      largest = Math.max(largest, polar.speed);
+  });
+  return largest;
+}
+
+function drawBoat(canvas, data, heading, offset, att) {
+
+
+  const hull = document.createElementNS("http://www.w3.org/2000/svg", "path");
+  hull.setAttribute("d", "M -45 8  Q 15 20 30 0 Q 15 -20 -45 -8 z");
+  hull.setAttribute("fill", "none");
+  hull.setAttribute("stroke", "black");
+  hull.setAttribute("stroke-width", "1");
+  //hull.setAttribute("transform", `scale(${1 - Math.abs(Math.sin(att.pitch))}, ${1 - Math.abs(Math.sin(att.roll))})`);
+  hull.setAttribute("id", "hull");
+
+  // const mast = document.createElementNS("http://www.w3.org/2000/svg", "line");
+  // mast.setAttribute("x1", 0);
+  // mast.setAttribute("y1", 0);
+  // mast.setAttribute("x2", offset.x);
+  // mast.setAttribute("y2", offset.y);
+  // mast.setAttribute("id", "mast");
+
+
+  const boat = document.createElementNS("http://www.w3.org/2000/svg", "g");
+  boat.setAttribute("transform", `rotate(${heading - 90})`);
+  boat.appendChild(hull);
+  // boat.appendChild(mast);
+  canvas.appendChild(boat);
+}
+
+
+function drawVectors(canvas, data, heading, scale) {
+  data.polars.forEach(polar => {
+    const vector = document.createElementNS("http://www.w3.org/2000/svg", "line");
+    vector.setAttribute("x1", 0 + (polar.plane == "ref_mast" ? offset.x : 0));
+    vector.setAttribute("y1", 0 + (polar.plane == "ref_mast" ? offset.y : 0));
+    vector.setAttribute("x2", polar.speed * Math.cos(polar.angle) * scale + (polar.plane == "ref_mast" ? offset.x : 0));
+    vector.setAttribute("y2", polar.speed * Math.sin(polar.angle) * scale + (polar.plane == "ref_mast" ? offset.y : 0));
+    vector.setAttribute("id", polar.id);
+    s = scale * 5 / 1.94384 - 1;
+    if (s>50) {
+      s = s / 5;
+      dash = `1 1 ${s - 1} 1 ${s} 1 ${s} 1 ${s} 1 ${s - 1} 1 `;
+    }
+    else {
+      dash = `1 1 ${s - 1} 1 ${s} 1 `;
+    }
+    vector.setAttribute("stroke-dasharray", dash);
+    vector.setAttribute("stroke-dashoffset", `1`);
+    if (polar.plane == "ref_ground")
+      vector.setAttribute("transform", `rotate(${-90})`);
+    else
+      vector.setAttribute("transform", `rotate(${heading - 90})`);
+    canvas.appendChild(vector);
+  });
+}
+
+
+async function fetchVectorData() {
+  const data = await getFromServer('getVectors');
+  if (data) {
+    const canvas = document.getElementById("canvas");
+    canvas.innerHTML = "";
+
+    heading = getHeading(data);
+    largest = getLargest(data);
+    att = getAtt(data);
+    offset = getOffset(att, 15);
+    if (previous == 0) {
+      previous = largest;
+      lastTime = new Date();
+    }
+    else {
+      time = new Date();
+      deltaT = (time - lastTime);
+      if (largest > previous)
+        tc = 1;
+      else
+        tc = 4;
+      const alpha = 1 - Math.exp(-deltaT / tc);
+      previous = previous + alpha * (largest - previous);
+    }
+
+    scale = 100 / previous;
+
+    drawBoat(canvas, data, heading, offset, att);
+    drawVectors(canvas, data, heading, scale, offset);
+  }
+
+  async function getFromServer(endpoint) {
+    try {
+      const response = await fetch(`${API_BASE_URL}/${endpoint}`, {
+        method: 'GET',
+        headers: {
+          'Content-Type': 'application/json'
+        }
+      });
+
+      if (!response.ok) {
+        if (response.status === 503) {
+          throw new Error("Plugin is not running");
+        } else {
+          throw new Error(`Error fetching data: ${response.statusText}`);
+        }
+      }
+      else {
+        document.getElementById("message").innerHTML = "";
+      }
+
+      const data = await response.json();
+      return data;
+    } catch (error) {
+      handleError(error);
+      return null;
+    }
+  }
+}
+
+function handleError(error) {
+  document.getElementById("message").innerHTML = `
+      <div>
+        <p>${error}</p>
+      </div>
+    `;
+}
+
+
+setInterval(fetchVectorData, 200);