1
0
mirror of https://github.com/node-red/node-red-nodes.git synced 2023-10-10 13:36:58 +02:00
node-red-nodes/hardware/blinkstick/76-blinkstick.html

189 lines
8.5 KiB
HTML
Raw Permalink Normal View History

2013-10-30 21:38:23 +01:00
2021-01-17 18:29:15 +01:00
<script type="text/html" data-template-name="blinkstick">
2013-10-30 21:38:23 +01:00
<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>
2016-08-06 19:42:10 +02:00
<div class="form-row">
<label for="node-input-mode">Mode</label>
<select id="node-input-mode" style="width:125px !important">
<option value="normal">Normal</option>
<option value="inverted">Inverted</option>
<option value="neopixel">NeoPixel</option>
</select>
</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>
2016-02-22 23:23:05 +01:00
<input type="text" id="node-input-delay" placeholder="Delay" style="text-align:end; 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>
2016-02-22 23:23:05 +01:00
<input type="text" id="node-input-repeats" placeholder="Times" style="text-align:end; 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>
2016-02-22 23:23:05 +01:00
<input type="text" id="node-input-duration" placeholder="Duration" style="text-align:end; 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>
2016-02-22 23:23:05 +01:00
<input type="text" id="node-input-steps" placeholder="Steps" style="text-align:end; 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>
2014-09-03 17:12:26 +02:00
<label for="node-input-name"><i class="fa fa-tag"></i> Name</label>
2013-10-30 21:38:23 +01:00
<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" string, or HTML color name.</div>
2013-10-30 21:38:23 +01:00
</script>
2021-01-17 18:29:15 +01:00
<script type="text/html" data-help-name="blinkstick">
<p><i><a href="http://www.blinkstick.com" target="_new">BlinkStick</a></i> output node. Expects a <code>msg.payload</code> 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="https://www.w3schools.com/colors/colors_names.asp" target="_new">Standard HTML color</a></i> name</li>
<li>An <b>object</b> can override any of the parameters</li>
<li><b>array</b> of colours for a neopixel rgb strip - either name,name,... or r,g,b,r,g,b,... where r,g,b are 0 to 255.</li>
</ul>
<p>If using a neopixel strip it <i>must</i> be wired to the red or R channel of the blinkstick.</p>
<p>An <b>object</b> 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>
2013-10-30 21:38:23 +01:00
</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();
}
}
2013-10-30 21:38:23 +01:00
RED.nodes.registerType('blinkstick',{
category: 'output',
color:"GoldenRod",
defaults: { // defines the default editable properties of the node
name: {value:""}, // along with default values.
serial: {value:""},
2016-08-06 19:42:10 +02:00
mode: {value:"normal", validate:function(v) {return ((v === undefined)||v=="normal"||v=="inverted"||v=="neopixel"); }},
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}
2013-10-30 21:38:23 +01:00
},
inputs:1,
outputs:0,
icon: "light.png",
align: "right",
label: function() {
return this.name||"blinkstick";
},
labelStyle: function() {
return this.name?"node_label_italic":"";
},
oneditprepare: function() {
2016-08-06 19:42:10 +02:00
if (!$("#node-input-mode").val()) {
$("#node-input-mode").val("normal");
}
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","");
});
});
2013-10-30 21:38:23 +01:00
}
});
</script>