Added third tab which should represend the timing control data blocks editor.
This commit is contained in:
parent
1cf68b8922
commit
096849b6ef
13 changed files with 1262 additions and 749 deletions
1
.gitattributes
vendored
Normal file
1
.gitattributes
vendored
Normal file
|
@ -0,0 +1 @@
|
||||||
|
* -text
|
|
@ -1,47 +1,50 @@
|
||||||
<!-- bottom -->
|
<!-- bottom -->
|
||||||
|
<div id="tab-tde" class=""> <!-- timing editor -->
|
||||||
|
<div id="tc-edit-container" class=""></div>
|
||||||
|
</div> <!-- end of tab-tde -->
|
||||||
<script>
|
<script>
|
||||||
|
function addTabListener() {
|
||||||
|
try {
|
||||||
var tabMain = document.getElementById("tab-lights");
|
var tabMain = document.getElementById("tab-lights");
|
||||||
var tabConfig = document.getElementById("tab-config");
|
var tabConfig = document.getElementById("tab-config");
|
||||||
var tabTDE = document.getElementById("tab-tde");
|
var tabTDE = document.getElementById("tab-tde");
|
||||||
|
|
||||||
var amain = document.getElementById("tab-a-lights");
|
var amain = document.getElementById("tab-a-lights");
|
||||||
var acfg = document.getElementById("tab-a-config");
|
var acfg = document.getElementById("tab-a-config");
|
||||||
var atde = document.getElementById("tab-a-tde");
|
var atde = document.getElementById("tab-a-tde");
|
||||||
|
amain.addEventListener("click", function() {
|
||||||
|
|
||||||
document.getElementById("tab-a-lights").addEventListener("click", function() {
|
|
||||||
tabMain.classList.add("visible");
|
tabMain.classList.add("visible");
|
||||||
tabConfig.classList.remove("visible");
|
tabConfig.classList.remove("visible");
|
||||||
tabTDE.classList.remove("visible");
|
tabTDE.classList.remove("visible");
|
||||||
|
|
||||||
amain.classList.add("pure-button-primary");
|
amain.classList.add("pure-button-primary");
|
||||||
acfg.classList.remove("pure-button-primary");
|
acfg.classList.remove("pure-button-primary");
|
||||||
atde.classList.remove("pure-button-primary");
|
atde.classList.remove("pure-button-primary");
|
||||||
});
|
});
|
||||||
|
acfg.addEventListener("click", function() {
|
||||||
document.getElementById("tab-a-config").addEventListener("click", function() {
|
|
||||||
tabMain.classList.remove("visible");
|
tabMain.classList.remove("visible");
|
||||||
tabConfig.classList.add("visible");
|
tabConfig.classList.add("visible");
|
||||||
tabTDE.classList.remove("visible");
|
tabTDE.classList.remove("visible");
|
||||||
|
|
||||||
amain.classList.remove("pure-button-primary");
|
amain.classList.remove("pure-button-primary");
|
||||||
acfg.classList.add("pure-button-primary");
|
acfg.classList.add("pure-button-primary");
|
||||||
atde.classList.remove("pure-button-primary");
|
atde.classList.remove("pure-button-primary");
|
||||||
});
|
});
|
||||||
|
atde.addEventListener("click", function() {
|
||||||
document.getElementById("tab-a-tde").addEventListener("click", function() {
|
|
||||||
tabMain.classList.remove("visible");
|
tabMain.classList.remove("visible");
|
||||||
tabConfig.classList.remove("visible");
|
tabConfig.classList.remove("visible");
|
||||||
tabTDE.classList.add("visible");
|
tabTDE.classList.add("visible");
|
||||||
|
|
||||||
amain.classList.remove("pure-button-primary");
|
amain.classList.remove("pure-button-primary");
|
||||||
acfg.classList.remove("pure-button-primary");
|
acfg.classList.remove("pure-button-primary");
|
||||||
atde.classList.add("pure-button-primary");
|
atde.classList.add("pure-button-primary");
|
||||||
});
|
});
|
||||||
|
} catch (error) {
|
||||||
|
console.log("Fehler in load listener of the tab action listener management: " + error.message);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
window.addEventListener('load', function() {
|
||||||
|
addTabListener();
|
||||||
|
});
|
||||||
function loadGraphData() {
|
function loadGraphData() {
|
||||||
console.log('----> generate graph <----');
|
console.log('----> generate graph <----');
|
||||||
$.getJSON('/tc_data_blocks', function(data) {
|
$.getJSON('/tc_data_blocks_read', function(data) {
|
||||||
var currenttime = [];
|
var currenttime = [];
|
||||||
var time = [];
|
var time = [];
|
||||||
var channel1 = [];
|
var channel1 = [];
|
||||||
|
@ -161,7 +164,6 @@ Plotly.newPlot('plot_chart', [trace1, trace2, trace3, trace4], layout);
|
||||||
}
|
}
|
||||||
setInterval(loadGraphData, 10000);
|
setInterval(loadGraphData, 10000);
|
||||||
loadGraphData();
|
loadGraphData();
|
||||||
|
|
||||||
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++) {
|
||||||
|
@ -186,7 +188,6 @@ onLinkOff.classList.add('pure-button-primary');
|
||||||
}
|
}
|
||||||
setInterval(updateLightState, 10000);
|
setInterval(updateLightState, 10000);
|
||||||
updateLightState();
|
updateLightState();
|
||||||
|
|
||||||
function updatePWMValues() {
|
function updatePWMValues() {
|
||||||
console.log('----> setting pwm data <----');
|
console.log('----> setting pwm data <----');
|
||||||
for (let i = 0; i < {{LIGHT_COUNT}}; i++) {
|
for (let i = 0; i < {{LIGHT_COUNT}}; i++) {
|
||||||
|
@ -207,47 +208,43 @@ pwmElementTxt.innerText = pwmValue.toString();
|
||||||
}
|
}
|
||||||
updatePWMValues();
|
updatePWMValues();
|
||||||
setInterval(updatePWMValues, 5000);
|
setInterval(updatePWMValues, 5000);
|
||||||
|
|
||||||
|
|
||||||
var links = document.querySelectorAll('[id^="on"][id$="_off"]');
|
var links = document.querySelectorAll('[id^="on"][id$="_off"]');
|
||||||
|
|
||||||
links.forEach(function(link) {
|
links.forEach(function(link) {
|
||||||
link.addEventListener('click', function(event) {
|
link.addEventListener('click', function(event) {
|
||||||
|
|
||||||
event.preventDefault();
|
event.preventDefault();
|
||||||
|
|
||||||
var id = this.id.replace('on', '').replace('_off', '');
|
var id = this.id.replace('on', '').replace('_off', '');
|
||||||
|
|
||||||
var xhr = new XMLHttpRequest();
|
var xhr = new XMLHttpRequest();
|
||||||
xhr.open('GET', 'http://{{IP_ADDRESS}}/?on' + id + '=false&transition=' + document.getElementById('transition').value, true);
|
xhr.open('GET', 'http://{{IP_ADDRESS}}/?on' + id + '=false&transition=' + document.getElementById('transition').value, true);
|
||||||
|
|
||||||
xhr.send();
|
xhr.send();
|
||||||
updateLightState();
|
updateLightState();
|
||||||
this.classList.add('pure-button-primary');
|
this.classList.add('pure-button-primary');
|
||||||
document.getElementById('on'+id+'_on').classList.remove('pure-button-primary');
|
document.getElementById('on'+id+'_on').classList.remove('pure-button-primary');
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
var links = document.querySelectorAll('[id^="on"][id$="_on"]');
|
var links = document.querySelectorAll('[id^="on"][id$="_on"]');
|
||||||
|
|
||||||
links.forEach(function(link) {
|
links.forEach(function(link) {
|
||||||
link.addEventListener('click', function(event) {
|
link.addEventListener('click', function(event) {
|
||||||
|
|
||||||
event.preventDefault();
|
event.preventDefault();
|
||||||
|
|
||||||
var id = this.id.replace('on', '').replace('_on', '');
|
var id = this.id.replace('on', '').replace('_on', '');
|
||||||
|
|
||||||
var xhr = new XMLHttpRequest();
|
var xhr = new XMLHttpRequest();
|
||||||
xhr.open('GET', 'http://{{IP_ADDRESS}}/?on' + id + '=true&transition=' + document.getElementById('transition').value, true);
|
xhr.open('GET', 'http://{{IP_ADDRESS}}/?on' + id + '=true&transition=' + document.getElementById('transition').value, true);
|
||||||
|
|
||||||
xhr.send();
|
xhr.send();
|
||||||
updateLightState();
|
updateLightState();
|
||||||
this.classList.add('pure-button-primary');
|
this.classList.add('pure-button-primary');
|
||||||
document.getElementById('on'+id+'_off').classList.remove('pure-button-primary');
|
document.getElementById('on'+id+'_off').classList.remove('pure-button-primary');
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
var xhr = new XMLHttpRequest();
|
||||||
|
xhr.open('GET', 'http://{{IP_ADDRESS}}/tc_data_edit');
|
||||||
|
xhr.onload = function() {
|
||||||
|
if (xhr.status === 200) {
|
||||||
|
document.getElementById('tc-edit-container').innerHTML = xhr.responseText;
|
||||||
|
} else {
|
||||||
|
console.log('Fehler beim Laden der URL: ' + xhr.status);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
xhr.send();
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</fieldset>
|
</fieldset>
|
||||||
</body>
|
</body>
|
||||||
|
|
|
@ -6,7 +6,3 @@
|
||||||
</tr>
|
</tr>
|
||||||
</table>
|
</table>
|
||||||
</div><!-- end of lights control tab -->
|
</div><!-- end of lights control tab -->
|
||||||
|
|
||||||
<div id="tab-tde"> <!-- timing editor -->
|
|
||||||
Not implemented yet.
|
|
||||||
</div>
|
|
||||||
|
|
|
@ -82,7 +82,6 @@ document.getElementById('tc_off').classList.add('pure-button-primary');
|
||||||
document.getElementById('tc_on').classList.remove('pure-button-primary');
|
document.getElementById('tc_on').classList.remove('pure-button-primary');
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
let timeoutId;
|
let timeoutId;
|
||||||
function sendSliderValue(x) {
|
function sendSliderValue(x) {
|
||||||
x = x - 1;
|
x = x - 1;
|
||||||
|
@ -105,4 +104,3 @@ console.error(`Error sending slider value to ${url}: ${error}`);
|
||||||
<table border=0>
|
<table border=0>
|
||||||
<tr>
|
<tr>
|
||||||
<td>
|
<td>
|
||||||
|
|
||||||
|
|
184
firmware/data/tc_data_edit.html
Normal file
184
firmware/data/tc_data_edit.html
Normal file
|
@ -0,0 +1,184 @@
|
||||||
|
<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>
|
|
@ -472,13 +472,28 @@ void init_webserver()
|
||||||
server.send(200, "text/plain", output);
|
server.send(200, "text/plain", output);
|
||||||
});
|
});
|
||||||
|
|
||||||
server.on("/tc_data_blocks", []()
|
server.on("/tc_data_blocks_read", []()
|
||||||
{
|
{
|
||||||
String output = tc_getJsonData();
|
String output = tc_getJsonData();
|
||||||
|
|
||||||
server.send(200, "application/json", output);
|
server.send(200, "application/json", output);
|
||||||
});
|
});
|
||||||
|
|
||||||
|
server.on("/tc_data_blocks_store", []()
|
||||||
|
{
|
||||||
|
if (server.hasArg("data"))
|
||||||
|
{
|
||||||
|
String jsonData = server.arg("data");
|
||||||
|
tc_jsonDataBlocksToEEPROM(jsonData);
|
||||||
|
server.send(200, "text/html", "tcdata saved");
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
server.on("/tc_data_edit", []()
|
||||||
|
{
|
||||||
|
server.send(200, "text/html", genTCEditHTML());
|
||||||
|
});
|
||||||
|
|
||||||
server.on("/", []()
|
server.on("/", []()
|
||||||
{
|
{
|
||||||
|
|
||||||
|
@ -703,6 +718,11 @@ String genConfigHTML()
|
||||||
return replacePlaceholder(getConfigHTML());
|
return replacePlaceholder(getConfigHTML());
|
||||||
}
|
}
|
||||||
|
|
||||||
|
String genTCEditHTML()
|
||||||
|
{
|
||||||
|
return replacePlaceholder(getTCDataEditHTML());
|
||||||
|
}
|
||||||
|
|
||||||
String genLightControlHTML()
|
String genLightControlHTML()
|
||||||
{
|
{
|
||||||
String http_content = "";
|
String http_content = "";
|
||||||
|
@ -868,6 +888,14 @@ String getConfigHTML()
|
||||||
|
|
||||||
//********************************//
|
//********************************//
|
||||||
|
|
||||||
|
String getTCDataEditHTML()
|
||||||
|
{
|
||||||
|
// load file
|
||||||
|
return loadSPIFFSFile("/tc_data_edit.html");
|
||||||
|
}
|
||||||
|
|
||||||
|
//********************************//
|
||||||
|
|
||||||
String getLightControlHTML()
|
String getLightControlHTML()
|
||||||
{
|
{
|
||||||
// load file
|
// load file
|
||||||
|
|
|
@ -1,47 +1,60 @@
|
||||||
<!-- bottom -->
|
<!-- bottom -->
|
||||||
|
<div id="tab-tde" class=""> <!-- timing editor -->
|
||||||
|
<div id="tc-edit-container" class=""></div>
|
||||||
|
</div> <!-- end of tab-tde -->
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
var tabMain = document.getElementById("tab-lights");
|
function addTabListener() {
|
||||||
var tabConfig = document.getElementById("tab-config");
|
try {
|
||||||
var tabTDE = document.getElementById("tab-tde");
|
var tabMain = document.getElementById("tab-lights");
|
||||||
|
var tabConfig = document.getElementById("tab-config");
|
||||||
|
var tabTDE = document.getElementById("tab-tde");
|
||||||
|
|
||||||
var amain = document.getElementById("tab-a-lights");
|
var amain = document.getElementById("tab-a-lights");
|
||||||
var acfg = document.getElementById("tab-a-config");
|
var acfg = document.getElementById("tab-a-config");
|
||||||
var atde = document.getElementById("tab-a-tde");
|
var atde = document.getElementById("tab-a-tde");
|
||||||
|
|
||||||
|
|
||||||
document.getElementById("tab-a-lights").addEventListener("click", function() {
|
amain.addEventListener("click", function() {
|
||||||
tabMain.classList.add("visible");
|
tabMain.classList.add("visible");
|
||||||
tabConfig.classList.remove("visible");
|
tabConfig.classList.remove("visible");
|
||||||
tabTDE.classList.remove("visible");
|
tabTDE.classList.remove("visible");
|
||||||
|
|
||||||
amain.classList.add("pure-button-primary");
|
amain.classList.add("pure-button-primary");
|
||||||
acfg.classList.remove("pure-button-primary");
|
acfg.classList.remove("pure-button-primary");
|
||||||
atde.classList.remove("pure-button-primary");
|
atde.classList.remove("pure-button-primary");
|
||||||
});
|
});
|
||||||
|
|
||||||
document.getElementById("tab-a-config").addEventListener("click", function() {
|
acfg.addEventListener("click", function() {
|
||||||
tabMain.classList.remove("visible");
|
tabMain.classList.remove("visible");
|
||||||
tabConfig.classList.add("visible");
|
tabConfig.classList.add("visible");
|
||||||
tabTDE.classList.remove("visible");
|
tabTDE.classList.remove("visible");
|
||||||
|
|
||||||
amain.classList.remove("pure-button-primary");
|
amain.classList.remove("pure-button-primary");
|
||||||
acfg.classList.add("pure-button-primary");
|
acfg.classList.add("pure-button-primary");
|
||||||
atde.classList.remove("pure-button-primary");
|
atde.classList.remove("pure-button-primary");
|
||||||
});
|
});
|
||||||
|
|
||||||
document.getElementById("tab-a-tde").addEventListener("click", function() {
|
atde.addEventListener("click", function() {
|
||||||
tabMain.classList.remove("visible");
|
tabMain.classList.remove("visible");
|
||||||
tabConfig.classList.remove("visible");
|
tabConfig.classList.remove("visible");
|
||||||
tabTDE.classList.add("visible");
|
tabTDE.classList.add("visible");
|
||||||
|
|
||||||
amain.classList.remove("pure-button-primary");
|
amain.classList.remove("pure-button-primary");
|
||||||
acfg.classList.remove("pure-button-primary");
|
acfg.classList.remove("pure-button-primary");
|
||||||
atde.classList.add("pure-button-primary");
|
atde.classList.add("pure-button-primary");
|
||||||
|
});
|
||||||
|
} catch (error) {
|
||||||
|
console.log("Fehler in load listener of the tab action listener management: " + error.message);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
window.addEventListener('load', function() {
|
||||||
|
addTabListener();
|
||||||
});
|
});
|
||||||
|
|
||||||
function loadGraphData() {
|
function loadGraphData() {
|
||||||
console.log('----> generate graph <----');
|
console.log('----> generate graph <----');
|
||||||
$.getJSON('/tc_data_blocks', function(data) {
|
$.getJSON('/tc_data_blocks_read', function(data) {
|
||||||
var currenttime = [];
|
var currenttime = [];
|
||||||
var time = [];
|
var time = [];
|
||||||
var channel1 = [];
|
var channel1 = [];
|
||||||
|
@ -246,6 +259,25 @@
|
||||||
document.getElementById('on'+id+'_off').classList.remove('pure-button-primary');
|
document.getElementById('on'+id+'_off').classList.remove('pure-button-primary');
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
|
// Erstellen einer neuen XMLHttpRequest-Instanz
|
||||||
|
var xhr = new XMLHttpRequest();
|
||||||
|
// Angeben der URL und des HTTP-Request-Typs
|
||||||
|
xhr.open('GET', 'http://{{IP_ADDRESS}}/tc_data_edit');
|
||||||
|
// Festlegen der Funktion, die aufgerufen wird, wenn die Anfrage abgeschlossen ist
|
||||||
|
xhr.onload = function() {
|
||||||
|
// Überprüfen, ob die Anfrage erfolgreich war
|
||||||
|
if (xhr.status === 200) {
|
||||||
|
// Fügen Sie den empfangenen HTML-Code in den Container ein
|
||||||
|
document.getElementById('tc-edit-container').innerHTML = xhr.responseText;
|
||||||
|
} else {
|
||||||
|
// Wenn die Anfrage fehlgeschlagen ist, geben Sie einen Fehler aus
|
||||||
|
console.log('Fehler beim Laden der URL: ' + xhr.status);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
// Senden der Anfrage
|
||||||
|
xhr.send();
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -6,7 +6,3 @@
|
||||||
</tr>
|
</tr>
|
||||||
</table>
|
</table>
|
||||||
</div><!-- end of lights control tab -->
|
</div><!-- end of lights control tab -->
|
||||||
|
|
||||||
<div id="tab-tde"> <!-- timing editor -->
|
|
||||||
Not implemented yet.
|
|
||||||
</div>
|
|
||||||
|
|
227
firmware/html/tc_data_edit.html
Normal file
227
firmware/html/tc_data_edit.html
Normal file
|
@ -0,0 +1,227 @@
|
||||||
|
<br>
|
||||||
|
<div id="tc-edit-plotly-graph"></div>
|
||||||
|
<a href="#" onclick="sendTCData()" class="pure-button">Daten senden</a>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
// Variablen für die Datenpunkte des Graphen
|
||||||
|
var dataPoints = [];
|
||||||
|
for (var i = 0; i < 10; i++) {
|
||||||
|
var xValue = i * 2;
|
||||||
|
dataPoints.push({ x: xValue, y: [0, 0, 0, 0] });
|
||||||
|
}
|
||||||
|
|
||||||
|
// Optionen für den Graphen
|
||||||
|
var options = {
|
||||||
|
title: {
|
||||||
|
text: "Graph Title"
|
||||||
|
},
|
||||||
|
data: [{
|
||||||
|
type: "line",
|
||||||
|
dataPoints: dataPoints
|
||||||
|
}]
|
||||||
|
};
|
||||||
|
|
||||||
|
// ID-Präfixe für die Eingabefelder
|
||||||
|
var inputIdPrefixes = ["hour", "minute", "ch1", "ch2", "ch3", "ch4"];
|
||||||
|
|
||||||
|
// Aktuelle Eingabefeld-Daten
|
||||||
|
var inputData = {
|
||||||
|
hour: [],
|
||||||
|
minute: [],
|
||||||
|
ch1: [],
|
||||||
|
ch2: [],
|
||||||
|
ch3: [],
|
||||||
|
ch4: []
|
||||||
|
};
|
||||||
|
|
||||||
|
// initialisiere Graph
|
||||||
|
var trace1 = {
|
||||||
|
x: [], // Uhrzeit
|
||||||
|
y: [], // Wert für ch1
|
||||||
|
mode: 'lines',
|
||||||
|
name: 'ch1'
|
||||||
|
};
|
||||||
|
var trace2 = {
|
||||||
|
x: [], // Uhrzeit
|
||||||
|
y: [], // Wert für ch2
|
||||||
|
mode: 'lines',
|
||||||
|
name: 'ch2'
|
||||||
|
};
|
||||||
|
var trace3 = {
|
||||||
|
x: [], // Uhrzeit
|
||||||
|
y: [], // Wert für ch3
|
||||||
|
mode: 'lines',
|
||||||
|
name: 'ch3'
|
||||||
|
};
|
||||||
|
var trace4 = {
|
||||||
|
x: [], // Uhrzeit
|
||||||
|
y: [], // Wert für ch4
|
||||||
|
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);
|
||||||
|
|
||||||
|
// initialisiere Graph
|
||||||
|
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});
|
||||||
|
|
||||||
|
// initialisiere Graph
|
||||||
|
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);
|
||||||
|
|
||||||
|
// initialisiere Graph
|
||||||
|
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);
|
||||||
|
|
||||||
|
// Funktion zum Aktualisieren der Daten
|
||||||
|
function updateData() {
|
||||||
|
// Schleife über alle Eingabefelder für die Uhrzeit
|
||||||
|
for (let i = 0; i < 10; i++) {
|
||||||
|
// Uhrzeit aus den Eingabefeldern auslesen
|
||||||
|
let hour = document.getElementById(`hour-${i}`).value;
|
||||||
|
let minute = document.getElementById(`minute-${i}`).value;
|
||||||
|
|
||||||
|
// Schleife über alle Eingabefelder für die Kanäle
|
||||||
|
for (let j = 1; j <= 4; j++) {
|
||||||
|
// Wert aus dem Eingabefeld auslesen
|
||||||
|
let value = parseFloat(document.getElementById(`ch${j}-${i}`).value);
|
||||||
|
|
||||||
|
// Datenpunkt aktualisieren
|
||||||
|
let index = i * 4 + (j - 1);
|
||||||
|
data[index].x = `${hour}:${minute}`;
|
||||||
|
data[index].y = value;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Daten im Graph aktualisieren
|
||||||
|
Plotly.update('graph', data, layout);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Event-Listener für alle Eingabefelder registrieren
|
||||||
|
for (let i = 0; i < 10; i++) {
|
||||||
|
// Uhrzeit-Eingabefelder
|
||||||
|
document.getElementById(`hour-${i}`).addEventListener('input', updateData);
|
||||||
|
document.getElementById(`minute-${i}`).addEventListener('input', updateData);
|
||||||
|
|
||||||
|
// Kanal-Eingabefelder
|
||||||
|
for (let j = 1; j <= 4; j++) {
|
||||||
|
document.getElementById(`ch${j}-${i}`).addEventListener('input', updateData);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function sendTCData() {
|
||||||
|
// Sammle Daten aus Eingabefeldern
|
||||||
|
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 });
|
||||||
|
}
|
||||||
|
|
||||||
|
// Codiere Daten als JSON und URL-encode
|
||||||
|
var jsonData = encodeURIComponent(JSON.stringify(data));
|
||||||
|
|
||||||
|
// Sende Daten an Server
|
||||||
|
var xhr = new XMLHttpRequest();
|
||||||
|
xhr.open("POST", "http://{{IP_ADDRESS}}}}/tc_data_block_store?data=" + jsonData);
|
||||||
|
xhr.send();
|
||||||
|
}
|
||||||
|
|
||||||
|
</script>
|
|
@ -371,7 +371,7 @@ bool tc_check_no_data_block()
|
||||||
uint8_t e = EEPROM.read(EEPROM_TIMING_DATA_ADDRESS);
|
uint8_t e = EEPROM.read(EEPROM_TIMING_DATA_ADDRESS);
|
||||||
//Serial.println(e);
|
//Serial.println(e);
|
||||||
|
|
||||||
if (e == 255)
|
if (e > 23) // the maximum value for tis memory section is 23
|
||||||
{
|
{
|
||||||
return true;
|
return true;
|
||||||
}
|
}
|
||||||
|
@ -416,12 +416,60 @@ void tc_jsonDataBlocksToEEPROM(String json_data_string)
|
||||||
for (uint8_t i = 0; i < NUMBER_OF_TIMER_DATA_BLOCKS; i++)
|
for (uint8_t i = 0; i < NUMBER_OF_TIMER_DATA_BLOCKS; i++)
|
||||||
{
|
{
|
||||||
JsonObject obj = doc[i];
|
JsonObject obj = doc[i];
|
||||||
tc_data[i].hh = obj["hour"];
|
|
||||||
tc_data[i].mm = obj["min"];
|
// Check and set the limits of the hour value
|
||||||
tc_data[i].ch1 = obj["ch1"];
|
int hour = obj["hour"];
|
||||||
tc_data[i].ch2 = obj["ch2"];
|
if (hour < 0) {
|
||||||
tc_data[i].ch3 = obj["ch3"];
|
hour = 0;
|
||||||
tc_data[i].ch4 = obj["ch4"];
|
} else if (hour > 23) {
|
||||||
|
hour = 23;
|
||||||
|
}
|
||||||
|
tc_data[i].hh = hour;
|
||||||
|
|
||||||
|
// Check and set the limits of the minute value
|
||||||
|
int minute = obj["min"];
|
||||||
|
if (minute < 0) {
|
||||||
|
minute = 0;
|
||||||
|
} else if (minute > 59) {
|
||||||
|
minute = 59;
|
||||||
|
}
|
||||||
|
tc_data[i].mm = minute;
|
||||||
|
|
||||||
|
// Check and set the limits of the ch1 value
|
||||||
|
int ch1 = obj["ch1"];
|
||||||
|
if (ch1 < 0) {
|
||||||
|
ch1 = 0;
|
||||||
|
} else if (ch1 > 255) {
|
||||||
|
ch1 = 255;
|
||||||
|
}
|
||||||
|
tc_data[i].ch1 = ch1;
|
||||||
|
|
||||||
|
// Check and set the limits of the ch2 value
|
||||||
|
int ch2 = obj["ch2"];
|
||||||
|
if (ch2 < 0) {
|
||||||
|
ch2 = 0;
|
||||||
|
} else if (ch2 > 255) {
|
||||||
|
ch2 = 255;
|
||||||
|
}
|
||||||
|
tc_data[i].ch2 = ch2;
|
||||||
|
|
||||||
|
// Check and set the limits of the ch3 value
|
||||||
|
int ch3 = obj["ch3"];
|
||||||
|
if (ch3 < 0) {
|
||||||
|
ch3 = 0;
|
||||||
|
} else if (ch3 > 255) {
|
||||||
|
ch3 = 255;
|
||||||
|
}
|
||||||
|
tc_data[i].ch3 = ch3;
|
||||||
|
|
||||||
|
// Check and set the limits of the ch4 value
|
||||||
|
int ch4 = obj["ch4"];
|
||||||
|
if (ch4 < 0) {
|
||||||
|
ch4 = 0;
|
||||||
|
} else if (ch4 > 255) {
|
||||||
|
ch4 = 255;
|
||||||
|
}
|
||||||
|
tc_data[i].ch4 = ch4;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Write the tc_data array to the EEPROM
|
// Write the tc_data array to the EEPROM
|
||||||
|
|
|
@ -1,4 +1,10 @@
|
||||||
#!/bin/bash
|
#!/bin/bash
|
||||||
|
|
||||||
cat $1 | sed -e"s/^ *//ig" | sed -e "s/^\/\/.*//ig" | sed -e "s/ \/\/ .*//ig" | sed -E '/^\s*$/d' | sed '/^[[:space:]]*$/d'
|
# Remove leading whitespace and comments starting with //
|
||||||
|
sed -e 's/^[[:space:]]*//' -e '/^\/\/.*/d' $1 |
|
||||||
|
# Remove one line comments starting with //
|
||||||
|
sed -e 's/^\/\/.*$//' |
|
||||||
|
# Remove trailing comments starting with //
|
||||||
|
sed -e 's/ \/\/.*$//' |
|
||||||
|
# Remove empty lines
|
||||||
|
sed '/^\s*$/d'
|
||||||
|
|
Loading…
Reference in a new issue