blob: 589ef07be55bf1fa8eb2378fbd7d3cca47295a6e [file] [log] [blame]
Simon Hunt71fbdb32014-12-01 14:32:25 -08001<!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<!--
Simon Huntd169deb2015-01-19 17:45:26 -080019 ONOS -- Glyphs library test page (old version)
Simon Hunt71fbdb32014-12-01 14:32:25 -080020 -->
21<html>
22<head>
23 <meta charset="utf-8">
24 <title>Glyphs</title>
25
26 <script src="../tp/d3.js"></script>
27
28 <style>
29 html,
30 body {
31 background-color: #ddf;
32 font-family: Arial, Helvetica, sans-serif;
33 font-size: 9pt;
34 }
35
36 svg {
37 background-color: #fff;
38 }
39
40 svg .glyph {
41 stroke: none;
42 fill: black;
43 fill-rule: evenodd;
44 }
45
46 svg .icon text {
47 text-anchor: middle;
48 font-size: 5pt;
49 fill: green;
50 stroke: none;
51 }
52
53 </style>
54</head>
55<body>
56 <!-- minimal framework to access glyphs library module -->
57 <script>
58 var libs = {};
59 var ONOS = { ui: { addLib: function (id, things) { libs[id] = things; }}};
60 </script>
61
62 <!-- import the glyphs library -->
63 <script src="../glyphs.js"></script>
64
65 <svg></svg>
66
67 <!-- code to display the glyphs in the library -->
68 <script>
69 (function () {
70 var w = 1000,
Simon Hunt21909592014-12-02 16:40:41 -080071 h = 800,
Simon Hunt71fbdb32014-12-01 14:32:25 -080072 vb = '0 0 ' + w + ' ' + h;
73
74 var svg = d3.select('svg')
75 .attr({ width: w, height: h, viewBox: vb });
76
77 // create definitions element...
78 var defs = svg.append('defs');
79
80 // create scaling group
81 var grp = svg.append('g')
82 .attr('transform', 'translate(20,20)scale(2)');
83
Simon Hunt21909592014-12-02 16:40:41 -080084 var mag = svg.append('g')
85 .attr('transform', 'translate(20,20)scale(12)');
86
Simon Hunt71fbdb32014-12-01 14:32:25 -080087 function translate(loc) {
88 return 'translate(' + loc[0] + ',' + loc[1] +')';
89 }
90
91 function icon(what, id, loc, color, bg, size) {
92 var i = '#' + id,
93 c = color || 'black',
94 b = bg || '#eef',
95 z = size || 40,
96 g;
97
98 g = what.append('g')
99 .attr({ 'class': 'icon', transform: translate(loc) });
100
101 g.append('rect')
102 .attr({ width: z, height: z, rx: 4 })
103 .style('fill', b)
104 .style('stroke', 'black')
105 .style('stroke-width', 0.5);
106
107 g.append('use')
108 .attr({ 'class': 'glyph', width: z, height: z, 'xlink:href': i })
109 .style('fill', c);
110
111 if (id !== 'bird') {
112 g.append('text')
113 .text(id)
114 .attr({ x: z / 2, y: z + 8 })
115 }
116 }
117
118
119 // import glyphs...
Simon Hunt21909592014-12-02 16:40:41 -0800120 libs.glyphs.loadDefs(defs);
Simon Hunt71fbdb32014-12-01 14:32:25 -0800121
122 // bird, top right corner
123 icon(svg, 'bird', [830,10], '#800', '#ecc', 160);
124
125 // show icons...
126 icon(grp, 'unknown', [ 0, 0]);
127 icon(grp, 'node', [ 50, 0]);
128 icon(grp, 'switch', [100, 0]);
129 icon(grp, 'roadm', [150, 0]);
130 icon(grp, 'endstation', [200, 0]);
131 icon(grp, 'router', [250, 0]);
132 icon(grp, 'bgpSpeaker', [300, 0]);
133 icon(grp, 'uiAttached', [350, 0]);
134
135 icon(grp, 'chain', [ 0, 60]);
Simon Hunt21909592014-12-02 16:40:41 -0800136 icon(grp, 'crown', [ 50, 60]);
137
138// icon(mag, 'crown', [20, 15], 'rgba(240,120,120,1)', 'transparent');
Simon Hunt71fbdb32014-12-01 14:32:25 -0800139
140 // more goodies to come soon.....
141 })();
142 </script>
143
144</body>
145</html>