node-red-contrib-blynk-iot
Version:
Node Red integration with new Blynk IoT Platform
179 lines (161 loc) • 8.26 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-iot-client-tabs',
onchange(tab) {
$('#node-config-blynk-iot-client-tabs-content').children().hide();
$(`#${tab.id}`).show();
},
});
tabs.addTab({
id: 'blynk-iot-client-tab-connection',
label: 'Connection',
});
tabs.addTab({
id: 'blynk-iot-client-tab-advanced',
label: 'Advanced',
});
setTimeout(() => { tabs.resize(); }, 0);
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-iot-client', {
category: 'config',
defaults: {
name: { value: '' },
path: { value: '', required: true, validate: RED.validators.regex(/^((([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-iot/issues/13
tmpl: { value: '' },
dbg_all: { value: false },
dbg_log: { value: false },
dbg_prop: { value: false },
dbg_sync: { value: false },
dbg_low: { value: false },
dbg_pins: { value: '' },
multi_cmd: { value: false },
enabled: { value: true },
},
inputs: 0,
outputs: 0,
label,
oneditprepare: onEditPrepare,
});
}());
</script>
<!-- Blynk Server configuration node -->
<script type="text/x-red" data-template-name="blynk-iot-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-iot-client-tabs"></ul>
</div>
<div id="node-config-blynk-iot-client-tabs-content" style="min-height: 170px;">
<div id="blynk-iot-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. blynk.cloud">
</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-tmpl"><i class="fa fa-key"></i> Template ID</label>
<input type="text" id="node-config-input-tmpl" placeholder="ex. "TMPLPAigWwwmK"">
</div>
<div class="form-tips">
<p>The secure url of Blynk Cloud Server is:<br>
<b>blynk.cloud</b>
</div>
</div>
<div id="blynk-iot-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_log" value="all" style="width: auto; vertical-align: top;"> Log Event</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_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%;">(blynk cloud or local server >= 0.34.0)</span></input>
</div>
</div>
</div>
</script>
<script type="text/x-red" data-help-name="blynk-iot-client">
<p>This configuration node connects to a Blynk Server via tsl on the specified URL.
<br /><br />
To connect to Blynk Cloud Server use this url:<br>
<b>blynk.cloud</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://docs.blynk.io/en/getting-started/activating-devices/manual-device-activation">Manual Device Activation</a>
<p>
</script>