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

Added color output to buttons after click.

Browse source
This commit is contained in:
Kai Lauterbach 2023-05-13 23:00:46 +02:00
parent d336c047cb
commit 7e6dd20d31
4 changed files with 52 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

22
firmware/data/bottom.js
View file

@ -329,20 +329,24 @@ 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 = "Disabled!"; button.innerHTML = "Disabled!";
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 = "OFF"; button.innerHTML = "OFF";
button.style.backgroundColor = "";
}, 2000); }, 2000);
console.log('Data successfully sent to server!'); console.log('Data successfully sent to server!');
} else { } else {
button.classList.remove("pure-button-primary"); button.classList.remove("pure-button-primary");
button.classList.add("error"); button.classList.add("error");
button.innerHTML = "Error!"; button.innerHTML = "Error!";
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 = "OFF"; button.innerHTML = "OFF";
button.style.backgroundColor = "";
}, 2000); }, 2000);
showToast('Error while sending data to server.', 'error'); showToast('Error while sending data to server.', 'error');
console.log('Error while sending data to server.'); console.log('Error while sending data to server.');
@ -370,20 +374,24 @@ 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 = "Enabled!"; button.innerHTML = "Enabled!";
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 = "ON"; button.innerHTML = "ON";
button.style.backgroundColor = "";
}, 2000); }, 2000);
console.log('Data successfully sent to server!'); console.log('Data successfully sent to server!');
} else { } else {
button.classList.remove("pure-button-primary"); button.classList.remove("pure-button-primary");
button.classList.add("error"); button.classList.add("error");
button.innerHTML = "Error!"; button.innerHTML = "Error!";
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 = "ON"; button.innerHTML = "ON";
button.style.backgroundColor = "";
}, 2000); }, 2000);
showToast('Error while sending data to server.', 'error'); showToast('Error while sending data to server.', 'error');
console.log('Error while sending data to server.'); console.log('Error while sending data to server.');
@ -437,13 +445,13 @@ input.value = value;
input.style = "1px solod darkgray"; input.style = "1px solod darkgray";
input.classList.add("pure-slider-range"); input.classList.add("pure-slider-range");
if (id.startsWith("ch1_")) { if (id.startsWith("ch1_")) {
input.style.background = "linear-gradient(to bottom, " + rgb2Hex(31, 119, 180) + ", white)"; input.style.background = "linear-gradient(to left, " + rgb2Hex(31, 119, 180) + ", white)";
} else if (id.startsWith("ch2_")) { } else if (id.startsWith("ch2_")) {
input.style.background = "linear-gradient(to bottom, " + rgb2Hex(255, 127, 14) + ", white)"; input.style.background = "linear-gradient(to left, " + rgb2Hex(255, 127, 14) + ", white)";
} else if (id.startsWith("ch3_")) { } else if (id.startsWith("ch3_")) {
input.style.background = "linear-gradient(to bottom, " + rgb2Hex(44, 160, 44) + ", white)"; input.style.background = "linear-gradient(to left, " + rgb2Hex(44, 160, 44) + ", white)";
} else if (id.startsWith("ch4_")) { } else if (id.startsWith("ch4_")) {
input.style.background = "linear-gradient(to bottom, " + rgb2Hex(214, 39, 40) + ", white)"; input.style.background = "linear-gradient(to left, " + rgb2Hex(214, 39, 40) + ", white)";
} }
div = document.createElement("div"); div = document.createElement("div");
div.appendChild(input); div.appendChild(input);
@ -523,9 +531,11 @@ if (!jsonData) {
button.classList.remove("pure-button-primary"); button.classList.remove("pure-button-primary");
button.classList.add("error"); button.classList.add("error");
button.innerHTML = "Error!"; button.innerHTML = "Error!";
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.style.backgroundColor = "";
button.innerHTML = "save"; button.innerHTML = "save";
}, 2000); }, 2000);
console.log('Error while generating timing control data.'); console.log('Error while generating timing control data.');
@ -542,20 +552,24 @@ 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 = "Saved!"; button.innerHTML = "Saved!";
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 = "save"; button.innerHTML = "save";
button.style.backgroundColor = "";
}, 2000); }, 2000);
console.log('Data successfully sent to server!'); console.log('Data successfully sent to server!');
} else { } else {
button.classList.remove("pure-button-primary"); button.classList.remove("pure-button-primary");
button.classList.add("error"); button.classList.add("error");
button.innerHTML = "Error!"; button.innerHTML = "Error!";
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 = "save"; button.innerHTML = "save";
button.style.backgroundColor = "";
}, 2000); }, 2000);
showToast('Error while sending timing control data to server.', 'error'); showToast('Error while sending timing control data to server.', 'error');
console.log('Error while sending data to server.'); console.log('Error while sending data to server.');

