node-red-contrib-xkeys_intensity
Version:
Node-RED node to set intensity Backlight nodes using Dynamic Control Data Protocol (DCDP)
256 lines (244 loc) • 8.62 kB
HTML
<script type="text/javascript">
function doInject(node, customMsg) {
console.log("doInject: " + customMsg);
$.ajax({
url: "xkeys_intensity_inject/" + node.id,
type: "POST",
data: JSON.stringify(customMsg),
contentType: "application/json; charset=utf-8"
});
}
RED.nodes.registerType('xkeys_intensity',{
category: 'Xkeys',
color: '#5dc8f4',
defaults: {
newname: {value:"X-keys Backlight Intensity"},
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);
}
},
blue_intensity: {value:"255",
validate:function(v){
return v==""?true:(-1 < parseInt(v) && parseInt(v) < 256);
}
},
red_intensity: {value:"0",
validate:function(v){
return v==""?true:(-1 < parseInt(v) && parseInt(v) < 256);
}
},
intensity: {value:"[]",
validate:function(v){
return v!=="[]";
}
},
},
inputs:1,
outputs:0,
icon: "X-keysXicon.png",
label: function() {
return this.name||this.newname||"X-keys Backlight Intensity";
},
labelStyle: function () {
return this.newname?"node_label_italic":"";
},
paletteLabel: "xk Intensity",
align: 'right',
button: {
visible: function() {
// return whether or not the button is visible, based on the current
// configuration of the node
//return (this.quad_list.length > 0);
return true;
},
onclick: function() {
// Called when the button is clicked
//console.log(`click`);
doInject(this, {payload: {intensity: this.intensity}});
}
},
oneditprepare: function() {
var device_options = [];
device_options.push({ value: "Any X-keys", label: "Press Deploy button to see device list"});
$.getJSON('xkeys_intensity/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 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);
});
/* Track red/blue intensity changes */
/*
$("#node-input-blue_intensity").on('change', function(ev, evtype, value) {
console.log("Blue val = " + value);
console.log("Blue val = " + $("#node-input-blue_intensity").val());
console.log("Red val = " + $("#node-input-red_intensity").val());
$("#node-input-intensity").val([value, $("#node-input-red_intensity").val()||this.red_intensity]);
console.log("Intensity: " + $("#node-input-intensity").val());
});
$("#node-input-red_intensity").on('change', function(ev, evtype, value) {
console.log("Red val = " + value);
console.log("Blue val = " + $("#node-input-blue_intensity").val());
console.log("Red val = " + $("#node-input-red_intensity").val());
$("#node-input-intensity").val([$("#node-input-blue_intensity").val()||this.blue_intensity, value]);
console.log("Intensity: " + $("#node-input-intensity").val());
});
*/
/*
* Setup 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(pid) {
hidDevs.push(pid[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)
/* Build a dropdown list of intensity values
*/
var blue_intensity_options = [];
var red_intensity_options = [];
for (var i=255;i>-1;i--) {
blue_intensity_options.push({ label: i.toString(), value: i.toString()});
red_intensity_options.push({ label: i.toString(), value: i.toString()});
}
$("#node-input-blue_intensity").typedInput({
types: [{
value: "blue_intensity",
options: blue_intensity_options
}]
});
$("#node-input-red_intensity").typedInput({
types: [{
value: "red_intensity",
options: red_intensity_options
}]
});
})
},
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 blue_intensity = $("#node-input-blue_intensity").val();
var red_intensity = $("#node-input-red_intensity").val();
if (unit_id) {
this.newname += " (" + unit_id + ") Intensity";
} else {
this.newname += " Intensity";
}
// 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));
}
if (blue_intensity) {
this.newname += " " + blue_intensity;
if (red_intensity ) {
this.newname += "," + red_intensity;
}
// Save intensity
var intensity = [];
intensity.push(parseInt(blue_intensity));
intensity.push(parseInt(red_intensity));
$("#node-input-intensity").val(JSON.stringify(intensity));
}
}
});
</script>
<script type="text/html" data-template-name="xkeys_intensity">
<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-blue_intensity"><i class="fa fa-adjust"></i> Blue </label>
<input type="text" id="node-input-blue_intensity" placeholder="Steady">
</div>
<div class="form-row">
<label for="node-input-red_intensity"><i class="fa fa-adjust"></i> Red </label>
<input type="text" id="node-input-red_intensity" placeholder="Steady">
</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>
<div class="form-row">
<input type="hidden" id="node-input-intensity">
</div>
</script>
<script type="text/html" data-help-name="xkeys_intensity">
<p>A node to process xkeys events</p>
</script>