webpage chats

RotaxMonitor/data/script.js

@@ -3,6 +3,19 @@ let lastMessageTimestamp = 0;
 const IDLE_THRESHOLD_MS = 1000;
 const loadingIndicator = document.getElementById("loadingIndicator");
 
+let chart;
+let chartData = {
+    labels: [],
+    datasets: [
+        { label: "BoxA RPM", data: [] },
+        { label: "BoxB RPM", data: [] },
+        { label: "Coils12A Delay", data: [] },
+        { label: "Coils34A Delay", data: [] },
+        { label: "Coils12B Delay", data: [] },
+        { label: "Coils34B Delay", data: [] }
+    ]
+};
+
 function setLoadingIndicator(visible) {
     if (!loadingIndicator) {
         return;
@@ -46,6 +59,8 @@ function connectWS() {
         lastMessageTimestamp = Date.now();
         setLoadingIndicator(false);
 
+        updateChart(data)
+
         // Update Box_A
         if (data.box_a) {
             const boxA = data.box_a;
@@ -118,6 +133,38 @@ function connectWS() {
     };
 }
 
+function updateChart(data) {
+    const time = new Date().toLocaleTimeString();
+
+    chartData.labels.push(time);
+
+    if (data.box_a) {
+        const boxA = data.box_a;
+        const coils12A = boxA.coils12 || {};
+        const coils34A = boxA.coils34 || {};
+        chartData.datasets[0].data.push(boxA.eng_rpm/10);
+        chartData.datasets[2].data.push(coils12A.spark_delay);
+        chartData.datasets[3].data.push(coils34A.spark_delay);
+    }
+
+    if (data.box_b) {
+        const boxB = data.box_b;
+        const coils12B = boxB.coils12 || {};
+        const coils34B = boxB.coils34 || {};
+        chartData.datasets[1].data.push(boxB.eng_rpm/10);
+        chartData.datasets[4].data.push(coils12B.spark_delay);
+        chartData.datasets[5].data.push(coils34B.spark_delay);
+    }
+
+    // limite punti (tipo buffer)
+    if (chartData.labels.length > 50) {
+        chartData.labels.shift();
+        chartData.datasets.forEach(d => d.data.shift());
+    }
+
+    chart.update();
+}
+
 function start() {
     fetch("/start");
 }
@@ -160,5 +207,44 @@ function uploadLittleFS() {
         });
 }
 
+function openTab(tabId) {
+    document.querySelectorAll('.tab-content').forEach(tab => {
+        tab.classList.remove('active');
+    });
+
+    document.querySelectorAll('.tab-button').forEach(btn => {
+        btn.classList.remove('active');
+    });
+
+    document.getElementById(tabId).classList.add('active');
+
+    event.target.classList.add('active');
+}
+
+function initChart() {
+    const ctx = document.getElementById('chart').getContext('2d');
+
+    chart = new Chart(ctx, {
+        type: 'line',
+        data: chartData,
+        options: {
+            animation: false,
+            responsive: true,
+            scales: {
+                x: {
+                    display: true
+                },
+                y: {
+                    beginAtZero: true
+                }
+            }
+        }
+    });
+}
+
+window.onload = () => {
+    initChart();
+};
+
 setInterval(updateLoadingState, 200);
 connectWS();