motor.html

<script type="text/javascript">
    RED.nodes.registerType('ppMotor', {
        category: 'Pi_Plates',
        color: '#87A980',
        defaults: {
            config_plate: { value: '', type: "pi_plate"},
            name: { value: ''},
            motor: { value: "1", required: true}
        },
        inputs: 1,
        outputs: 0,
        align:'right',
        icon: 'motor.svg',
        paletteLabel: 'MOTOR',
        label: function () {
            return (this.name || 'MOTOR' + this.motor);
        },
        oneditprepare: function () {
            var node = this;
            node.prev_config_id = $("#node-input-config_plate").val();
            node.plate_model = 'unknown';

            function draw_form() {
                $("#invalid_plate_section").hide();
                $("#motor_section").hide();
                var config_id = $("#node-input-config_plate").val();
                if (config_id == "_ADD_") {
                    // no config node yet
                } else {
                    node.config_node = RED.nodes.node(config_id)
                    node.plate_model = node.config_node.model;

                    if (node.plate_model !== "MOTORplate") {
                        $("#invalid_plate_section").show();
                        node.motor = null;
                    } else {
                        $("#motor_section").show();
                    }
                    if (node.motor) {
                        $("#motor_section select").val(node.motor);
                    }
                }
            } // draw_form()
            $("#node-input-config_plate").on('focus', function() {node.prev_config_id = this.value}).change(function() {
                // if config node selection has changed, clear our form selection and redraw the form
                if (node.prev_config_id !== this.value) {
                    node.plate_model = null;
                }
                draw_form()
            });
        } // oneditprepare()
    });
</script>

<script type="text/x-red" data-template-name="ppMotor">
    <div class="form-row">
        <label for="node-input-config_plate"><i class="icon-tag"></i> Plate</label>
        <input type="text" id="node-input-config_plate">
    </div>
    <div class="form-row">
        <label for="node-input-name"><i class="icon-tag"></i> Name</label>
        <input type="text" id="node-input-name" placeholder="Name">
    </div>
    <div class="form-row" id="motor_section">
        <label for="node-input-motor"><i class="icon-tag"></i> Motor #</label>
        <select id="node-input-motor">
            <option value="1">DC 1</option>
            <option value="2">DC 2</option>
            <option value="3">DC 3</option>
            <option value="4">DC 4</option>
        </select>
    </div>
    <div class="form-row" id="invalid_plate_section">
        <h3 style="color: red">Invalid plate selected</h2>
    </div>
</script>

<script type="text/x-red" data-help-name="ppMotor">
    <p>Send "start" to this node to start the motor.</p>
    <p>Send "stop" to this node to stop.</p>
    <p>Send an object with property 'speed' and a value between 0.0 and 100.0 to set the motor speed</p>
</script>