node-red-contrib-broadlink-devices/mp1.html

Broadlink Node-RED control module

<script type="text/javascript">
  RED.nodes.registerType('MP1',{
    category: 'broadlink',
    color: '#3FADB5',
    defaults: {
        name: { value: '' },
        device: { type: 'broadlink-mp1-config', required: true }
    },
    inputs: 1,
    outputs: 1,
    icon: "icon_sp2.png",
    label: function() {
        return this.name||"MP1";
    }
  });

  RED.nodes.registerType('broadlink-mp1-config',{
    category: 'config',
    color: '#3FADB5',
    defaults: {
        name: { value: '', required: true },
        mac: { value: '', required: true },
        s1name: { value: 'S1' },
        s2name: { value: 'S2' },
        s3name: { value: 'S3' },
        s4name: { value: 'S4' },
    },
    inputs: 1,
    outputs: 1,
    icon: "icon_sp2.png",
    label: function() {
        return this.name||"MP1 Device";
    },
    oneditprepare: () => {
      const node = this, macInput = $('#node-config-input-mac'), macSelector = $('#node-config-input-mac-selector');
                  
      $.getJSON('broadlink/discover', (data) => {
        macSelector.children().remove();
        if (data.length === 0) {
            macSelector.append(`<option value="">No devices found</option>`);
            return;
        }
        data.forEach((dev) => {
          if (dev.type === 'MP1') {
            macSelector.append(`<option value="${dev.id}">${dev.mac} @ ${dev.ip}</option>`)
          }
        });
        macSelector.on('change', function () {
            macInput.val(macSelector.val());
        })
        macSelector.val(macInput.val());
      });
    }
  });
</script>

<script type="text/x-red" data-template-name="broadlink-mp1-config">
    <div class="form-row">
        <label for="node-config-input-name"><i class="icon-tag"></i> Name</label>
        <input type="text" id="node-config-input-name" placeholder="Name">
    </div>
    <div class="form-row">
        <label for="node-config-input-mac"><i class="fa fa-cog"></i> MAC Address</label>
        <input type="hidden" id="node-config-input-mac" placeholder="Mac Address">
        <select id="node-config-input-mac-selector" style="width:70%">
            <option value="_msg_">Loading ...</option>
        </select> 
    </div>
    <div class="form-row">
        <label for="node-config-input-s1name"><i class="icon-tag"></i> Socket 1 Alias</label>
        <input type="text" id="node-config-input-s1name" placeholder="S1">
    </div>
    <div class="form-row">
        <label for="node-config-input-s2name"><i class="icon-tag"></i> Socket 2 Alias</label>
        <input type="text" id="node-config-input-s2name" placeholder="S2">
    </div>
    <div class="form-row">
        <label for="node-config-input-s3name"><i class="icon-tag"></i> Socket 3 Alias</label>
        <input type="text" id="node-config-input-s3name" placeholder="S3">
    </div>
    <div class="form-row">
        <label for="node-config-input-s4name"><i class="icon-tag"></i> Socket 4 Alias</label>
        <input type="text" id="node-config-input-s4name" placeholder="S4">
    </div>
</script>
<script type="text/x-red" data-help-name="broadlink-mp1-config">
    <p>MP1 Device Configuration <code>msg.payload</code>:</p>
    <pre>{"mac":"b4430dc30cb3","host":"192.168.10.14"}</pre>
</script>

<script type="text/x-red" data-template-name="MP1">
    <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-device"><i class="icon-tag"></i> Device</label>
        <input type="text" id="node-input-device" placeholder="Device">
    </div>
</script>
<script type="text/x-red" data-help-name="MP1">
    <p>MP1 Device Configuration <code>msg.payload</code>:</p>
    <pre>{"mac":"b4430dc30cb3","host":"192.168.10.14"}</pre>
</script>