Gitiles
Code Review Sign In
gerrit.onosproject.org / onos / 51b8f6acba09abb2e4a9c54953b8eaad51bbf0a3 / . / web / gui / src / main / webapp / _sdh / icons.html
blob: 50807de417a2ec8d29e98063eec2ae22082ef89d [file] [log] [blame]
Simon Huntc72967b2014-11-20 09:21:42 -0800[diff] [blame]1<!DOCTYPE html>
2<html>
3<head>
4 <meta charset="utf-8">
5 <title>Icons</title>
6
7 <script src="../libs/d3.js"></script>
8 <script src="../libs/topojson.v1.min.js"></script>
9 <script src="../libs/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>