Fixed slider color gradient

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";

firmware/data/index_template_middle.html

@@ -1,6 +1,6 @@
 <!-- middle -->
 </td>
-<td>
+<td class="top-align">
 <div id="plot_chart" class="top-align"></div>
 </td>
 </tr>

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, 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, 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, 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, white, " + rgb2Hex(214, 39, 40) + ")";
+}
 </script>
 </div>

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;
-}*/
+[id^="bri"] {
+    width: 50%;
+}

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);
-}
+}
+function rgb2Hex(r, g, b) {
+var hex = "#" + ((1 << 24) | (r << 16) | (g << 8) | b).toString(16).slice(1);
+return hex;
+}

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");

firmware/html/index_template_middle.html

@@ -1,6 +1,6 @@
 <!-- middle -->
                     </td>
-                    <td>
+                    <td class="top-align">
                         <div id="plot_chart" class="top-align"></div>
                     </td>
                 </tr>

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, 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, 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, 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, white, " + rgb2Hex(214, 39, 40) + ")";
+        }
     </script>
 </div>

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;
-}*/
+[id^="bri"] {
+    width: 50%;
+}

firmware/html/top.js

@@ -105,4 +105,10 @@ function sendSliderValue(x) {
             console.error(`Error sending slider value to ${url}: ${error}`);
         });
     }, 500);
-}
+}
+
+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;
+}