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
Showing
2 changed files
with
37 additions
and
15 deletions
... | @@ -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; | ... | ... |
-
Please register or login to post a comment