blynk-api.html

<!--
  Copyright 2013 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/javascript">

  (function () {
    function getPinType(type) {
      switch (type) {
        case 'A':
          type = 'Analog';
          break;
        case 'D':
          type = 'Digital';
          break;
        case 'V':
          type = 'Virtual';
          break;
        default:
          break;
      }
      return type;
    }
    function capitalizeFirstLetter(string) {
      return string.charAt(0).toUpperCase() + string.slice(1);
    }
    function ws_oneditprepare() {
      /*if(this.client) {
          $("#node-input-mode").val('client').change();
      }*/
    }

    function api_oneditsave() {

    }
    function preparePinIn() {
      $("#node-input-pin_all").on("change", function () {
        if ($(this).is(":checked")) {
          $("#node-input-pin").parent().hide();
        } else {
          $("#node-input-pin").parent().show();
        }
      }).change();
    }

    function api_onConfigSave() {
      var ws = $("#node-config-input-path").val();
      var url = $("#node-config-input-api").val();
      if (url) {
        if (url.substr(-1) != '/') url += '/';
        $("#node-config-input-api").val(url);
      } else if (ws) {
        url = ws.replace('/websockets', '/').replace('wss:', 'https:').replace('ws:', 'http:');
        $("#node-config-input-api").val(url);
      }
    }

    $(document).on('change', 'select#node-input-type_connect', function () {
      var typeConnect = this.value;
      // if(typeConnect == 'ws' && $("#node-input-pin_type").val() != 'V') {}
      if (typeConnect == 'ws') {
        //$('select#node-input-pin_type option[value="D"]').attr('disabled','disabled');
        $('select#node-input-pin_type option[value!="V"]').attr('disabled', 'disabled');
        $("#node-input-pin_type").val('V');
      } else {
        $('select#node-input-pin_type option[value!="V"]').removeAttr('disabled');
      }
    });

    $(document).on('change', 'select#node-input-pin_type', function () {
      var pinType = this.value;
      if (pinType != 'V' && $("#node-input-type_connect").val() != 'api') {
        // alert('Digital pin only send via API');
        $("#node-input-type_connect").val('api');
      }
    });

    function ws_label() {
      _pin = 'no pin';
      _type = '';
      switch (this.type) {
        case 'blynk-api-in-read':
          _type = 'Read Event';
          break;
        case 'blynk-api-in-write':
          _type = 'Write Event';
          break;
        case 'blynk-api-out-read':
          _type = 'Read';
          break;
        case 'blynk-api-out-write':
          _type = 'Write';
          break;
        default:
          break;
      }

      if (typeof this.pin === 'number') {
        if (this.pin_type) {
          _pin = this.pin_type + this.pin + ' - ' + _type;
        } else {
          _pin = this.pin + ' - ' + _type;
        }
      }
      if (this.pin_all) {
        _pin = 'All Pins' + ' - ' + _type;
      }
      if (this.type == "blynk-api-out-email") {
        return this.name || this.email || 'email';
      }
      if (this.type == "blynk-api-client") {
        return this.name || this.key || 'n/a';
      }

      return this.name || _pin;
    }

    function ws_validateclient() {
      /* if($("#node-input-mode").val() === 'client' || (this.client && !this.server)) {
          return RED.nodes.node(this.client) != null;
      } else {
          return true;
      } */

      return true;
    }

    RED.nodes.registerType('blynk-api-client', {
      category: 'config',
      defaults: {
        name: { value: '' },
        api: { value: '' },
        path: { value: '', required: true, validate: RED.validators.regex(/^((?!\/debug\/ws).)*$/) },
        key: { value: '', required: true }
      },
      inputs: 0,
      outputs: 0,
      label: ws_label,
      oneditsave: api_onConfigSave,
    });

    RED.nodes.registerType('blynk-api-in-read', {
      category: 'Blynk API',
      paletteLabel: 'read event',
      defaults: {
        name: { value: '' },
        pin: { value: 0 },
        pin_type: { value: 'V' },
        pin_all: { value: 0 },
        client: { type: "blynk-api-client", validate: ws_validateclient }
      },
      color: "#1BC17C",
      inputs: 0,
      outputs: 1,
      icon: "white-globe.png",
      labelStyle: function () {
        return this.name ? "node_label_italic" : "";
      },
      label: ws_label,
      oneditsave: api_oneditsave,
      oneditprepare: preparePinIn
    });

    RED.nodes.registerType('blynk-api-in-write', {
      category: 'Blynk API',
      paletteLabel: 'write event',
      defaults: {
        name: { value: '' },
        pin: { value: 0 },
        pin_type: { value: 'V' },
        pin_all: { value: 0 },
        client: { type: "blynk-api-client", validate: ws_validateclient }
      },
      color: "#1BC17C",
      inputs: 0,
      outputs: 1,
      icon: "white-globe.png",
      labelStyle: function () {
        return this.name ? "node_label_italic" : "";
      },
      label: ws_label,
      oneditsave: api_oneditsave,
      oneditprepare: preparePinIn
    });

    RED.nodes.registerType('blynk-api-out-write', {
      category: 'Blynk API',
      paletteLabel: 'write',
      defaults: {
        name: { value: '' },
        type_connect: { value: 'ws' }, // ws - api
        pin_type: { value: 'D' }, // Virtual - Digital - Analog
        pin: { value: 0 },
        client: { type: "blynk-api-client", validate: ws_validateclient }
      },
      color: "#1BC17C",
      inputs: 1,
      outputs: 0,
      icon: "white-globe.png",
      align: "right",
      labelStyle: function () {
        return this.name ? "node_label_italic" : "";
      },
      label: ws_label,
      oneditsave: api_oneditsave,
      oneditprepare: ws_oneditprepare
    });

    RED.nodes.registerType('blynk-api-out-read', {
      category: 'Blynk API',
      paletteLabel: 'read',
      defaults: {
        name: { value: '' },
        type_connect: { value: 'api' }, // ws - api
        pin_type: { value: 'D', required: true },
        pin: { value: '', required: true },
        client: { type: "blynk-api-client", validate: ws_validateclient }
      },
      color: "#1BC17C",
      inputs: 1,
      outputs: 1,
      icon: "white-globe.png",
      align: "right",
      labelStyle: function () {
        return this.name ? "node_label_italic" : "";
      },
      label: ws_label,
      oneditsave: api_oneditsave,
      oneditprepare: ws_oneditprepare
    });


    RED.nodes.registerType('blynk-api-out-email', {
      category: 'Blynk API',
      paletteLabel: 'email',
      defaults: {
        name: { value: '' },
        email: {},
        client: { type: "blynk-api-client", validate: ws_validateclient }
      },
      color: "#1BC17C",
      inputs: 1,
      outputs: 0,
      icon: "email.png",
      align: "right",
      labelStyle: function () {
        return this.name ? "node_label_italic" : "";
      },
      label: ws_label,
      oneditsave: api_oneditsave,
      oneditprepare: ws_oneditprepare
    });


  })();
