lumini_p30_control/firmware/html/light_control_template.html

<h4>Light {{LIGHT_NUMBER}}</h4>
<div class="pure-control-group">
    <label for="power">
        <strong>Power</strong>
    </label>
    <a id="on{{LIGHT_NUMBER_DEC}}_on" class="pure-button" href="#">ON</a>
    <a id="on{{LIGHT_NUMBER_DEC}}_off" class="pure-button" href="#">OFF</a>
</div>
<div class="pure-control-group">
    <label for="bri{{LIGHT_NUMBER_DEC}}">Target brightness</label>
    <input id="bri{{LIGHT_NUMBER_DEC}}" onchange="sendSliderValue({{LIGHT_NUMBER}})" name="bri{{LIGHT_NUMBER_DEC}}" type="range" min="0" max="255" value="25">
    &nbsp;
    <span id="bri{{LIGHT_NUMBER_DEC}}_val" name="bri{{LIGHT_NUMBER_DEC}}">9</span>
    %
    <br>
    <label for="light{{LIGHT_NUMBER_DEC}}_pwm">Actual Bri.</label>
    <input type="range" min="0" max="100" value="0" id="light{{LIGHT_NUMBER_DEC}}_pwm" disabled>
    &nbsp;
    <span id="light{{LIGHT_NUMBER_DEC}}_pwm_txt"></span>
    %
    <script>
        var slider{{LIGHT_NUMBER_DEC}} = document.getElementById("bri{{LIGHT_NUMBER_DEC}}");
        var output{{LIGHT_NUMBER_DEC}} = document.getElementById("bri{{LIGHT_NUMBER_DEC}}_val");
        output{{LIGHT_NUMBER_DEC}}.innerHTML = (Math.round((slider{{LIGHT_NUMBER_DEC}}.value * 100.0 / 255.0) * 100) / 100).toFixed(2);
        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>