Thomas Vachuska

Fixing visuals for the SDN-IP demo. Fixed performance issue. Pulsing links inste…

…ad of ants, less frequently and turning off the timer when not needed.

Change-Id: I7100d5da28bcf3a315e34a3ee8c6eb0b1cee0ac2
...@@ -127,6 +127,7 @@ svg .node.host circle { ...@@ -127,6 +127,7 @@ svg .node.host circle {
127 127
128 #topo svg .link { 128 #topo svg .link {
129 opacity: .7; 129 opacity: .7;
130 + stroke-width: 1.2px;
130 } 131 }
131 132
132 #topo svg .link.inactive { 133 #topo svg .link.inactive {
...@@ -135,17 +136,17 @@ svg .node.host circle { ...@@ -135,17 +136,17 @@ svg .node.host circle {
135 } 136 }
136 137
137 #topo svg .link.primary { 138 #topo svg .link.primary {
138 - stroke: #f11; 139 + stroke: #ffA300;
139 stroke-width: 4px; 140 stroke-width: 4px;
140 } 141 }
141 #topo svg .link.secondary { 142 #topo svg .link.secondary {
142 - stroke: rgba(255,100,100,0.5); 143 + stroke: rgba(0,153,51,0.5);
143 stroke-width: 3px; 144 stroke-width: 3px;
144 } 145 }
145 #topo svg .link.animated { 146 #topo svg .link.animated {
146 - stroke: #f11; 147 + stroke: #ffA300;
147 - stroke-width: 6px; 148 + Xstroke-width: 6px;
148 - stroke-dasharray: 8 8 149 + Xstroke-dasharray: 8 8
149 } 150 }
150 151
151 #topo svg .link.primary.optical { 152 #topo svg .link.primary.optical {
...@@ -163,8 +164,8 @@ svg .node.host circle { ...@@ -163,8 +164,8 @@ svg .node.host circle {
163 } 164 }
164 165
165 #topo svg .linkLabel rect { 166 #topo svg .linkLabel rect {
166 - stroke: #999; 167 + Xstroke: #ccc;
167 - stroke-width: 1.2px; 168 + Xstroke-width: 2px;
168 fill: #eee; 169 fill: #eee;
169 stroke: none; 170 stroke: none;
170 } 171 }
......
...@@ -731,10 +731,18 @@ ...@@ -731,10 +731,18 @@
731 var paths = data.payload.paths; 731 var paths = data.payload.paths;
732 732
733 // Revert any links hilighted previously. 733 // Revert any links hilighted previously.
734 - link.classed('primary secondary animated optical', false); 734 + link.attr('stroke-width', null)
735 + .style('stroke-width', null)
736 + .classed('primary secondary animated optical', false);
735 // Remove all previous labels. 737 // Remove all previous labels.
736 removeLinkLabels(); 738 removeLinkLabels();
737 739
740 + if (paths.length && !antTimer) {
741 + startAntTimer();
742 + } else if (!paths.length && antTimer) {
743 + stopAntTimer();
744 + }
745 +
738 // Now hilight all links in the paths payload, and attach 746 // Now hilight all links in the paths payload, and attach
739 // labels to them, if they are defined. 747 // labels to them, if they are defined.
740 paths.forEach(function (p) { 748 paths.forEach(function (p) {
...@@ -2160,22 +2168,35 @@ ...@@ -2160,22 +2168,35 @@
2160 // Load map data asynchronously; complete startup after that.. 2168 // Load map data asynchronously; complete startup after that..
2161 loadGeoJsonData(); 2169 loadGeoJsonData();
2162 2170
2163 - // start the and timer 2171 + //var dashIdx = 0;
2164 - var dashIdx = 0; 2172 + //antTimer = setInterval(function () {
2173 + // // TODO: figure out how to choose Src-->Dst and Dst-->Src, per link
2174 + // dashIdx = dashIdx === 0 ? 14 : dashIdx - 2;
2175 + // d3.selectAll('.animated').style('stroke-dashoffset', dashIdx);
2176 + //}, 35);
2177 + }
2178 +
2179 + function startAntTimer() {
2180 + var pulses = [ 5, 3, 1.2, 3 ],
2181 + pulse = 0;
2165 antTimer = setInterval(function () { 2182 antTimer = setInterval(function () {
2166 - // TODO: figure out how to choose Src-->Dst and Dst-->Src, per link 2183 + pulse = pulse + 1;
2167 - dashIdx = dashIdx === 0 ? 14 : dashIdx - 2; 2184 + pulse = pulse === pulses.length ? 0 : pulse;
2168 - d3.selectAll('.animated').style('stroke-dashoffset', dashIdx); 2185 + d3.selectAll('.animated').style('stroke-width', pulses[pulse]);
2169 - }, 35); 2186 + }, 200);
2170 } 2187 }
2171 2188
2172 - function unload(view, ctx, flags) { 2189 + function stopAntTimer() {
2173 if (antTimer) { 2190 if (antTimer) {
2174 clearInterval(antTimer); 2191 clearInterval(antTimer);
2175 antTimer = null; 2192 antTimer = null;
2176 } 2193 }
2177 } 2194 }
2178 2195
2196 + function unload(view, ctx, flags) {
2197 + stopAntTimer();
2198 + }
2199 +
2179 // TODO: move these to config/state portion of script 2200 // TODO: move these to config/state portion of script
2180 var geoJsonUrl = 'json/map/continental_us.json', // TODO: Paul 2201 var geoJsonUrl = 'json/map/continental_us.json', // TODO: Paul
2181 geoJson; 2202 geoJson;
......