Revert "Refactorized the Plotly graph code"

This reverts commit bb0c390937.

firmware/data/bottom.js

@@ -49,14 +49,6 @@ var channel1 = [];
 var channel2 = [];
 var channel3 = [];
 var channel4 = [];
-parseData(data, time, channel1, channel2, channel3, channel4, currenttime);
-var index = getIndex(currenttime, time);
-var indexFloat = getIndexFloat(index, currenttime, time);
-adjustIndex(indexFloat, index, currenttime, time);
-createGraph(time, channel1, channel2, channel3, channel4, index);
-});
-}
-function parseData(data, time, channel1, channel2, channel3, channel4, currenttime) {
 for (var i = 0; i < data['tcdata'].length; i++) {
 time.push(data['tcdata'][i]['hour'] + ':' + (data['tcdata'][i]['min'] < 10 ? '0' : '') + data['tcdata'][i]['min']);
 channel1.push(data['tcdata'][i]['ch1'] * 100 / 255);
@@ -66,16 +58,9 @@ channel4.push(data['tcdata'][i]['ch4'] * 100 / 255);
 }
 currenttime.push(data['currenttime']['hour']);
 currenttime.push(data['currenttime']['min']);
-}
-function getIndex(currenttime, time) {
 var currentTimeStr = currenttime[0] + ':' + (currenttime[1] < 10 ? '0' : '') + currenttime[1];
 var index = time.indexOf(currentTimeStr);
 if (index === -1) {
-index = findIndex(currenttime, time);
-}
-return index;
-}
-function findIndex(currenttime, time) {
 var lowerIndex = -1;
 var upperIndex = -1;
 for (var i = 0; i < time.length - 1; i++) {
@@ -101,21 +86,15 @@ var tmp1 = time[0].split(':');
 currenttime[0] = tmp1[0];
 currenttime[1] = tmp1[1];
 }
-return lowerIndex;
+var lowerTime = time[lowerIndex].split(":");
-}
+var upperTime = time[upperIndex].split(":");
-function getIndexFloat(index, currenttime, time) {
-var lowerTime = time[index].split(":");
-var upperTime = time[index + 1].split(":");
 var timeDiff = (currenttime[0] - lowerTime[0]) + ((currenttime[1] - lowerTime[1]) / 60);
-var indexFloat = index + timeDiff / ((upperTime[0] - lowerTime[0]) + ((upperTime[1] - lowerTime[1]) / 60));
+var indexFloat = lowerIndex + timeDiff / ((upperTime[0] - lowerTime[0]) + ((upperTime[1] - lowerTime[1]) / 60));
-return indexFloat;
+} else {
 }
-function adjustIndex(indexFloat, index, currenttime, time) {
 if (indexFloat > index) {
 index = indexFloat;
 }
-}
-function createGraph(time, channel1, channel2, channel3, channel4, index) {
 var trace1 = {
 x: time,
 y: channel1,
@@ -168,8 +147,9 @@ dash: 'dot'
 }]
 };
 Plotly.newPlot('plot_chart', [trace1, trace2, trace3, trace4], layout);
+});
 }
