Enhanced "Show-Glyphs" development web page to show zoomed icons.
Change-Id: I2fe267a2bf67ef9f99637fd5916b31a0b657fcf3
diff --git a/web/gui/src/main/webapp/_dev/show-glyphs.html b/web/gui/src/main/webapp/_dev/show-glyphs.html
new file mode 100644
index 0000000..67e4a66
--- /dev/null
+++ b/web/gui/src/main/webapp/_dev/show-glyphs.html
@@ -0,0 +1,108 @@
+<!DOCTYPE html>
+<!--
+ ~ Copyright 2016-present 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 -- Displaying All core glyphs.
+ -->
+
+<html>
+<head lang="en">
+ <meta charset="UTF-8">
+ <title>ONOS Core Glyphs</title>
+
+ <script type="text/javascript" src="../tp/angular.js"></script>
+ <script type="text/javascript" src="../tp/d3.js"></script>
+
+ <script type="text/javascript" src="../app/fw/util/util.js"></script>
+ <script type="text/javascript" src="../app/fw/util/fn.js"></script>
+
+ <script type="text/javascript" src="../app/fw/svg/svg.js"></script>
+ <script type="text/javascript" src="../app/fw/svg/svgUtil.js"></script>
+ <script type="text/javascript" src="../app/fw/svg/glyph.js"></script>
+ <script type="text/javascript" src="../app/fw/svg/glyphData.js"></script>
+
+ <script type="text/javascript" src="show-glyphs.js"></script>
+
+ <style>
+ html,
+ body {
+ background-color: #ddf;
+ font-family: Arial, Helvetica, sans-serif;
+ font-size: 9pt;
+ }
+
+ #IconLibDefs {
+ display: none;
+ }
+
+ h2 {
+ color: darkred;
+ display: inline-block;
+ }
+
+ h2#tag {
+ float: right;
+ padding-right: 20px;
+ color: midnightblue;
+ }
+
+ svg .glyph {
+ stroke: none;
+ fill: midnightblue;
+ fill-rule: evenodd;
+ }
+
+ svg.embeddedGlyph .glyph rect {
+ fill: #fff
+ }
+
+ #showGlyphs {
+ overflow-y: scroll;
+ width: 400px;
+ border: 1px solid green;
+ display: inline-block;
+ padding-left: 4px;
+ background-color: #bbd;
+ }
+ #zoomed {
+ /*border: 1px solid green;*/
+ display: inline-block;
+ }
+
+ #zoomed svg {
+ background-color: #eef;
+ position: absolute;
+ }
+
+ </style>
+
+</head>
+<body class="light" ng-app="showGlyphs" ng-controller="OvShowGlyphs as ctrl">
+
+ <h2>ONOS Core Glyphs</h2>
+ <h2 id="tag"></h2>
+ <div id="container">
+ <div id="showGlyphs" class="half vscroll"></div>
+ <div id="zoomed" class="half">
+ </div>
+ </div>
+
+ <svg id="IconLibDefs">
+ <defs></defs>
+ </svg>
+</body>
+</html>
\ No newline at end of file
diff --git a/web/gui/src/main/webapp/_dev/show-glyphs.js b/web/gui/src/main/webapp/_dev/show-glyphs.js
new file mode 100644
index 0000000..861cdff
--- /dev/null
+++ b/web/gui/src/main/webapp/_dev/show-glyphs.js
@@ -0,0 +1,177 @@
+/*
+ * Copyright 2016-present 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 GUI -- Display ONOS Glyphs (development module)
+ */
+
+(function () {
+ 'use strict';
+
+ var $log, $window, fs, gs;
+
+ var vspace = 60;
+
+ // assuming the glyph is a square
+ // div is a D3 selection of the <DIV> element into which icon should load
+ // size is the size of the glyph
+ // id is the symbol id
+ // rer is the rectangle the glyph will be in's rounded corners
+ // svgClass is the class name for your glyph
+ function createGlyph(div, size, id, rer, svgClass) {
+ var dim = size || 20,
+ texty = 30,
+ gid = id || 'unknown',
+ rx = rer || 4,
+ svgCls = svgClass || 'embeddedGlyph',
+ svg, g;
+
+ svg = div.append('svg').attr({
+ 'class': svgCls,
+ width: dim,
+ height: dim + texty,
+ viewBox: '0 0 ' + dim + ' ' + dim
+ });
+
+ svg.on('mousemove', function () {
+ showZoomedGlyph(id);
+ });
+
+ g = svg.append('g').attr({
+ 'class': 'glyph'
+ });
+
+ g.append('rect').attr({
+ width: dim,
+ height: dim,
+ rx: rx
+ });
+
+ g.append('use').attr({
+ width: dim,
+ height: dim,
+ 'class': 'glyph',
+ 'xlink:href': '#' + gid
+ });
+
+ g.append('text')
+ .attr({
+ 'text-anchor': 'left',
+ y: '1em',
+ x: 0,
+ transform: 'translate(0, ' + dim + ')scale(0.8)'
+ })
+ .style('fill', '#800')
+ .text(id);
+ }
+
+ function showZoomedGlyph(id) {
+ var s = d3.select('#zoomed').select('svg'),
+ zd = zsize();
+
+ s.selectAll('g').remove();
+
+ var g = s.append('g').attr({
+ 'class': 'glyph'
+ });
+ g.append('use').attr({
+ width: zd,
+ height: zd,
+ 'class': 'glyph',
+ 'xlink:href': '#' + id
+ });
+
+ d3.select('#tag').text(id);
+ }
+
+ function boxSize() {
+ return {
+ w: $window.innerWidth,
+ h: $window.innerHeight - vspace
+ };
+ }
+
+ function zsize() {
+ return boxSize().w - 430;
+ }
+
+ function updateLayout() {
+ var box = boxSize(),
+ zdim = box.w - 425,
+ zsdim = zdim - 5;
+
+ $log.debug('updateLayout()', box);
+
+ var c = d3.select('#container')
+ .style('width', box.w + 'px')
+ .style('height', box.h + 'px');
+
+ c.select('#showGlyphs').style('height', (box.h - 4) + 'px');
+ var z = c.select('#zoomed').style('height', (box.h - 4) + 'px')
+ .style('width', zdim + 'px');
+
+ var zsvg = z.select('svg');
+ if (zsvg.empty()) {
+ zsvg = z.append('svg');
+ }
+ zsvg.style({
+ width: zsdim + 'px',
+ height: zsdim + 'px'
+ });
+ zsvg.selectAll('g').remove();
+ d3.select('#tag').text('');
+ }
+
+ function watchWindow() {
+ var w = angular.element($window);
+ w.bind('resize', function () {
+ updateLayout();
+ });
+ }
+
+
+ angular.module('showGlyphs', ['onosUtil', 'onosSvg'])
+ .controller('OvShowGlyphs',
+ ['$log', '$window', 'FnService', 'GlyphService',
+
+ function (_$log_, _$window_, _fs_, _gs_) {
+ var defs = d3.select('defs'),
+ gDiv = d3.select('#showGlyphs'),
+ cols = 6,
+ k = 0;
+
+ $log = _$log_;
+ $window = _$window_;
+ fs = _fs_;
+ gs = _gs_;
+
+ updateLayout();
+ watchWindow();
+
+ gs.init();
+ gs.loadDefs(defs, null, true);
+
+ gs.ids().forEach(function (id) {
+ createGlyph(gDiv, 50, id);
+ k += 1;
+ if (k % cols > 0) {
+ gDiv.append('span').style('padding-left', '15px');
+ } else {
+ gDiv.append('br');
+ }
+ });
+ }]);
+}());
diff --git a/web/gui/src/main/webapp/_dev/show-icons-test.js b/web/gui/src/main/webapp/_dev/show-icons-test.js
deleted file mode 100644
index 9553613..0000000
--- a/web/gui/src/main/webapp/_dev/show-icons-test.js
+++ /dev/null
@@ -1,107 +0,0 @@
-/*
- * Copyright 2016-present 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 GUI -- Showing Icons Test Module
- */
-
-(function () {
- 'use strict';
-
- // assuming the glyph is a square
- // div is a D3 selection of the <DIV> element into which icon should load
- // size is the size of the glyph
- // id is the symbol id
- // rer is the rectangle the glyph will be in's rounded corners
- // svgClass is the class name for your glyph
- function createGlyph(div, size, id, rer, svgClass) {
- var dim = size || 20,
- texty = 30,
- gid = id || 'unknown',
- rx = rer || 4,
- svgCls = svgClass || 'embeddedGlyph',
- svg, g;
-
- svg = div.append('svg').attr({
- 'class': svgCls,
- width: dim,
- height: dim + texty,
- viewBox: '0 0 ' + dim + ' ' + dim
- });
-
- g = svg.append('g').attr({
- 'class': 'glyph'
- });
-
- g.append('rect').attr({
- width: dim,
- height: dim,
- rx: rx
- });
-
- g.append('use').attr({
- width: dim,
- height: dim,
- 'class': 'glyph',
- 'xlink:href': '#' + gid
- });
-
- g.append('text')
- .attr({
- 'text-anchor': 'left',
- y: '1em',
- x: 0,
- transform: 'translate(0, ' + dim + ')scale(0.8)'
- })
- .style('fill', '#800')
- .text(id);
- }
-
- angular.module('showIconsTest', ['onosSvg'])
-
- .controller('OvShowIconsTest', ['$log', 'GlyphService', 'IconService',
- function ($log, gs, icns) {
- var self = this;
-
- gs.init();
-
- var div = d3.select('#showIcons');
-
- // show device online and offline icons
- icns.loadEmbeddedIcon(div, 'active', 50);
- div.append('span').style('padding-left', '15px');
- icns.loadEmbeddedIcon(div, 'inactive', 50);
-
- var defs = d3.select('defs');
-
- // show all glyphs in glyph library
- gs.loadDefs(defs, null, true);
- var list = gs.ids(),
- gDiv = d3.select('#showGlyphs'),
- ctr = 0;
- list.forEach(function (id) {
- createGlyph(gDiv, 50, id);
- ctr += 1;
- if (ctr%6 > 0) {
- gDiv.append('span').style('padding-left', '15px');
- } else {
- gDiv.append('br');
- }
- });
-
- $log.log('OvShowIconsTest has been created');
- }]);
-}());
diff --git a/web/gui/src/main/webapp/_dev/show-icons.html b/web/gui/src/main/webapp/_dev/show-icons.html
deleted file mode 100644
index c128065..0000000
--- a/web/gui/src/main/webapp/_dev/show-icons.html
+++ /dev/null
@@ -1,92 +0,0 @@
-<!DOCTYPE html>
-<!--
- ~ Copyright 2016-present 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 -- Displaying icons with Angular test page
- -->
-
-<html>
-<head lang="en">
- <meta charset="UTF-8">
- <title>Show Icons Angular</title>
-
- <script type="text/javascript" src="../tp/angular.js"></script>
- <script type="text/javascript" src="../tp/angular-route.js"></script>
-
- <script type="text/javascript" src="../tp/d3.js"></script>
-
- <script type="text/javascript" src="../app/fw/util/util.js"></script>
- <script type="text/javascript" src="../app/fw/util/fn.js"></script>
- <script type="text/javascript" src="../app/fw/util/theme.js"></script>
- <script type="text/javascript" src="../app/fw/util/keys.js"></script>
-
- <script type="text/javascript" src="../app/fw/svg/svg.js"></script>
- <script type="text/javascript" src="../app/fw/svg/svgUtil.js"></script>
- <script type="text/javascript" src="../app/fw/svg/glyph.js"></script>
- <script type="text/javascript" src="../app/fw/svg/glyphData.js"></script>
- <script type="text/javascript" src="../app/fw/svg/icon.js"></script>
- <script type="text/javascript" src="../app/fw/svg/geodata.js"></script>
- <script type="text/javascript" src="../app/fw/svg/map.js"></script>
- <script type="text/javascript" src="../app/fw/svg/zoom.js"></script>
-
- <script type="text/javascript" src="show-icons-test.js"></script>
-
- <link rel="stylesheet" href="../app/common.css">
- <link rel="stylesheet" href="../app/fw/svg/icon.css">
-
- <style>
- html,
- body {
- background-color: #ddf;
- font-family: Arial, Helvetica, sans-serif;
- font-size: 9pt;
- }
-
- h2 {
- color: darkred;
- }
-
- svg .glyph {
- stroke: none;
- fill: #123456;
- fill-rule: evenodd;
- }
-
- svg.embeddedGlyph .glyph rect {
- fill: #fff
- }
-
- </style>
-
-</head>
-<!-- outline for using a controller in Angular -->
-<body class="light" ng-app="showIconsTest" ng-controller="OvShowIconsTest as ctrl">
- <h2>Displaying Icons and Glyphs with Angular</h2>
- <div id="showIcons">
- <p>Show all icons in icon library:<br></p>
- </div>
- <hr>
- <div id="showGlyphs">
- <p>Show all glyphs in glyph library:</p>
- <p>(Displays checkMark and xMark too, because icons are built on top
- of glyphs.)</p>
- </div>
-
-
-
-</body>
-</html>
\ No newline at end of file
diff --git a/web/gui/src/main/webapp/app/fw/svg/glyphData.js b/web/gui/src/main/webapp/app/fw/svg/glyphData.js
index 7cb5387..3000bff 100644
--- a/web/gui/src/main/webapp/app/fw/svg/glyphData.js
+++ b/web/gui/src/main/webapp/app/fw/svg/glyphData.js
@@ -564,6 +564,26 @@
'M71.1,79.3c11.2,7.6,24.6,6.4,22.1-11.7' +
'M36.4,76.8c3.4,13.3,35.4,11.6,36.1-1.4' +
'M70.4,31c11.8-10.4,26.2-5.2,24.7,10.1'
+ },
+
+ mojoDataSet = {
+ _viewbox: '0 0 100 100',
+
+ mojo_cloud: 'M50.5,70.2H29.9a20.6,20.6,0,0,1-5.3-.6' +
+ 'C14,66.6,10.2,53.6,17.1,45' +
+ 'c5.3-6.6,15-6.7,20.6-2.5,1.5,1.2,2,2.3,1,3.3s-2.2.8-3.4,0' +
+ 'A11.6,11.6,0,0,0,22,45.7' +
+ 'c-3.7,2.4-5.2,8.9-3.9,12.5,1.8,5.2,5.4,7.9,11,8H72.1' +
+ 'A11.5,11.5,0,0,0,83.7,55.8c0.6-5.2-3.3-10.6-8.9-11.8' +
+ 'a15.2,15.2,0,0,0-5.1,0c-2,.3-3,0-3.2-1.4s1-2.3,2.4-2.6' +
+ 'c6.2-1.2,11.5.5,15.5,5.4' +
+ 'a14.2,14.2,0,0,1,2,15.7,14.8,14.8,0,0,1-13.8,9.1' +
+ 'c-7.4.2-14.7,0.1-22.1,0.1h0Z' +
+ 'M50.6,30a11.5,11.5,0,0,0-10.9,7l-0.3.9a2,2,0,0,1-2.7,1.6' +
+ 'c-1.5-.5-1.5-1.7-1.1-3A15.8,15.8,0,0,1,48.4,26' +
+ 'C58.6,24.8,67.3,34.4,65,44.5' +
+ 'a4.9,4.9,0,0,1-1.7,2.4,1.9,1.9,0,0,1-1.7-.5,5.3,5.3,0,0,' +
+ '1-.4-2.9,11,11,0,0,0-2.1-9C56.8,31.7,54,29.8,50.6,30Z'
};
@@ -575,6 +595,7 @@
gsApi.registerGlyphSet(glyphDataSet);
gsApi.registerGlyphSet(badgeDataSet);
gsApi.registerGlyphs(spriteData);
+ gsApi.registerGlyphSet(mojoDataSet);
}
// ----------------------------------------------------------------------
diff --git a/web/gui/src/main/webapp/tests/app/fw/svg/glyph-spec.js b/web/gui/src/main/webapp/tests/app/fw/svg/glyph-spec.js
index 00a18a0..fbfcf8d 100644
--- a/web/gui/src/main/webapp/tests/app/fw/svg/glyph-spec.js
+++ b/web/gui/src/main/webapp/tests/app/fw/svg/glyph-spec.js
@@ -18,12 +18,10 @@
ONOS GUI -- SVG -- Glyph Service - Unit Tests
*/
-//FIXME Size are changed
-
describe('factory: fw/svg/glyph.js', function() {
var $log, fs, gs, d3Elem, svg;
- var numBaseGlyphs = 51,
+ var numBaseGlyphs = 52,
vbBird = '352 224 113 112',
vbGlyph = '0 0 110 110',
vbBadge = '0 0 10 10',