Support for HSV colors

code/espurna/config/general.h

@@ -312,7 +312,7 @@ PROGMEM const char* const custom_reset_string[] = {
 // This will only be enabled if WEB_SUPPORT is 1 (this is the default value)
 
 #define API_ENABLED             0           // Do not enable API by default
-#define API_BUFFER_SIZE         10          // Size of the buffer for HTTP GET API responses
+#define API_BUFFER_SIZE         15          // Size of the buffer for HTTP GET API responses
 #define API_REAL_TIME_VALUES    0           // Show filtered/median values by default (0 => median, 1 => real time)
 
 // -----------------------------------------------------------------------------
@@ -435,9 +435,9 @@ PROGMEM const char* const custom_reset_string[] = {
 
 // Light module
 #define MQTT_TOPIC_CHANNEL      "channel"
-#define MQTT_TOPIC_COLOR        "color"
-#define MQTT_TOPIC_COLOR_RGB    "color_rgb"
-#define MQTT_TOPIC_COLOR_HSV    "color_hsv"
+#define MQTT_TOPIC_COLOR        "color"     // DEPRECATED, use RGB instead
+#define MQTT_TOPIC_COLOR_RGB    "rgb"
+#define MQTT_TOPIC_COLOR_HSV    "hsv"
 #define MQTT_TOPIC_ANIM_MODE    "anim_mode"
 #define MQTT_TOPIC_ANIM_SPEED   "anim_speed"
 #define MQTT_TOPIC_BRIGHTNESS   "brightness"
@@ -523,6 +523,7 @@ PROGMEM const char* const custom_reset_string[] = {
 #define LIGHT_USE_WHITE         0           // Use white channel whenever RGB have the same value
 #define LIGHT_USE_GAMMA         0           // Use gamma correction for color channels
 #define LIGHT_USE_CSS           1           // Use CSS style to report colors (1=> "#FF0000", 0=> "255,0,0")
+#define LIGHT_USE_RGB           0           // Use RGB color selector (1=> RGB, 0=> HSV)
 
 // -----------------------------------------------------------------------------
 // POWER METERING

code/espurna/light.ino

@@ -156,6 +156,130 @@ void _toRGB(char * rgb, size_t len) {
     _toRGB(rgb, len, false);
 }
 
+// HSV string is expected to be "H,S,V", where:
+//   0 <= H <= 360
+//   0 <= S <= 100
+//   0 <= V <= 100
+void _fromHSV(const char * hsv) {
+
+    char * ptr = (char *) hsv;
+    if (strlen(ptr) == 0) return;
+    if (!lightHasColor()) return;
+
+    char * tok;
+    unsigned char count = 0;
+    unsigned int value[3] = {0};
+
+    tok = strtok(ptr, ",");
+    while (tok != NULL) {
+        value[count] = atoi(tok);
+        if (++count == 3) break;
+        tok = strtok(NULL, ",");
+    }
+    if (count != 3) return;
+
+    // HSV to RGB transformation -----------------------------------------------
+
+    double h = (value[0] == 360) ? 0 : (double) value[0] / 60.0;
+    double f = (h - floor(h));
+    double s = (double) value[1] / 100.0;
+    unsigned char v = round((double) value[2] * 255.0 / 100.0);
+    unsigned char p = round(v * (1.0 - s));
+    unsigned char q = round(v * (1.0 - s * f));
+    unsigned char t = round(v * (1.0 - s * (1.0 - f)));
+
+    switch (int(h)) {
+        case 0:
+            _channels[0].value = v;
+            _channels[1].value = t;
+            _channels[2].value = p;
+            break;
+        case 1:
+            _channels[0].value = q;
+            _channels[1].value = v;
+            _channels[2].value = p;
+            break;
+        case 2:
+            _channels[0].value = p;
+            _channels[1].value = v;
+            _channels[2].value = t;
+            break;
+        case 3:
+            _channels[0].value = p;
+            _channels[1].value = q;
+            _channels[2].value = v;
+            break;
+        case 4:
+            _channels[0].value = t;
+            _channels[1].value = p;
+            _channels[2].value = v;
+            break;
+        case 5:
+            _channels[0].value = v;
+            _channels[1].value = p;
+            _channels[2].value = q;
+            break;
+        default:
+            _channels[0].value = 0;
+            _channels[1].value = 0;
+            _channels[2].value = 0;
+            break;
+    }
+
+    _brightness = LIGHT_MAX_BRIGHTNESS;
+
+}
+
+void _toHSV(char * hsv, size_t len) {
+
+    if (!lightHasColor()) return;
+
+    double min, max;
+    double h, s, v;
+
+    double r = (double) _channels[0].value / 255.0;
+    double g = (double) _channels[1].value / 255.0;
+    double b = (double) _channels[2].value / 255.0;
+
+    min = (r < g) ? r : g;
+    min = (min < b) ? min : b;
+    max = (r > g) ? r : g;
+    max = (max > b) ? max : b;
+
+    v = 100.0 * max;
+    if (v == 0) {
+
+        h = s = 0;
+
+    } else {
+
+        s = 100.0 * (max - min) / max;
+        if (s == 0) {
+
+            h = 0;
+
+        } else {
+
+            if (max == r) {
+                if (g >= b) {
+                    h = 0.0 + 60.0 * (g - b) / (max - min);
+                } else {
+                    h = 360.0 + 60.0 * (g - b) / (max - min);
+                }
+            } else if (max == g) {
+                h = 120.0 + 60.0 * (b - r) / (max - min);
+            } else {
+                h = 240.0 + 60.0 * (r - g) / (max - min);
+            }
+        }
+
+    }
+
+    // String
+    snprintf_P(hsv, len, PSTR("%d,%d,%d"), round(h), round(s), round(v));
+
+}
+
 void _toLong(char * color, size_t len, bool applyBrightness) {
 
     if (!lightHasColor()) return;
@@ -328,7 +452,9 @@ void _lightMQTTCallback(unsigned int type, const char * topic, const char * payl
             mqttSubscribe(MQTT_TOPIC_BRIGHTNESS);
             mqttSubscribe(MQTT_TOPIC_MIRED);
             mqttSubscribe(MQTT_TOPIC_KELVIN);
-            mqttSubscribe(MQTT_TOPIC_COLOR);
+            mqttSubscribe(MQTT_TOPIC_COLOR); // DEPRECATE
+            mqttSubscribe(MQTT_TOPIC_COLOR_RGB);
+            mqttSubscribe(MQTT_TOPIC_COLOR_HSV);
         }
 
         char buffer[strlen(MQTT_TOPIC_CHANNEL) + 3];
@@ -355,8 +481,12 @@ void _lightMQTTCallback(unsigned int type, const char * topic, const char * payl
         }
 
         // Color
-        if (t.equals(MQTT_TOPIC_COLOR)) {
-            lightColor(payload);
+        if (t.equals(MQTT_TOPIC_COLOR) || t.equals(MQTT_TOPIC_COLOR_RGB)) { // DEPRECATE MQTT_TOPIC_COLOR
+            lightColor(payload, true);
+            lightUpdate(true, mqttForward());
+        }
+        if (t.equals(MQTT_TOPIC_COLOR_HSV)) {
+            lightColor(payload, false);
             lightUpdate(true, mqttForward());
         }
 
@@ -406,11 +536,14 @@ void lightMQTT() {
 
         // Color
         if (getSetting("useCSS", LIGHT_USE_CSS).toInt() == 1) {
-            _toRGB(buffer, 12, false);
+            _toRGB(buffer, sizeof(buffer), false);
         } else {
-            _toLong(buffer, 12, false);
+            _toLong(buffer, sizeof(buffer), false);
         }
-        mqttSend(MQTT_TOPIC_COLOR, buffer);
+        mqttSend(MQTT_TOPIC_COLOR, buffer); // DEPRECATE
+        mqttSend(MQTT_TOPIC_COLOR_RGB, buffer);
+        _toHSV(buffer, sizeof(buffer));
+        mqttSend(MQTT_TOPIC_COLOR_HSV, buffer);
 
         // Brightness
         snprintf_P(buffer, sizeof(buffer), PSTR("%d"), _brightness);
@@ -443,8 +576,13 @@ void lightUpdate(bool save, bool forward) {
         root["useWhite"] = getSetting("useWhite", LIGHT_USE_WHITE).toInt() == 1;
         root["useGamma"] = getSetting("useGamma", LIGHT_USE_GAMMA).toInt() == 1;
         if (lightHasColor()) {
-            root["color"] = lightColor();
-            root["brightness"] = lightBrightness();
+            bool useRGB = getSetting("useRGB", LIGHT_USE_RGB).toInt() == 1;
+            if (useRGB) {
+                root["rgb"] = lightColor(true);
+                root["brightness"] = lightBrightness();
+            } else {
+                root["hsv"] = lightColor(false);
+            }
         }
         JsonArray& channels = root.createNestedArray("channels");
         for (unsigned char id=0; id < lightChannels(); id++) {
@@ -477,18 +615,35 @@ bool lightState() {
     return _lightState;
 }
 
+void lightColor(const char * color, bool rgb) {
+    DEBUG_MSG_P(PSTR("[LIGHT] %s: %s\n"), rgb ? "RGB" : "HSV", color);
+    if (rgb) {
+        _fromRGB(color);
+    } else {
+        _fromHSV(color);
+    }
+}
+
 void lightColor(const char * color) {
-    _fromRGB(color);
+    lightColor(color, true);
 }
 
 void lightColor(unsigned long color) {
     _fromLong(color, false);
 }
 
+String lightColor(bool rgb) {
+    char str[12];
+    if (rgb) {
+        _toRGB(str, sizeof(str), false);
+    } else {
+        _toHSV(str, sizeof(str));
+    }
+    return String(str);
+}
+
 String lightColor() {
-    char rgb[8];
-    _toRGB(rgb, 8, false);
-    return String(rgb);
+    return lightColor(true);
 }
 
 unsigned int lightChannel(unsigned char id) {
@@ -527,6 +682,7 @@ void _lightAPISetup() {
         // API entry points (protected with apikey)
         if (lightHasColor()) {
 
+			// DEPRECATE
             apiRegister(MQTT_TOPIC_COLOR, MQTT_TOPIC_COLOR,
                 [](char * buffer, size_t len) {
                     if (getSetting("useCSS", LIGHT_USE_CSS).toInt() == 1) {
@@ -536,7 +692,31 @@ void _lightAPISetup() {
                     }
                 },
                 [](const char * payload) {
-                    lightColor(payload);
+                    lightColor(payload, true);
+                    lightUpdate(true, true);
+                }
+            );
+
+            apiRegister(MQTT_TOPIC_COLOR_RGB, MQTT_TOPIC_COLOR_RGB,
+                [](char * buffer, size_t len) {
+                    if (getSetting("useCSS", LIGHT_USE_CSS).toInt() == 1) {
+                        _toRGB(buffer, len, false);
+                    } else {
+                        _toLong(buffer, len, false);
+                    }
+                },
+                [](const char * payload) {
+                    lightColor(payload, true);
+                    lightUpdate(true, true);
+                }
+            );
+
+            apiRegister(MQTT_TOPIC_COLOR_HSV, MQTT_TOPIC_COLOR_HSV,
+                [](char * buffer, size_t len) {
+                    _toHSV(buffer, len);
+                },
+                [](const char * payload) {
+                    lightColor(payload, false);
                     lightUpdate(true, true);
                 }
             );

code/espurna/web.ino

@@ -191,31 +191,11 @@ void _wsParse(AsyncWebSocketClient *client, uint8_t * payload, size_t length) {
         #endif
 
         #if LIGHT_PROVIDER != LIGHT_PROVIDER_NONE
-        #ifdef LIGHT_PROVIDER_EXPERIMENTAL_RGB_ONLY_HSV_IR
-            if (lightHasColor()) {
-
-                if (action.equals("color_hsv") && root.containsKey("data")) {
-                   JsonObject& data = root["data"];
-                   setLightColor(data["h"],data["s"],data["v"]);
-                   lightUpdate(true, true);
-                }
-
-            }
-            if (action.equals("anim_mode") && root.containsKey("data")) {
-                lightAnimMode(root["data"]);
-                lightUpdate(true, true);
-            }
-            if (action.equals("anim_speed") && root.containsKey("data")) {
-                lightAnimSpeed(root["data"]);
-                lightUpdate(true, true);
-            }
 
-
-        #else
             if (lightHasColor()) {
 
-                if (action.equals("color") && root.containsKey("data")) {
-                    lightColor((const char *) root["data"]);
+                if (action.equals("rgb") && root.containsKey("data")) {
+                    lightColor((const char *) root["data"], true);
                     lightUpdate(true, true);
                 }
 
@@ -224,6 +204,11 @@ void _wsParse(AsyncWebSocketClient *client, uint8_t * payload, size_t length) {
                     lightUpdate(true, true);
                 }
 
+                if (action.equals("hsv") && root.containsKey("data")) {
+                    lightColor((const char *) root["data"], false);
+                    lightUpdate(true, true);
+                }
+
             }
 
             if (action.equals("channel") && root.containsKey("data")) {
@@ -233,7 +218,18 @@ void _wsParse(AsyncWebSocketClient *client, uint8_t * payload, size_t length) {
                     lightUpdate(true, true);
                 }
             }
-        #endif //LIGHT_PROVIDER_EXPERIMENTAL_RGB_ONLY_HSV_IR
+
+            #ifdef LIGHT_PROVIDER_EXPERIMENTAL_RGB_ONLY_HSV_IR
+                if (action.equals("anim_mode") && root.containsKey("data")) {
+                    lightAnimMode(root["data"]);
+                    lightUpdate(true, true);
+                }
+                if (action.equals("anim_speed") && root.containsKey("data")) {
+                    lightAnimSpeed(root["data"]);
+                    lightUpdate(true, true);
+                }
+            #endif //LIGHT_PROVIDER_EXPERIMENTAL_RGB_ONLY_HSV_IR
+
         #endif //LIGHT_PROVIDER != LIGHT_PROVIDER_NONE
 
     };
@@ -531,19 +527,19 @@ void _wsStart(uint32_t client_id) {
             root["useWhite"] = getSetting("useWhite", LIGHT_USE_WHITE).toInt() == 1;
             root["useGamma"] = getSetting("useGamma", LIGHT_USE_GAMMA).toInt() == 1;
             root["useCSS"] = getSetting("useCSS", LIGHT_USE_CSS).toInt() == 1;
+            bool useRGB = getSetting("useRGB", LIGHT_USE_RGB).toInt() == 1;
+            root["useRGB"] = useRGB;
             if (lightHasColor()) {
-
-            #ifdef LIGHT_PROVIDER_EXPERIMENTAL_RGB_ONLY_HSV_IR
+                if (useRGB) {
+                    root["rgb"] = lightColor(true);
+                    root["brightness"] = lightBrightness();
+                } else {
+                    root["hsv"] = lightColor(false);
+                }
+                #ifdef LIGHT_PROVIDER_EXPERIMENTAL_RGB_ONLY_HSV_IR
                     root["anim_mode"] = lightAnimMode();
                     root["anim_speed"] = lightAnimSpeed();
-                    JsonObject& color_hsv = root.createNestedObject("color_hsv");
-                    color_hsv["h"] = lightColorH();
-                    color_hsv["s"] = lightColorS();
-                    color_hsv["v"] = lightColorV();
-                #else
-                    root["color"] = lightColor();
-                    root["brightness"] = lightBrightness();
-                #endif
+                #endif // LIGHT_PROVIDER_EXPERIMENTAL_RGB_ONLY_HSV_IR
             }
             JsonArray& channels = root.createNestedArray("channels");
             for (unsigned char id=0; id < lightChannels(); id++) {

code/html/custom.js

@@ -421,14 +421,14 @@ function addNetwork() {
 
 }
 
-function initColor() {
+function initColorRGB() {
 
     // check if already initialized
     var done = $("#colors > div").length;
     if (done > 0) return;
 
     // add template
-    var template = $("#colorTemplate").children();
+    var template = $("#colorRGBTemplate").children();
     var line = $(template).clone();
     line.appendTo("#colors");
 
@@ -437,7 +437,7 @@ function initColor() {
         sliders: 'wrgbp'
     }).on('sliderup', function() {
         var value = $(this).wheelColorPicker('getValue', 'css');
-        websock.send(JSON.stringify({'action': 'color', 'data' : value}));
+        websock.send(JSON.stringify({'action': 'rgb', 'data' : value}));
     });
 
     // init bright slider
@@ -458,14 +458,14 @@ function initColor() {
 
 }
 
-function initColorHsv() {
+function initColorHSV() {
 
     // check if already initialized
     var done = $("#colors > div").length;
     if (done > 0) return;
 
     // add template
-    var template = $("#colorHsvTemplate").children();
+    var template = $("#colorHSVTemplate").children();
     var line = $(template).clone();
     line.appendTo("#colors");
 
@@ -473,12 +473,9 @@ function initColorHsv() {
     $('input[name="color"]').wheelColorPicker({
         sliders: 'whsvp'
     }).on('sliderup', function() {
-        var color_all = $(this).wheelColorPicker('getColor');
-        var color_hsv ={};
-        color_hsv.h	  =Math.floor(color_all.h * 255);
-        color_hsv.s	  =Math.floor(color_all.s * 255);
-        color_hsv.v	  =Math.floor(color_all.v * 255);
-        websock.send(JSON.stringify({'action': 'color_hsv', 'data' : color_hsv}));
+        var color = $(this).wheelColorPicker('getColor');
+        var value = parseInt(color.h * 360) + "," + parseInt(color.s * 100) + "," + parseInt(color.v * 100);
+        websock.send(JSON.stringify({'action': 'hsv', 'data': value}));
     });
 
 }
@@ -667,19 +664,21 @@ function processData(data) {
             return;
         }
 
-        if (key == "color") {
-            initColor();
+        if (key == "rgb") {
+            initColorRGB();
             $("input[name='color']").wheelColorPicker('setValue', data[key], true);
             return;
         }
 
-        if (key == "color_hsv") {
-            initColorHsv();
-            var color_hsv ={};
-            color_hsv.h = data[key]['h'] / 255;
-            color_hsv.s = data[key]['s'] / 255;
-            color_hsv.v = data[key]['v'] / 255;
-            $("input[name='color']").wheelColorPicker('setColor', color_hsv);
+        if (key == "hsv") {
+            initColorHSV();
+            // wheelColorPicker expects HSV to be between 0 and 1 all of them
+            var chunks = data[key].split(",");
+            var obj = {};
+            obj.h = chunks[0] / 360;
+            obj.s = chunks[1] / 100;
+            obj.v = chunks[2] / 100;
+            $("input[name='color']").wheelColorPicker('setColor', obj);
             return;
         }
 

code/html/index.html

@@ -378,6 +378,14 @@
                                     <div class="pure-u-1 pure-u-md-3-4 hint">Use color picker for the first 3 channels as RGB.<br />Will only work if the device has at least 3 dimmable channels.<br />Reload the page to update the web interface.</div>
                                 </div>
 
+                                <div class="pure-g module module-color">
+                                    <div class="pure-u-1 pure-u-sm-1-4"><label for="useRGB">Use RGB picker</label></div>
+                                    <div class="pure-u-1 pure-u-sm-1-4"><input type="checkbox" name="useRGB"  action="reload" tabindex="11" /></div>
+                                    <div class="pure-u-0 pure-u-md-1-2">&nbsp;</div>
+                                    <div class="pure-u-0 pure-u-md-1-4">&nbsp;</div>
+                                    <div class="pure-u-1 pure-u-md-3-4 hint">Use RGB color picker if enabled (plus brightness), otherwise use HSV (hue-saturation-value) style</div>
+                                </div>
+
                                 <div class="pure-g module module-color">
                                     <div class="pure-u-1 pure-u-sm-1-4"><label for="useWhite">Use white channel</label></div>
                                     <div class="pure-u-1 pure-u-sm-1-4"><input type="checkbox" name="useWhite" action="reload" tabindex="9" /></div>
@@ -1007,7 +1015,7 @@
             </div>
         </div>
 
-        <div id="colorTemplate" class="template">
+        <div id="colorRGBTemplate" class="template">
             <div class="pure-g">
                 <label class="pure-u-1 pure-u-sm-1-4">Color</label>
                 <input class="pure-u-1 pure-u-sm-1-4" data-wcp-layout="block" name="color" readonly />
@@ -1019,7 +1027,7 @@
             </div>
         </div>
 
-        <div id="colorHsvTemplate" class="template">
+        <div id="colorHSVTemplate" class="template">
             <div class="pure-g">
                 <label class="pure-u-1 pure-u-sm-1-4">Color</label>
                 <input class="pure-u-1 pure-u-sm-1-4" data-wcp-layout="block" name="color" readonly />