atem.html

<!-- Settings Panel -->
<script type="text/x-red" data-template-name="atem-atem">
    <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">
        <label for="node-input-network"><i class="icon-bookmark"></i> Network</label>
        <input type="text" id="node-input-network">
    </div>
    <div class="form-row">
        <label for="node-input-outputMode"><i class="icon-tag"></i> Output Mode:</label>
        <select id="node-input-outputMode">
            <option value=""></option>
            <!-- <option value="reply">Only output reply</option> -->
            <option value="status">Output only status updates</option>
            <option value="supported">Output supported commands only</option>
            <option value="all">Output everything</option>
        </select>
    </div>
    <div class="form-row">
        <label for="node-input-sendTime"><i class="icon-tag"></i> Send Time Command:</label>
        <select id="node-input-sendTime">
            <option value=""></option>
            <option value="yes">Yes</option>
            <option value="no">No</option>
        </select>
    </div>
    <div class="form-row">
        <label for="node-input-sendInitialData"><i class="icon-tag"></i> Send Initial Data:</label>
        <select id="node-input-sendInitialData">
            <option value=""></option>
            <option value="yes">Yes</option>
            <option value="no">No</option>
        </select>
    </div>
    <div class="form-row">
        <label for="node-input-sendStatusUpdates"><i class="icon-tag"></i> Send Status Updates:</label>
        <select id="node-input-sendStatusUpdates">
            <option value=""></option>
            <option value="yes">Yes</option>
            <option value="no">No</option>
        </select>
    </div>
</script>

<!-- Register -->
<script type="text/javascript">
    RED.nodes.registerType('atem-atem', {
        category: 'BlackMagic',
        color: '#6B6B6B',
        defaults: {
            name: {value: ""},
            network: {value: "", required: true, type: "atem-network"},
            outputMode: {value: "supported", required: true},
            sendTime: {value: "yes", required: true},
            sendInitialData: {value: "yes", required: true},
            sendStatusUpdates: {value: "yes", required: true}
        },
        inputs: 1,
        outputs: 1,
        align: "right",
        paletteLabel: "ATEM",
        icon: "blackmagiclogo.png",
        label: function() {
            return this.name||"ATEM";
        }
    });
</script>

<!-- Information Panel -->
<script type="text/x-red" data-help-name="atem-atem">
    <h1>Blackmagic ATEM</h1>
    <a href = "https://github.com/haydendonald/blackmagic-atem-nodered"><p>Github</p></a>
    <a href="https://github.com/haydendonald/blackmagic-atem-nodered/blob/master/howToUse.md"><h1>How To Use!</h1></a>
</script>