<style>
    .rpi-gpio-pinTable {
        width: 340px;
        display: inline-table;
        font-size: 13px;
        height: 380px;
        min-height: 380px;
        max-height: 380px;
    }
    .rpi-gpio-pinTable input[type="radio"] {
        width: auto;
        margin: 3px 2px;
        vertical-align: top;
    }
    .rpi-gpio-pinTable label {
        width: auto;
        margin: 0;
        display: block;
    }
    .rpi-gpio-pinTable .pinTableBody {
        width: 340px;
        display: table-row-group;
        line-height: 12px;
    }
    .rpi-gpio-pinTable .pinTableRow {
        width: 340px;
        display: table-row;
        height: 20px;
    }
    .rpi-gpio-pinTable .pinTableCellL {
        width: 170px;
        height: 20px;
        display: table-cell;
        text-align: right;
        padding-right: 4px;
        vertical-align: middle;
        border: 1px solid #444;
    }
    .rpi-gpio-pinTable .pinTableCellL label {
        width: 170px;
    }
    .rpi-gpio-pinTable .pinTableCellR {
        width: 170px;
        height: 22px;
        display: table-cell;
        text-align: left;
        padding-left: 4px;
        vertical-align: middle;
        border: 1px solid #000;
    }
    .rpi-gpio-pinTable .pinTableCellR label {
        width: 170px;
    }
    .rpi-gpio-pinTable .pinColorPower {
        background-color:#FECBCE;
    }
    .rpi-gpio-pinTable .pinColorGround {
        background-color:#DDDDDD;
    }
    .rpi-gpio-pinTable .pinColorGPIO {
        background-color:#BFEBBF;
    }
    .rpi-gpio-pinTable .pinColorDual {
        background-color:#D0E6F4;
    }
    .rpi-gpio-pinTable .pinColorSD {
        background-color:#FFFDD0;
    }
