feat(color): add color picker and brightness range on set color action

node-red-contrib-xiaomi-actions/xiaomi-actions.html

@@ -184,7 +184,10 @@
         color: '#64C4CD',
         defaults: {
             gateway: {value:"", type:"xiaomi-configurator"},
-            name: {value: ""}
+            name: {value: ""},
+            brightness: {value: 100},
+            hexRgbColor: {value: "#ffffff"},
+            color: {value:{red: 255, green: 255, blue: 255}}
         },
         inputs: 1,
         outputs: 1,
@@ -192,6 +195,17 @@
         icon: "light-icon.png",
         label: function () {
             return this.name || "set light";
+        },
+        oneditsave: function() {
+            var hexRgbColor = $("#node-input-hexRgbColor").val();
+            var split = hexRgbColor.slice(1).match(/.{1,2}/g).map(function(hexColor) {
+                return parseInt(hexColor, 16);
+            });
+            this.color = {
+                red: split[0],
+                green: split[1],
+                blue: split[2]
+            };
         }
     });
 </script>
@@ -205,6 +219,14 @@
         <label for="node-input-name"><i class="icon-tag"></i> Name</label>
         <input type="text" id="node-input-name" placeholder="Name">
     </div>
+    <div class="form-row">
+        <label for="node-input-brightness"><i class="icon-tag"></i> Brightness</label>
+        <input type="range" id="node-input-brightness" min="0" max="100">
+    </div>
+    <div class="form-row">
+        <label for="node-input-hexRgbColor"><i class="icon-tag"></i> Color</label>
+        <input type="color" id="node-input-hexRgbColor">
+    </div>
 </script>
 
 <script type="text/x-red" data-help-name="xiaomi-actions gateway_light">

node-red-contrib-xiaomi-actions/xiaomi-actions.js

@@ -80,11 +80,15 @@ module.exports = function(RED) {
     function XiaomiActionGatewayLight(config) {
         RED.nodes.createNode(this, config);
         this.gateway = RED.nodes.getNode(config.gateway);
+        this.color = RED.nodes.getNode(config.color);
+        this.brightness = RED.nodes.getNode(config.brightness);
         var node = this;
 
         node.on('input', function(msg) {
             if(node.gateway && node.gateway.sid && node.gateway.key && node.gateway.lastToken) {
-                var rgb = miDevicesUtils.computeColorValue(msg.brightness, msg.color.red, msg.color.green, msg.color.blue);
+                var color = msg.color || node.color;
+                var brightness = msg.brightness || node.brightness;
+                var rgb = miDevicesUtils.computeColorValue(brightness, color.red, color.green, color.blue);
                 msg.payload = {
                     cmd: "write",
                     data: {

node-red-contrib-xiaomi-configurator/xiaomi-configurator.html

@@ -94,8 +94,8 @@
         <input type="text" id="node-config-input-ip" placeholder="IP">
     </div>
     <div class="form-row">
-        <label for="node-input-sid"><i class="icon-tag"></i> SID (optional)</label>
+        <label for="node-config-input-sid"><i class="icon-tag"></i> SID (optional)</label>
-        <input type="text" id="node-input-sid" placeholder="sid">
+        <input type="text" id="node-config-input-sid" placeholder="sid">
     </div>
     <div class="form-row">
         <label for="node-config-input-key"><i class="fa fa-ticket"></i> Key/Password</label>