node-red-contrib-huemagic 3.0.0 → 4.0.0

package/huemagic/hue-magic.html

@@ -1,7 +1,7 @@
 <script type="text/x-red" data-template-name="hue-magic">
     <div class="form-row">
         <label for="node-input-name"><i class="fa fa-tag"></i> <span data-i18n="hue-magic.config.name"></span></label>
-        <input type="text" id="node-input-name" data-i18n="[placeholder]hue-magic.config.input-name">
+        <input type="text" id="node-input-name" data-i18n="[placeholder]hue-magic.config.input-name" style="width: calc(100% - 105px)">
     </div>
     <div class="form-row">
         <label for="node-input-endless"><i class="fa fa-refresh"></i> <span data-i18n="hue-magic.config.loop"></span></label>
@@ -13,15 +13,15 @@
         <input type="checkbox" id="node-input-restore" style="display:inline-block; width:22px; vertical-align:baseline;"><span data-i18n="hue-magic.config.restore-state"></span>
         </label>
     </div>
-    <div class="form-row">
+    <div class="form-row" style="margin-top: 30px">
         <label for="node-input-steps"><i class="fa fa-magic"></i> <span data-i18n="hue-magic.config.animation"></span></label>
     </div>
     <div style="display: none;">
         <div class="form-row">
-            <input type="text" id="node-input-preset" placeholder="...">
+            <input type="text" id="node-input-preset" placeholder="{}">
         </div>
         <div class="form-row">
-            <input type="text" id="node-input-steps" placeholder="...">
+            <input type="text" id="node-input-steps" placeholder="{}">
         </div>
     </div>
     <div class="form-row form-animations">
@@ -145,31 +145,31 @@
         category: 'HueMagic',
         color: '#ff4242',
         defaults: {
-            name: {value:""},
-            endless: {value: true},
-            restore: {value: false},
-            preset: {value: null},
-            steps: {value: null}
+            name: { value:"" },
+            endless: { value: true },
+            restore: { value: false },
+            preset: { value: null },
+            steps: { value: null }
         },
+        align: 'left',
+        icon: "hue-magic.png",
         inputs: 1,
         outputs: 1,
+        label: function() {
+            return this.name || this._("hue-magic.node.title");
+        },
+        paletteLabel: function() {
+            return this._("hue-magic.node.title");
+        },
         inputLabels: function() {
             return this._("hue-magic.node.input");
         },
         outputLabels: function() {
             return this._("hue-magic.node.output");
         },
-        align: 'right',
-        icon: "hue-magic.png",
-        paletteLabel: function() {
-            return this._("hue-magic.node.title");
-        },
-        label: function() {
-            return this.name || this._("hue-magic.node.title");
-        },
         oneditprepare: function()
         {
-            var scope = this;
+            const scope = this;
             this.animations = [];
 
             var preset = $('#node-input-preset').val();
@@ -178,7 +178,6 @@
             $.get('hue/animations?nc=' + Math.random())
             .done( function(data)
             {
-                // LOGIC
                 scope.animations = JSON.parse(data);
                 $.each(scope.animations, function(i, animation)
                 {
@@ -238,9 +237,26 @@
                 // SET STEPS
                 var index = selectedAnimation.attr("data-id");
                 var steps = JSON.stringify(JSON.parse(selectedAnimation.attr("data-steps")));
-
                 $('#node-input-steps').val(steps);
             });
+        },
+        button: {
+            onclick: function()
+            {
+                const node = this;
+                if(node.steps)
+                {
+                    $.ajax({
+                        url: "inject/" + node.id,
+                        type: "POST",
+                        data: JSON.stringify({ __user_inject_props__: "play"}),
+                        contentType: "application/json; charset=utf-8",
+                        success: function (resp) {
+                            RED.notify(node.name + ": " + node._("hue-magic.node.playmsg"), { type: "success", id: "status", timeout: 2000 });
+                        }
+                    });
+                }
+            }
         }
     });
 </script>

package/huemagic/hue-magic.js

