speedandcurrent 1.1.0 → 1.3.0

package/public/app.js

@@ -40,7 +40,7 @@ export function handleAngleUnitChange(value) {
 
 
 export function handleTableStyleChange(value) {
-  console.log(value);
+  //console.log(value);
   if (value == "cartesian") {
     tableRenderer.setCellFormat(cartesian);
   }
@@ -112,7 +112,7 @@ async function getFromServer(endpoint) {
       if (response.status === 503) {
         document.getElementById("message").innerHTML = "Plugin is not running";
       } else {
-        document.getElementById("message").innerHTML = "Failed to fetch data";
+        document.getElementById("message").innerHTML = "Failed to fetch data. Error: " + response.status + " " + response.statusText;
       }
     }
     else {
@@ -158,15 +158,17 @@ function updatePolar(data) {
   stepsList.innerHTML = ''; // Clear previous steps
 
   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>';
   table.appendChild(headerRow);
 
-  data.polarSteps.forEach(step => {
+  data.polars.forEach(polar => {
     const row = document.createElement('tr');
-    if (step.id != undefined)
-      row.classList.add(step.id);
-    row.innerHTML = `<td>${step.label}</td><td>${cSpeed(step.speed)}</td><td>${cAngle(step.angle)}</td>`;
+    if (polar.id) {
+      row.id = polar.id;
+    }
+    row.innerHTML = `<td>${polar.displayAttributes.label}</td><td>${cSpeed(polar.magnitude)}</td><td>${cAngle(polar.angle)}</td>`;
     table.appendChild(row);
   });
 
@@ -178,15 +180,17 @@ function updateDelta(data) {
   stepsList.innerHTML = ''; // Clear previous steps
 
   const table = document.createElement('table');
+  table.classList.add('delta');
   const headerRow = document.createElement('tr');
-  headerRow.innerHTML = '<th>Label</th><th>Delta</th>';
+  headerRow.innerHTML = '<th>Label</th><th>Value</th>';
   table.appendChild(headerRow);
 
-  data.deltas.forEach(step => {
+  data.deltas.forEach(delta => {
     const row = document.createElement('tr');
-    if (step.id != undefined)
-      row.classList.add(step.id);
-    row.innerHTML = `<td>${step.label}</td><td>${cAngle(step.value)}</td>`;
+    if (delta.id) {
+      row.id = delta.id;
+    }
+    row.innerHTML = `<td>${delta.displayAttributes.label}</td><td>${cAngle(delta.value)}</td>`;
     table.appendChild(row);
   });
 
@@ -197,16 +201,19 @@ function updateAttitude(data) {
   const attitudeContainer = document.getElementById('attitude-container');
   attitudeContainer.innerHTML = '';
   const table = document.createElement('table');
+  table.classList.add('attitude');
+
   const headerRow = document.createElement('tr');
-  headerRow.innerHTML = '<th>Label</th><th>roll</th><th>pitch</th>';
+  headerRow.innerHTML = '<th>Label</th><th>roll</th><th>pitch</th><th>yaw</th>';
   table.appendChild(headerRow);
 
 
-  data.attitudeSteps.forEach(step => {
+  data.attitudes.forEach(attitude => {
     const row = document.createElement('tr');
-    if (step.id != undefined)
-      row.classList.add(step.id);
-    row.innerHTML = `<td>${step.label}</td><td>${cAngle(step.roll)}</td><td>${cAngle(step.pitch)}</td>`;
+    if (attitude.id) {
+      row.id = attitude.id;
+    }
+    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);
   });
   attitudeContainer.appendChild(table);
@@ -215,8 +222,11 @@ function updateAttitude(data) {
 function updateTable(data) {
   const tableContainer = document.getElementById('table-container');
   tableContainer.innerHTML = '';
-  const tableElement = tableRenderer.render(data.tables[0]);
-  tableContainer.appendChild(tableElement);
+    data.tables.forEach(table => {
+
+    const tableElement = tableRenderer.render(table);
+    tableContainer.appendChild(tableElement);
+  });
 }
 
 
@@ -226,7 +236,7 @@ async function fetchAndUpdateData() {
   const data = await getFromServer('getResults'); // Updated endpoint
   if (data) {
     //console.log(data);
-    updateOptions(data);
+    //updateOptions(data);
     updatePolar(data);
     updateAttitude(data);
     updateDelta(data);

package/public/index.html

@@ -5,7 +5,7 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Speed and current</title>
-  <link rel="stylesheet" href="style.css">
+  <link rel="stylesheet" href="main.css">
 </head>
 
 <body>
@@ -53,26 +53,38 @@
   <!-- Content below the fixed menu -->
   <main class="content">
 
-    <section class="svg-section">
-      <object data="vectors.html" width="100%" height="500px" type="text/html"></object>
+    <section class="graph">
+      <svg height="300px" width="300px" 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>
     </section>
 
 
-    <section class="delta-section">
+    <section class=" data ">
       <h2>Deltas</h2>
       <div id="delta-container">
         <!-- Speeds table will be populated here -->
       </div>
     </section>
 
-    <section class="speeds-section">
+    <section class="data ">
       <h2>Vectors</h2>
       <div id="speeds-container">
-        <!-- Speeds table will be populated here -->
+        <!-- Vectors table will be populated here -->
       </div>
     </section>
 
-    <section class="attitude-section">
+    <section class="data ">
       <h2>Attitude</h2>
       <div id="attitude-container">
         <!-- attitude table will be populated here -->
@@ -80,7 +92,7 @@
     </section>
 
 
-    <section class="table-section">
+    <section class="data ">
       <h2>Correction table</h2>
       <div id="table-container">
         <!-- Steps table will be populated here -->
@@ -88,12 +100,7 @@
       
     </section>
 
-    <section class="options-section">
-      <h2>Plugin options</h2>
-      <div id="options-content">
-        <!-- Options table will be populated here -->
-      </div>
-    </section>
+
   </main>
 
 
@@ -102,6 +109,7 @@
 
 
   <script type="module" src="app.js"></script>
+  <script type="module" src="vectors.js"></script>
 </body>
 
 </html>

package/public/main.css

@@ -0,0 +1,177 @@
+/* --- CSS Variables for Colors --- */
+:root {
+  /* Data type colors */
+  --polar-color: #0d47a1;           /* darker blue */
+  --delta-color: #1b5e20;           /* darker green */
+  --attitude-color: #b28704;        /* darker yellow/gold */
+  --table2d-color: #4e342e;         /* darker brown */
+
+  /* Instance colors */
+  --heading-color: #000000;         /* black */
+  --attitude-color-instance: #000000; /* black */
+  --current-color: #0d47a1;         /* darker blue */
+  --currentDamped-color: #0d47a1;   /* darker blue */
+  --boatSpeed-color: #388e3c;       /* darker green */
+  --boatSpeedDamped-color: #388e3c; /* darker green */
+  --correctedBoatSpeed-color: #27632a; /* even darker green */
+  --boatSpeedRefGround-color: #00575b; /* darker teal */
+  --groundSpeed-color: #5d4037;     /* darker brown */
+  --groundSpeedDamped-color: #5d4037; /* darker brown */
+  --speedCorrection-color: #ad1457; /* darker pink/red */
+  --residual-color: #6a1b9a;        /* darker purple */
+  --correctionTable-color: #4e342e; /* darker brown */
+}
+
+/* --- Data Type Classes --- */
+
+.data {
+  color: black;
+}
+
+/* --- Instance IDs for Specific Colors --- */
+#heading {
+  color: var(--heading-color);
+  stroke: var(--heading-color);
+}
+#attitude {
+  color: var(--attitude-color-instance);
+  stroke: var(--attitude-color-instance);
+}
+#current, #currentDamped {
+  color: var(--current-color);
+  stroke: var(--current-color);
+}
+#boatSpeed, #boatSpeedDamped {
+  color: var(--boatSpeed-color);
+  stroke: var(--boatSpeed-color);
+}
+#correctedBoatSpeed {
+  color: var(--correctedBoatSpeed-color);
+  stroke: var(--correctedBoatSpeed-color);
+}
+#boatSpeedRefGround {
+  color: var(--boatSpeedRefGround-color);
+  stroke: var(--boatSpeedRefGround-color);
+}
+#groundSpeed, #groundSpeedDamped {
+  color: var(--groundSpeed-color);
+  stroke: var(--groundSpeed-color);
+}
+#speedCorrection {
+  color: var(--speedCorrection-color);
+  stroke: var(--speedCorrection-color);
+}
+#residual {
+  color: var(--residual-color);
+  stroke: var(--residual-color);
+}
+#correctionTable {
+  color: var(--correctionTable-color);
+  stroke: var(--correctionTable-color);
+}
+
+/* --- Table and Cell Styling --- */
+table {
+  border-collapse: collapse;
+}
+th, td {
+  border: 1px solid black;
+  padding: 5px;
+}
+.TableCell {
+  width: 60px;
+  height: 60px;
+  text-align: center;
+  vertical-align: middle;
+  font-size: 11px;
+}
+.selectedCell {
+  color: #fff;
+  background-color: #1976d2;
+}
+.emptyCell {
+}
+
+/* --- SVG Styling --- */
+svg {
+  border: 1px solid #ccc;
+  height: auto;
+  aspect-ratio: 1 / 1;
+  svg {
+  width: 100vmin;
+  height: 100vmin;
+    }
+}
+line {
+  stroke-width: 2;
+}
+#hull, #mast {
+  stroke: purple;
+  stroke-width: 1;
+  stroke-linecap: round;
+}
+
+/* --- Menu and Layout --- */
+body {
+  font-family: Arial, sans-serif;
+  display: flex;
+  flex-direction: column;
+  margin: 15px 15px 15px 15px;
+}
+.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-item {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  cursor: pointer;
+}
+.menu-item label {
+  font-size: 14px;
+  color: black;
+}
+.menu-item select {
+  background: transparent;
+  border: 1px solid #888;
+  color: black;
+  font-size: 14px;
+  appearance: none;
+  padding-right: 15px;
+  cursor: pointer;
+}
+.menu-item select::-ms-expand {
+  display: none;
+}
+#toggle-updates {
+  background: transparent;
+  border: 1px solid #888;
+  padding: 5px 15px;
+  border-radius: 4px;
+  cursor: pointer;
+}
+#toggle-updates:hover {
+  background: #555;
+}
+.content {
+  margin-top: 60px;
+}
+.surfacePlot {
+  width: 100%;
+  height: 100%;
+  border: 1px solid black;
+  padding: 0;
+  margin: 0;
+  position: relative;
+}

package/public/vectors.html

@@ -4,7 +4,7 @@
     <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">
+    <link rel="stylesheet" href="main.css">
   </head>
 
 <body>

package/public/vectors.js

@@ -12,34 +12,17 @@ function getHeading(data) {
   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);
+    largest = Math.max(largest, Math.abs(polar.x));
+    largest = Math.max(largest, Math.abs(polar.y));
   });
   return largest;
 }
 
