frodovdr/node-red-nodes
1
0
Fork 0
mirror of https://github.com/node-red/node-red-nodes.git synced 2023-10-10 13:36:58 +02:00
Code Issues Releases Wiki Activity

Finshing off the breakpoint editor

Browse Source 
Mutable/immutable behaviour of breakpoints completed, and the 0 and 1
input values are no longer editable.
Adding a breakpoint now inserts it in the list in next-to-last
place, with sensible default values.
This commit is contained in:
Maxwell Hadley 2014-02-09 10:52:56 +00:00
parent 68080df45e
commit 955fd1ad46
1 changed files with 92 additions and 77 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

169
hardware/BBB/144-analog-in.html
View File

@ -33,20 +33,20 @@
<label for="node-input-topic"><i class="icon-tasks"></i> Topic</label> <label for="node-input-topic"><i class="icon-tasks"></i> Topic</label>
<input type="text" id="node-input-topic" placeholder="Topic"> <input type="text" id="node-input-topic" placeholder="Topic">
</div> </div>
<div class="form-row">
<label for="node-input-name"><i class="icon-tag"></i> Name</label>
<input type="text" id="node-input-name" placeholder="Name">
</div>
<div class="form-row"> <div class="form-row">
Input Scaling Input Scaling
</div> </div>
<div class="form-row"> <div class="form-row">
<div id="node-input-breakpoint-container-div" style="border-radius: 5px; height: 310px; padding: 5px; border: 1px solid #ccc; overflow-y:scroll;"> <div id="node-input-breakpoint-container-div" style="border-radius: 5px; height: 310px; padding: 5px; border: 1px solid #ccc; overflow-y:scroll;">
<ol id="node-input-breakpoint-container" style=" list-style-type:none; margin: 0;"> <ol id="node-input-breakpoint-container" style=" list-style-type:none; margin: 0;">
</ol> </ol>
</div> </div>
<a href="#" class="btn btn-mini" id="node-input-add-breakpoint" style="margin-top: 4px;"><i class="icon-plus"></i> Add Breakpoint</a> <a href="#" class="btn btn-mini" id="node-input-add-breakpoint" style="margin-top: 4px;"><i class="icon-plus"></i> Add Breakpoint</a>
</div> </div>
<div class="form-row">
<label for="node-input-name"><i class="icon-tag"></i> Name</label>
<input type="text" id="node-input-name" placeholder="Name">
</div>
</script> </script>
<!-- Add help text --> <!-- Add help text -->
@ -55,7 +55,13 @@
Analogue input for the Beaglebone Black. Reads an anlogue pin when triggered Analogue input for the Beaglebone Black. Reads an anlogue pin when triggered
</p> </p>
<p>The output message topic is the node topic: the output message value is the <p>The output message topic is the node topic: the output message value is the
analogue input in the range [0-1), or NaN if an read error occurs (errors are logged) scaled analogue input or NaN if an read error occurs (errors are logged).
</p>
<p>
Simple linear scaling is defined by setting the output values required for input
values of 0 and 1. You can apply more complicated scaling, such as linearisation,
by defining breakpoints at intermediate input values, with the desired output for
each. Intermediate values are linearly interpolated.
</p> </p>
</script> </script>
@ -80,79 +86,88 @@ analogue input in the range [0-1), or NaN if an read error occurs (errors are lo
return this.name ? "node_label_italic" : ""; return this.name ? "node_label_italic" : "";
}, },
oneditprepare: function () { oneditprepare: function () {
function generateBreakpoint(i, breakpoint) { function generateBreakpoint(breakpoint, insert) {
var container = $('<li/>', {style:"margin:0; padding:8px 0px; border-bottom: 1px solid #ccc;"}); var container = $('<li/>', {style:"margin:0; padding:8px 0px; border-bottom: 1px solid #ccc;"});
var row = $('<div/>').appendTo(container); var row = $('<div/>').appendTo(container);
var row2 = $('<div/>', {style:"padding-top: 5px; text-align: right;"}).appendTo(container); var breakpointField = $('<span/>').appendTo(row);
var breakpointField = $('<span/>').appendTo(row);
var inputValueField = $('<input/>', var inputValueField = $('<input/>',
{class:"node-input-breakpoint-input-value", type:"text", style:"margin-left:5px; margin-right:2px; width:36%;"}).appendTo(breakpointField); {disabled:"", class:"node-input-breakpoint-input-value", type:"text", style:"margin-left:5px; margin-right:2px; width:36%;"}).appendTo(breakpointField);
breakpointField.append(" => "); if (breakpoint.mutable) {
var outputValueField = $('<input/>', inputValueField.removeAttr("disabled");
{class:"node-input-breakpoint-output-value", type:"text", style:"margin-left:0px; width:36%;"}).appendTo(breakpointField); }
var finalSpan = $('<span/>', {style:"float:right; margin-top:3px; margin-right:10px;"}).appendTo(row); breakpointField.append(" => ");
var mutableFlag = $('<span/>', {class:"node-input-breakpoint-mutable", style:"display:hide;"}).appendTo(row); var outputValueField = $('<input/>',
if (breakpoint.mutable) { {class:"node-input-breakpoint-output-value", type:"text", style:"margin-left:0px; width:36%;"}).appendTo(breakpointField);
mutableFlag.attr("mutable", "true"); var finalSpan = $('<span/>', {style:"float:right; margin-top:3px; margin-right:10px;"}).appendTo(row);
var deleteButton = $('<a/>', {href:"#", class:"btn btn-mini", style:"margin-left: 5px;"}).appendTo(finalSpan); var mutableFlag = $('<span/>', {class:"node-input-breakpoint-mutable", style:"display:hide;"}).appendTo(row);
$('<i/>', {class:"icon-remove"}).appendTo(deleteButton); if (breakpoint.mutable) {
mutableFlag.attr("mutable", "true");
var deleteButton = $('<a/>', {href:"#", class:"btn btn-mini", style:"margin-left: 5px;"}).appendTo(finalSpan);
$('<i/>', {class:"icon-remove"}).appendTo(deleteButton);
deleteButton.click(function() { deleteButton.click(function() {
container.css({"background":"#fee"}); container.css({"background":"#fee"});
container.fadeOut(300, function() { container.fadeOut(300, function() {
$(this).remove(); $(this).remove();
$("#node-input-breakpoint-container").children().each(function (i) { });
$(this).find(".node-input-breakpoint-index").html(i + 1); });
}); } else {
}); mutableFlag.attr("mutable", "false");
}); }
} else { if (insert === true) {
mutableFlag.attr("mutable", "false"); var last = $("#node-input-breakpoint-container").children().last();
} var prev = last.prev();
inputValueField.val(breakpoint.input); inputValueField.val(((last.find(".node-input-breakpoint-input-value").val() - 0) +
outputValueField.val(breakpoint.output); (prev.find(".node-input-breakpoint-input-value").val() - 0))/2);
$("#node-input-breakpoint-container").append(container); outputValueField.val(((last.find(".node-input-breakpoint-output-value").val() - 0) +
} (prev.find(".node-input-breakpoint-output-value").val() - 0))/2);
last.before(container);
$("#node-input-add-breakpoint").click(function () { } else {
generateBreakpoint($("#node-input-breakpoint-container").children().length + 1, {input:0, output:0, mutable:true}); inputValueField.val(breakpoint.input);
$("#node-input-breakpoint-container-div").scrollTop($("#node-input-breakpoint-container-div").get(0).scrollHeight); outputValueField.val(breakpoint.output);
}); $("#node-input-breakpoint-container").append(container);
}
for (var i = 0; i < this.breakpoints.length; i++) { }
var breakpoint = this.breakpoints[i];
generateBreakpoint(i + 1, breakpoint); $("#node-input-add-breakpoint").click(function () {
} generateBreakpoint({input:0, output:0, mutable:true}, true);
$("#node-input-breakpoint-container-div").scrollTop($("#node-input-breakpoint-container-div").get(0).scrollHeight);
// Handle resizing the Input Scaling div when the dialog is resized });
function switchDialogResize(ev, ui) {
$("#node-input-breakpoint-container-div").css("height", (ui.size.height - 290) + "px"); for (var i = 0; i < this.breakpoints.length; i++) {
}; var breakpoint = this.breakpoints[i];
generateBreakpoint(breakpoint, false);
}
// Handle resizing the Input Scaling div when the dialog is resized
function switchDialogResize(ev, ui) {
$("#node-input-breakpoint-container-div").css("height", (ui.size.height - 290) + "px");
};
$("#dialog").on("dialogresize", switchDialogResize); $("#dialog").on("dialogresize", switchDialogResize);
$("#dialog").one("dialogopen", function (ev) { $("#dialog").one("dialogopen", function (ev) {
var size = $("#dialog").dialog('option', 'sizeCache-switch'); var size = $("#dialog").dialog('option', 'sizeCache-switch');
if (size) { if (size) {
switchDialogResize(null, { size:size }); switchDialogResize(null, { size:size });
} }
}); });
$("#dialog").one("dialogclose", function(ev, ui) { $("#dialog").one("dialogclose", function(ev, ui) {
$("#dialog").off("dialogresize", switchDialogResize); $("#dialog").off("dialogresize", switchDialogResize);
}); });
}, },
oneditsave: function() { oneditsave: function() {
var breakpoints = $("#node-input-breakpoint-container").children(); var breakpoints = $("#node-input-breakpoint-container").children();
var node = this; var node = this;
node.breakpoints = []; node.breakpoints = [];
breakpoints.each(function (i) { breakpoints.each(function (i) {
var breakpoint = $(this); var breakpoint = $(this);
var r = {}; var r = {};
r.input = breakpoint.find(".node-input-breakpoint-input-value").val() - 0 r.input = breakpoint.find(".node-input-breakpoint-input-value").val() - 0
r.output = breakpoint.find(".node-input-breakpoint-output-value").val() - 0; r.output = breakpoint.find(".node-input-breakpoint-output-value").val() - 0;
r.mutable = breakpoint.find(".node-input-breakpoint-mutable").attr("mutable") == "true"; r.mutable = breakpoint.find(".node-input-breakpoint-mutable").attr("mutable") == "true";
node.breakpoints.push(r); node.breakpoints.push(r);
}); });
} node.breakpoints = node.breakpoints.sort(function (a, b) { return a.input - b.input; });
}
}); });
</script> </script>