node-red-nodes/hardware/wemo/WeMoNG.html

<!--
  Copyright 2016 IBM Corp.
  Licensed under the Apache License, Version 2.0 (the "License");
  you may not use this file except in compliance with the License.
  You may obtain a copy of the License at
  http://www.apache.org/licenses/LICENSE-2.0
  Unless required by applicable law or agreed to in writing, software
  distributed under the License is distributed on an "AS IS" BASIS,
  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  See the License for the specific language governing permissions and
  limitations under the License.
-->
<script type="text/x-red" data-template-name="wemo in">
    <div class="form-row">
        <label for="node-input-topic"><i class="fa fa-tasks"></i> Topic</label>
        <input type="text" id="node-input-topic" placeholder="Topic">
    </div>

    <br/>
    <div class="form-row">
        <label for="node-input-device"><i class="fa fa-tasks"></i> Device</label>
        <input type="text" id="node-input-device" placeholder="Device">
    </div>
    <br/>
    <!-- By convention, most nodes have a 'name' property. The following div -->
    <!-- provides the necessary field. Should always be the last option      -->
    <div class="form-row">
        <label for="node-input-name"><i class="fa fa-tag"></i> Name</label>
        <input type="text" id="node-input-name" placeholder="Name">
    </div>
</script>

<script type="text/x-red" data-help-name="wemo in">
  <p>A node that listens to event notifications from Belkin WeMo devices.</p>
  <p>Supported devices include:</p>
  <ul>
    <li>Sockets</li>
    <li>Insight Sockets</li>
    <li>Light Bulbs</li>
    <li>Light Groups</li>
    <li>Motion Detector</li>
  </ul>
  <p>Sockets will generate msg.payload with values of 0/1 for off or on, all other
  types will return an object like this:</p>
  <pre>
  {
    name: 'Bedroom light',
    type: 'light',
    id: '94103EA2B27803ED',
    capability: '1006',
    value: 1
  }
  </pre>
  <p>Current known capabilities</p>
  <ul>
    <li>10006 - on/off</li>
    <li>10008 - brightness</li>
  </ul>
</script>

<script type="text/javascript">
    RED.nodes.registerType('wemo in',{
        category: 'input',      // the palette category
        defaults: {             // defines the editable properties of the node
            name: {value:""},   //  along with default values.
            topic: {value:"wemo", required: true},
            device: {value:"", type: "wemo-dev"}
        },
        color: "LawnGreen",
        inputs:0,               // set the number of inputs - only 0 or 1
        outputs:1,              // set the number of outputs - 0 to n
        // set the icon (held in icons dir below where you save the node)
        icon: "belkin.png",     // saved in  icons/myicon.png
        label: function() {     // sets the default label contents
            return this.name||"wemo";
        },
        labelStyle: function() { // sets the class to apply to the label
            return this.name?"node_label_italic":"";
        }
    });
</script>

<script type="text/x-red" data-template-name="wemo out">
    <div class="form-row">
        <label for="node-input-device"><i class="fa fa-tasks"></i> Device</label>
        <input type="text" id="node-input-device" placeholder="Device">
    </div>
    <br/>
    <!-- By convention, most nodes have a 'name' property. The following div -->
    <!-- provides the necessary field. Should always be the last option      -->
    <div class="form-row">
        <label for="node-input-name"><i class="fa fa-tag"></i> Name</label>
        <input type="text" id="node-input-name" placeholder="Name">
    </div>
</script>

<script type="text/x-red" data-help-name="wemo out">
  <p>A node to control Belkin WeMo Devices</p>
  <p>Supported devices include:</p>
  <ul>
    <li>Sockets</li>
    <li>Insight Sockets</li>
    <li>Light Bulbs</li>
  </ul>
  <p>Sets the device on or off based on the passed in msg.payload values of:</p>
  <ul>
    <li>on/off</li>
    <li>1/0</li>
    <li>true/false</li>
  </ul>
  <p>for light bulbs it also accepts an object with the following structure</p>
  <pre>
  {
    state: 1,
    dim: 255,
    color: '255,255,255',
    temperature: 25000
  }
  </pre>
</script>

<script type="text/javascript">
    RED.nodes.registerType('wemo out',{
        category: 'output',      // the palette category
        defaults: {             // defines the editable properties of the node
            name: {value:""},   //  along with default values.
            device: {type: "wemo-dev", required: true}
        },
        color: "LawnGreen",
        inputs: 1,               // set the number of inputs - only 0 or 1
        // set the icon (held in icons dir below where you save the node)
        icon: "belkin.png",     // saved in  icons/myicon.png
        label: function() {     // sets the default label contents
            return this.name||"wemo";
        },
        labelStyle: function() { // sets the class to apply to the label
            return this.name?"node_label_italic":"";
        }
    });
</script>

<script type="text/x-red" data-template-name="wemo-dev">
    <div class="form-row">
        <label for="node-config-input-device"><i class="fa fa-tasks"></i> Device</label>
        <select size="4" id="node-config-input-device">
        </select>
    </div>
    <br/>
    <div class="form-row">
      <label for="node-config-input-type"><i class="fa fa-tasks"></i> Type</label>
      <input type="text" editable="false" id="node-config-input-type" placeholder="Type"/>
      <input type="hidden" editable="false"  id="node-config-input-name"/>
    </div>
</script>

<script type="text/javascript">
    RED.nodes.registerType('wemo-dev',{
        category: 'config',      // the palette category
        defaults: {             // defines the editable properties of the node
            device: {value:"", required: true},   //  along with default values.
            name: {value: ""}
        },
        label: function() {     // sets the default label contents
            return this.name;
        },
        oneditprepare: function() {
            var devices;
            $.getJSON('wemoNG/devices', function(data) {
                devices = data;
                var devs = Object.keys(data);
                if (devs.length !== 0) {
                    for (var d in devs) {
                        if (devs.hasOwnProperty(d)) {
                            $('<option/>',{
                                'value': devs[d],
                                'text': data[devs[d]].name
                            }).appendTo('#node-config-input-device');
                            console.log(data[devs[d]].name);
                        }
                    }
                }
            });

            $('#node-config-input-device').change(function() {
                var id = $( "#node-config-input-device option:selected" ).first().val();
                if (devices) {
                    $('#node-config-input-type').val(devices[id].type);
                    $('#node-config-input-name').val(devices[id].name);
                }
            });
        }
    });
</script>