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

Add toggle button support to core, tidying up debug node

This commit is contained in:
Nicholas O'Leary 2013-10-28 16:45:31 +00:00
parent 87fdc74ed0
commit 948cbc537e
3 changed files with 60 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -59,16 +59,10 @@
icon: "debug.png", icon: "debug.png",
align: "right", align: "right",
button: { button: {
color: function() { toggle: "active",
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; d3.xhr("debug/"+this.id+"/"+(this.active?"enable":"disable")).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");
@ -79,14 +73,8 @@
} }
} else if (resp.status == 200) { } else if (resp.status == 200) {
RED.notify("Successfully activated: "+label,"success"); RED.notify("Successfully activated: "+label,"success");
node.active = true;
node.dirty = true;
RED.view.redraw();
} else if (resp.status == 201) { } else if (resp.status == 201) {
RED.notify("Successfully deactivated: "+label,"success"); 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 response: ("+resp.status+") "+resp.response,"error");
} }

15
nodes/core/58-debug.js
View File

@ -100,16 +100,19 @@ DebugNode.logHandler.on("log",function(msg) {
}); });
RED.nodes.addLogHandler(DebugNode.logHandler); RED.nodes.addLogHandler(DebugNode.logHandler);
RED.app.post("/debug/:id", function(req,res) { RED.app.post("/debug/:id/:state", function(req,res) {
var node = RED.nodes.getNode(req.params.id); var node = RED.nodes.getNode(req.params.id);
var state = req.params.state;
if (node != null) { if (node != null) {
if (node.active) { if (state === "enable") {
node.active = false; node.active = true;
res.send(201); res.send(201);
} else { } else if (state === "disable") {
node.active = true; node.active = false;
res.send(200); res.send(200);
} } else {
res.send(404);
}
} else { } else {
res.send(404); res.send(404);
} }

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

@ -561,7 +561,22 @@ RED.view = function() {
redraw(); redraw();
d3.event.stopPropagation(); d3.event.stopPropagation();
} }
function nodeButtonClicked(d) {
if (d._def.button.toggle) {
d[d._def.button.toggle] = !d[d._def.button.toggle];
d.dirty = true;
}
if (d._def.button.onclick) {
d._def.button.onclick.call(d);
}
if (d.dirty) {
redraw();
}
d3.event.preventDefault();
}
function redraw() { function redraw() {
vis.attr("transform","scale("+scaleFactor+")"); vis.attr("transform","scale("+scaleFactor+")");
outer.attr("width", space_width*scaleFactor).attr("height", space_height*scaleFactor); outer.attr("width", space_width*scaleFactor).attr("height", space_height*scaleFactor);
@ -595,19 +610,18 @@ RED.view = function() {
} }
if (d._def.button) { if (d._def.button) {
node.append('rect') var nodeButtonGroup = node.append('svg:g')
.attr("class",function(d) { return (d._def.align == "right") ? "node_right_button_group" : "node_left_button_group"; }) .attr("transform",function(d) { return "translate("+((d._def.align == "right") ? 94 : -25)+",2)"; })
.attr("x",function(d) { return (d._def.align == "right") ? 94 : -25; }) .attr("class",function(d) { return "node_button "+((d._def.align == "right") ? "node_right_button" : "node_left_button"); });
.attr("y",2) nodeButtonGroup.append('rect')
.attr("rx",8) .attr("rx",8)
.attr("ry",8) .attr("ry",8)
.attr("width",32) .attr("width",32)
.attr("height",node_height-4) .attr("height",node_height-4)
.attr("fill","#eee");//function(d) { return d._def.color;}) .attr("fill","#eee");//function(d) { return d._def.color;})
node.append('rect') nodeButtonGroup.append('rect')
.attr("class",function(d) { return (d._def.align == "right") ? "node_right_button" : "node_left_button"; }) .attr("x",function(d) { return d._def.align == "right"? 10:5})
.attr("x",function(d) { return (d._def.align == "right") ? 104 : -20; }) .attr("y",4)
.attr("y",6)
.attr("rx",5) .attr("rx",5)
.attr("ry",5) .attr("ry",5)
.attr("width",16) .attr("width",16)
@ -617,9 +631,15 @@ RED.view = function() {
.on("mousedown",function(d) {if (!lasso) { d3.select(this).attr("fill-opacity",0.2);d3.event.preventDefault(); d3.event.stopPropagation();}}) .on("mousedown",function(d) {if (!lasso) { d3.select(this).attr("fill-opacity",0.2);d3.event.preventDefault(); d3.event.stopPropagation();}})
.on("mouseup",function(d) {if (!lasso) { d3.select(this).attr("fill-opacity",0.4);d3.event.preventDefault();d3.event.stopPropagation();}}) .on("mouseup",function(d) {if (!lasso) { d3.select(this).attr("fill-opacity",0.4);d3.event.preventDefault();d3.event.stopPropagation();}})
.on("mouseover",function(d) {if (!lasso) { d3.select(this).attr("fill-opacity",0.4);}}) .on("mouseover",function(d) {if (!lasso) { d3.select(this).attr("fill-opacity",0.4);}})
.on("mouseout",function(d) {if (!lasso) { d3.select(this).attr("fill-opacity",1);}}) .on("mouseout",function(d) {if (!lasso) {
.on("click",function(d) { d._def.button.onclick.call(d); d3.event.preventDefault(); }) var op = 1;
.on("touchstart",function(d) { d._def.button.onclick.call(d); d3.event.preventDefault(); }) if (d._def.button.toggle) {
op = d[d._def.button.toggle]?1:0.2;
}
d3.select(this).attr("fill-opacity",op);
}})
.on("click",nodeButtonClicked)
.on("touchstart",nodeButtonClicked)
} }
var mainRect = node.append("rect") var mainRect = node.append("rect")
@ -755,10 +775,24 @@ 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 - d._def.button.wide.call(d))+","+0+")";}); thisNode.selectAll('.node_right_button').attr("transform",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) { var x = d.w-6;
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) if (d._def.button.toggle && !d[d._def.button.toggle]) {
x = x - 8;
}
return "translate("+x+",2)";
}); });
thisNode.selectAll('.node_right_button rect').attr("fill-opacity",function(d){
if (d._def.button.toggle) {
return d[d._def.button.toggle]?1:0.2;
}
return 1;
});
//thisNode.selectAll('.node_right_button').attr("transform",function(d){return "translate("+(d.w - d._def.button.width.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)
//});
thisNode.selectAll('.node_badge_group').attr("transform",function(d){return "translate("+(d.w-40)+","+(d.h+3)+")";}); thisNode.selectAll('.node_badge_group').attr("transform",function(d){return "translate("+(d.w-40)+","+(d.h+3)+")";});
thisNode.selectAll('text.node_badge_label').text(function(d,i) { thisNode.selectAll('text.node_badge_label').text(function(d,i) {