Compare commits

..

No commits in common. "ec8072a1a6e98ce40d06cfff77e6c94655d6c094" and "33906a293044475c3f1b168140b8572f6edbf744" have entirely different histories.

8 changed files with 298 additions and 149 deletions

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2 MiB

After

Width:  |  Height:  |  Size: 2 MiB

View file

@ -310,21 +310,26 @@ pwmElementTxt.innerText = pwmValue.toString();
} }
updateLightStateAndPWMValues(); updateLightStateAndPWMValues();
setInterval(updateLightStateAndPWMValues, 5000); setInterval(updateLightStateAndPWMValues, 5000);
function handleOnRequest(id_full, id, value) { var links = document.querySelectorAll('[id^="on"][id$="_off"]');
var button = document.getElementById(id_full); links.forEach(function(link) {
link.addEventListener('click', function(event) {
event.preventDefault();
var id_full = this.id;
var id = this.id.replace('on', '').replace('_off', '');
var xhr = new XMLHttpRequest(); var xhr = new XMLHttpRequest();
xhr.open('GET', 'http://{{IP_ADDRESS}}/?on' + id + '=' + value + '&transition=' + document.getElementById('transition').value, true); xhr.open('GET', 'http://{{IP_ADDRESS}}/?on' + id + '=false&transition=' + document.getElementById('transition').value, true);
xhr.onreadystatechange = function () { xhr.onreadystatechange = function () {
if (xhr.readyState === 4) { if (xhr.readyState === 4) {
var button = document.getElementById(id_full);
if (xhr.status === 200) { if (xhr.status === 200) {
button.classList.remove("pure-button-primary"); button.classList.remove("pure-button-primary");
button.classList.add("success"); button.classList.add("success");
button.innerHTML = value ? "Enabled!" : "Disabled!"; button.innerHTML = "Disabled!";
button.style.backgroundColor = "green"; button.style.backgroundColor = "green";
setTimeout(function () { setTimeout(function () {
button.classList.remove("success"); button.classList.remove("success");
button.classList.add("pure-button-primary"); button.classList.add("pure-button-primary");
button.innerHTML = value ? "ON" : "OFF"; button.innerHTML = "OFF";
button.style.backgroundColor = ""; button.style.backgroundColor = "";
}, 2000); }, 2000);
console.log('Data successfully sent to server!'); console.log('Data successfully sent to server!');
@ -336,7 +341,7 @@ button.style.backgroundColor = "red";
setTimeout(function () { setTimeout(function () {
button.classList.remove("error"); button.classList.remove("error");
button.classList.add("pure-button-primary"); button.classList.add("pure-button-primary");
button.innerHTML = value ? "ON" : "OFF"; button.innerHTML = "OFF";
button.style.backgroundColor = ""; button.style.backgroundColor = "";
}, 2000); }, 2000);
showToast('Error while sending data to server.', 'error'); showToast('Error while sending data to server.', 'error');
@ -346,27 +351,54 @@ console.log('Error while sending data to server.');
}; };
xhr.send(); xhr.send();
updateLightStateAndPWMValues(); updateLightStateAndPWMValues();
document.getElementById(id_full).classList.add('pure-button-primary'); this.classList.add('pure-button-primary');
document.getElementById('on' + id + (value ? '_off' : '_on')).classList.remove('pure-button-primary'); document.getElementById('on'+id+'_on').classList.remove('pure-button-primary');
} });
function addOnButtonClickListener(id_full, id, value) { });
var link = document.getElementById(id_full); var links = document.querySelectorAll('[id^="on"][id$="_on"]');
link.addEventListener('click', function (event) { links.forEach(function(link) {
link.addEventListener('click', function(event) {
event.preventDefault(); event.preventDefault();
handleOnRequest(id_full, id, value); var id_full = this.id;
}); var id = this.id.replace('on', '').replace('_on', '');
var xhr = new XMLHttpRequest();
xhr.open('GET', 'http://{{IP_ADDRESS}}/?on' + id + '=true&transition=' + document.getElementById('transition').value, true);
xhr.onreadystatechange = function () {
if (xhr.readyState === 4) {
var button = document.getElementById(id_full);
if (xhr.status === 200) {
button.classList.remove("pure-button-primary");
button.classList.add("success");
button.innerHTML = "Enabled!";
button.style.backgroundColor = "green";
setTimeout(function () {
button.classList.remove("success");
button.classList.add("pure-button-primary");
button.innerHTML = "ON";
button.style.backgroundColor = "";
}, 2000);
console.log('Data successfully sent to server!');
} else {
button.classList.remove("pure-button-primary");
button.classList.add("error");
button.innerHTML = "Error!";
button.style.backgroundColor = "red";
setTimeout(function () {
button.classList.remove("error");
button.classList.add("pure-button-primary");
button.innerHTML = "ON";
button.style.backgroundColor = "";
}, 2000);
showToast('Error while sending data to server.', 'error');
console.log('Error while sending data to server.');
} }
var offLinks = document.querySelectorAll('[id^="on"][id$="_off"]'); }
offLinks.forEach(function (link) { };
var id_full = link.id; xhr.send();
var id = link.id.replace('on', '').replace('_off', ''); updateLightStateAndPWMValues();
addOnButtonClickListener(id_full, id, false); this.classList.add('pure-button-primary');
document.getElementById('on'+id+'_off').classList.remove('pure-button-primary');
}); });
var onLinks = document.querySelectorAll('[id^="on"][id$="_on"]');
onLinks.forEach(function (link) {
var id_full = link.id;
var id = link.id.replace('on', '').replace('_on', '');
addOnButtonClickListener(id_full, id, true);
}); });
function createTable() { function createTable() {
var table = document.createElement("table"); var table = document.createElement("table");

View file

@ -1,18 +1,21 @@
function handleRequest(id, url) { var links = document.querySelectorAll('[id^="tc_on"]');
var button = document.getElementById(id); links.forEach(function(link) {
link.addEventListener('click', function(event) {
event.preventDefault();
var xhr = new XMLHttpRequest(); var xhr = new XMLHttpRequest();
xhr.open('GET', url, true); xhr.open('GET', 'http://{{IP_ADDRESS}}/?tc=true', true);
xhr.onreadystatechange = function () { xhr.onreadystatechange = function () {
if (xhr.readyState === 4) { if (xhr.readyState === 4) {
var button = document.getElementById("tc_on");
if (xhr.status === 200) { if (xhr.status === 200) {
button.classList.remove("pure-button-primary"); button.classList.remove("pure-button-primary");
button.classList.add("success"); button.classList.add("success");
button.innerHTML = (id === 'tc_on') ? "Enabled!" : "Disabled!"; button.innerHTML = "Enabled!";
button.style.backgroundColor = "green"; button.style.backgroundColor = "green";
setTimeout(function () { setTimeout(function () {
button.classList.remove("success"); button.classList.remove("success");
button.classList.add("pure-button-primary"); button.classList.add("pure-button-primary");
button.innerHTML = (id === 'tc_on') ? "ON" : "OFF"; button.innerHTML = "ON";
button.style.backgroundColor = ""; button.style.backgroundColor = "";
}, 2000); }, 2000);
console.log('Data successfully sent to server!'); console.log('Data successfully sent to server!');
@ -24,7 +27,7 @@ button.style.backgroundColor = "";
setTimeout(function () { setTimeout(function () {
button.classList.remove("error"); button.classList.remove("error");
button.classList.add("pure-button-primary"); button.classList.add("pure-button-primary");
button.innerHTML = (id === 'tc_on') ? "ON" : "OFF"; button.innerHTML = "ON";
button.style.backgroundColor = ""; button.style.backgroundColor = "";
}, 2000); }, 2000);
showToast('Error while sending data to server.', 'error'); showToast('Error while sending data to server.', 'error');
@ -33,18 +36,52 @@ console.log('Error while sending data to server.');
} }
}; };
xhr.send(); xhr.send();
} document.getElementById('tc_on').classList.add('pure-button-primary');
function addButtonClickListener(id, url) { document.getElementById('tc_off').classList.remove('pure-button-primary');
var link = document.getElementById(id);
link.addEventListener('click', function (event) {
event.preventDefault();
handleRequest(id, url);
document.getElementById(id).classList.add('pure-button-primary');
document.getElementById(id === 'tc_on' ? 'tc_off' : 'tc_on').classList.remove('pure-button-primary');
}); });
});
var links = document.querySelectorAll('[id^="tc_off"]');
links.forEach(function(link) {
link.addEventListener('click', function(event) {
event.preventDefault();
var xhr = new XMLHttpRequest();
xhr.open('GET', 'http://{{IP_ADDRESS}}/?tc=false', true);
xhr.onreadystatechange = function () {
if (xhr.readyState === 4) {
var button = document.getElementById("tc_off");
if (xhr.status === 200) {
button.classList.remove("pure-button-primary");
button.classList.add("success");
button.innerHTML = "Disabled!";
button.style.backgroundColor = "green";
setTimeout(function () {
button.classList.remove("success");
button.classList.add("pure-button-primary");
button.innerHTML = "OFF";
button.style.backgroundColor = "";
}, 2000);
console.log('Data successfully sent to server!');
} else {
button.classList.remove("pure-button-primary");
button.classList.add("error");
button.innerHTML = "Error!";
button.style.backgroundColor = "red";
setTimeout(function () {
button.classList.remove("error");
button.classList.add("pure-button-primary");
button.innerHTML = "OFF";
button.style.backgroundColor = "";
}, 2000);
showToast('Error while sending data to server.', 'error');
console.log('Error while sending data to server.');
} }
addButtonClickListener('tc_on', 'http://{{IP_ADDRESS}}/?tc=true'); }
addButtonClickListener('tc_off', 'http://{{IP_ADDRESS}}/?tc=false'); };
xhr.send();
document.getElementById('tc_off').classList.add('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;

View file

@ -361,68 +361,111 @@ function updateLightStateAndPWMValues() {
updateLightStateAndPWMValues(); updateLightStateAndPWMValues();
setInterval(updateLightStateAndPWMValues, 5000); setInterval(updateLightStateAndPWMValues, 5000);
function handleOnRequest(id_full, id, value) { // Suche nach allen Links auf der Seite mit IDs von on0_off bis on3_off
var button = document.getElementById(id_full); var links = document.querySelectorAll('[id^="on"][id$="_off"]');
var xhr = new XMLHttpRequest(); // Füge einen Klick-Listener zu jedem Link hinzu
xhr.open('GET', 'http://{{IP_ADDRESS}}/?on' + id + '=' + value + '&transition=' + document.getElementById('transition').value, true); links.forEach(function(link) {
link.addEventListener('click', function(event) {
xhr.onreadystatechange = function () { // Verhindere, dass der Link die Seite neu lädt
if (xhr.readyState === 4) {
if (xhr.status === 200) {
button.classList.remove("pure-button-primary");
button.classList.add("success");
button.innerHTML = value ? "Enabled!" : "Disabled!";
button.style.backgroundColor = "green";
setTimeout(function () {
button.classList.remove("success");
button.classList.add("pure-button-primary");
button.innerHTML = value ? "ON" : "OFF";
button.style.backgroundColor = "";
}, 2000);
console.log('Data successfully sent to server!');
} else {
button.classList.remove("pure-button-primary");
button.classList.add("error");
button.innerHTML = "Error!";
button.style.backgroundColor = "red";
setTimeout(function () {
button.classList.remove("error");
button.classList.add("pure-button-primary");
button.innerHTML = value ? "ON" : "OFF";
button.style.backgroundColor = "";
}, 2000);
showToast('Error while sending data to server.', 'error');
console.log('Error while sending data to server.');
}
}
};
xhr.send();
updateLightStateAndPWMValues();
document.getElementById(id_full).classList.add('pure-button-primary');
document.getElementById('on' + id + (value ? '_off' : '_on')).classList.remove('pure-button-primary');
}
function addOnButtonClickListener(id_full, id, value) {
var link = document.getElementById(id_full);
link.addEventListener('click', function (event) {
event.preventDefault(); event.preventDefault();
handleOnRequest(id_full, id, value); // Extrahiere die Zahl aus der ID des Links
var id_full = this.id;
var id = this.id.replace('on', '').replace('_off', '');
// Erstelle eine neue Anfrage an die entsprechende URL
var xhr = new XMLHttpRequest();
xhr.open('GET', 'http://{{IP_ADDRESS}}/?on' + id + '=false&transition=' + document.getElementById('transition').value, true);
xhr.onreadystatechange = function () {
if (xhr.readyState === 4) {
var button = document.getElementById(id_full);
if (xhr.status === 200) {
button.classList.remove("pure-button-primary");
button.classList.add("success");
button.innerHTML = "Disabled!";
button.style.backgroundColor = "green";
setTimeout(function () {
button.classList.remove("success");
button.classList.add("pure-button-primary");
button.innerHTML = "OFF";
button.style.backgroundColor = "";
}, 2000);
console.log('Data successfully sent to server!');
} else {
button.classList.remove("pure-button-primary");
button.classList.add("error");
button.innerHTML = "Error!";
button.style.backgroundColor = "red";
setTimeout(function () {
button.classList.remove("error");
button.classList.add("pure-button-primary");
button.innerHTML = "OFF";
button.style.backgroundColor = "";
}, 2000);
showToast('Error while sending data to server.', 'error');
console.log('Error while sending data to server.');
}
}
};
// Sende die Anfrage im Hintergrund
xhr.send();
updateLightStateAndPWMValues();
this.classList.add('pure-button-primary');
document.getElementById('on'+id+'_on').classList.remove('pure-button-primary');
}); });
}
var offLinks = document.querySelectorAll('[id^="on"][id$="_off"]');
offLinks.forEach(function (link) {
var id_full = link.id;
var id = link.id.replace('on', '').replace('_off', '');
addOnButtonClickListener(id_full, id, false);
}); });
// Suche nach allen Links auf der Seite mit IDs von on0_off bis on3_off
var links = document.querySelectorAll('[id^="on"][id$="_on"]');
// Füge einen Klick-Listener zu jedem Link hinzu
links.forEach(function(link) {
link.addEventListener('click', function(event) {
// Verhindere, dass der Link die Seite neu lädt
event.preventDefault();
// Extrahiere die Zahl aus der ID des Links
var id_full = this.id;
var id = this.id.replace('on', '').replace('_on', '');
// Erstelle eine neue Anfrage an die entsprechende URL
var xhr = new XMLHttpRequest();
xhr.open('GET', 'http://{{IP_ADDRESS}}/?on' + id + '=true&transition=' + document.getElementById('transition').value, true);
var onLinks = document.querySelectorAll('[id^="on"][id$="_on"]'); xhr.onreadystatechange = function () {
onLinks.forEach(function (link) { if (xhr.readyState === 4) {
var id_full = link.id; var button = document.getElementById(id_full);
var id = link.id.replace('on', '').replace('_on', ''); if (xhr.status === 200) {
addOnButtonClickListener(id_full, id, true); button.classList.remove("pure-button-primary");
button.classList.add("success");
button.innerHTML = "Enabled!";
button.style.backgroundColor = "green";
setTimeout(function () {
button.classList.remove("success");
button.classList.add("pure-button-primary");
button.innerHTML = "ON";
button.style.backgroundColor = "";
}, 2000);
console.log('Data successfully sent to server!');
} else {
button.classList.remove("pure-button-primary");
button.classList.add("error");
button.innerHTML = "Error!";
button.style.backgroundColor = "red";
setTimeout(function () {
button.classList.remove("error");
button.classList.add("pure-button-primary");
button.innerHTML = "ON";
button.style.backgroundColor = "";
}, 2000);
showToast('Error while sending data to server.', 'error');
console.log('Error while sending data to server.');
}
}
};
// Sende die Anfrage im Hintergrund
xhr.send();
updateLightStateAndPWMValues();
this.classList.add('pure-button-primary');
document.getElementById('on'+id+'_off').classList.remove('pure-button-primary');
});
}); });
function createTable() { function createTable() {

View file

@ -1,55 +1,93 @@
function handleRequest(id, url) { var links = document.querySelectorAll('[id^="tc_on"]');
var button = document.getElementById(id); links.forEach(function(link) {
link.addEventListener('click', function(event) {
var xhr = new XMLHttpRequest();
xhr.open('GET', url, true);
xhr.onreadystatechange = function () {
if (xhr.readyState === 4) {
if (xhr.status === 200) {
button.classList.remove("pure-button-primary");
button.classList.add("success");
button.innerHTML = (id === 'tc_on') ? "Enabled!" : "Disabled!";
button.style.backgroundColor = "green";
setTimeout(function () {
button.classList.remove("success");
button.classList.add("pure-button-primary");
button.innerHTML = (id === 'tc_on') ? "ON" : "OFF";
button.style.backgroundColor = "";
}, 2000);
console.log('Data successfully sent to server!');
} else {
button.classList.remove("pure-button-primary");
button.classList.add("error");
button.innerHTML = "Error!";
button.style.backgroundColor = "";
setTimeout(function () {
button.classList.remove("error");
button.classList.add("pure-button-primary");
button.innerHTML = (id === 'tc_on') ? "ON" : "OFF";
button.style.backgroundColor = "";
}, 2000);
showToast('Error while sending data to server.', 'error');
console.log('Error while sending data to server.');
}
}
};
xhr.send();
}
function addButtonClickListener(id, url) {
var link = document.getElementById(id);
link.addEventListener('click', function (event) {
event.preventDefault(); event.preventDefault();
handleRequest(id, url); var xhr = new XMLHttpRequest();
document.getElementById(id).classList.add('pure-button-primary'); xhr.open('GET', 'http://{{IP_ADDRESS}}/?tc=true', true);
document.getElementById(id === 'tc_on' ? 'tc_off' : 'tc_on').classList.remove('pure-button-primary');
});
}
addButtonClickListener('tc_on', 'http://{{IP_ADDRESS}}/?tc=true'); xhr.onreadystatechange = function () {
addButtonClickListener('tc_off', 'http://{{IP_ADDRESS}}/?tc=false'); if (xhr.readyState === 4) {
var button = document.getElementById("tc_on");
if (xhr.status === 200) {
button.classList.remove("pure-button-primary");
button.classList.add("success");
button.innerHTML = "Enabled!";
button.style.backgroundColor = "green";
setTimeout(function () {
button.classList.remove("success");
button.classList.add("pure-button-primary");
button.innerHTML = "ON";
button.style.backgroundColor = "";
}, 2000);
console.log('Data successfully sent to server!');
} else {
button.classList.remove("pure-button-primary");
button.classList.add("error");
button.innerHTML = "Error!";
button.style.backgroundColor = "";
setTimeout(function () {
button.classList.remove("error");
button.classList.add("pure-button-primary");
button.innerHTML = "ON";
button.style.backgroundColor = "";
}, 2000);
showToast('Error while sending data to server.', 'error');
console.log('Error while sending data to server.');
}
}
};
xhr.send();
//console.log('tc=true call');
document.getElementById('tc_on').classList.add('pure-button-primary');
document.getElementById('tc_off').classList.remove('pure-button-primary');
});
});
var links = document.querySelectorAll('[id^="tc_off"]');
links.forEach(function(link) {
link.addEventListener('click', function(event) {
event.preventDefault();
var xhr = new XMLHttpRequest();
xhr.open('GET', 'http://{{IP_ADDRESS}}/?tc=false', true);
xhr.onreadystatechange = function () {
if (xhr.readyState === 4) {
var button = document.getElementById("tc_off");
if (xhr.status === 200) {
button.classList.remove("pure-button-primary");
button.classList.add("success");
button.innerHTML = "Disabled!";
button.style.backgroundColor = "green";
setTimeout(function () {
button.classList.remove("success");
button.classList.add("pure-button-primary");
button.innerHTML = "OFF";
button.style.backgroundColor = "";
}, 2000);
console.log('Data successfully sent to server!');
} else {
button.classList.remove("pure-button-primary");
button.classList.add("error");
button.innerHTML = "Error!";
button.style.backgroundColor = "red";
setTimeout(function () {
button.classList.remove("error");
button.classList.add("pure-button-primary");
button.innerHTML = "OFF";
button.style.backgroundColor = "";
}, 2000);
showToast('Error while sending data to server.', 'error');
console.log('Error while sending data to server.');
}
}
};
xhr.send();
//console.log('tc=false call');
document.getElementById('tc_off').classList.add('pure-button-primary');
document.getElementById('tc_on').classList.remove('pure-button-primary');
});
});
let timeoutId; let timeoutId;
function sendSliderValue(x) { function sendSliderValue(x) {

View file

@ -247,7 +247,6 @@ void init_webserver()
EEPROM.commit(); EEPROM.commit();
Serial.print("Timing control = "); Serial.print("Timing control = ");
Serial.println(EEPROM.read(EEPROM_TIMING_CONTROL_ENABLED_ADDRESS)); Serial.println(EEPROM.read(EEPROM_TIMING_CONTROL_ENABLED_ADDRESS));
tc_reset();
tc_update_main(); // call the main update function to read data and set the light states tc_update_main(); // call the main update function to read data and set the light states
} }
} }