</script>


<!-- Blynk Input Node - Read -->
<script type="text/x-red" data-template-name="blynk-api-in-read">
    <div class="form-row" id="websocket-client-row">
        <label for="node-input-client"><i class="fa fa-bookmark"></i> <span>Connection</span></label>
        <input type="text" id="node-input-client">
    </div>
    <div class="form-row">
        <label for="node-input-pin_all"><i class="fa fa-cogs"></i> <span>Pins</span></label>
        <input type="checkbox" id="node-input-pin_all"  value="1" style="width: auto; vertical-align: top;"> All Pins</span></input>
    </div>
    <div class="form-row">
        <label for="node-input-pin"><i class="fa fa-tag"></i> <span>Pin</span></label>
        <select id="node-input-pin_type" style="width:25%">
            <option value="V">Virtual Pin</option>
            <option value="D">Digital Pin</option>
        </select>
        <input type="number" id="node-input-pin"  min="0" max="128" placeholder="pin" style="width:45%">
   	</div>
   <div class="form-row">
        <label for="node-input-name"><i class="fa fa-tag"></i> <span>Name</span></label>
        <input type="text" id="node-input-name" placeholder="Name">
    </div>
</script>

<script type="text/x-red" data-help-name="blynk-api-in-read">
    <p>Blynk read event node.</p>
    <p>msg.payload will contain the virtual pin number that triggered the read event</p>