8
firmware/data/top.js
View file

@ -11,20 +11,24 @@ 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 = "Enabled!"; button.innerHTML = "Enabled!";
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 = "ON"; button.innerHTML = "ON";
button.style.backgroundColor = "";
}, 2000); }, 2000);
console.log('Data successfully sent to server!'); console.log('Data successfully sent to server!');
} else { } else {
button.classList.remove("pure-button-primary"); button.classList.remove("pure-button-primary");
button.classList.add("error"); button.classList.add("error");
button.innerHTML = "Error!"; button.innerHTML = "Error!";
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 = "ON"; button.innerHTML = "ON";
button.style.backgroundColor = "";
}, 2000); }, 2000);
showToast('Error while sending data to server.', 'error'); showToast('Error while sending data to server.', 'error');
console.log('Error while sending data to server.'); console.log('Error while sending data to server.');
@ -49,20 +53,24 @@ 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 = "Disabled!"; button.innerHTML = "Disabled!";
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 = "OFF"; button.innerHTML = "OFF";
button.style.backgroundColor = "";
}, 2000); }, 2000);
console.log('Data successfully sent to server!'); console.log('Data successfully sent to server!');
} else { } else {
button.classList.remove("pure-button-primary"); button.classList.remove("pure-button-primary");
button.classList.add("error"); button.classList.add("error");
button.innerHTML = "Error!"; button.innerHTML = "Error!";
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 = "OFF"; button.innerHTML = "OFF";
button.style.backgroundColor = "";
}, 2000); }, 2000);
showToast('Error while sending data to server.', 'error'); showToast('Error while sending data to server.', 'error');
console.log('Error while sending data to server.'); console.log('Error while sending data to server.');

22
firmware/html/bottom.js
View file

@ -383,20 +383,24 @@ links.forEach(function(link) {
button.classList.remove("pure-button-primary"); button.classList.remove("pure-button-primary");
button.classList.add("success"); button.classList.add("success");
button.innerHTML = "Disabled!"; button.innerHTML = "Disabled!";
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 = "OFF"; button.innerHTML = "OFF";
button.style.backgroundColor = "";
}, 2000); }, 2000);
console.log('Data successfully sent to server!'); console.log('Data successfully sent to server!');
} else { } else {
button.classList.remove("pure-button-primary"); button.classList.remove("pure-button-primary");
button.classList.add("error"); button.classList.add("error");
button.innerHTML = "Error!"; button.innerHTML = "Error!";
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 = "OFF"; button.innerHTML = "OFF";
button.style.backgroundColor = "";
}, 2000); }, 2000);
showToast('Error while sending data to server.', 'error'); showToast('Error while sending data to server.', 'error');
console.log('Error while sending data to server.'); console.log('Error while sending data to server.');
@ -432,20 +436,24 @@ links.forEach(function(link) {
button.classList.remove("pure-button-primary"); button.classList.remove("pure-button-primary");
button.classList.add("success"); button.classList.add("success");
button.innerHTML = "Enabled!"; button.innerHTML = "Enabled!";
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 = "ON"; button.innerHTML = "ON";
button.style.backgroundColor = "";
}, 2000); }, 2000);
console.log('Data successfully sent to server!'); console.log('Data successfully sent to server!');
} else { } else {
button.classList.remove("pure-button-primary"); button.classList.remove("pure-button-primary");
button.classList.add("error"); button.classList.add("error");
button.innerHTML = "Error!"; button.innerHTML = "Error!";
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 = "ON"; button.innerHTML = "ON";
button.style.backgroundColor = "";
}, 2000); }, 2000);
showToast('Error while sending data to server.', 'error'); showToast('Error while sending data to server.', 'error');
console.log('Error while sending data to server.'); console.log('Error while sending data to server.');
@ -520,13 +528,13 @@ function createSlider(id, max, value, step) {
input.classList.add("pure-slider-range"); input.classList.add("pure-slider-range");
// Change the color of the slider based on the id // Change the color of the slider based on the id
if (id.startsWith("ch1_")) { if (id.startsWith("ch1_")) {
input.style.background = "linear-gradient(to bottom, " + rgb2Hex(31, 119, 180) + ", white)"; input.style.background = "linear-gradient(to left, " + rgb2Hex(31, 119, 180) + ", white)";
} else if (id.startsWith("ch2_")) { } else if (id.startsWith("ch2_")) {
input.style.background = "linear-gradient(to bottom, " + rgb2Hex(255, 127, 14) + ", white)"; input.style.background = "linear-gradient(to left, " + rgb2Hex(255, 127, 14) + ", white)";
} else if (id.startsWith("ch3_")) { } else if (id.startsWith("ch3_")) {
input.style.background = "linear-gradient(to bottom, " + rgb2Hex(44, 160, 44) + ", white)"; input.style.background = "linear-gradient(to left, " + rgb2Hex(44, 160, 44) + ", white)";
} else if (id.startsWith("ch4_")) { } else if (id.startsWith("ch4_")) {
input.style.background = "linear-gradient(to bottom, " + rgb2Hex(214, 39, 40) + ", white)"; input.style.background = "linear-gradient(to left, " + rgb2Hex(214, 39, 40) + ", white)";
} }
div = document.createElement("div"); div = document.createElement("div");
@ -642,9 +650,11 @@ function sendDataToServer() {
button.classList.remove("pure-button-primary"); button.classList.remove("pure-button-primary");
button.classList.add("error"); button.classList.add("error");
button.innerHTML = "Error!"; button.innerHTML = "Error!";
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.style.backgroundColor = "";
button.innerHTML = "save"; button.innerHTML = "save";
}, 2000); }, 2000);
console.log('Error while generating timing control data.'); console.log('Error while generating timing control data.');
@ -662,20 +672,24 @@ function sendDataToServer() {
button.classList.remove("pure-button-primary"); button.classList.remove("pure-button-primary");
button.classList.add("success"); button.classList.add("success");
button.innerHTML = "Saved!"; button.innerHTML = "Saved!";
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 = "save"; button.innerHTML = "save";
button.style.backgroundColor = "";
}, 2000); }, 2000);
console.log('Data successfully sent to server!'); console.log('Data successfully sent to server!');
} else { } else {
button.classList.remove("pure-button-primary"); button.classList.remove("pure-button-primary");
button.classList.add("error"); button.classList.add("error");
button.innerHTML = "Error!"; button.innerHTML = "Error!";
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 = "save"; button.innerHTML = "save";
button.style.backgroundColor = "";
}, 2000); }, 2000);
showToast('Error while sending timing control data to server.', 'error'); showToast('Error while sending timing control data to server.', 'error');
console.log('Error while sending data to server.'); console.log('Error while sending data to server.');

