Make status display toggleable and add to MQTT nodes

nodes/core/io/10-mqtt.js

@@ -77,7 +77,9 @@ module.exports = function(RED) {
         this.topic = n.topic;
         this.broker = n.broker;
         this.brokerConfig = RED.nodes.getNode(this.broker);
+        var node = this;
         if (this.brokerConfig) {
+            this.status({fill:"red",shape:"ring",text:"disconnected"},true);
             this.client = connectionPool.get(this.brokerConfig.broker,this.brokerConfig.port,this.brokerConfig.clientid,this.brokerConfig.username,this.brokerConfig.password);
             var node = this;
             this.client.subscribe(this.topic,2,function(topic,payload,qos,retain) {
@@ -87,6 +89,12 @@ module.exports = function(RED) {
                     }
                     node.send(msg);
             });
+            this.client.on("connectionlost",function() {
+                node.status({fill:"red",shape:"ring",text:"disconnected"},true);
+            });
+            this.client.on("connect",function() {
+                node.status({fill:"green",shape:"dot",text:"connected"},true);
+            });
             this.client.connect();
         } else {
             this.error("missing broker configuration");
@@ -109,8 +117,10 @@ module.exports = function(RED) {
         this.broker = n.broker;
     
         this.brokerConfig = RED.nodes.getNode(this.broker);
+        var node = this;
         
         if (this.brokerConfig) {
+            this.status({fill:"red",shape:"ring",text:"disconnected"},true);
             this.client = connectionPool.get(this.brokerConfig.broker,this.brokerConfig.port,this.brokerConfig.clientid,this.brokerConfig.username,this.brokerConfig.password);
             this.on("input",function(msg) {
                 if (msg != null) {
@@ -120,6 +130,13 @@ module.exports = function(RED) {
                     this.client.publish(msg);
                 }
             });
+            this.client.on("connectionlost",function() {
+                node.status({fill:"red",shape:"ring",text:"disconnected"},true);
+            });
+            this.client.on("connect",function() {
+                node.status({fill:"green",shape:"dot",text:"connected"},true);
+            });
+
             this.client.connect();
         } else {
             this.error("missing broker configuration");

public/index.html

@@ -34,6 +34,8 @@
                 <ul class="dropdown-menu">
                     <li><a id="btn-sidebar" tabindex="-1" href="#"><i class="icon-ok pull-right"></i><i class="icon-list-alt"></i> Sidebar</a></li>
                     <li class="divider"></li>
+                    <li><a id="btn-node-status" tabindex="-1" href="#"><i class="icon-ok pull-right"></i><i class="icon-info-sign"></i> Node Status</a></li>
+                    <li class="divider"></li>
                     <li class="dropdown-submenu pull-left"><a tabindex="-1" href="#"><i class="icon-edit"></i> Import from...</a>
                         <ul class="dropdown-menu">
                             <li><a id="btn-import" tabindex="-1" href="#"><i class="icon-edit"></i> Clipboard...</a></li>

public/red/main.js

@@ -161,13 +161,24 @@ var RED = function() {
                 var node = RED.nodes.node(parts[1]);
                 if (node) {
                     node.status = msg;
+                    if (statusEnabled) {
                         node.dirty = true;
                         RED.view.redraw();
                     }
+                }
             });
         });
     }
 
+    $('#btn-node-status').click(function() {toggleStatus();});
+
+    var statusEnabled = false;
+    function toggleStatus() {
+        var btnStatus = $("#btn-node-status");
+        statusEnabled = btnStatus.toggleClass("active").hasClass("active");
+        RED.view.status(statusEnabled);
+    }
+    
     function showHelp() {
 
         var dialog = $('#node-help');

public/red/ui/view.js

@@ -38,6 +38,7 @@ RED.view = function() {
         moving_set = [],
         dirty = false,
         lasso = null,
+        showStatus = false,
         clickTime = 0,
         clickElapsed = 0;
 
@@ -46,7 +47,10 @@ RED.view = function() {
     
     var status_colours = {
         "red":    "#c00",
-        "green": "#5a8"
+        "green":  "#5a8",
+        "yellow": "#F9DF31",
+        "blue":   "#53A3F3",
+        "grey":   "#d3d3d3"
     }
     
     var outer = d3.select("#chart")
@@ -810,7 +814,7 @@ RED.view = function() {
             var nodeEnter = node.enter().insert("svg:g").attr("class", "node nodegroup");
             nodeEnter.each(function(d,i) {
                     var node = d3.select(this);
-
+                    node.attr("id",d.id);
                     var l = d._def.label;
                     l = (typeof l === "function" ? l.call(d) : l)||"";
                     d.w = Math.max(node_width,calculateTextWidth(l)+(d._def.inputs>0?7:0) );
@@ -1048,7 +1052,7 @@ RED.view = function() {
                             }
                             return "";
                         });
-                        if (!d.status) {
+                        if (!showStatus || !d.status) {
                             thisNode.selectAll('.node_status_group').style("display","none");
                         } else {
                             thisNode.selectAll('.node_status_group').style("display","inline").attr("transform","translate(3,"+(d.h+3)+")");
@@ -1399,6 +1403,12 @@ RED.view = function() {
         importNodes: importNodes,
         resize: function() {
             workspace_tabs.resize();
+        },
+        status: function(s) {
+            showStatus = s;
+            RED.nodes.eachNode(function(n) { n.dirty = true;});
+            //TODO: subscribe/unsubscribe here
+            redraw();
         }
     };
 }();