</style>
<script type="text/html" data-template-name="rpi-gpio in">

    <div class="form-row" style="min-width: 540px">
		<label><i class="fa fa-circle"></i> <span data-i18n="rpi-gpio.pinname"></span></label>
        <div class="rpi-gpio-pinTable">
            <div class="pinTableBody" id="pinform">
                <div class="pinTableRow">
                    <div class="pinTableCellL pinColorPower"><label>3.3V Power - 1 <input disabled type="radio" name="pins" value=""></label></div>
                    <div class="pinTableCellR pinColorPower"><label><input disabled type="radio" name="pins" value=""> 2 - 5V Power</label></div>
                </div>
                <div class="pinTableRow">
                    <div class="pinTableCellL pinColorDual"><label for="pinTable-pin-3">SDA1 - GPIO02 - 3 <input id="pinTable-pin-3" type="radio" name="pins" value="2"></label></div>
                    <div class="pinTableCellR pinColorPower"><label><input disabled type="radio" name="pins" value=""> 4 - 5V Power</label></div>
                </div>
                <div class="pinTableRow">
                    <div class="pinTableCellL pinColorDual"><label for="pinTable-pin-5">SCL1 - GPIO03 - 5 <input id="pinTable-pin-5" type="radio" name="pins" value="3"></label></div>
                    <div class="pinTableCellR pinColorGround"><label><input disabled type="radio" name="pins" value=""> 6 - Ground</label></div>
                </div>
                <div class="pinTableRow">
                    <div class="pinTableCellL pinColorGPIO"><label for="pinTable-pin-7">GPIO04 - 7 <input id="pinTable-pin-7" type="radio" name="pins" value="4"></label></div>
                    <div class="pinTableCellR pinColorDual"><label for="pinTable-pin-8"><input id="pinTable-pin-8" type="radio" name="pins" value="14"> 8 - GPIO14 - TxD</label></div>
                </div>
                <div class="pinTableRow">
                    <div class="pinTableCellL pinColorGround"><label>Ground - 9 <input disabled type="radio" name="pins" value=""></label></div>
                    <div class="pinTableCellR pinColorDual"><label for="pinTable-pin-10"><input id="pinTable-pin-10" type="radio" name="pins" value="15"> 10 - GPIO15 - RxD</label></div>
                </div>
                <div class="pinTableRow">
                    <div class="pinTableCellL pinColorGPIO"><label for="pinTable-pin-11">GPIO17 - 11 <input id="pinTable-pin-11" type="radio" name="pins" value="17"></label></div>
                    <div class="pinTableCellR pinColorGPIO"><label for="pinTable-pin-12"><input id="pinTable-pin-12" type="radio" name="pins" value="18"> 12 - GPIO18</label></div>
                </div>
                <div class="pinTableRow">
                    <div class="pinTableCellL pinColorGPIO"><label for="pinTable-pin-13">GPIO27 - 13 <input id="pinTable-pin-13" type="radio" name="pins" value="27"></label></div>
                    <div class="pinTableCellR pinColorGround"><label><input disabled type="radio" name="pins" value=""> 14 - Ground</label></div>
                </div>
                <div class="pinTableRow">
                    <div class="pinTableCellL pinColorGPIO"><label for="pinTable-pin-15">GPIO22 - 15 <input id="pinTable-pin-15" type="radio" name="pins" value="22"></label></div>
                    <div class="pinTableCellR pinColorGPIO"><label for="pinTable-pin-16"><input id="pinTable-pin-16" type="radio" name="pins" value="23"> 16 - GPIO23</label></div>
                </div>
                <div class="pinTableRow">
                    <div class="pinTableCellL pinColorPower"><label>3.3V Power - 17 <input disabled type="radio" name="pins" value=""></label></div>
                    <div class="pinTableCellR pinColorGPIO"><label for="pinTable-pin-18"><input id="pinTable-pin-18" type="radio" name="pins" value="24"> 18 - GPIO24</label></div>
                </div>
                <div class="pinTableRow">
                    <div class="pinTableCellL pinColorDual"><label for="pinTable-pin-19">MOSI - GPIO10 - 19 <input id="pinTable-pin-19" type="radio" name="pins" value="10"></label></div>
                    <div class="pinTableCellR pinColorGround"><label><input disabled type="radio" name="pins" value=""> 20 - Ground</label></div>
                </div>
                <div class="pinTableRow">
                    <div class="pinTableCellL pinColorDual"><label for="pinTable-pin-21">MISO - GPIO09 - 21 <input id="pinTable-pin-21" type="radio" name="pins" value="9"></label></div>
                    <div class="pinTableCellR pinColorGPIO"><label for="pinTable-pin-22"><input id="pinTable-pin-22" type="radio" name="pins" value="25"> 22 - GPIO25</label></div>
                </div>
                <div class="pinTableRow">
                    <div class="pinTableCellL pinColorDual"><label for="pinTable-pin-23">SCLK - GPIO11 - 23 <input id="pinTable-pin-23" type="radio" name="pins" value="11"></label></div>
                    <div class="pinTableCellR pinColorDual"><label for="pinTable-pin-24"><input id="pinTable-pin-24" type="radio" name="pins" value="8"> 24 - GPIO8 - CE0</label></div>
                </div>
                <div class="pinTableRow">
                    <div class="pinTableCellL pinColorGround"><label>Ground - 25 <input disabled type="radio" name="pins" value=""></label></div>
                    <div class="pinTableCellR pinColorDual"><label for="pinTable-pin-26"><input id="pinTable-pin-26" type="radio" name="pins" value="7"> 26 - GPIO7 - CE1</label></div>
                </div>
                <div class="pinTableRow">
                    <div class="pinTableCellL pinColorSD"><label>SD - 27 <input disabled type="radio" name="pins" value=""></label></div>
                    <div class="pinTableCellR pinColorSD"><label><input disabled type="radio" name="pins" value=""> 28 - SC</label></div>
                </div>
                <div class="pinTableRow">
                    <div class="pinTableCellL pinColorGPIO"><label for="pinTable-pin-29">GPIO05 - 29 <input id="pinTable-pin-29" type="radio" name="pins" value="5"></label></div>
                    <div class="pinTableCellR pinColorGround"><label><input disabled type="radio" name="pins" value=""> 30 - Ground</label></div>
                </div>
                <div class="pinTableRow">
                    <div class="pinTableCellL pinColorGPIO"><label for="pinTable-pin-31">GPIO06 - 31 <input id="pinTable-pin-31" type="radio" name="pins" value="6"></label></div>
                    <div class="pinTableCellR pinColorGPIO"><label for="pinTable-pin-32"><input id="pinTable-pin-32" type="radio" name="pins" value="12"> 32 - GPIO12</label></div>
                </div>
                <div class="pinTableRow">
                    <div class="pinTableCellL pinColorGPIO"><label for="pinTable-pin-33">GPIO13 - 33 <input id="pinTable-pin-33" type="radio" name="pins" value="13"></label></div>
                    <div class="pinTableCellR pinColorGround"><label><input disabled type="radio" name="pins" value=""> 34 - Ground</label></div>
                </div>
                <div class="pinTableRow">
                    <div class="pinTableCellL pinColorGPIO"><label for="pinTable-pin-35">GPIO19 - 35 <input id="pinTable-pin-35" type="radio" name="pins" value="19"></label></div>
                    <div class="pinTableCellR pinColorGPIO"><label for="pinTable-pin-36"><input id="pinTable-pin-36" type="radio" name="pins" value="16"> 36 - GPIO16</label></div>
                </div>
                <div class="pinTableRow">
                    <div class="pinTableCellL pinColorGPIO"><label for="pinTable-pin-37">GPIO26 - 37 <input id="pinTable-pin-37" type="radio" name="pins" value="26"></label></div>
                    <div class="pinTableCellR pinColorGPIO"><label for="pinTable-pin-38"><input id="pinTable-pin-38" type="radio" name="pins" value="20"> 38 - GPIO20</label></div>
                </div>
                <div class="pinTableRow">
                    <div class="pinTableCellL pinColorGround"><label>Ground - 39 <input disabled type="radio" name="pins" value=""></label></div>
                    <div class="pinTableCellR pinColorGPIO"><label for="pinTable-pin-40"><input id="pinTable-pin-40" type="radio" name="pins" value="21"> 40 - GPIO21</label></div>
                </div>
            </div>
        </div>
    </div>
    <div class="form-row">
        <label>&nbsp;&nbsp;&nbsp;&nbsp;BCM GPIO</label>
        <input type="text" id="node-input-pin" style="width: 352px">
    </div>
    <div class="form-row">
        <label for="node-input-intype"><i class="fa fa-level-up"></i> <span data-i18n="rpi-gpio.label.resistor"></span></label>
        <select type="text" id="node-input-intype" style="width:100px;">
        <option value="tri" data-i18n="rpi-gpio.resistor.none"></option>
        <option value="up" data-i18n="rpi-gpio.resistor.pullup"></option>
        <option value="down" data-i18n="rpi-gpio.resistor.pulldown"></option>
        </select>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span data-i18n="rpi-gpio.label.debounce"></span>
        <input type="text" id="node-input-debounce" style="width:47px; text-align:right"/>&nbsp;mS
    </div>
    <div class="form-row">
        <label>&nbsp;</label>
        <input type="checkbox" id="node-input-read" style="display: inline-block; width: auto; vertical-align: top;">
        <label for="node-input-read" style="width:70%;"><span data-i18n="rpi-gpio.label.readinitial"></span></label>
    </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" id="pin-tip"><span data-i18n="[html]rpi-gpio.tip.pin"></span></div>
    <div class="form-tips"><span data-i18n="[html]rpi-gpio.tip.in"></span></div>
