홍길동 / onos

Go to a project
Toggle navigation Toggle navigation pinning
Simon Hunt
71fbdb3b 1 parent a0d31003

GUI -- Cleaned up Glyphs library code. 

 - added new test page; removed old test page.
 - added copyright to oblique test page.

Change-Id: If8770fbcadc82a1a680c8ba83b3b31beadabc8d4
Inline Side-by-side
Showing 4 changed files with 240 additions and 308 deletions
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));
......