-setInterval(loadGraphData, 60000);
+setInterval(loadGraphData, 10000);
 loadGraphData();
 function loadTCGraphData() {
 console.log('----> generate tc data graph <----');
@@ -180,11 +160,104 @@ var channel1 = [];
 var channel2 = [];
 var channel3 = [];
 var channel4 = [];
-parseData(data, time, channel1, channel2, channel3, channel4, currenttime);
+for (var i = 0; i < data['tcdata'].length; i++) {
-var index = getIndex(currenttime, time);
+time.push(data['tcdata'][i]['hour'] + ':' + (data['tcdata'][i]['min'] < 10 ? '0' : '') + data['tcdata'][i]['min']);
-var indexFloat = getIndexFloat(index, currenttime, time);
+channel1.push(data['tcdata'][i]['ch1'] * 100 / 255);
-adjustIndex(indexFloat, index, currenttime, time);
+channel2.push(data['tcdata'][i]['ch2'] * 100 / 255);
-createGraph(time, channel1, channel2, channel3, channel4, index);
+channel3.push(data['tcdata'][i]['ch3'] * 100 / 255);
+channel4.push(data['tcdata'][i]['ch4'] * 100 / 255);
+}
+currenttime.push(data['currenttime']['hour']);
+currenttime.push(data['currenttime']['min']);
+var currentTimeStr = currenttime[0] + ':' + (currenttime[1] < 10 ? '0' : '') + currenttime[1];
+var index = time.indexOf(currentTimeStr);
+if (index === -1) {
+var lowerIndex = -1;
+var upperIndex = -1;
+for (var i = 0; i < time.length - 1; i++) {
+const currentDate = new Date();
+const year = currentDate.getFullYear();
+const month = (currentDate.getMonth() + 1).toString().padStart(2, '0');
+const day = currentDate.getDate().toString().padStart(2, '0');
+const dateString = `${year}-${month}-${day}`;
+const start = moment(dateString + ' ' + time[i], 'YYYY-MM-DD HH:mm');
+const curr = moment(dateString + ' ' + currentTimeStr, 'YYYY-MM-DD HH:mm');
+const end = moment(dateString + ' ' + time[i + 1], 'YYYY-MM-DD HH:mm');
+if (curr.isBetween(start, end)) {
+lowerIndex = i;
+upperIndex = i + 1;
+break;
+}
+}
+if (lowerIndex === -1 || upperIndex === -1) {
+console.log("Warning: Current time not found in time array and not between two elements in time array. Fixing it...");
+lowerIndex = 0;
+upperIndex = 1;
+var tmp1 = time[0].split(':');
+currenttime[0] = tmp1[0];
+currenttime[1] = tmp1[1];
+}
+var lowerTime = time[lowerIndex].split(":");
+var upperTime = time[upperIndex].split(":");
+var timeDiff = (currenttime[0] - lowerTime[0]) + ((currenttime[1] - lowerTime[1]) / 60);
+var indexFloat = lowerIndex + timeDiff / ((upperTime[0] - lowerTime[0]) + ((upperTime[1] - lowerTime[1]) / 60));
+} else {
+}
+if (indexFloat > index) {
+index = indexFloat;
+}
+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 layout = {
+title: 'Timing Control Data Blocks',
+xaxis: {
+title: 'Time',
+tickangle: -45,
+},
+yaxis: {
+title: 'Brightness',
+range: [0, 100],
+},
+shapes: [{
+type: 'line',
+x0: index,
+y0: 0,
+x1: index,
+y1: 255,
+line: {
+color: 'lightgrey',
+width: 3,
+dash: 'dot'
+}
+}]
+};
+Plotly.newPlot('tc_plot_chart', [trace1, trace2, trace3, trace4], layout);
 var plot = document.getElementById('tc_plot_chart');
 }
 function rgbaToHex(rgba) {

firmware/html/bottom.js

@@ -64,15 +64,6 @@ function loadGraphData() {
         var channel2 = [];
         var channel3 = [];
         var channel4 = [];
-        parseData(data, time, channel1, channel2, channel3, channel4, currenttime);
-        var index = getIndex(currenttime, time);
-        var indexFloat = getIndexFloat(index, currenttime, time);
-        adjustIndex(indexFloat, index, currenttime, time);
-        createGraph(time, channel1, channel2, channel3, channel4, index);
-    });
-}
-
-function parseData(data, time, channel1, channel2, channel3, channel4, currenttime) {
         for (var i = 0; i < data['tcdata'].length; i++) {
             time.push(data['tcdata'][i]['hour'] + ':' + (data['tcdata'][i]['min'] < 10 ? '0' : '') + data['tcdata'][i]['min']);
             channel1.push(data['tcdata'][i]['ch1'] * 100 / 255);
@@ -82,21 +73,14 @@ function parseData(data, time, channel1, channel2, channel3, channel4, currentti
         }
         currenttime.push(data['currenttime']['hour']);
         currenttime.push(data['currenttime']['min']);
-}
+        //console.log(currenttime);
-
-function getIndex(currenttime, time) {
         var currentTimeStr = currenttime[0] + ':' + (currenttime[1] < 10 ? '0' : '') + currenttime[1];
         var index = time.indexOf(currentTimeStr);
         if (index === -1) {
-        index = findIndex(currenttime, time);
-    }
-    return index;
-}
-
-function findIndex(currenttime, time) {
             var lowerIndex = -1;
             var upperIndex = -1;
             for (var i = 0; i < time.length - 1; i++) {
+                //console.log(time[i] + ' <= ' + currentTimeStr + ' >= ' + time[i + 1]);
                 const currentDate = new Date();
                 const year = currentDate.getFullYear();
                 const month = (currentDate.getMonth() + 1).toString().padStart(2, '0');
@@ -105,38 +89,38 @@ function findIndex(currenttime, time) {
                 const start = moment(dateString + ' ' + time[i], 'YYYY-MM-DD HH:mm');
                 const curr = moment(dateString + ' ' + currentTimeStr, 'YYYY-MM-DD HH:mm');
                 const end = moment(dateString + ' ' + time[i + 1], 'YYYY-MM-DD HH:mm');
+                //console.log(start.format('YYYY-MM-DD HH:mm') + ' <= ' + curr.format('YYYY-MM-DD HH:mm') + ' >= ' + end.format('YYYY-MM-DD HH:mm'));
+                //console.log(curr.isBetween(start, end));
                 if (curr.isBetween(start, end)) {
                     lowerIndex = i;
                     upperIndex = i + 1;
                     break;
                 }
             }
+            //console.log('lowerIndex=' + lowerIndex);
+            //console.log('upperIndex=' + upperIndex);
             if (lowerIndex === -1 || upperIndex === -1) {
                 console.log("Error: Current time not found in time array and not between two elements in time array. Fixing it...");
                 lowerIndex = 0;
                 upperIndex = 1;
                 var tmp1 = time[0].split(':');
+                //console.log('tmp1 = ' + tmp1);
                 currenttime[0] = tmp1[0];
                 currenttime[1] = tmp1[1];
             }
-    return lowerIndex;
+            var lowerTime = time[lowerIndex].split(":");
-}
+            var upperTime = time[upperIndex].split(":");
-
-function getIndexFloat(index, currenttime, time) {
-    var lowerTime = time[index].split(":");
-    var upperTime = time[index + 1].split(":");
             var timeDiff = (currenttime[0] - lowerTime[0]) + ((currenttime[1] - lowerTime[1]) / 60);
-    var indexFloat = index + timeDiff / ((upperTime[0] - lowerTime[0]) + ((upperTime[1] - lowerTime[1]) / 60));
+            var indexFloat = lowerIndex + timeDiff / ((upperTime[0] - lowerTime[0]) + ((upperTime[1] - lowerTime[1]) / 60));
-    return indexFloat;
+            //console.log("Index (float): " + indexFloat);
+        } else {
+            //console.log("Index (integer): " + index);
+            //console.log("Index (float): " + index);
         }
-
-function adjustIndex(indexFloat, index, currenttime, time) {
         if (indexFloat > index) {
             index = indexFloat;
         }
-}
+        //console.log("index in graph >>>" + index);
-
-function createGraph(time, channel1, channel2, channel3, channel4, index) {
         var trace1 = {
             x: time,
             y: channel1,
@@ -189,27 +173,133 @@ function createGraph(time, channel1, channel2, channel3, channel4, index) {
             }]
         };
         Plotly.newPlot('plot_chart', [trace1, trace2, trace3, trace4], layout);
+    });
 }
