webpage chats

RotaxMonitor/data/index.html

@@ -13,11 +13,19 @@
             <img src="logo_astro_dev.svg" alt="Astro Tecnologie" class="logo">
         </div>
         <div>
-
             <h1>Rotax Ignition Box Monitor</h1>
         </div>
     </header>
 
+    <!-- TAB BUTTONS -->
+    <div class="tabs">
+        <button class="tab-button active" onclick="openTab('tab1')">Monitor</button>
+        <button class="tab-button" onclick="openTab('tab2')">Grafico</button>
+    </div>
+
+    <!-- TAB 1 (contenuto attuale) -->
+    <div id="tab1" class="tab-content active">
+
         <div id="loadingIndicator" class="loading-indicator">
             <span class="spinner"></span> Waiting for data...
         </div>
@@ -173,6 +181,16 @@
                 </table>
             </div>
         </div>
+    </div> <!-- END TAB1 -->
+
+    <!-- TAB 2 (grafico) -->
+    <div id="tab2" class="tab-content">
+        <canvas id="chart" height="100"></canvas>
+    </div>
+
+    <script src="chart.js"></script>
+    <script src="script.js"></script>
+</body>
 
 <div class="upload-section">
     <h3>Upload file to Flash</h3>

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();

RotaxMonitor/data/style.css

@@ -219,3 +219,32 @@ button:hover {
 span {
     color: var(--text-dark);
 }
+
+/* TABS */
+.tabs {
+    display: flex;
+    justify-content: center;
+    margin: 20px;
+}
+
+.tab-button {
+    padding: 10px 20px;
+    margin: 0 5px;
+    border: none;
+    cursor: pointer;
+    background: var(--border-color);
+    border-radius: 4px;
+}
+
+.tab-button.active {
+    background: var(--primary-blue);
+    color: white;
+}
+
+.tab-content {
+    display: none;
+}
+
+.tab-content.active {
+    display: block;
+}