frodovdr/node-red
1
0
Fork 0
mirror of https://github.com/node-red/node-red.git synced 2023-10-10 13:36:53 +02:00
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

Browse Source
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 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.
<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>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>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>In addition any calls to node.warn or node.error will appear here.</p>
<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>
<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 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>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>
</script>
<script type="text/javascript">
@ -62,31 +62,34 @@
color: function() {
return (typeof this.active === 'undefined') ? ("#87a980" ) : (this.active ? "#87a980" : "#b9b9b9");
},
wide: function() {
return (typeof this.active === 'undefined') ? 100 : (this.active ? 100 : 110);
},
onclick: function() {
var label = this.name||"debug";
var node = this;
d3.xhr("debug/"+this.id).post(function(err,resp) {
if (err) {
if (err.status == 404) {
RED.notify("<strong>Error</strong>: debug node not deployed","error");
} else if (err.status == 0) {
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();
if (err) {
if (err.status == 404) {
RED.notify("<strong>Error</strong>: debug node not deployed","error");
} else if (err.status == 0) {
RED.notify("<strong>Error</strong>: no response from server","error");
} 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 errornotification = null;
var messageCount = 0;
function debugConnect() {
//console.log("debug ws connecting");
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;
messageCount++;
$(messages).append(msg);
if (messageCount > 200) {
$("#debug-content .debug-message:first").remove();
messageCount--;

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

@ -99,7 +99,7 @@ RED.view = function() {
.attr("height",0)
.attr("class","lasso");
d3.event.preventDefault();
}
}
}
}
@ -155,7 +155,7 @@ RED.view = function() {
var delta = Math.sqrt(dy*dy+dx*dx);
var scale = lineCurveScale;
var scaleY = 0;
if (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)) ;
}
}
drag_line.attr("d",
"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)+" "+
@ -655,7 +655,7 @@ RED.view = function() {
.attr("x",0).attr("y",function(d){return (d.h-Math.min(50,d.h))/2;})
.attr("width","15")
.attr("height", function(d){return Math.min(50,d.h);});
if (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_right_button_group').attr("transform",function(d){return "translate("+(d.w-100)+","+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_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 - 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)
});
@ -814,14 +814,14 @@ RED.view = function() {
if (delta < node_width) {
scale = 0.75-0.75*((node_width-delta)/node_width);
}
if (dx < 0) {
scale += 2*(Math.min(5*node_width,Math.abs(dx))/(5*node_width));
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)) ;
}
}
d.x1 = d.source.x+d.source.w/2;
d.y1 = d.source.y+y;
d.x2 = d.target.x-d.target.w/2;
@ -878,11 +878,11 @@ RED.view = function() {
var root_node = new_ms[0].n;
var dx = root_node.x;
var dy = root_node.y;
if (mouse_position == null) {
mouse_position = [0,0];
}
for (var i in new_ms) {
new_ms[i].n.selected = true;
new_ms[i].n.x -= dx - mouse_position[0];

14
public/style.css
View File

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