</script>

<script type="text/javascript">
    var bcm2pin = {
        "2":"3", "3":"5", "4":"7", "14":"8", "15":"10", "17":"11", "18":"12", "27":"13", "22":"15",
        "23":"16", "24":"18", "10":"19", "9":"21", "25":"22", "11":"23", "8":"24", "7":"26",
        "5":"29", "6":"31", "12":"32", "13":"33", "19":"35", "16":"36", "26":"37", "20":"38", "21":"40"
    };
    var pin2bcm = { '3':'2', '5':'3', '7':'4', '8':'14', '10':'15', '11':'17', '12':'18', '13':'27',
        '15':'22', '16':'23', '18':'24', '19':'10', '21':'9', '22':'25', '23':'11', '24':'8', '26':'7',
        '29':'5', '31':'6', '32':'12', '33':'13', '35':'19', '36':'16', '37':'26', '38':'20', '40':'21'
    }
    var pinsInUse = {};

    var isEnvVar = function (value) {
        var re = /^\${([0-9a-zA-Z_]+)}$/;
        var match = value.match(re);
        return Boolean(match);
    };
    var isInt = function (value) {
        return parseInt(value).toString() === value.trim();
    };
    var uncheckAll = function() {
        for (var i=0; i< validPinValues.length; i++) {
            $("#pinform input[value="+validPinValues[i]+"]").prop('checked', false);
        }
    }
    var validatePin = function (value) {
        return isEnvVar(value) || (isInt(value) && value>=0 && value<=45);
    };
    RED.nodes.registerType('rpi-gpio in',{
        category: 'Raspberry Pi',
        color:"#c6dbef",
        defaults: {
            name: { value:"" },
            pin: { value:"",required:true,validate:validatePin },
            intype: { value:"tri" },
            debounce: { value:"25" },
            read: { value:false },
            bcm: { value:true }
        },
        inputs:0,
        outputs:1,
        icon: "rpi.png",
        info: function() {
            if ( Object.keys(pinsInUse).length !== 0 ) {
                return "**Pins in use** : "+Object.keys(pinsInUse);
            }
            else { return ""; }
        },
        label: function() {
            if (!this.bcm) { this.pin = pin2bcm[this.pin]; this.bcm = true; }
            var p = bcm2pin[this.pin];
            var suf = "";
            if (this.intype === "up") { suf = " ↑"}
            if (this.intype === "down") { suf = " ↓"}
            return this.name || (p ? "PIN: "+p+suf : "GPIO: "+this.pin+suf) ;
        },
        labelStyle: function() {
            return this.name?"node_label_italic":"";
        },
        outputLabels: function() { return "GPIO"+this.pin; },
        oneditprepare: function() {
            var pinnow = this.pin;
            var pintip = this._("rpi-gpio.tip.pin");
            var pinname = this._("rpi-gpio.pinname");
            var alreadyuse = this._("rpi-gpio.alreadyuse");
            var alreadyset = this._("rpi-gpio.alreadyset");

            $.getJSON('rpi-pins/'+this.id,function(data) {
                pinsInUse = data || {};
                $('#pin-tip').html(pintip + Object.keys(data));
            });

            for (var i=0; i< validPinValues.length; i++) {
                $("#pinform input[value="+validPinValues[i]+"]").on("change", function (evt) {
                    $("#node-input-pin").val(evt.currentTarget.value);
                    $("#node-input-pin").removeClass("input-error");
                });
            }
            $("#node-input-pin").on("change", function() {
                var pinnew = $("#node-input-pin").val();
                if (pinnew && isInt(pinnew) && validPinValues.includes(pinnew)) {
                    $("#pinform input[value="+pinnew+"]").prop('checked', true);
                } else {
                    uncheckAll();
                }
                if ((pinnew) && (pinnew !== pinnow)) {
                    if (pinsInUse.hasOwnProperty(pinnew)) {
                        RED.notify(pinname+" "+pinnew+" "+alreadyuse,"warn");
                    }
                    pinnow = pinnew;
                }
            });
            $("#node-input-intype").on("change", function() {
                var newtype = $("#node-input-intype").val();
                if ((pinsInUse.hasOwnProperty(pinnow)) && (pinsInUse[pinnow] !== newtype)) {
                    RED.notify(pinname+" "+pinnow+" "+alreadyset+" "+pinsInUse[pinnow],"error");
                }
            });
            $('#pinform input').on('change', function() {
                this.pin = $("#pinform input[type='radio']:checked").val();
                $("#node-input-pin").val(this.pin);
            });
        }
    });
