frodovdr/node-red-nodes
1
0
Fork 0
mirror of https://github.com/node-red/node-red-nodes.git synced 2025-03-01 10:37:43 +00:00
Code Issues Packages Projects Releases Wiki Activity

Improvements to BlinkStick node

Browse Source 
* Ability to select BlinkStick by serial number
* Look up serial numbers of connected BlinkSticks
* Ability to set blink, morph and pulse animations
* Ability to control the parameters of those animations like duration,
* steps, repeats and delay
* Repeat blink and pulse animation until new payload is received
* Automatically find BlinkStick if it was removed and then plugged back in
* Connectivity status when "Node Status" is enabled in the menu
* Override parameters with payload object
* Improved text in the info pane
This commit is contained in:
Arvydas Juskevicius
2014-10-01 10:02:44 +01:00
parent 71a02ebbce
commit 61ac8fefae
5 changed files with 398 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files

157
hardware/blinkstick/76-blinkstick.html
View File

@@ -1,5 +1,6 @@
<!--
Copyright 2013 IBM Corp.
Copyright 2013-2014 Agile Innovative Ltd.
Based on code written by Dave Conway-Jones, IBM Corp.
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
@@ -16,25 +17,115 @@
<script type="text/x-red" data-template-name="blinkstick">
<div class="form-row">
<div class="form-row" id="node-input-row-payload">
<label for="node-input-serial">Serial</label>
<input type="text" id="node-input-serial" placeholder="defaults to first found" style="width:60%">
<a id="node-lookup-serial" class="btn"><i id="node-lookup-serial-icon" class="fa fa-search"></i></a>
</div>
<div class="form-row">
<label for="node-input-task"><i class="fa fa-empire"></i> Task</label>
<select id="node-input-task" style="width:125px !important">
<option value="set_color">Set Color</option>
<option value="blink">Blink</option>
<option value="morph">Morph</option>
<option value="pulse">Pulse</option>
</select>
</div>
<div id="delay-details" class="form-row">
<label for="node-input-delay"><i class="fa fa-clock-o"></i> Delay</label>
<input type="text" id="node-input-delay" placeholder="Delay" style="direction:rtl; width:50px !important">
milliseconds
</div>
<div id="repeats-details" class="form-row">
<label for="node-input-repeats"><i class="fa fa-history"></i> Repeats</label>
<input type="text" id="node-input-repeats" placeholder="Times" style="direction:rtl; width:50px !important">
</div>
<div id="duration-details" class="form-row">
<label for="node-input-duration"><i class="fa fa-clock-o"></i> Duration</label>
<input type="text" id="node-input-duration" placeholder="Duration" style="direction:rtl; width:50px !important">
milliseconds
</div>
<div id="steps-details" class="form-row">
<label for="node-input-steps"><i class="fa fa-history"></i> Steps</label>
<input type="text" id="node-input-steps" placeholder="Steps" style="direction:rtl; width:50px !important">
</div>
<div id="repeat-details" class="form-row">
<label>&nbsp;</label>
<input type="checkbox" id="node-input-repeat" style="display: inline-block; width: auto; vertical-align: top;">
<label for="node-input-repeat" style="width: 70%;">Repeat &infin; until next payload received?</label>
</div>
<label for="node-input-name"><i class="fa fa-tag"></i> Name</label>
<input type="text" id="node-input-name" placeholder="Name">
</div>
<div class="form-tips">Expects a msg.payload with either hex #rrggbb or decimal red,green,blue.</div>
<div class="form-tips">Expects a msg.payload with either hex "#rrggbb" or decimal "red,green,blue" string.</div>
</script>
</script>
<script type="text/x-red" data-help-name="blinkstick">
<p>BlinkStick output node. Expects a <b>msg.payload</b> with either a hex string #rrggbb triple or red,green,blue as three 0-255 values.
It can also accept <i><a href="http://www.w3schools.com/html/html_colornames.asp" target="_new">standard HTML colour</a></i> names</p>
<p><b>NOTE:</b> currently only works with a single BlinkStick. (As it uses the findFirst() function to attach).</p>
<p>For more info see the <i><a href="http://blinkstick.com/" target="_new">BlinkStick website</a></i> or the <i><a href="https://github.com/arvydas/blinkstick-node" target="_new">node module</a></i> documentation.</p>
<p><i><a href="http://www.blinkstick.com" target="_new">BlinkStick</a></i> output node. Expects a <b>msg.payload</b> with one of:</p>
<ul>
<li>A hex string <b>"#rrggbb"</b> triple</li>
<li><b>"red,green,blue"</b> three 0-255 values as a string</li>
<li><b>"random"</b> will generate a random color</li>
<li><i><a href="http://www.w3schools.com/html/html_colornames.asp" target="_new">Standard HTML color</a></i> name</li>
<li><b>object</b> can override any of the parameters</li>
</ul>
<p>An object payload can override any of the settings on the node. Omitted parameters are left intact. For example:</p>
<pre>
{ 'color': 'blue' }
{ 'task': 'blink', 'color': 'red' }
{ 'task': 'pulse', 'color': 'gree', 'duration': 500 }
{ 'task': 'morph', 'color': 'orange', 'duration': 500, 'steps': 20 }
</pre>
<p>For more info see <i><a href="http://www.blinkstick.com/help/tutorials" target="_new">BlinkStick tutorials</a></i>
or the <i><a href="https://github.com/arvydas/blinkstick-node" target="_new">node module</a></i> documentation.</p>
</script>
<script type="text/javascript">
function updateView(task) {
if (task == "set_color") {
$("#delay-details").hide();
$("#repeats-details").hide();
$("#duration-details").hide();
$("#steps-details").hide();
$("#repeat-details").hide();
} else if (task == "blink") {
$("#delay-details").show();
$("#repeats-details").show();
$("#duration-details").hide();
$("#steps-details").hide();
$("#repeat-details").show();
} else if (task == "morph") {
$("#delay-details").hide();
$("#repeats-details").hide();
$("#duration-details").show();
$("#steps-details").show();
$("#repeat-details").hide();
} else if (task == "pulse") {
$("#delay-details").hide();
$("#repeats-details").hide();
$("#duration-details").show();
$("#steps-details").show();
$("#repeat-details").show();
}
}
RED.nodes.registerType('blinkstick',{
category: 'output',
color:"GoldenRod",
defaults: {
name: {value:""}
defaults: { // defines the default editable properties of the node
name: {value:""}, // along with default values.
serial: {value:""},
task: {value:"set_color", validate:function(v) {return ((v === undefined)||v=="set_color"||v=="blink"||v=="morph"||v=="pulse"); }},
delay: {value:"500", validate:function(v) {return ((v === undefined)||(/^\d+$/).test(v)); }},
repeats: {value:"1", validate:function(v) {return ((v === undefined)||(/^\d+$/).test(v)); }},
duration: {value:"1000", validate:function(v) {return ((v === undefined)||(/^\d+$/).test(v)); }},
steps: {value:"50", validate:function(v) {return ((v === undefined)||(/^\d+$/).test(v)); }},
repeat: {value:false}
},
inputs:1,
outputs:0,
@@ -45,6 +136,56 @@
},
labelStyle: function() {
return this.name?"node_label_italic":"";
},
oneditprepare: function() {
if (!$("#node-input-task").val()) {
$("#node-input-task").val("set_color");
}
if (!$("#node-input-delay").val()) {
$("#node-input-delay").val(500);
}
if (!$("#node-input-repeats").val()) {
$("#node-input-repeats").val(1);
}
if (!$("#node-input-duration").val()) {
$("#node-input-duration").val(1000);
}
if (!$("#node-input-steps").val()) {
$("#node-input-steps").val(50);
}
$( "#node-input-repeats" ).spinner({min:1,max:100});
$( "#node-input-delay" ).spinner({min:10,max:5000});
$( "#node-input-duration" ).spinner({min:10,max:5000});
$( "#node-input-steps" ).spinner({min:10,max:255});
$("#node-input-task").on("change",function() {
updateView(this.value);
});
updateView(this.task);
$("#node-lookup-serial").click(function() {
$("#node-lookup-serial").addClass('disabled');
$.getJSON('blinksticklist',function(data) {
$("#node-lookup-serial").removeClass('disabled');
var sticks = [];
$.each(data, function(i, stick){
sticks.push(stick);
});
$("#node-input-serial").autocomplete({
source:sticks,
minLength:0,
close: function( event, ui ) {
$("#node-input-serial").autocomplete( "destroy" );
}
}).autocomplete("search","");
});
});
}
});
</script>