node-red-contrib-xkeys_lcd
Version:
Xkeys LCD node for Node-RED using Dynamic Control Data Protocol (DCDP)
250 lines (241 loc) • 8.18 kB
HTML
<script type="text/javascript">
function doInject(node, customMsg) {
//console.log("doInject: " + JSON.stringify(customMsg));
$.ajax({
url: "xkeys_lcd_inject/" + node.id,
type: "POST",
data: JSON.stringify(customMsg),
contentType: "application/json; charset=utf-8"
});
}
RED.nodes.registerType('xkeys_lcd',{
category: 'Xkeys',
color: '#5dc8f4',
defaults: {
newname: {value:"X-keys LCD"/*,
validate:function(v){ return v!="X-keys LCD"; }
*/
},
name: {value:""},
device: {value:""},
product_id: {value:"",
validate:function(v){
return v==""?true:(999 < parseInt(v) && parseInt(v) < 10000);
}
},
pid_list: {value:"[]"/*,
validate:function(v){
return (v=="[]")||(v=="[NONE]")?false:true;
}
*/
},
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);
}
},
lcdtext: {value:""},
lcd_backlight: {value:""},
linenum: {value:""}
},
button: {
onclick: function() {
// Called when the button is clicked
//console.log(`click`);
doInject(this, {payload:{"lcdtext":this.lcdtext}});
},
visible: function() {
return (
(this.device != "NONE") &&
(!this.changed)
);
}
},
inputs:1,
outputs:0,
icon: "X-keysXicon.png",
label: function() {
return this.name||this.newname||"X-keys LCD";
},
labelStyle: function () {
return this.newname?"node_label_italic":"";
},
paletteLabel: "xk LCD",
align: 'right',
oneditprepare: function() {
var backlight_options = [{label:"yes",value:"true"}, {label:"no",value:"false"}];
var linenum_options = [{label:"2",value:2}, {label:"1",value:1}];
var device_options = [];
device_options.push({ value: "ANY", label: "Press Deploy button to see device list"});
$.getJSON('xkeys_lcd/products', function(product_data) {
var devs = Object.keys(product_data);
if (devs.length !== 0) {
for (var d in devs) {
if (devs.hasOwnProperty(d)) {
if (product_data[devs[d]].hasLCD) {
//console.log(product_data[devs[d]].name + " hasLCD");
device_options.push({ label: product_data[devs[d]].name, value: devs[d]});
}
}
}
}
/*
if ((device_options.length > 1) && (device_options[0].value == "ANY")) {
// Remove suggestion to deploy flow
device_options.shift();
set_pid_list(device_options[0].value);
}
*/
if ((device_options.length > 1) && (device_options[0].value == "ANY")) {
device_options[0] = { value: "Any X-keys", label: "Any X-keys"};
device_options.splice(1, 0, { value: "NONE", label: "None selected"});
}
if ( $("#node-input-pid_list").val().length == 0) {
set_pid_list(device_options[0].value);
}
$("#node-input-device").typedInput({
types: [{
value: "device",
options: device_options
}]
});
if ($("#node-input-device").val() == "ANY") {
$("#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);
});
$.getJSON('xkeys_lcd/backlight_on', function(backlight_status) {
//console.log(`backlight_status = ${typeof(backlight_status)}, ${backlight_status}`);
if (backlight_status) {
this.lcd_backlight = "yes";
} else {
this.lcd_backlight = "yes";
}
$("#node-input-lcd_backlight").typedInput({
types: [{
value: this.lcd_backlight,
options: backlight_options
}]
});
});
$("#node-input-linenum").typedInput({
types: [{
value: "linenum",
options: linenum_options
}]
});
/*
* 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(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") {
$("#node-input-pid_list").val(JSON.stringify([]));
$("#node-input-product_id").attr("placeholder", "Any");
$("#node-input-product_id").val("");
} else if (devicenam == "NONE") {
//console.log("Nothing selected yet");
$("#node-input-pid_list").val(JSON.stringify([]));
$("#node-input-product_id").attr("placeholder", "None");
$("#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 linenum = $("#node-input-linenum").typedInput('value');
var duplicate_id = $("#node-input-duplicate_id").val();
var unit_id = $("#node-input-unit_id").val();
if (unit_id) {
this.newname += " (" + unit_id + ") LCD";
} else {
this.newname += " LCD";
}
if (linenum) {
this.linenum = linenum;
this.newname += " " + linenum;
}
// 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 lcd_backlight = $("#node-input-lcd_backlight").val();
//console.log(`save backlight = ${lcd_backlight}`);
if (lcd_backlight) {
this.lcd_backlight = lcd_backlight;
}
}
});
</script>
<script type="text/html" data-template-name="xkeys_lcd">
<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-lcdtext"><i class="fa fa-list-ol"></i> LCD Text </label>
<input type="text" id="node-input-lcdtext" placeholder="">
</div>
<div class="form-row">
<label for="node-input-linenum"><i class="fa fa-list-ol"></i> Line </label>
<input type="text" id="node-input-linenum" placeholder="Default (2)">
</div>
<div class="form-row">
<label for="node-input-lcd_backlight"><i class="fa fa-lightbulb-o"></i> Backlight</label>
<input type="test" id="node-input-lcd_backlight" placeholder="Default (ON)">
</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_lcd">
<p>A node to process xkeys events</p>
</script>