Enhanced "Show-Glyphs" development web page to show zoomed icons.
Change-Id: I2fe267a2bf67ef9f99637fd5916b31a0b657fcf3
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');
+ }
+ });
+ }]);
+}());