node-red-contrib-huemagic 2.8.2 → 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,21 +13,20 @@
         <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">
         <div class="animation template">
-            <div class="color"></div>
-            <div class="brightness"></div>
+            <img src="#" class="color">
             <div class="info">
                 <span><name>Name</name> <dur>(dur)</dur></span>
             </div>
@@ -43,9 +42,10 @@
     display: grid;
     -ms-grid-columns: 30% 3.29% 30% 3.29% 30%;
     grid-template-columns: 30% 30% 30%;
-    grid-gap: 3.29%;
+    grid-gap: 2.29% 3.29%;
 
     max-width: 40vw;
+    padding-bottom: 85px;
 }
 
 .form-animations .animation
@@ -53,12 +53,15 @@
     position: relative;
     cursor: pointer;
 
+    border-radius: 20px;
     overflow: hidden;
-    -webkit-border-radius: 5px;
-    -moz-border-radius: 5px;
-    border-radius: 5px;
 
-    border: 3px solid #fff;
+    border: 2px solid #fff;
+    -webkit-transition: -webkit-box-shadow 333ms ease-in-out;
+    transition: -webkit-box-shadow 333ms ease-in-out;
+    -o-transition: box-shadow 333ms ease-in-out;
+    transition: box-shadow 333ms ease-in-out;
+    transition: box-shadow 333ms ease-in-out, -webkit-box-shadow 333ms ease-in-out;
 }
 
 .form-animations .animation.template
@@ -66,25 +69,17 @@
     display: none;
 }
 
-.form-animations .animation.selected
+.form-animations .animation:active
 {
-    border: 3px solid #000;
+    opacity: 0.7;
 }
 
-.form-animations .animation .color
+.form-animations .animation.selected
 {
-    position: absolute;
-
-    top: 0;
-    left: 0;
-
-    height: 100%;
-    width: 100%;
-
-    z-index: 1;
+    box-shadow: 0 10px 40px rgba(0,0,0,0.1), 0 6px 13px rgba(0,0,0,0.23);
 }
 
-.form-animations .animation .brightness
+.form-animations .animation .color
 {
     position: absolute;
 
@@ -94,11 +89,8 @@
     height: 100%;
     width: 100%;
 
-    z-index: 11;
-    opacity: 0;
-
-    background: rgb(0,0,0);
-    background: linear-gradient(0deg, rgba(0,0,0,1) 0%, rgba(77,77,77,1) 100%);
+    z-index: 1;
+    pointer-events: none;
 }
 
 .form-animations .animation .info
@@ -116,17 +108,13 @@
 
 .form-animations .animation .info span
 {
-    display: inline-block;
-    margin: 0 auto;
-
+    display: block;
+    margin: 0 12px;
     color: #000;
     background-color: rgba(255,255,255,0.8);
     font-size: 11px;
-    padding: 2.5px 5px;
-
-    -webkit-border-radius: 3px;
-    -moz-border-radius: 3px;
-    border-radius: 3px;
+    padding: 2.5px 0;
+    border-radius: 8px;
 }
 
 .form-animations .animation .info span name
@@ -157,228 +145,77 @@
         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();
