frodovdr
/
node-red
mirror of https://github.com/node-red/node-red.git
1
0
Fork 0
Code Issues Releases Wiki Activity

Make debug button move/partially hide when disabled to make it obvious. Also thicken border of node selected from within debug window - again to make it "pop" so it is obvious. Fixes #47

This commit is contained in:
Dave C-J 2013-10-28 10:01:12 +00:00
parent deef63334f
commit 87fdc74ed0
3 changed files with 51 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

65
nodes/core/58-debug.html
View File

@ -29,14 +29,14 @@
</script> </script>
<script type="text/x-red" data-help-name="debug"> <script type="text/x-red" data-help-name="debug">
<p>The Debug node can be connected to the output of any node. It will display the timestamp, <b>msg.topic</b> and <b>msg.payload</b> fields of any messages it receives in the debug tab of the sidebar. <p>The Debug node can be connected to the output of any node. It will display the timestamp, <b>msg.topic</b> and <b>msg.payload</b> fields of any messages it receives in the debug tab of the sidebar.
<br/>The sidebar can be accessed under the options drop-down in the top right corner.</p> <br/>The sidebar can be accessed under the options drop-down in the top right corner.</p>
<p>The button to the right of the node will toggle it's output on and off so you can de-clutter the debug window.</p> <p>The button to the right of the node will toggle it's output on and off so you can de-clutter the debug window.</p>
<p>If the payload is an object it will be stringified first for display and indicate that by saying "(Object) ".</p> <p>If the payload is an object it will be stringified first for display and indicate that by saying "(Object) ".</p>
<p>If the payload is a buffer it will be stringified first for display and indicate that by saying "(Buffer) ".</p> <p>If the payload is a buffer it will be stringified first for display and indicate that by saying "(Buffer) ".</p>
<p>Selecting any particular message will highlight (in red) the debug node that reported it. This is useful if you wire up multiple debug nodes.</p> <p>Selecting any particular message will highlight (in red) the debug node that reported it. This is useful if you wire up multiple debug nodes.</p>
<p>Optionally can show the complete msg object - but the screen can get messy.</p> <p>Optionally can show the complete msg object - but the screen can get messy.</p>
<p>In addition any calls to node.warn or node.error will appear here.</p> <p>In addition any calls to node.warn or node.error will appear here.</p>
</script> </script>
<script type="text/javascript"> <script type="text/javascript">
@ -62,31 +62,34 @@
color: function() { color: function() {
return (typeof this.active === 'undefined') ? ("#87a980" ) : (this.active ? "#87a980" : "#b9b9b9"); return (typeof this.active === 'undefined') ? ("#87a980" ) : (this.active ? "#87a980" : "#b9b9b9");
}, },
wide: function() {
return (typeof this.active === 'undefined') ? 100 : (this.active ? 100 : 110);
},
onclick: function() { onclick: function() {
var label = this.name||"debug"; var label = this.name||"debug";
var node = this; var node = this;
d3.xhr("debug/"+this.id).post(function(err,resp) { d3.xhr("debug/"+this.id).post(function(err,resp) {
if (err) { if (err) {
if (err.status == 404) { if (err.status == 404) {
RED.notify("<strong>Error</strong>: debug node not deployed","error"); RED.notify("<strong>Error</strong>: debug node not deployed","error");
} else if (err.status == 0) { } else if (err.status == 0) {
RED.notify("<strong>Error</strong>: no response from server","error"); RED.notify("<strong>Error</strong>: no response from server","error");
} else {
RED.notify("<strong>Error</strong>: unexpected error: ("+err.status+")"+err.response,"error");
}
} else if (resp.status == 200) {
RED.notify("Successfully activated: "+label,"success");
node.active = true;
node.dirty = true;
RED.view.redraw();
} else if (resp.status == 201) {
RED.notify("Successfully deactivated: "+label,"success");
node.active = false;
node.dirty = true;
RED.view.redraw();
} else { } else {
RED.notify("<strong>Error</strong>: unexpected response: ("+resp.status+") "+resp.response,"error"); RED.notify("<strong>Error</strong>: unexpected error: ("+err.status+")"+err.response,"error");
} }
} else if (resp.status == 200) {
RED.notify("Successfully activated: "+label,"success");
node.active = true;
node.dirty = true;
RED.view.redraw();
} else if (resp.status == 201) {
RED.notify("Successfully deactivated: "+label,"success");
node.active = false;
node.dirty = true;
RED.view.redraw();
} else {
RED.notify("<strong>Error</strong>: unexpected response: ("+resp.status+") "+resp.response,"error");
}
}); });
} }
} }
@ -116,10 +119,10 @@
var sbc = document.getElementById("debug-content"); var sbc = document.getElementById("debug-content");
var errornotification = null; var errornotification = null;
var messageCount = 0; var messageCount = 0;
function debugConnect() { function debugConnect() {
//console.log("debug ws connecting"); //console.log("debug ws connecting");
var ws = new WebSocket("ws://"+location.hostname+":"+location.port+document.location.pathname+"/debug"); var ws = new WebSocket("ws://"+location.hostname+":"+location.port+document.location.pathname+"/debug");
@ -165,7 +168,7 @@
var atBottom = (sbc.scrollHeight-messages.offsetHeight-sbc.scrollTop) < 5; var atBottom = (sbc.scrollHeight-messages.offsetHeight-sbc.scrollTop) < 5;
messageCount++; messageCount++;
$(messages).append(msg); $(messages).append(msg);
if (messageCount > 200) { if (messageCount > 200) {
$("#debug-content .debug-message:first").remove(); $("#debug-content .debug-message:first").remove();
messageCount--; messageCount--;

20
public/red/ui/view.js
View File

@ -99,7 +99,7 @@ RED.view = function() {
.attr("height",0) .attr("height",0)
.attr("class","lasso"); .attr("class","lasso");
d3.event.preventDefault(); d3.event.preventDefault();
} }
} }
} }
@ -155,7 +155,7 @@ RED.view = function() {
var delta = Math.sqrt(dy*dy+dx*dx); var delta = Math.sqrt(dy*dy+dx*dx);
var scale = lineCurveScale; var scale = lineCurveScale;
var scaleY = 0; var scaleY = 0;
if (delta < node_width) { if (delta < node_width) {
scale = 0.75-0.75*((node_width-delta)/node_width); scale = 0.75-0.75*((node_width-delta)/node_width);
} }
@ -165,7 +165,7 @@ RED.view = function() {
scaleY = ((dy>0)?0.5:-0.5)*(((3*node_height)-Math.abs(dy))/(3*node_height))*(Math.min(node_width,Math.abs(dx))/(node_width)) ; scaleY = ((dy>0)?0.5:-0.5)*(((3*node_height)-Math.abs(dy))/(3*node_height))*(Math.min(node_width,Math.abs(dx))/(node_width)) ;
} }
} }
drag_line.attr("d", drag_line.attr("d",
"M "+(mousedown_node.x+sc*mousedown_node.w/2)+" "+(mousedown_node.y+y)+ "M "+(mousedown_node.x+sc*mousedown_node.w/2)+" "+(mousedown_node.y+y)+
" C "+(mousedown_node.x+sc*(mousedown_node.w/2+node_width*scale))+" "+(mousedown_node.y+y+scaleY*node_height)+" "+ " C "+(mousedown_node.x+sc*(mousedown_node.w/2+node_width*scale))+" "+(mousedown_node.y+y+scaleY*node_height)+" "+
@ -655,7 +655,7 @@ RED.view = function() {
.attr("x",0).attr("y",function(d){return (d.h-Math.min(50,d.h))/2;}) .attr("x",0).attr("y",function(d){return (d.h-Math.min(50,d.h))/2;})
.attr("width","15") .attr("width","15")
.attr("height", function(d){return Math.min(50,d.h);}); .attr("height", function(d){return Math.min(50,d.h);});
if (d._def.align) { if (d._def.align) {
icon.attr('class','node_icon node_icon_'+d._def.align); icon.attr('class','node_icon node_icon_'+d._def.align);
} }
@ -755,8 +755,8 @@ RED.view = function() {
}); });
thisNode.selectAll(".node_icon").attr("height",function(d){return Math.min(50,d.h);}).attr("y",function(d){return (d.h-Math.min(50,d.h))/2;}); thisNode.selectAll(".node_icon").attr("height",function(d){return Math.min(50,d.h);}).attr("y",function(d){return (d.h-Math.min(50,d.h))/2;});
thisNode.selectAll('.node_right_button_group').attr("transform",function(d){return "translate("+(d.w-100)+","+0+")";}); thisNode.selectAll('.node_right_button_group').attr("transform",function(d){return "translate("+(d.w - d._def.button.wide.call(d))+","+0+")";});
thisNode.selectAll('.node_right_button').attr("transform",function(d){return "translate("+(d.w-100)+","+0+")";}).attr("fill",function(d) { thisNode.selectAll('.node_right_button').attr("transform",function(d){return "translate("+(d.w - d._def.button.wide.call(d))+","+0+")";}).attr("fill",function(d) {
return typeof d._def.button.color === "function" ? d._def.button.color.call(d):(d._def.button.color != null ? d._def.button.color : d._def.color) return typeof d._def.button.color === "function" ? d._def.button.color.call(d):(d._def.button.color != null ? d._def.button.color : d._def.color)
}); });
@ -814,14 +814,14 @@ RED.view = function() {
if (delta < node_width) { if (delta < node_width) {
scale = 0.75-0.75*((node_width-delta)/node_width); scale = 0.75-0.75*((node_width-delta)/node_width);
} }
if (dx < 0) { if (dx < 0) {
scale += 2*(Math.min(5*node_width,Math.abs(dx))/(5*node_width)); scale += 2*(Math.min(5*node_width,Math.abs(dx))/(5*node_width));
if (Math.abs(dy) < 3*node_height) { if (Math.abs(dy) < 3*node_height) {
scaleY = ((dy>0)?0.5:-0.5)*(((3*node_height)-Math.abs(dy))/(3*node_height))*(Math.min(node_width,Math.abs(dx))/(node_width)) ; scaleY = ((dy>0)?0.5:-0.5)*(((3*node_height)-Math.abs(dy))/(3*node_height))*(Math.min(node_width,Math.abs(dx))/(node_width)) ;
} }
} }
d.x1 = d.source.x+d.source.w/2; d.x1 = d.source.x+d.source.w/2;
d.y1 = d.source.y+y; d.y1 = d.source.y+y;
d.x2 = d.target.x-d.target.w/2; d.x2 = d.target.x-d.target.w/2;
@ -878,11 +878,11 @@ RED.view = function() {
var root_node = new_ms[0].n; var root_node = new_ms[0].n;
var dx = root_node.x; var dx = root_node.x;
var dy = root_node.y; var dy = root_node.y;
if (mouse_position == null) { if (mouse_position == null) {
mouse_position = [0,0]; mouse_position = [0,0];
} }
for (var i in new_ms) { for (var i in new_ms) {
new_ms[i].n.selected = true; new_ms[i].n.selected = true;
new_ms[i].n.x -= dx - mouse_position[0]; new_ms[i].n.x -= dx - mouse_position[0];

14
public/style.css
View File

@ -318,7 +318,8 @@ a.brand img {
stroke: #ff7f0e; stroke: #ff7f0e;
} }
.node_highlighted { .node_highlighted {
stroke: #ff0000; stroke: #a51616;
stroke-width: 4;
} }
.node_hovered { .node_hovered {
dstroke: #ff7f0e; dstroke: #ff7f0e;
@ -414,11 +415,11 @@ button.input-append-right {
} }
.form-tips { .form-tips {
background: lightgoldenrodyellow; background: lightgoldenrodyellow;
font-size: 12px; font-size: 12px;
padding: 8px; padding: 8px;
border-radius: 5px; border-radius: 5px;
border: 1px solid #999; border: 1px solid #999;
} }
.form-tips code { .form-tips code {
border: none; border: none;
@ -552,7 +553,6 @@ div.node-info {
#node-select-library li.list-hover { #node-select-library li.list-hover {
background: #ffffd0; background: #ffffd0;
} }
.node-text-editor { .node-text-editor {
border:1px solid #ccc; border:1px solid #ccc;
border-radius:5px; border-radius:5px;