speedandcurrent 1.0.0

package/public/TableRenderer.js

@@ -0,0 +1,186 @@
+class TableRenderer {
+  constructor() {
+    this.formatColumnHeader = this.defaultDisplay;
+    this.formatRowHeader = this.defaultDisplay;
+    this.formatCell = this.defaultDisplay;
+    this.formatCellX = this.defaultDisplay;
+    this.formatCellY = this.defaultDisplay;
+  }
+
+  setColumnHeaderFormat(columnHeader) {
+    columnHeader != null ? this.formatColumnHeader = columnHeader : this.formatColumnHeader = this.defaultDisplay;
+  }
+
+  setRowHeaderFormat(rowHeader) {
+    rowHeader != null ? this.formatRowHeader = rowHeader : this.formatRowHeader = this.defaultDisplay;
+  }
+
+  setCellFormat(cell) {
+    cell != null ? this.formatCell = cell : this.formatCell = this.defaultDisplay;
+  }
+
+  setCellFormatX(cellX) {
+    cellX != null ? this.formatCellX = cellX : this.formatCellX = this.defaultDisplay;
+  }
+
+  setCellFormatY(cellY) {
+    cellY != null ? this.formatCellY = cellY : this.formatCellY = this.defaultDisplay;
+  }
+
+  render(data) {
+    const { row, col, table, selected, id, label } = data;
+    this.data = data;
+
+    // Create a table element
+    const tableElement = document.createElement('table');
+    tableElement.id = id;
+    tableElement.classList.add('Table2D');
+    // create header row
+    tableElement.appendChild(this.headerRow(col, label));
+
+    // Create other rows 
+    var rIndex = 0;
+    for (let r = row.min; r <= row.max + 0.01; r += row.step) {
+      tableElement.appendChild(this.tableRow(r, rIndex, col, table, selected));
+      rIndex++;
+    }
+    return tableElement;
+  }
+
+  headerRow(col, label) {
+    // Create label cell
+    const headerRow = document.createElement('tr');
+    const firstHeaderCell = document.createElement('th');
+    firstHeaderCell.innerText = label ? label : ''; 
+    firstHeaderCell.classList.add('TableRowHeader');
+    headerRow.appendChild(firstHeaderCell);
+
+    // Create header row 
+    for (let c = col.min; c <= col.max + 0.01; c += col.step) {
+      const headerCell = document.createElement('th');
+      headerCell.innerHTML = this.formatColumnHeader(c);
+      headerCell.classList.add('TablecolumnHeader');
+      headerRow.appendChild(headerCell);
+    }
+    return headerRow;
+  }
+
+  rowLabel(r) {
+    const headerCell = document.createElement('th');
+    headerCell.innerHTML = this.formatRowHeader(r);
+    //headerCell.innerText = `${cSpeed(r)} `;
+    headerCell.classList.add('TableRowHeader');
+    return headerCell;
+  }
+
+  tableRow(r, rIndex, col, table, selected) {
+    var cIndex = 0;
+    const rowElement = document.createElement('tr');
+    rowElement.appendChild(this.rowLabel(r));
+    for (let c = col.min; c <= col.max + 0.01; c += col.step) {
+      const cell = document.createElement('td');
+      cell.classList.add('TableCell');
+      const value = table[rIndex][cIndex];
+      const text = this.formatCell(value, r, c);
+      if (text != null) {
+         cell.innerHTML = text;
+      }
+      else {
+      cell.classList.add('emptyCell');
+      }
+      if (selected[0] == rIndex && selected[1] == cIndex) cell.classList.add('selectedCell');
+
+      rowElement.appendChild(cell);
+      cIndex++;
+    }
+    return rowElement;
+  }
+
+  defaultDisplay(value) {
+    return value.toFixed(2);
+  }
+
+  createSurfacePlot() {
+    const { row, col, table, id } = this.data;
+
+    // Format the axes values
+    const x = [];
+    for (let c = col.min; c <= col.max + 0.01; c += col.step) {
+      x.push(this.formatColumnHeader(c));
+    }
+
+    const y = [];
+    for (let r = row.min; r <= row.max + 0.01; r += row.step) {
+      y.push(this.formatRowHeader(r));
+    }
+    
+
+    const zX = table.map(row => row.map(cell => cell.N > 0 ? cell.x : null)); // Assuming 'x' values for the surface plot
+    const zY = table.map(row => row.map(cell => cell.N > 0 ? cell.y : null)); // Assuming 'y' values for the surface plot
+
+    // Open a new window
+    const newWindow = window.open('', 'Correction Plot', 'width=1024,height=800');
+    newWindow.document.title = 'Correction Plot';
+
+    // Create div elements for the plots
+    const plotDivX = newWindow.document.createElement('div');
+    plotDivX.id = 'surfacePlotX';
+    plotDivX.style.width = '100%';
+    plotDivX.style.height = '400px';
+
+    const plotDivY = newWindow.document.createElement('div');
+    plotDivY.id = 'surfacePlotY';
+    plotDivY.style.width = '100%';
+    plotDivY.style.height = '400px';
+
+    newWindow.document.body.appendChild(plotDivX);
+    newWindow.document.body.appendChild(plotDivY);
+
+    // Data for the surface plots
+    const plotDataX = [{
+      type: 'surface',
+      x: x,
+      y: y,
+      z: zX
+    }];
+
+    const plotDataY = [{
+      type: 'surface',
+      x: x,
+      y: y,
+      z: zY
+    }];
+
+    // Layout for the surface plots
+    const layoutX = {
+      title: 'X-value',
+      autosize: true,
+      scene: {
+        xaxis: { title: 'Speed' },
+        yaxis: { title: 'Heel' },
+        zaxis: { title: 'Correction' }
+      }
+    };
+
+    const layoutY = {
+      title: 'Y-value',
+      autosize: true,
+      scene: {
+        xaxis: { title: 'Speed' },
+        yaxis: { title: 'Heel' },
+        zaxis: { title: 'Correction' }
+      }
+    };
+
+    const config = {
+      displayModeBar: false,
+      responsive: true // Ensure the plot is responsive
+    };
+
+    // Render the plots using Plotly
+    Plotly.newPlot(plotDivX, plotDataX, layoutX, config);
+    Plotly.newPlot(plotDivY, plotDataY, layoutY, config);
+  }
+}
+
+export default TableRenderer;