</script>

<script type="text/html" data-template-name="rpi-gpio out">
    <div class="form-row" style="min-width: 540px">
        <label><i class="fa fa-circle"></i> <span data-i18n="rpi-gpio.pinname"></span></label>
        <div class="rpi-gpio-pinTable">
            <div class="pinTableBody" id="pinform">
                <div class="pinTableRow">
                    <div class="pinTableCellL pinColorPower"><label>3.3V Power - 1 <input disabled type="radio" name="pins" value=""></label></div>
                    <div class="pinTableCellR pinColorPower"><label><input disabled type="radio" name="pins" value=""> 2 - 5V Power</label></div>
                </div>
                <div class="pinTableRow">
                    <div class="pinTableCellL pinColorDual"><label for="pinTable-pin-3">SDA1 - GPIO02 - 3 <input id="pinTable-pin-3" type="radio" name="pins" value="2"></label></div>
                    <div class="pinTableCellR pinColorPower"><label><input disabled type="radio" name="pins" value=""> 4 - 5V Power</label></div>
                </div>
                <div class="pinTableRow">
                    <div class="pinTableCellL pinColorDual"><label for="pinTable-pin-5">SCL1 - GPIO03 - 5 <input id="pinTable-pin-5" type="radio" name="pins" value="3"></label></div>
                    <div class="pinTableCellR pinColorGround"><label><input disabled type="radio" name="pins" value=""> 6 - Ground</label></div>
                </div>
                <div class="pinTableRow">
                    <div class="pinTableCellL pinColorGPIO"><label for="pinTable-pin-7">GPIO04 - 7 <input id="pinTable-pin-7" type="radio" name="pins" value="4"></label></div>
                    <div class="pinTableCellR pinColorDual"><label for="pinTable-pin-8"><input id="pinTable-pin-8" type="radio" name="pins" value="14"> 8 - GPIO14 - TxD</label></div>
                </div>
                <div class="pinTableRow">
                    <div class="pinTableCellL pinColorGround"><label>Ground - 9 <input disabled type="radio" name="pins" value=""></label></div>
                    <div class="pinTableCellR pinColorDual"><label for="pinTable-pin-10"><input id="pinTable-pin-10" type="radio" name="pins" value="15"> 10 - GPIO15 - RxD</label></div>
                </div>
                <div class="pinTableRow">
                    <div class="pinTableCellL pinColorGPIO"><label for="pinTable-pin-11">GPIO17 - 11 <input id="pinTable-pin-11" type="radio" name="pins" value="17"></label></div>
                    <div class="pinTableCellR pinColorGPIO"><label for="pinTable-pin-12"><input id="pinTable-pin-12" type="radio" name="pins" value="18"> 12 - GPIO18</label></div>
                </div>
                <div class="pinTableRow">
                    <div class="pinTableCellL pinColorGPIO"><label for="pinTable-pin-13">GPIO27 - 13 <input id="pinTable-pin-13" type="radio" name="pins" value="27"></label></div>
                    <div class="pinTableCellR pinColorGround"><label><input disabled type="radio" name="pins" value=""> 14 - Ground</label></div>
                </div>
                <div class="pinTableRow">
                    <div class="pinTableCellL pinColorGPIO"><label for="pinTable-pin-15">GPIO22 - 15 <input id="pinTable-pin-15" type="radio" name="pins" value="22"></label></div>
                    <div class="pinTableCellR pinColorGPIO"><label for="pinTable-pin-16"><input id="pinTable-pin-16" type="radio" name="pins" value="23"> 16 - GPIO23</label></div>
                </div>
                <div class="pinTableRow">
                    <div class="pinTableCellL pinColorPower"><label>3.3V Power - 17 <input disabled type="radio" name="pins" value=""></label></div>
                    <div class="pinTableCellR pinColorGPIO"><label for="pinTable-pin-18"><input id="pinTable-pin-18" type="radio" name="pins" value="24"> 18 - GPIO24</label></div>
                </div>
                <div class="pinTableRow">
                    <div class="pinTableCellL pinColorDual"><label for="pinTable-pin-19">MOSI - GPIO10 - 19 <input id="pinTable-pin-19" type="radio" name="pins" value="10"></label></div>
                    <div class="pinTableCellR pinColorGround"><label><input disabled type="radio" name="pins" value=""> 20 - Ground</label></div>
                </div>
                <div class="pinTableRow">
                    <div class="pinTableCellL pinColorDual"><label for="pinTable-pin-21">MISO - GPIO09 - 21 <input id="pinTable-pin-21" type="radio" name="pins" value="9"></label></div>
                    <div class="pinTableCellR pinColorGPIO"><label for="pinTable-pin-22"><input id="pinTable-pin-22" type="radio" name="pins" value="25"> 22 - GPIO25</label></div>
                </div>
                <div class="pinTableRow">
                    <div class="pinTableCellL pinColorDual"><label for="pinTable-pin-23">SCLK - GPIO11 - 23 <input id="pinTable-pin-23" type="radio" name="pins" value="11"></label></div>
                    <div class="pinTableCellR pinColorDual"><label for="pinTable-pin-24"><input id="pinTable-pin-24" type="radio" name="pins" value="8"> 24 - GPIO8 - CE0</label></div>
                </div>
                <div class="pinTableRow">
                    <div class="pinTableCellL pinColorGround"><label>Ground - 25 <input disabled type="radio" name="pins" value=""></label></div>
                    <div class="pinTableCellR pinColorDual"><label for="pinTable-pin-26"><input id="pinTable-pin-26" type="radio" name="pins" value="7"> 26 - GPIO7 - CE1</label></div>
                </div>
                <div class="pinTableRow">
                    <div class="pinTableCellL pinColorSD"><label>SD - 27 <input disabled type="radio" name="pins" value=""></label></div>
                    <div class="pinTableCellR pinColorSD"><label><input disabled type="radio" name="pins" value=""> 28 - SC</label></div>
                </div>
                <div class="pinTableRow">
                    <div class="pinTableCellL pinColorGPIO"><label for="pinTable-pin-29">GPIO05 - 29 <input id="pinTable-pin-29" type="radio" name="pins" value="5"></label></div>
                    <div class="pinTableCellR pinColorGround"><label><input disabled type="radio" name="pins" value=""> 30 - Ground</label></div>
                </div>
                <div class="pinTableRow">
                    <div class="pinTableCellL pinColorGPIO"><label for="pinTable-pin-31">GPIO06 - 31 <input id="pinTable-pin-31" type="radio" name="pins" value="6"></label></div>
                    <div class="pinTableCellR pinColorGPIO"><label for="pinTable-pin-32"><input id="pinTable-pin-32" type="radio" name="pins" value="12"> 32 - GPIO12</label></div>
                </div>
                <div class="pinTableRow">
                    <div class="pinTableCellL pinColorGPIO"><label for="pinTable-pin-33">GPIO13 - 33 <input id="pinTable-pin-33" type="radio" name="pins" value="13"></label></div>
                    <div class="pinTableCellR pinColorGround"><label><input disabled type="radio" name="pins" value=""> 34 - Ground</label></div>
                </div>
                <div class="pinTableRow">
                    <div class="pinTableCellL pinColorGPIO"><label for="pinTable-pin-35">GPIO19 - 35 <input id="pinTable-pin-35" type="radio" name="pins" value="19"></label></div>
                    <div class="pinTableCellR pinColorGPIO"><label for="pinTable-pin-36"><input id="pinTable-pin-36" type="radio" name="pins" value="16"> 36 - GPIO16</label></div>
                </div>
                <div class="pinTableRow">
                    <div class="pinTableCellL pinColorGPIO"><label for="pinTable-pin-37">GPIO26 - 37 <input id="pinTable-pin-37" type="radio" name="pins" value="26"></label></div>
                    <div class="pinTableCellR pinColorGPIO"><label for="pinTable-pin-38"><input id="pinTable-pin-38" type="radio" name="pins" value="20"> 38 - GPIO20</label></div>
                </div>
                <div class="pinTableRow">
                    <div class="pinTableCellL pinColorGround"><label>Ground - 39 <input disabled type="radio" name="pins" value=""></label></div>
                    <div class="pinTableCellR pinColorGPIO"><label for="pinTable-pin-40"><input id="pinTable-pin-40" type="radio" name="pins" value="21"> 40 - GPIO21</label></div>
                </div>
            </div>
        </div>
    </div>
    <div class="form-row">
        <label>&nbsp;&nbsp;&nbsp;&nbsp;BCM GPIO</label>
        <input type="text" id="node-input-pin" style="width: 352px">
    </div>
    <div class="form-row" id="node-set-pwm">
        <label>&nbsp;&nbsp;&nbsp;&nbsp;<span data-i18n="rpi-gpio.label.type"></span></label>
        <select id="node-input-out" style="width: 250px;">
            <option value="out" data-i18n="rpi-gpio.digout"></option>
            <option value="pwm" data-i18n="rpi-gpio.pwmout"></option>
        </select>
    </div>
    <div class="form-row" id="node-set-tick">
        <label>&nbsp;</label>
        <input type="checkbox" id="node-input-set" style="display: inline-block; width: auto; vertical-align: top;">
        <label for="node-input-set" style="width: 70%;"><span data-i18n="rpi-gpio.label.initpin"></span></label>
    </div>
    <div class="form-row" id="node-set-state">
        <label for="node-input-level">&nbsp;</label>
        <select id="node-input-level" style="width: 250px;">
            <option value="0" data-i18n="rpi-gpio.initpin0"></option>
            <option value="1" data-i18n="rpi-gpio.initpin1"></option>
        </select>
    </div>
    <div class="form-row" id="node-set-freq">
        <label for="node-input-freq"> <span data-i18n="rpi-gpio.label.freq"></span></label>
        <input type="text" id="node-input-freq" placeholder="100"> Hz
    </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" id="pin-tip"><span data-i18n="[html]rpi-gpio.tip.pin"></span></div>
    <div class="form-tips" id="dig-tip"><span data-i18n="[html]rpi-gpio.tip.dig"></span></div>
    <div class="form-tips" id="pwm-tip"><span data-i18n="[html]rpi-gpio.tip.pwm"></span></div>
