2
0

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

This commit is contained in:
Pierre CLEMENT
2018-01-02 14:20:23 +01:00
parent 24ef7012f9
commit e504a00de9
3 changed files with 30 additions and 4 deletions

View File

@@ -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">

View File

@@ -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: {

View File

@@ -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>
<input type="text" id="node-input-sid" placeholder="sid">
<label for="node-config-input-sid"><i class="icon-tag"></i> SID (optional)</label>
<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>