klaute/lumini_p30_control
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

First automatically updated timing edit plotly graph.

Browse source
This commit is contained in:
Kai Lauterbach 2023-05-07 11:31:52 +02:00
parent ba63edfc5f
commit 3d54da7f75
6 changed files with 437 additions and 131 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

156
firmware/data/bottom.js
View file

@ -151,6 +151,119 @@ Plotly.newPlot('plot_chart', [trace1, trace2, trace3, trace4], layout);
} }
setInterval(loadGraphData, 10000); setInterval(loadGraphData, 10000);
loadGraphData(); loadGraphData();
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 = [];
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("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];
}
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);
}
setInterval(function() {
if (document.getElementById('tab-tde').classList.contains('visible')) {
loadTCGraphData();
}
}, 2000);
function updateLightState() { function updateLightState() {
console.log('----> setting bri and power switch <----'); console.log('----> setting bri and power switch <----');
for (let i = 1; i <= {{LIGHT_COUNT}}; i++) { for (let i = 1; i <= {{LIGHT_COUNT}}; i++) {
@ -232,22 +345,22 @@ headerRow.appendChild(th);
table.appendChild(headerRow); table.appendChild(headerRow);
for (var i = 1; i <= 10; i++) { for (var i = 1; i <= 10; i++) {
var tr = document.createElement("tr"); var tr = document.createElement("tr");
var tdHour = createSelectCell(23, 0); var tdHour = createSelectCell(23, 0, 1);
tdHour.id = "hour" + i; tdHour.id = "hour" + i;
tr.appendChild(tdHour); tr.appendChild(tdHour);
var tdMinute = createSelectCell(59, 0); var tdMinute = createSelectCell(59, 0, 1);
tdMinute.id = "minute" + i; tdMinute.id = "minute" + i;
tr.appendChild(tdMinute); tr.appendChild(tdMinute);
var tdCh1 = createSelectCell(100, 0); var tdCh1 = createSelectCell(100, 0, 1);
tdCh1.id = "ch1_" + i; tdCh1.id = "ch1_" + i;
tr.appendChild(tdCh1); tr.appendChild(tdCh1);
var tdCh2 = createSelectCell(100, 0); var tdCh2 = createSelectCell(100, 0, 1);
tdCh2.id = "ch2_" + i; tdCh2.id = "ch2_" + i;
tr.appendChild(tdCh2); tr.appendChild(tdCh2);
var tdCh3 = createSelectCell(100, 0); var tdCh3 = createSelectCell(100, 0, 1);
tdCh3.id = "ch3_" + i; tdCh3.id = "ch3_" + i;
tr.appendChild(tdCh3); tr.appendChild(tdCh3);
var tdCh4 = createSelectCell(100, 0); var tdCh4 = createSelectCell(100, 0, 1);
tdCh4.id = "ch4_" + i; tdCh4.id = "ch4_" + i;
tr.appendChild(tdCh4); tr.appendChild(tdCh4);
table.appendChild(tr); table.appendChild(tr);
@ -257,9 +370,9 @@ container.innerHTML = "";
container.classList.add("pure-form"); container.classList.add("pure-form");
container.appendChild(table); container.appendChild(table);
} }
function createSelectCell(max, value) { function createSelectCell(max, value, step) {
var select = document.createElement("select"); var select = document.createElement("select");
for (var i = 0; i <= max; i++) { for (var i = 0; i <= max; i += step) {
var option = document.createElement("option"); var option = document.createElement("option");
option.value = i; option.value = i;
option.text = i; option.text = i;
@ -284,6 +397,7 @@ row.cells[3].childNodes[0].value = parseInt(tcdata[i].ch2 * 100 / 255);
row.cells[4].childNodes[0].value = parseInt(tcdata[i].ch3 * 100 / 255); row.cells[4].childNodes[0].value = parseInt(tcdata[i].ch3 * 100 / 255);
row.cells[5].childNodes[0].value = parseInt(tcdata[i].ch4 * 100 / 255); row.cells[5].childNodes[0].value = parseInt(tcdata[i].ch4 * 100 / 255);
} }
loadTCGraphData();
}); });
} }
function createJsonFromTable() { function createJsonFromTable() {
@ -301,20 +415,40 @@ tcdata.push({hour: hour, min: min, ch1: ch1, ch2: ch2, ch3: ch3, ch4: ch4});
} }
var currentTime = {hour: new Date().getHours(), min: new Date().getMinutes()}; var currentTime = {hour: new Date().getHours(), min: new Date().getMinutes()};
var jsonData = {tcdata: tcdata, currenttime: currentTime}; var jsonData = {tcdata: tcdata, currenttime: currentTime};
console.log("jsonData = " + JSON.stringify(jsonData));
return JSON.stringify(jsonData); return JSON.stringify(jsonData);
} }
function sendDataToServer() { function sendDataToServer() {
var jsonData = createJsonFromTable(); var jsonData = createJsonFromTable();
var urlEncodedData = encodeURIComponent(jsonData); var urlEncodedData = encodeURIComponent(jsonData);
var url = 'http://{{IP_ADDRESS}}/tc_data_blocks_store?data=' + urlEncodedData; var url = 'http://{{IP_ADDRESS}}/tc_data_blocks_store?data=' + urlEncodedData;
console.log("url so save = " + url);
var xhr = new XMLHttpRequest(); var xhr = new XMLHttpRequest();
xhr.open('GET', url, true); xhr.open('GET', url, true);
xhr.onreadystatechange = function () { xhr.onreadystatechange = function () {
if (xhr.readyState === 4 && xhr.status === 200) { if (xhr.readyState === 4) {
var button = document.getElementById("save-button");
if (xhr.status === 200) {
button.classList.remove("pure-button-primary");
button.classList.add("success");
button.innerHTML = "Saved!";
setTimeout(function () {
button.classList.remove("success");
button.classList.add("pure-button-primary");
button.innerHTML = "save";
}, 2000);
console.log('Data successfully sent to server!'); console.log('Data successfully sent to server!');
} else {
button.classList.remove("pure-button-primary");
button.classList.add("error");
button.innerHTML = "Error!";
setTimeout(function () {
button.classList.remove("error");
button.classList.add("pure-button-primary");
button.innerHTML = "save";
}, 2000);
console.log('Error while sending data to server.');
}
} }
}; };
xhr.send(); xhr.send();
loadTCGraphData();
} }

