Compare commits

..

3 commits

Author SHA1 Message Date
Kai Lauterbach
99c0c4a6b5 Added git ignore file 2023-05-05 10:16:52 +02:00
Kai Lauterbach
2f7ce5019b Disabled console logging. 2023-05-05 10:16:52 +02:00
Kai Lauterbach
94a347d3d0 Extracted the javascript code to separate files. Added a initial table for configuring the tc data blocks.
Extracted the css styles into a separate file.
2023-05-05 10:16:30 +02:00
11 changed files with 141 additions and 70 deletions

1
.gitignore vendored
View file

@ -1 +1,2 @@
.DS_store .DS_store
.vscode/c_cpp_properties.json

View file

@ -32,7 +32,7 @@ atde.classList.add("pure-button-primary");
createTable(); createTable();
}); });
} catch (error) { } catch (error) {
console.log("Fehler in load listener of the tab action listener management: " + error.message); console.log("Error: load listener of the tab action listener management: " + error.message);
} }
} }
window.addEventListener('load', function() { window.addEventListener('load', function() {
@ -56,14 +56,12 @@ channel4.push(data['tcdata'][i]['ch4']);
} }
currenttime.push(data['currenttime']['hour']); currenttime.push(data['currenttime']['hour']);
currenttime.push(data['currenttime']['min']); currenttime.push(data['currenttime']['min']);
console.log(currenttime);
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) {
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++) {
console.log(time[i] + ' <= ' + currentTimeStr + ' >= ' + time[i + 1]);
const currentDate = new Date(); const currentDate = new Date();
const year = currentDate.getFullYear(); const year = currentDate.getFullYear();
const month = (currentDate.getMonth() + 1).toString().padStart(2, '0'); const month = (currentDate.getMonth() + 1).toString().padStart(2, '0');
@ -72,22 +70,17 @@ const dateString = `${year}-${month}-${day}`;
const start = moment(dateString + ' ' + time[i], 'YYYY-MM-DD HH:mm'); const start = moment(dateString + ' ' + time[i], 'YYYY-MM-DD HH:mm');
const curr = moment(dateString + ' ' + currentTimeStr, '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'); 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)) { if (curr.isBetween(start, end)) {
lowerIndex = i; lowerIndex = i;
upperIndex = i + 1; upperIndex = i + 1;
break; break;
} }
} }
console.log('lowerIndex=' + lowerIndex);
console.log('upperIndex=' + upperIndex);
if (lowerIndex === -1 || upperIndex === -1) { if (lowerIndex === -1 || upperIndex === -1) {
console.log("Error: Current time not found in time array and not between two elements in time array."); console.log("Error: Current time not found in time array and not between two elements in time array. Fixing it...");
lowerIndex = 0; lowerIndex = 0;
upperIndex = 1; upperIndex = 1;
var tmp1 = time[0].split(':'); var tmp1 = time[0].split(':');
console.log('tmp1 = ' + tmp1);
currenttime[0] = tmp1[0]; currenttime[0] = tmp1[0];
currenttime[1] = tmp1[1]; currenttime[1] = tmp1[1];
} }
@ -95,15 +88,11 @@ var lowerTime = time[lowerIndex].split(":");
var upperTime = time[upperIndex].split(":"); var upperTime = time[upperIndex].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 = lowerIndex + timeDiff / ((upperTime[0] - lowerTime[0]) + ((upperTime[1] - lowerTime[1]) / 60)); var indexFloat = lowerIndex + timeDiff / ((upperTime[0] - lowerTime[0]) + ((upperTime[1] - lowerTime[1]) / 60));
console.log("Index (float): " + indexFloat);
} else { } else {
console.log("Index (integer): " + index);
console.log("Index (float): " + index);
} }
if (indexFloat > index) { if (indexFloat > index) {
index = indexFloat; index = indexFloat;
} }
console.log("index in graph >>>" + index);
var trace1 = { var trace1 = {
x: time, x: time,
y: channel1, y: channel1,
@ -171,7 +160,6 @@ const onLinkOn = document.getElementById(`on${i - 1}_on`);
const onLinkOff = document.getElementById(`on${i - 1}_off`); const onLinkOff = document.getElementById(`on${i - 1}_off`);
briSlider.value = data.bri; briSlider.value = data.bri;
briSliderVal.innerHTML = (Math.round((data.bri * 100.0 / 255.0) * 100) / 100).toFixed(2); briSliderVal.innerHTML = (Math.round((data.bri * 100.0 / 255.0) * 100) / 100).toFixed(2);
console.log('data.on ' + i + ' = ' + data.on);
if (data.on == true) { if (data.on == true) {
onLinkOn.classList.add('pure-button-primary'); onLinkOn.classList.add('pure-button-primary');
onLinkOff.classList.remove('pure-button-primary'); onLinkOff.classList.remove('pure-button-primary');
@ -194,7 +182,6 @@ if (pwmElement) {
const url = `http://{{IP_ADDRESS}}/state?light=${lightID}`; const url = `http://{{IP_ADDRESS}}/state?light=${lightID}`;
fetch(url).then(response => response.json()).then(data => { fetch(url).then(response => response.json()).then(data => {
const pwmValue = ((Math.round((data.curpwm - ((data.curpwm >= {{PWM_MIN}}) ? {{PWM_MIN}} : 0)) / {{PWM_MAX}} * 10000) / 100).toFixed(2)); const pwmValue = ((Math.round((data.curpwm - ((data.curpwm >= {{PWM_MIN}}) ? {{PWM_MIN}} : 0)) / {{PWM_MAX}} * 10000) / 100).toFixed(2));
console.log('curpwm[' + i + '] = ' + data.curpwm + ' = ' + pwmValue);
pwmElement.innerText = pwmValue.toString(); pwmElement.innerText = pwmValue.toString();
pwmElement.value = pwmValue; pwmElement.value = pwmValue;
pwmElementTxt.innerText = pwmValue.toString(); pwmElementTxt.innerText = pwmValue.toString();
@ -271,7 +258,9 @@ contentRow.appendChild(channelCell);
table.appendChild(contentRow); table.appendChild(contentRow);
} }
var button = document.createElement("button"); var button = document.createElement("button");
button.innerHTML = "Export als JSON"; button.innerHTML = "Save";
button.classList.add("pure-button");
button.classList.add("pure-button-primary");
button.onclick = function() { button.onclick = function() {
var data = []; var data = [];
var rows = table.getElementsByTagName("tr"); var rows = table.getElementsByTagName("tr");
@ -294,6 +283,7 @@ xhr.send();
}; };
var container = document.getElementById("table-container"); var container = document.getElementById("table-container");
container.innerHTML = ""; container.innerHTML = "";
container.classList.add("pure-form");
container.appendChild(table); container.appendChild(table);
container.appendChild(button); container.appendChild(button);
} }

View file

@ -9,22 +9,7 @@
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/purecss@0.6.2/build/pure-min.css"> <link rel="stylesheet" href="https://unpkg.com/purecss@0.6.2/build/pure-min.css">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<style> <style src="http://{{IP_ADDRESS}}'/css">
#tab-lights, #tab-config, #tab-tde {
display: none;
background-color: #ffffff;
color: black;
font-weight: bold;
}
#tab-lights.visible {
display: block;
}
#tab-config.visible {
display: block;
}
#tab-tde.visible {
display: block;
}
</style> </style>
</head> </head>
<body> <body>

52
firmware/data/style.css Normal file
View file

@ -0,0 +1,52 @@
#tab-lights, #tab-config, #tab-tde {
display: none;
background-color: #ffffff;
color: black;
font-weight: bold;
}
#tab-lights.visible {
display: block;
}
#tab-config.visible {
display: block;
}
#tab-tde.visible {
display: block;
}
/* CSS-Regeln für die Tabellenzellen */
.pure-table td {
padding: 4px;
}
/* CSS-Regeln für die Eingabefelder */
.pure-form input[type="number"] {
width: 60px;
height: 20px;
border-radius: 3px;
border: 1px solid #ccc;
}
/* CSS-Regeln für die Auswahllisten */
.pure-form select {
width: 80px;
height: 26px;
border-radius: 3px;
border: 1px solid #ccc;
background-color: #fff;
}
/* CSS-Regeln für den Export-Button */
.pure-button {
background-color: #5a5a5a;
color: #fff;
border-radius: 3px;
border: none;
padding: 8px 12px;
font-size: 14px;
cursor: pointer;
}
.pure-button:hover {
background-color: #333;
}

