node-red-nodes/hardware/blink1/77-blink1.html

<script type="text/html" data-template-name="blink1">
    <div class="form-row">
        <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-row">
        <label for="node-input-serial"><i class="fa fa-random"></i> Device ID</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-fade"><i class="fa fa-signal"></i> Fade (mS)</label>
        <input type="text" id="node-input-fade" placeholder="between 0 and 60,000 mS (1 min)">
    </div>
</script>

<script type="text/html" data-help-name="blink1">
    <p>ThingM Blink1 output node.</p>
    <p>Expects a <code>msg.payload</code> with either a three part csv string of
    <i>r,g,b</i> or a hex colour <i>#rrggbb</i></p>
    <p>You can also use the <a href="http://www.cheerlights.com/control-cheerlights" target="_new">@cheerlights</a>
    colour names - red, green, blue, cyan, magenta, yellow, orange, pink,
    purple, white, oldlace (warmwhite), and also amber and black (off).</p>
</script>

<script type="text/javascript">
    RED.nodes.registerType('blink1',{
        category: "blink1",
        color:"GoldenRod",
        paletteLabel: "blink1 out",
        defaults: {
            serial: {value:""},
            fade: {value:"500",required:true,validate:RED.validators.number()},
            name: {value:""}
        },
        inputs:1,
        outputs:0,
        icon: "light.png",
        align: "right",
        label: function() {
            return this.name||"blink1";
        },
        labelStyle: function() {
            return this.name?"node_label_italic":"";
        },
        oneditprepare: function() {
            $("#node-lookup-serial").click(function() {
                $.getJSON('blink1list',function(data) {
                      $("#node-input-serial").autocomplete({
                          source:data,
                          minLength:0,
                          close: function( event, ui ) {
                              $("#node-input-serial").autocomplete( "destroy" );
                          }
                      }).autocomplete("search","");
                  });
              });
          }
      });
</script>

<script type="text/html" data-template-name="blink1 in">
    <div class="form-row">
        <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-row">
        <label for="node-input-serial"><i class="fa fa-random"></i> Device ID</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>
</script>

<script type="text/html" data-help-name="blink1 in">
    <p>ThingM Blink1 input node.</p>
    <p>Outputs the current RGB value as array <code>[r,g,b]</code> or "off" as string if RGB is 0,0,0 to <code>msg.payload</code>.</p>
</script>

<script type="text/javascript">
    RED.nodes.registerType('blink1 in',{
        category: 'blink1',
        color:"GoldenRod",
        paletteLabel:"blink1 in",
        defaults: {
            serial: {value:""}
        },
        inputs:1,
        outputs:1,
        icon: "light.png",
        align: "left",
        label: function() {
            return this.name||"blink1 in";
        },
        labelStyle: function() {
            return this.name?"node_label_italic":"";
        },
        oneditprepare: function() {
            $("#node-lookup-serial").click(function() {
                $.getJSON('blink1list',function(data) {
                      $("#node-input-serial").autocomplete({
                          source:data,
                          minLength:0,
                          close: function( event, ui ) {
                              $("#node-input-serial").autocomplete( "destroy" );
                          }
                      }).autocomplete("search","");
                  });
              });
          }
      });
</script>