Revert "Refactorized the Plotly graph code"

This reverts commit bb0c390937.
This commit is contained in:
Kai Lauterbach 2023-05-17 19:38:55 +02:00
parent bb0c390937
commit 88b738ac75
2 changed files with 268 additions and 105 deletions
firmware

View file

@ -49,14 +49,6 @@ var channel1 = [];
var channel2 = []; var channel2 = [];
var channel3 = []; var channel3 = [];
var channel4 = []; 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++) { 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']); time.push(data['tcdata'][i]['hour'] + ':' + (data['tcdata'][i]['min'] < 10 ? '0' : '') + data['tcdata'][i]['min']);
channel1.push(data['tcdata'][i]['ch1'] * 100 / 255); 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']['hour']);
currenttime.push(data['currenttime']['min']); currenttime.push(data['currenttime']['min']);
}
function getIndex(currenttime, time) {
var currentTimeStr = currenttime[0] + ':' + (currenttime[1] < 10 ? '0' : '') + currenttime[1]; var currentTimeStr = currenttime[0] + ':' + (currenttime[1] < 10 ? '0' : '') + currenttime[1];
var index = time.indexOf(currentTimeStr); var index = time.indexOf(currentTimeStr);
if (index === -1) { if (index === -1) {
index = findIndex(currenttime, time);
}
return index;
}
function findIndex(currenttime, time) {
var lowerIndex = -1; var lowerIndex = -1;
var upperIndex = -1; var upperIndex = -1;
for (var i = 0; i < time.length - 1; i++) { for (var i = 0; i < time.length - 1; i++) {
@ -101,21 +86,15 @@ var tmp1 = time[0].split(':');
currenttime[0] = tmp1[0]; currenttime[0] = tmp1[0];
currenttime[1] = tmp1[1]; 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 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) { if (indexFloat > index) {
index = indexFloat; index = indexFloat;
} }
}
function createGraph(time, channel1, channel2, channel3, channel4, index) {
var trace1 = { var trace1 = {
x: time, x: time,
y: channel1, y: channel1,
@ -168,8 +147,9 @@ dash: 'dot'
}] }]
}; };
Plotly.newPlot('plot_chart', [trace1, trace2, trace3, trace4], layout); Plotly.newPlot('plot_chart', [trace1, trace2, trace3, trace4], layout);
});
} }
setInterval(loadGraphData, 60000); setInterval(loadGraphData, 10000);
loadGraphData(); loadGraphData();
function loadTCGraphData() { function loadTCGraphData() {
console.log('----> generate tc data graph <----'); console.log('----> generate tc data graph <----');
@ -180,11 +160,104 @@ var channel1 = [];
var channel2 = []; var channel2 = [];
var channel3 = []; var channel3 = [];
var channel4 = []; 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'); var plot = document.getElementById('tc_plot_chart');
} }
function rgbaToHex(rgba) { function rgbaToHex(rgba) {

View file

@ -64,15 +64,131 @@ function loadGraphData() {
var channel2 = []; var channel2 = [];
var channel3 = []; var channel3 = [];
var channel4 = []; 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("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++) { 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']); time.push(data['tcdata'][i]['hour'] + ':' + (data['tcdata'][i]['min'] < 10 ? '0' : '') + data['tcdata'][i]['min']);
channel1.push(data['tcdata'][i]['ch1'] * 100 / 255); 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']['hour']);
currenttime.push(data['currenttime']['min']); currenttime.push(data['currenttime']['min']);
} //console.log(currenttime);
function getIndex(currenttime, time) {
var currentTimeStr = currenttime[0] + ':' + (currenttime[1] < 10 ? '0' : '') + currenttime[1]; var currentTimeStr = currenttime[0] + ':' + (currenttime[1] < 10 ? '0' : '') + currenttime[1];
var index = time.indexOf(currentTimeStr); var index = time.indexOf(currentTimeStr);
if (index === -1) { if (index === -1) {
index = findIndex(currenttime, time); var lowerIndex = -1;
} var upperIndex = -1;
return index; for (var i = 0; i < time.length - 1; i++) {
} //console.log(time[i] + ' <= ' + currentTimeStr + ' >= ' + time[i + 1]);
const currentDate = new Date();
function findIndex(currenttime, time) { const year = currentDate.getFullYear();
var lowerIndex = -1; const month = (currentDate.getMonth() + 1).toString().padStart(2, '0');
var upperIndex = -1; const day = currentDate.getDate().toString().padStart(2, '0');
for (var i = 0; i < time.length - 1; i++) { const dateString = `${year}-${month}-${day}`;
const currentDate = new Date(); const start = moment(dateString + ' ' + time[i], 'YYYY-MM-DD HH:mm');
const year = currentDate.getFullYear(); const curr = moment(dateString + ' ' + currentTimeStr, 'YYYY-MM-DD HH:mm');
const month = (currentDate.getMonth() + 1).toString().padStart(2, '0'); const end = moment(dateString + ' ' + time[i + 1], 'YYYY-MM-DD HH:mm');
const day = currentDate.getDate().toString().padStart(2, '0'); //console.log(start.format('YYYY-MM-DD HH:mm') + ' <= ' + curr.format('YYYY-MM-DD HH:mm') + ' >= ' + end.format('YYYY-MM-DD HH:mm'));
const dateString = `${year}-${month}-${day}`; //console.log(curr.isBetween(start, end));
const start = moment(dateString + ' ' + time[i], 'YYYY-MM-DD HH:mm'); if (curr.isBetween(start, end)) {
const curr = moment(dateString + ' ' + currentTimeStr, 'YYYY-MM-DD HH:mm'); lowerIndex = i;
const end = moment(dateString + ' ' + time[i + 1], 'YYYY-MM-DD HH:mm'); upperIndex = i + 1;
if (curr.isBetween(start, end)) { break;
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) { if (indexFloat > index) {
index = indexFloat; index = indexFloat;
} }
} //console.log("index in graph >>>" + index);
function createGraph(time, channel1, channel2, channel3, channel4, index) {
var trace1 = { var trace1 = {
x: time, x: time,
y: channel1, y: channel1,
@ -188,28 +297,9 @@ function createGraph(time, channel1, channel2, channel3, channel4, index) {
} }
}] }]
}; };
Plotly.newPlot('plot_chart', [trace1, trace2, trace3, trace4], layout); Plotly.newPlot('tc_plot_chart', [trace1, trace2, trace3, trace4], layout);
}
setInterval(loadGraphData, 60000);
loadGraphData();
function loadTCGraphData() { var plot = document.getElementById('tc_plot_chart'); // Das HTML-Div-Element, in dem der Plot angezeigt wird
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');
} }
function rgbaToHex(rgba) { function rgbaToHex(rgba) {