View file

@ -5,7 +5,6 @@ event.preventDefault();
var xhr = new XMLHttpRequest(); var xhr = new XMLHttpRequest();
xhr.open('GET', 'http://{{IP_ADDRESS}}/?tc=true', true); xhr.open('GET', 'http://{{IP_ADDRESS}}/?tc=true', true);
xhr.send(); xhr.send();
console.log('tc=true call');
document.getElementById('tc_on').classList.add('pure-button-primary'); document.getElementById('tc_on').classList.add('pure-button-primary');
document.getElementById('tc_off').classList.remove('pure-button-primary'); document.getElementById('tc_off').classList.remove('pure-button-primary');
}); });
@ -17,7 +16,6 @@ event.preventDefault();
var xhr = new XMLHttpRequest(); var xhr = new XMLHttpRequest();
xhr.open('GET', 'http://{{IP_ADDRESS}}/?tc=false', true); xhr.open('GET', 'http://{{IP_ADDRESS}}/?tc=false', true);
xhr.send(); xhr.send();
console.log('tc=false call');
document.getElementById('tc_off').classList.add('pure-button-primary'); 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');
}); });
@ -33,7 +31,6 @@ fetch(url).then(response => {
if (!response.ok) { if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`); throw new Error(`HTTP error! status: ${response.status}`);
} }
console.log(`Sent slider value ${value} to ${url}`);
}).catch(error => { }).catch(error => {
console.error(`Error sending slider value to ${url}: ${error}`); console.error(`Error sending slider value to ${url}: ${error}`);
}); });

View file

@ -499,6 +499,11 @@ void init_webserver()
server.send(200, "text/html", replacePlaceholder(loadSPIFFSFile("/bottom.js"))); server.send(200, "text/html", replacePlaceholder(loadSPIFFSFile("/bottom.js")));
}); });
server.on("/css", []()
{
server.send(200, "text/html", loadSPIFFSFile("/style.css"));
});
server.on("/", []() server.on("/", []()
{ {

View file

@ -41,7 +41,7 @@ function addTabListener() {
createTable(); createTable();
}); });
} catch (error) { } catch (error) {
console.log("Fehler in load listener of the tab action listener management: " + error.message); console.log("Error: load listener of the tab action listener management: " + error.message);
} }
} }
window.addEventListener('load', function() { window.addEventListener('load', function() {
@ -66,14 +66,14 @@ function loadGraphData() {
} }
currenttime.push(data['currenttime']['hour']); currenttime.push(data['currenttime']['hour']);
currenttime.push(data['currenttime']['min']); currenttime.push(data['currenttime']['min']);
console.log(currenttime); //console.log(currenttime);
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) {
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++) {
console.log(time[i] + ' <= ' + currentTimeStr + ' >= ' + time[i + 1]); //console.log(time[i] + ' <= ' + currentTimeStr + ' >= ' + time[i + 1]);
const currentDate = new Date(); const currentDate = new Date();
const year = currentDate.getFullYear(); const year = currentDate.getFullYear();
const month = (currentDate.getMonth() + 1).toString().padStart(2, '0'); const month = (currentDate.getMonth() + 1).toString().padStart(2, '0');
@ -82,22 +82,22 @@ function loadGraphData() {
const start = moment(dateString + ' ' + time[i], 'YYYY-MM-DD HH:mm'); const start = moment(dateString + ' ' + time[i], 'YYYY-MM-DD HH:mm');
const curr = moment(dateString + ' ' + currentTimeStr, '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'); 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(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)); //console.log(curr.isBetween(start, end));
if (curr.isBetween(start, end)) { if (curr.isBetween(start, end)) {
lowerIndex = i; lowerIndex = i;
upperIndex = i + 1; upperIndex = i + 1;
break; break;
} }
} }
console.log('lowerIndex=' + lowerIndex); //console.log('lowerIndex=' + lowerIndex);
console.log('upperIndex=' + upperIndex); //console.log('upperIndex=' + upperIndex);
if (lowerIndex === -1 || upperIndex === -1) { if (lowerIndex === -1 || upperIndex === -1) {
console.log("Error: Current time not found in time array and not between two elements in time array."); console.log("Error: Current time not found in time array and not between two elements in time array. Fixing it...");
lowerIndex = 0; lowerIndex = 0;
upperIndex = 1; upperIndex = 1;
var tmp1 = time[0].split(':'); var tmp1 = time[0].split(':');
console.log('tmp1 = ' + tmp1); //console.log('tmp1 = ' + tmp1);
currenttime[0] = tmp1[0]; currenttime[0] = tmp1[0];
currenttime[1] = tmp1[1]; currenttime[1] = tmp1[1];
} }
@ -105,15 +105,15 @@ function loadGraphData() {
var upperTime = time[upperIndex].split(":"); var upperTime = time[upperIndex].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 = lowerIndex + timeDiff / ((upperTime[0] - lowerTime[0]) + ((upperTime[1] - lowerTime[1]) / 60)); var indexFloat = lowerIndex + timeDiff / ((upperTime[0] - lowerTime[0]) + ((upperTime[1] - lowerTime[1]) / 60));
console.log("Index (float): " + indexFloat); //console.log("Index (float): " + indexFloat);
} else { } else {
console.log("Index (integer): " + index); //console.log("Index (integer): " + index);
console.log("Index (float): " + index); //console.log("Index (float): " + index);
} }
if (indexFloat > index) { if (indexFloat > index) {
index = indexFloat; index = indexFloat;
} }
console.log("index in graph >>>" + index); //console.log("index in graph >>>" + index);
var trace1 = { var trace1 = {
x: time, x: time,
y: channel1, y: channel1,
@ -182,7 +182,7 @@ function updateLightState() {
const onLinkOff = document.getElementById(`on${i - 1}_off`); const onLinkOff = document.getElementById(`on${i - 1}_off`);
briSlider.value = data.bri; briSlider.value = data.bri;
briSliderVal.innerHTML = (Math.round((data.bri * 100.0 / 255.0) * 100) / 100).toFixed(2); briSliderVal.innerHTML = (Math.round((data.bri * 100.0 / 255.0) * 100) / 100).toFixed(2);
console.log('data.on ' + i + ' = ' + data.on); //console.log('data.on ' + i + ' = ' + data.on);
if (data.on == true) { if (data.on == true) {
onLinkOn.classList.add('pure-button-primary'); onLinkOn.classList.add('pure-button-primary');
onLinkOff.classList.remove('pure-button-primary'); onLinkOff.classList.remove('pure-button-primary');
@ -206,7 +206,7 @@ function updatePWMValues() {
const url = `http://{{IP_ADDRESS}}/state?light=${lightID}`; const url = `http://{{IP_ADDRESS}}/state?light=${lightID}`;
fetch(url).then(response => response.json()).then(data => { fetch(url).then(response => response.json()).then(data => {
const pwmValue = ((Math.round((data.curpwm - ((data.curpwm >= {{PWM_MIN}}) ? {{PWM_MIN}} : 0)) / {{PWM_MAX}} * 10000) / 100).toFixed(2)); const pwmValue = ((Math.round((data.curpwm - ((data.curpwm >= {{PWM_MIN}}) ? {{PWM_MIN}} : 0)) / {{PWM_MAX}} * 10000) / 100).toFixed(2));
console.log('curpwm[' + i + '] = ' + data.curpwm + ' = ' + pwmValue); //console.log('curpwm[' + i + '] = ' + data.curpwm + ' = ' + pwmValue);
pwmElement.innerText = pwmValue.toString(); pwmElement.innerText = pwmValue.toString();
pwmElement.value = pwmValue; pwmElement.value = pwmValue;
pwmElementTxt.innerText = pwmValue.toString(); pwmElementTxt.innerText = pwmValue.toString();
@ -310,7 +310,9 @@ for (var row = 0; row < 10; row++) {
// Button // Button
var button = document.createElement("button"); var button = document.createElement("button");
button.innerHTML = "Export als JSON"; button.innerHTML = "Save";
button.classList.add("pure-button");
button.classList.add("pure-button-primary");
button.onclick = function() { button.onclick = function() {
var data = []; var data = [];
@ -339,6 +341,7 @@ button.onclick = function() {
var container = document.getElementById("table-container"); var container = document.getElementById("table-container");
container.innerHTML = ""; container.innerHTML = "";
container.classList.add("pure-form");
container.appendChild(table); container.appendChild(table);
container.appendChild(button); container.appendChild(button);
} }

View file

@ -9,22 +9,7 @@
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/purecss@0.6.2/build/pure-min.css"> <link rel="stylesheet" href="https://unpkg.com/purecss@0.6.2/build/pure-min.css">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<style> <style src="http://{{IP_ADDRESS}}'/css">
#tab-lights, #tab-config, #tab-tde {
display: none;
background-color: #ffffff;
color: black;
font-weight: bold;
}
#tab-lights.visible {
display: block;
}
#tab-config.visible {
display: block;
}
#tab-tde.visible {
display: block;
}
</style> </style>
</head> </head>
<body> <body>

52
firmware/html/style.css Normal file
View file

@ -0,0 +1,52 @@
#tab-lights, #tab-config, #tab-tde {
display: none;
background-color: #ffffff;
color: black;
font-weight: bold;
}
#tab-lights.visible {
display: block;
}
#tab-config.visible {
display: block;
}
#tab-tde.visible {
display: block;
}
/* CSS-Regeln für die Tabellenzellen */
.pure-table td {
padding: 4px;
}
/* CSS-Regeln für die Eingabefelder */
.pure-form input[type="number"] {
width: 60px;
height: 20px;
border-radius: 3px;
border: 1px solid #ccc;
}
/* CSS-Regeln für die Auswahllisten */
.pure-form select {
width: 80px;
height: 26px;
border-radius: 3px;
border: 1px solid #ccc;
background-color: #fff;
}
/* CSS-Regeln für den Export-Button */
.pure-button {
background-color: #5a5a5a;
color: #fff;
border-radius: 3px;
border: none;
padding: 8px 12px;
font-size: 14px;
cursor: pointer;
}
.pure-button:hover {
background-color: #333;
}

View file

@ -5,7 +5,7 @@ links.forEach(function(link) {
var xhr = new XMLHttpRequest(); var xhr = new XMLHttpRequest();
xhr.open('GET', 'http://{{IP_ADDRESS}}/?tc=true', true); xhr.open('GET', 'http://{{IP_ADDRESS}}/?tc=true', true);
xhr.send(); xhr.send();
console.log('tc=true call'); //console.log('tc=true call');
document.getElementById('tc_on').classList.add('pure-button-primary'); document.getElementById('tc_on').classList.add('pure-button-primary');
document.getElementById('tc_off').classList.remove('pure-button-primary'); document.getElementById('tc_off').classList.remove('pure-button-primary');
}); });
@ -17,7 +17,7 @@ links.forEach(function(link) {
var xhr = new XMLHttpRequest(); var xhr = new XMLHttpRequest();
xhr.open('GET', 'http://{{IP_ADDRESS}}/?tc=false', true); xhr.open('GET', 'http://{{IP_ADDRESS}}/?tc=false', true);
xhr.send(); xhr.send();
console.log('tc=false call'); //console.log('tc=false call');
document.getElementById('tc_off').classList.add('pure-button-primary'); 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');
}); });
@ -34,7 +34,7 @@ function sendSliderValue(x) {
if (!response.ok) { if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`); throw new Error(`HTTP error! status: ${response.status}`);
} }
console.log(`Sent slider value ${value} to ${url}`); //console.log(`Sent slider value ${value} to ${url}`);
}).catch(error => { }).catch(error => {
console.error(`Error sending slider value to ${url}: ${error}`); console.error(`Error sending slider value to ${url}: ${error}`);
}); });

View file

@ -7,3 +7,4 @@ bash ../../tools/html2string.sh ../html/config_template.html > config_template.h
bash ../../tools/html2string.sh ../html/light_control_template.html > light_control_template.html bash ../../tools/html2string.sh ../html/light_control_template.html > light_control_template.html
bash ../../tools/html2string.sh ../html/top.js > top.js bash ../../tools/html2string.sh ../html/top.js > top.js
bash ../../tools/html2string.sh ../html/bottom.js > bottom.js bash ../../tools/html2string.sh ../html/bottom.js > bottom.js
cp -av ../html/style.css .