webui: 2nd try at using css for light controls

register channels with their respective tags, instead of using count
both on backend and frontend

revert to useCCT mireds slider rule, disallow white channels with useWhite

code/espurna/light.cpp

@@ -2581,7 +2581,13 @@ void _lightWebSocketOnVisible(JsonObject& root) {
     wsPayloadModule(root, PSTR("light"));
 
     JsonObject& light = root.createNestedObject("light");
-    light["channels"] = _light_channels.size();
+
+    JsonArray& channels = light.createNestedArray("channels");
+
+    const auto Channels = _light_channels.size();
+    for (size_t index = 0; index < Channels; ++index) {
+        channels.add(_lightTag(Channels, index));
+    }
 
     if (_light_use_cct) {
         JsonObject& cct = light.createNestedObject("cct");

code/html/custom.css

@@ -600,8 +600,5 @@ input::placeholder {
     padding-bottom: 1em;
     padding-top: 1em;
     transition: visibility 0.2s;
-}
-
-.IroColorPicker, .light-control {
     content-visibility: hidden;
 }

code/html/custom.js

@@ -1861,7 +1861,6 @@ function initMagnitudesExpected(id) {
     const [expected, result] = template.querySelectorAll("input");
 
     const info = emonRatioInfo(id);
-    const root = template.children[0];
 
     expected.name += `${info.key}`;
     expected.id = expected.name;
@@ -2189,17 +2188,16 @@ function updateLightState(value) {
     const state = document.getElementById("light-state");
     state.checked = value;
 
-    const picker = document.querySelector(".IroColorPicker");
-    picker.style["display"] = value ? "block" : "none";
+    const picker = document.getElementById("light-picker");
+    picker.style["content-visibility"] = value ? "visible" : "hidden";
 }
 
 function colorEnabled(value) {
     const rules = []
     rules.push(styleVisible(".IroColorPicker", value));
 
-    for (let channel = 0; channel < 3; ++channel) {
-        rules.push(
-            styleVisible(`.light-channel-${channel}`, !value));
+    for (let type of ["r", "g", "b"]) {
+        rules.push(styleVisible(`.light-channel-${type}`, !value));
     }
 
     styleInject(rules);
@@ -2254,19 +2252,33 @@ function updateMireds(value) {
 // When there are CCT controls, no need for raw white channel sliders
 function cctEnabled(value) {
     if (value) {
-        let rules = [];
-        for (let channel = 3; channel < 5; ++channel) {
-            rules.push(
-                styleVisible(`.light-channel-${channel}`, false));
-        }
+        styleInject([
+            styleVisible(".light-channel-w", false),
+            styleVisible(".light-channel-c", false)
+        ]);
+    } else {
+        styleInject([
+            styleVisible(".light-cct", false),
+        ]);
+    }
+}
 
-        styleInject(rules);
+// Only allow cold white
+function whiteEnabled(value) {
+    if (value) {
+        styleInject([
+            styleVisible(".light-channel-w", false),
+            styleVisible(".light-channel-c", true)
+        ]);
     }
 }
 
 function cctInit(value) {
     const control = loadTemplate("mireds-control");
 
+    const root = control.querySelector("div");
+    root.classList.add("light-cct");
+
     const slider = control.getElementById("mireds");
     slider.setAttribute("min", value.cold);
     slider.setAttribute("max", value.warm);
@@ -2275,6 +2287,12 @@ function cctInit(value) {
         sendAction("light", {mireds: event.target.value});
     });
 
+    const datalist = control.querySelector("datalist");
+    datalist.innerHTML = `
+    <option value="${value.cold}">Cold</option>
+    <option value="${value.warm}">Warm</option>
+    `;
+
     mergeTemplate(document.getElementById("light"), control);
 }
 
@@ -2289,7 +2307,6 @@ function updateLight(data) {
             initLightState();
             initBrightness();
             initChannels(value);
-            addSimpleEnumerables("channel", "Channel", value);
             break;
 
         case "cct":
@@ -2349,19 +2366,26 @@ function updateBrightness(value) {
 }
 
 function initChannels(channels) {
+    const enumerables = [];
+
     const container = document.getElementById("light");
-    for (let channel = 0; channel < channels; ++channel) {
+    channels.forEach((tag, channel) => {
         const line = loadTemplate("channel-control");
         line.querySelector("span.slider").dataset["id"] = channel;
-        line.querySelector("div").classList.add(`light-channel-${channel}`);
+        line.querySelector("div").classList.add(`light-channel-${tag}`);
 
         const slider = line.querySelector("input.slider");
         slider.dataset["id"] = channel;
         slider.addEventListener("change", onChannelSliderChange);
 
-        line.querySelector("label").textContent = "Channel #".concat(channel);
+        const label = `Channel #${channel} (${tag.toUpperCase()})`;
+        line.querySelector("label").textContent = label;
         mergeTemplate(container, line);
-    }
+
+        enumerables.push({"id": channel, "name": label});
+    });
+
+    addEnumerables("Channels", enumerables);
 }
 
 function updateChannels(values) {
@@ -2631,6 +2655,10 @@ function processData(data) {
             showLightState(value);
         }
 
+        if ("useWhite" === key) {
+            whiteEnabled(value);
+        }
+
         if ("useCCT" === key) {
             cctEnabled(value);
         }

code/html/index.html

@@ -2371,7 +2371,6 @@
                 <span class="pure-form-message-inline emon-expected-pwrP">In Watts (W). Calibrate your sensor connecting a pure resistive load (like a bulb) and enter here its nominal power or use a multimeter.</span>
                 <span class="pure-form-message-inline emon-expected-volt">In Volts (V). Enter your the nominal AC voltage for your household or facility, or use multimeter to get this value.</span>
                 <span class="pure-form-message-inline emon-expected-curr">In Amperes (A). If you are using a pure resistive load like a bulb, this will be the ratio between the two previous values, i.e. power / voltage. You can also use a current clamp around one of the power wires to get this value.</span>
-                <span class="pure-form-message-inline emon-expected-ene"></span>
             </div>
         </template>
 
@@ -2396,9 +2395,11 @@
 
         <template id="template-mireds-control">
             <div class="pure-control-group">
-                <label>Mireds (Cold &harr; Warm)</label>
-                <input type="range" min="153" max="500" class="slider pure-input-2-3" id="mireds">
+                <label>Mireds</label>
+                <input type="range" class="slider pure-input-2-3" id="mireds" list="mired-range">
                 <span class="slider mireds"></span>
+                <datalist id="mired-range">
+                </datalist>
             </div>
         </template>
         <!-- endRemoveIf(!light) -->