mirror of
https://github.com/node-red/node-red.git
synced 2023-10-10 13:36:53 +02:00
496 lines
25 KiB
HTML
496 lines
25 KiB
HTML
<!--
|
|
Copyright JS Foundation and other contributors, http://js.foundation
|
|
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/x-red" data-template-name="mqtt in">
|
|
<div class="form-row">
|
|
<label for="node-input-broker"><i class="fa fa-globe"></i> <span data-i18n="mqtt.label.broker"></span></label>
|
|
<input type="text" id="node-input-broker">
|
|
</div>
|
|
<div class="form-row">
|
|
<label for="node-input-topic"><i class="fa fa-tasks"></i> <span data-i18n="common.label.topic"></span></label>
|
|
<input type="text" id="node-input-topic" data-i18n="[placeholder]common.label.topic">
|
|
</div>
|
|
<div class="form-row">
|
|
<label for="node-input-qos"><i class="fa fa-empire"></i> <span data-i18n="mqtt.label.qos"></span></label>
|
|
<select id="node-input-qos" style="width:125px !important">
|
|
<option value="0">0</option>
|
|
<option value="1">1</option>
|
|
<option value="2">2</option>
|
|
</select>
|
|
</div>
|
|
<div class="form-row">
|
|
<label for="node-input-name"><i class="fa fa-tag"></i> <span data-i18n="common.label.name"></span></label>
|
|
<input type="text" id="node-input-name" data-i18n="[placeholder]common.label.name">
|
|
</div>
|
|
</script>
|
|
|
|
<script type="text/x-red" data-help-name="mqtt in">
|
|
<p>Connects to a MQTT broker and subscribes to messages from the specified topic.</p>
|
|
<h3>Outputs</h3>
|
|
<dl class="message-properties">
|
|
<dt>payload <span class="property-type">string | buffer</span></dt>
|
|
<dd>a string unless detected as a binary buffer.</dd>
|
|
<dt>topic <span class="property-type">string</span></dt>
|
|
<dd>the MQTT topic, uses / as a heirarchy separator.</dd>
|
|
<dt>qos <span class="property-type">number</span> </dt>
|
|
<dd>0, fire and forget - 1, at least once - 2, once and once only.</dd>
|
|
<dt>retain <span class="property-type">boolean</span></dt>
|
|
<dd>true indicates the message was retained and may be old.</dd>
|
|
</dl>
|
|
<h3>Details</h3>
|
|
The subscription topic can include MQTT wildcards, + for one level, # for multiple levels.</p>
|
|
<p>This node requires a connection to a MQTT broker to be configured. This is configured by clicking
|
|
the pencil icon.</p>
|
|
<p>Several MQTT nodes (in or out) can share the same broker connection if required.</p>
|
|
</script>
|
|
|
|
<script type="text/javascript">
|
|
RED.nodes.registerType('mqtt in',{
|
|
category: 'input',
|
|
defaults: {
|
|
name: {value:""},
|
|
topic: {value:"",required:true,validate: RED.validators.regex(/^(#$|(\+|[^+#]*)(\/(\+|[^+#]*))*(\/(\+|#|[^+#]*))?$)/)},
|
|
qos: {value: "2"},
|
|
broker: {type:"mqtt-broker", required:true}
|
|
},
|
|
color:"#d8bfd8",
|
|
inputs:0,
|
|
outputs:1,
|
|
icon: "bridge.png",
|
|
label: function() {
|
|
return this.name||this.topic||"mqtt";
|
|
},
|
|
labelStyle: function() {
|
|
return this.name?"node_label_italic":"";
|
|
},
|
|
oneditprepare: function() {
|
|
if (this.qos === undefined) {
|
|
$("#node-input-qos").val("2");
|
|
}
|
|
}
|
|
});
|
|
</script>
|
|
|
|
<script type="text/x-red" data-template-name="mqtt out">
|
|
<div class="form-row">
|
|
<label for="node-input-broker"><i class="fa fa-globe"></i> <span data-i18n="mqtt.label.broker"></span></label>
|
|
<input type="text" id="node-input-broker">
|
|
</div>
|
|
<div class="form-row">
|
|
<label for="node-input-topic"><i class="fa fa-tasks"></i> <span data-i18n="common.label.topic"></span></label>
|
|
<input type="text" id="node-input-topic" data-i18n="[placeholder]common.label.topic">
|
|
</div>
|
|
<div class="form-row">
|
|
<label for="node-input-qos"><i class="fa fa-empire"></i> <span data-i18n="mqtt.label.qos"></span></label>
|
|
<select id="node-input-qos" style="width:125px !important">
|
|
<option value=""></option>
|
|
<option value="0">0</option>
|
|
<option value="1">1</option>
|
|
<option value="2">2</option>
|
|
</select>
|
|
<i class="fa fa-history"></i> <span data-i18n="mqtt.retain"></span> <select id="node-input-retain" style="width:125px !important">
|
|
<option value=""></option>
|
|
<option value="false" data-i18n="mqtt.false"></option>
|
|
<option value="true" data-i18n="mqtt.true"></option>
|
|
</select>
|
|
</div>
|
|
<div class="form-row">
|
|
<label for="node-input-name"><i class="fa fa-tag"></i> <span data-i18n="common.label.name"></span></label>
|
|
<input type="text" id="node-input-name" data-i18n="[placeholder]common.label.name">
|
|
</div>
|
|
<div class="form-tips"><span data-i18n="mqtt.tip"></span></div>
|
|
</script>
|
|
|
|
<script type="text/x-red" data-help-name="mqtt out">
|
|
<p>Connects to a MQTT broker and publishes messages.</p>
|
|
<h3>Inputs</h3>
|
|
<dl class="message-properties">
|
|
<dt>payload <span class="property-type">string | buffer</span></dt>
|
|
<dd> most users prefer simple text payloads, but binary buffers can also be published.</dd>
|
|
|
|
<dt class="optional">topic <span class="property-type">string</span></dt>
|
|
<dd> the MQTT topic to publish to.</dd>
|
|
|
|
<dt class="optional">qos <span class="property-type">number</span></dt>
|
|
<dd>0, fire and forget - 1, at least once - 2, once and once only. Default 0.</dd>
|
|
|
|
<dt class="optional">retain <span class="property-type">boolean</span></dt>
|
|
<dd>set to true to retain the message on the broker. Default false.</dd>
|
|
</dl>
|
|
<h3>Details</h3>
|
|
<code>msg.payload</code> is used as the payload of the published message.
|
|
If it contains an Object it will be converted to a JSON string before being sent.
|
|
If it contains a binary Buffer the message will be published as-is.</p>
|
|
<p>The topic used can be configured in the node or, if left blank, can be set by <code>msg.topic</code>.</p>
|
|
<p>Likewise the QoS and retain values can be configured in the node or, if left
|
|
blank, set by <code>msg.qos</code> and <code>msg.retain</code> respectively. To clear a previously
|
|
retained topic from the broker, send a blank message to that topic with the retain flag set.</p>
|
|
<p>This node requires a connection to a MQTT broker to be configured. This is configured by clicking
|
|
the pencil icon.</p>
|
|
<p>Several MQTT nodes (in or out) can share the same broker connection if required.</p>
|
|
</script>
|
|
|
|
<script type="text/javascript">
|
|
RED.nodes.registerType('mqtt out',{
|
|
category: 'output',
|
|
defaults: {
|
|
name: {value:""},
|
|
topic: {value:""},
|
|
qos: {value:""},
|
|
retain: {value:""},
|
|
broker: {type:"mqtt-broker", required:true}
|
|
},
|
|
color:"#d8bfd8",
|
|
inputs:1,
|
|
outputs:0,
|
|
icon: "bridge.png",
|
|
align: "right",
|
|
label: function() {
|
|
return this.name||this.topic||"mqtt";
|
|
},
|
|
labelStyle: function() {
|
|
return this.name?"node_label_italic":"";
|
|
}
|
|
});
|
|
</script>
|
|
|
|
<script type="text/x-red" data-template-name="mqtt-broker">
|
|
<div class="form-row">
|
|
<label for="node-config-input-name"><i class="fa fa-tag"></i> <span data-i18n="common.label.name"></span></label>
|
|
<input type="text" id="node-config-input-name" data-i18n="[placeholder]common.label.name">
|
|
</div>
|
|
<div class="form-row">
|
|
<ul style="background: #fff; min-width: 600px; margin-bottom: 20px;" id="node-config-mqtt-broker-tabs"></ul>
|
|
</div>
|
|
<div id="node-config-mqtt-broker-tabs-content" style="min-height: 170px;">
|
|
<div id="mqtt-broker-tab-connection" style="display:none">
|
|
<div class="form-row node-input-broker">
|
|
<label for="node-config-input-broker"><i class="fa fa-globe"></i> <span data-i18n="mqtt.label.broker"></span></label>
|
|
<input class="input-append-left" type="text" id="node-config-input-broker" style="width:40%;" data-i18n="[placeholder]mqtt.label.example">
|
|
<label for="node-config-input-port" style="margin-left:20px; width:43px; "> <span data-i18n="mqtt.label.port"></span></label>
|
|
<input type="text" id="node-config-input-port" data-i18n="[placeholder]mqtt.label.port" style="width:55px">
|
|
</div>
|
|
<div class="form-row">
|
|
<input type="checkbox" id="node-config-input-usetls" style="display: inline-block; width: auto; vertical-align: top;">
|
|
<label for="node-config-input-usetls" style="width: auto" data-i18n="mqtt.label.use-tls"></label>
|
|
<div id="node-config-row-tls" class="hide">
|
|
<label style="width: auto; margin-left: 20px; margin-right: 10px;" for="node-config-input-tls"><span data-i18n="mqtt.label.tls-config"></span></label><input style="width: 300px;" type="text" id="node-config-input-tls">
|
|
</div>
|
|
</div>
|
|
<div class="form-row">
|
|
<label for="node-config-input-clientid"><i class="fa fa-tag"></i> <span data-i18n="mqtt.label.clientid"></span></label>
|
|
<input type="text" id="node-config-input-clientid" data-i18n="[placeholder]mqtt.placeholder.clientid">
|
|
</div>
|
|
<div class="form-row">
|
|
<label for="node-config-input-keepalive" style="width: auto"><i class="fa fa-clock-o"></i> <span data-i18n="mqtt.label.keepalive"></span></label>
|
|
<input type="text" id="node-config-input-keepalive" style="width: 50px">
|
|
<input type="checkbox" id="node-config-input-cleansession" style="margin-left: 30px; height: 1em;display: inline-block; width: auto; vertical-align: middle;">
|
|
<label for="node-config-input-cleansession" style="width: auto;" data-i18n="mqtt.label.cleansession"></label>
|
|
</div>
|
|
<div class="form-row">
|
|
<input type="checkbox" id="node-config-input-compatmode" style="display: inline-block; width: auto; vertical-align: top;">
|
|
<label for="node-config-input-compatmode" style="width: auto;" data-i18n="mqtt.label.compatmode"></label>
|
|
</div>
|
|
</div>
|
|
<div id="mqtt-broker-tab-security" style="display:none">
|
|
<div class="form-row">
|
|
<label for="node-config-input-user"><i class="fa fa-user"></i> <span data-i18n="common.label.username"></span></label>
|
|
<input type="text" id="node-config-input-user">
|
|
</div>
|
|
<div class="form-row">
|
|
<label for="node-config-input-password"><i class="fa fa-lock"></i> <span data-i18n="common.label.password"></span></label>
|
|
<input type="password" id="node-config-input-password">
|
|
</div>
|
|
</div>
|
|
<div id="mqtt-broker-tab-messages" style="display:none">
|
|
<div id="mqtt-broker-section-birth">
|
|
<div class="palette-header">
|
|
<i class="fa fa-angle-down expanded"></i><span data-i18n="mqtt.sections-label.birth-message"></span>
|
|
</div>
|
|
<div class="section-content" style="padding: 12px">
|
|
<div class="form-row">
|
|
<label for="node-config-input-birthTopic"><i class="fa fa-tasks"></i> <span data-i18n="common.label.topic"></span></label>
|
|
<input type="text" id="node-config-input-birthTopic" data-i18n="[placeholder]mqtt.placeholder.birth-topic" style="width:300px !important">
|
|
|
|
<i class="fa fa-history"></i> <span data-i18n="mqtt.label.retain"></span> <select id="node-config-input-birthRetain" style="float: right; width:75px !important">
|
|
<option value="false" data-i18n="mqtt.false"></option>
|
|
<option value="true" data-i18n="mqtt.true"></option>
|
|
</select>
|
|
</div>
|
|
<div class="form-row">
|
|
<label for="node-config-input-birthPayload"><i class="fa fa-envelope"></i> <span data-i18n="common.label.payload"></span></label>
|
|
<input type="text" id="node-config-input-birthPayload" style="width:300px" data-i18n="[placeholder]common.label.payload">
|
|
|
|
<i class="fa fa-empire"></i> <span data-i18n="mqtt.label.qos"></span></label>
|
|
<select id="node-config-input-birthQos" style="float: right; width:75px !important">
|
|
<option value="0">0</option>
|
|
<option value="1">1</option>
|
|
<option value="2">2</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id="mqtt-broker-section-will">
|
|
<div class="palette-header">
|
|
<i class="fa fa-angle-down expanded"></i><span data-i18n="mqtt.sections-label.will-message"></span>
|
|
</div>
|
|
<div class="section-content" style="padding: 12px">
|
|
<div class="form-row">
|
|
<label for="node-config-input-willTopic"><i class="fa fa-tasks"></i> <span data-i18n="common.label.topic"></span></label>
|
|
<input type="text" id="node-config-input-willTopic" style="width:300px" data-i18n="[placeholder]mqtt.placeholder.will-topic">
|
|
|
|
<i class="fa fa-history"></i> <span data-i18n="mqtt.label.retain"></span> <select id="node-config-input-willRetain" style="float:right; width:75px !important">
|
|
<option value="false" data-i18n="mqtt.false"></option>
|
|
<option value="true" data-i18n="mqtt.true"></option>
|
|
</select>
|
|
</div>
|
|
<div class="form-row">
|
|
<label for="node-config-input-willPayload"><i class="fa fa-envelope"></i> <span data-i18n="common.label.payload"></span></label>
|
|
<input type="text" id="node-config-input-willPayload" style="width:300px" data-i18n="[placeholder]common.label.payload">
|
|
|
|
<i class="fa fa-empire"></i> <span data-i18n="mqtt.label.qos"></span></label>
|
|
<select id="node-config-input-willQos" style="float:right; width:75px !important">
|
|
<option value="0">0</option>
|
|
<option value="1">1</option>
|
|
<option value="2">2</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id="mqtt-broker-section-close">
|
|
<div class="palette-header">
|
|
<i class="fa fa-angle-down"></i><span data-i18n="mqtt.sections-label.close-message"></span>
|
|
</div>
|
|
<div class="section-content" style="display:none; padding: 12px">
|
|
<div class="form-row">
|
|
<label for="node-config-input-willTopic"><i class="fa fa-tasks"></i> <span data-i18n="common.label.topic"></span></label>
|
|
<input type="text" id="node-config-input-willTopic" style="width:300px" data-i18n="[placeholder]mqtt.placeholder.close-topic">
|
|
|
|
<i class="fa fa-history"></i> <span data-i18n="mqtt.label.retain"></span> <select id="node-config-input-closeRetain" style="float:right; width:75px !important">
|
|
<option value="false" data-i18n="mqtt.false"></option>
|
|
<option value="true" data-i18n="mqtt.true"></option>
|
|
</select>
|
|
</div>
|
|
<div class="form-row">
|
|
<label for="node-config-input-closePayload"><i class="fa fa-envelope"></i> <span data-i18n="common.label.payload"></span></label>
|
|
<input type="text" id="node-config-input-willPayload" style="width:300px" data-i18n="[placeholder]common.label.payload">
|
|
|
|
<i class="fa fa-empire"></i> <span data-i18n="mqtt.label.qos"></span></label>
|
|
<select id="node-config-input-closeQos" style="float:right; width:75px !important">
|
|
<option value="0">0</option>
|
|
<option value="1">1</option>
|
|
<option value="2">2</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</script>
|
|
|
|
<script type="text/x-red" data-help-name="mqtt-broker">
|
|
<p>Configuration for a connection to an MQTT broker.</p>
|
|
<p>This configuration will create a single connection to the broker which can
|
|
then be reused by <code>MQTT In</code> and <code>MQTT Out</code> nodes.</p>
|
|
<p>The node will generate a random Client ID if one is not set and the
|
|
node is configured to use a Clean Session connection. If a Client ID is set,
|
|
it must be unique to the broker you are connecting to.</p>
|
|
<h4>Birth Message</h4>
|
|
<p>This is a message that will be published on the configured topic whenever the
|
|
connection is established.</p>
|
|
<h4>Will Message</h4>
|
|
<p>This is a message that will be published by the broker in the event the node
|
|
unexpectedly loses its connection.</p>
|
|
<h4>WebSockets</h4>
|
|
<p>The node can be configured to use a WebSocket connection. To do so, the Server
|
|
field should be configured with a full URI for the connection. For example:</p>
|
|
<pre>ws://example.com:4000/mqtt</pre>
|
|
|
|
</script>
|
|
|
|
<script type="text/javascript">
|
|
RED.nodes.registerType('mqtt-broker',{
|
|
category: 'config',
|
|
defaults: {
|
|
name: {value:""},
|
|
broker: {value:"",required:true},
|
|
port: {value:1883,required:false,validate:RED.validators.number(true)},
|
|
tls: {type:"tls-config",required: false},
|
|
clientid: {value:"", validate: function(v) {
|
|
if ($("#node-config-input-clientid").length) {
|
|
// Currently editing the node
|
|
return $("#node-config-input-cleansession").is(":checked") || (v||"").length > 0;
|
|
} else {
|
|
return (this.cleansession===undefined || this.cleansession) || (v||"").length > 0;
|
|
}
|
|
}},
|
|
usetls: {value: false},
|
|
verifyservercert: { value: false},
|
|
compatmode: { value: true},
|
|
keepalive: {value:60,validate:RED.validators.number()},
|
|
cleansession: {value: true},
|
|
willTopic: {value:""},
|
|
willQos: {value:"0"},
|
|
willRetain: {value:false},
|
|
willPayload: {value:""},
|
|
birthTopic: {value:""},
|
|
birthQos: {value:"0"},
|
|
birthRetain: {value:false},
|
|
birthPayload: {value:""},
|
|
closeTopic: {value:""},
|
|
closeQos: {value:"0"},
|
|
closeRetain: {value:false},
|
|
closePayload: {value:""}
|
|
},
|
|
credentials: {
|
|
user: {type:"text"},
|
|
password: {type: "password"}
|
|
},
|
|
label: function() {
|
|
if (this.name) {
|
|
return this.name;
|
|
}
|
|
var b = this.broker;
|
|
if (b === "") { b = "undefined"; }
|
|
var lab = "";
|
|
lab = (this.clientid?this.clientid+"@":"")+b;
|
|
if (b.indexOf("://") === -1){
|
|
if (!this.port){ lab = lab + ":1883"; }
|
|
else { lab = lab + ":" + this.port; }
|
|
}
|
|
return lab;
|
|
},
|
|
oneditprepare: function () {
|
|
var tabs = RED.tabs.create({
|
|
id: "node-config-mqtt-broker-tabs",
|
|
onchange: function(tab) {
|
|
$("#node-config-mqtt-broker-tabs-content").children().hide();
|
|
$("#" + tab.id).show();
|
|
}
|
|
});
|
|
tabs.addTab({
|
|
id: "mqtt-broker-tab-connection",
|
|
label: this._("mqtt.tabs-label.connection")
|
|
});
|
|
tabs.addTab({
|
|
id: "mqtt-broker-tab-security",
|
|
label: this._("mqtt.tabs-label.security")
|
|
});
|
|
|
|
tabs.addTab({
|
|
id: "mqtt-broker-tab-messages",
|
|
label: this._("mqtt.tabs-label.messages")
|
|
});
|
|
|
|
function setUpSection(sectionId) {
|
|
var birthMessageSection = $(sectionId);
|
|
var paletteHeader = birthMessageSection.find('.palette-header');
|
|
var sectionContent = birthMessageSection.find('.section-content');
|
|
|
|
paletteHeader.click(function(e) {
|
|
e.preventDefault();
|
|
var twistie = $(this).find('i');
|
|
var isExpanded = twistie.hasClass('expanded');
|
|
sectionContent.toggle(!isExpanded);
|
|
twistie.toggleClass('expanded',!isExpanded);
|
|
});
|
|
}
|
|
setUpSection('#mqtt-broker-section-birth');
|
|
setUpSection('#mqtt-broker-section-will');
|
|
setUpSection('#mqtt-broker-section-close');
|
|
|
|
setTimeout(function() { tabs.resize(); },0);
|
|
if (typeof this.cleansession === 'undefined') {
|
|
this.cleansession = true;
|
|
$("#node-config-input-cleansession").prop("checked",true);
|
|
}
|
|
if (typeof this.usetls === 'undefined') {
|
|
this.usetls = false;
|
|
$("#node-config-input-usetls").prop("checked",false);
|
|
}
|
|
if (typeof this.compatmode === 'undefined') {
|
|
this.compatmode = true;
|
|
$("#node-config-input-compatmode").prop('checked', true);
|
|
}
|
|
if (typeof this.keepalive === 'undefined') {
|
|
this.keepalive = 15;
|
|
$("#node-config-input-keepalive").val(this.keepalive);
|
|
}
|
|
if (typeof this.willQos === 'undefined') {
|
|
this.willQos = "0";
|
|
$("#node-config-input-willQos").val("0");
|
|
}
|
|
if (typeof this.birthQos === 'undefined') {
|
|
this.birthQos = "0";
|
|
$("#node-config-input-birthQos").val("0");
|
|
}
|
|
if (typeof this.closeQos === 'undefined') {
|
|
this.willQos = "0";
|
|
$("#node-config-input-willQos").val("0");
|
|
}
|
|
|
|
function updateTLSOptions() {
|
|
if ($("#node-config-input-usetls").is(':checked')) {
|
|
$("#node-config-row-tls").show();
|
|
} else {
|
|
$("#node-config-row-tls").hide();
|
|
}
|
|
}
|
|
updateTLSOptions();
|
|
$("#node-config-input-usetls").on("click",function() {
|
|
updateTLSOptions();
|
|
});
|
|
var node = this;
|
|
function updateClientId() {
|
|
if ($("#node-config-input-cleansession").is(":checked")) {
|
|
$("#node-config-input-clientid").attr("placeholder",node._("mqtt.placeholder.clientid"));
|
|
} else {
|
|
$("#node-config-input-clientid").attr("placeholder",node._("mqtt.placeholder.clientid-nonclean"));
|
|
}
|
|
$("#node-config-input-clientid").change();
|
|
}
|
|
setTimeout(updateClientId,0);
|
|
$("#node-config-input-cleansession").on("click",function() {
|
|
updateClientId();
|
|
});
|
|
|
|
function updatePortEntry(){
|
|
var disabled = $("#node-config-input-port").prop("disabled");
|
|
if ($("#node-config-input-broker").val().indexOf("://") === -1){
|
|
if (disabled){
|
|
$("#node-config-input-port").prop("disabled", false);
|
|
}
|
|
}
|
|
else {
|
|
if (!disabled){
|
|
$("#node-config-input-port").prop("disabled", true);
|
|
}
|
|
}
|
|
}
|
|
$("#node-config-input-broker").change(function() {
|
|
updatePortEntry();
|
|
});
|
|
$("#node-config-input-broker").on( "keyup", function() {
|
|
updatePortEntry();
|
|
});
|
|
setTimeout(updatePortEntry,50);
|
|
|
|
},
|
|
oneditsave: function() {
|
|
if (!$("#node-config-input-usetls").is(':checked')) {
|
|
$("#node-config-input-tls").val("");
|
|
}
|
|
}
|
|
});
|
|
</script>
|