@@ -6,10 +6,10 @@ module.exports = function(RED)
 	{
 		RED.nodes.createNode(this, config);
 
-		var scope = this;
-		let async = require('async');
-		var isEndless = config.endless;
-		var restoreState = config.restore;
+		const scope = this;
+		const async = require('async');
+		const isEndless = config.endless;
+		const restoreState = config.restore;
 
 		// STEPS INITIALIZATION
 		this.steps = config.steps;
@@ -182,16 +182,25 @@ module.exports = function(RED)
 		}
 
 		//
-		// ENABLE HUE MAGIC ANIMATION
+		// START THE HUEMAGIC ANIMATION
 		this.on('input', function(msg, send, done)
 		{
-			// Node-RED < 1.0
+			// REDEFINE SEND AND DONE IF NOT AVAILABLE
 			send = send || function() { scope.send.apply(scope,arguments); }
+			done = done || function() { scope.done.apply(scope,arguments); }
+			
+			if(typeof msg.payload != 'undefined' && typeof msg.payload.steps != 'undefined')
+			{
+				scope.steps = msg.payload.steps;
+				msg.payload.animate = true;
+			}
+
+			const playFromButton = (typeof msg.__user_inject_props__ != 'undefined' && msg.__user_inject_props__ == "play");
 
-			if(scope.steps != null||typeof msg.payload.steps != 'undefined')
+			if(scope.steps != null)
 			{
 				// SPECIALS CONFIG
-				if(typeof msg.payload.specials != 'undefined')
+				if(typeof msg.payload != 'undefined' && typeof msg.payload.specials != 'undefined')
 				{
 					// APPLY RANDOM ORDER CONFIG
 					if(typeof msg.payload.specials.randomOrder != 'undefined')
@@ -201,11 +210,11 @@ module.exports = function(RED)
 				}
 
 				// TURN ON ANIMATION
-				if(typeof msg.payload.animate == 'undefined'||msg.payload.animate == true||msg.payload === true)
+				if(typeof msg.payload != 'undefined' && msg.payload.animate == true||msg.payload === true||playFromButton === true)
 				{
+					var animationSteps = typeof scope.steps === 'string' ? JSON.parse(scope.steps) : scope.steps;
 					if(scope.isAnimating == false)
 					{
-						var animationSteps = (typeof msg.payload.steps != 'undefined') ? msg.payload.steps : JSON.parse(scope.steps);
 						scope.status({fill: "green", shape: "dot", text: "hue-magic.node.animating"});
 
 						scope.isAnimating = true;
@@ -214,7 +223,7 @@ module.exports = function(RED)
 				}
 
 				// TURN OFF ANIMATION
-				if((typeof msg.payload.animate != 'undefined' && msg.payload.animate == false)||msg.payload === false)
+				if((typeof msg.payload != 'undefined' && typeof msg.payload.animate != 'undefined' && msg.payload.animate == false)||msg.payload === false)
 				{
 					scope.animationStopped(done);
 					scope.isAnimating = false;
@@ -244,25 +253,32 @@ module.exports = function(RED)
 	// GET ANIMATIONS
 	RED.httpAdmin.get('/hue/animations', function(req, res, next)
 	{
-		let fs = require("fs");
-		let path = require("path");
+		const fs = require("fs");
+		const path = require("path");
+		const dir = path.resolve(__dirname, 'animations');
 
 		var allAnimations = [];
-		var dir = path.resolve(__dirname, 'animations');
+		fs.readdirSync(dir).forEach(function(filename)
+		{
+			try
+			{
+				var filepath = path.resolve(dir, filename);
+				var stat = fs.statSync(filepath);
+				var isFile = stat.isFile();
+				var fileID = path.basename(filepath, '.json');
 
-		fs.readdirSync(dir).forEach(filename => {
-			var filepath = path.resolve(dir, filename);
-			var stat = fs.statSync(filepath);
-			var isFile = stat.isFile();
-			var fileID = path.basename(filepath, '.json');
+				if(isFile)
+				{
+					var animation = JSON.parse(fs.readFileSync(filepath, "utf8"));
+					animation.info.id = fileID;
 
-			if(isFile)
+					allAnimations.push(animation);
+				};
+			}
+			catch(e)
 			{
-				var animation = JSON.parse(fs.readFileSync(filepath, "utf8"));
-				animation.info.id = fileID;
-
-				allAnimations.push(animation);
-			};
+				console.log(fileID, e);
+			}
 		});
 
 		// SEND ALL ANIMATIONS
@@ -274,7 +290,10 @@ module.exports = function(RED)
 	RED.httpAdmin.get('/hue/animations/:file', function(req, res, next)
 	{
 		let path = require("path");
-		res.sendFile(path.resolve(__dirname, 'animations', 'previews', req.params.file));
+		res.sendFile(req.params.file, {
+			root: path.resolve(__dirname, 'animations', 'previews'),
+			dotfiles: 'deny'
+		});
 	});
 
 	//
@@ -282,6 +301,9 @@ module.exports = function(RED)
 	RED.httpAdmin.get('/hue/assets/:file', function(req, res, next)
 	{
 		let path = require("path");
-		res.sendFile(path.resolve(__dirname, 'assets', req.params.file));
+		res.sendFile(req.params.file, {
+			root: path.resolve(__dirname, 'assets'),
+			dotfiles: 'deny'
+		});
 	});
 }

package/huemagic/hue-motion.html

@@ -1,32 +1,34 @@
 <script type="text/x-red" data-template-name="hue-motion">
     <div class="form-row">
         <label for="node-input-name"><i class="fa fa-tag"></i> <span data-i18n="hue-motion.config.name"></span></label>
-        <input type="text" id="node-input-name" data-i18n="[placeholder]hue-motion.config.input-name">
+        <input type="text" id="node-input-name" data-i18n="[placeholder]hue-motion.config.input-name" style="width: calc(100% - 105px)">
     </div>
     <div class="form-row">
         <label for="node-input-bridge"><i class="fa fa-server"></i> Bridge</label>
-        <input type="text" id="node-input-bridge">
+        <input type="text" id="node-input-bridge" style="width: calc(100% - 105px)">
     </div>
     <div class="form-row">
         <label for="node-input-sensorid"><i class="fa fa-eye"></i> <span data-i18n="hue-motion.config.sensor"></span></label>
-        <div style="display: inline-block; position: relative; width: 70%; height: 20px;">
-            <div style="position: absolute; left: 0px; right: 40px;">
-                <input type="text" id="node-input-sensorid" placeholder="1" style="width: 100%"/>
+        <div style="display: inline-flex; width: calc(100% - 105px)">
+            <div id="input-select-toggle" style="flex-grow: 1;">
+                <input type="text" id="node-input-sensorid" placeholder="00000000-0000-0000-0000-000000000000" style="width: 100%"/>
             </div>
-            <a id="node-config-input-scan-sensors" class="editor-button" style="position: absolute; right: 0px; top: 0px;">
+            <button id="node-config-input-scan-sensors" type="button" class="red-ui-button" style="margin-left: 10px;">
                 <i class="fa fa-search"></i>
-            </a>
+            </button>
         </div>
     </div>
-    <div class="form-row">
-        <label for="node-input-skipevents"><i class="fa fa-sign-out"></i> <span data-i18n="hue-motion.config.skipevents"></span></label>
-        <input type="checkbox" id="node-input-skipevents" style="display:inline-block; width:22px; vertical-align:baseline;"><span data-i18n="hue-motion.config.skipevents-node"></span>
-        </label>
+    <div class="form-row" style="margin-top: 30px">
+        <div style="display: inline-flex; width: calc(100% - 105px)">
+            <input type="checkbox" id="node-input-skipevents" style="flex: 15px;">
+            <span data-i18n="hue-motion.config.skipevents-node" style="width: 100%; margin-left: 10px;"></span>
+        </div>
     </div>
     <div class="form-row">
-        <label for="node-input-universalevents"><i class="fa fa-bullhorn"></i> <span data-i18n="hue-motion.config.universalevents"></span></label>
-        <input type="checkbox" id="node-input-universalevents" style="display:inline-block; width:22px; vertical-align:baseline;"><span data-i18n="hue-motion.config.universalevents-node"></span>
-        </label>
+        <div style="display: inline-flex; width: calc(100% - 105px)">
+            <input type="checkbox" id="node-input-initevents" style="flex: 15px;">
+            <span data-i18n="hue-motion.config.sendinitevents-node" style="width: 100%; margin-left: 10px;"></span>
+        </div>
     </div>
 </script>
 
@@ -35,95 +37,161 @@
         category: 'HueMagic',
         color: '#9876d3',
         defaults: {
-            name: {value:""},
-            bridge: {type: "hue-bridge", required: true},
-            sensorid: {value:"", required: false, validate: function(id) {
-                if(id.length < 1) { return true; }
-                else if(!isNaN(id)) { return true; }
-                else { return false; }
-            }},
-            skipevents: {value: false},
-            universalevents: {value: false}
+            name: { value:"" },
+            bridge: { type: "hue-bridge", required: true },
+            sensorid: { value:"", required: false },
+            skipevents: { value: false },
+            initevents: { value: false }
         },
+        align: 'left',
+        icon: "hue-motion.png",
         inputs: 1,
         outputs: 1,
+        label: function() {
+            return this.name || this._("hue-motion.node.title");
+        },
+        paletteLabel: function() {
+            return this._("hue-motion.node.title");
+        },
         inputLabels: function() {
             return this._("hue-motion.node.input");
         },
         outputLabels: function() {
             return this._("hue-motion.node.output");
         },
-        align: 'right',
-        icon: "bridge.png",
-        paletteLabel: function() {
-            return this._("hue-motion.node.title");
-        },
-        label: function() {
-            return this.name || this._("hue-motion.node.title");
-        },
         oneditprepare: function()
         {
-            var scope = this;
+            const scope = this;
+            let options = [];
 
-            function manualMotionSensorID()
+            function manualInput()
             {
+                // GET CURRENT SELECTED VALUE
                 var current = $('#node-input-sensorid').val();
-                $('#node-input-sensorid').replaceWith('<input type="text" id="node-input-sensorid" style="width: 100%"/>');
-                $('#node-input-sensorid').val(current);
+
+                // REMOVE SELECT FIELD
+                $('#input-select-toggle').empty();
+
+                // CREATE NEW INPUT FIELD
+                $('#input-select-toggle').append('<input type="text" id="node-input-sensorid" placeholder="00000000-0000-0000-0000-000000000000" style="width: 100%" value="'+current+'" />');
+
+                // CHANGE BUTTON ICON
+                var button = $("#node-config-input-scan-sensors");
+                var buttonIcon = button.find("i");
+                buttonIcon.removeClass("fa-pencil");
+                buttonIcon.addClass("fa-search");
             }
 
-            function searchAndSelectMotionSensor()
+            function searchAndSelect()
             {
+                // GET CURRENT BRIDGE CONFIGURATION
+                var bridgeConfig = RED.nodes.node($('#node-input-bridge option:selected').val());
+                if(!bridgeConfig) { return false; }
+
+                // GET CURRENT SELECTED VALUE
                 var current = $('#node-input-sensorid').val();
-                $('#node-input-sensorid').replaceWith('<select id="node-input-sensorid" style="width: 100%"></select>');
-                $('#node-input-sensorid').append('<option selected="selected" value="null">'+scope._("hue-motion.config.searching")+'</option>');
 
-                var bridgeConfig = RED.nodes.node($('#node-input-bridge option:selected').val());
-                $.get('hue/sensors', {bridge: bridgeConfig.bridge, key: bridgeConfig.key, type: "ZLLPresence"})
-                .done(function(data) {
-                    var motionSensors = JSON.parse(data);
+                // TRIGGER SEARCHING NOTIFICATION
+                var notification = RED.notify(scope._("hue-motion.config.searching"), { type: "compact", modal: true, fixed: true });
 
-                    if(motionSensors.length <= 0)
+                // GET THE SENSORS
+                $.get('hue/ressources', { bridge: bridgeConfig.bridge, key: bridgeConfig.key, type: "motion" })
+                .done( function(data) {
+                    var allRessources = JSON.parse(data);
+                    if(allRessources.length <= 0)
                     {
-                        RED.notify(scope._("hue-motion.config.none-found"), "error");
+                        notification.close();
+                        RED.notify(scope._("hue-motion.config.none-found"), { type: "error" });
+                        return false;
                     }
 
-                    // RESET OPTIONS
-                    $('#node-input-sensorid').empty();
-
-                    // SET MOTION SENSORS AS OPTIONS
-                    motionSensors.forEach(function(sensor)
+                    // SET OPTIONS
+                    allRessources.forEach(function(ressource)
                     {
-                        $('#node-input-sensorid').append('<option value="' + sensor.id + '">' + sensor.name + '</option>');
+                        if(ressource.model)
+                        {
+                            options[ressource.id] = { value: ressource.id, label: ressource.name + " ("+ressource.model+")" };
+                        }
+                        else
+                        {
+                            options[ressource.id] = { value: ressource.id, label: ressource.name };
+                        }
                     });
 
                     // SELECT CURRENT VALUE
-                    $('#node-input-sensorid').val(current);
+                    $("#node-input-sensorid").typedInput({
+                        types: [
+                            {
+                                value: current,
+                                options: Object.values(options)
+                            }
+                        ]
+                    });
+
+                    // CHANGE BUTTON ICON
+                    var button = $("#node-config-input-scan-sensors");
+                    var buttonIcon = button.find("i");
+                    buttonIcon.removeClass("fa-search");
+                    buttonIcon.addClass("fa-pencil");
+
+                    // CLOSE SEARCH NOTIFICATION
+                    notification.close();
                 })
                 .fail(function()
                 {
+                    notification.close();
                     RED.notify(scope._("hue-motion.config.unknown-error"), "error");
                 });
             }
 
-            $(document).on('change', '#node-input-sensorid', function()
+            // CHANGED SENSOR ID? -> REPLACE NAME (IF POSSIBLE)
+            $(document).on('change', '#node-input-sensorid', function(e)
             {
-                var sensorName = $('#node-input-sensorid option:selected').text();
-                if(sensorName.length > 0)
+                let currentSelectedOptionID = $(e.currentTarget).val();
+                let currentSelectedOptionValue = (currentSelectedOptionID.length > 0 && options[currentSelectedOptionID]) ? options[currentSelectedOptionID].label : false;
+
+                if(currentSelectedOptionValue !== false)
                 {
-                    $('#node-input-name').val(sensorName);
+                    $('#node-input-name').val(currentSelectedOptionValue.split(" (")[0]);
                 }
             });
 
+            // TOGGLE SELECT/INPUT FIELD
             $('#node-config-input-scan-sensors').click(function()
             {
-                if($('#node-input-sensorid').prop("tagName") === "INPUT")
+                if($('#input-select-toggle').find(".red-ui-typedInput-container").length > 0)
                 {
-                    searchAndSelectMotionSensor();
-                } else {
-                    manualMotionSensorID();
+                    manualInput();
+                }
+                else
+                {
+                    searchAndSelect();
                 }
             });
+        },
+        button: {
+            enabled: function() {
+                return (this.sensorid && this.sensorid.length > 1)
+            },
+            visible: function() {
+                return (this.sensorid && this.sensorid.length > 1)
+            },
+            onclick: function()
+            {
+                const node = this;
+                if(node.bridge)
+                {
+                    $.ajax({
+                        url: "inject/" + node.id,
+                        type: "POST",
+                        data: JSON.stringify({ __user_inject_props__: "status"}),
+                        contentType: "application/json; charset=utf-8",
+                        success: function (resp) {
+                            RED.notify(node.name + ": " + node._("hue-motion.node.statusmsg"), { type: "success", id: "status", timeout: 2000 });
+                        }
+                    });
+                }
+            }
         }
     });
 </script>