From 4f3fa1a6150a70142385c02b607ed971ca91de4a Mon Sep 17 00:00:00 2001
From: Kai Lauterbach <klaute@gmx.de>
Date: Mon, 22 May 2023 09:47:15 +0200
Subject: [PATCH] Generating traces for the webinterface'sgraphs optimized.

---
 firmware/data/bottom.js | 66 ++++++++------------------------
 firmware/html/bottom.js | 84 +++++++++++++----------------------------
 2 files changed, 42 insertions(+), 108 deletions(-)

diff --git a/firmware/data/bottom.js b/firmware/data/bottom.js
index 11dcd6a..e70fdf7 100644
--- a/firmware/data/bottom.js
+++ b/firmware/data/bottom.js
@@ -95,34 +95,17 @@ var indexFloat = lowerIndex + timeDiff / ((upperTime[0] - lowerTime[0]) + ((uppe
 if (indexFloat > index) {
 index = indexFloat;
 }
-var trace1 = {
+var traces = [];
+for (var i = 1; i <= 4; i++) {
+var trace = {
 x: time,
-y: channel1,
-name: 'Channel 1',
-type: 'scatter',
-mode: 'lines+markers',
-};
-var trace2 = {
-x: time,
-y: channel2,
-name: 'Channel 2',
-type: 'scatter',
-mode: 'lines+markers',
-};
-var trace3 = {
-x: time,
-y: channel3,
-name: 'Channel 3',
-type: 'scatter',
-mode: 'lines+markers',
-};
-var trace4 = {
-x: time,
-y: channel4,
-name: 'Channel 4',
+y: eval("channel" + i),
+name: 'Channel ' + i,
 type: 'scatter',
 mode: 'lines+markers',
 };
+traces.push(trace);
+}
 var layout = {
 title: 'Timing Control Data Blocks',
 xaxis: {
@@ -146,7 +129,7 @@ dash: 'dot'
 }
 }]
 };
-Plotly.newPlot('plot_chart', [trace1, trace2, trace3, trace4], layout);
+Plotly.newPlot('plot_chart', traces, layout);
 });
 }
 setInterval(loadGraphData, 10000);
@@ -206,34 +189,17 @@ var indexFloat = lowerIndex + timeDiff / ((upperTime[0] - lowerTime[0]) + ((uppe
 if (indexFloat > index) {
 index = indexFloat;
 }
-var trace1 = {
+var traces = [];
+for (var i = 1; i <= 4; i++) {
+var trace = {
 x: time,
-y: channel1,
-name: 'Channel 1',
-type: 'scatter',
-mode: 'lines+markers',
-};
-var trace2 = {
-x: time,
-y: channel2,
-name: 'Channel 2',
-type: 'scatter',
-mode: 'lines+markers',
-};
-var trace3 = {
-x: time,
-y: channel3,
-name: 'Channel 3',
-type: 'scatter',
-mode: 'lines+markers',
-};
-var trace4 = {
-x: time,
-y: channel4,
-name: 'Channel 4',
+y: eval("channel" + i),
+name: 'Channel ' + i,
 type: 'scatter',
 mode: 'lines+markers',
 };
+traces.push(trace);
+}
 var layout = {
 title: 'Timing Control Data Blocks',
 xaxis: {
@@ -257,7 +223,7 @@ dash: 'dot'
 }
 }]
 };
-Plotly.newPlot('tc_plot_chart', [trace1, trace2, trace3, trace4], layout);
+Plotly.newPlot('tc_plot_chart', traces, layout);
 var plot = document.getElementById('tc_plot_chart');
 }
 function rgbaToHex(rgba) {
diff --git a/firmware/html/bottom.js b/firmware/html/bottom.js
index 4d61172..e4293d7 100644
--- a/firmware/html/bottom.js
+++ b/firmware/html/bottom.js
@@ -121,34 +121,18 @@ function loadGraphData() {
             index = indexFloat;
         }
         //console.log("index in graph >>>" + index);
-        var trace1 = {
-            x: time,
-            y: channel1,
-            name: 'Channel 1',
-            type: 'scatter',
-            mode: 'lines+markers',
-        };
-        var trace2 = {
-            x: time,
-            y: channel2,
-            name: 'Channel 2',
-            type: 'scatter',
-            mode: 'lines+markers',
-        };
-        var trace3 = {
-            x: time,
-            y: channel3,
-            name: 'Channel 3',
-            type: 'scatter',
-            mode: 'lines+markers',
-        };
-        var trace4 = {
-            x: time,
-            y: channel4,
-            name: 'Channel 4',
-            type: 'scatter',
-            mode: 'lines+markers',
-        };
+        var traces = [];
+        for (var i = 1; i <= 4; i++) {
+            var trace = {
+                x: time,
+                y: eval("channel" + i),
+                name: 'Channel ' + i,
+                type: 'scatter',
+                mode: 'lines+markers',
+            };
+    
+            traces.push(trace);
+        }
         var layout = {
             title: 'Timing Control Data Blocks',
             xaxis: {
@@ -172,7 +156,7 @@ function loadGraphData() {
                 }
             }]
         };
-        Plotly.newPlot('plot_chart', [trace1, trace2, trace3, trace4], layout);
+        Plotly.newPlot('plot_chart', traces, layout);
     });
 }
 setInterval(loadGraphData, 10000);
@@ -246,34 +230,18 @@ function loadTCGraphData() {
         index = indexFloat;
     }
     //console.log("index in graph >>>" + index);
-    var trace1 = {
-        x: time,
-        y: channel1,
-        name: 'Channel 1',
-        type: 'scatter',
-        mode: 'lines+markers',
-    };
-    var trace2 = {
-        x: time,
-        y: channel2,
-        name: 'Channel 2',
-        type: 'scatter',
-        mode: 'lines+markers',
-    };
-    var trace3 = {
-        x: time,
-        y: channel3,
-        name: 'Channel 3',
-        type: 'scatter',
-        mode: 'lines+markers',
-    };
-    var trace4 = {
-        x: time,
-        y: channel4,
-        name: 'Channel 4',
-        type: 'scatter',
-        mode: 'lines+markers',
-    };
+    var traces = [];
+    for (var i = 1; i <= 4; i++) {
+        var trace = {
+            x: time,
+            y: eval("channel" + i),
+            name: 'Channel ' + i,
+            type: 'scatter',
+            mode: 'lines+markers',
+        };
+
+        traces.push(trace);
+    }
     var layout = {
         title: 'Timing Control Data Blocks',
         xaxis: {
@@ -297,7 +265,7 @@ function loadTCGraphData() {
             }
         }]
     };
-    Plotly.newPlot('tc_plot_chart', [trace1, trace2, trace3, trace4], layout);
+    Plotly.newPlot('tc_plot_chart', traces, layout);
 
     var plot = document.getElementById('tc_plot_chart'); // Das HTML-Div-Element, in dem der Plot angezeigt wird
 }