Fixing visuals for the SDN-IP demo. Fixed performance issue. Pulsing links instead of ants, less frequently and turning off the timer when not needed.
Change-Id: I7100d5da28bcf3a315e34a3ee8c6eb0b1cee0ac2
diff --git a/web/gui/src/main/webapp/topo2.css b/web/gui/src/main/webapp/topo2.css
index 40d2f8b..45377b1 100644
--- a/web/gui/src/main/webapp/topo2.css
+++ b/web/gui/src/main/webapp/topo2.css
@@ -127,6 +127,7 @@
#topo svg .link {
opacity: .7;
+ stroke-width: 1.2px;
}
#topo svg .link.inactive {
@@ -135,17 +136,17 @@
}
#topo svg .link.primary {
- stroke: #f11;
+ stroke: #ffA300;
stroke-width: 4px;
}
#topo svg .link.secondary {
- stroke: rgba(255,100,100,0.5);
+ stroke: rgba(0,153,51,0.5);
stroke-width: 3px;
}
#topo svg .link.animated {
- stroke: #f11;
- stroke-width: 6px;
- stroke-dasharray: 8 8
+ stroke: #ffA300;
+ Xstroke-width: 6px;
+ Xstroke-dasharray: 8 8
}
#topo svg .link.primary.optical {
@@ -163,8 +164,8 @@
}
#topo svg .linkLabel rect {
- stroke: #999;
- stroke-width: 1.2px;
+ Xstroke: #ccc;
+ Xstroke-width: 2px;
fill: #eee;
stroke: none;
}
diff --git a/web/gui/src/main/webapp/topo2.js b/web/gui/src/main/webapp/topo2.js
index b2664fa..2a36dfd 100644
--- a/web/gui/src/main/webapp/topo2.js
+++ b/web/gui/src/main/webapp/topo2.js
@@ -731,10 +731,18 @@
var paths = data.payload.paths;
// Revert any links hilighted previously.
- link.classed('primary secondary animated optical', false);
+ link.attr('stroke-width', null)
+ .style('stroke-width', null)
+ .classed('primary secondary animated optical', false);
// Remove all previous labels.
removeLinkLabels();
+ if (paths.length && !antTimer) {
+ startAntTimer();
+ } else if (!paths.length && antTimer) {
+ stopAntTimer();
+ }
+
// Now hilight all links in the paths payload, and attach
// labels to them, if they are defined.
paths.forEach(function (p) {
@@ -2160,22 +2168,35 @@
// Load map data asynchronously; complete startup after that..
loadGeoJsonData();
- // start the and timer
- var dashIdx = 0;
- antTimer = setInterval(function () {
- // TODO: figure out how to choose Src-->Dst and Dst-->Src, per link
- dashIdx = dashIdx === 0 ? 14 : dashIdx - 2;
- d3.selectAll('.animated').style('stroke-dashoffset', dashIdx);
- }, 35);
+ //var dashIdx = 0;
+ //antTimer = setInterval(function () {
+ // // TODO: figure out how to choose Src-->Dst and Dst-->Src, per link
+ // dashIdx = dashIdx === 0 ? 14 : dashIdx - 2;
+ // d3.selectAll('.animated').style('stroke-dashoffset', dashIdx);
+ //}, 35);
}
- function unload(view, ctx, flags) {
+ function startAntTimer() {
+ var pulses = [ 5, 3, 1.2, 3 ],
+ pulse = 0;
+ antTimer = setInterval(function () {
+ pulse = pulse + 1;
+ pulse = pulse === pulses.length ? 0 : pulse;
+ d3.selectAll('.animated').style('stroke-width', pulses[pulse]);
+ }, 200);
+ }
+
+ function stopAntTimer() {
if (antTimer) {
clearInterval(antTimer);
antTimer = null;
}
}
+ function unload(view, ctx, flags) {
+ stopAntTimer();
+ }
+
// TODO: move these to config/state portion of script
var geoJsonUrl = 'json/map/continental_us.json', // TODO: Paul
geoJson;