12
firmware/data/index_template_bottom.html
View file

@ -6,10 +6,20 @@
<strong>Timming control data editor</strong> <strong>Timming control data editor</strong>
</label> </label>
<br> <br>
<table>
<tr>
<td>
<div id="table-container"> <div id="table-container">
</div> </div>
</td>
<td>
<div id="tc_plot_chart">
</div>
</td>
</tr>
</table>
<br> <br>
<a href="#" class="pure-button pure-button-primary" onclick="sendDataToServer();">save</a> <a href="#" id="save-button" class="pure-button pure-button-primary" onclick="sendDataToServer();">save</a>
</div> </div>
</div> <!-- end of tab-tde --> </div> <!-- end of tab-tde -->
<script src="http://{{IP_ADDRESS}}/js_bottom"> <script src="http://{{IP_ADDRESS}}/js_bottom">

175
firmware/html/bottom.js
View file

@ -178,6 +178,135 @@ function loadGraphData() {
setInterval(loadGraphData, 10000); setInterval(loadGraphData, 10000);
loadGraphData(); 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 = [];
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('tc_plot_chart', [trace1, trace2, trace3, trace4], layout);
}
setInterval(function() {
if (document.getElementById('tab-tde').classList.contains('visible')) {
loadTCGraphData();
}
}, 2000);
function updateLightState() { function updateLightState() {
console.log('----> setting bri and power switch <----'); console.log('----> setting bri and power switch <----');
for (let i = 1; i <= {{LIGHT_COUNT}}; i++) { for (let i = 1; i <= {{LIGHT_COUNT}}; i++) {
@ -285,32 +414,32 @@ function createTable() {
var tr = document.createElement("tr"); var tr = document.createElement("tr");
// Stunde // Stunde
var tdHour = createSelectCell(23, 0); var tdHour = createSelectCell(23, 0, 1);
tdHour.id = "hour" + i; tdHour.id = "hour" + i;
tr.appendChild(tdHour); tr.appendChild(tdHour);
// Minute // Minute
var tdMinute = createSelectCell(59, 0); var tdMinute = createSelectCell(59, 0, 1);
tdMinute.id = "minute" + i; tdMinute.id = "minute" + i;
tr.appendChild(tdMinute); tr.appendChild(tdMinute);
// ch1 // ch1
var tdCh1 = createSelectCell(100, 0); var tdCh1 = createSelectCell(100, 0, 1);
tdCh1.id = "ch1_" + i; tdCh1.id = "ch1_" + i;
tr.appendChild(tdCh1); tr.appendChild(tdCh1);
// ch2 // ch2
var tdCh2 = createSelectCell(100, 0); var tdCh2 = createSelectCell(100, 0, 1);
tdCh2.id = "ch2_" + i; tdCh2.id = "ch2_" + i;
tr.appendChild(tdCh2); tr.appendChild(tdCh2);
// ch3 // ch3
var tdCh3 = createSelectCell(100, 0); var tdCh3 = createSelectCell(100, 0, 1);
tdCh3.id = "ch3_" + i; tdCh3.id = "ch3_" + i;
tr.appendChild(tdCh3); tr.appendChild(tdCh3);
// ch4 // ch4
var tdCh4 = createSelectCell(100, 0); var tdCh4 = createSelectCell(100, 0, 1);
tdCh4.id = "ch4_" + i; tdCh4.id = "ch4_" + i;
tr.appendChild(tdCh4); tr.appendChild(tdCh4);
@ -323,12 +452,12 @@ function createTable() {
container.appendChild(table); container.appendChild(table);
} }
function createSelectCell(max, value) { function createSelectCell(max, value, step) {
// Erstelle ein neues select-Element // Erstelle ein neues select-Element
var select = document.createElement("select"); var select = document.createElement("select");
// Füge Optionen hinzu // Füge Optionen hinzu
for (var i = 0; i <= max; i++) { for (var i = 0; i <= max; i += step) {
var option = document.createElement("option"); var option = document.createElement("option");
option.value = i; option.value = i;
option.text = i; option.text = i;
@ -362,6 +491,8 @@ function fillTableFromJson() {
row.cells[4].childNodes[0].value = parseInt(tcdata[i].ch3 * 100 / 255); row.cells[4].childNodes[0].value = parseInt(tcdata[i].ch3 * 100 / 255);
row.cells[5].childNodes[0].value = parseInt(tcdata[i].ch4 * 100 / 255); row.cells[5].childNodes[0].value = parseInt(tcdata[i].ch4 * 100 / 255);
} }
loadTCGraphData();
}); });
} }
@ -382,7 +513,7 @@ function createJsonFromTable() {
} }
var currentTime = {hour: new Date().getHours(), min: new Date().getMinutes()}; var currentTime = {hour: new Date().getHours(), min: new Date().getMinutes()};
var jsonData = {tcdata: tcdata, currenttime: currentTime}; var jsonData = {tcdata: tcdata, currenttime: currentTime};
console.log("jsonData = " + JSON.stringify(jsonData)); //console.log("jsonData = " + JSON.stringify(jsonData));
return JSON.stringify(jsonData); return JSON.stringify(jsonData);
} }
@ -390,14 +521,34 @@ function sendDataToServer() {
var jsonData = createJsonFromTable(); var jsonData = createJsonFromTable();
var urlEncodedData = encodeURIComponent(jsonData); var urlEncodedData = encodeURIComponent(jsonData);
var url = 'http://{{IP_ADDRESS}}/tc_data_blocks_store?data=' + urlEncodedData; var url = 'http://{{IP_ADDRESS}}/tc_data_blocks_store?data=' + urlEncodedData;
console.log("url so save = " + url);
var xhr = new XMLHttpRequest(); var xhr = new XMLHttpRequest();
xhr.open('GET', url, true); xhr.open('GET', url, true);
xhr.onreadystatechange = function () { xhr.onreadystatechange = function () {
if (xhr.readyState === 4 && xhr.status === 200) { if (xhr.readyState === 4) {
var button = document.getElementById("save-button");
if (xhr.status === 200) {
button.classList.remove("pure-button-primary");
button.classList.add("success");
button.innerHTML = "Saved!";
setTimeout(function () {
button.classList.remove("success");
button.classList.add("pure-button-primary");
button.innerHTML = "save";
}, 2000);
console.log('Data successfully sent to server!'); console.log('Data successfully sent to server!');
} else {
button.classList.remove("pure-button-primary");
button.classList.add("error");
button.innerHTML = "Error!";
setTimeout(function () {
button.classList.remove("error");
button.classList.add("pure-button-primary");
button.innerHTML = "save";
}, 2000);
console.log('Error while sending data to server.');
}
} }
}; };
xhr.send(); xhr.send();
loadTCGraphData(); // update the tc data graph
} }

13
firmware/html/index_template_bottom.html
View file

@ -6,10 +6,21 @@
<strong>Timming control data editor</strong> <strong>Timming control data editor</strong>
</label> </label>
<br> <br>
<table>
<tr>
<td>
<div id="table-container"> <div id="table-container">
</div> </div>
</td>
<td>
<div id="tc_plot_chart">
</div>
</td>
</tr>
</table>
<br> <br>
<a href="#" class="pure-button pure-button-primary" onclick="sendDataToServer();">save</a> <a href="#" id="save-button" class="pure-button pure-button-primary" onclick="sendDataToServer();">save</a>
</div> </div>
</div> <!-- end of tab-tde --> </div> <!-- end of tab-tde -->