node-red-contrib-blynk-ws
Version:
Node Red integration with Blynk App and Server through websockets
217 lines (203 loc) • 10.5 kB
HTML
<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() {
if ($('#node-input-pinmode').val() == 1) { // eslint-disable-line eqeqeq
if (!validPin($('#node-input-pin').val())) {
$('#node-input-pin').val('0');
}
}
}
function label() {
let pin = 'pin error';
const dynamic = (this.pinmode == 1); // eslint-disable-line eqeqeq
const type = 'Set Property';
if (validPin(this.pin)) {
pin = `Pin V${this.pin} - ${type}`;
}
if (dynamic) {
pin = `Pin Dynamic - ${type}`;
}
return this.name || pin;
}
function onEditPrepare() {
if (this.pinmode === undefined) {
$('#node-input-pinmode').val('0');
}
if (this.prop === undefined || this.prop === '') {
$('#node-input-prop').val('bycode');
}
$('#node-input-pinmode').on('change', function onChangePinMode() {
if ($(this).val() == 0) { // eslint-disable-line eqeqeq
$('#div-set-property-pin').show();
} else {
$('#div-set-property-pin').hide();
}
}).change();
}
RED.nodes.registerType('blynk-ws-out-set-property', {
category: 'Blynk_ws',
paletteLabel: 'set property',
defaults: {
name: { value: '' },
pin: { value: '', required: false, validate: RED.validators.regex(/^([0-9]|[1-9][0-9]|1[0-9][0-9]|2[0-4][0-9]|25[0-5])$/) },
pinmode: { value: 0 },
prop: { value: '', required: true },
client: { type: 'blynk-ws-client', required: true },
},
color: '#1BC17C',
inputs: 1,
outputs: 0,
icon: 'white-globe.png',
align: 'right',
labelStyle() {
return this.name ? 'node_label_italic' : '';
},
label,
oneditsave: onEditSave,
oneditprepare: onEditPrepare,
});
}());
</script>
<!-- Blynk out Node - SetProperty -->
<script type="text/x-red" data-template-name="blynk-ws-out-set-property">
<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-pinmode"><i class="fa fa-cogs"></i> <span>Pin Mode</span></label>
<select id="node-input-pinmode" style="width:70%">
<option value="0">Fixed</option>
<option value="1">Dynamic</option>
</select>
</div>
<div class="form-row" id="div-set-property-pin">
<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-prop"><i class="fa fa-list"></i> <span>Property</span></label>
<select id="node-input-prop" style="width:70%">
<option value="bycode" >Set multiple properties (by code)</option>
<optgroup label="All Widgets">
<option value="color" >Color</option>
<option value="label" >Label</option>
<option value="min" >Min</option>
<option value="max" >Max</option>
</optgroup>
<optgroup label="Button">
<option value="onLabel" >On label</option>
<option value="offLabel" >Off label</option>
</optgroup>
<optgroup label="Styled Button">
<option value="onLabel" >On label</option>
<option value="offLabel" >Off label</option>
<option value="onColor" >On color</option>
<option value="offColor" >Off color</option>
<option value="onBackColor" >On background color</option>
<option value="offBackColor" >Off background color</option>
</optgroup>
<optgroup label="Menu">
<option value="labels">Labels</option>
</optgroup>
<optgroup label="Music Player">
<option value="isOnPlay" >Is on play</option>
</optgroup>
<optgroup label="Video Streaming">
<option value="url" >URL</option>
</optgroup>
<optgroup label="Step Control">
<option value="step" >Step</option>
</optgroup>
<optgroup label="Slider">
<option value="maximumFractionDigits" >Maximum Fraction Digits</option>
</optgroup>
<optgroup label="Image Gallery">
<option value="opacity" >Opacity</option>
<option value="rotation" >Rotation</option>
<option value="scale" >Scale</option>
</optgroup>
</select>
</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-out-set-property">
<p>Blynk set property node.</p>
<p>This node will write the value in payload to specified property at the specified pin number.</p>
<p>"Pin mode" selects whether the pin number is fixed or dynamic<br>
Fixed, select the pin number in the interface<br>
Dynamic, the pin number is passed through <code> msg.pin</code> property</p>
<p>Use the node property by select on menu or override using <code>msg.prop</code></p><br>
<p>To set multiple properties use this syntax: <br>
<code>msg.label</code> to set the Label property<br>
<code>msg.color</code> to set the color property<br>
<code>msg.min</code> to set the Min property<br>
<code>msg.max</code> to set the Max property<br>
<code>msg.onlabel</code> to set the onLabel property (only Button and Styled Button widget)<br>
<code>msg.offlabel</code> to set the offLabel property (only Button and Styled Button widget)<br>
<code>msg.onColor</code> to set the onColor property (only Styled Button widget)<br>
<code>msg.offColor</code> to set the offColor property (only Styled Button widget)<br>
<code>msg.onBackColor</code> to set the onBackColor property (only Styled Button widget)<br>
<code>msg.offBackColor</code> to set the offBackColor property (only Styled Button widget)<br>
<code>msg.labels</code> to set the Labels property (only Menu widget)<br>
<code>msg.isonplay</code> to set the isOnPlay property (only Media Player widget)<br>
<code>msg.url</code> to set the url property (only Video Straming widget)<br>
<code>msg.step</code> to set the step property (only Step Control widget)<br>
<code>msg.maximumFractionDigits</code> to set the maximumFractionDigits property (only Slider widget)<br>
<code>msg.opacity</code> to set opacity in range 0-100% (only Image Gallery widget)<br>
<code>msg.scale</code> to set scale in range 0-100% (only Image Gallery widget)<br>
<code>msg.rotation</code> to set rotation in range 0-360 degree (only Image Gallery widget)<br>
<code>msg.url</code> and <code>msg.imgid</code> to load url to specific image index (only Image Gallery widget)<br>
<code>msg.urls</code> (array of string) to load images on gallery widget (only Image Gallery widget)<br>
</p><br>
<br>
<h2>ALL WIDGETS</h2>
<p>Four widget properties are supported - <code>color</code>, <code>label</code>, <code>min</code>, <code>max</code> for all widgets : </p>
<p><code>label</code> is string for label of all widgets.</p><p><code>color</code> is string in <a href="http://www.w3schools.com/html/html_colors.asp">HEX</a> format (in the form: #RRGGBB,
where RR (red), GG (green) and BB (blue) are hexadecimal values between 00 and FF). For example :</p>
<pre><code>
#define BLYNK_GREEN "#23C48E"
#define BLYNK_BLUE "#04C0F8"
#define BLYNK_YELLOW "#ED9D00"
#define BLYNK_RED "#D3435C"
#define BLYNK_DARK_BLUE "#5F7CD8"</code></pre>
<br><h2>Widget specific</h2>
<p>Widget specific properties: </p>
<p><strong>Button and Styled Button</strong></p>
<p><code>onLabel</code> is string for ON label of button;</p>
<p><code>offLabel</code> is string for OFF label of button;</p>
<p><strong>Styled Button</strong></p>
<p><code>onColor</code> is the color of label for ON state of styled button;</p>
<p><code>offColor</code>is the color of label for OFF state of styled button;</p>
<p><code>onBackColor</code> is the background color for ON state of styled button;</p>
<p><code>offBackColor</code>is the background color for OFF state of styled button;</p>
<p><strong>Menu</strong></p><p><code>labels</code> is list of strings for Menu widget selections (array expected: <code>["Labels 1","Labels 2","Labels 3"]</code>);</p>
<pre><code>Blynk.setProperty(V0, "labels", "label 1", "label 2", "label 3");</code></pre>
<p><strong>Music Player</strong></p><p><code>isOnPlay</code> is boolean accepts true/false.</p>
<pre><code>Blynk.setProperty(V0, "isOnPlay", "true");</code></pre>
<p><strong>Video Straming</strong></p><p><code>url</code> is a string URL of streaming.</p>
<pre><code>Blynk.setProperty(V0, "url", "http://my_new_video_url");</code></pre>
<p><strong>Step Control</strong></p><p><code>step</code> is a integer value of step.</p>
<pre><code>Blynk.setProperty(V0, "step", "5");</code></pre>
<p><strong>Slider</strong></p><p><code>maximumFractionDigits</code> is a integer value of decimals digits.</p>
<p><strong>Image Gallery</strong></p>
<p><code>opacity</code> to set opacity in range 0-100%</p>
<p><code>scale</code> to set scale in range 0-100%</p>
<p><code>rotation</code> to set rotation in range 0-360 degree</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>