</script>

<script type="text/javascript">
    var bcm2pin = {
        "2":"3", "3":"5", "4":"7", "14":"8", "15":"10", "17":"11", "18":"12", "27":"13", "22":"15",
        "23":"16", "24":"18", "10":"19", "9":"21", "25":"22", "11":"23", "8":"24", "7":"26",
        "5":"29", "6":"31", "12":"32", "13":"33", "19":"35", "16":"36", "26":"37", "20":"38", "21":"40"
    };
    var pin2bcm = { '3':'2', '5':'3', '7':'4', '8':'14', '10':'15', '11':'17', '12':'18', '13':'27',
        '15':'22', '16':'23', '18':'24', '19':'10', '21':'9', '22':'25', '23':'11', '24':'8', '26':'7',
        '29':'5', '31':'6', '32':'12', '33':'13', '35':'19', '36':'16', '37':'26', '38':'20', '40':'21'
    }
    var pinsInUse = {};
    var validPinValues = Object.values(bcm2pin);
    var isEnvVar = function (value) {
        var re = /^\${([0-9a-zA-Z_]+)}$/;
        var match = value.match(re);
        return Boolean(match);
    };
    var isInt = function (value) {
        return parseInt(value).toString() === value.trim();
    };
    var uncheckAll = function() {
        for (var i=0; i< validPinValues.length; i++) {
            $("#pinform input[value="+validPinValues[i]+"]").prop('checked', false);
        }
    }
    var validatePin = function (value) {
        return isEnvVar(value) || (isInt(value) && value>=0 && value<=45);
    };
    RED.nodes.registerType('rpi-gpio out',{
        category: 'Raspberry Pi',
        color:"#c6dbef",
        defaults: {
            name: { value:"" },
            pin: { value:"",required:true,validate:validatePin },
            set: { value:"" },
            level: { value:"0" },
            freq: { value:""},
            out: { value:"out" },
            bcm: { value:true }
        },
        inputs:1,
        outputs:0,
        icon: "rpi.png",
        info: function() {
            if ( Object.keys(pinsInUse).length !== 0 ) {
                return "**Pins in use** : "+Object.keys(pinsInUse);
            }
            else { return ""; }
        },
        align: "right",
        label: function() {
            if (!this.bcm) { this.pin = pin2bcm[this.pin]; this.bcm = true; }
            var p = bcm2pin[this.pin];
            var t = p ? "PIN: "+p : "GPIO: "+this.pin;
            if (this.out === "pwm") { return this.name || "PWM: "+p; }
            else if (this.out === "ser") { return this.name || "Servo: "+p; }
            else {
                var suf = "";
                if (this.set == true) { suf = (this.level === "1") ? " ¹" : " ₀"; }
                return this.name|| t + suf ;
            }
        },
        labelStyle: function() {
            return this.name?"node_label_italic":"";
        },
        inputLabels: function() { return "GPIO"+this.pin; },
        oneditprepare: function() {
            var pinnow = this.pin;
            var pintip = this._("rpi-gpio.tip.pin");
            var pinname = this._("rpi-gpio.pinname");
            var alreadyuse = this._("rpi-gpio.alreadyuse");
            var alreadyset = this._("rpi-gpio.alreadyset");
            if (!$("#node-input-out").val()) { $("#node-input-out").val("out"); }

            $.getJSON('rpi-pins/'+this.id,function(data) {
                pinsInUse = data || {};
                $('#pin-tip').html(pintip + Object.keys(data));
            });

            for (var i=0; i< validPinValues.length; i++) {
                $("#pinform input[value="+validPinValues[i]+"]").on("change", function (evt) {
                    $("#node-input-pin").val(evt.currentTarget.value);
                    $("#node-input-pin").removeClass("input-error");
                });
            }
            $("#node-input-pin").on("change", function() {
                var pinnew = $("#node-input-pin").val();
                if (pinnew && isInt(pinnew) && validPinValues.includes(pinnew)) {
                    $("#pinform input[value="+pinnew+"]").prop('checked', true);
                } else {
                    uncheckAll();
                }
                if ((pinnew) && (pinnew !== pinnow)) {
                    if (pinsInUse.hasOwnProperty(pinnew)) {
                        RED.notify(pinname+" "+pinnew+" "+alreadyuse,"warn");
                    }
                    pinnow = pinnew;
                }
            });

            $("#node-input-out").on("change", function() {
                var newtype = $("#node-input-out").val();
                if ((pinsInUse.hasOwnProperty(pinnow)) && (pinsInUse[pinnow] !== newtype)) {
                    RED.notify(pinname+" "+pinnow+" "+alreadyset+" "+pinsInUse[pinnow],"error");
                }
            });

            var hidestate = function () {
                if ($("#node-input-out").val() === "pwm") {
                    $('#node-set-tick').hide();
                    $('#node-set-state').hide();
                    $('#node-input-set').prop('checked', false);
                    $("#dig-tip").hide();
                    $("#pwm-tip").show();
                    $('#node-set-freq').show();
                }
                else {
                    $('#node-set-tick').show();
                    $("#dig-tip").show();
                    $("#pwm-tip").hide();
                    $('#node-set-freq').hide();
                }
            };
            $("#node-input-out").on("change", function () { hidestate(); });
            hidestate();

            var setstate = function () {
                if ($('#node-input-set').is(":checked")) {
                    $("#node-set-state").show();
                } else {
                    $("#node-set-state").hide();
                }
            };
            $("#node-input-set").on("change", function () { setstate(); });
            setstate();

            $('#pinform input').on('change', function() {
                this.pin = $("#pinform input[type='radio']:checked").val();
                $("#node-input-pin").val(this.pin);
            });
        }
    });
