홍길동 / onos

Go to a project
Toggle navigation Toggle navigation pinning
Simon Hunt
Committed by Gerrit Code Review
2d147f61 1 parent 8863c465

ONOS-4359: continued work on theming UI 

- topo view: map and instance panel re-theming.

Change-Id: I8e5b0eda61b78b7d54593d84efccb16c54c1611e
Inline Side-by-side
Showing 27 changed files with 339 additions and 312 deletions
...@@ -127,6 +127,11 @@ ...@@ -127,6 +127,11 @@
127 glyphDataSet = { 127 glyphDataSet = {
128 _viewbox: '0 0 110 110', 128 _viewbox: '0 0 110 110',
129 129
130 + uiAttached: 'M91.9,16.7H18.1A5.3,5.3,0,0,0,12.8,22V68' +
131 + 'a5.3,5.3,0,0,0,5.3,5.3H91.9A5.3,5.3,0,0,0,97.2,68V22' +
132 + 'A5.3,5.3,0,0,0,91.9,16.7ZM91.6,65.2H18.4V22.3H91.6V65.2Z' +
133 + 'M71.5,87.5h3.8v5.9h-40.6v-5.9h3.8v-1.7h5.4v-9.7h22.3v9.7h5.3v1.7z',
134 +
130 // Small dot 135 // Small dot
131 unknown: 'M35,40a5,5,0,0,1,5-5h30a5,5,0,0,1,5,5v30a5,5,0,0,1-5,5' + 136 unknown: 'M35,40a5,5,0,0,1,5-5h30a5,5,0,0,1,5,5v30a5,5,0,0,1-5,5' +
132 'h-30a5,5,0,0,1-5-5z', 137 'h-30a5,5,0,0,1-5-5z',
...@@ -525,11 +530,6 @@ ...@@ -525,11 +530,6 @@
525 badgeDataSet = { 530 badgeDataSet = {
526 _viewbox: '0 0 10 10', 531 _viewbox: '0 0 10 10',
527 532
528 - uiAttached: 'M2,2.5a.5,.5,0,0,1,.5-.5h5a.5,.5,0,0,1,.5,.5v3' +
529 - 'a.5,.5,0,0,1-.5,.5h-5a.5,.5,0,0,1-.5-.5zM2.5,2.8a.3,.3,0,0,1,' +
530 - '.3-.3h4.4a.3,.3,0,0,1,.3,.3v2.4a.3,.3,0,0,1-.3,.3h-4.4' +
531 - 'a.3,.3,0,0,1-.3-.3zM2,6.55h6l1,1.45h-8z',
532 -
533 checkMark: 'M8.6,3.4L4.4,7.7L1.4,4.7L2.5,3.6L4.4,5.5L7.5,2.3L8.6,3.4Z', 533 checkMark: 'M8.6,3.4L4.4,7.7L1.4,4.7L2.5,3.6L4.4,5.5L7.5,2.3L8.6,3.4Z',
534 534
535 xMark: 'M7.8,6.7L6.7,7.8,5,6.1,3.3,7.8,2.2,6.7,3.9,5,2.2,3.3,3.3,' + 535 xMark: 'M7.8,6.7L6.7,7.8,5,6.1,3.3,7.8,2.2,6.7,3.9,5,2.2,3.3,3.3,' +
......
...@@ -159,12 +159,13 @@ ...@@ -159,12 +159,13 @@
159 159
160 // --- Ordinal scales for 7 values. 160 // --- Ordinal scales for 7 values.
161 161
162 - // blue brown brick red sea green purple dark teal lime 162 + // Colors per Mojo-Design's color palette..
163 - var lightNorm = ['#3E5780', '#78533B', '#CB4D28', '#018D61', '#8A2979', '#006D73', '#56AF00'], 163 + // blue lt blue red lt red dk grey lt grey steel
164 - lightMute = ['#A8B8CC', '#CCB3A8', '#FFC2BD', '#96D6BF', '#D19FCE', '#8FCCCA', '#CAEAA4'], 164 + var lightNorm = ['#5b99d2', '#66cef6', '#d05a55', '#db7773', '#716b6b', '#aeada8', '#7e9aa8'],
165 - 165 + lightMute = ['#a8cceb', '#a8e9fd', '#f1a7a7', '#f8c9c9', '#b9b5b5', '#d7d6d4', '#bdcdd5'],
166 - darkNorm = ['#304860', '#664631', '#A8391B', '#00754B', '#77206D', '#005959', '#428700'], 166 + // TODO: dark theme
167 - darkMute = ['#304860', '#664631', '#A8391B', '#00754B', '#77206D', '#005959', '#428700']; 167 + darkNorm = ['#5b99d2', '#66cef6', '#d05a55', '#db7773', '#716b6b', '#aeada8', '#7e9aa8'],
168 + darkMute = ['#a8cceb', '#a8e9fd', '#f1a7a7', '#f8c9c9', '#b9b5b5', '#d7d6d4', '#bdcdd5'];
168 169
169 var colors= { 170 var colors= {
170 light: { 171 light: {
...@@ -215,7 +216,7 @@ ...@@ -215,7 +216,7 @@
215 dom.forEach(function (id, i) { 216 dom.forEach(function (id, i) {
216 var x = i * 20, 217 var x = i * 20,
217 y = k * 20, 218 y = k * 20,
218 - f = get(id, muted, theme); 219 + f = getColor(id, muted, theme);
219 g.append('circle').attr({ 220 g.append('circle').attr({
220 cx: x, 221 cx: x,
221 cy: y, 222 cy: y,
......
...@@ -110,7 +110,8 @@ ...@@ -110,7 +110,8 @@
110 } 110 }
111 111
112 function adjustWidth(btnWidth) { 112 function adjustWidth(btnWidth) {
113 - if (fs.noPxStyle(currentRow, 'width') >= maxWidth) { 113 + // 0.1 fudge for rounding error
114 + if (fs.noPxStyle(currentRow, 'width') + 0.1 >= maxWidth) {
114 tbWidth += btnWidth; 115 tbWidth += btnWidth;
115 maxWidth = tbWidth; 116 maxWidth = tbWidth;
116 } 117 }
......
...@@ -21,40 +21,25 @@ ...@@ -21,40 +21,25 @@
21 /* --- Base SVG Layer --- */ 21 /* --- Base SVG Layer --- */
22 22
23 .light #ov-topo svg { 23 .light #ov-topo svg {
24 - background-color: #fff; 24 + background-color: #f4f4f4;
25 -}
26 -.dark #ov-topo svg {
27 - background-color: #2b2b2b;
28 } 25 }
29 26
30 /* --- "No Devices" Layer --- */ 27 /* --- "No Devices" Layer --- */
31 28
32 .light #ov-topo svg .noDevsBird { 29 .light #ov-topo svg .noDevsBird {
33 - fill: #ecd; 30 + fill: #db7773;
34 -}
35 -.dark #ov-topo svg .noDevsBird {
36 - fill: #683434;
37 } 31 }
38 32
39 .light #ov-topo svg #topo-noDevsLayer text { 33 .light #ov-topo svg #topo-noDevsLayer text {
40 - fill: #dde; 34 + fill: #7e9aa8;
41 -}
42 -.dark #ov-topo svg #topo-noDevsLayer text {
43 - fill: #3b3b4f;
44 } 35 }
45 36
46 /* --- Topo Map --- */ 37 /* --- Topo Map --- */
47 38
48 -#ov-topo svg #topo-map {
49 - stroke-width: 2px;
50 - fill: transparent;
51 -}
52 -
53 .light #ov-topo svg #topo-map { 39 .light #ov-topo svg #topo-map {
54 - stroke: #ddd; 40 + stroke-width: 2px;
55 -} 41 + stroke: #f4f4f4;
56 -.dark #ov-topo svg #topo-map { 42 + fill: #e5e5e6;
57 - stroke: #444;
58 } 43 }
59 44
60 /* --- general topo-panel styling --- */ 45 /* --- general topo-panel styling --- */
...@@ -62,30 +47,18 @@ ...@@ -62,30 +47,18 @@
62 .light .topo-p svg .glyph { 47 .light .topo-p svg .glyph {
63 fill: #222; 48 fill: #222;
64 } 49 }
65 -.dark .topo-p svg .glyph {
66 - fill: #ddd;
67 -}
68 50
69 .light .topo-p svg .glyph.overlay { 51 .light .topo-p svg .glyph.overlay {
70 fill: #fff; 52 fill: #fff;
71 } 53 }
72 -.dark .topo-p svg .glyph.overlay {
73 - fill: #222;
74 -}
75 54
76 .light .topo-p h2 { 55 .light .topo-p h2 {
77 color: black; 56 color: black;
78 } 57 }
79 -.dark .topo-p h2 {
80 - color: #ddd;
81 -}
82 58
83 .light .topo-p h3 { 59 .light .topo-p h3 {
84 color: black; 60 color: black;
85 } 61 }
86 -.dark .topo-p h3 {
87 - color: #ddd;
88 -}
89 62
90 .topo-p td.label { 63 .topo-p td.label {
91 /* works for both light and dark themes ... */ 64 /* works for both light and dark themes ... */
...@@ -98,85 +71,70 @@ ...@@ -98,85 +71,70 @@
98 background-color: #ccc; 71 background-color: #ccc;
99 color: #ccc; 72 color: #ccc;
100 } 73 }
101 -.dark .topo-p hr {
102 - background-color: #888;
103 - color: #888;
104 -}
105 74
106 /* --- Topo Instance Panel --- */ 75 /* --- Topo Instance Panel --- */
107 76
108 #topo-p-instance svg rect { 77 #topo-p-instance svg rect {
109 - stroke-width: 3.5; 78 + stroke-width: 0;
110 } 79 }
111 #topo-p-instance .online svg rect { 80 #topo-p-instance .online svg rect {
112 opacity: 1; 81 opacity: 1;
113 } 82 }
114 .light #topo-p-instance svg rect { 83 .light #topo-p-instance svg rect {
115 - fill: #ccc; 84 + fill: #fbfbfb;
116 - stroke: #aaa;
117 } 85 }
86 +/* body of an instance */
118 .light #topo-p-instance .online svg rect { 87 .light #topo-p-instance .online svg rect {
119 - fill: #9cf; 88 + fill: #fbfbfb;
120 - stroke: #555;
121 -}
122 -.dark #topo-p-instance svg rect {
123 - fill: #666;
124 - stroke: #222;
125 -}
126 -.dark #topo-p-instance .online svg rect {
127 - fill: #9cf;
128 - stroke: #999;
129 } 89 }
130 90
131 91
132 #topo-p-instance svg .glyph { 92 #topo-p-instance svg .glyph {
133 - fill: #888; 93 + fill: #fff;
134 - fill-rule: evenodd;
135 } 94 }
136 #topo-p-instance .online svg .glyph { 95 #topo-p-instance .online svg .glyph {
137 - fill: #000; 96 + fill: #fff;
138 } 97 }
139 98
140 99
100 +/* offline */
141 #topo-p-instance svg .badgeIcon { 101 #topo-p-instance svg .badgeIcon {
142 - fill-rule: evenodd;
143 opacity: 0.4; 102 opacity: 0.4;
144 } 103 }
145 .light #topo-p-instance svg .badgeIcon { 104 .light #topo-p-instance svg .badgeIcon {
146 - fill: #777; 105 + fill: #939598;
147 -}
148 -.dark #topo-p-instance svg .badgeIcon {
149 - fill: #555;
150 } 106 }
151 107
108 +/* online */
152 #topo-p-instance .online svg .badgeIcon { 109 #topo-p-instance .online svg .badgeIcon {
153 opacity: 1.0; 110 opacity: 1.0;
154 } 111 }
155 .light #topo-p-instance .online svg .badgeIcon { 112 .light #topo-p-instance .online svg .badgeIcon {
156 - fill: #fff; 113 + fill: #939598;
157 } 114 }
158 -.dark #topo-p-instance .online svg .badgeIcon { 115 +.light #topo-p-instance .online svg .badgeIcon.bird {
159 - fill: #fff; 116 + fill: #ffffff;
117 +}
118 +
119 +#topo-p-instance svg .readyBadge {
120 + visibility: hidden;
121 +}
122 +#topo-p-instance .ready svg .readyBadge {
123 + visibility: visible;
160 } 124 }
161 125
162 #topo-p-instance svg text { 126 #topo-p-instance svg text {
163 - text-anchor: middle; 127 + text-anchor: left;
164 - opacity: 0.3; 128 + opacity: 0.5;
165 } 129 }
166 #topo-p-instance .online svg text { 130 #topo-p-instance .online svg text {
167 opacity: 1.0; 131 opacity: 1.0;
168 } 132 }
169 .light #topo-p-instance svg text { 133 .light #topo-p-instance svg text {
170 - fill: #444; 134 + fill: #3c3a3a;
171 } 135 }
172 .light #topo-p-instance .online svg text { 136 .light #topo-p-instance .online svg text {
173 - fill: #eee; 137 + fill: #3c3a3a;
174 -}
175 -.dark #topo-p-instance svg text {
176 - fill: #aaa;
177 -}
178 -.dark #topo-p-instance .online svg text {
179 - fill: #ccc;
180 } 138 }
181 139
182 #topo-p-instance .onosInst.mastership { 140 #topo-p-instance .onosInst.mastership {
...@@ -188,15 +146,10 @@ ...@@ -188,15 +146,10 @@
188 .light #topo-p-instance .onosInst.mastership.affinity svg rect { 146 .light #topo-p-instance .onosInst.mastership.affinity svg rect {
189 filter: url(#blue-glow); 147 filter: url(#blue-glow);
190 } 148 }
191 -.dark #topo-p-instance .onosInst.mastership.affinity svg rect { 149 +
192 - filter: url(#yellow-glow);
193 -}
194 .light.firefox #topo-p-instance .onosInst.mastership.affinity svg rect { 150 .light.firefox #topo-p-instance .onosInst.mastership.affinity svg rect {
195 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"); 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");
196 } 152 }
197 -.dark.firefox #topo-p-instance .onosInst.mastership.affinity svg rect {
198 - 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");
199 -}
200 153
201 /* --- Topo Nodes --- */ 154 /* --- Topo Nodes --- */
202 155
...@@ -213,19 +166,19 @@ ...@@ -213,19 +166,19 @@
213 fill: #f90; 166 fill: #f90;
214 filter: url(#blue-glow); 167 filter: url(#blue-glow);
215 } 168 }
216 -.dark #ov-topo svg .node.selected rect, 169 +/*.dark #ov-topo svg .node.selected rect,*/
217 -.dark #ov-topo svg .node.selected circle { 170 +/*.dark #ov-topo svg .node.selected circle {*/
218 - fill: #f90; 171 + /*fill: #f90;*/
219 - filter: url(#yellow-glow); 172 + /*filter: url(#yellow-glow);*/
220 -} 173 +/*}*/
221 .light.firefox #ov-topo svg .node.selected rect, 174 .light.firefox #ov-topo svg .node.selected rect,
222 .light.firefox #ov-topo svg .node.selected circle { 175 .light.firefox #ov-topo svg .node.selected circle {
223 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"); 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");
224 } 177 }
225 -.dark.firefox #ov-topo svg .node.selected rect, 178 +/*.dark.firefox #ov-topo svg .node.selected rect,*/
226 -.dark.firefox #ov-topo svg .node.selected circle { 179 +/*.dark.firefox #ov-topo svg .node.selected circle {*/
227 - 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"); 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");*/
228 -} 181 +/*}*/
229 182
230 /* Device Nodes */ 183 /* Device Nodes */
231 184
...@@ -239,17 +192,11 @@ ...@@ -239,17 +192,11 @@
239 .light #ov-topo svg .node.device.fixed rect { 192 .light #ov-topo svg .node.device.fixed rect {
240 stroke: #aaa; 193 stroke: #aaa;
241 } 194 }
242 -.dark #ov-topo svg .node.device.fixed rect {
243 - stroke: #999;
244 -}
245 195
246 /* note: device is offline without the 'online' class */ 196 /* note: device is offline without the 'online' class */
247 .light #ov-topo svg .node.device { 197 .light #ov-topo svg .node.device {
248 fill: #777; 198 fill: #777;
249 } 199 }
250 -.dark #ov-topo svg .node.device {
251 - fill: #555;
252 -}
253 200
254 .light #ov-topo svg .node.device rect { 201 .light #ov-topo svg .node.device rect {
255 stroke: #666; 202 stroke: #666;
...@@ -261,14 +208,10 @@ ...@@ -261,14 +208,10 @@
261 .light #ov-topo svg .node.device.online { 208 .light #ov-topo svg .node.device.online {
262 fill: #6e7fa3; 209 fill: #6e7fa3;
263 } 210 }
264 -.dark #ov-topo svg .node.device.online {
265 - fill: #4E5C7F;
266 -}
267 211
268 /* note: device is offline without the 'online' class */ 212 /* note: device is offline without the 'online' class */
269 #ov-topo svg .node.device text { 213 #ov-topo svg .node.device text {
270 fill: #bbb; 214 fill: #bbb;
271 - font: 10pt sans-serif;
272 } 215 }
273 216
274 #ov-topo svg .node.device.online text { 217 #ov-topo svg .node.device.online text {
...@@ -340,25 +283,15 @@ ...@@ -340,25 +283,15 @@
340 .light #ov-topo svg .node.host text { 283 .light #ov-topo svg .node.host text {
341 fill: #846; 284 fill: #846;
342 } 285 }
343 -.dark #ov-topo svg .node.host text {
344 - fill: #BB809D;
345 -}
346 286
347 .light svg .node.host circle { 287 .light svg .node.host circle {
348 stroke: #000; 288 stroke: #000;
349 fill: #edb; 289 fill: #edb;
350 } 290 }
351 -.dark svg .node.host circle {
352 - stroke: #eee;
353 - fill: #B2A180;
354 -}
355 291
356 .light svg .node.host .svgIcon { 292 .light svg .node.host .svgIcon {
357 fill: #444; 293 fill: #444;
358 } 294 }
359 -.dark svg .node.host .svgIcon {
360 - fill: #222;
361 -}
362 295
363 /* --- Topo Links --- */ 296 /* --- Topo Links --- */
364 297
...@@ -374,25 +307,25 @@ ...@@ -374,25 +307,25 @@
374 .light #ov-topo svg .link.enhanced { 307 .light #ov-topo svg .link.enhanced {
375 filter: url(#blue-glow); 308 filter: url(#blue-glow);
376 } 309 }
377 -.dark #ov-topo svg .link.selected, 310 +/*.dark #ov-topo svg .link.selected,*/
378 -.dark #ov-topo svg .link.enhanced { 311 +/*.dark #ov-topo svg .link.enhanced {*/
379 - filter: url(#yellow-glow); 312 + /*filter: url(#yellow-glow);*/
380 -} 313 +/*}*/
381 .light.firefox #ov-topo svg .link.selected, 314 .light.firefox #ov-topo svg .link.selected,
382 .light.firefox #ov-topo svg .link.enhanced { 315 .light.firefox #ov-topo svg .link.enhanced {
383 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"); 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");
384 } 317 }
385 -.dark.firefox #ov-topo svg .link.selected, 318 +/*.dark.firefox #ov-topo svg .link.selected,*/
386 -.dark.firefox #ov-topo svg .link.enhanced { 319 +/*.dark.firefox #ov-topo svg .link.enhanced {*/
387 - 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"); 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");*/
388 321
389 -} 322 +/*}*/
390 323
391 #ov-topo svg .link.inactive { 324 #ov-topo svg .link.inactive {
392 opacity: .5; 325 opacity: .5;
393 stroke-dasharray: 8 4; 326 stroke-dasharray: 8 4;
394 } 327 }
395 -/* FIXME: Review for not-permitted links */ 328 +/* TODO: Review for not-permitted links */
396 #ov-topo svg .link.not-permitted { 329 #ov-topo svg .link.not-permitted {
397 stroke: rgb(255,0,0); 330 stroke: rgb(255,0,0);
398 stroke-width: 5.0; 331 stroke-width: 5.0;
...@@ -405,9 +338,6 @@ ...@@ -405,9 +338,6 @@
405 .light #ov-topo svg .link.secondary { 338 .light #ov-topo svg .link.secondary {
406 stroke: rgba(0,153,51,0.5); 339 stroke: rgba(0,153,51,0.5);
407 } 340 }
408 -.dark #ov-topo svg .link.secondary {
409 - stroke: rgba(121,231,158,0.5);
410 -}
411 341
412 /* Port traffic color visualization for Kbps, Mbps, and Gbps */ 342 /* Port traffic color visualization for Kbps, Mbps, and Gbps */
413 343
...@@ -415,37 +345,21 @@ ...@@ -415,37 +345,21 @@
415 stroke: rgb(0,153,51); 345 stroke: rgb(0,153,51);
416 stroke-width: 5.0; 346 stroke-width: 5.0;
417 } 347 }
418 -.dark #ov-topo svg .link.secondary.port-traffic-Kbps {
419 - stroke: rgb(98, 153, 118);
420 - stroke-width: 5.0;
421 -}
422 348
423 .light #ov-topo svg .link.secondary.port-traffic-Mbps { 349 .light #ov-topo svg .link.secondary.port-traffic-Mbps {
424 stroke: rgb(128,145,27); 350 stroke: rgb(128,145,27);
425 stroke-width: 6.5; 351 stroke-width: 6.5;
426 } 352 }
427 -.dark #ov-topo svg .link.secondary.port-traffic-Mbps {
428 - stroke: rgb(91, 109, 54);
429 - stroke-width: 6.5;
430 -}
431 353
432 .light #ov-topo svg .link.secondary.port-traffic-Gbps { 354 .light #ov-topo svg .link.secondary.port-traffic-Gbps {
433 stroke: rgb(255, 137, 3); 355 stroke: rgb(255, 137, 3);
434 stroke-width: 8.0; 356 stroke-width: 8.0;
435 } 357 }
436 -.dark #ov-topo svg .link.secondary.port-traffic-Gbps {
437 - stroke: rgb(174, 119, 55);
438 - stroke-width: 8.0;
439 -}
440 358
441 .light #ov-topo svg .link.secondary.port-traffic-Gbps-choked { 359 .light #ov-topo svg .link.secondary.port-traffic-Gbps-choked {
442 stroke: rgb(183, 30, 21); 360 stroke: rgb(183, 30, 21);
443 stroke-width: 8.0; 361 stroke-width: 8.0;
444 } 362 }
445 -.dark #ov-topo svg .link.secondary.port-traffic-Gbps-choked {
446 - stroke: rgb(127, 40, 39);
447 - stroke-width: 8.0;
448 -}
449 363
450 364
451 365
...@@ -470,9 +384,6 @@ ...@@ -470,9 +384,6 @@
470 .light #ov-topo svg .link.primary { 384 .light #ov-topo svg .link.primary {
471 stroke: #ffA300; 385 stroke: #ffA300;
472 } 386 }
473 -.dark #ov-topo svg .link.primary {
474 - stroke: #D58E0F;
475 -}
476 387
477 #ov-topo svg .link.secondary.optical { 388 #ov-topo svg .link.secondary.optical {
478 stroke-width: 4px; 389 stroke-width: 4px;
...@@ -480,9 +391,6 @@ ...@@ -480,9 +391,6 @@
480 .light #ov-topo svg .link.secondary.optical { 391 .light #ov-topo svg .link.secondary.optical {
481 stroke: rgba(128,64,255,0.5); 392 stroke: rgba(128,64,255,0.5);
482 } 393 }
483 -.dark #ov-topo svg .link.secondary.optical {
484 - stroke: rgba(164,139,215,0.5);
485 -}
486 394
487 #ov-topo svg .link.primary.optical { 395 #ov-topo svg .link.primary.optical {
488 stroke-width: 6px; 396 stroke-width: 6px;
...@@ -490,9 +398,6 @@ ...@@ -490,9 +398,6 @@
490 .light #ov-topo svg .link.primary.optical { 398 .light #ov-topo svg .link.primary.optical {
491 stroke: #74f; 399 stroke: #74f;
492 } 400 }
493 -.dark #ov-topo svg .link.primary.optical {
494 - stroke: #7352CD;
495 -}
496 401
497 /* Link Labels */ 402 /* Link Labels */
498 #ov-topo svg .linkLabel rect { 403 #ov-topo svg .linkLabel rect {
...@@ -501,16 +406,10 @@ ...@@ -501,16 +406,10 @@
501 .light #ov-topo svg .linkLabel rect { 406 .light #ov-topo svg .linkLabel rect {
502 fill: #eee; 407 fill: #eee;
503 } 408 }
504 -.dark #ov-topo svg .linkLabel rect {
505 - fill: #555;
506 -}
507 409
508 .light #ov-topo svg .linkLabel text { 410 .light #ov-topo svg .linkLabel text {
509 fill: #444; 411 fill: #444;
510 } 412 }
511 -.dark #ov-topo svg .linkLabel text {
512 - fill: #eee;
513 -}
514 413
515 /* Port Labels */ 414 /* Port Labels */
516 415
...@@ -520,16 +419,10 @@ ...@@ -520,16 +419,10 @@
520 .light #ov-topo svg .portLabel rect { 419 .light #ov-topo svg .portLabel rect {
521 fill: #eee; 420 fill: #eee;
522 } 421 }
523 -.dark #ov-topo svg .portLabel rect {
524 - fill: #222;
525 -}
526 422
527 .light #ov-topo svg .portLabel text { 423 .light #ov-topo svg .portLabel text {
528 fill: #444; 424 fill: #444;
529 } 425 }
530 -.dark #ov-topo svg .portLabel text {
531 - fill: #eee;
532 -}
533 426
534 /* Number of Links Labels */ 427 /* Number of Links Labels */
535 428
...@@ -537,9 +430,6 @@ ...@@ -537,9 +430,6 @@
537 .light #ov-topo text.numLinkText { 430 .light #ov-topo text.numLinkText {
538 fill: #444; 431 fill: #444;
539 } 432 }
540 -.dark #ov-topo text.numLinkText {
541 - fill: #eee;
542 -}
543 433
544 /* ------------------------------------------------- */ 434 /* ------------------------------------------------- */
545 /* Sprite Layer */ 435 /* Sprite Layer */
...@@ -548,60 +438,31 @@ ...@@ -548,60 +438,31 @@
548 stroke: #fda; 438 stroke: #fda;
549 fill: none; 439 fill: none;
550 } 440 }
551 -.dark #ov-topo svg #topo-sprites .gold1 use {
552 - stroke: #541;
553 - fill: none;
554 -}
555 .light #ov-topo svg #topo-sprites .gold1 text { 441 .light #ov-topo svg #topo-sprites .gold1 text {
556 fill: #eda; 442 fill: #eda;
557 } 443 }
558 -.dark #ov-topo svg #topo-sprites .gold1 text {
559 - fill: #543;
560 -}
561 444
562 .light #ov-topo svg #topo-sprites .blue1 use { 445 .light #ov-topo svg #topo-sprites .blue1 use {
563 stroke: #bbd; 446 stroke: #bbd;
564 fill: none; 447 fill: none;
565 } 448 }
566 -.dark #ov-topo svg #topo-sprites .blue1 use {
567 - stroke: #445;
568 - fill: none;
569 -}
570 .light #ov-topo svg #topo-sprites .blue1 text { 449 .light #ov-topo svg #topo-sprites .blue1 text {
571 fill: #cce; 450 fill: #cce;
572 } 451 }
573 -.dark #ov-topo svg #topo-sprites .blue1 text {
574 - fill: #446;
575 -}
576 452
577 .light #ov-topo svg #topo-sprites .gray1 use { 453 .light #ov-topo svg #topo-sprites .gray1 use {
578 stroke: #ccc; 454 stroke: #ccc;
579 fill: none; 455 fill: none;
580 } 456 }
581 -.dark #ov-topo svg #topo-sprites .gray1 use {
582 - stroke: #333;
583 - fill: none;
584 -}
585 .light #ov-topo svg #topo-sprites .gray1 text { 457 .light #ov-topo svg #topo-sprites .gray1 text {
586 fill: #ddd; 458 fill: #ddd;
587 } 459 }
588 -.dark #ov-topo svg #topo-sprites .gray1 text {
589 - fill: #444;
590 -}
591 460
592 /* fills */ 461 /* fills */
593 .light #ov-topo svg #topo-sprites use.fill-gray2 { 462 .light #ov-topo svg #topo-sprites use.fill-gray2 {
594 fill: #eee; 463 fill: #eee;
595 } 464 }
596 -.dark #ov-topo svg #topo-sprites use.fill-gray2 {
597 - fill: #444;
598 -}
599 465
600 .light #ov-topo svg #topo-sprites use.fill-blue2 { 466 .light #ov-topo svg #topo-sprites use.fill-blue2 {
601 fill: #bce; 467 fill: #bce;
602 } 468 }
603 -.dark #ov-topo svg #topo-sprites use.fill-blue2 {
604 - fill: #447;
605 -}
606 -
607 -/* -- MISC -- */
......
...@@ -127,7 +127,8 @@ html[data-platform='iPad'] #topo-p-detail { ...@@ -127,7 +127,8 @@ html[data-platform='iPad'] #topo-p-detail {
127 /* --- Topo Instance Panel --- */ 127 /* --- Topo Instance Panel --- */
128 128
129 #topo-p-instance { 129 #topo-p-instance {
130 - height: 100px; 130 + height: 85px;
131 + padding: 10px;
131 } 132 }
132 133
133 #topo-p-instance div.onosInst { 134 #topo-p-instance div.onosInst {
...@@ -140,15 +141,20 @@ html[data-platform='iPad'] #topo-p-detail { ...@@ -140,15 +141,20 @@ html[data-platform='iPad'] #topo-p-detail {
140 #topo-p-instance svg text.instTitle { 141 #topo-p-instance svg text.instTitle {
141 font-size: 11pt; 142 font-size: 11pt;
142 font-weight: bold; 143 font-weight: bold;
144 + font-variant: small-caps;
145 + text-transform: uppercase;
143 } 146 }
144 #topo-p-instance svg text.instLabel { 147 #topo-p-instance svg text.instLabel {
145 - font-size: 9pt; 148 + font-size: 10pt;
146 - font-style: italic;
147 } 149 }
148 150
149 151
150 /* --- Toolbar --- */ 152 /* --- Toolbar --- */
151 153
154 +#toolbar-topo-tbar {
155 + padding: 6px;
156 +}
157 +
152 #toolbar-topo-tbar .tbar-row.right { 158 #toolbar-topo-tbar .tbar-row.right {
153 width: 100%; 159 width: 100%;
154 } 160 }
...@@ -228,10 +234,6 @@ html[data-platform='iPad'] #topo-p-detail { ...@@ -228,10 +234,6 @@ html[data-platform='iPad'] #topo-p-detail {
228 234
229 /* -- MISC -- */ 235 /* -- MISC -- */
230 236
231 -.notReady .readyBadge {
232 - visibility: hidden;
233 -}
234 -
235 .map-list { 237 .map-list {
236 padding: 10px; 238 padding: 10px;
237 } 239 }
......
...@@ -67,6 +67,9 @@ ...@@ -67,6 +67,9 @@
67 67
68 E: [equalizeMasters, 'Equalize mastership roles'], 68 E: [equalizeMasters, 'Equalize mastership roles'],
69 69
70 + //-- instance color palette debug
71 + // 9: function () { sus.cat7().testCard(svg); },
72 +
70 // topology overlay selections 73 // topology overlay selections
71 F1: function () { ttbs.fnkey(0); }, 74 F1: function () { ttbs.fnkey(0); },
72 F2: function () { ttbs.fnkey(1); }, 75 F2: function () { ttbs.fnkey(1); },
......
...@@ -32,20 +32,7 @@ ...@@ -32,20 +32,7 @@
32 */ 32 */
33 33
34 // configuration 34 // configuration
35 - var instCfg = { 35 + var showLogicErrors = true,
36 - rectPad: 8,
37 - nodeOx: 9,
38 - nodeOy: 9,
39 - nodeDim: 40,
40 - birdOx: 19,
41 - birdOy: 21,
42 - birdDim: 21,
43 - uiDy: 45,
44 - titleDy: 30,
45 - textYOff: 20,
46 - textYSpc: 15
47 - },
48 - showLogicErrors = true,
49 idIns = 'topo-p-instance', 36 idIns = 'topo-p-instance',
50 instOpts = { 37 instOpts = {
51 edge: 'left', 38 edge: 'left',
...@@ -102,14 +89,6 @@ ...@@ -102,14 +89,6 @@
102 89
103 // ========================== 90 // ==========================
104 91
105 - function computeDim(self) {
106 - var css = window.getComputedStyle(self);
107 - return {
108 - w: sus.stripPx(css.width),
109 - h: sus.stripPx(css.height)
110 - };
111 - }
112 -
113 function clickInst(d) { 92 function clickInst(d) {
114 var el = d3.select(this), 93 var el = d3.select(this),
115 aff = el.classed('affinity'); 94 aff = el.classed('affinity');
...@@ -139,28 +118,13 @@ ...@@ -139,28 +118,13 @@
139 oiShowMaster = false; 118 oiShowMaster = false;
140 } 119 }
141 120
142 - function instRectAttr(dim) {
143 - var pad = instCfg.rectPad;
144 - return {
145 - x: pad,
146 - y: pad,
147 - width: dim.w - pad*2,
148 - height: dim.h - pad*2,
149 - rx: 6
150 - };
151 - }
152 -
153 - function viewBox(dim) {
154 - return '0 0 ' + dim.w + ' ' + dim.h;
155 - }
156 -
157 function attachUiBadge(svg) { 121 function attachUiBadge(svg) {
158 - gs.addGlyph(svg, 'uiAttached', 24, true, [28, instCfg.uiDy]) 122 + gs.addGlyph(svg, 'uiAttached', 24, true, [14, 54])
159 .classed('badgeIcon uiBadge', true); 123 .classed('badgeIcon uiBadge', true);
160 } 124 }
161 125
162 function attachReadyBadge(svg) { 126 function attachReadyBadge(svg) {
163 - gs.addGlyph(svg, 'checkMark', 16, true, [12, instCfg.uiDy + 4]) 127 + gs.addGlyph(svg, 'checkMark', 16, true, [18, 40])
164 .classed('badgeIcon readyBadge', true); 128 .classed('badgeIcon readyBadge', true);
165 } 129 }
166 130
...@@ -171,24 +135,50 @@ ...@@ -171,24 +135,50 @@
171 // ============================== 135 // ==============================
172 136
173 function updateInstances() { 137 function updateInstances() {
138 + var rox = 5,
139 + roy = 5,
140 + rw = 160,
141 + rhh = 30,
142 + rbh = 45,
143 + tx = 48,
144 + instSvg = {
145 + width: 170,
146 + height: 85,
147 + viewBox: '0 0 170 85'
148 + },
149 + headRect = {
150 + x: rox,
151 + y: roy,
152 + width: rw,
153 + height: rhh
154 + },
155 + bodyRect = {
156 + x: rox,
157 + y: roy + rhh,
158 + width: rw,
159 + height: rbh
160 + },
161 + titleAttr = {
162 + class: 'instTitle',
163 + x: tx,
164 + y: 27
165 + };
166 +
174 var onoses = oiBox.el().selectAll('.onosInst') 167 var onoses = oiBox.el().selectAll('.onosInst')
175 - .data(onosOrder, function (d) { return d.id; }), 168 + .data(onosOrder, function (d) { return d.id; });
176 - instDim = {w:0,h:0},
177 - c = instCfg;
178 169
179 function nSw(n) { 170 function nSw(n) {
180 - return '# Switches: ' + n; 171 + return 'Switches: ' + n;
181 } 172 }
182 173
183 // operate on existing onos instances if necessary 174 // operate on existing onos instances if necessary
184 onoses.each(function (d) { 175 onoses.each(function (d) {
185 var el = d3.select(this), 176 var el = d3.select(this),
186 svg = el.select('svg'); 177 svg = el.select('svg');
187 - instDim = computeDim(this);
188 178
189 // update online state 179 // update online state
190 el.classed('online', d.online); 180 el.classed('online', d.online);
191 - el.classed('notReady', !d.ready); 181 + el.classed('ready', d.ready);
192 182
193 // update ui-attached state 183 // update ui-attached state
194 svg.select('use.uiBadge').remove(); 184 svg.select('use.uiBadge').remove();
...@@ -196,8 +186,6 @@ ...@@ -196,8 +186,6 @@
196 attachUiBadge(svg); 186 attachUiBadge(svg);
197 } 187 }
198 188
199 - attachReadyBadge(svg, d.ready);
200 -
201 function updAttr(id, value) { 189 function updAttr(id, value) {
202 svg.select('text.instLabel.'+id).text(value); 190 svg.select('text.instLabel.'+id).text(value);
203 } 191 }
...@@ -210,59 +198,39 @@ ...@@ -210,59 +198,39 @@
210 // operate on new onos instances 198 // operate on new onos instances
211 var entering = onoses.enter() 199 var entering = onoses.enter()
212 .append('div') 200 .append('div')
213 - .attr('class', 'onosInst') 201 + .classed('onosInst', true)
214 .classed('online', function (d) { return d.online; }) 202 .classed('online', function (d) { return d.online; })
215 - .classed('notReady', function (d) { return !d.ready; }) 203 + .classed('ready', function (d) { return d.ready; })
216 .on('click', clickInst); 204 .on('click', clickInst);
217 205
218 entering.each(function (d) { 206 entering.each(function (d) {
219 var el = d3.select(this), 207 var el = d3.select(this),
220 - rectAttr, 208 + svg = el.append('svg').attr(instSvg);
221 - svg;
222 - instDim = computeDim(this);
223 - rectAttr = instRectAttr(instDim);
224 209
225 - svg = el.append('svg').attr({ 210 + svg.append('rect').attr(headRect);
226 - width: instDim.w, 211 + svg.append('rect').attr(bodyRect);
227 - height: instDim.h,
228 - viewBox: viewBox(instDim)
229 - });
230 212
231 - svg.append('rect').attr(rectAttr); 213 + gs.addGlyph(svg, 'bird', 20, false, [15, 10])
214 + .classed('badgeIcon bird', true);
232 215
233 - gs.addGlyph(svg, 'bird', 28, true, [14, 14]) 216 + attachReadyBadge(svg);
234 - .classed('badgeIcon', true);
235 217
236 if (d.uiAttached) { 218 if (d.uiAttached) {
237 attachUiBadge(svg); 219 attachUiBadge(svg);
238 } 220 }
239 221
240 - attachReadyBadge(svg);
241 -
242 - var left = c.nodeOx + c.nodeDim,
243 - len = rectAttr.width - left,
244 - hlen = len / 2,
245 - midline = hlen + left;
246 -
247 - // title
248 svg.append('text') 222 svg.append('text')
249 - .attr({ 223 + .attr(titleAttr)
250 - class: 'instTitle',
251 - x: midline,
252 - y: c.titleDy
253 - })
254 .text(d.id); 224 .text(d.id);
255 225
256 - // a couple of attributes 226 + var ty = 55;
257 - var ty = c.titleDy + c.textYOff;
258 -
259 function addAttr(id, label) { 227 function addAttr(id, label) {
260 svg.append('text').attr({ 228 svg.append('text').attr({
261 class: 'instLabel ' + id, 229 class: 'instLabel ' + id,
262 - x: midline, 230 + x: tx,
263 y: ty 231 y: ty
264 }).text(label); 232 }).text(label);
265 - ty += c.textYSpc; 233 + ty += 18;
266 } 234 }
267 235
268 addAttr('ip', d.ip); 236 addAttr('ip', d.ip);
...@@ -279,8 +247,8 @@ ...@@ -279,8 +247,8 @@
279 }); 247 });
280 248
281 // adjust the panel size appropriately... 249 // adjust the panel size appropriately...
282 - oiBox.width(instDim.w * onosOrder.length); 250 + oiBox.width(instSvg.width * onosOrder.length);
283 - oiBox.height(instDim.h); 251 + oiBox.height(instSvg.height);
284 252
285 // remove any outgoing instances 253 // remove any outgoing instances
286 onoses.exit().remove(); 254 onoses.exit().remove();
......
...@@ -89,7 +89,8 @@ describe('factory: fw/svg/glyph.js', function() { ...@@ -89,7 +89,8 @@ describe('factory: fw/svg/glyph.js', function() {
89 diamond: 'M.2,.5' 89 diamond: 'M.2,.5'
90 }, 90 },
91 glyphIds = [ 91 glyphIds = [
92 - 'unknown', 'node', 'switch', 'roadm', 'endstation', 'router', 92 + 'unknown', 'uiAttached',
93 + 'node', 'switch', 'roadm', 'endstation', 'router',
93 'bgpSpeaker', 'chain', 'crown', 'lock', 'topo', 'refresh', 94 'bgpSpeaker', 'chain', 'crown', 'lock', 'topo', 'refresh',
94 'garbage', 95 'garbage',
95 'flowTable', 'portTable', 'groupTable', 96 'flowTable', 'portTable', 'groupTable',
...@@ -98,7 +99,7 @@ describe('factory: fw/svg/glyph.js', function() { ...@@ -98,7 +99,7 @@ describe('factory: fw/svg/glyph.js', function() {
98 'prevIntent', 'intentTraffic', 'allTraffic', 'flows', 'eqMaster' 99 'prevIntent', 'intentTraffic', 'allTraffic', 'flows', 'eqMaster'
99 ], 100 ],
100 badgeIds = [ 101 badgeIds = [
101 - 'uiAttached', 'checkMark', 'xMark', 'triangleUp', 'triangleDown', 102 + 'checkMark', 'xMark', 'triangleUp', 'triangleDown',
102 'plus', 'minus', 'play', 'stop' 103 'plus', 'minus', 'play', 'stop'
103 ], 104 ],
104 spriteIds = [ 105 spriteIds = [
......
...@@ -153,39 +153,40 @@ describe('factory: fw/svg/svgUtil.js', function() { ...@@ -153,39 +153,40 @@ describe('factory: fw/svg/svgUtil.js', function() {
153 ])).toBeTruthy(); 153 ])).toBeTruthy();
154 }); 154 });
155 155
156 - it('should provide a certain shade of blue', function () { 156 + it('should provide blue', function () {
157 - expect(sus.cat7().getColor('foo', false, 'light')).toEqual('#3E5780'); 157 + expect(sus.cat7().getColor('foo', false, 'light')).toEqual('#5b99d2');
158 }); 158 });
159 159
160 - it('should not matter what the ID really is for shade of blue', function () { 160 + it('should provide light blue', function () {
161 - expect(sus.cat7().getColor('bar', false, 'light')).toEqual('#78533B'); 161 + expect(sus.cat7().getColor('bar', false, 'light')).toEqual('#66cef6');
162 }); 162 });
163 163
164 - it('should provide different shade of blue for muted', function () { 164 + it('should provide paler shade of blue for muted', function () {
165 - expect(sus.cat7().getColor('foo', true, 'light')).toEqual('#A8B8CC'); 165 + expect(sus.cat7().getColor('foo', true, 'light')).toEqual('#a8cceb');
166 }); 166 });
167 167
168 - 168 + // TODO: dark theme required
169 - it('should provide an alternate (dark) shade of blue', function () { 169 + xit('should provide an alternate (dark) shade of blue', function () {
170 - expect(sus.cat7().getColor('foo', false, 'dark')).toEqual('#304860'); 170 + expect(sus.cat7().getColor('foo', false, 'dark')).toEqual('#5b99d2');
171 }); 171 });
172 172
173 - it('should provide an alternate (dark) shade of blue for muted', function () { 173 + // TODO: dark theme required
174 - expect(sus.cat7().getColor('foo', true, 'dark')).toEqual('#304860'); 174 + xit('should provide an alternate (dark) shade of blue for muted', function () {
175 + expect(sus.cat7().getColor('foo', true, 'dark')).toEqual('#a8cceb');
175 }); 176 });
176 177
177 it('should iterate across the colors', function () { 178 it('should iterate across the colors', function () {
178 - expect(sus.cat7().getColor('foo', false, 'light')).toEqual('#3E5780'); 179 + expect(sus.cat7().getColor('foo', false, 'light')).toEqual('#5b99d2');
179 - expect(sus.cat7().getColor('bar', false, 'light')).toEqual('#78533B'); 180 + expect(sus.cat7().getColor('bar', false, 'light')).toEqual('#66cef6');
180 - expect(sus.cat7().getColor('baz', false, 'light')).toEqual('#CB4D28'); 181 + expect(sus.cat7().getColor('baz', false, 'light')).toEqual('#d05a55');
181 - expect(sus.cat7().getColor('goo', false, 'light')).toEqual('#018D61'); 182 + expect(sus.cat7().getColor('goo', false, 'light')).toEqual('#db7773');
182 - expect(sus.cat7().getColor('zoo', false, 'light')).toEqual('#8A2979'); 183 + expect(sus.cat7().getColor('zoo', false, 'light')).toEqual('#716b6b');
183 - expect(sus.cat7().getColor('pip', false, 'light')).toEqual('#006D73'); 184 + expect(sus.cat7().getColor('pip', false, 'light')).toEqual('#aeada8');
184 - expect(sus.cat7().getColor('sdh', false, 'light')).toEqual('#56AF00'); 185 + expect(sus.cat7().getColor('sdh', false, 'light')).toEqual('#7e9aa8');
185 // and cycle back to the first color for item #8 186 // and cycle back to the first color for item #8
186 - expect(sus.cat7().getColor('bri', false, 'light')).toEqual('#3E5780'); 187 + expect(sus.cat7().getColor('bri', false, 'light')).toEqual('#5b99d2');
187 // and return the same color for the same ID 188 // and return the same color for the same ID
188 - expect(sus.cat7().getColor('zoo', false, 'light')).toEqual('#8A2979'); 189 + expect(sus.cat7().getColor('zoo', false, 'light')).toEqual('#716b6b');
189 }); 190 });
190 191
191 // === translate(), scale(), skewX(), rotate() 192 // === translate(), scale(), skewX(), rotate()
......
...@@ -7,7 +7,7 @@ ...@@ -7,7 +7,7 @@
7 "lastAuto": 29 7 "lastAuto": 29
8 }, 8 },
9 "description": [ 9 "description": [
10 - "Press '=' to load initial events.", 10 + "Press 'a' to load initial events.",
11 - "Press '-' to fire further events." 11 + "Press 'n' to fire further events."
12 ] 12 ]
13 } 13 }
......
1 +{
2 + "event": "updateInstance",
3 + "payload": {
4 + "id": "222.222.222.222",
5 + "ip": "222.222.222.222",
6 + "online": false,
7 + "ready": false,
8 + "uiAttached": false,
9 + "switches": 0
10 + }
11 +}
1 +{
2 + "event": "updateInstance",
3 + "payload": {
4 + "id": "ONOS-6",
5 + "ip": "192.168.224.126",
6 + "online": false,
7 + "ready": false,
8 + "uiAttached": false,
9 + "switches": 0
10 + }
11 +}
1 +{
2 + "event": "updateInstance",
3 + "payload": {
4 + "id": "ONOS-5",
5 + "ip": "192.168.56.105",
6 + "online": false,
7 + "ready": false,
8 + "uiAttached": false,
9 + "switches": 0
10 + }
11 +}
1 +{
2 + "event": "updateInstance",
3 + "payload": {
4 + "id": "ONOS-4",
5 + "ip": "192.168.56.104",
6 + "online": false,
7 + "ready": false,
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": false,
7 + "ready": false,
8 + "uiAttached": false,
9 + "switches": 0
10 + }
11 +}
1 +{
2 + "event": "updateInstance",
3 + "payload": {
4 + "id": "ONOS-2",
5 + "ip": "192.168.56.102",
6 + "online": false,
7 + "ready": false,
8 + "uiAttached": false,
9 + "switches": 0
10 + }
11 +}
1 +{
2 + "event": "updateInstance",
3 + "payload": {
4 + "id": "192.168.56.101",
5 + "ip": "192.168.56.101",
6 + "online": false,
7 + "ready": false,
8 + "uiAttached": false,
9 + "switches": 0
10 + }
11 +}
1 +{
2 + "event": "addInstance",
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": 4
10 + }
11 +}
1 +{
2 + "event": "addInstance",
3 + "payload": {
4 + "id": "ONOS-2",
5 + "ip": "192.168.56.102",
6 + "online": true,
7 + "ready": true,
8 + "uiAttached": false,
9 + "switches": 3
10 + }
11 +}
1 +{
2 + "event": "addInstance",
3 + "payload": {
4 + "id": "ONOS-3",
5 + "ip": "192.168.56.103",
6 + "online": true,
7 + "ready": false,
8 + "uiAttached": false,
9 + "switches": 3
10 + }
11 +}
1 +{
2 + "event": "addInstance",
3 + "payload": {
4 + "id": "ONOS-4",
5 + "ip": "192.168.56.104",
6 + "online": true,
7 + "ready": false,
8 + "uiAttached": false,
9 + "switches": 0
10 + }
11 +}
1 +{
2 + "event": "addInstance",
3 + "payload": {
4 + "id": "ONOS-5",
5 + "ip": "192.168.56.105",
6 + "online": true,
7 + "ready": false,
8 + "uiAttached": false,
9 + "switches": 17
10 + }
11 +}
1 +{
2 + "event": "addInstance",
3 + "payload": {
4 + "id": "ONOS-6",
5 + "ip": "192.168.224.126",
6 + "online": true,
7 + "ready": false,
8 + "uiAttached": false,
9 + "switches": 0
10 + }
11 +}
1 +{
2 + "event": "addInstance",
3 + "payload": {
4 + "id": "222.222.222.222",
5 + "ip": "222.222.222.222",
6 + "online": true,
7 + "ready": false,
8 + "uiAttached": false,
9 + "switches": 6
10 + }
11 +}
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": false,
9 + "switches": 3
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": true,
9 + "switches": 3
10 + }
11 +}
1 +{
2 + "comments": [
3 + "Tweaking Mojo Colors"
4 + ],
5 + "title": "Color-Tweaking Scenario for Mojo Palette",
6 + "params": {
7 + "lastAuto": 7
8 + },
9 + "description": [
10 + "Press 'a' to load initial events.",
11 + "Press 'n' to fire further events."
12 + ]
13 +}