-setInterval(loadGraphData, 60000);
+setInterval(loadGraphData, 10000);
 loadGraphData();
 
 function loadTCGraphData() {
     console.log('----> generate tc data graph <----');
 
     var data = JSON.parse(createJsonFromTable());
+    //console.log(data);
     var currenttime = [];
     var time = [];
     var channel1 = [];
     var channel2 = [];
     var channel3 = [];
     var channel4 = [];
-    parseData(data, time, channel1, channel2, channel3, channel4, currenttime);
+    for (var i = 0; i < data['tcdata'].length; i++) {
-    var index = getIndex(currenttime, time);
+        time.push(data['tcdata'][i]['hour'] + ':' + (data['tcdata'][i]['min'] < 10 ? '0' : '') + data['tcdata'][i]['min']);
-    var indexFloat = getIndexFloat(index, currenttime, time);
+        channel1.push(data['tcdata'][i]['ch1'] * 100 / 255);
-    adjustIndex(indexFloat, index, currenttime, time);
+        channel2.push(data['tcdata'][i]['ch2'] * 100 / 255);
-    createGraph(time, channel1, channel2, channel3, channel4, index);
+        channel3.push(data['tcdata'][i]['ch3'] * 100 / 255);
+        channel4.push(data['tcdata'][i]['ch4'] * 100 / 255);
+    }
+    currenttime.push(data['currenttime']['hour']);
+    currenttime.push(data['currenttime']['min']);
+    //console.log(currenttime);
+    var currentTimeStr = currenttime[0] + ':' + (currenttime[1] < 10 ? '0' : '') + currenttime[1];
+    var index = time.indexOf(currentTimeStr);
+    if (index === -1) {
+        var lowerIndex = -1;
+        var upperIndex = -1;
+        for (var i = 0; i < time.length - 1; i++) {
+            //console.log(time[i] + ' <= ' + currentTimeStr + ' >= ' + time[i + 1]);
+            const currentDate = new Date();
+            const year = currentDate.getFullYear();
+            const month = (currentDate.getMonth() + 1).toString().padStart(2, '0');
+            const day = currentDate.getDate().toString().padStart(2, '0');
+            const dateString = `${year}-${month}-${day}`;
+            const start = moment(dateString + ' ' + time[i], 'YYYY-MM-DD HH:mm');
+            const curr = moment(dateString + ' ' + currentTimeStr, 'YYYY-MM-DD HH:mm');
+            const end = moment(dateString + ' ' + time[i + 1], 'YYYY-MM-DD HH:mm');
+            //console.log(start.format('YYYY-MM-DD HH:mm') + ' <= ' + curr.format('YYYY-MM-DD HH:mm') + ' >= ' + end.format('YYYY-MM-DD HH:mm'));
+            //console.log(curr.isBetween(start, end));
+            if (curr.isBetween(start, end)) {
+                lowerIndex = i;
+                upperIndex = i + 1;
+                break;
+            }
+        }
+        //console.log('lowerIndex=' + lowerIndex);
+        //console.log('upperIndex=' + upperIndex);
+        if (lowerIndex === -1 || upperIndex === -1) {
+            console.log("Warning: Current time not found in time array and not between two elements in time array. Fixing it...");
+            lowerIndex = 0;
+            upperIndex = 1;
+            var tmp1 = time[0].split(':');
+            //console.log('tmp1 = ' + tmp1);
+            currenttime[0] = tmp1[0];
+            currenttime[1] = tmp1[1];
+        }
+        var lowerTime = time[lowerIndex].split(":");
+        var upperTime = time[upperIndex].split(":");
+        var timeDiff = (currenttime[0] - lowerTime[0]) + ((currenttime[1] - lowerTime[1]) / 60);
+        var indexFloat = lowerIndex + timeDiff / ((upperTime[0] - lowerTime[0]) + ((upperTime[1] - lowerTime[1]) / 60));
+        //console.log("Index (float): " + indexFloat);
+    } else {
+        //console.log("Index (integer): " + index);
+        //console.log("Index (float): " + index);
+    }
+    if (indexFloat > index) {
+        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 layout = {
+        title: 'Timing Control Data Blocks',
+        xaxis: {
+            title: 'Time',
+            tickangle: -45,
+        },
+        yaxis: {
+            title: 'Brightness',
+            range: [0, 100],
+        },
+        shapes: [{
+            type: 'line',
+            x0: index,
+            y0: 0,
+            x1: index,
+            y1: 255,
+            line: {
+                color: 'lightgrey',
+                width: 3,
+                dash: 'dot'
+            }
+        }]
+    };
+    Plotly.newPlot('tc_plot_chart', [trace1, trace2, trace3, trace4], layout);
 
-    var plot = document.getElementById('tc_plot_chart');
+    var plot = document.getElementById('tc_plot_chart'); // Das HTML-Div-Element, in dem der Plot angezeigt wird
 }
 
 function rgbaToHex(rgba) {