node-red-contrib-xkeys_backlight
Version:
Xkeys Backlight node for Node-RED using Dynamic Cotrol Data Protocol (DCDP)
204 lines (198 loc) • 6.78 kB
HTML
<script type="text/javascript">
function doInject(node, customMsg) {
//console.log("doInject: " + JSON.stringify(customMsg));
$.ajax({
url: "xkeys_backlight_inject/" + node.id,
type: "POST",
data: JSON.stringify(customMsg),
contentType: "application/json; charset=utf-8"
});
}
RED.nodes.registerType('xkeys_backlight',{
category: 'Xkeys',
color: '#5dc8f4',
defaults: {
newname: {value:"X-keys Backlight"},
name: {value:""},
device: {value:""},
product_id: {value:"",
validate:function(v){
return v==""?true:(999 < parseInt(v) && parseInt(v) < 10000);
}
},
pid_list: {value:"[]"},
unit_id: {value:"",
validate:function(v){
return v==""?true:(-1 < parseInt(v) && parseInt(v) < 256);
}
},
duplicate_id: {value:"",
validate:function(v){
return v==""?true:(-1 < parseInt(v) && parseInt(v) < 256);
}
},
control_id: {value:"",
validate:function(v){
return v==""?true:(-1 < parseInt(v));
}
},
flashing: {value:""},
buttonState: {value: true},
hue_channels: {value:""},
},
inputs:1,
outputs:0,
icon: "X-keysXicon.png",
label: function() {
return this.name||this.newname||"X-keys Backlight";
},
labelStyle: function () {
return this.newname?"node_label_italic":"";
},
paletteLabel: "xk Backlight",
align: 'right',
button: {
toggle: "buttonState",
onclick: function() {
doInject(this, {"payload":{"action": this.buttonState?"stop":"start"}});
}
},
oneditprepare: function() {
var flash_options = [{label:"no",value:"false"}, {label:"yes",value:"true"}];
var device_options = [];
device_options.push({ value: "Any X-keys", label: "Press Deploy button to see device list"});
$.getJSON('xkeys_backlight/products', function(product_data) {
var devs = Object.keys(product_data);
if (devs.length !== 0) {
for (var d in devs) {
if (devs.hasOwnProperty(d)) {
device_options.push({ label: product_data[devs[d]].name, value: devs[d]});
}
}
}
if (device_options.length > 1) {
// Replace suggestion to deploy flow
device_options[0] = { value: "Any X-keys", label: "Any X-keys"};
}
$("#node-input-device").typedInput({
types: [{
value: "device",
options: device_options
}]
});
if ($("#node-input-device").val() == "Any X-keys") {
$("#node-input-product_id").attr("placeholder", "Any");
} else {
$("#node-input-product_id").attr("placeholder", "Auto");
}
$("#node-input-product_id").on('change', function(ev, evtype, value) {
// If product_id is deleted (becomes Auto),
// reset the pid_list to whatever device is currently selected
if ($("#node-input-product_id").val().length == 0) {
//var current_device = $("#node-input-device").val();
set_pid_list($("#node-input-device").val());
}
});
$("#node-input-device").on('change', function(ev, evtype, value) {
set_pid_list(value);
});
$("#node-input-flashing").typedInput({
types: [{
value: "flashing",
options: flash_options
}]
});
/*
* Setup the pid_list for a given device
*/
function set_pid_list (devicenam) {
if (devs.includes(devicenam)) {
// Collect the possible PIDs
var hidDevs = [];
product_data[devicenam].hidDevices.forEach(function(product_id) {
hidDevs.push(product_id[0]);
})
// Save the pid_list for later matching with attached devices
$("#node-input-pid_list").val(JSON.stringify(hidDevs));
$("#node-input-product_id").attr("placeholder", "Auto");
$("#node-input-product_id").val("");
} else if (devicenam == "Any X-keys") {
$("#node-input-pid_list").val(JSON.stringify([]));
$("#node-input-product_id").attr("placeholder", "Any");
$("#node-input-product_id").val("");
} else {
console.log("Unknown device selected");
}
}; // End of set_pid_list(devicenam)
})
},
oneditsave: function () {
// Construct label based on configured options
this.newname = $("#node-input-device").typedInput("value");
var duplicate_id = $("#node-input-duplicate_id").val();
var unit_id = $("#node-input-unit_id").val();
var control_id = $("#node-input-control_id").val();
if (unit_id) {
this.newname += " (" + unit_id + ") Backlight";
} else {
this.newname += " Backlight";
}
if (control_id) {
this.newname += " " + control_id;
} else {
this.newname += " all";
}
// Handle case when product_id was specified
var product_id = $("#node-input-product_id").val();
if (product_id) {
var pid_list = [];
pid_list.push(parseInt(product_id));
$("#node-input-pid_list").val(JSON.stringify(pid_list));
}
var flashing = $("#node-input-flashing").val();
if (flashing) {
this.flashing = flashing;
}
}
});
</script>
<script type="text/html" data-template-name="xkeys_backlight">
<div class="form-row">
<label for="node-input-device"><i class="fa fa-keyboard-o"></i> Device</label>
<input type="text" id="node-input-device" placeholder="Device">
</div>
<div class="form-row">
<label for="node-input-product_id"><i class="fa fa-info"></i> Product ID</label>
<input type="text" id="node-input-product_id" placeholder="Any">
</div>
<div class="form-row">
<label for="node-input-unit_id"><i class="fa fa-info-circle"></i> Unit ID</label>
<input type="text" id="node-input-unit_id" placeholder="Any">
</div>
<div class="form-row">
<label for="node-input-duplicate_id"><i class="fa fa-list-ol"></i> Duplicate ID</label>
<input type="text" id="node-input-duplicate_id" placeholder="Any">
</div>
<div class="form-row">
<label for="node-input-control_id"><i class="fa fa-circle-o"></i> Button #</label>
<input type="text" id="node-input-control_id" placeholder="All">
</div>
<div class="form-row">
<label for="node-input-hue_channels"><i class="fa fa-eye"></i> Hue Channels</label>
<input type="text" id="node-input-hue_channels" placeholder="ffffff">
</div>
<div class="form-row">
<label for="node-input-flashing"><i class="fa fa-question-circle"></i> Flashing</label>
<input type="text" id="node-input-flashing" placeholder="Off">
</div>
<div class="form-row">
<label for="node-input-name"><i class="fa fa-tag"></i> Label</label>
<input type="text" id="node-input-name" placeholder="Auto">
</div>
<div class="form-row">
<input type="hidden" id="node-input-pid_list">
</div>
</script>
<script type="text/html" data-help-name="xkeys_backlight">
<p>A node to process xkeys events</p>
</script>