GUI - Added 'No devices are connected' text.

- commented out test key bindings

Change-Id: I918d683df601d4575574d13b0a5379b34a3f681b

@@ -43,6 +43,20 @@
 }
 }
 
 
 
 
+#topo svg .noDevsLayer {
+    visibility: hidden;
+}
+
+#topo svg .noDevsLayer text {
+    font-size: 60pt;
+    font-style: italic;
+    fill: #dde;
+}
+
+#topo svg .noDevsBird {
+    fill: #ecd;
+}
+
 /* NODES */
 /* NODES */
 
 
 #topo svg .node {
 #topo svg .node {

@@ -122,10 +122,10 @@
 
 
     // key bindings
     // key bindings
     var keyDispatch = {
     var keyDispatch = {
-        // TODO: remove these "development only" bindings
-        0: testMe,
-        equals: injectStartupEvents,
-        dash: injectTestEvent,
+        // ==== "development mode" ====
+        //0: testMe,
+        //equals: injectStartupEvents,
+        //dash: injectTestEvent,
 
 
         O: [toggleSummary, 'Toggle ONOS summary pane'],
         O: [toggleSummary, 'Toggle ONOS summary pane'],
         I: [toggleInstances, 'Toggle ONOS instances pane'],
         I: [toggleInstances, 'Toggle ONOS instances pane'],
@@ -225,6 +225,7 @@
     // D3 selections
     // D3 selections
     var svg,
     var svg,
         panZoomContainer,
         panZoomContainer,
+        noDevices,
         bgImg,
         bgImg,
         topoG,
         topoG,
         nodeG,
         nodeG,
@@ -398,6 +399,10 @@
         }
         }
     }
     }
 
 
+    function showNoDevs(b) {
+        noDevices.style('visibility', visVal(b));
+    }
+
     // ==============================
     // ==============================
     // Oblique view ...
     // Oblique view ...
 
 
@@ -826,6 +831,8 @@
             id = device.id,
             id = device.id,
             d;
             d;
 
 
+        showNoDevs(false);
+
         if (network.lookup[id]) {
         if (network.lookup[id]) {
             updateDevice(data);
             updateDevice(data);
             return;
             return;
@@ -1507,7 +1514,7 @@
     }
     }
 
 
     function appendBadge(svg, ox, oy, dim, iid, cls) {
     function appendBadge(svg, ox, oy, dim, iid, cls) {
-        appendUse(svg, ox, oy, dim, iid,cls ).classed('badgeIcon', true);
+        appendUse(svg, ox, oy, dim, iid, cls).classed('badgeIcon', true);
     }
     }
 
 
     function attachUiBadge(svg) {
     function attachUiBadge(svg) {
@@ -2326,6 +2333,11 @@
         // remove from nodes array
         // remove from nodes array
         var idx = find(id, network.nodes);
         var idx = find(id, network.nodes);
         network.nodes.splice(idx, 1);
         network.nodes.splice(idx, 1);
+
+        if (!network.nodes.length) {
+            showNoDevs(true);
+        }
+
         // remove from SVG
         // remove from SVG
         updateNodes();
         updateNodes();
         fResume();
         fResume();
@@ -2770,6 +2782,24 @@
         svg.call(zoom);
         svg.call(zoom);
     }
     }
 
 
+
+    function setupNoDevices() {
+        var g = noDevices.append('g');
+        appendBadge(g, 0, 0, 100, '#bird', 'noDevsBird');
+        var text = g.append('text')
+            .text('No devices are connected')
+            .attr({ x: 120, y: 80});
+    }
+
+    function repositionNoDevices() {
+        var g = noDevices.select('g');
+        var box = g.node().getBBox();
+        box.x -= box.width/2;
+        box.y -= box.height/2;
+        g.attr('transform', translate(box.x, box.y));
+    }
+
+
     // ==============================
     // ==============================
     // Test harness code
     // Test harness code
 
 
@@ -2838,10 +2868,11 @@
     function init(view, ctx, flags) {
     function init(view, ctx, flags) {
         var w = view.width(),
         var w = view.width(),
             h = view.height(),
             h = view.height(),
+            logSize = config.logicalSize,
             fcfg = config.force;
             fcfg = config.force;
 
 
         // NOTE: view.$div is a D3 selection of the view's div
         // NOTE: view.$div is a D3 selection of the view's div
-        var viewBox = '0 0 ' + config.logicalSize + ' ' + config.logicalSize;
+        var viewBox = '0 0 ' + logSize + ' ' + logSize;
         svg = view.$div.append('svg').attr('viewBox', viewBox);
         svg = view.$div.append('svg').attr('viewBox', viewBox);
         setSize(svg, view);
         setSize(svg, view);
 
 
@@ -2851,6 +2882,11 @@
         panZoomContainer = svg.append('g').attr('id', 'panZoomContainer');
         panZoomContainer = svg.append('g').attr('id', 'panZoomContainer');
         setupPanZoom();
         setupPanZoom();
 
 
+        noDevices = svg.append('g')
+            .attr('class', 'noDevsLayer')
+            .attr('transform', translate(logSize/2, logSize/2));
+        setupNoDevices();
+
         // group for the topology
         // group for the topology
         topoG = panZoomContainer.append('g')
         topoG = panZoomContainer.append('g')
             .attr('id', 'topo-G');
             .attr('id', 'topo-G');
@@ -3008,6 +3044,9 @@
                 loadGeoMap();
                 loadGeoMap();
             }
             }
 
 
+            repositionNoDevices();
+            showNoDevs(true);
+
             // finally, connect to the server...
             // finally, connect to the server...
             if (config.useLiveData) {
             if (config.useLiveData) {
                 webSock.connect();
                 webSock.connect();