From 88b738ac7547a5cd848ff7555e513df3a1b68b19 Mon Sep 17 00:00:00 2001 From: Kai Lauterbach Date: Wed, 17 May 2023 19:38:55 +0200 Subject: [PATCH] Revert "Refactorized the Plotly graph code" This reverts commit bb0c390937328151abf128c8c770cf94ae215ab8. --- firmware/data/bottom.js | 135 +++++++++++++++++------ firmware/html/bottom.js | 238 +++++++++++++++++++++++++++------------- 2 files changed, 268 insertions(+), 105 deletions(-) diff --git a/firmware/data/bottom.js b/firmware/data/bottom.js index 44ccb05..4062715 100644 --- a/firmware/data/bottom.js +++ b/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; -} -function getIndexFloat(index, currenttime, time) { -var lowerTime = time[index].split(":"); -var upperTime = time[index + 1].split(":"); +var lowerTime = time[lowerIndex].split(":"); +var upperTime = time[upperIndex].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)); -return indexFloat; +var indexFloat = lowerIndex + timeDiff / ((upperTime[0] - lowerTime[0]) + ((upperTime[1] - lowerTime[1]) / 60)); +} 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); -var index = getIndex(currenttime, time); -var indexFloat = getIndexFloat(index, currenttime, time); -adjustIndex(indexFloat, index, currenttime, time); -createGraph(time, channel1, channel2, channel3, channel4, index); +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); +channel2.push(data['tcdata'][i]['ch2'] * 100 / 255); +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) { diff --git a/firmware/html/bottom.js b/firmware/html/bottom.js index 425a944..c87e348 100644 --- a/firmware/html/bottom.js +++ b/firmware/html/bottom.js @@ -64,15 +64,131 @@ 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); + 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); + channel2.push(data['tcdata'][i]['ch2'] * 100 / 255); + 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("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]; + } + 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('plot_chart', [trace1, trace2, trace3, trace4], layout); }); } +setInterval(loadGraphData, 10000); +loadGraphData(); -function parseData(data, time, channel1, channel2, channel3, channel4, currenttime) { +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 = []; 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,61 +198,54 @@ function parseData(data, time, channel1, channel2, channel3, channel4, currentti } currenttime.push(data['currenttime']['hour']); currenttime.push(data['currenttime']['min']); -} - -function getIndex(currenttime, time) { + //console.log(currenttime); 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++) { - 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; + 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 (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(':'); - currenttime[0] = tmp1[0]; - currenttime[1] = tmp1[1]; - } - return lowerIndex; -} - -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)); - return indexFloat; -} - -function adjustIndex(indexFloat, index, currenttime, time) { if (indexFloat > index) { index = indexFloat; } -} - -function createGraph(time, channel1, channel2, channel3, channel4, index) { + //console.log("index in graph >>>" + index); var trace1 = { x: time, y: channel1, @@ -188,28 +297,9 @@ function createGraph(time, channel1, channel2, channel3, channel4, index) { } }] }; - Plotly.newPlot('plot_chart', [trace1, trace2, trace3, trace4], layout); -} -setInterval(loadGraphData, 60000); -loadGraphData(); + Plotly.newPlot('tc_plot_chart', [trace1, trace2, trace3, trace4], layout); -function loadTCGraphData() { - console.log('----> generate tc data graph <----'); - - var data = JSON.parse(createJsonFromTable()); - var currenttime = []; - var time = []; - 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); - - 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) {