From 7e6dd20d31f3a1470543bedca9852b19a992de38 Mon Sep 17 00:00:00 2001 From: Kai Lauterbach Date: Sat, 13 May 2023 23:00:46 +0200 Subject: [PATCH] Added color output to buttons after click. --- firmware/data/bottom.js | 22 ++++++++++++++++++---- firmware/data/top.js | 8 ++++++++ firmware/html/bottom.js | 22 ++++++++++++++++++---- firmware/html/top.js | 8 ++++++++ 4 files changed, 52 insertions(+), 8 deletions(-) diff --git a/firmware/data/bottom.js b/firmware/data/bottom.js index db867c4..e577721 100644 --- a/firmware/data/bottom.js +++ b/firmware/data/bottom.js @@ -329,20 +329,24 @@ 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.'); @@ -370,20 +374,24 @@ 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.'); @@ -437,13 +445,13 @@ input.value = value; input.style = "1px solod darkgray"; input.classList.add("pure-slider-range"); 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_")) { -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_")) { -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_")) { -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.appendChild(input); @@ -523,9 +531,11 @@ if (!jsonData) { 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.style.backgroundColor = ""; button.innerHTML = "save"; }, 2000); console.log('Error while generating timing control data.'); @@ -542,20 +552,24 @@ if (xhr.status === 200) { button.classList.remove("pure-button-primary"); button.classList.add("success"); button.innerHTML = "Saved!"; +button.style.backgroundColor = "green"; setTimeout(function () { button.classList.remove("success"); button.classList.add("pure-button-primary"); button.innerHTML = "save"; +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 = "save"; +button.style.backgroundColor = ""; }, 2000); showToast('Error while sending timing control data to server.', 'error'); console.log('Error while sending data to server.'); diff --git a/firmware/data/top.js b/firmware/data/top.js index 6db1365..59e8c6e 100644 --- a/firmware/data/top.js +++ b/firmware/data/top.js @@ -11,20 +11,24 @@ 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.'); @@ -49,20 +53,24 @@ 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.'); diff --git a/firmware/html/bottom.js b/firmware/html/bottom.js index 91a7463..776c4c8 100644 --- a/firmware/html/bottom.js +++ b/firmware/html/bottom.js @@ -383,20 +383,24 @@ links.forEach(function(link) { 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.'); @@ -432,20 +436,24 @@ links.forEach(function(link) { 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.'); @@ -520,13 +528,13 @@ function createSlider(id, max, value, step) { input.classList.add("pure-slider-range"); // Change the color of the slider based on the id 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_")) { - 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_")) { - 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_")) { - 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"); @@ -642,9 +650,11 @@ function sendDataToServer() { 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.style.backgroundColor = ""; button.innerHTML = "save"; }, 2000); console.log('Error while generating timing control data.'); @@ -662,20 +672,24 @@ function sendDataToServer() { button.classList.remove("pure-button-primary"); button.classList.add("success"); button.innerHTML = "Saved!"; + button.style.backgroundColor = "green"; setTimeout(function () { button.classList.remove("success"); button.classList.add("pure-button-primary"); button.innerHTML = "save"; + 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 = "save"; + button.style.backgroundColor = ""; }, 2000); showToast('Error while sending timing control data to server.', 'error'); console.log('Error while sending data to server.'); diff --git a/firmware/html/top.js b/firmware/html/top.js index a895793..b8ed203 100644 --- a/firmware/html/top.js +++ b/firmware/html/top.js @@ -12,20 +12,24 @@ links.forEach(function(link) { 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.'); @@ -53,20 +57,24 @@ links.forEach(function(link) { 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.');