GUI -- Cleaned up Glyphs library code.
- added new test page; removed old test page. - added copyright to oblique test page. Change-Id: If8770fbcadc82a1a680c8ba83b3b31beadabc8d4
Showing
4 changed files
with
240 additions
and
308 deletions
web/gui/src/main/webapp/_sdh/glyphs.html
0 → 100644
1 | +<!DOCTYPE html> | ||
2 | +<!-- | ||
3 | + ~ Copyright 2014 Open Networking Laboratory | ||
4 | + ~ | ||
5 | + ~ Licensed under the Apache License, Version 2.0 (the "License"); | ||
6 | + ~ you may not use this file except in compliance with the License. | ||
7 | + ~ You may obtain a copy of the License at | ||
8 | + ~ | ||
9 | + ~ http://www.apache.org/licenses/LICENSE-2.0 | ||
10 | + ~ | ||
11 | + ~ Unless required by applicable law or agreed to in writing, software | ||
12 | + ~ distributed under the License is distributed on an "AS IS" BASIS, | ||
13 | + ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. | ||
14 | + ~ See the License for the specific language governing permissions and | ||
15 | + ~ limitations under the License. | ||
16 | + --> | ||
17 | + | ||
18 | +<!-- | ||
19 | + ONOS -- Glyphs library test page | ||
20 | + | ||
21 | + @author Simon Hunt | ||
22 | + --> | ||
23 | +<html> | ||
24 | +<head> | ||
25 | + <meta charset="utf-8"> | ||
26 | + <title>Glyphs</title> | ||
27 | + | ||
28 | + <script src="../tp/d3.js"></script> | ||
29 | + | ||
30 | + <style> | ||
31 | + html, | ||
32 | + body { | ||
33 | + background-color: #ddf; | ||
34 | + font-family: Arial, Helvetica, sans-serif; | ||
35 | + font-size: 9pt; | ||
36 | + } | ||
37 | + | ||
38 | + svg { | ||
39 | + background-color: #fff; | ||
40 | + } | ||
41 | + | ||
42 | + svg .glyph { | ||
43 | + stroke: none; | ||
44 | + fill: black; | ||
45 | + fill-rule: evenodd; | ||
46 | + } | ||
47 | + | ||
48 | + svg .icon text { | ||
49 | + text-anchor: middle; | ||
50 | + font-size: 5pt; | ||
51 | + fill: green; | ||
52 | + stroke: none; | ||
53 | + } | ||
54 | + | ||
55 | + </style> | ||
56 | +</head> | ||
57 | +<body> | ||
58 | + <!-- minimal framework to access glyphs library module --> | ||
59 | + <script> | ||
60 | + var libs = {}; | ||
61 | + var ONOS = { ui: { addLib: function (id, things) { libs[id] = things; }}}; | ||
62 | + </script> | ||
63 | + | ||
64 | + <!-- import the glyphs library --> | ||
65 | + <script src="../glyphs.js"></script> | ||
66 | + | ||
67 | + <svg></svg> | ||
68 | + | ||
69 | + <!-- code to display the glyphs in the library --> | ||
70 | + <script> | ||
71 | + (function () { | ||
72 | + var w = 1000, | ||
73 | + h = 400, | ||
74 | + vb = '0 0 ' + w + ' ' + h; | ||
75 | + | ||
76 | + var svg = d3.select('svg') | ||
77 | + .attr({ width: w, height: h, viewBox: vb }); | ||
78 | + | ||
79 | + // create definitions element... | ||
80 | + var defs = svg.append('defs'); | ||
81 | + | ||
82 | + // create scaling group | ||
83 | + var grp = svg.append('g') | ||
84 | + .attr('transform', 'translate(20,20)scale(2)'); | ||
85 | + | ||
86 | + function translate(loc) { | ||
87 | + return 'translate(' + loc[0] + ',' + loc[1] +')'; | ||
88 | + } | ||
89 | + | ||
90 | + function icon(what, id, loc, color, bg, size) { | ||
91 | + var i = '#' + id, | ||
92 | + c = color || 'black', | ||
93 | + b = bg || '#eef', | ||
94 | + z = size || 40, | ||
95 | + g; | ||
96 | + | ||
97 | + g = what.append('g') | ||
98 | + .attr({ 'class': 'icon', transform: translate(loc) }); | ||
99 | + | ||
100 | + g.append('rect') | ||
101 | + .attr({ width: z, height: z, rx: 4 }) | ||
102 | + .style('fill', b) | ||
103 | + .style('stroke', 'black') | ||
104 | + .style('stroke-width', 0.5); | ||
105 | + | ||
106 | + g.append('use') | ||
107 | + .attr({ 'class': 'glyph', width: z, height: z, 'xlink:href': i }) | ||
108 | + .style('fill', c); | ||
109 | + | ||
110 | + if (id !== 'bird') { | ||
111 | + g.append('text') | ||
112 | + .text(id) | ||
113 | + .attr({ x: z / 2, y: z + 8 }) | ||
114 | + } | ||
115 | + } | ||
116 | + | ||
117 | + | ||
118 | + // import glyphs... | ||
119 | + libs.glyphs.defBird(defs); | ||
120 | + libs.glyphs.defGlyphs(defs); | ||
121 | + libs.glyphs.defBadges(defs); | ||
122 | + | ||
123 | + // bird, top right corner | ||
124 | + icon(svg, 'bird', [830,10], '#800', '#ecc', 160); | ||
125 | + | ||
126 | + // show icons... | ||
127 | + icon(grp, 'unknown', [ 0, 0]); | ||
128 | + icon(grp, 'node', [ 50, 0]); | ||
129 | + icon(grp, 'switch', [100, 0]); | ||
130 | + icon(grp, 'roadm', [150, 0]); | ||
131 | + icon(grp, 'endstation', [200, 0]); | ||
132 | + icon(grp, 'router', [250, 0]); | ||
133 | + icon(grp, 'bgpSpeaker', [300, 0]); | ||
134 | + icon(grp, 'uiAttached', [350, 0]); | ||
135 | + | ||
136 | + icon(grp, 'chain', [ 0, 60]); | ||
137 | + | ||
138 | + // more goodies to come soon..... | ||
139 | + })(); | ||
140 | + </script> | ||
141 | + | ||
142 | +</body> | ||
143 | +</html> |
1 | -<!DOCTYPE html> | ||
2 | -<html> | ||
3 | -<head> | ||
4 | - <meta charset="utf-8"> | ||
5 | - <title>Icons</title> | ||
6 | - | ||
7 | - <script src="../tp/d3.js"></script> | ||
8 | - <script src="../tp/topojson.v1.min.js"></script> | ||
9 | - <script src="../tp/jquery-2.1.1.min.js"></script> | ||
10 | - | ||
11 | - <style> | ||
12 | - html, | ||
13 | - body { | ||
14 | - background-color: #ddf; | ||
15 | - font-family: Arial, Helvetica, sans-serif; | ||
16 | - font-size: 9pt; | ||
17 | - } | ||
18 | - | ||
19 | - svg { | ||
20 | - background-color: #fff; | ||
21 | - } | ||
22 | - | ||
23 | - svg .glyph { | ||
24 | - stroke: none; | ||
25 | - fill: black; | ||
26 | - fill-rule: evenodd; | ||
27 | - } | ||
28 | - | ||
29 | - svg .device rect.iconBg { | ||
30 | - fill: #ddd; | ||
31 | - stroke: #000; | ||
32 | - } | ||
33 | - | ||
34 | - .hide { | ||
35 | - visibility: hidden; | ||
36 | - } | ||
37 | - | ||
38 | - </style> | ||
39 | -</head> | ||
40 | -<body> | ||
41 | - <svg width="1000px" height="600px" viewBox="0 0 1000 600" > | ||
42 | - <defs> | ||
43 | - <symbol id="router" class="glyph" viewBox="-55 -55 110 110"> | ||
44 | - <path d="M-45 0 A45 45 0 0 1 45 0 A45 45 0 0 1 -45 0 | ||
45 | - M -35 -5 l 12 0, 0 -8, 18 13, -18 13, 0 -8, -12 0 z | ||
46 | - M 35 -5 l -12 0, 0 -8, -18 13, 18 13, 0 -8, 12 0 z | ||
47 | - M -5 -8 l 0 -12, -8 0, 13 -18, 13 18, -8 0, 0 12 z | ||
48 | - M -5 8 l 0 12, -8 0, 13 18, 13 -18, -8 0, 0 -12 z | ||
49 | - "></path> | ||
50 | - </symbol> | ||
51 | - | ||
52 | - <symbol id="bgpSpeaker" class="glyph" viewBox="-55 -55 110 110"> | ||
53 | - <path d="M-45 -15 | ||
54 | - a45 35 0 0 1 90 0 | ||
55 | - Q45 22 0 45 | ||
56 | - Q-45 22 -45 -15 | ||
57 | - z | ||
58 | - | ||
59 | - M -5 -26 l 12 0, 0 -8, 18 13, -18 13, 0 -8, -12 0 z | ||
60 | - M 5 2 l -12 0, 0 -8, -18 13, 18 13, 0 -8, 12 0 z | ||
61 | - | ||
62 | - "></path> | ||
63 | - <!-- a45 45 0 0 1 -10 30 | ||
64 | - --> | ||
65 | - </symbol> | ||
66 | - | ||
67 | - <symbol id="switch" class="glyph" viewBox="-55 -55 110 110"> | ||
68 | - <path d="M-45 -35 a10 10 0 0 1 10 -10 h70 | ||
69 | - a 10 10 0 0 1 10 10 v70 | ||
70 | - a 10 10 0 0 1 -10 10 h -70 | ||
71 | - a 10 10 0 0 1 -10 -10 z | ||
72 | - M 5 -29 l 12 0, 0 -8, 18 13, -18 13, 0 -8, -12 0 z | ||
73 | - M 5 5 l 12 0, 0 -8, 18 13, -18 13, 0 -8, -12 0 z | ||
74 | - M -5 -15 l -12 0, 0 -8, -18 13, 18 13, 0 -8, 12 0 z | ||
75 | - M -5 19 l -12 0, 0 -8, -18 13, 18 13, 0 -8, 12 0 z | ||
76 | - "></path> | ||
77 | - </symbol> | ||
78 | - | ||
79 | - <symbol id="roadm" class="glyph" viewBox="-55 -55 110 110"> | ||
80 | - <path d="M-45 -20 l25 -25 h40 l25 25 v40 | ||
81 | - l-25 25 h-40 l-25 -25 z | ||
82 | - | ||
83 | - M 3 -29 l 12 0, 0 -8, 18 13, -18 13, 0 -8, -12 0 z | ||
84 | - M 3 5 l 12 0, 0 -8, 18 13, -18 13, 0 -8, -12 0 z | ||
85 | - M -3 -15 l -12 0, 0 -8, -18 13, 18 13, 0 -8, 12 0 z | ||
86 | - M -3 19 l -12 0, 0 -8, -18 13, 18 13, 0 -8, 12 0 z | ||
87 | - "></path> | ||
88 | - </symbol> | ||
89 | - | ||
90 | - <symbol id="node" class="glyph" viewBox="-55 -55 110 110"> | ||
91 | - <path d="M-40 45 a5 5 0 0 1 -5 -5 v-65 a5 5 0 0 1 5 -5 | ||
92 | - h80 a5 5 0 0 1 5 5 v65 a5 5 0 0 1 -5 5 z | ||
93 | - M-41 -32.5 l11 -11 a10 3 0 0 1 10 -2 h40 | ||
94 | - a10 3 0 0 1 10 2 l11 11 z | ||
95 | - M-39 -20 a5 5 0 0 1 10 0 a5 5 0 0 1 -10 0 z | ||
96 | - "></path> | ||
97 | - </symbol> | ||
98 | - | ||
99 | - <symbol id="nodeSlave" class="glyph" viewBox="-55 -55 110 110"> | ||
100 | - <path d="M-40 45 a5 5 0 0 1 -5 -5 v-65 a5 5 0 0 1 5 -5 | ||
101 | - h80 a5 5 0 0 1 5 5 v65 a5 5 0 0 1 -5 5 z | ||
102 | - M-41 -32.5 l11 -11 a10 3 0 0 1 10 -2 h40 | ||
103 | - a10 3 0 0 1 10 2 l11 11 z | ||
104 | - M-39 -20 a5 5 0 0 1 10 0 a5 5 0 0 1 -10 0 z | ||
105 | - | ||
106 | - M-6 -6 | ||
107 | - l6 -6 | ||
108 | - a8.485 8.485 0 0 1 12 12 | ||
109 | - l-6 6 | ||
110 | - a8.485 8.485 0 0 1 -13 -2 | ||
111 | - l3 -3 | ||
112 | - a4 4 0 0 0 6 1 | ||
113 | - l8 -8 | ||
114 | - a2.8 2.8 0 0 0 -5 -5 | ||
115 | - l-5 5 | ||
116 | - z | ||
117 | - | ||
118 | - "></path> | ||
119 | - </symbol> | ||
120 | - | ||
121 | - <symbol id="host" class="glyph" viewBox="-55 -55 110 110"> | ||
122 | - <path d="M-45 -40 a5 5 0 0 1 5 -5 h65 a5 5 0 0 1 5 5 | ||
123 | - v80 a5 5 0 0 1 -5 5 h-65 a5 5 0 0 1 -5 -5 z | ||
124 | - M32.5 -41 l11 11 a3 10 0 0 1 2 10 v40 | ||
125 | - a3 10 0 0 1 -2 10 l-11 11 z | ||
126 | - | ||
127 | - M-38 -36 | ||
128 | - a2 2 0 0 1 2 -2 h56 | ||
129 | - a2 2 0 0 1 2 2 v26 | ||
130 | - a2 2 0 0 1 -2 2 h-56 | ||
131 | - a2 2 0 0 1 -2 -2 | ||
132 | - z | ||
133 | - | ||
134 | - M-35 -35 h54 v10 h-54 z | ||
135 | - M-35 -22 h54 v10 h-54 z | ||
136 | - | ||
137 | - M-13 15 a5 5 0 0 1 10 0 a5 5 0 0 1 -10 0 z | ||
138 | - "></path> | ||
139 | - </symbol> | ||
140 | - | ||
141 | - <symbol id="unknown" class="glyph" viewBox="-55 -55 110 110"> | ||
142 | - <path d="M-20 -15 a5 5 0 0 1 5 -5 h30 a5 5 0 0 1 5 5 v30 a5 5 0 0 1 -5 5 h-30 a5 5 0 0 1 -5 -5 z "></path> | ||
143 | - </symbol> | ||
144 | - | ||
145 | - | ||
146 | - | ||
147 | - | ||
148 | - </defs> | ||
149 | - | ||
150 | - | ||
151 | - <g transform="translate(10,10)scale(4)translate(0,20)" > | ||
152 | - | ||
153 | - <g class="hide"> | ||
154 | - <!--link--> | ||
155 | - <path fill="#010101" d="M459.654,233.373l-90.531,90.5c-49.969,50-131.031,50-181,0c-7.875-7.844-14.031-16.688-19.438-25.813 | ||
156 | - l42.063-42.063c2-2.016,4.469-3.172,6.828-4.531c2.906,9.938,7.984,19.344,15.797,27.156c24.953,24.969,65.563,24.938,90.5,0 | ||
157 | - l90.5-90.5c24.969-24.969,24.969-65.563,0-90.516c-24.938-24.953-65.531-24.953-90.5,0l-32.188,32.219 | ||
158 | - c-26.109-10.172-54.25-12.906-81.641-8.891l68.578-68.578c50-49.984,131.031-49.984,181.031,0 | ||
159 | - C509.623,102.342,509.623,183.389,459.654,233.373z M220.326,382.186l-32.203,32.219c-24.953,24.938-65.563,24.938-90.516,0 | ||
160 | - c-24.953-24.969-24.953-65.563,0-90.531l90.516-90.5c24.969-24.969,65.547-24.969,90.5,0c7.797,7.797,12.875,17.203,15.813,27.125 | ||
161 | - c2.375-1.375,4.813-2.5,6.813-4.5l42.063-42.047c-5.375-9.156-11.563-17.969-19.438-25.828c-49.969-49.984-131.031-49.984-181.016,0 | ||
162 | - l-90.5,90.5c-49.984,50-49.984,131.031,0,181.031c49.984,49.969,131.031,49.969,181.016,0l68.594-68.594 | ||
163 | - C274.561,395.092,246.42,392.342,220.326,382.186z"></path> | ||
164 | - | ||
165 | - | ||
166 | - <!--crown--> | ||
167 | - <path d="M94.257,32.808c0,4.466-3.62,8.085-8.085,8.085c-0.495,0-0.979-0.051-1.449-0.136l-6.637,23.695v8.518H21.914v-8.849 | ||
168 | - l-6.579-23.373c-0.489,0.092-0.992,0.145-1.507,0.145c-4.465,0-8.085-3.619-8.085-8.085c0-4.466,3.62-8.086,8.085-8.086 | ||
169 | - c4.465,0,8.085,3.62,8.085,8.086c0,1.099-0.222,2.146-0.619,3.102c8.078,2.726,20.551,4.947,26.163-4.449 | ||
170 | - c-3.219-1.066-5.543-4.095-5.543-7.671c0-4.466,3.62-8.086,8.085-8.086s8.085,3.62,8.085,8.086c0,3.573-2.32,6.6-5.536,7.669 | ||
171 | - c3.276,6.052,10.577,12.374,26.494,5.165c-0.608-1.137-0.957-2.435-0.957-3.815c0-4.466,3.62-8.086,8.085-8.086 | ||
172 | - S94.257,28.342,94.257,32.808z M21.915,84.297h56.173v-7.658H21.915V84.297z"></path> | ||
173 | - </g> | ||
174 | - | ||
175 | - | ||
176 | - <g class="show"> | ||
177 | - <g class="device" transform="translate(0,0)"> | ||
178 | - <rect x="0" y="0" width="40" height="40" rx="4" class="iconBg"></rect> | ||
179 | - <use xlink:href="#router" width="40" height="40"></use> | ||
180 | - </g> | ||
181 | - | ||
182 | - <g class="device" transform="translate(50,0)"> | ||
183 | - <rect x="0" y="0" width="40" height="40" rx="4" class="iconBg"></rect> | ||
184 | - <use xlink:href="#switch" width="40" height="40"></use> | ||
185 | - </g> | ||
186 | - | ||
187 | - <g class="device" transform="translate(100,0)"> | ||
188 | - <rect x="0" y="0" width="40" height="40" rx="4" class="iconBg"></rect> | ||
189 | - <use xlink:href="#roadm" width="40" height="40"></use> | ||
190 | - </g> | ||
191 | - | ||
192 | - <g class="device" transform="translate(0,50)"> | ||
193 | - <rect x="0" y="0" width="40" height="40" rx="4" class="iconBg"></rect> | ||
194 | - <use xlink:href="#node" width="40" height="40"></use> | ||
195 | - </g> | ||
196 | - | ||
197 | - <g class="device" transform="translate(50,50)"> | ||
198 | - <rect x="0" y="0" width="40" height="40" rx="4" class="iconBg"></rect> | ||
199 | - <use xlink:href="#host" width="40" height="40"></use> | ||
200 | - </g> | ||
201 | - | ||
202 | - <g class="device" transform="translate(100,50)"> | ||
203 | - <rect x="0" y="0" width="40" height="40" rx="4" class="iconBg"></rect> | ||
204 | - <use xlink:href="#bgpSpeaker" width="40" height="40"></use> | ||
205 | - </g> | ||
206 | - | ||
207 | - <g class="device" transform="translate(150,0)"> | ||
208 | - <rect x="0" y="0" width="40" height="40" rx="4" class="iconBg"></rect> | ||
209 | - <use xlink:href="#unknown" width="40" height="40"></use> | ||
210 | - </g> | ||
211 | - </g> | ||
212 | - </g> | ||
213 | - </svg> | ||
214 | -</body> | ||
215 | -</html> |
1 | <!DOCTYPE html> | 1 | <!DOCTYPE html> |
2 | <!-- | 2 | <!-- |
3 | +~ Copyright 2014 Open Networking Laboratory | ||
4 | +~ | ||
5 | +~ Licensed under the Apache License, Version 2.0 (the "License"); | ||
6 | +~ you may not use this file except in compliance with the License. | ||
7 | +~ You may obtain a copy of the License at | ||
8 | +~ | ||
9 | +~ http://www.apache.org/licenses/LICENSE-2.0 | ||
10 | +~ | ||
11 | +~ Unless required by applicable law or agreed to in writing, software | ||
12 | +~ distributed under the License is distributed on an "AS IS" BASIS, | ||
13 | +~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. | ||
14 | +~ See the License for the specific language governing permissions and | ||
15 | +~ limitations under the License. | ||
16 | +--> | ||
17 | + | ||
18 | +<!-- | ||
3 | Testing transformations for transitioning between overhead and | 19 | Testing transformations for transitioning between overhead and |
4 | perspective projections of two layers. | 20 | perspective projections of two layers. |
5 | 21 | ||
... | @@ -11,7 +27,6 @@ | ... | @@ -11,7 +27,6 @@ |
11 | <title>Layer Transformations</title> | 27 | <title>Layer Transformations</title> |
12 | 28 | ||
13 | <script src="../tp/d3.js"></script> | 29 | <script src="../tp/d3.js"></script> |
14 | - <script src="../tp/topojson.v1.min.js"></script> | ||
15 | <script src="../tp/jquery-2.1.1.min.js"></script> | 30 | <script src="../tp/jquery-2.1.1.min.js"></script> |
16 | 31 | ||
17 | <style> | 32 | <style> | ... | ... |
... | @@ -15,7 +15,7 @@ | ... | @@ -15,7 +15,7 @@ |
15 | */ | 15 | */ |
16 | 16 | ||
17 | /* | 17 | /* |
18 | - SVG Glyphs. | 18 | + ONOS -- SVG Glyphs Library. |
19 | 19 | ||
20 | @author Simon Hunt | 20 | @author Simon Hunt |
21 | */ | 21 | */ |
... | @@ -24,104 +24,93 @@ | ... | @@ -24,104 +24,93 @@ |
24 | (function (onos) { | 24 | (function (onos) { |
25 | 'use strict'; | 25 | 'use strict'; |
26 | 26 | ||
27 | - // TODO: refactor this library... | 27 | + var birdViewBox = '352 224 113 112', |
28 | - | 28 | + |
29 | - var birdData = "M427.7,300.4 c-6.9,0.6-13.1,5-19.2,7.1" + | 29 | + birdData = { |
30 | - "c-18.1,6.2-33.9,9.1-56.5,4.7c24.6,17.2,36.6,13,63.7,0.1" + | 30 | + bird: "M427.7,300.4 c-6.9,0.6-13.1,5-19.2,7.1c-18.1,6.2-33.9," + |
31 | - "c-0.5,0.6-0.7,1.3-1.3,1.9c1.4-0.4,2.4-1.7,3.4-2.2" + | 31 | + "9.1-56.5,4.7c24.6,17.2,36.6,13,63.7,0.1c-0.5,0.6-0.7,1.3-1.3," + |
32 | - "c-0.4,0.7-0.9,1.5-1.4,1.9c2.2-0.6,3.7-2.3,5.9-3.9" + | 32 | + "1.9c1.4-0.4,2.4-1.7,3.4-2.2c-0.4,0.7-0.9,1.5-1.4,1.9c2.2-0.6," + |
33 | - "c-2.4,2.1-4.2,5-6,8c-1.5,2.5-3.1,4.8-5.1,6.9c-1,1-1.9,1.9-2.9,2.9" + | 33 | + "3.7-2.3,5.9-3.9c-2.4,2.1-4.2,5-6,8c-1.5,2.5-3.1,4.8-5.1,6.9c-1," + |
34 | - "c-1.4,1.3-2.9,2.5-5.1,2.9c1.7,0.1,3.6-0.3,6.5-1.9" + | 34 | + "1-1.9,1.9-2.9,2.9c-1.4,1.3-2.9,2.5-5.1,2.9c1.7,0.1,3.6-0.3,6.5" + |
35 | - "c-1.6,2.4-7.1,6.2-9.9,7.2c10.5-2.6,19.2-15.9,25.7-18" + | 35 | + "-1.9c-1.6,2.4-7.1,6.2-9.9,7.2c10.5-2.6,19.2-15.9,25.7-18c18.3" + |
36 | - "c18.3-5.9,13.8-3.4,27-14.2c1.6-1.3,3-1,5.1-0.8" + | 36 | + "-5.9,13.8-3.4,27-14.2c1.6-1.3,3-1,5.1-0.8c1.1,0.1,2.1,0.3,3.2," + |
37 | - "c1.1,0.1,2.1,0.3,3.2,0.5c0.8,0.2,1.4,0.4,2.2,0.8l1.8,0.9" + | 37 | + "0.5c0.8,0.2,1.4,0.4,2.2,0.8l1.8,0.9c-1.9-4.5-2.3-4.1-5.9-6c-2.3" + |
38 | - "c-1.9-4.5-2.3-4.1-5.9-6c-2.3-1.3-3.3-3.8-6.2-4.9" + | 38 | + "-1.3-3.3-3.8-6.2-4.9c-7.1-2.6-11.9,11.7-11.7-5c0.1-8,4.2-14.4," + |
39 | - "c-7.1-2.6-11.9,11.7-11.7-5c0.1-8,4.2-14.4,6.4-22" + | 39 | + "6.4-22c1.1-3.8,2.3-7.6,2.4-11.5c0.1-2.3,0-4.7-0.4-7c-2-11.2-8.4" + |
40 | - "c1.1-3.8,2.3-7.6,2.4-11.5c0.1-2.3,0-4.7-0.4-7" + | 40 | + "-21.5-19.7-24.8c-1-0.3-1.1-0.3-0.9,0c9.6,17.1,7.2,38.3,3.1,54.2" + |
41 | - "c-2-11.2-8.4-21.5-19.7-24.8c-1-0.3-1.1-0.3-0.9,0" + | 41 | + "C429.9,285.5,426.7,293.2,427.7,300.4z" |
42 | - "c9.6,17.1,7.2,38.3,3.1,54.2C429.9,285.5,426.7,293.2,427.7,300.4z"; | 42 | + }, |
43 | - | 43 | + |
44 | - function defBird(defs) { | 44 | + glyphViewBox = '0 0 110 110', |
45 | - defs.append('symbol') | 45 | + |
46 | - .attr({ | 46 | + glyphData = { |
47 | - id: 'bird', | 47 | + unknown: "M35,40a5,5,0,0,1,5-5h30a5,5,0,0,1,5,5v30a5,5,0,0,1-5,5" + |
48 | - viewBox: '352 224 113 112' | 48 | + "h-30a5,5,0,0,1-5-5z", |
49 | - }) | 49 | + |
50 | - .append('path').attr('d', birdData); | 50 | + node: "M15,100a5,5,0,0,1-5-5v-65a5,5,0,0,1,5-5h80a5,5,0,0,1,5,5" + |
51 | - } | 51 | + "v65a5,5,0,0,1-5,5zM14,22.5l11-11a10,3,0,0,1,10-2h40a10,3,0,0,1," + |
52 | - | 52 | + "10,2l11,11zM16,35a5,5,0,0,1,10,0a5,5,0,0,1-10,0z", |
53 | - var glyphData = { | 53 | + |
54 | - unknown: "M-20 -15 a5 5 0 0 1 5 -5 h30 a5 5 0 0 1 5 5 v30 " + | 54 | + switch: "M10,20a10,10,0,0,1,10-10h70a10,10,0,0,1,10,10v70a10,10," + |
55 | - "a5 5 0 0 1 -5 5 h-30 a5 5 0 0 1 -5 -5 z", | 55 | + "0,0,1-10,10h-70a10,10,0,0,1-10-10zM60,26l12,0,0-8,18,13-18,13,0" + |
56 | - | 56 | + "-8-12,0zM60,60l12,0,0-8,18,13-18,13,0-8-12,0zM50,40l-12,0,0-8" + |
57 | - node: "M-40 45 a5 5 0 0 1 -5 -5 v-65 a5 5 0 0 1 5 -5 h80 " + | 57 | + "-18,13,18,13,0-8,12,0zM50,74l-12,0,0-8-18,13,18,13,0-8,12,0z", |
58 | - "a5 5 0 0 1 5 5 v65 a5 5 0 0 1 -5 5 z M-41 -32.5 l11 -11 " + | 58 | + |
59 | - "a10 3 0 0 1 10 -2 h40 a10 3 0 0 1 10 2 l11 11 z M-39 -20 " + | 59 | + roadm: "M10,35l25-25h40l25,25v40l-25,25h-40l-25-25zM58,26l12,0,0" + |
60 | - "a5 5 0 0 1 10 0 a5 5 0 0 1 -10 0 z", | 60 | + "-8,18,13-18,13,0-8-12,0zM58,60l12,0,0-8,18,13-18,13,0-8-12,0z" + |
61 | - | 61 | + "M52,40l-12,0,0-8-18,13,18,13,0-8,12,0zM52,74l-12,0,0-8-18,13," + |
62 | - switch: "M-45 -35 a10 10 0 0 1 10 -10 h70 a 10 10 0 0 1 10 10 " + | 62 | + "18,13,0-8,12,0z", |
63 | - "v70 a 10 10 0 0 1 -10 10 h -70 a 10 10 0 0 1 -10 -10 z " + | 63 | + |
64 | - "M 5 -29 l 12 0, 0 -8, 18 13, -18 13, 0 -8, -12 0 z M 5 5 " + | 64 | + endstation: "M10,15a5,5,0,0,1,5-5h65a5,5,0,0,1,5,5v80a5,5,0,0,1" + |
65 | - "l 12 0, 0 -8, 18 13, -18 13, 0 -8, -12 0 z M -5 -15 " + | 65 | + "-5,5h-65a5,5,0,0,1-5-5zM87.5,14l11,11a3,10,0,0,1,2,10v40a3,10," + |
66 | - "l -12 0, 0 -8, -18 13, 18 13, 0 -8, 12 0 z M -5 19 " + | 66 | + "0,0,1,-2,10l-11,11zM17,19a2,2,0,0,1,2-2h56a2,2,0,0,1,2,2v26a2," + |
67 | - "l -12 0, 0 -8, -18 13, 18 13, 0 -8, 12 0 z", | 67 | + "2,0,0,1-2,2h-56a2,2,0,0,1-2-2zM20,20h54v10h-54zM20,33h54v10h" + |
68 | - | 68 | + "-54zM42,70a5,5,0,0,1,10,0a5,5,0,0,1-10,0z", |
69 | - roadm: "M-45 -20 l25 -25 h40 l25 25 v40 l-25 25 h-40 l-25 -25 z " + | 69 | + |
70 | - "M 3 -29 l 12 0, 0 -8, 18 13, -18 13, 0 -8, -12 0 z M 3 5 " + | 70 | + router: "M10,55A45,45,0,0,1,100,55A45,45,0,0,1,10,55M20,50l12,0," + |
71 | - "l 12 0, 0 -8, 18 13, -18 13, 0 -8, -12 0 z M -3 -15 " + | 71 | + "0-8,18,13-18,13,0-8-12,0zM90,50l-12,0,0-8-18,13,18,13,0-8,12,0z" + |
72 | - "l -12 0, 0 -8, -18 13, 18 13, 0 -8, 12 0 z M -3 19 " + | 72 | + "M50,47l0-12-8,0,13-18,13,18-8,0,0,12zM50,63l0,12-8,0,13,18,13" + |
73 | - "l -12 0, 0 -8, -18 13, 18 13, 0 -8, 12 0 z", | 73 | + "-18-8,0,0-12z", |
74 | - | 74 | + |
75 | - endstation: "M-45 -40 a5 5 0 0 1 5 -5 h65 a5 5 0 0 1 5 5 v80 " + | 75 | + bgpSpeaker: "M10,40a45,35,0,0,1,90,0Q100,77,55,100Q10,77,10,40z" + |
76 | - "a5 5 0 0 1 -5 5 h-65 a5 5 0 0 1 -5 -5 z M32.5 -41 l11 11 " + | 76 | + "M50,29l12,0,0-8,18,13-18,13,0-8-12,0zM60,57l-12,0,0-8-18,13," + |
77 | - "a3 10 0 0 1 2 10 v40 a3 10 0 0 1 -2 10 l-11 11 z M-38 -36 " + | 77 | + "18,13,0-8,12,0z", |
78 | - "a2 2 0 0 1 2 -2 h56 a2 2 0 0 1 2 2 v26 a2 2 0 0 1 -2 2 h-56 " + | 78 | + |
79 | - "a2 2 0 0 1 -2 -2 z M-35 -35 h54 v10 h-54 z M-35 -22 h54 v10 " + | 79 | + chain: "M60.4,77.6c-4.9,5.2-9.6,11.3-15.3,16.3c-8.6,7.5-20.4,6.8" + |
80 | - "h-54 z M-13 15 a5 5 0 0 1 10 0 a5 5 0 0 1 -10 0 z", | 80 | + "-28-0.8c-7.7-7.7-8.4-19.6-0.8-28.4c6.5-7.4,13.5-14.4,20.9-20.9" + |
81 | - | 81 | + "c7.5-6.7,19.2-6.7,26.5-0.8c3.5,2.8,4.4,6.1,2.2,8.7c-2.7,3.1" + |
82 | - router: "M-45 0 A45 45 0 0 1 45 0 A45 45 0 0 1 -45 0 M -35 -5 " + | 82 | + "-5.5,2.5-8.5,0.3c-4.7-3.4-9.7-3.2-14,0.9C37.1,58.7,31,64.8," + |
83 | - "l 12 0, 0 -8, 18 13, -18 13, 0 -8, -12 0 z M 35 -5 " + | 83 | + "25.2,71c-4.2,4.4-4.2,10.6-0.6,14.3c3.7,3.7,9.7,3.7,14.3-0.4" + |
84 | - "l -12 0, 0 -8, -18 13, 18 13, 0 -8, 12 0 z M -5 -8 " + | 84 | + "c2.9-2.5,5.3-5.5,8.3-8c1-0.9,3-1.1,4.4-0.9C54.8,76.3,57.9,77.1," + |
85 | - "l 0 -12, -8 0, 13 -18, 13 18, -8 0, 0 12 z M -5 8 " + | 85 | + "60.4,77.6zM49.2,32.2c5-5.2,9.7-10.9,15.2-15.7c12.8-11,31.2" + |
86 | - "l 0 12, -8 0, 13 18, 13 -18, -8 0, 0 -12 z", | 86 | + "-4.9,34.3,11.2C100,34.2,98.3,40.2,94,45c-6.7,7.4-13.7,14.6" + |
87 | - | 87 | + "-21.2,21.2C65.1,73,53.2,72.7,46,66.5c-3.2-2.8-3.9-5.8-1.6-8.4" + |
88 | - bgpSpeaker: "M-45 -15 a45 35 0 0 1 90 0 Q45 22 0 45 Q-45 22 -45 -15 z " + | 88 | + "c2.6-2.9,5.3-2.4,8.2-0.3c5.2,3.7,10,3.3,14.7-1.1c5.8-5.6,11.6" + |
89 | - "M -5 -26 l 12 0, 0 -8, 18 13, -18 13, 0 -8, -12 0 z M 5 2" + | 89 | + "-11.3,17.2-17.2c4.6-4.8,4.9-11.1,0.9-15c-3.9-3.9-10.1-3.4-15," + |
90 | - " l -12 0, 0 -8, -18 13, 18 13, 0 -8, 12 0 z" | 90 | + "1.2c-3.1,2.9-5.7,7.4-9.3,8.5C57.6,35.3,53,33,49.2,32.2z" |
91 | - }; | 91 | + }, |
92 | - | 92 | + |
93 | - var glyphParams = { | 93 | + badgeViewBox = '0 0 10 10', |
94 | - viewBox: '-55 -55 110 110' | 94 | + |
95 | - }; | 95 | + badgeData = { |
96 | - | 96 | + uiAttached: "M2,2.5a.5,.5,0,0,1,.5-.5h5a.5,.5,0,0,1,.5,.5v3" + |
97 | - | 97 | + "a.5,.5,0,0,1-.5,.5h-5a.5,.5,0,0,1-.5-.5zM2.5,2.8a.3,.3,0,0,1," + |
98 | - var badgeData = { | 98 | + ".3-.3h4.4a.3,.3,0,0,1,.3,.3v2.4a.3,.3,0,0,1-.3,.3h-4.4" + |
99 | - uiAttached: "M-3-2.5 a.5 .5 0 0 1 .5-.5 h5 a.5 .5 0 0 1 .5 .5 v3 " + | 99 | + "a.3,.3,0,0,1-.3-.3zM2,6.55h6l1,1.45h-8z" |
100 | - "a.5 .5 0 0 1-.5 .5 h-5 a.5 .5 0 0 1-.5-.5 z M-2.5-2.2 " + | 100 | + }; |
101 | - "a.3 .3 0 0 1 .3-.3 h4.4 a.3 .3 0 0 1 .3 .3 v2.4 a.3 .3 0 0 1-.3 .3 " + | 101 | + |
102 | - "h-4.4 a.3 .3 0 0 1-.3-.3 z M-3 1.55 h6 l1 1.45 h-8 z" | 102 | + function defStuff(defs, viewbox, data) { |
103 | - }; | ||
104 | - | ||
105 | - var badgeParams = { | ||
106 | - viewBox: '-5 -5 10 10' | ||
107 | - }; | ||
108 | - | ||
109 | - function defStuff(defs, params, data) { | ||
110 | d3.map(data).keys().forEach(function (key) { | 103 | d3.map(data).keys().forEach(function (key) { |
111 | defs.append('symbol') | 104 | defs.append('symbol') |
112 | - .attr({ | 105 | + .attr({ id: key, viewBox: viewbox }) |
113 | - id: key, | ||
114 | - viewBox: params.viewBox | ||
115 | - }) | ||
116 | .append('path').attr('d', data[key]); | 106 | .append('path').attr('d', data[key]); |
117 | }); | 107 | }); |
118 | } | 108 | } |
119 | 109 | ||
120 | - // === register the functions as a library | ||
121 | onos.ui.addLib('glyphs', { | 110 | onos.ui.addLib('glyphs', { |
122 | - defBird: defBird, | 111 | + defBird: function (defs) { defStuff(defs, birdViewBox, birdData); }, |
123 | - defGlyphs: function (defs) { defStuff(defs, glyphParams, glyphData); }, | 112 | + defGlyphs: function (defs) { defStuff(defs, glyphViewBox, glyphData); }, |
124 | - defBadges: function (defs) { defStuff(defs, badgeParams, badgeData); } | 113 | + defBadges: function (defs) { defStuff(defs, badgeViewBox, badgeData); } |
125 | }); | 114 | }); |
126 | 115 | ||
127 | }(ONOS)); | 116 | }(ONOS)); | ... | ... |
-
Please register or login to post a comment