node-red-contrib-blynk-ws/nodes/blynk-ws-image-gallery.html

Node Red integration with Blynk App and Server through websockets

<script type="text/javascript">

    // eslint-disable-next-line func-names
    (function () {
      function validPin(tmppin) {
        const tmpPin = parseInt(tmppin, 10);
        if (Number.isInteger(tmpPin) && tmpPin >= 0 && tmpPin <= 255) {
          return true;
        }
        return false;
      }
    
      function onEditSave() {
      }

      function onEditPrepare() {
        if (this.prop === undefined) {
          $('#node-input-prop').val('0');
        }

        $('#node-input-prop').on('change', function onChangeProp() {
          if ($(this).val() == 0) { // eslint-disable-line eqeqeq
            $('#div-set-prop').show();
          } else {
            $('#div-set-prop').hide();
          }
        }).change();
      }
    
      function label() {
        let pin = 'pin error';
        const type = 'Image Gallery';
        if (validPin(this.pin)) {
          pin = `Pin V${this.pin} - ${type}`;
        }
        return this.name || pin;
      }
    
  RED.nodes.registerType('blynk-ws-image-gallery', {
        category: 'Blynk_ws',
        paletteLabel: 'image-gallery',
        defaults: {
          name: { value: '' },
          pin: { value: '', required: true, validate: RED.validators.regex(/^([0-9]|[1-9][0-9]|1[0-9][0-9]|2[0-4][0-9]|25[0-5])$/) },
          onlabel: { value: 'ON' },
          offlabel: { value: 'OFF' },
          oncolor: { value: '#000000' },
          onbackcolor: { value: '#ffffff' },
          offcolor: { value: '#ffffff' },
          offbackcolor: { value: '#000000' },
          client: { type: 'blynk-ws-client', required: true },
        },
        color: '#1BC17C',
        inputs: 1,
        outputs: 0,
        icon: 'image.png',
        align: 'right',
        labelStyle() {
          return this.name ? 'node_label_italic' : '';
        },
        label,
        oneditsave: onEditSave,
        oneditprepare: onEditPrepare,
  });
}());
</script>  

<!-- Blynk out Node - Write -->
<script type="text/x-red" data-template-name="blynk-ws-image-gallery">
    <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"><i class="fa fa-dot-circle-o"></i> <span>Virtual Pin</span></label>
        <input type="number" id="node-input-pin"  min="0" max="255" placeholder="pin">
    </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" data-i18n="[placeholder]node-red:common.label.name">
    </div>
</script>

<script type="text/x-red" data-help-name="blynk-ws-image-gallery">
    <p>Blynk Image Gallery node (Require beta app, Android or IOS).</p>
    <p>This node makes it easy to use the Image Gallery widget, you can write a value on the node or set a property.</p>

    <p>Use <code>msg.payload</code> to set image to show, index start from 1.</p>
    
    <p>If <code>msg.topic</code> is <code>write-property</code> this node will set the properties to node.</p>
    
    <p>To set properties of image use this syntax: <br>
    <code>msg.opacity</code> to set opacity in range 0-100%<br>
    <code>msg.scale</code> to set scale in range 0-100%<br>
    <code>msg.rotation</code> to set rotation in range 0-360 degree<br>
    <code>msg.url</code> and <code>msg.imgid</code> to load url to specific image index<br>
    <code>msg.urls</code> (array of string) to load images on gallery widget<br>
    <br> 
    </p><br> 
      
    <!--
    <p class="form-tips">
            Official documentation: 
            <a href="https://gablau.dev/blynk-legacy-docs/#blynk-main-operations-change-widget-properties">Change widget properties</a>
    <p>
    -->
   
</script>