@jpadie/node-red-virtual-matter-devices
Version:
Virtual Matter Devices for Node-Red
192 lines (177 loc) • 6.74 kB
HTML
<script type="text/javascript">
RED.nodes.registerType("matter2Z2M", {
category: 'matter',
inputs: 1,
defaults: {
name: {
value: ""
},
direction: {
value: "toZ2M"
},
numberOfGangs: {
value: 1
},
gang: {
value: 1
},
outputs: {
value: 1
}
},
label: function () {
if (this.direction == "toZ2M") {
return this.name || "Matter -> Z2M";
} else {
return this.name || "Z2M -> Matter";
}
},
color: "#1FADFF",
paletteLabel: "Z2M Converter",
icon: "matter-icon-seeklogo.svg",
align: "left",
onpaletteremove: function () {
},
oneditprepare: function () {
const node = this;
$(document).ready(() => {
console.log("in ready");
const sel = $("#node-input-numberOfGangs");
for (let i = 1; i <= 8; i++) {
let o = new Option(i, i);
sel.append(o);
}
sel.val(this.numberOfGangs);
$("#node-input-gang").val(node.gang);
$(sel).on("change", (e) => {
let cV = $("#node-input-gang").val();
let numOptions = $("#node-input-gang option").length;
let newNumOptions = $(sel).val();
if (newNumOptions == numOptions) {
$("#node-input-gang").val(cV);
return;
}
if (newNumOptions > numOptions) {
for (let i = numOptions + 1; i <= newNumOptions; i++) {
let o = new Option(i, i);
$("#node-input-gang").append(o);
}
$("#node-input-gang").val(cV);
} else {
for (let i = numOptions; i > newNumOptions; i--) {
$(`#node-input-gang option[value="${i}"]`).remove();
}
if (cV > newNumOptions) {
$("#node-input-gang").val(1);
}
}
}).trigger("change");
$("#node-input-direction").on("change", (e) => {
if ($(e.target).val() == "toZ2M") {
$(".which-gang").show();
} else {
$(".which-gang").hide();
}
}).trigger("change");
$("#node-input-numberOfGangs").on("change", (e) => {
const dir = $("#node-input-direction").val();
if (dir == "toZ2M") {
if ($(e.target).val() > 1) {
$(".which-gang").show();
$("#node-input-gang").val(node.gang);
} else {
$(".which-gang").hide();
$("#node-input-gang").val(1);
}
}
}).trigger("change");
});
},
oneditdelete: function () {
},
oneditsave: function () {
this.outputs = 1;
if ($("#node-input-direction").val() == "fromZ2M") {
const sel = $("#node-input-numberOfGangs");
this.outputs = sel.val();
console.log("changing output to " + this.outputs);
}
}
});
</script>
<script type="text/html" data-template-name="matter2Z2M">
<style>
fieldset.matter button.red-ui-button {
background-color: lightsteelblue;
}
fieldset.matter button.selected{
background-color: darkturquoise ;
}
fieldset.matter div.form-row{
clear:both;
padding-top: 0.25rem;
padding-bottom: 0.25rem;
}
fieldset.matter div.form-row label {
width: 9rem ;
display: inline-block;
vertical-align:middle
}
fieldset.matter div.form-row div.fR{
margin-left: 1rem;
min-width: 15rem;
width: fit-content;
max-width: 55%;
display: inline-block;
vertical-align: middle;
}
fieldset.matter div.fR button.toggle{
margin-right:0.5rem;
}
fieldset.matter .hidden, fieldset.hidden{
display: none ;
}
</style>
<fieldset class="matter">
<legend>Conversion</legend>
<div class="form-row">
<label for="node-input-direction">Direction</label>
<div class="fR">
<select id="node-input-direction">
<option value="fromZ2M">Z2M -> Matter</option>
<option value="toZ2M">Matter -> Z2M</option>
</select>
</div>
</div>
<div class="form-row">
<label for="node-input-numberOfGangs">Number of gangs</label>
<div class="fR">
<select id="node-input-numberOfGangs">
</select>
</div>
</div>
<div class="form-row which-gang hideable which-gang">
<label for="node-input-gang">Which gang</label>
<div class="fR">
<select id="node-input-gang">
</select>
</div>
</div>
</fieldset>
<fieldset class="matter">
<legend>Basic Info</legend>
<div class="form-row">
<label for="node-input-name">
Name
</label>
<input type="text" id="node-input-name">
</div>
</fieldset>
</script>
<script type="text/html" data-help-name="matter2Z2M">
<p>Convert to/from Z2M</p>
<p>Select the direction of conversion</p>
<p>If you have multiple gangs on the Z2M device (e.g. a two gang switch module) Z2M reports this as xxx_l1 etc.<br/>
For converting this from Z2M to Matter you should specify the number of gangs. Each gang will have its own output on the node.<br/>
For converting from Matter to Z2M you should specify the gang for the Z2M device that you are wanting to control. The converter will append _lXX to the key in the payload when the event is signalled by Matter (i.e. a change instantiated by a controller). Regular updates and telemetry passthru will not be suffixed</p>
</script>