</script>

<script type="text/html" data-template-name="rpi-mouse">
    <div class="form-row">
        <label for="node-input-butt"><i class="fa fa-circle"></i> <span data-i18n="rpi-gpio.label.button"></span></label>
        <select type="text" id="node-input-butt" style="width: 250px;">
            <option value="1" data-i18n="rpi-gpio.left"></option>
            <option value="2" data-i18n="rpi-gpio.right"></option>
            <option value="4" data-i18n="rpi-gpio.middle"></option>
            <option value="7" data-i18n="rpi-gpio.any"></option>
         </select>
    </div>
    <br/>
    <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>
</script>

<script type="text/javascript">
    RED.nodes.registerType('rpi-mouse',{
        category: 'Raspberry Pi',
        color:"#c6dbef",
        defaults: {
            name: { value:"" },
            butt: { value:"1",required:true }
        },
        inputs:0,
        outputs:1,
        icon: "rpi.png",
        label: function() {
            var na = this._("rpi-gpio.label.pimouse");
            if (this.butt === "1") { na += " "+this._("rpi-gpio.label.left"); }
            if (this.butt === "2") { na += " "+this._("rpi-gpio.label.right"); }
            if (this.butt === "4") { na += " "+this._("rpi-gpio.label.middle"); }
            return this.name||na;
        },
        labelStyle: function() {
            return this.name?"node_label_italic":"";
        }
    });
</script>

<script type="text/html" data-template-name="rpi-keyboard">
    <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>
</script>

<script type="text/javascript">
    RED.nodes.registerType('rpi-keyboard',{
        category: 'Raspberry Pi',
        color:"#c6dbef",
        defaults: {
            name: { value:"" }
        },
        inputs:0,
        outputs:1,
        icon: "rpi.png",
        label: function() {
            return this.name || this._("rpi-gpio.label.pikeyboard");
        },
        labelStyle: function() {
            return this.name?"node_label_italic":"";
        }
    });
</script>