</script>

<!-- Blynk Input Node - Write -->
<script type="text/x-red" data-template-name="blynk-api-in-write">
    <div class="form-row" id="websocket-client-row">
        <label for="node-input-client"><i class="fa fa-bookmark"></i> <span>Connection</span></label>
        <input type="text" id="node-input-client">
    </div>
    <div class="form-row">
        <label for="node-input-pin_all"><i class="fa fa-cogs"></i> <span>Pins</span></label>
        <input type="checkbox" id="node-input-pin_all"  value="1" style="width: auto; vertical-align: top;"> All Pins</span></input>
    </div>
    <div class="form-row">
        <label for="node-input-pin"><i class="fa fa-tag"></i> <span>Pin</span></label>
        <select id="node-input-pin_type" style="width:25%">
            <option value="V">Virtual Pin</option>
            <option value="D">Digital Pin</option>
        </select>
        <input type="number" id="node-input-pin"  min="0" max="128" placeholder="pin" style="width:45%">
   	</div>
    <div class="form-row">
        <label for="node-input-name"><i class="fa fa-tag"></i> <span>Name</span></label>
        <input type="text" id="node-input-name" placeholder="Name">
    </div>
</script>

<script type="text/x-red" data-help-name="blynk-api-in-write">
    <p>Blynk write event node.</p>
    <p>msg.payload will contain the the value to write to the specified pin.</p>
    <p>msg.arrayOfValues will contain an array of values sent, useful for Widgets that have the MERGE ability.</p>
</script>

<!-- Blynk out Node - Write -->
<script type="text/x-red" data-template-name="blynk-api-out-write">
    <div class="form-row" id="websocket-client-row">
        <label for="node-input-client"><i class="fa fa-bookmark"></i> <span>Connection</span></label>
        <input type="text" id="node-input-client">
    </div>
    <div class="form-row">
        <label for="node-input-type_connect"><i class="fa fa-tag"></i> <span>Type connect</span></label>
        <select id="node-input-type_connect" style="width:70%">
            <option value="ws">Websocket</option>
            <option value="api">API</option>
        </select>
    </div>

    <div class="form-row">
        <label for="node-input-pin"><i class="fa fa-tag"></i> <span>Pin</span></label>
        <select id="node-input-pin_type" style="width:25%">
            <option value="V">Virtual Pin</option>
            <option value="D">Digital Pin</option>
            <!-- <option value="A">Analog Pin</option> -->
        </select>
        <input type="number" id="node-input-pin"  min="0" max="128" placeholder="pin" style="width:45%">
   	</div>
   	<div class="form-row">
        <label for="node-input-name"><i class="fa fa-tag"></i> <span>Name</span></label>
        <input type="text" id="node-input-name" placeholder="Name">
    </div>
</script>

<script type="text/x-red" data-help-name="blynk-api-out-write">
    <p>Write pin value.</p>
    <p>This node will write the value in payload to the specified pin number.</p>.
</script>

