Compare commits

...

2 commits

Author SHA1 Message Date
Kai Lauterbach
6c3e607720 Fixed slider color gradient 2023-05-10 13:35:29 +02:00
Kai Lauterbach
8faa653826 PWM slider are colored now. Also the brightness sliders. 2023-05-10 13:33:03 +02:00
10 changed files with 53 additions and 62 deletions

View file

@ -427,10 +427,6 @@ container.innerHTML = "";
container.classList.add("pure-form"); container.classList.add("pure-form");
container.appendChild(table); 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) { function createSlider(id, max, value, step) {
var input = document.createElement("input"); var input = document.createElement("input");
input.type = "range"; input.type = "range";

View file

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

View file

@ -25,5 +25,21 @@ output{{LIGHT_NUMBER_DEC}}.innerHTML = (Math.round((slider{{LIGHT_NUMBER_DEC}}.v
slider{{LIGHT_NUMBER_DEC}}.oninput = function() { slider{{LIGHT_NUMBER_DEC}}.oninput = function() {
output{{LIGHT_NUMBER_DEC}}.innerHTML = (Math.round((this.value * 100.0 / 255.0) * 100) / 100).toFixed(2); 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> </script>
</div> </div>

View file

@ -74,27 +74,6 @@ background-color: #ddd;
input[type=range]:focus { input[type=range]:focus {
outline: none; outline: none;
} }
/* [id^="bri"] {
input[type=range]::-webkit-slider-thumb { width: 50%;
-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;
}*/

View file

@ -97,3 +97,7 @@ console.error(`Error sending slider value to ${url}: ${error}`);
}); });
}, 500); }, 500);
} }
function rgb2Hex(r, g, b) {
var hex = "#" + ((1 << 24) | (r << 16) | (g << 8) | b).toString(16).slice(1);
return hex;
}

View file

@ -509,12 +509,6 @@ function createTable() {
container.appendChild(table); 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) { function createSlider(id, max, value, step) {
// Create a new input element of type range // Create a new input element of type range
var input = document.createElement("input"); var input = document.createElement("input");

View file

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

View file

@ -25,5 +25,22 @@
slider{{LIGHT_NUMBER_DEC}}.oninput = function() { slider{{LIGHT_NUMBER_DEC}}.oninput = function() {
output{{LIGHT_NUMBER_DEC}}.innerHTML = (Math.round((this.value * 100.0 / 255.0) * 100) / 100).toFixed(2); 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> </script>
</div> </div>

View file

@ -74,27 +74,6 @@ background-color: #ddd;
input[type=range]:focus { input[type=range]:focus {
outline: none; outline: none;
} }
/* [id^="bri"] {
input[type=range]::-webkit-slider-thumb { width: 50%;
-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;
}*/

View file

@ -106,3 +106,9 @@ function sendSliderValue(x) {
}); });
}, 500); }, 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;
}