홍길동 / onos

Go to a project
Toggle navigation Toggle navigation pinning
Simon Hunt
92eaf445 1 parent bf6a6560

ONOS-4359: continued work on theming UI 

- topo view: device icon and label re-theming (WIP)

Change-Id: I5ecbc1c5b8a8315bfadfaacf62cfdb0e6d1f5a9c
Inline Side-by-side
Showing 26 changed files with 442 additions and 308 deletions
...@@ -149,8 +149,7 @@ ...@@ -149,8 +149,7 @@
149 // configuration for device and host icons in the topology view 149 // configuration for device and host icons in the topology view
150 var config = { 150 var config = {
151 device: { 151 device: {
152 - dim: 36, 152 + dim: 36
153 - rx: 4
154 }, 153 },
155 host: { 154 host: {
156 badge: { 155 badge: {
...@@ -170,30 +169,15 @@ ...@@ -170,30 +169,15 @@
170 }; 169 };
171 170
172 171
173 - // Adds a device icon to the specified element, using the given glyph. 172 + // Adds a device glyph to the specified element.
174 - // Returns the D3 selection of the icon. 173 + // Returns the D3 selection of the glyph (use) element.
175 - function addDeviceIcon(elem, glyphId) { 174 + function addDeviceIcon(elem, glyphId, iconDim) {
176 - var cfg = config.device, 175 + var gid = gs.glyphDefined(glyphId) ? glyphId : 'query';
177 - gid = gs.glyphDefined(glyphId) ? glyphId : 'query', 176 + return elem.append('use').attr({
178 - g = elem.append('g')
179 - .attr('class', 'svgIcon deviceIcon');
180 -
181 - g.append('rect').attr({
182 - x: 0,
183 - y: 0,
184 - rx: cfg.rx,
185 - width: cfg.dim,
186 - height: cfg.dim
187 - });
188 -
189 - g.append('use').attr({
190 'xlink:href': '#' + gid, 177 'xlink:href': '#' + gid,
191 - width: cfg.dim, 178 + width: iconDim,
192 - height: cfg.dim 179 + height: iconDim
193 }); 180 });
194 -
195 - g.dim = cfg.dim;
196 - return g;
197 } 181 }
198 182
199 function addHostIcon(elem, radius, glyphId) { 183 function addHostIcon(elem, radius, glyphId) {
......
...@@ -20,23 +20,23 @@ ...@@ -20,23 +20,23 @@
20 20
21 /* --- Base SVG Layer --- */ 21 /* --- Base SVG Layer --- */
22 22
23 -.light #ov-topo svg { 23 +#ov-topo svg {
24 background-color: #f4f4f4; 24 background-color: #f4f4f4;
25 } 25 }
26 26
27 /* --- "No Devices" Layer --- */ 27 /* --- "No Devices" Layer --- */
28 28
29 -.light #ov-topo svg .noDevsBird { 29 +#ov-topo svg .noDevsBird {
30 fill: #db7773; 30 fill: #db7773;
31 } 31 }
32 32
33 -.light #ov-topo svg #topo-noDevsLayer text { 33 +#ov-topo svg #topo-noDevsLayer text {
34 fill: #7e9aa8; 34 fill: #7e9aa8;
35 } 35 }
36 36
37 /* --- Topo Map --- */ 37 /* --- Topo Map --- */
38 38
39 -.light #ov-topo svg #topo-map { 39 +#ov-topo svg #topo-map {
40 stroke-width: 2px; 40 stroke-width: 2px;
41 stroke: #f4f4f4; 41 stroke: #f4f4f4;
42 fill: #e5e5e6; 42 fill: #e5e5e6;
...@@ -44,19 +44,19 @@ ...@@ -44,19 +44,19 @@
44 44
45 /* --- general topo-panel styling --- */ 45 /* --- general topo-panel styling --- */
46 46
47 -.light .topo-p svg .glyph { 47 +.topo-p svg .glyph {
48 fill: #222; 48 fill: #222;
49 } 49 }
50 50
51 -.light .topo-p svg .glyph.overlay { 51 +.topo-p svg .glyph.overlay {
52 fill: #fff; 52 fill: #fff;
53 } 53 }
54 54
55 -.light .topo-p h2 { 55 +.topo-p h2 {
56 color: black; 56 color: black;
57 } 57 }
58 58
59 -.light .topo-p h3 { 59 +.topo-p h3 {
60 color: black; 60 color: black;
61 } 61 }
62 62
...@@ -67,7 +67,7 @@ ...@@ -67,7 +67,7 @@
67 .topo-p td.value { 67 .topo-p td.value {
68 } 68 }
69 69
70 -.light .topo-p hr { 70 +.topo-p hr {
71 background-color: #ccc; 71 background-color: #ccc;
72 color: #ccc; 72 color: #ccc;
73 } 73 }
...@@ -76,19 +76,15 @@ ...@@ -76,19 +76,15 @@
76 76
77 #topo-p-instance svg rect { 77 #topo-p-instance svg rect {
78 stroke-width: 0; 78 stroke-width: 0;
79 -}
80 -#topo-p-instance .online svg rect {
81 - opacity: 1;
82 -}
83 -.light #topo-p-instance svg rect {
84 fill: #fbfbfb; 79 fill: #fbfbfb;
85 } 80 }
81 +
86 /* body of an instance */ 82 /* body of an instance */
87 -.light #topo-p-instance .online svg rect { 83 +#topo-p-instance .online svg rect {
84 + opacity: 1;
88 fill: #fbfbfb; 85 fill: #fbfbfb;
89 } 86 }
90 87
91 -
92 #topo-p-instance svg .glyph { 88 #topo-p-instance svg .glyph {
93 fill: #fff; 89 fill: #fff;
94 } 90 }
...@@ -100,19 +96,15 @@ ...@@ -100,19 +96,15 @@
100 /* offline */ 96 /* offline */
101 #topo-p-instance svg .badgeIcon { 97 #topo-p-instance svg .badgeIcon {
102 opacity: 0.4; 98 opacity: 0.4;
103 -}
104 -.light #topo-p-instance svg .badgeIcon {
105 fill: #939598; 99 fill: #939598;
106 } 100 }
107 101
108 /* online */ 102 /* online */
109 #topo-p-instance .online svg .badgeIcon { 103 #topo-p-instance .online svg .badgeIcon {
110 opacity: 1.0; 104 opacity: 1.0;
111 -}
112 -.light #topo-p-instance .online svg .badgeIcon {
113 fill: #939598; 105 fill: #939598;
114 } 106 }
115 -.light #topo-p-instance .online svg .badgeIcon.bird { 107 +#topo-p-instance .online svg .badgeIcon.bird {
116 fill: #ffffff; 108 fill: #ffffff;
117 } 109 }
118 110
...@@ -126,14 +118,11 @@ ...@@ -126,14 +118,11 @@
126 #topo-p-instance svg text { 118 #topo-p-instance svg text {
127 text-anchor: left; 119 text-anchor: left;
128 opacity: 0.5; 120 opacity: 0.5;
121 + fill: #3c3a3a;
129 } 122 }
123 +
130 #topo-p-instance .online svg text { 124 #topo-p-instance .online svg text {
131 opacity: 1.0; 125 opacity: 1.0;
132 -}
133 -.light #topo-p-instance svg text {
134 - fill: #3c3a3a;
135 -}
136 -.light #topo-p-instance .online svg text {
137 fill: #3c3a3a; 126 fill: #3c3a3a;
138 } 127 }
139 128
...@@ -143,11 +132,11 @@ ...@@ -143,11 +132,11 @@
143 #topo-p-instance .onosInst.mastership.affinity { 132 #topo-p-instance .onosInst.mastership.affinity {
144 opacity: 1.0; 133 opacity: 1.0;
145 } 134 }
146 -.light #topo-p-instance .onosInst.mastership.affinity svg rect { 135 +#topo-p-instance .onosInst.mastership.affinity svg rect {
147 filter: url(#blue-glow); 136 filter: url(#blue-glow);
148 } 137 }
149 138
150 -.light.firefox #topo-p-instance .onosInst.mastership.affinity svg rect { 139 +.firefox #topo-p-instance .onosInst.mastership.affinity svg rect {
151 filter: url("data:image/svg+xml;utf8, <svg xmlns = \'http://www.w3.org/2000/svg\'><filter x=\"-50%\" y=\"-50%\" width=\"200%\" height=\"200%\" id=\"blue-glow\"><feColorMatrix type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.7 0 0 0 1 0 \"></feColorMatrix><feGaussianBlur stdDeviation=\"3\" result=\"coloredBlur\"></feGaussianBlur><feMerge><feMergeNode in=\"coloredBlur\"></feMergeNode><feMergeNode in=\"SourceGraphic\"></feMergeNode></feMerge></filter></svg>#blue-glow"); 140 filter: url("data:image/svg+xml;utf8, <svg xmlns = \'http://www.w3.org/2000/svg\'><filter x=\"-50%\" y=\"-50%\" width=\"200%\" height=\"200%\" id=\"blue-glow\"><feColorMatrix type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.7 0 0 0 1 0 \"></feColorMatrix><feGaussianBlur stdDeviation=\"3\" result=\"coloredBlur\"></feGaussianBlur><feMerge><feMergeNode in=\"coloredBlur\"></feMergeNode><feMergeNode in=\"SourceGraphic\"></feMergeNode></feMerge></filter></svg>#blue-glow");
152 } 141 }
153 142
...@@ -161,84 +150,51 @@ ...@@ -161,84 +150,51 @@
161 opacity: 0.2 !important; 150 opacity: 0.2 !important;
162 } 151 }
163 152
164 -.light #ov-topo svg .node.selected rect, 153 +#ov-topo svg .node.selected rect,
165 -.light #ov-topo svg .node.selected circle { 154 +#ov-topo svg .node.selected circle {
166 fill: #f90; 155 fill: #f90;
167 filter: url(#blue-glow); 156 filter: url(#blue-glow);
168 } 157 }
169 -/*.dark #ov-topo svg .node.selected rect,*/ 158 +.firefox #ov-topo svg .node.selected rect,
170 -/*.dark #ov-topo svg .node.selected circle {*/ 159 +.firefox #ov-topo svg .node.selected circle {
171 - /*fill: #f90;*/
172 - /*filter: url(#yellow-glow);*/
173 -/*}*/
174 -.light.firefox #ov-topo svg .node.selected rect,
175 -.light.firefox #ov-topo svg .node.selected circle {
176 filter: url("data:image/svg+xml;utf8, <svg xmlns = \'http://www.w3.org/2000/svg\'><filter x=\"-50%\" y=\"-50%\" width=\"200%\" height=\"200%\" id=\"blue-glow\"><feColorMatrix type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.7 0 0 0 1 0 \"></feColorMatrix><feGaussianBlur stdDeviation=\"3\" result=\"coloredBlur\"></feGaussianBlur><feMerge><feMergeNode in=\"coloredBlur\"></feMergeNode><feMergeNode in=\"SourceGraphic\"></feMergeNode></feMerge></filter></svg>#blue-glow"); 160 filter: url("data:image/svg+xml;utf8, <svg xmlns = \'http://www.w3.org/2000/svg\'><filter x=\"-50%\" y=\"-50%\" width=\"200%\" height=\"200%\" id=\"blue-glow\"><feColorMatrix type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.7 0 0 0 1 0 \"></feColorMatrix><feGaussianBlur stdDeviation=\"3\" result=\"coloredBlur\"></feGaussianBlur><feMerge><feMergeNode in=\"coloredBlur\"></feMergeNode><feMergeNode in=\"SourceGraphic\"></feMergeNode></feMerge></filter></svg>#blue-glow");
177 } 161 }
178 -/*.dark.firefox #ov-topo svg .node.selected rect,*/
179 -/*.dark.firefox #ov-topo svg .node.selected circle {*/
180 - /*filter: url("data:image/svg+xml;utf8, <svg xmlns = \'http://www.w3.org/2000/svg\'><filter x=\"-50%\" y=\"-50%\" width=\"200%\" height=\"200%\" id=\"yellow-glow\"><feColorMatrix type=\"matrix\" values=\"0 0 0 0 1.0 0 0 0 0 1.0 0 0 0 0 0.3 0 0 0 1 0 \"></feColorMatrix><feGaussianBlur stdDeviation=\"3\" result=\"coloredBlur\"></feGaussianBlur><feMerge><feMergeNode in=\"coloredBlur\"></feMergeNode><feMergeNode in=\"SourceGraphic\"></feMergeNode></feMerge></filter></svg>#yellow-glow");*/
181 -/*}*/
182 162
183 /* Device Nodes */ 163 /* Device Nodes */
184 164
165 +/* note: device without the 'online' class is offline */
185 #ov-topo svg .node.device rect { 166 #ov-topo svg .node.device rect {
186 - stroke-width: 1.5; 167 + /* TODO: theme */
168 + fill: #f0f0f0;
187 } 169 }
188 - 170 +#ov-topo svg .node.device text {
189 -#ov-topo svg .node.device.fixed rect { 171 + /*TODO: theme*/
190 - stroke-width: 1.5; 172 + fill: #bbb;
191 -}
192 -.light #ov-topo svg .node.device.fixed rect {
193 - stroke: #aaa;
194 } 173 }
195 - 174 +#ov-topo svg .node.device use {
196 -/* note: device is offline without the 'online' class */ 175 + /*TODO: theme*/
197 -.light #ov-topo svg .node.device {
198 fill: #777; 176 fill: #777;
199 } 177 }
200 178
201 -.light #ov-topo svg .node.device rect {
202 - stroke: #666;
203 -}
204 -.light #ov-topo svg .node.device rect {
205 - stroke: #999;
206 -}
207 -
208 -.light #ov-topo svg .node.device.online {
209 - fill: #6e7fa3;
210 -}
211 179
212 -/* note: device is offline without the 'online' class */ 180 +#ov-topo svg .node.device.online rect {
213 -#ov-topo svg .node.device text { 181 + fill: #ffffff;
214 - fill: #bbb;
215 } 182 }
216 -
217 #ov-topo svg .node.device.online text { 183 #ov-topo svg .node.device.online text {
218 - fill: white; 184 + fill: #3c3a3a;
219 -}
220 -
221 -#ov-topo svg .node.device .svgIcon rect {
222 - fill: #aaa;
223 -}
224 -#ov-topo svg .node.device .svgIcon use {
225 - fill: #777;
226 -}
227 -#ov-topo svg .node.device.selected .svgIcon rect {
228 - fill: #f90;
229 -}
230 -#ov-topo svg .node.device.online .svgIcon rect {
231 - fill: #ccc;
232 } 185 }
233 -#ov-topo svg .node.device.online .svgIcon use { 186 +#ov-topo svg .node.device.online use {
234 - fill: #000; 187 + /* NOTE: this gets overridden programatically */
188 + fill: #454545;
235 } 189 }
236 -#ov-topo svg .node.device.online.selected .svgIcon rect { 190 +
191 +
192 +#ov-topo svg .node.device.selected rect {
237 fill: #f90; 193 fill: #f90;
238 } 194 }
239 195
240 /* Badges */ 196 /* Badges */
241 -/* (... works for both light and dark themes...) */ 197 +/* (... works for bothand dark themes...) */
242 #ov-topo svg .node .badge circle { 198 #ov-topo svg .node .badge circle {
243 stroke: #aaa; 199 stroke: #aaa;
244 } 200 }
...@@ -279,17 +235,15 @@ ...@@ -279,17 +235,15 @@
279 #ov-topo svg .node.host text { 235 #ov-topo svg .node.host text {
280 stroke: none; 236 stroke: none;
281 font: 9pt sans-serif; 237 font: 9pt sans-serif;
282 -}
283 -.light #ov-topo svg .node.host text {
284 fill: #846; 238 fill: #846;
285 } 239 }
286 240
287 -.light svg .node.host circle { 241 +svg .node.host circle {
288 - stroke: #000; 242 + stroke: #a3a596;
289 - fill: #edb; 243 + fill: #e0dfd6;
290 } 244 }
291 245
292 -.light svg .node.host .svgIcon { 246 +svg .node.host .svgIcon {
293 fill: #444; 247 fill: #444;
294 } 248 }
295 249
...@@ -302,24 +256,12 @@ ...@@ -302,24 +256,12 @@
302 #ov-topo svg .link.selected, 256 #ov-topo svg .link.selected,
303 #ov-topo svg .link.enhanced { 257 #ov-topo svg .link.enhanced {
304 stroke-width: 4.5px; 258 stroke-width: 4.5px;
305 -}
306 -.light #ov-topo svg .link.selected,
307 -.light #ov-topo svg .link.enhanced {
308 filter: url(#blue-glow); 259 filter: url(#blue-glow);
309 } 260 }
310 -/*.dark #ov-topo svg .link.selected,*/ 261 +.firefox #ov-topo svg .link.selected,
311 -/*.dark #ov-topo svg .link.enhanced {*/ 262 +.firefox #ov-topo svg .link.enhanced {
312 - /*filter: url(#yellow-glow);*/
313 -/*}*/
314 -.light.firefox #ov-topo svg .link.selected,
315 -.light.firefox #ov-topo svg .link.enhanced {
316 filter: url("data:image/svg+xml;utf8, <svg xmlns = \'http://www.w3.org/2000/svg\'><filter x=\"-50%\" y=\"-50%\" width=\"200%\" height=\"200%\" id=\"blue-glow\"><feColorMatrix type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.7 0 0 0 1 0 \"></feColorMatrix><feGaussianBlur stdDeviation=\"3\" result=\"coloredBlur\"></feGaussianBlur><feMerge><feMergeNode in=\"coloredBlur\"></feMergeNode><feMergeNode in=\"SourceGraphic\"></feMergeNode></feMerge></filter></svg>#blue-glow"); 263 filter: url("data:image/svg+xml;utf8, <svg xmlns = \'http://www.w3.org/2000/svg\'><filter x=\"-50%\" y=\"-50%\" width=\"200%\" height=\"200%\" id=\"blue-glow\"><feColorMatrix type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.7 0 0 0 1 0 \"></feColorMatrix><feGaussianBlur stdDeviation=\"3\" result=\"coloredBlur\"></feGaussianBlur><feMerge><feMergeNode in=\"coloredBlur\"></feMergeNode><feMergeNode in=\"SourceGraphic\"></feMergeNode></feMerge></filter></svg>#blue-glow");
317 } 264 }
318 -/*.dark.firefox #ov-topo svg .link.selected,*/
319 -/*.dark.firefox #ov-topo svg .link.enhanced {*/
320 - /*filter: url("data:image/svg+xml;utf8, <svg xmlns = \'http://www.w3.org/2000/svg\'><filter x=\"-50%\" y=\"-50%\" width=\"200%\" height=\"200%\" id=\"yellow-glow\"><feColorMatrix type=\"matrix\" values=\"0 0 0 0 1.0 0 0 0 0 1.0 0 0 0 0 0.3 0 0 0 1 0 \"></feColorMatrix><feGaussianBlur stdDeviation=\"3\" result=\"coloredBlur\"></feGaussianBlur><feMerge><feMergeNode in=\"coloredBlur\"></feMergeNode><feMergeNode in=\"SourceGraphic\"></feMergeNode></feMerge></filter></svg>#yellow-glow");*/
321 -
322 -/*}*/
323 265
324 #ov-topo svg .link.inactive { 266 #ov-topo svg .link.inactive {
325 opacity: .5; 267 opacity: .5;
...@@ -334,29 +276,27 @@ ...@@ -334,29 +276,27 @@
334 276
335 #ov-topo svg .link.secondary { 277 #ov-topo svg .link.secondary {
336 stroke-width: 3px; 278 stroke-width: 3px;
337 -}
338 -.light #ov-topo svg .link.secondary {
339 stroke: rgba(0,153,51,0.5); 279 stroke: rgba(0,153,51,0.5);
340 } 280 }
341 281
342 /* Port traffic color visualization for Kbps, Mbps, and Gbps */ 282 /* Port traffic color visualization for Kbps, Mbps, and Gbps */
343 283
344 -.light #ov-topo svg .link.secondary.port-traffic-Kbps { 284 +#ov-topo svg .link.secondary.port-traffic-Kbps {
345 stroke: rgb(0,153,51); 285 stroke: rgb(0,153,51);
346 stroke-width: 5.0; 286 stroke-width: 5.0;
347 } 287 }
348 288
349 -.light #ov-topo svg .link.secondary.port-traffic-Mbps { 289 +#ov-topo svg .link.secondary.port-traffic-Mbps {
350 stroke: rgb(128,145,27); 290 stroke: rgb(128,145,27);
351 stroke-width: 6.5; 291 stroke-width: 6.5;
352 } 292 }
353 293
354 -.light #ov-topo svg .link.secondary.port-traffic-Gbps { 294 +#ov-topo svg .link.secondary.port-traffic-Gbps {
355 stroke: rgb(255, 137, 3); 295 stroke: rgb(255, 137, 3);
356 stroke-width: 8.0; 296 stroke-width: 8.0;
357 } 297 }
358 298
359 -.light #ov-topo svg .link.secondary.port-traffic-Gbps-choked { 299 +#ov-topo svg .link.secondary.port-traffic-Gbps-choked {
360 stroke: rgb(183, 30, 21); 300 stroke: rgb(183, 30, 21);
361 stroke-width: 8.0; 301 stroke-width: 8.0;
362 } 302 }
...@@ -380,34 +320,26 @@ ...@@ -380,34 +320,26 @@
380 320
381 #ov-topo svg .link.primary { 321 #ov-topo svg .link.primary {
382 stroke-width: 4px; 322 stroke-width: 4px;
383 -}
384 -.light #ov-topo svg .link.primary {
385 stroke: #ffA300; 323 stroke: #ffA300;
386 } 324 }
387 325
388 #ov-topo svg .link.secondary.optical { 326 #ov-topo svg .link.secondary.optical {
389 stroke-width: 4px; 327 stroke-width: 4px;
390 -}
391 -.light #ov-topo svg .link.secondary.optical {
392 stroke: rgba(128,64,255,0.5); 328 stroke: rgba(128,64,255,0.5);
393 } 329 }
394 330
395 #ov-topo svg .link.primary.optical { 331 #ov-topo svg .link.primary.optical {
396 stroke-width: 6px; 332 stroke-width: 6px;
397 -}
398 -.light #ov-topo svg .link.primary.optical {
399 stroke: #74f; 333 stroke: #74f;
400 } 334 }
401 335
402 /* Link Labels */ 336 /* Link Labels */
403 #ov-topo svg .linkLabel rect { 337 #ov-topo svg .linkLabel rect {
404 stroke: none; 338 stroke: none;
405 -}
406 -.light #ov-topo svg .linkLabel rect {
407 fill: #eee; 339 fill: #eee;
408 } 340 }
409 341
410 -.light #ov-topo svg .linkLabel text { 342 +#ov-topo svg .linkLabel text {
411 fill: #444; 343 fill: #444;
412 } 344 }
413 345
...@@ -415,54 +347,52 @@ ...@@ -415,54 +347,52 @@
415 347
416 #ov-topo svg .portLabel rect { 348 #ov-topo svg .portLabel rect {
417 stroke: none; 349 stroke: none;
418 -}
419 -.light #ov-topo svg .portLabel rect {
420 fill: #eee; 350 fill: #eee;
421 } 351 }
422 352
423 -.light #ov-topo svg .portLabel text { 353 +#ov-topo svg .portLabel text {
424 fill: #444; 354 fill: #444;
425 } 355 }
426 356
427 /* Number of Links Labels */ 357 /* Number of Links Labels */
428 358
429 359
430 -.light #ov-topo text.numLinkText { 360 +#ov-topo text.numLinkText {
431 fill: #444; 361 fill: #444;
432 } 362 }
433 363
434 /* ------------------------------------------------- */ 364 /* ------------------------------------------------- */
435 /* Sprite Layer */ 365 /* Sprite Layer */
436 366
437 -.light #ov-topo svg #topo-sprites .gold1 use { 367 +#ov-topo svg #topo-sprites .gold1 use {
438 stroke: #fda; 368 stroke: #fda;
439 fill: none; 369 fill: none;
440 } 370 }
441 -.light #ov-topo svg #topo-sprites .gold1 text { 371 +#ov-topo svg #topo-sprites .gold1 text {
442 fill: #eda; 372 fill: #eda;
443 } 373 }
444 374
445 -.light #ov-topo svg #topo-sprites .blue1 use { 375 +#ov-topo svg #topo-sprites .blue1 use {
446 stroke: #bbd; 376 stroke: #bbd;
447 fill: none; 377 fill: none;
448 } 378 }
449 -.light #ov-topo svg #topo-sprites .blue1 text { 379 +#ov-topo svg #topo-sprites .blue1 text {
450 fill: #cce; 380 fill: #cce;
451 } 381 }
452 382
453 -.light #ov-topo svg #topo-sprites .gray1 use { 383 +#ov-topo svg #topo-sprites .gray1 use {
454 stroke: #ccc; 384 stroke: #ccc;
455 fill: none; 385 fill: none;
456 } 386 }
457 -.light #ov-topo svg #topo-sprites .gray1 text { 387 +#ov-topo svg #topo-sprites .gray1 text {
458 fill: #ddd; 388 fill: #ddd;
459 } 389 }
460 390
461 /* fills */ 391 /* fills */
462 -.light #ov-topo svg #topo-sprites use.fill-gray2 { 392 +#ov-topo svg #topo-sprites use.fill-gray2 {
463 fill: #eee; 393 fill: #eee;
464 } 394 }
465 395
466 -.light #ov-topo svg #topo-sprites use.fill-blue2 { 396 +#ov-topo svg #topo-sprites use.fill-blue2 {
467 fill: #bce; 397 fill: #bce;
468 } 398 }
......
...@@ -179,6 +179,7 @@ html[data-platform='iPad'] #topo-p-detail { ...@@ -179,6 +179,7 @@ html[data-platform='iPad'] #topo-p-detail {
179 179
180 #ov-topo svg .node { 180 #ov-topo svg .node {
181 cursor: pointer; 181 cursor: pointer;
182 + fill-rule: evenodd;
182 } 183 }
183 184
184 #ov-topo svg .node text { 185 #ov-topo svg .node text {
......
...@@ -39,28 +39,17 @@ ...@@ -39,28 +39,17 @@
39 */ 39 */
40 40
41 // configuration 41 // configuration
42 - var devCfg = { 42 + var devIconDim = 36;
43 - xoff: -20, 43 + var labelPad = 4;
44 - yoff: -18 44 +
45 - }, 45 + var badgeConfig = {
46 - labelConfig = {
47 - imgPad: 16,
48 - padLR: 4,
49 - padTB: 3,
50 - marginLR: 3,
51 - marginTB: 2,
52 - port: {
53 - gap: 3,
54 - width: 18,
55 - height: 14
56 - }
57 - },
58 - badgeConfig = {
59 radius: 12, 46 radius: 12,
60 yoff: 5, 47 yoff: 5,
61 gdelta: 10 48 gdelta: 10
62 - }, 49 + };
63 - icfg; 50 +
51 + // TODO: remove dependence on this
52 + var icfg;
64 53
65 var status = { 54 var status = {
66 i: 'badgeInfo', 55 i: 'badgeInfo',
...@@ -87,77 +76,32 @@ ...@@ -87,77 +76,32 @@
87 var deviceLabelIndex = 0, 76 var deviceLabelIndex = 0,
88 hostLabelIndex = 0; 77 hostLabelIndex = 0;
89 78
90 -
91 - var dCol = {
92 - black: '#000',
93 - paleblue: '#acf',
94 - offwhite: '#ddd',
95 - darkgrey: '#444',
96 - midgrey: '#888',
97 - lightgrey: '#bbb',
98 - orange: '#f90'
99 - };
100 -
101 // note: these are the device icon colors without affinity 79 // note: these are the device icon colors without affinity
102 var dColTheme = { 80 var dColTheme = {
103 light: { 81 light: {
104 - rfill: dCol.offwhite, 82 + online: '#444444',
105 - online: { 83 + offline: '#cccccc'
106 - glyph: dCol.darkgrey,
107 - rect: dCol.paleblue
108 - },
109 - offline: {
110 - glyph: dCol.midgrey,
111 - rect: dCol.lightgrey
112 - }
113 }, 84 },
114 dark: { 85 dark: {
115 - rfill: dCol.midgrey, 86 + // TODO: theme
116 - online: { 87 + online: '#444444',
117 - glyph: dCol.darkgrey, 88 + offline: '#cccccc'
118 - rect: dCol.paleblue
119 - },
120 - offline: {
121 - glyph: dCol.midgrey,
122 - rect: dCol.darkgrey
123 - }
124 } 89 }
125 }; 90 };
126 91
127 - function devBaseColor(d) { 92 + function devGlyphColor(d) {
128 - var o = d.online ? 'online' : 'offline';
129 - return dColTheme[ts.theme()][o];
130 - }
131 -
132 - function setDeviceColor(d) {
133 var o = d.online, 93 var o = d.online,
134 - s = d.el.classed('selected'), 94 + id = d.master,
135 - c = devBaseColor(d), 95 + otag = o ? 'online' : 'offline';
136 - a = instColor(d.master, o), 96 + return o ? sus.cat7().getColor(id, 0, ts.theme())
137 - icon = d.el.select('g.deviceIcon'), 97 + : dColTheme[ts.theme()][otag];
138 - g, r;
139 -
140 - if (s) {
141 - g = c.glyph;
142 - r = dCol.orange;
143 - } else if (api.instVisible()) {
144 - g = o ? a : c.glyph;
145 - r = o ? c.rfill : a;
146 - } else {
147 - g = c.glyph;
148 - r = c.rect;
149 - }
150 -
151 - icon.select('use').style('fill', g);
152 - icon.select('rect').style('fill', r);
153 } 98 }
154 99
155 - function instColor(id, online) { 100 + function setDeviceColor(d) {
156 - return sus.cat7().getColor(id, !online, ts.theme()); 101 + d.el.select('use')
102 + .style('fill', devGlyphColor(d));
157 } 103 }
158 104
159 - // ====
160 -
161 function incDevLabIndex() { 105 function incDevLabIndex() {
162 setDevLabIndex(deviceLabelIndex+1); 106 setDevLabIndex(deviceLabelIndex+1);
163 switch(deviceLabelIndex) { 107 switch(deviceLabelIndex) {
...@@ -174,82 +118,51 @@ ...@@ -174,82 +118,51 @@
174 ps.setPrefs('topo_prefs', p); 118 ps.setPrefs('topo_prefs', p);
175 } 119 }
176 120
177 - // Returns the newly computed bounding box of the rectangle
178 - function adjustRectToFitText(n) {
179 - var text = n.select('text'),
180 - box = text.node().getBBox(),
181 - lab = labelConfig;
182 -
183 - text.attr('text-anchor', 'middle')
184 - .attr('y', '-0.8em')
185 - .attr('x', lab.imgPad/2);
186 -
187 - // translate the bbox so that it is centered on [x,y]
188 - box.x = -box.width / 2;
189 - box.y = -box.height / 2;
190 -
191 - // add padding
192 - box.x -= (lab.padLR + lab.imgPad/2);
193 - box.width += lab.padLR * 2 + lab.imgPad;
194 - box.y -= lab.padTB;
195 - box.height += lab.padTB * 2;
196 -
197 - return box;
198 - }
199 -
200 function hostLabel(d) { 121 function hostLabel(d) {
201 var idx = (hostLabelIndex < d.labels.length) ? hostLabelIndex : 0; 122 var idx = (hostLabelIndex < d.labels.length) ? hostLabelIndex : 0;
202 return d.labels[idx]; 123 return d.labels[idx];
203 } 124 }
125 +
204 function deviceLabel(d) { 126 function deviceLabel(d) {
205 var idx = (deviceLabelIndex < d.labels.length) ? deviceLabelIndex : 0; 127 var idx = (deviceLabelIndex < d.labels.length) ? deviceLabelIndex : 0;
206 return d.labels[idx]; 128 return d.labels[idx];
207 } 129 }
130 +
208 function trimLabel(label) { 131 function trimLabel(label) {
209 return (label && label.trim()) || ''; 132 return (label && label.trim()) || '';
210 } 133 }
211 134
212 - function emptyBox() { 135 + function computeLabelWidth(n) {
136 + var text = n.select('text'),
137 + box = text.node().getBBox();
138 + return box.width + labelPad * 2;
139 + }
140 +
141 + function iconBox(dim, labelWidth) {
213 return { 142 return {
214 - x: -2, 143 + x: -dim/2,
215 - y: -2, 144 + y: -dim/2,
216 - width: 4, 145 + width: dim + labelWidth,
217 - height: 4 146 + height: dim
218 - }; 147 + }
219 } 148 }
220 149
221 function updateDeviceRendering(d) { 150 function updateDeviceRendering(d) {
222 - var label = trimLabel(deviceLabel(d)), 151 + var node = d.el,
223 - noLabel = !label, 152 + bdg = d.badge,
224 - node = d.el, 153 + label = trimLabel(deviceLabel(d)),
225 - dim = icfg.device.dim, 154 + labelWidth;
226 - box, dx, dy,
227 - bdg = d.badge;
228 -
229 - node.select('text')
230 - .text(label);
231 155
232 - if (noLabel) { 156 + node.select('text').text(label);
233 - box = emptyBox(); 157 + labelWidth = label ? computeLabelWidth(node) : 0;
234 - dx = -dim/2;
235 - dy = -dim/2;
236 - } else {
237 - box = adjustRectToFitText(node);
238 - dx = box.x + devCfg.xoff;
239 - dy = box.y + devCfg.yoff;
240 - }
241 158
242 node.select('rect') 159 node.select('rect')
243 .transition() 160 .transition()
244 - .attr(box); 161 + .attr(iconBox(devIconDim, labelWidth));
245 162
246 - node.select('g.deviceIcon') 163 + // TODO: verify badge placement
247 - .transition()
248 - .attr('transform', sus.translate(dx, dy));
249 -
250 - // handle badge, if defined
251 if (bdg) { 164 if (bdg) {
252 - renderBadge(node, bdg, { dx: dx + dim, dy: dy }); 165 + renderBadge(node, bdg, { dx: devIconDim, dy: 0 });
253 } 166 }
254 } 167 }
255 168
...@@ -259,7 +172,6 @@ ...@@ -259,7 +172,6 @@
259 172
260 updateHostLabel(d); 173 updateHostLabel(d);
261 174
262 - // handle badge, if defined
263 if (bdg) { 175 if (bdg) {
264 renderBadge(node, bdg, icfg.host.badge); 176 renderBadge(node, bdg, icfg.host.badge);
265 } 177 }
...@@ -331,28 +243,26 @@ ...@@ -331,28 +243,26 @@
331 var node = d3.select(this), 243 var node = d3.select(this),
332 glyphId = mapDeviceTypeToGlyph(d.type), 244 glyphId = mapDeviceTypeToGlyph(d.type),
333 label = trimLabel(deviceLabel(d)), 245 label = trimLabel(deviceLabel(d)),
334 - noLabel = !label, 246 + xlate = -devIconDim/2,
335 - box, dx, dy, icon; 247 + rect, text, glyph, labelWidth;
336 248
337 d.el = node; 249 d.el = node;
338 250
339 - node.append('rect').attr({ rx: 5, ry: 5 }); 251 + rect = node.append('rect');
340 - node.append('text').text(label).attr('dy', '1.1em');
341 - box = adjustRectToFitText(node);
342 - node.select('rect').attr(box);
343 252
344 - icon = is.addDeviceIcon(node, glyphId); 253 + text = node.append('text').text(label)
254 + .attr('text-anchor', 'left')
255 + .attr('y', '0.3em')
256 + .attr('x', devIconDim / 2 + labelPad);
345 257
346 - if (noLabel) { 258 + glyph = is.addDeviceIcon(node, glyphId, devIconDim);
347 - dx = -icon.dim/2; 259 +
348 - dy = -icon.dim/2; 260 + labelWidth = label ? computeLabelWidth(node) : 0;
349 - } else { 261 +
350 - box = adjustRectToFitText(node); 262 + rect.attr(iconBox(devIconDim, labelWidth));
351 - dx = box.x + devCfg.xoff; 263 + glyph.attr(iconBox(devIconDim, 0));
352 - dy = box.y + devCfg.yoff;
353 - }
354 264
355 - icon.attr('transform', sus.translate(dx, dy)); 265 + node.attr('transform', sus.translate(xlate, xlate));
356 } 266 }
357 267
358 function hostEnter(d) { 268 function hostEnter(d) {
...@@ -631,7 +541,6 @@ ...@@ -631,7 +541,6 @@
631 541
632 incDevLabIndex: incDevLabIndex, 542 incDevLabIndex: incDevLabIndex,
633 setDevLabIndex: setDevLabIndex, 543 setDevLabIndex: setDevLabIndex,
634 - adjustRectToFitText: adjustRectToFitText,
635 hostLabel: hostLabel, 544 hostLabel: hostLabel,
636 deviceLabel: deviceLabel, 545 deviceLabel: deviceLabel,
637 trimLabel: trimLabel, 546 trimLabel: trimLabel,
......
...@@ -29,14 +29,15 @@ ...@@ -29,14 +29,15 @@
29 // configuration 29 // configuration
30 var linkConfig = { 30 var linkConfig = {
31 light: { 31 light: {
32 - baseColor: '#666', 32 + baseColor: '#939598',
33 inColor: '#66f', 33 inColor: '#66f',
34 outColor: '#f00' 34 outColor: '#f00'
35 }, 35 },
36 dark: { 36 dark: {
37 - baseColor: '#aaa', 37 + // TODO : theme
38 + baseColor: '#939598',
38 inColor: '#66f', 39 inColor: '#66f',
39 - outColor: '#f66' 40 + outColor: '#f00'
40 }, 41 },
41 inWidth: 12, 42 inWidth: 12,
42 outWidth: 10 43 outWidth: 10
...@@ -337,7 +338,7 @@ ...@@ -337,7 +338,7 @@
337 modeCls = ldata.expected() ? 'inactive' : 'not-permitted', 338 modeCls = ldata.expected() ? 'inactive' : 'not-permitted',
338 delay = immediate ? 0 : 1000; 339 delay = immediate ? 0 : 1000;
339 340
340 - // FIXME: understand why el is sometimes undefined on addLink events... 341 + // NOTE: understand why el is sometimes undefined on addLink events...
341 // Investigated: 342 // Investigated:
342 // el is undefined when it's a reverse link that is being added. 343 // el is undefined when it's a reverse link that is being added.
343 // updateLinks (which sets ldata.el) isn't called before this is called. 344 // updateLinks (which sets ldata.el) isn't called before this is called.
......

42.6 KB | W: | H:

42.9 KB | W: | H:

  • 2-up
  • Swipe
  • Onion skin

668 Bytes | W: | H:

665 Bytes | W: | H:

  • 2-up
  • Swipe
  • Onion skin
1 +{
2 + "event": "updateInstance",
3 + "payload": {
4 + "id": "192.168.56.101",
5 + "ip": "192.168.56.101",
6 + "online": true,
7 + "ready": true,
8 + "uiAttached": true,
9 + "switches": 0
10 + }
11 +}
1 +{
2 + "event": "updateInstance",
3 + "payload": {
4 + "id": "ONOS-2",
5 + "ip": "192.168.56.102",
6 + "online": true,
7 + "ready": true,
8 + "uiAttached": false,
9 + "switches": 0
10 + }
11 +}
1 +{
2 + "event": "updateInstance",
3 + "payload": {
4 + "id": "ONOS-3",
5 + "ip": "192.168.56.103",
6 + "online": true,
7 + "ready": true,
8 + "uiAttached": false,
9 + "switches": 0
10 + }
11 +}
1 +{
2 + "event": "addDevice",
3 + "payload": {
4 + "id": "of:0000ffffffff000a",
5 + "type": "switch",
6 + "online": false,
7 + "master": "192.168.56.101",
8 + "x-location": {
9 + "type": "lnglat",
10 + "lat": 37.7833,
11 + "lng": -122.4167
12 + },
13 + "labels": [
14 + "",
15 + "sw-A",
16 + "0000ffffffff000a"
17 + ],
18 + "metaUi": {
19 + "x": 520,
20 + "y": 350
21 + }
22 + }
23 +}
1 +{
2 + "event": "addDevice",
3 + "payload": {
4 + "id": "of:0000ffffffff000b",
5 + "type": "switch",
6 + "online": false,
7 + "master": "ONOS-2",
8 + "x-location": {
9 + "type": "lnglat",
10 + "lat": 37.7833,
11 + "lng": -120.4167
12 + },
13 + "labels": [
14 + "",
15 + "sw-B",
16 + "0000ffffffff000b"
17 + ],
18 + "metaUi": {
19 + "x": 720,
20 + "y": 300
21 + }
22 + }
23 +}
1 +{
2 + "event": "addDevice",
3 + "payload": {
4 + "id": "of:0000ffffffff000c",
5 + "type": "switch",
6 + "online": false,
7 + "master": "ONOS-3",
8 + "x-location": {
9 + "type": "lnglat",
10 + "lat": 37.7833,
11 + "lng": -118.4167
12 + },
13 + "labels": [
14 + "",
15 + "sw-C",
16 + "0000ffffffff000c"
17 + ],
18 + "metaUi": {
19 + "x": 920,
20 + "y": 360
21 + }
22 + }
23 +}
1 +{
2 + "event": "addDevice",
3 + "payload": {
4 + "id": "of:0000ffffffff000a",
5 + "type": "switch",
6 + "online": true,
7 + "master": "192.168.56.101",
8 + "x-location": {
9 + "type": "lnglat",
10 + "lat": 37.7833,
11 + "lng": -122.4167
12 + },
13 + "labels": [
14 + "",
15 + "sw-A",
16 + "0000ffffffff000a"
17 + ],
18 + "metaUi": {
19 + "x": 520,
20 + "y": 350
21 + }
22 + }
23 +}
1 +{
2 + "event": "addDevice",
3 + "payload": {
4 + "id": "of:0000ffffffff000b",
5 + "type": "switch",
6 + "online": true,
7 + "master": "ONOS-2",
8 + "x-location": {
9 + "type": "lnglat",
10 + "lat": 37.7833,
11 + "lng": -120.4167
12 + },
13 + "labels": [
14 + "",
15 + "sw-B",
16 + "0000ffffffff000b"
17 + ],
18 + "metaUi": {
19 + "x": 720,
20 + "y": 300
21 + }
22 + }
23 +}
1 +{
2 + "event": "addDevice",
3 + "payload": {
4 + "id": "of:0000ffffffff000c",
5 + "type": "switch",
6 + "online": true,
7 + "master": "ONOS-3",
8 + "x-location": {
9 + "type": "lnglat",
10 + "lat": 37.7833,
11 + "lng": -118.4167
12 + },
13 + "labels": [
14 + "",
15 + "sw-C",
16 + "0000ffffffff000c"
17 + ],
18 + "metaUi": {
19 + "x": 920,
20 + "y": 360
21 + }
22 + }
23 +}
1 +{
2 + "event": "addLink",
3 + "payload": {
4 + "id": "of:0000ffffffff000a/11-of:0000ffffffff000b/10",
5 + "type": "direct",
6 + "online": true,
7 + "linkWidth": 2,
8 + "src": "of:0000ffffffff000a",
9 + "srcPort": "11",
10 + "dst": "of:0000ffffffff000b",
11 + "dstPort": "10"
12 + }
13 +}
1 +{
2 + "event": "addLink",
3 + "payload": {
4 + "id": "of:0000ffffffff000b/10-of:0000ffffffff000a/11",
5 + "type": "direct",
6 + "online": true,
7 + "linkWidth": 2,
8 + "src": "of:0000ffffffff000b",
9 + "srcPort": "10",
10 + "dst": "of:0000ffffffff000a",
11 + "dstPort": "11"
12 + }
13 +}
1 +{
2 + "event": "addLink",
3 + "payload": {
4 + "id": "of:0000ffffffff000a/12-of:0000ffffffff000c/10",
5 + "type": "direct",
6 + "online": true,
7 + "linkWidth": 2,
8 + "src": "of:0000ffffffff000a",
9 + "srcPort": "12",
10 + "dst": "of:0000ffffffff000c",
11 + "dstPort": "10"
12 + }
13 +}
1 +{
2 + "event": "addLink",
3 + "payload": {
4 + "id": "of:0000ffffffff000c/10-of:0000ffffffff000a/12",
5 + "type": "direct",
6 + "online": true,
7 + "linkWidth": 2,
8 + "src": "of:0000ffffffff000c",
9 + "srcPort": "10",
10 + "dst": "of:0000ffffffff000a",
11 + "dstPort": "12"
12 + }
13 +}
1 +{
2 + "event": "addLink",
3 + "payload": {
4 + "id": "of:0000ffffffff000b/12-of:0000ffffffff000c/11",
5 + "type": "direct",
6 + "online": true,
7 + "linkWidth": 2,
8 + "src": "of:0000ffffffff000b",
9 + "srcPort": "12",
10 + "dst": "of:0000ffffffff000c",
11 + "dstPort": "11"
12 + }
13 +}
1 +{
2 + "event": "addLink",
3 + "payload": {
4 + "id": "of:0000ffffffff000c/11-of:0000ffffffff000b/12",
5 + "type": "direct",
6 + "online": true,
7 + "linkWidth": 2,
8 + "src": "of:0000ffffffff000c",
9 + "srcPort": "11",
10 + "dst": "of:0000ffffffff000b",
11 + "dstPort": "12"
12 + }
13 +}
1 +{
2 + "event": "addHost",
3 + "payload": {
4 + "id": "0E:2A:69:30:13:86/-1",
5 + "ingress": "0E:2A:69:30:13:86/-1/0-of:0000ffffffff000a/2",
6 + "egress": "of:0000ffffffff000a/2-0E:2A:69:30:13:86/-1/0",
7 + "cp": {
8 + "device": "of:0000ffffffff000a",
9 + "port": 2
10 + },
11 + "labels": [
12 + "192.168.222.10",
13 + "0E:2A:69:30:13:86"
14 + ],
15 + "metaUi": {
16 + "Xx": 800,
17 + "Xy": 180
18 + }
19 + }
20 +}
1 +{
2 + "event": "addHost",
3 + "payload": {
4 + "id": "0E:2A:69:30:13:87/-1",
5 + "ingress": "0E:2A:69:30:13:87/-1/0-of:0000ffffffff000b/2",
6 + "egress": "of:0000ffffffff000b/2-0E:2A:69:30:13:87/-1/0",
7 + "cp": {
8 + "device": "of:0000ffffffff000b",
9 + "port": 2
10 + },
11 + "labels": [
12 + "192.168.222.11",
13 + "0E:2A:69:30:13:87"
14 + ],
15 + "metaUi": {
16 + "Xx": 800,
17 + "Xy": 180
18 + }
19 + }
20 +}
1 +{
2 + "event": "addHost",
3 + "payload": {
4 + "id": "0E:2A:69:30:13:88/-1",
5 + "ingress": "0E:2A:69:30:13:88/-1/0-of:0000ffffffff000c/2",
6 + "egress": "of:0000ffffffff000c/2-0E:2A:69:30:13:88/-1/0",
7 + "cp": {
8 + "device": "of:0000ffffffff000c",
9 + "port": 2
10 + },
11 + "labels": [
12 + "192.168.222.12",
13 + "0E:2A:69:30:13:88"
14 + ],
15 + "metaUi": {
16 + "Xx": 800,
17 + "Xy": 180
18 + }
19 + }
20 +}
...@@ -4,7 +4,7 @@ ...@@ -4,7 +4,7 @@
4 ], 4 ],
5 "title": "Color-Tweaking Scenario for Mojo Palette", 5 "title": "Color-Tweaking Scenario for Mojo Palette",
6 "params": { 6 "params": {
7 - "lastAuto": 7 7 + "lastAuto": 19
8 }, 8 },
9 "description": [ 9 "description": [
10 "Press 'a' to load initial events.", 10 "Press 'a' to load initial events.",
......