node-red-nodes/hardware/Arduino/35-arduino.html

<script type="text/html" data-template-name="arduino in">
    <div class="form-row">
        <label for="node-input-arduino"><i class="fa fa-tasks"></i> Arduino</label>
        <input type="text" id="node-input-arduino">
    </div>
    <div class="form-row">
        <label for="node-input-state"><i class="fa fa-wrench"></i> <span data-i18n="arduino.label.type"></span></label>
        <select type="text" id="node-input-state" style="width:200px;">
            <option value="INPUT" data-i18n="arduino.state.in.digital"></option>
            <option value="PULLUP" data-i18n="arduino.state.in.pullup"></option>
            <option value="ANALOG" data-i18n="arduino.state.in.analogue"></option>
            <option value="STRING" data-i18n="arduino.state.in.string"></option>
        </select>
    </div>
    <div class="form-row">
        <label for="node-input-pin"><i class="fa fa-circle"></i> <span data-i18n="arduino.label.pin"></span></label>
        <input type="text" id="node-input-pin" placeholder="2">
    </div>
    <div class="form-row">
        <label for="node-input-name"><i class="fa fa-tag"></i> <span data-i18n="node-red:common.label.name"></span></label>
        <input type="text" id="node-input-name" data-i18n="[placeholder]node-red:common.label.name">
    </div>
    <div class="form-tips"><span data-i18n="[html]arduino.tip.io"></span></div>
</script>

<script type="text/javascript">
    RED.nodes.registerType('arduino in',{
        category: 'Arduino',
        color:"#3fadb5",
        defaults: {
            name: {value:""},
            pin: {value:"",validate: function(v) {
                    var ct = $("#node-input-state").val() || this.state;
                    return ct === 'STRING' || (v !== '');
                }},
            state: {value:"INPUT",required:true},
            arduino: {type:"arduino-board"}
        },
        inputs:0,
        outputs:1,
        icon: "arduino.png",
        label: function() {
            if (this.state === "STRING") { return "String"; }
            var a = "";
            if (this.state === "ANALOG") { a = "A"; }
            return this.name||"Pin: "+a+this.pin;
        },
        labelStyle: function() {
            return this.name?"node_label_italic":"";
        }
    });
</script>

<script type="text/html" data-template-name="arduino out">
    <div class="form-row">
        <label for="node-input-arduino"><i class="fa fa-tasks"></i> Arduino</label>
        <input type="text" id="node-input-arduino">
    </div>
    <div class="form-row">
        <label for="node-input-state"><i class="fa fa-wrench"></i> <span data-i18n="arduino.label.type"></span></label>
        <select type="text" id="node-input-state" style="width:200px;">
            <option value="OUTPUT" data-i18n="arduino.state.out.digital"></option>
            <option value="PWM" data-i18n="arduino.state.out.analogue"></option>
            <option value="SERVO" data-i18n="arduino.state.out.servo"></option>
            <option value="STRING" data-i18n="arduino.state.out.string"></option>
        </select>
    </div>
    <div class="form-row">
        <label for="node-input-pin"><i class="fa fa-circle"></i> <span data-i18n="arduino.label.pin"></span></label>
        <input type="text" id="node-input-pin" placeholder="13">
    </div>
    <div class="form-row">
        <label for="node-input-name"><i class="fa fa-tag"></i> <span data-i18n="node-red:common.label.name"></span></label>
        <input type="text" id="node-input-name" data-i18n="[placeholder]node-red:common.label.name">
    </div>
    <div class="form-tips"><span data-i18n="[html]arduino.tip.io"></span></div>
</script>

<script type="text/javascript">
    RED.nodes.registerType('arduino out', {
        category: 'Arduino',
        color:"#3fadb5",
        defaults: {
            name: {value:""},
            pin: {value:"",validate: function(v) {
                    var ct = $("#node-input-state").val() || this.state;
                    return ct === 'STRING' || (v !== '');
                }},
            state: {value:"",required:true},
            arduino: {type:"arduino-board"}
        },
        inputs:1,
        outputs:0,
        icon: "arduino.png",
        align: "right",
        label: function() {
            if (this.state === "STRING") { return "String"; }
            return this.name||"Pin: "+this.pin;
        },
        labelStyle: function() {
            return this.name?"node_label_italic":"";
        }
    });
</script>


<script type="text/html" data-template-name="arduino-board">
    <div class="form-row">
        <label for="node-config-input-device"><i class="fa fa-random"></i> <span data-i18n="arduino.label.port"></span></label>
        <input type="text" id="node-config-input-device" style="width:60%;" data-i18n="[placeholder]arduino.placeholder.port"/>
        <a id="node-config-lookup-serial" class="red-ui-button"><i id="node-config-lookup-serial-icon" class="fa fa-search"></i></a>
    </div>
    <div class="form-tips"><span data-i18n="[html]arduino.tip.conf"></span></div>
</script>

<script type="text/javascript">
    RED.nodes.registerType('arduino-board',{
        category: 'config',
        defaults: {
            device: {value:""}
        },
        label: function() {
            return this.device||"arduino";
        },
        oneditprepare: function() {
            try {
                $("#node-config-input-device").autocomplete( "destroy" );
            } catch(err) { }
            $("#node-config-lookup-serial").click(function() {
                $("#node-config-lookup-serial-icon").removeClass('fa-search');
                $("#node-config-lookup-serial-icon").addClass('spinner');
                $("#node-config-lookup-serial").addClass('disabled');

                $.getJSON('arduinoports',function(data) {
                    $("#node-config-lookup-serial-icon").addClass('fa-search');
                    $("#node-config-lookup-serial-icon").removeClass('spinner');
                    $("#node-config-lookup-serial").removeClass('disabled');
                    var ports = data || [];
                    $("#node-config-input-device").autocomplete({
                        source:ports,
                        minLength:0,
                        close: function( event, ui ) {
                            $("#node-config-input-device").autocomplete( "destroy" );
                        }
                    }).autocomplete("search","");
                });
            });
        }
    });
</script>