-            $.getScript("hue/assets/anime.js", function( data, textStatus, jqxhr )
+
+            // LOAD ANIMATIONS
+            $.get('hue/animations?nc=' + Math.random())
+            .done( function(data)
             {
-                // LOAD ANIMATIONS
-                $.get('hue/animations?nc=' + Math.random())
-                .done( function(data)
+                scope.animations = JSON.parse(data);
+                $.each(scope.animations, function(i, animation)
                 {
-                    // HELPER
-                    function rgbToHex(r, g, b)
+                    var animationTemplate = $(".animation.template").clone();
+                    animationTemplate.removeClass("template");
+
+                    // APPLY INFORMATION
+                    animationTemplate.attr("data-id", animation.info.id);
+                    animationTemplate.attr("data-name", animation.info.name);
+                    animationTemplate.attr("data-steps", JSON.stringify(animation.steps));
+                    animationTemplate.find("name").html(animation.info.name);
+                    animationTemplate.find(".color").attr("src", "hue/animations/" + animation.info.id + ".gif");
+
+                    // IS SELECTED?
+                    if(preset == animation.info.id)
                     {
-                        return "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
+                        animationTemplate.addClass("selected");
                     }
 
-                    function adjustBrightness(hex, lum)
-                    {
-                        hex = String(hex).replace(/[^0-9a-f]/gi, '');
-                        if (hex.length < 6)
-                        {
-                            hex = hex[0]+hex[0]+hex[1]+hex[1]+hex[2]+hex[2];
-                        }
-                        lum = lum || 0;
-
-                        var rgb = "#", c, i;
-                        for (i = 0; i < 3; i++)
-                        {
-                            c = parseInt(hex.substr(i*2,2), 16);
-                            c = Math.round(Math.min(Math.max(0, c + (c * lum)), 255)).toString(16);
-                            rgb += ("00"+c).substr(c.length);
-                        }
-
-                        return rgb;
-                    }
-
-
-                    // FRAMES
-                    function addPreviewFrame(step)
-                    {
-                        // TRANSITION?
-                        var stepTransition = 300;
-                        if(typeof step.animation.transitionTime != 'undefined')
-                        {
-                            stepTransition = parseFloat(step.animation.transitionTime)*1000;
-                        }
-
-                        // DEFINE COLOR
-                        var color = "#fff";
-                        if(typeof step.animation.rgb != 'undefined')
-                        {
-                            color = rgbToHex(step.animation.rgb[0], step.animation.rgb[1], step.animation.rgb[2]);
-                        }
-                        else if(typeof step.animation.hex != 'undefined')
-                        {
-                            color = step.animation.hex;
-                        }
-                        else if(typeof step.animation.color != 'undefined')
-                        {
-                            if(step.animation.color == "random"||step.animation.color == "any")
-                            {
-                                color = '#'+(Math.random()*0xFFFFFF<<0).toString(16);
-                            }
-                            else
-                            {
-                                color = step.animation.color;
-                            }
-                        }
-
-                        // ADJUST COLOR BRIGHTNESS
-                        if(typeof step.animation.brightness != 'undefined')
-                        {
-                            var lum = (step.animation.brightness/100)-1;
-                            color = adjustBrightness(color, (lum < -0.5) ? -0.5 : lum);
-                        }
-
-                        return { background: color, delay: step.delay, duration: stepTransition };
-                    }
-
-                    function addPreviewFrameBrightness(step)
-                    {
-                        // TRANSITION?
-                        var stepTransition = 300;
-                        if(typeof step.animation.transitionTime != 'undefined')
-                        {
-                            stepTransition = parseFloat(step.animation.transitionTime)*1000;
-                        }
+                    // CALC DURATION IN SECONDS AND ANIMATION
+                    var duration = 0;
+                    $.each(animation.steps, function(z, oneStep) { duration += oneStep.delay; });
 
-                        // ADJUST COLOR BRIGHTNESS
-                        var opacity = 0;
-                        if(typeof step.animation.brightness != 'undefined')
-                        {
-                            opacity = 1-(step.animation.brightness/100);
-                            opacity = (opacity > 0.5) ? 0.5 : opacity;
-                        }
-
-                        return { opacity: opacity, delay: step.delay, duration: stepTransition };
-                    }
+                    // NORMALIZE DUR IN SECONDS
+                    duration = duration/1000;
 
-                    // LOGIC
-                    scope.animations = JSON.parse(data);
-                    $.each(scope.animations, function(i, animation)
-                    {
-                        var animationTemplate = $(".animation.template").clone();
-                        animationTemplate.removeClass("template");
-
-                        // APPLY INFORMATION
-                        animationTemplate.attr("data-id", animation.info.id);
-                        animationTemplate.attr("data-name", animation.info.name);
-                        animationTemplate.attr("data-steps", JSON.stringify(animation.steps));
-                        animationTemplate.find("name").html(animation.info.name);
-
-                        // SPECIAL CONFIGS?
-                        var randomOrder = false;
-                        if(typeof animation.specials != 'undefined')
-                        {
-                            // APPLY RANDOM ORDER CONFIG
-                            if(typeof animation.specials.randomOrder != 'undefined')
-                            {
-                                randomOrder = animation.specials.randomOrder;
-                            }
-                        }
-
-                        // IS SELECTED?
-                        if(preset == animation.info.id)
-                        {
-                            animationTemplate.addClass("selected");
-                        }
-
-                        // CALC DURATION IN SECONDS AND ANIMATION
-                        var duration = 0;
-                        var isFirst = true;
-                        var keyframes = [];
-                        // var keyframesBrightness = [];
-                        $.each(animation.steps, function(z, oneStep)
-                        {
-                            duration += oneStep.delay;
-
-                            // TRANSITION?
-                            if(typeof oneStep.animation.transitionTime != 'undefined')
-                            {
-                                duration += parseFloat(oneStep.animation.transitionTime)*1000;
-                            }
-
-                            if(isFirst == true)
-                            {
-                                oneStep.animation.transitionTime = 0;
-                                isFirst = false;
-                            }
-
-                            // SET CURRENT STEP COLOR
-                            keyframes.push(addPreviewFrame(oneStep));
-                            // keyframesBrightness.push(addPreviewFrameBrightness(oneStep));
-                        });
-
-                        // REPEAT KEYFRAMES FOR SMOOTH TRANSITIONS
-                        var r = 0;
-                        while (r < 10)
-                        {
-                            keyframes = keyframes.concat(keyframes);
-                            // keyframesBrightness = keyframesBrightness.concat(keyframesBrightness);
-                            r++;
-                        }
+                    // HUMAN READABLE DURATION
+                    var suffix = (duration <= 60) ? scope._("hue-magic.config.seconds") : scope._("hue-magic.config.minutes");
+                    duration = (duration <= 60) ? (Math.round(duration * 10) / 10) : (Math.round( (duration/60) * 10 ) / 10);
+                    animationTemplate.find("dur").html("("+duration + " " + suffix + ")");
 
-                        // INITIALIZE COLOR ANIMATION
-                        var animationColorPreview = anime({
-                            targets: animationTemplate.find("div.color")[0],
-                            loop: true,
-                            autoplay: true,
-                            easing: 'linear',
-                            keyframes: keyframes
-                        });
-
-                        // INITIALIZE BRIGHTNESS ANIMATION
-                        // var animationBrightness = anime({
-                        //     targets: animationTemplate.find("div.brightness")[0],
-                        //     loop: true,
-                        //     autoplay: true,
-                        //     easing: 'linear',
-                        //     keyframes: keyframesBrightness
-                        // });
-
-                        // NORMALIZE DUR IN SECONDS
-                        duration = duration/1000;
-
-                        // HUMAN READABLE DURATION
-                        var suffix = (duration <= 60) ? scope._("hue-magic.config.seconds") : scope._("hue-magic.config.minutes");
-                        duration = (duration <= 60) ? (Math.round(duration * 10) / 10) : (Math.round( (duration/60) * 10 ) / 10);
-                        animationTemplate.find("dur").html("("+duration + " " + suffix + ")");
-
-                        // PUSH TO FRONTEND
-                        animationTemplate.appendTo(".form-animations");
-                    });
-                })
-                .fail(function()
-                {
-                    RED.notify(scope._("hue-magic.config.unknown-error"), "error");
+                    // PUSH TO FRONTEND
+                    animationTemplate.appendTo(".form-animations");
                 });
+            })
+            .fail(function()
+            {
+                RED.notify(scope._("hue-magic.config.unknown-error"), "error");
             });
 
             // SELECT ANIMATION
@@ -400,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,36 +253,57 @@ 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
 		res.end(JSON.stringify(allAnimations));
 	});
 
+	//
+	// GET ANIMATION PREVIEWS
+	RED.httpAdmin.get('/hue/animations/:file', function(req, res, next)
+	{
+		let path = require("path");
+		res.sendFile(req.params.file, {
+			root: path.resolve(__dirname, 'animations', 'previews'),
+			dotfiles: 'deny'
+		});
+	});
+
 	//
 	// GET ASSETS
 	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'
+		});
 	});
-}
+}