<!-- Blynk out Node - Read -->
<script type="text/x-red" data-template-name="blynk-api-out-read">
    <div class="form-row" id="websocket-client-row">
        <label for="node-input-client"><i class="fa fa-bookmark"></i> <span>Connection</span></label>
        <input type="text" id="node-input-client">
    </div>
    <div class="form-row">
        <label for="node-input-type_connect"><i class="fa fa-tag"></i> <span>Type connect</span></label>
        <select id="node-input-type_connect" style="width:70%" disabled>
            <option value="ws">Websocket</option>
            <option value="api">API</option>
        </select>
    </div>

    <div class="form-row">
        <label for="node-input-pin"><i class="fa fa-tag"></i> <span>Pin</span></label>
        <select id="node-input-pin_type" style="width:25%">
            <option value="V">Virtual Pin</option>
            <option value="D">Digital Pin</option>
            <option value="A">Analog Pin</option>
        </select>
        <input type="number" id="node-input-pin" min="0" max="128" placeholder="pin" style="width:45%">
   	</div>
   	<div class="form-row">
        <label for="node-input-name"><i class="fa fa-tag"></i> <span>Name</span></label>
        <input type="text" id="node-input-name" placeholder="Name">
    </div>
</script>

<script type="text/x-red" data-help-name="blynk-api-out-read">
    <p>Get pin value.</p>
</script>

<!-- Blynk out Node - Email -->
<script type="text/x-red" data-template-name="blynk-api-out-email">
    <div class="form-row" id="websocket-client-row">
        <label for="node-input-client"><i class="fa fa-bookmark"></i> <span>Connection</span></label>
        <input type="text" id="node-input-client">
    </div>
   	<div class="form-row">
        <label for="node-input-email"><i class="fa fa-tag"></i> <span>Email</span></label>
        <input type="text" id="node-input-email" placeholder="Email address">
    </div>
   	<div class="form-row">
        <label for="node-input-name"><i class="fa fa-tag"></i> <span>Name</span></label>
        <input type="text" id="node-input-name" placeholder="Name">
    </div>
</script>

<script type="text/x-red" data-help-name="blynk-api-out-email">
    <p>Blynk email node.</p>
    <p>This node will send an email using your msg.topic for subject and msg.payload for content.
	    <br />
	    Remember to add the email widget in your project and that the Blynk server has a setting how many emails per minute to send.
    </p>
</script>

<!-- Blynk Server configuration node -->
<script type="text/x-red" data-template-name="blynk-api-client">
    <div class="form-row">
        <label for="node-config-input-path"><i class="fa fa-bookmark"></i> Url WS</label>
        <input type="text" id="node-config-input-path" placeholder="ex. ws://blynk-cloud.com/websockets">
    </div>
    <div class="form-row">
        <label for="node-config-input-api"><i class="fa fa-bookmark"></i> Endpoint API</label>
        <input type="text" id="node-config-input-api" placeholder="ex. http://blynk-cloud.com/">
    </div>
    <div class="form-row">
        <label for="node-config-input-key"><i class="fa fa-bookmark"></i> Auth Token</label>
        <input type="text" id="node-config-input-key" placeholder="ex. &quot;f45626c103a94983b469637978b0c78a&quot;">
    </div>
    <div class="form-row">
        <label for="node-config-input-name"><i class="fa fa-tag"></i> <span>Name</span></label>
        <input type="text" id="node-config-input-name" placeholder="Name">
    </div>

    <div class="form-tips">
        <p>The url websocket of Blynk Cloud Server is:<br>
        <b>ws://blynk-cloud.com/websockets</b><br>
        or with secure SSL:<br>
        <b>wss://blynk-cloud.com/websockets</b>
        API Endpoint:<br>
        <b>http://blynk-cloud.com</b></p>
    </div>
    <div class="form-tips">
	    Url for Local server is:<br>
        <b>ws://&lt;your-local-ip&gt;:8080/websockets</b><br>
	    or with secure SSL:<br>
        <b>wss://&lt;your-local-ip&gt;:9443/websockets</b></p>
        API Endpoint:<br>
        <b>http://&lt;your-local-ip&gt;:8080</b></p>
    </div>
</script>

<script type="text/x-red" data-help-name="blynk-api-client">
   <p>This configuration node connects to a Blynk WebSocket Server on the specified URL.</p>
</script>