8
firmware/html/top.js
View file

@ -12,20 +12,24 @@ links.forEach(function(link) {
button.classList.remove("pure-button-primary"); button.classList.remove("pure-button-primary");
button.classList.add("success"); button.classList.add("success");
button.innerHTML = "Enabled!"; button.innerHTML = "Enabled!";
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 = "ON"; button.innerHTML = "ON";
button.style.backgroundColor = "";
}, 2000); }, 2000);
console.log('Data successfully sent to server!'); console.log('Data successfully sent to server!');
} else { } else {
button.classList.remove("pure-button-primary"); button.classList.remove("pure-button-primary");
button.classList.add("error"); button.classList.add("error");
button.innerHTML = "Error!"; button.innerHTML = "Error!";
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 = "ON"; button.innerHTML = "ON";
button.style.backgroundColor = "";
}, 2000); }, 2000);
showToast('Error while sending data to server.', 'error'); showToast('Error while sending data to server.', 'error');
console.log('Error while sending data to server.'); console.log('Error while sending data to server.');
@ -53,20 +57,24 @@ links.forEach(function(link) {
button.classList.remove("pure-button-primary"); button.classList.remove("pure-button-primary");
button.classList.add("success"); button.classList.add("success");
button.innerHTML = "Disabled!"; button.innerHTML = "Disabled!";
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 = "OFF"; button.innerHTML = "OFF";
button.style.backgroundColor = "";
}, 2000); }, 2000);
console.log('Data successfully sent to server!'); console.log('Data successfully sent to server!');
} else { } else {
button.classList.remove("pure-button-primary"); button.classList.remove("pure-button-primary");
button.classList.add("error"); button.classList.add("error");
button.innerHTML = "Error!"; button.innerHTML = "Error!";
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 = "OFF"; button.innerHTML = "OFF";
button.style.backgroundColor = "";
}, 2000); }, 2000);
showToast('Error while sending data to server.', 'error'); showToast('Error while sending data to server.', 'error');
console.log('Error while sending data to server.'); console.log('Error while sending data to server.');