webui: update colorpicker

ref. #1132 (comment) it is slightly bigger, but better looking and no jquery dependency rework colorpicker style as well, hide to prevent sending garbage when lights are off. update lights module to send `lightState()` and separate state from status payloads yes, input[type="color"] is an option, but it does not look good
xoseperez · Jan 15, 2021 · 808981c · 808981c
1 parent cfd6e36
commit 808981c
Show file tree

Hide file tree

Showing 26 changed files with 24,389 additions and 24,317 deletions.
diff --git a/code/espurna/data/index.all.html.gz b/code/espurna/data/index.all.html.gz
diff --git a/code/espurna/data/index.curtain.html.gz b/code/espurna/data/index.curtain.html.gz
diff --git a/code/espurna/data/index.garland.html.gz b/code/espurna/data/index.garland.html.gz
diff --git a/code/espurna/data/index.light.html.gz b/code/espurna/data/index.light.html.gz
diff --git a/code/espurna/data/index.lightfox.html.gz b/code/espurna/data/index.lightfox.html.gz
diff --git a/code/espurna/data/index.rfbridge.html.gz b/code/espurna/data/index.rfbridge.html.gz
diff --git a/code/espurna/data/index.rfm69.html.gz b/code/espurna/data/index.rfm69.html.gz
diff --git a/code/espurna/data/index.sensor.html.gz b/code/espurna/data/index.sensor.html.gz
diff --git a/code/espurna/data/index.small.html.gz b/code/espurna/data/index.small.html.gz
diff --git a/code/espurna/data/index.thermostat.html.gz b/code/espurna/data/index.thermostat.html.gz
diff --git a/code/espurna/light.cpp b/code/espurna/light.cpp
@@ -1274,6 +1274,7 @@ void _lightWebSocketStatus(JsonObject& root) {
         channels.add(lightChannel(id));
     }
     root["brightness"] = lightBrightness();
