node-red-contrib-blynk-ws
Version:
Node Red integration with Blynk App and Server through websockets
218 lines (199 loc) • 10.6 kB
HTML
<script type="text/javascript">
// eslint-disable-next-line func-names
(function () {
function label() {
let deviceName = 'n/a';
if (this.key !== undefined && this.key !== '') deviceName = this.key.slice(-5);
return this.name || `Blynk device-${deviceName}`;
}
function onEditPrepare() {
const tabs = RED.tabs.create({
id: 'node-config-blynk-ws-client-tabs',
onchange(tab) {
$('#node-config-blynk-ws-client-tabs-content').children().hide();
$(`#${tab.id}`).show();
},
});
tabs.addTab({
id: 'blynk-ws-client-tab-connection',
label: 'Connection',
});
tabs.addTab({
id: 'blynk-ws-client-tab-advanced',
label: 'Advanced',
});
setTimeout(() => { tabs.resize(); }, 0);
if (this.proxy_type === undefined || this.proxy_type === '') {
$('#node-config-input-proxy_type').val('no');
}
$('#node-config-input-proxy_type').on('change', function onChangeProxyType() {
if ($(this).val() === 'custom') {
$('#node-config-input-proxy_url').show();
} else {
$('#node-config-input-proxy_url').hide();
}
}).change();
function PowerON() {
$('#node-enabled').removeClass('fa-toggle-off');
$('#node-enabled').addClass('fa-toggle-on');
$('#node-power').removeClass('power-disable');
$('#node-power').addClass('power-enable');
}
function PowerOFF() {
$('#node-enabled').removeClass('fa-toggle-on');
$('#node-enabled').addClass('fa-toggle-off');
$('#node-power').removeClass('power-enable');
$('#node-power').addClass('power-disable');
}
$('#node-enabled').on('click', () => {
if ($('#node-config-input-enabled').is(':checked')) {
$('#node-config-input-enabled').prop('checked', false);
PowerOFF();
} else {
$('#node-config-input-enabled').prop('checked', true);
PowerON();
}
}).change();
($('#node-config-input-enabled').is(':checked')) ? PowerON() : PowerOFF(); // eslint-disable-line no-unused-expressions
// compatibility: enable config node from old version < 0.8.0 library
if (this.enabled === undefined) {
$('#node-enabled').trigger('click');
}
}
RED.nodes.registerType('blynk-ws-client', {
category: 'config',
defaults: {
name: { value: '' },
path: { value: '', required: true, validate: RED.validators.regex(/^((ws(s?)):\/\/)?((([a-zA-Z0-9_-]{2,}\.)+[a-zA-Z]{2,})|((([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])\.){3}([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5]))|([a-zA-Z0-9_-]*))(:[0-9]{1,5})?(\/[a-zA-Z0-9_-]*)?$/) }, // eslint-disable-line max-len
key: { value: '', required: true, validate: RED.validators.regex(/^[a-zA-Z0-9-_=]{32}$/) }, // fix issue #13 https://github.com/gablau/node-red-contrib-blynk-ws/issues/13
dbg_all: { value: false },
dbg_read: { value: false },
dbg_write: { value: false },
dbg_notify: { value: false },
dbg_mail: { value: false },
dbg_prop: { value: false },
dbg_sync: { value: false },
dbg_bridge: { value: false },
dbg_low: { value: false },
dbg_pins: { value: '' },
multi_cmd: { value: false },
proxy_type: { value: 'no', required: true },
proxy_url: { value: '' },
enabled: { value: true },
},
inputs: 0,
outputs: 0,
label,
oneditprepare: onEditPrepare,
});
}());
</script>
<!-- Blynk Server configuration node -->
<script type="text/x-red" data-template-name="blynk-ws-client">
<style>
.power-enable {
color: #0aa737;
}
.power-disable {
color: #ff0000;
}
</style>
<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" data-i18n="[placeholder]node-red:common.label.name">
</div>
<div class="form-row">
<label for="node-config-input-enabled"><i id="node-power" class="fa fa-power-off"></i> Enabled</label>
<i id="node-enabled" class="fa fa-lg fa-toggle-on"></i>
<input type="checkbox" id="node-config-input-enabled" style="display:none"></input>
<span style="font-size: 80%;"> (enable this button for connect to blynk on startup)</span>
</div>
<div class="form-row">
<ul style="background: #fff; min-width: 600px; margin-bottom: 20px;" id="node-config-blynk-ws-client-tabs"></ul>
</div>
<div id="node-config-blynk-ws-client-tabs-content" style="min-height: 170px;">
<div id="blynk-ws-client-tab-connection" style="display:none">
<div class="form-row">
<label for="node-config-input-path"><i class="fa fa-bookmark"></i> Url</label>
<input type="text" id="node-config-input-path" placeholder="ex. wss://<your-local-ip>:9443/websockets">
</div>
<div class="form-row">
<label for="node-config-input-key"><i class="fa fa-key"></i> Auth Token</label>
<input type="text" id="node-config-input-key" placeholder="ex. "f45626c103a94983b469637978b0c78a"">
</div>
<div class="form-row">
<label for="node-config-input-proxy"><i class="fa fa-server"></i> <span>Proxy</span></label>
<div style="left: 105px;position: relative;width: 75%;top: -24px;">
<select id="node-config-input-proxy_type" style="width:70%">
<option value="no" >No proxy</option>
<option value="system" >Use default system proxy</option>
<option value="custom" >Use custom server proxy</option>
</select>
<input type="text" id="node-config-input-proxy_url" placeholder="http://192.168.0.1:8080">
</div>
</div>
<div class="form-tips">
<span style="color:#ff0000;font-weight:bold">
* Warning: as of January 1, 2023 it is no longer possible to use the Blynk Cloud Server (blynk-cloud.com)
</span><br>
</div>
<div class="form-tips">
Url for Local server is:<br>
<b>ws://<your-local-ip>:8080/websockets</b><br>
or with secure SSL:<br>
<b>wss://<your-local-ip>:9443/websockets</b></p>
</div>
</div>
<div id="blynk-ws-client-tab-advanced" style="display:none">
<div class="form-row">
<label for="node-config-input-debug"><i class="fa fa-bug"></i> Protocol Log</label>
<ul style="width: 70%;display: inline-block;vertical-align: top;list-style-type: none;-webkit-column-count: 3;-moz-column-count: 3;column-count: 3;">
<li>
<input type="checkbox" id="node-config-input-dbg_all" value="all" style="width: auto; vertical-align: top;"> All</input>
</li><li>
<input type="checkbox" id="node-config-input-dbg_read" value="all" style="width: auto; vertical-align: top;"> Read</input>
</li><li>
<input type="checkbox" id="node-config-input-dbg_write" value="all" style="width: auto; vertical-align: top;"> Write</input>
</li><li>
<input type="checkbox" id="node-config-input-dbg_prop" value="all" style="width: auto; vertical-align: top;"> Property</input>
</li><li>
<input type="checkbox" id="node-config-input-dbg_sync" value="all" style="width: auto; vertical-align: top;"> Sync</input>
</li><li>
<input type="checkbox" id="node-config-input-dbg_bridge" value="all" style="width: auto; vertical-align: top;"> Bridge</input>
</li><li>
<input type="checkbox" id="node-config-input-dbg_notify" value="all" style="width: auto; vertical-align: top;"> Notify</input>
</li><li>
<input type="checkbox" id="node-config-input-dbg_mail" value="all" style="width: auto; vertical-align: top;"> Mail</input>
</li><li>
<input type="checkbox" id="node-config-input-dbg_low" value="all" style="width: auto; vertical-align: top;"> Low Level</input>
</li>
</ul>
<div style="left: 110px;position: relative;width: 75%;">
<span for="node-config-input-dbg_pins" style="margin-right: 10px;"> <span>Pins to log</span></span>
<input id="node-config-input-dbg_pins" placeholder="ex: 1,15,22" style="width: 70%;" type="text">
</div>
</div>
<div class="form-row">
<label for="node-config-input-multi_cmd"><i class="fa fa-cog"></i> <span>Protocol</span></label>
<input type="checkbox" id="node-config-input-multi_cmd" value="all" style="width: auto; vertical-align: top;"> Use multiple command <span style="font-size: 80%;">(local server >= 0.34.0)</span></input>
</div>
</div>
</div>
</script>
<script type="text/x-red" data-help-name="blynk-ws-client">
<p>This configuration node connects to a Blynk Server via WebSocket on the specified URL.
<br /><br />
<span style="color:#ff0000;font-weight:bold">
* Warning: as of January 1, 2023 it is no longer possible to use the Blynk Cloud Server (blynk-cloud.com)
</span><br><br>
To connect to Local Server use this url:<br>
Websocket: <b>ws://<your-local-ip>:8080/websockets</b><br>
Websocket SSL: <b>wss://<your-local-ip>:9443/websockets</b><br><br>
The <b>Auth Token</b> is a unique identifier which is needed to connect your hardware to your smartphone.<br>
You’ll get Auth Token automatically on your email after project creation / add device.
</p>
<p class="form-tips">
Official documentation:
<a href="https://gablau.dev/blynk-legacy-docs/#getting-started-getting-started-with-the-blynk-app-4-auth-token">Auth Token</a>
<p>
</script>