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>
diff --git a/web/gui/src/main/webapp/_sdh/icons.html b/web/gui/src/main/webapp/_sdh/icons.html
deleted file mode 100644
index 0422854..0000000
--- a/web/gui/src/main/webapp/_sdh/icons.html
+++ /dev/null
@@ -1,215 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
- <meta charset="utf-8">
- <title>Icons</title>
-
- <script src="../tp/d3.js"></script>
- <script src="../tp/topojson.v1.min.js"></script>
- <script src="../tp/jquery-2.1.1.min.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 .device rect.iconBg {
- fill: #ddd;
- stroke: #000;
- }
-
- .hide {
- visibility: hidden;
- }
-
- </style>
-</head>
-<body>
- <svg width="1000px" height="600px" viewBox="0 0 1000 600" >
- <defs>
- <symbol id="router" class="glyph" viewBox="-55 -55 110 110">
- <path d="M-45 0 A45 45 0 0 1 45 0 A45 45 0 0 1 -45 0
- M -35 -5 l 12 0, 0 -8, 18 13, -18 13, 0 -8, -12 0 z
- M 35 -5 l -12 0, 0 -8, -18 13, 18 13, 0 -8, 12 0 z
- M -5 -8 l 0 -12, -8 0, 13 -18, 13 18, -8 0, 0 12 z
- M -5 8 l 0 12, -8 0, 13 18, 13 -18, -8 0, 0 -12 z
- "></path>
- </symbol>
-
- <symbol id="bgpSpeaker" class="glyph" viewBox="-55 -55 110 110">
- <path d="M-45 -15
- a45 35 0 0 1 90 0
- Q45 22 0 45
- Q-45 22 -45 -15
- z
-
- M -5 -26 l 12 0, 0 -8, 18 13, -18 13, 0 -8, -12 0 z
- M 5 2 l -12 0, 0 -8, -18 13, 18 13, 0 -8, 12 0 z
-
- "></path>
- <!-- a45 45 0 0 1 -10 30
- -->
- </symbol>
-
- <symbol id="switch" class="glyph" viewBox="-55 -55 110 110">
- <path d="M-45 -35 a10 10 0 0 1 10 -10 h70
- a 10 10 0 0 1 10 10 v70
- a 10 10 0 0 1 -10 10 h -70
- a 10 10 0 0 1 -10 -10 z
- M 5 -29 l 12 0, 0 -8, 18 13, -18 13, 0 -8, -12 0 z
- M 5 5 l 12 0, 0 -8, 18 13, -18 13, 0 -8, -12 0 z
- M -5 -15 l -12 0, 0 -8, -18 13, 18 13, 0 -8, 12 0 z
- M -5 19 l -12 0, 0 -8, -18 13, 18 13, 0 -8, 12 0 z
- "></path>
- </symbol>
-
- <symbol id="roadm" class="glyph" viewBox="-55 -55 110 110">
- <path d="M-45 -20 l25 -25 h40 l25 25 v40
- l-25 25 h-40 l-25 -25 z
-
- M 3 -29 l 12 0, 0 -8, 18 13, -18 13, 0 -8, -12 0 z
- M 3 5 l 12 0, 0 -8, 18 13, -18 13, 0 -8, -12 0 z
- M -3 -15 l -12 0, 0 -8, -18 13, 18 13, 0 -8, 12 0 z
- M -3 19 l -12 0, 0 -8, -18 13, 18 13, 0 -8, 12 0 z
- "></path>
- </symbol>
-
- <symbol id="node" class="glyph" viewBox="-55 -55 110 110">
- <path d="M-40 45 a5 5 0 0 1 -5 -5 v-65 a5 5 0 0 1 5 -5
- h80 a5 5 0 0 1 5 5 v65 a5 5 0 0 1 -5 5 z
- M-41 -32.5 l11 -11 a10 3 0 0 1 10 -2 h40
- a10 3 0 0 1 10 2 l11 11 z
- M-39 -20 a5 5 0 0 1 10 0 a5 5 0 0 1 -10 0 z
- "></path>
- </symbol>
-
- <symbol id="nodeSlave" class="glyph" viewBox="-55 -55 110 110">
- <path d="M-40 45 a5 5 0 0 1 -5 -5 v-65 a5 5 0 0 1 5 -5
- h80 a5 5 0 0 1 5 5 v65 a5 5 0 0 1 -5 5 z
- M-41 -32.5 l11 -11 a10 3 0 0 1 10 -2 h40
- a10 3 0 0 1 10 2 l11 11 z
- M-39 -20 a5 5 0 0 1 10 0 a5 5 0 0 1 -10 0 z
-
- M-6 -6
- l6 -6
- a8.485 8.485 0 0 1 12 12
- l-6 6
- a8.485 8.485 0 0 1 -13 -2
- l3 -3
- a4 4 0 0 0 6 1
- l8 -8
- a2.8 2.8 0 0 0 -5 -5
- l-5 5
- z
-
- "></path>
- </symbol>
-
- <symbol id="host" class="glyph" viewBox="-55 -55 110 110">
- <path d="M-45 -40 a5 5 0 0 1 5 -5 h65 a5 5 0 0 1 5 5
- v80 a5 5 0 0 1 -5 5 h-65 a5 5 0 0 1 -5 -5 z
- M32.5 -41 l11 11 a3 10 0 0 1 2 10 v40
- a3 10 0 0 1 -2 10 l-11 11 z
-
- M-38 -36
- 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
- a2 2 0 0 1 -2 -2
- z
-
- M-35 -35 h54 v10 h-54 z
- M-35 -22 h54 v10 h-54 z
-
- M-13 15 a5 5 0 0 1 10 0 a5 5 0 0 1 -10 0 z
- "></path>
- </symbol>
-
- <symbol id="unknown" class="glyph" viewBox="-55 -55 110 110">
- <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>
- </symbol>
-
-
-
-
- </defs>
-
-
- <g transform="translate(10,10)scale(4)translate(0,20)" >
-
- <g class="hide">
- <!--link-->
- <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
- 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
- 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
- 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
- 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
- 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
- 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
- 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
- C274.561,395.092,246.42,392.342,220.326,382.186z"></path>
-
-
- <!--crown-->
- <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
- 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
- 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
- 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
- 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
- S94.257,28.342,94.257,32.808z M21.915,84.297h56.173v-7.658H21.915V84.297z"></path>
- </g>
-
-
- <g class="show">
- <g class="device" transform="translate(0,0)">
- <rect x="0" y="0" width="40" height="40" rx="4" class="iconBg"></rect>
- <use xlink:href="#router" width="40" height="40"></use>
- </g>
-
- <g class="device" transform="translate(50,0)">
- <rect x="0" y="0" width="40" height="40" rx="4" class="iconBg"></rect>
- <use xlink:href="#switch" width="40" height="40"></use>
- </g>
-
- <g class="device" transform="translate(100,0)">
- <rect x="0" y="0" width="40" height="40" rx="4" class="iconBg"></rect>
- <use xlink:href="#roadm" width="40" height="40"></use>
- </g>
-
- <g class="device" transform="translate(0,50)">
- <rect x="0" y="0" width="40" height="40" rx="4" class="iconBg"></rect>
- <use xlink:href="#node" width="40" height="40"></use>
- </g>
-
- <g class="device" transform="translate(50,50)">
- <rect x="0" y="0" width="40" height="40" rx="4" class="iconBg"></rect>
- <use xlink:href="#host" width="40" height="40"></use>
- </g>
-
- <g class="device" transform="translate(100,50)">
- <rect x="0" y="0" width="40" height="40" rx="4" class="iconBg"></rect>
- <use xlink:href="#bgpSpeaker" width="40" height="40"></use>
- </g>
-
- <g class="device" transform="translate(150,0)">
- <rect x="0" y="0" width="40" height="40" rx="4" class="iconBg"></rect>
- <use xlink:href="#unknown" width="40" height="40"></use>
- </g>
- </g>
- </g>
- </svg>
-</body>
-</html>
diff --git a/web/gui/src/main/webapp/_sdh/oblique.html b/web/gui/src/main/webapp/_sdh/oblique.html
index 868ba33..c6a8210 100644
--- a/web/gui/src/main/webapp/_sdh/oblique.html
+++ b/web/gui/src/main/webapp/_sdh/oblique.html
@@ -1,5 +1,21 @@
<!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.
+-->
+
+<!--
Testing transformations for transitioning between overhead and
perspective projections of two layers.
@@ -11,7 +27,6 @@
<title>Layer Transformations</title>
<script src="../tp/d3.js"></script>
- <script src="../tp/topojson.v1.min.js"></script>
<script src="../tp/jquery-2.1.1.min.js"></script>
<style>