lumini_p30_control/firmware/data/tc_data_edit.html

<br>
<div id="tc-edit-plotly-graph"></div>
<a href="#" onclick="sendTCData()" class="pure-button">Daten senden</a>
<script>
var dataPoints = [];
for (var i = 0; i < 10; i++) {
var xValue = i * 2;
dataPoints.push({ x: xValue, y: [0, 0, 0, 0] });
}
var options = {
title: {
text: "Graph Title"
},
data: [{
type: "line",
dataPoints: dataPoints
}]
};
var inputIdPrefixes = ["hour", "minute", "ch1", "ch2", "ch3", "ch4"];
var inputData = {
hour: [],
minute: [],
ch1: [],
ch2: [],
ch3: [],
ch4: []
};
var trace1 = {
x: [], 
y: [], 
mode: 'lines',
name: 'ch1'
};
var trace2 = {
x: [], 
y: [], 
mode: 'lines',
name: 'ch2'
};
var trace3 = {
x: [], 
y: [], 
mode: 'lines',
name: 'ch3'
};
var trace4 = {
x: [], 
y: [], 
mode: 'lines',
name: 'ch4'
};
var data = [trace1, trace2, trace3, trace4];
var layout = {
xaxis: {
title: 'Uhrzeit'
},
yaxis: {
title: 'Wert'
},
margin: {
l: 50,
r: 50,
b: 50,
t: 50,
pad: 4
},
hovermode: 'closest'
};
Plotly.newPlot('tc-edit-plotly-graph', data, layout);
var layout = {
title: 'Werte der Kanäle ch1 - ch4',
xaxis: {
title: 'Uhrzeit',
range: ['00:00', '23:59'],
tickformat: '%H:%M'
},
yaxis: {
title: 'Wert in %',
range: [0, 100]
}
};
var plotDiv = document.getElementById('plot');
Plotly.newPlot(plotDiv, [], layout, {responsive: true});
var data = [  {    x: ['00:00', '02:00', '04:00', '06:00', '08:00', '10:00', '12:00', '14:00', '16:00', '18:00'],
y: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
name: 'Channel 1',
mode: 'lines+markers',
line: {
shape: 'spline'
}
},
{
x: ['00:00', '02:00', '04:00', '06:00', '08:00', '10:00', '12:00', '14:00', '16:00', '18:00'],
y: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
name: 'Channel 2',
mode: 'lines+markers',
line: {
shape: 'spline'
}
},
{
x: ['00:00', '02:00', '04:00', '06:00', '08:00', '10:00', '12:00', '14:00', '16:00', '18:00'],
y: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
name: 'Channel 3',
mode: 'lines+markers',
line: {
shape: 'spline'
}
},
{
x: ['00:00', '02:00', '04:00', '06:00', '08:00', '10:00', '12:00', '14:00', '16:00', '18:00'],
y: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
name: 'Channel 4',
mode: 'lines+markers',
line: {
shape: 'spline'
}
}
];
var layout = {
xaxis: {
title: 'Time (hh:mm)',
showgrid: false,
zeroline: false
},
yaxis: {
title: 'Value (%)',
showline: false
}
};
Plotly.newPlot('graph', data, layout);
var layout = {
title: 'Graph',
xaxis: {
title: 'Uhrzeit'
},
yaxis: {
title: 'Prozent'
},
hovermode: 'closest'
};
var plot_data = [{  x: [],
y: [],
mode: 'lines+markers',
line: { shape: 'spline' }
}];
Plotly.newPlot('graph', plot_data, layout);
function updateData() {
for (let i = 0; i < 10; i++) {
let hour = document.getElementById(`hour-${i}`).value;
let minute = document.getElementById(`minute-${i}`).value;
for (let j = 1; j <= 4; j++) {
let value = parseFloat(document.getElementById(`ch${j}-${i}`).value);
let index = i * 4 + (j - 1);
data[index].x = `${hour}:${minute}`;
data[index].y = value;
}
}
Plotly.update('graph', data, layout);
}
for (let i = 0; i < 10; i++) {
document.getElementById(`hour-${i}`).addEventListener('input', updateData);
document.getElementById(`minute-${i}`).addEventListener('input', updateData);
for (let j = 1; j <= 4; j++) {
document.getElementById(`ch${j}-${i}`).addEventListener('input', updateData);
}
}
function sendTCData() {
var data = [];
for (var i = 0; i < 10; i++) {
var hh = document.getElementById("hh_" + i).value;
var mm = document.getElementById("mm_" + i).value;
var ch1 = document.getElementById("ch1_" + i).value;
var ch2 = document.getElementById("ch2_" + i).value;
var ch3 = document.getElementById("ch3_" + i).value;
var ch4 = document.getElementById("ch4_" + i).value;
data.push({ "hh": hh, "mm": mm, "ch1": ch1, "ch2": ch2, "ch3": ch3, "ch4": ch4 });
}
var jsonData = encodeURIComponent(JSON.stringify(data));
var xhr = new XMLHttpRequest();
xhr.open("POST", "http://{{IP_ADDRESS}}}}/tc_data_block_store?data=" + jsonData);
xhr.send();
}
</script>