-function drawBoat(canvas, data, heading, offset, att) {
+function drawBoat(canvas,  heading) {
 
 
   const hull = document.createElementNS("http://www.w3.org/2000/svg", "path");
@@ -69,13 +52,14 @@ function drawBoat(canvas, data, heading, offset, att) {
 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("x1", 0 );
+    vector.setAttribute("y1", 0 );
+    vector.setAttribute("x2", polar.x * scale );
+    vector.setAttribute("y2", polar.y * scale );
     vector.setAttribute("id", polar.id);
-    s = scale * 5 / 1.94384 - 1;
-    if (s>50) {
+    let dash;
+    let 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 `;
     }
@@ -84,7 +68,7 @@ function drawVectors(canvas, data, heading, scale) {
     }
     vector.setAttribute("stroke-dasharray", dash);
     vector.setAttribute("stroke-dashoffset", `1`);
-    if (polar.plane == "ref_ground")
+    if (polar.displayAttributes.plane == "Ground")
       vector.setAttribute("transform", `rotate(${-90})`);
     else
       vector.setAttribute("transform", `rotate(${heading - 90})`);
@@ -99,29 +83,31 @@ async function fetchVectorData() {
     const canvas = document.getElementById("canvas");
     canvas.innerHTML = "";
 
-    heading = getHeading(data);
-    largest = getLargest(data);
-    att = getAtt(data);
-    offset = getOffset(att, 15);
+    const heading = getHeading(data);
+    const largest = getLargest(data);
+    let time, deltaT;
+
     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);
+      deltaT = (time - lastTime)/1000;
+      if (largest != previous)  {
+        if (largest > previous) {
+          previous *= (1.005 );
+        }
+        else {
+          previous *= (0.9995 );
+        }
+      }
     }
 
-    scale = 100 / previous;
+    const scale = 95 / previous;
 
-    drawBoat(canvas, data, heading, offset, att);
-    drawVectors(canvas, data, heading, scale, offset);
+    drawBoat(canvas, heading);
+    drawVectors(canvas, data, heading, scale);
   }
 
   async function getFromServer(endpoint) {
@@ -140,9 +126,7 @@ async function fetchVectorData() {
           throw new Error(`Error fetching data: ${response.statusText}`);
         }
       }
-      else {
-        document.getElementById("message").innerHTML = "";
-      }
+      
 
       const data = await response.json();
       return data;
@@ -154,12 +138,8 @@ async function fetchVectorData() {
 }
 
 function handleError(error) {
-  document.getElementById("message").innerHTML = `
-      <div>
-        <p>${error}</p>
-      </div>
-    `;
+  console.log('Error:', error.message);
 }
 
 
-setInterval(fetchVectorData, 200); 
+setInterval(fetchVectorData, 1000);

package/public/style.css

@@ -1,184 +0,0 @@
-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 */
-}