GUI - Added 'No devices are connected' text.
- commented out test key bindings
Change-Id: I918d683df601d4575574d13b0a5379b34a3f681b
diff --git a/web/gui/src/main/webapp/topo.css b/web/gui/src/main/webapp/topo.css
index bc1bdd0..bd3d7e8 100644
--- a/web/gui/src/main/webapp/topo.css
+++ b/web/gui/src/main/webapp/topo.css
@@ -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 */
#topo svg .node {
diff --git a/web/gui/src/main/webapp/topo.js b/web/gui/src/main/webapp/topo.js
index f3cb1ad..7620009 100644
--- a/web/gui/src/main/webapp/topo.js
+++ b/web/gui/src/main/webapp/topo.js
@@ -122,10 +122,10 @@
// key bindings
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'],
I: [toggleInstances, 'Toggle ONOS instances pane'],
@@ -225,6 +225,7 @@
// D3 selections
var svg,
panZoomContainer,
+ noDevices,
bgImg,
topoG,
nodeG,
@@ -398,6 +399,10 @@
}
}
+ function showNoDevs(b) {
+ noDevices.style('visibility', visVal(b));
+ }
+
// ==============================
// Oblique view ...
@@ -826,6 +831,8 @@
id = device.id,
d;
+ showNoDevs(false);
+
if (network.lookup[id]) {
updateDevice(data);
return;
@@ -1507,7 +1514,7 @@
}
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) {
@@ -2326,6 +2333,11 @@
// remove from nodes array
var idx = find(id, network.nodes);
network.nodes.splice(idx, 1);
+
+ if (!network.nodes.length) {
+ showNoDevs(true);
+ }
+
// remove from SVG
updateNodes();
fResume();
@@ -2770,6 +2782,24 @@
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
@@ -2838,10 +2868,11 @@
function init(view, ctx, flags) {
var w = view.width(),
h = view.height(),
+ logSize = config.logicalSize,
fcfg = config.force;
// 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);
setSize(svg, view);
@@ -2851,6 +2882,11 @@
panZoomContainer = svg.append('g').attr('id', 'panZoomContainer');
setupPanZoom();
+ noDevices = svg.append('g')
+ .attr('class', 'noDevsLayer')
+ .attr('transform', translate(logSize/2, logSize/2));
+ setupNoDevices();
+
// group for the topology
topoG = panZoomContainer.append('g')
.attr('id', 'topo-G');
@@ -3008,6 +3044,9 @@
loadGeoMap();
}
+ repositionNoDevices();
+ showNoDevs(true);
+
// finally, connect to the server...
if (config.useLiveData) {
webSock.connect();