package/public/app.js

@@ -0,0 +1,278 @@
+const API_BASE_URL = "/plugins/speedandcurrent"; // Adjust based on your server configuration
+import TableRenderer from './tableRenderer.js';
+
+
+let updateInterval = 1000;
+let updateTimer;
+let updatesPaused = false;
+
+let vAngle = 1;
+let dAngle = 2;
+let vSpeed = 1;
+let dSpeed = 1;
+
+
+export function handleSpeedUnitChange(value) {
+  if (value == "knots") {
+    vSpeed = 1.943844;
+    dSpeed = 1;
+    return;
+  }
+  if (value == "kmh") {
+    vSpeed = 3.6;
+    dSpeed = 1;
+    return;
+  }
+  vSpeed = 1;
+  dSpeed = 1;
+}
+
+export function handleAngleUnitChange(value) {
+  if (value == "degrees") {
+    vAngle = 180 / Math.PI;
+    dAngle = 0;
+    return;
+  }
+  vAngle = 1;
+  dAngle = 2;
+}
+
+
+
+export function handleTableStyleChange(value) {
+  console.log(value);
+  if (value == "cartesian") {
+    tableRenderer.setCellFormat(cartesian);
+  }
+  else {
+    tableRenderer.setCellFormat(polar);
+  }
+}
+
+function cAngle(value) {
+  value *= vAngle;
+  return value.toFixed(dAngle);
+}
+
+function cSpeed(value) {
+  value *= vSpeed;
+  return value.toFixed(dSpeed);
+}
+
+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>
+          `;
+}
+
+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);
+}
+
+function formatCellYPolar(value, speed, heel) {
+  if (value.N == 0) return null;
+  return Math.abs(cAngle(Math.atan2(value.y, speed)));
+}
+
+
+
+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) {
+        document.getElementById("message").innerHTML = "Plugin is not running";
+      } else {
+        document.getElementById("message").innerHTML = "Failed to fetch data";
+      }
+    }
+    else {
+      document.getElementById("message").innerHTML = "";
+    }
+
+    const data = await response.json();
+    return data;
+  } catch (error) {
+    console.error("Failed to fetch data from server:", error);
+    document.getElementById("message").innerHTML = error;
+    return null;
+  }
+}
+
+
+
+function updateOptions(data) {
+  const optionsContent = document.getElementById('options-content');
+  optionsContent.innerHTML = ''; // Clear previous content
+
+  const table = document.createElement('table');
+  const headerRow = document.createElement('tr');
+  headerRow.innerHTML = '<th>Option Name</th><th>Value</th>';
+  table.appendChild(headerRow);
+
+  Object.entries(data.options).forEach(([key, value]) => {
+    const type = typeof value;
+    if (type === 'string' || type === 'number' || type === 'boolean') {
+
+      const row = document.createElement('tr');
+      row.innerHTML = `<td>${key}</td><td>${value}</td>`;
+      table.appendChild(row);
+    };
+  });
+
+  optionsContent.appendChild(table);
+}
+
+
+function updatePolar(data) {
+  const stepsList = document.getElementById('speeds-container');
+  stepsList.innerHTML = ''; // Clear previous steps
+
+  const table = document.createElement('table');
+  const headerRow = document.createElement('tr');
+  headerRow.innerHTML = '<th>Label</th><th>Speed</th><th>Angle</th>';
+  table.appendChild(headerRow);
+
+  data.polarSteps.forEach(step => {
+    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>`;
+    table.appendChild(row);
+  });
+
+  stepsList.appendChild(table);
+}
+
+function updateDelta(data) {
+  const stepsList = document.getElementById('delta-container');
+  stepsList.innerHTML = ''; // Clear previous steps
+
+  const table = document.createElement('table');
+  const headerRow = document.createElement('tr');
+  headerRow.innerHTML = '<th>Label</th><th>Delta</th>';
+  table.appendChild(headerRow);
+
+  data.deltas.forEach(step => {
+    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>`;
+    table.appendChild(row);
+  });
+
+  stepsList.appendChild(table);
+}
+
+function updateAttitude(data) {
+  const attitudeContainer = document.getElementById('attitude-container');
+  attitudeContainer.innerHTML = '';
+  const table = document.createElement('table');
+  const headerRow = document.createElement('tr');
+  headerRow.innerHTML = '<th>Label</th><th>roll</th><th>pitch</th>';
+  table.appendChild(headerRow);
+
+
+  data.attitudeSteps.forEach(step => {
+    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>`;
+    table.appendChild(row);
+  });
+  attitudeContainer.appendChild(table);
+}
+
+function updateTable(data) {
+  const tableContainer = document.getElementById('table-container');
+  tableContainer.innerHTML = '';
+  const tableElement = tableRenderer.render(data.tables[0]);
+  tableContainer.appendChild(tableElement);
+}
+
+
+
+
+async function fetchAndUpdateData() {
+  const data = await getFromServer('getResults'); // Updated endpoint
+  if (data) {
+    //console.log(data);
+    updateOptions(data);
+    updatePolar(data);
+    updateAttitude(data);
+    updateDelta(data);
+    updateTable(data);
+  }
+}
+
+function startUpdates() {
+  if (updateTimer) clearInterval(updateTimer);
+  updateTimer = setInterval(fetchAndUpdateData, updateInterval);
+}
+
+export function toggleUpdates() {
+  updatesPaused = !updatesPaused;
+  const toggleButton = document.getElementById('toggle-updates');
+
+  if (updatesPaused) {
+    clearInterval(updateTimer);
+    toggleButton.textContent = "Resume";
+  } else {
+    toggleButton.textContent = "Pause";
+    startUpdates();
+  }
+}
+
+
+
+
+
+//document.getElementById('toggle-updates').addEventListener('click', toggleUpdates);
+
+handleSpeedUnitChange("knots");
+handleAngleUnitChange("degrees");
+
+const tableRenderer = new TableRenderer();
+handleTableStyleChange("cartesian");
+tableRenderer.setColumnHeaderFormat(cAngle);
+tableRenderer.setRowHeaderFormat(cSpeed);
+
+
+// Attach functions to the window object to make them globally accessible
+window.handleSpeedUnitChange = handleSpeedUnitChange;
+window.handleAngleUnitChange = handleAngleUnitChange;
+window.handleTableStyleChange = handleTableStyleChange;
+window.toggleUpdates = toggleUpdates;
+
+
+// Initial fetch and start updates
+startUpdates();

