홍길동 / onos

Go to a project
Toggle navigation Toggle navigation pinning
Simon Hunt
5a6c60c5 1 parent 6deb4ce0

Enhanced "Show-Glyphs" development web page to show zoomed icons. 

Change-Id: I2fe267a2bf67ef9f99637fd5916b31a0b657fcf3
Inline Side-by-side
Showing 4 changed files with 156 additions and 51 deletions
......@@ -16,37 +16,26 @@
-->
<!--
ONOS -- Displaying icons with Angular test page
ONOS -- Displaying All core glyphs.
-->
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Show Icons Angular</title>
<title>ONOS Core Glyphs</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">
<script type="text/javascript" src="show-glyphs.js"></script>
<style>
html,
......@@ -56,13 +45,24 @@
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: #123456;
fill: midnightblue;
fill-rule: evenodd;
}
......@@ -70,23 +70,39 @@
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>
<!-- 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>
<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>
<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>
<svg id="IconLibDefs">
<defs></defs>
</svg>
</body>
</html>
\ No newline at end of file
......
......@@ -15,12 +15,16 @@
*/
/*
ONOS GUI -- Showing Icons Test Module
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
......@@ -42,6 +46,10 @@
viewBox: '0 0 ' + dim + ' ' + dim
});
svg.on('mousemove', function () {
showZoomedGlyph(id);
});
g = svg.append('g').attr({
'class': 'glyph'
});
......@@ -70,38 +78,100 @@
.text(id);
}
angular.module('showIconsTest', ['onosSvg'])
function showZoomedGlyph(id) {
var s = d3.select('#zoomed').select('svg'),
zd = zsize();
.controller('OvShowIconsTest', ['$log', 'GlyphService', 'IconService',
function ($log, gs, icns) {
var self = this;
s.selectAll('g').remove();
gs.init();
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;
}
var div = d3.select('#showIcons');
function updateLayout() {
var box = boxSize(),
zdim = box.w - 425,
zsdim = zdim - 5;
// show device online and offline icons
icns.loadEmbeddedIcon(div, 'active', 50);
div.append('span').style('padding-left', '15px');
icns.loadEmbeddedIcon(div, 'inactive', 50);
$log.debug('updateLayout()', box);
var defs = d3.select('defs');
var c = d3.select('#container')
.style('width', box.w + 'px')
.style('height', box.h + 'px');
// show all glyphs in glyph library
gs.loadDefs(defs, null, true);
var list = gs.ids(),
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'),
ctr = 0;
list.forEach(function (id) {
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);
ctr += 1;
if (ctr%6 > 0) {
k += 1;
if (k % cols > 0) {
gDiv.append('span').style('padding-left', '15px');
} else {
gDiv.append('br');
}
});
$log.log('OvShowIconsTest has been created');
}]);
}());
......
......@@ -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);
}
// ----------------------------------------------------------------------
......
......@@ -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',
......