From 8faa65382695c40d6312aef53f6c9d5678d94c60 Mon Sep 17 00:00:00 2001 From: Kai Lauterbach Date: Wed, 10 May 2023 13:33:03 +0200 Subject: [PATCH 1/2] PWM slider are colored now. Also the brightness sliders. --- firmware/data/bottom.js | 4 ---- firmware/data/index_template_middle.html | 2 +- firmware/data/light_control_template.html | 16 ++++++++++++++ firmware/data/style.css | 27 +++-------------------- firmware/data/top.js | 6 ++++- firmware/html/bottom.js | 6 ----- firmware/html/index_template_middle.html | 2 +- firmware/html/light_control_template.html | 17 ++++++++++++++ firmware/html/style.css | 27 +++-------------------- firmware/html/top.js | 8 ++++++- 10 files changed, 53 insertions(+), 62 deletions(-) diff --git a/firmware/data/bottom.js b/firmware/data/bottom.js index a95bcd4..3b0a739 100644 --- a/firmware/data/bottom.js +++ b/firmware/data/bottom.js @@ -427,10 +427,6 @@ container.innerHTML = ""; container.classList.add("pure-form"); container.appendChild(table); } -function rgb2Hex(r, g, b) { -var hex = "#" + ((1 << 24) | (r << 16) | (g << 8) | b).toString(16).slice(1); -return hex; -} function createSlider(id, max, value, step) { var input = document.createElement("input"); input.type = "range"; diff --git a/firmware/data/index_template_middle.html b/firmware/data/index_template_middle.html index c81a265..ec67c8d 100644 --- a/firmware/data/index_template_middle.html +++ b/firmware/data/index_template_middle.html @@ -1,6 +1,6 @@ - +
diff --git a/firmware/data/light_control_template.html b/firmware/data/light_control_template.html index 783a584..b0ed0db 100644 --- a/firmware/data/light_control_template.html +++ b/firmware/data/light_control_template.html @@ -25,5 +25,21 @@ output{{LIGHT_NUMBER_DEC}}.innerHTML = (Math.round((slider{{LIGHT_NUMBER_DEC}}.v slider{{LIGHT_NUMBER_DEC}}.oninput = function() { output{{LIGHT_NUMBER_DEC}}.innerHTML = (Math.round((this.value * 100.0 / 255.0) * 100) / 100).toFixed(2); } +var lightNumber = {{LIGHT_NUMBER}}; +var slider = document.getElementById("bri{{LIGHT_NUMBER_DEC}}"); +var pwm = document.getElementById("light{{LIGHT_NUMBER_DEC}}_pwm"); +if (lightNumber === 1) { +slider.style.background = "linear-gradient(to bottom, " + rgb2Hex(31, 119, 180) + ", white)"; +pwm.style.background = "linear-gradient(to right, " + rgb2Hex(31, 119, 180) + ", white)"; +} else if (lightNumber === 2) { +slider.style.background = "linear-gradient(to bottom, " + rgb2Hex(255, 127, 14) + ", white)"; +pwm.style.background = "linear-gradient(to right, " + rgb2Hex(255, 127, 14) + ", white)"; +} else if (lightNumber === 3) { +slider.style.background = "linear-gradient(to bottom, " + rgb2Hex(44, 160, 44) + ", white)"; +pwm.style.background = "linear-gradient(to right, " + rgb2Hex(44, 160, 44) + ", white)"; +} else if (lightNumber === 4) { +slider.style.background = "linear-gradient(to bottom, " + rgb2Hex(214, 39, 40) + ", white)"; +pwm.style.background = "linear-gradient(to right, " + rgb2Hex(214, 39, 40) + ", white)"; +} diff --git a/firmware/data/style.css b/firmware/data/style.css index d38a0ef..815054c 100644 --- a/firmware/data/style.css +++ b/firmware/data/style.css @@ -74,27 +74,6 @@ background-color: #ddd; input[type=range]:focus { outline: none; } -/* -input[type=range]::-webkit-slider-thumb { --webkit-appearance: none; -appearance: none; -width: 15px; -height: 15px; -border-radius: 10%; -background-color: #a1a1a1; -cursor: pointer; -} -input[type=range]::-moz-range-thumb { -width: 15px; -height: 15px; -border-radius: 10%; -background-color: #a1a1a1; -cursor: pointer; -} -input[type=range]::-ms-thumb { -width: 15px; -height: 15px; -border-radius: 10%; -background-color: #a1a1a1; -cursor: pointer; -}*/ \ No newline at end of file +[id^="bri"] { + width: 50%; +} \ No newline at end of file diff --git a/firmware/data/top.js b/firmware/data/top.js index f243c0a..6db1365 100644 --- a/firmware/data/top.js +++ b/firmware/data/top.js @@ -96,4 +96,8 @@ showToast(`Error sending slider value to ${url}: ${error}`, 'error'); console.error(`Error sending slider value to ${url}: ${error}`); }); }, 500); -} \ No newline at end of file +} +function rgb2Hex(r, g, b) { +var hex = "#" + ((1 << 24) | (r << 16) | (g << 8) | b).toString(16).slice(1); +return hex; +} diff --git a/firmware/html/bottom.js b/firmware/html/bottom.js index ec510b5..502b416 100644 --- a/firmware/html/bottom.js +++ b/firmware/html/bottom.js @@ -509,12 +509,6 @@ function createTable() { container.appendChild(table); } -function rgb2Hex(r, g, b) { - // RGB-Werte in hexadezimale Werte umwandeln - var hex = "#" + ((1 << 24) | (r << 16) | (g << 8) | b).toString(16).slice(1); - return hex; -} - function createSlider(id, max, value, step) { // Create a new input element of type range var input = document.createElement("input"); diff --git a/firmware/html/index_template_middle.html b/firmware/html/index_template_middle.html index 4b5e267..8e94384 100644 --- a/firmware/html/index_template_middle.html +++ b/firmware/html/index_template_middle.html @@ -1,6 +1,6 @@ - +
diff --git a/firmware/html/light_control_template.html b/firmware/html/light_control_template.html index ddedcd2..45c1c32 100644 --- a/firmware/html/light_control_template.html +++ b/firmware/html/light_control_template.html @@ -25,5 +25,22 @@ slider{{LIGHT_NUMBER_DEC}}.oninput = function() { output{{LIGHT_NUMBER_DEC}}.innerHTML = (Math.round((this.value * 100.0 / 255.0) * 100) / 100).toFixed(2); } + + var lightNumber = {{LIGHT_NUMBER}}; + var slider = document.getElementById("bri{{LIGHT_NUMBER_DEC}}"); + var pwm = document.getElementById("light{{LIGHT_NUMBER_DEC}}_pwm"); + if (lightNumber === 1) { + slider.style.background = "linear-gradient(to bottom, " + rgb2Hex(31, 119, 180) + ", white)"; + pwm.style.background = "linear-gradient(to right, " + rgb2Hex(31, 119, 180) + ", white)"; + } else if (lightNumber === 2) { + slider.style.background = "linear-gradient(to bottom, " + rgb2Hex(255, 127, 14) + ", white)"; + pwm.style.background = "linear-gradient(to right, " + rgb2Hex(255, 127, 14) + ", white)"; + } else if (lightNumber === 3) { + slider.style.background = "linear-gradient(to bottom, " + rgb2Hex(44, 160, 44) + ", white)"; + pwm.style.background = "linear-gradient(to right, " + rgb2Hex(44, 160, 44) + ", white)"; + } else if (lightNumber === 4) { + slider.style.background = "linear-gradient(to bottom, " + rgb2Hex(214, 39, 40) + ", white)"; + pwm.style.background = "linear-gradient(to right, " + rgb2Hex(214, 39, 40) + ", white)"; + } diff --git a/firmware/html/style.css b/firmware/html/style.css index d38a0ef..815054c 100644 --- a/firmware/html/style.css +++ b/firmware/html/style.css @@ -74,27 +74,6 @@ background-color: #ddd; input[type=range]:focus { outline: none; } -/* -input[type=range]::-webkit-slider-thumb { --webkit-appearance: none; -appearance: none; -width: 15px; -height: 15px; -border-radius: 10%; -background-color: #a1a1a1; -cursor: pointer; -} -input[type=range]::-moz-range-thumb { -width: 15px; -height: 15px; -border-radius: 10%; -background-color: #a1a1a1; -cursor: pointer; -} -input[type=range]::-ms-thumb { -width: 15px; -height: 15px; -border-radius: 10%; -background-color: #a1a1a1; -cursor: pointer; -}*/ \ No newline at end of file +[id^="bri"] { + width: 50%; +} \ No newline at end of file diff --git a/firmware/html/top.js b/firmware/html/top.js index 3cb6dbe..a895793 100644 --- a/firmware/html/top.js +++ b/firmware/html/top.js @@ -105,4 +105,10 @@ function sendSliderValue(x) { console.error(`Error sending slider value to ${url}: ${error}`); }); }, 500); -} \ No newline at end of file +} + +function rgb2Hex(r, g, b) { + // RGB-Werte in hexadezimale Werte umwandeln + var hex = "#" + ((1 << 24) | (r << 16) | (g << 8) | b).toString(16).slice(1); + return hex; +} From 6c3e6077205c5caab20fb41ed2e97d1a8bd2c99c Mon Sep 17 00:00:00 2001 From: Kai Lauterbach Date: Wed, 10 May 2023 13:35:29 +0200 Subject: [PATCH 2/2] Fixed slider color gradient --- firmware/data/light_control_template.html | 8 ++++---- firmware/html/light_control_template.html | 8 ++++---- 2 files changed, 8 insertions(+), 8 deletions(-) diff --git a/firmware/data/light_control_template.html b/firmware/data/light_control_template.html index b0ed0db..458f36a 100644 --- a/firmware/data/light_control_template.html +++ b/firmware/data/light_control_template.html @@ -30,16 +30,16 @@ var slider = document.getElementById("bri{{LIGHT_NUMBER_DEC}}"); var pwm = document.getElementById("light{{LIGHT_NUMBER_DEC}}_pwm"); if (lightNumber === 1) { slider.style.background = "linear-gradient(to bottom, " + rgb2Hex(31, 119, 180) + ", white)"; -pwm.style.background = "linear-gradient(to right, " + rgb2Hex(31, 119, 180) + ", white)"; +pwm.style.background = "linear-gradient(to right, white, " + rgb2Hex(31, 119, 180) + ")"; } else if (lightNumber === 2) { slider.style.background = "linear-gradient(to bottom, " + rgb2Hex(255, 127, 14) + ", white)"; -pwm.style.background = "linear-gradient(to right, " + rgb2Hex(255, 127, 14) + ", white)"; +pwm.style.background = "linear-gradient(to right, white, " + rgb2Hex(255, 127, 14) + ")"; } else if (lightNumber === 3) { slider.style.background = "linear-gradient(to bottom, " + rgb2Hex(44, 160, 44) + ", white)"; -pwm.style.background = "linear-gradient(to right, " + rgb2Hex(44, 160, 44) + ", white)"; +pwm.style.background = "linear-gradient(to right, white, " + rgb2Hex(44, 160, 44) + ")"; } else if (lightNumber === 4) { slider.style.background = "linear-gradient(to bottom, " + rgb2Hex(214, 39, 40) + ", white)"; -pwm.style.background = "linear-gradient(to right, " + rgb2Hex(214, 39, 40) + ", white)"; +pwm.style.background = "linear-gradient(to right, white, " + rgb2Hex(214, 39, 40) + ")"; } diff --git a/firmware/html/light_control_template.html b/firmware/html/light_control_template.html index 45c1c32..3a6290c 100644 --- a/firmware/html/light_control_template.html +++ b/firmware/html/light_control_template.html @@ -31,16 +31,16 @@ var pwm = document.getElementById("light{{LIGHT_NUMBER_DEC}}_pwm"); if (lightNumber === 1) { slider.style.background = "linear-gradient(to bottom, " + rgb2Hex(31, 119, 180) + ", white)"; - pwm.style.background = "linear-gradient(to right, " + rgb2Hex(31, 119, 180) + ", white)"; + pwm.style.background = "linear-gradient(to right, white, " + rgb2Hex(31, 119, 180) + ")"; } else if (lightNumber === 2) { slider.style.background = "linear-gradient(to bottom, " + rgb2Hex(255, 127, 14) + ", white)"; - pwm.style.background = "linear-gradient(to right, " + rgb2Hex(255, 127, 14) + ", white)"; + pwm.style.background = "linear-gradient(to right, white, " + rgb2Hex(255, 127, 14) + ")"; } else if (lightNumber === 3) { slider.style.background = "linear-gradient(to bottom, " + rgb2Hex(44, 160, 44) + ", white)"; - pwm.style.background = "linear-gradient(to right, " + rgb2Hex(44, 160, 44) + ", white)"; + pwm.style.background = "linear-gradient(to right, white, " + rgb2Hex(44, 160, 44) + ")"; } else if (lightNumber === 4) { slider.style.background = "linear-gradient(to bottom, " + rgb2Hex(214, 39, 40) + ", white)"; - pwm.style.background = "linear-gradient(to right, " + rgb2Hex(214, 39, 40) + ", white)"; + pwm.style.background = "linear-gradient(to right, white, " + rgb2Hex(214, 39, 40) + ")"; }