+    root["lightstate"] = lightState();
 }
 
 void _lightWebSocketOnVisible(JsonObject& root) {
@@ -1294,8 +1295,6 @@ void _lightWebSocketOnConnected(JsonObject& root) {
 #if RELAY_SUPPORT
     root["ltRelay"] = getSetting("ltRelay", 1 == LIGHT_RELAY_ENABLED);
 #endif
-
-    _lightWebSocketStatus(root);
 }
 
 void _lightWebSocketOnAction(uint32_t client_id, const char * action, JsonObject& data) {
@@ -1842,6 +1841,7 @@ void lightSetup() {
         wsRegister()
             .onVisible(_lightWebSocketOnVisible)
             .onConnected(_lightWebSocketOnConnected)
+            .onData(_lightWebSocketStatus)
             .onAction(_lightWebSocketOnAction)
             .onKeyCheck(_lightWebSocketOnKeyCheck);
     #endif

diff --git a/code/espurna/static/index.all.html.gz.h b/code/espurna/static/index.all.html.gz.h
diff --git a/code/espurna/static/index.curtain.html.gz.h b/code/espurna/static/index.curtain.html.gz.h
diff --git a/code/espurna/static/index.garland.html.gz.h b/code/espurna/static/index.garland.html.gz.h
diff --git a/code/espurna/static/index.light.html.gz.h b/code/espurna/static/index.light.html.gz.h
diff --git a/code/espurna/static/index.lightfox.html.gz.h b/code/espurna/static/index.lightfox.html.gz.h
diff --git a/code/espurna/static/index.rfbridge.html.gz.h b/code/espurna/static/index.rfbridge.html.gz.h
diff --git a/code/espurna/static/index.rfm69.html.gz.h b/code/espurna/static/index.rfm69.html.gz.h
diff --git a/code/espurna/static/index.sensor.html.gz.h b/code/espurna/static/index.sensor.html.gz.h
diff --git a/code/espurna/static/index.small.html.gz.h b/code/espurna/static/index.small.html.gz.h
diff --git a/code/espurna/static/index.thermostat.html.gz.h b/code/espurna/static/index.thermostat.html.gz.h
diff --git a/code/html/custom.css b/code/html/custom.css
@@ -408,6 +408,15 @@ input[disabled] + .toggle .toggle__handler {
     text-decoration: none;
 }
 
+/* -----------------------------------------------------------------------------
+    Home panel
+   -------------------------------------------------------------------------- */
+
+#color {
+    padding-bottom: 1em;
+    padding-top: 1em;
+}
+
 /* -----------------------------------------------------------------------------
     RF Bridge panel
    -------------------------------------------------------------------------- */

diff --git a/code/html/custom.js b/code/html/custom.js
@@ -14,8 +14,11 @@ var numReload = 0;
 var configurationSaved = false;
 var ws_pingpong;
 
+//removeIf(!light)
+var colorPicker;
 var useWhite = false;
 var useCCT = false;
+//endRemoveIf(!light)
 
 var now = 0;
 var ago = 0;
@@ -1149,7 +1152,7 @@ function initRelays(data) {
             });
 
         $("label.toggle", line)
-            .prop("for", "relay" + id)
+            .prop("for", "relay" + id);
 
         line.appendTo("#relays");
 
@@ -1331,68 +1334,68 @@ function initCurtainConfig(data) {
 
 //removeIf(!light)
 
-// wheelColorPicker accepts:
-//   hsv(0...360,0...1,0...1)
-//   hsv(0...100%,0...100%,0...100%)
-// While we use:
-//   hsv(0...360,0...100%,0...100%)
-
-function _hsv_round(value) {
-    return Math.round(value * 100) / 100;
+function colorToHsvString(color) {
+    var h = String(Math.round(color.hsv.h));
+    var s = String(Math.round(color.hsv.s));
+    var v = String(Math.round(color.hsv.v));
+    return h + "," + s + "," + v;
 }
 
-function getPickerRGB(picker) {
-    return $(picker).wheelColorPicker("getValue", "css");
+function hsvStringToColor(hsv) {
+    var parts = hsv.split(",");
+    return {
+        h: parseInt(parts[0]),
+        s: parseInt(parts[1]),
+        v: parseInt(parts[2])
+    };
 }
 
-function setPickerRGB(picker, value) {
-    $(picker).wheelColorPicker("setValue", value, true);
+function colorSlider(type) {
+    return {component: iro.ui.Slider, options: {sliderType: type}};
 }
 
-// TODO: use pct values instead of doing conversion?
-function getPickerHSV(picker) {
-    var color = $(picker).wheelColorPicker("getColor");
-    return String(Math.ceil(_hsv_round(color.h) * 360))
-        + "," + String(Math.ceil(_hsv_round(color.s) * 100))
-        + "," + String(Math.ceil(_hsv_round(color.v) * 100));
+function colorWheel() {
+    return {component: iro.ui.Wheel, options: {}};
 }
 
-function setPickerHSV(picker, value) {
-    if (value === getPickerHSV(picker)) return;
-    var chunks = value.split(",");
-    $(picker).wheelColorPicker("setColor", {
-        h: _hsv_round(chunks[0] / 360),
-        s: _hsv_round(chunks[1] / 100),
-        v: _hsv_round(chunks[2] / 100)
-    });
+function colorBox() {
+    return {component: iro.ui.Box, options: {}};
 }
 
-function initColor(cfg) {
-    var rgb = false;
-    if (typeof cfg === "object") {
-        rgb = cfg.rgb;
+function updateColor(mode, value) {
+    if (colorPicker) {
+        if (mode === "rgb") {
+            colorPicker.color.hexString = value;
+        } else if (mode === "hsv") {
+            colorPicker.color.hsv = hsvStringToColor(value);
+        }
+        return;
     }
 
-    // check if already initialized
-    var done = $("#colors > div").length;
-    if (done > 0) { return; }
+    // TODO: useRGB -> ltWheel?
+    // TODO: always show wheel + sliders like before?
+    var layout = []
+    if (mode === "rgb") {
+        layout.push(colorWheel());
+        layout.push(colorSlider("value"));
+    } else if (mode === "hsv") {
+        layout.push(colorBox());
+        layout.push(colorSlider("hue"));
+    }
 
-    // add template
-    var template = $("#colorTemplate").children();
-    var line = $(template).clone();
-    line.appendTo("#colors");
-
-    // init color wheel
-    $("input[name='color']").wheelColorPicker({
-        sliders: (rgb ? "wrgbp" : "whsp")
-    }).on("sliderup", function() {
-        if (rgb) {
-            sendAction("color", {rgb: getPickerRGB(this)});
-        } else {
-            sendAction("color", {hsv: getPickerHSV(this)});
+    var options = {
+        color: (mode === "rgb") ? value : hsvStringToColor(value),
+        layout: layout
+    };
+
+    colorPicker = new iro.ColorPicker("#color", options);
+    colorPicker.on("input:change", function(color) {
+        if (mode === "rgb") {
+            sendAction("color", {rgb: color.hexString});
+        } else if (mode === "hsv") {
+            sendAction("color", {hsv: colorToHsvString(color)});
         }
     });
-
 }
 
 function initCCT() {
@@ -1417,12 +1420,9 @@ function initChannels(num) {
     var done = $("#channels > div").length > 0;
     if (done) { return; }
 
-    // does it have color channels?
-    var colors = $("#colors > div").length > 0;
-
     // calculate channels to create
     var max = num;
-    if (colors) {
+    if (colorPicker) {
         max = num % 3;
         if ((max > 0) & useWhite) {
             max--;
@@ -1798,15 +1798,13 @@ function processData(data) {
 
         //removeIf(!light)
 
-        if ("rgb" === key) {
-            initColor({rgb: true});
-            setPickerRGB($("input[name='color']"), value);
+        if ("lightstate" === key) {
+            $("#color").toggle(value);
             return;
         }
 
-        if ("hsv" === key) {
-            initColor({hsv: true});
-            setPickerHSV($("input[name='color']"), value);
+        if (("rgb" === key) || ("hsv" === key)) {
+            updateColor(key, value);
             return;
         }
 

diff --git a/code/html/index.html b/code/html/index.html
@@ -11,9 +11,6 @@
         <link rel="stylesheet" href="vendor/pure-1.0.0.min.css" />
         <link rel="stylesheet" href="vendor/pure-grids-responsive-1.0.0.min.css" />
         <link rel="stylesheet" href="vendor/side-menu.css" />
-        <!-- removeIf(!light) -->
-        <link rel="stylesheet" href="vendor/jquery.wheelcolorpicker-3.0.8.css" />
-        <!-- endRemoveIf(!light) -->
         <!-- removeIf(!rfm69) -->
         <link rel="stylesheet" href="vendor/datatables-1.10.16.css" />
         <!-- endRemoveIf(!rfm69) -->
@@ -240,20 +237,23 @@ <h2>Current configuration</h2>
 
                                 <div id="relays"></div>
 
-                                <!-- removeIf(!curtain) -->
-                                <div id="curtains"></div>
-                                <!-- endRemoveIf(!curtain) -->
-
                                 <!-- removeIf(!light) -->
-                                <div id="colors"></div>
+                                <div id="color"></div>
                                 <div id="cct"></div>
+                                <!-- endRemoveIf(!light) -->
+
+                                <!-- removeIf(!light) -->
                                 <div id="channels"></div>
                                 <!-- endRemoveIf(!light) -->
 
                                 <!-- removeIf(!sensor) -->
                                 <div id="magnitudes"></div>
                                 <!-- endRemoveIf(!sensor) -->
 
+                                <!-- removeIf(!curtain) -->
+                                <div id="curtains"></div>
+                                <!-- endRemoveIf(!curtain) -->
+
                                 <!-- removeIf(!rfm69) -->
                                 <div class="pure-g module module-rfm69">
                                     <label class="pure-u-1 pure-u-lg-1-4">Packet count</label>
@@ -2176,14 +2176,6 @@ <h2>
         <!-- endRemoveIf(!sensor) -->
 
         <!-- removeIf(!light) -->
-        <div id="colorTemplate" class="template">
-            <div class="pure-g">
-                <label class="pure-u-1 pure-u-lg-1-4">Color</label>
-                <input class="pure-u-1 pure-u-lg-1-4" data-wcp-layout="block" name="color" readonly />
-            </div>
-
-        </div>
-
         <div id="brightnessTemplate" class="template">
             <div class="pure-g">
                 <label class="pure-u-1 pure-u-lg-1-4">Brightness</label>
@@ -2281,7 +2273,7 @@ <h2>
     <script src="vendor/jquery-3.4.1.slim.min.js"></script>
     <script src="custom.js"></script>
     <!-- removeIf(!light) -->
-    <script src="vendor/jquery.wheelcolorpicker-3.0.8.min.js"></script>
+    <script src="vendor/iro-5.3.1.min.js"></script>
     <!-- endRemoveIf(!light) -->
     <!-- removeIf(!rfm69) -->
     <script src="vendor/datatables-1.10.16.min.js"></script>