GUI -- Cleaned up Glyphs library code.
- added new test page; removed old test page.
- added copyright to oblique test page.
Change-Id: If8770fbcadc82a1a680c8ba83b3b31beadabc8d4
diff --git a/web/gui/src/main/webapp/_sdh/glyphs.html b/web/gui/src/main/webapp/_sdh/glyphs.html
new file mode 100644
index 0000000..cf45922
--- /dev/null
+++ b/web/gui/src/main/webapp/_sdh/glyphs.html
@@ -0,0 +1,143 @@
+<!DOCTYPE html>
+<!--
+ ~ Copyright 2014 Open Networking Laboratory
+ ~
+ ~ Licensed under the Apache License, Version 2.0 (the "License");
+ ~ you may not use this file except in compliance with the License.
+ ~ You may obtain a copy of the License at
+ ~
+ ~ http://www.apache.org/licenses/LICENSE-2.0
+ ~
+ ~ Unless required by applicable law or agreed to in writing, software
+ ~ distributed under the License is distributed on an "AS IS" BASIS,
+ ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ ~ See the License for the specific language governing permissions and
+ ~ limitations under the License.
+ -->
+
+<!--
+ ONOS -- Glyphs library test page
+
+ @author Simon Hunt
+ -->
+<html>
+<head>
+ <meta charset="utf-8">
+ <title>Glyphs</title>
+
+ <script src="../tp/d3.js"></script>
+
+ <style>
+ html,
+ body {
+ background-color: #ddf;
+ font-family: Arial, Helvetica, sans-serif;
+ font-size: 9pt;
+ }
+
+ svg {
+ background-color: #fff;
+ }
+
+ svg .glyph {
+ stroke: none;
+ fill: black;
+ fill-rule: evenodd;
+ }
+
+ svg .icon text {
+ text-anchor: middle;
+ font-size: 5pt;
+ fill: green;
+ stroke: none;
+ }
+
+ </style>
+</head>
+<body>
+ <!-- minimal framework to access glyphs library module -->
+ <script>
+ var libs = {};
+ var ONOS = { ui: { addLib: function (id, things) { libs[id] = things; }}};
+ </script>
+
+ <!-- import the glyphs library -->
+ <script src="../glyphs.js"></script>
+
+ <svg></svg>
+
+ <!-- code to display the glyphs in the library -->
+ <script>
+ (function () {
+ var w = 1000,
+ h = 400,
+ vb = '0 0 ' + w + ' ' + h;
+
+ var svg = d3.select('svg')
+ .attr({ width: w, height: h, viewBox: vb });
+
+ // create definitions element...
+ var defs = svg.append('defs');
+
+ // create scaling group
+ var grp = svg.append('g')
+ .attr('transform', 'translate(20,20)scale(2)');
+
+ function translate(loc) {
+ return 'translate(' + loc[0] + ',' + loc[1] +')';
+ }
+
+ function icon(what, id, loc, color, bg, size) {
+ var i = '#' + id,
+ c = color || 'black',
+ b = bg || '#eef',
+ z = size || 40,
+ g;
+
+ g = what.append('g')
+ .attr({ 'class': 'icon', transform: translate(loc) });
+
+ g.append('rect')
+ .attr({ width: z, height: z, rx: 4 })
+ .style('fill', b)
+ .style('stroke', 'black')
+ .style('stroke-width', 0.5);
+
+ g.append('use')
+ .attr({ 'class': 'glyph', width: z, height: z, 'xlink:href': i })
+ .style('fill', c);
+
+ if (id !== 'bird') {
+ g.append('text')
+ .text(id)
+ .attr({ x: z / 2, y: z + 8 })
+ }
+ }
+
+
+ // import glyphs...
+ libs.glyphs.defBird(defs);
+ libs.glyphs.defGlyphs(defs);
+ libs.glyphs.defBadges(defs);
+
+ // bird, top right corner
+ icon(svg, 'bird', [830,10], '#800', '#ecc', 160);
+
+ // show icons...
+ icon(grp, 'unknown', [ 0, 0]);
+ icon(grp, 'node', [ 50, 0]);
+ icon(grp, 'switch', [100, 0]);
+ icon(grp, 'roadm', [150, 0]);
+ icon(grp, 'endstation', [200, 0]);
+ icon(grp, 'router', [250, 0]);
+ icon(grp, 'bgpSpeaker', [300, 0]);
+ icon(grp, 'uiAttached', [350, 0]);
+
+ icon(grp, 'chain', [ 0, 60]);
+
+ // more goodies to come soon.....
+ })();
+ </script>
+
+</body>
+</html>