package/public/index.html

@@ -0,0 +1,107 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <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">
+</head>
+
+<body>
+
+  <header class="menu-bar">
+    <!-- Speed Unit Selection -->
+    <div class="menu-item dropdown">
+      <label for="speed-unit">Speed:</label>
+      <select id="speed-unit" onchange="handleSpeedUnitChange(this.value)">
+        <option value="ms">m/s</option>
+        <option value="knots" selected>knots</option>
+        <option value="kmh">km/h</option>
+      </select>
+    </div>
+
+    <!-- Angle Unit Selection -->
+    <div class="menu-item dropdown">
+      <label for="angle-unit">Angle:</label>
+      <select id="angle-unit" onchange="handleAngleUnitChange(this.value)">
+        <option value="radians">radians</option>
+        <option value="degrees" selected>degrees</option>
+      </select>
+    </div>
+
+    <!-- Table style 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>
+      </select>
+    </div>
+
+
+    <!-- Pause Button -->
+    <button id="toggle-updates" class="menu-item" onclick="toggleUpdates()">Pause</button>
+
+    <!-- messages -->
+
+    <div id="message">
+    </div>
+
+  </header>
+
+  <!-- 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>
+
+
+    <section class="delta-section">
+      <h2>Deltas</h2>
+      <div id="delta-container">
+        <!-- Speeds table will be populated here -->
+      </div>
+    </section>
+
+    <section class="speeds-section">
+      <h2>Vectors</h2>
+      <div id="speeds-container">
+        <!-- Speeds table will be populated here -->
+      </div>
+    </section>
+
+    <section class="attitude-section">
+      <h2>Attitude</h2>
+      <div id="attitude-container">
+        <!-- attitude table will be populated here -->
+      </div>
+    </section>
+
+
+    <section class="table-section">
+      <h2>Correction table</h2>
+      <div id="table-container">
+        <!-- Steps table will be populated here -->
+      </div>
+      
+    </section>
+
+    <section class="options-section">
+      <h2>Plugin options</h2>
+      <div id="options-content">
+        <!-- Options table will be populated here -->
+      </div>
+    </section>
+  </main>
+
+
+
+
+
+
+  <script type="module" src="app.js"></script>
+</body>
+
+</html>