@jpadie/node-red-virtual-matter-devices
Version:
Virtual Matter Devices for Node-Red
243 lines (217 loc) • 8.68 kB
HTML
<script type="text/javascript">
RED.nodes.registerType('matter-actuator', {
category: 'matter',
defaults: {
serverNode: {
value: ""
},
name: { value: "" },
deviceType: {
value: ""
},
telemetryInterval: {
value: 60
},
passThroughMessage: { value: 0 },
regularUpdates: { value: 0 },
supportsEnergyMeasurement: { value: 0 },
supportsVariableSpeed: { value: 0 },
supportsFlowMeasurement: { value: 0 }
},
inputs: 1,
outputs: 1,
//color: "#F3B567",
color: "#ff711f",
label: function () {
if (this.name && this.name != "") {
return this.name;
}
if (this.deviceType) {
let deviceTypes = {
onOffPlug: "On/Off Plug",
dimmablePlug: "Dimmable Plug",
//pump: "Pump",
waterValve: "Water Valve"
};
if (Object.hasOwn(deviceTypes, this.deviceType)) {
return deviceTypes[this.deviceType];
}
}
return "Actuator";
},
paletteLabel: "Actuator",
icon: "matter-icon-seeklogo.svg",
align: "left",
oneditsave: function () {
},
oneditdelete: function () {
},
oneditprepare: function () {
let node = this;
let deviceTypes = {
onOffPlug: "On/Off Plug",
dimmablePlug: "Dimmable Plug",
// pump: "Pump",
waterValve: "Water Valve"
};
$(document).ready(() => {
$(".hasType").each((index, elem) => {
let l = $(elem).find("label:first");
let id = l.attr("for");
$("#" + id).typedInput({
type: "num",
types: ["num"],
typeField: "#" + id + "-type"
})
});
$("fieldset.matter input:checkbox").each((index, elem) => {
let id = $(elem).attr("id");
let d = document.createElement("div");
$(d).addClass("fR");
/*
let i = document.createElement("input");
$(i).attr("id", $(this).attr("id"))
.val(node[id] ?? "0")
.css("width", "1rem")
.val($(this).is(":checked") ? 1 : 0)
.addClass("hidden");
*/
let b1 = document.createElement("button");
$(b1).addClass("red-ui-button toggle " + `${id}-group`);
$(b1).attr("value", "1");
$(b1).text("Yes");
let b2 = document.createElement("button");
$(b2).addClass("red-ui-button toggle " + `${id}-group`);
$(b2).attr("value", "0");
$(b2).text("No");
if ($(elem).is(":checked")) {
$(b1).addClass("selected");
} else {
$(b2).addClass("selected");
}
$(b2).on("click", function (e) {
$(`button.${id}-group`).removeClass("selected");
$(e.currentTarget).addClass("selected");
//$(i).val(0);
$(elem).prop("checked", false);
// $("#" + id).prop("checked", false);
// this[id.substring(11)] = 0;
});
$(b1).on("click", (e) => {
$(`button.${id}-group`).removeClass("selected");
$(e.currentTarget).addClass("selected");
$(elem).prop("checked", true);
/// $(i).val(1);
// $("#" + id).prop("checked", true);
//this[id.substring(11)] = 1;
});
$(d).append($(b1), $(b2));
$(d).insertBefore($(elem));
$(elem).hide();
});
let isBitSet = (value, bit) => {
return (value & Math.pow(2, bit)) ? true : false;
}
//let elem = $("#node-input-deviceType");
for (const opt in deviceTypes) {
console.log(this.deviceType, opt);
let o = new Option(deviceTypes[opt], opt);
if (this.deviceType && opt == this.deviceType) {
o.selected = true;
}
$("#node-input-deviceType").append(o);
}
$("#node-input-deviceType").on("change", (e) => {
$(".hideable").hide();
let elem = "div." + $(e.target).val();
$(elem).show();
}).trigger("change");
});
}
});
</script>
<script type="text/html" data-template-name="matter-actuator">
<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">
<div class="form-row">
<label for="node-input-deviceType">Actuator Device</label>
<select id="node-input-deviceType" >
</select>
</div>
</fieldset>
<fieldset >
<legend>Features</legend>
<div class="form-row dimmablePlug onOffPlug hideable">
<label for="node-input-supportsEnergyMeasurement">Energy Monitoring</label>
<input type="checkbox" value="1" id="node-input-supportsEnergyMeasurement" />
</div>
<div class="form-row hideable pump">
<label for="node-input-supportsVariableSpeed">Variable Speed</label>
<input type="checkbox" value="1" id="node-input-supportsVariableSpeed" />
</div>
<div class="form-row hideable waterValve">
<label for="node-input-supportsFlowMeasurement">Flow </label>
<input type="checkbox" value="1" id="node-input-supportsFlowMeasurement" />
</div>
</fieldset>
<fieldset class="matter">
<legend>Telemetry</legend>
<div class="form-row">
<label for="node-input-regularUpdates">Enable Telemetry</label>
<input type="checkbox" id="node-input-regularUpdates" value="1" />
</div>
<div class="form-row">
<label for="node-input-telemetryInterval">Telemetry Period (secs)</label>
<div class="fR">
<input type="text" id="node-input-telemetryInterval" placeholder="60" />
</div>
</div>
<div class="form-row">
<label for="node-input-passThroughMessage">Pass through msg</label>
<input type="checkbox" id="node-input-passThroughMessage" value="1" />
</div>
</fieldset>
<fieldset class="matter">
<legend>Name</legend>
<div class="form-row">
<label for="node-input-name">Name</label>
<div class="fR">
<input type="text" id="node-input-name" placeholder="Name" />
</div>
</div>
</fieldset>
</script>
<script type="text/html" data-help-name="matter-actuator">
If your pluggable device has energy monitoring built in then you can enable energy monitoring in this synthetic device. See the README for details of payloads.
</script>