mirrors/onos
1
0
Fork 0
mirror of https://github.com/opennetworkinglab/onos.git synced 2025-10-24 05:41:01 +02:00
Code Issues Projects Releases Wiki Activity

GUI -- Working towards embedding icons in tables. WIP.

Browse Source 
- Skeleton of icon directive added.
- icons embedded in table - test HTML file.
- Augmented GlyphService.loadDefs() to allow subset of glyph ids to be specified.

Change-Id: I775a958ef9dc35b0b89a126d5c0497f72a721b71
This commit is contained in:
Simon Hunt 2015-01-16 16:32:24 -08:00
parent 4367abc99b
commit 58f23bbf01
5 changed files with 227 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

133
web/gui/src/main/webapp/_sdh/embedded-icon.html Normal file
View File

@ -0,0 +1,133 @@
<!DOCTYPE html>
<!--
~ Copyright 2015 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 -- Embedded icon test page
@author Simon Hunt
@author Bri Prebilic Cole
-->
<html>
<head>
<meta charset="utf-8">
<title>Embedded Icons</title>
<script src="../tp/d3.js"></script>
<link rel="stylesheet" href="../app/common.css">
<style>
html,
body {
background-color: #fff;
font-family: Arial, Helvetica, sans-serif;
font-size: 9pt;
}
svg .icon .glyph {
stroke: none;
fill: white;
fill-rule: evenodd;
}
svg .icon.deviceOnline {
fill: green;
}
svg .icon.deviceOffline {
fill: darkred;
}
svg .icon rect {
stroke: black;
stroke-width: 1px;
}
</style>
</head>
<body class="light">
<!-- minimal framework to access glyphs library module -->
<script>
var libs = {};
var ONOS = { ui: { addLib: function (id, things) { libs[id] = things; }}};
</script>
<!-- Test HTML -->
<div>
<table class="summary-list">
<tr> <th>One</th> <th>Two</th> <th>Three</th> </tr>
<tr>
<td>
<div icon icon-id="deviceOnline">
<!-- icon directive needs to inject the following structure -->
<!-- ------------------------------------------------ -->
<svg width="20" height="20" viewBox="0 0 50 50">
<g class="icon deviceOnline">
<rect width="50" height="50" rx="4"></rect>
<use class="glyph" xlink:href="#ui" width="50" height="50"></use>
</g>
</svg>
<!-- ------------------------------------------------ -->
</div>
</td>
<td>Some text</td>
<td>Some text</td>
</tr>
<tr>
<td>
<div icon icon-id="deviceOffline">
<!-- icon directive needs to inject the following structure -->
<!-- ------------------------------------------------ -->
<svg width="20" height="20" viewBox="0 0 50 50">
<g class="icon deviceOffline">
<rect width="50" height="50" rx="4"></rect>
<use class="glyph" xlink:href="#ui" width="50" height="50"></use>
</g>
</svg>
<!-- ------------------------------------------------ -->
</div>
</td>
<td>Some text</td>
<td>Some Other text</td>
</tr>
</table>
</div>
<!-- common definitions for other SVG elements to use -->
<svg width="0" height="0">
<defs>
<symbol id="ui" viewBox="0 0 10 10">
<path d="M2,2.5a.5,.5,0,0,1,.5-.5h5
a.5,.5,0,0,1,.5,.5v3a.5,.5,0,0,1-.5,.5h-5a.5,
.5,0,0,1-.5-.5zM2.5,2.8a.3,.3,0,0,1,.3-.3
h4.4a.3,.3,0,0,1,.3,.3v2.4a.3,.3,0,0,1-.3,
.3h-4.4a.3,.3,0,0,1-.3-.3zM2,6.55h6l1,1.45h-8z">
</path>
</symbol>
</defs>
</svg>
</body>
</html>

3
web/gui/src/main/webapp/app/common.css
View File

@ -22,8 +22,7 @@
*/ */
table.summary-list { table.summary-list {
/*border: 1px solid red;*/ margin: 4px 4px;
margin: 4px 50px;
font-size: 10pt; font-size: 10pt;
} }

19
web/gui/src/main/webapp/app/directives.js
View File

@ -56,4 +56,23 @@
}; };
}]) }])
// create icon directive, so that we can inject icons into
// HTML tables etc.
.directive('icon', ['GlyphService', function (gs) {
return {
templateUrl: 'toBeDecided-iconContext.html',
restrict: 'A',
link: function (scope, element, attrs) {
// TODO: implement this
// needs to pull out the parameters for the icon
// from the attributes of the element, and use those
// as arguments to the IconService.addIcon(...) call.
}
};
}]);
}()); }());

21
web/gui/src/main/webapp/app/fw/svg/glyph.js
View File

@ -23,6 +23,7 @@
'use strict'; 'use strict';
var $log, var $log,
fs,
glyphs = d3.map(), glyphs = d3.map(),
msgGS = 'GlyphService.'; msgGS = 'GlyphService.';
@ -121,8 +122,9 @@
// ---------------------------------------------------------------------- // ----------------------------------------------------------------------
angular.module('onosSvg') angular.module('onosSvg')
.factory('GlyphService', ['$log', function (_$log_) { .factory('GlyphService', ['$log', 'FnService', function (_$log_, _fs_) {
$log = _$log_; $log = _$log_;
fs = _fs_;
function clear() { function clear() {
// start with a fresh map // start with a fresh map
@ -166,15 +168,20 @@
} }
// Note: defs should be a D3 selection of a single <defs> element // Note: defs should be a D3 selection of a single <defs> element
function loadDefs(defs) { function loadDefs(defs, glyphIds) {
var list = fs.isA(glyphIds) || ids();
// remove all existing content // remove all existing content
defs.html(null); defs.html(null);
// load up the currently registered glyphs // load up the requested glyphs
glyphs.values().forEach(function (g) { list.forEach(function (id) {
defs.append('symbol') var g = glyph(id);
.attr({ id: g.id, viewBox: g.vb }) if (g) {
.append('path').attr('d', g.d); defs.append('symbol')
.attr({ id: g.id, viewBox: g.vb })
.append('path').attr('d', g.d);
}
}); });
} }

94
web/gui/src/main/webapp/tests/app/fw/svg/glyph-spec.js
View File

@ -25,7 +25,24 @@ describe('factory: fw/svg/glyph.js', function() {
var numBaseGlyphs = 11, var numBaseGlyphs = 11,
vbBird = '352 224 113 112', vbBird = '352 224 113 112',
vbGlyph = '0 0 110 110', vbGlyph = '0 0 110 110',
vbBadge = '0 0 10 10'; vbBadge = '0 0 10 10',
prefixLookup = {
bird: 'M427.7,300.4',
unknown: 'M35,40a5',
node: 'M15,100a5',
switch: 'M10,20a10',
roadm: 'M10,35l25-',
endstation: 'M10,15a5,5',
router: 'M10,55A45,45',
bgpSpeaker: 'M10,40a45,35',
chain: 'M60.4,77.6c-',
crown: 'M99.5,21.6c0,',
uiAttached: 'M2,2.5a.5,.5',
// our test ones..
triangle: 'M.5,.2',
diamond: 'M.2,.5'
};
beforeEach(module('onosUtil', 'onosSvg')); beforeEach(module('onosUtil', 'onosSvg'));
@ -47,7 +64,7 @@ describe('factory: fw/svg/glyph.js', function() {
it('should define api functions', function () { it('should define api functions', function () {
expect(fs.areFunctions(gs, [ expect(fs.areFunctions(gs, [
'init', 'register', 'ids', 'glyph', 'loadDefs' 'clear', 'init', 'register', 'ids', 'glyph', 'loadDefs'
])).toBeTruthy(); ])).toBeTruthy();
}); });
@ -55,20 +72,22 @@ describe('factory: fw/svg/glyph.js', function() {
expect(gs.ids()).toEqual([]); expect(gs.ids()).toEqual([]);
}); });
it('should load the base set of glyphs', function () { it('should load the base set of glyphs into the cache', function () {
gs.init(); gs.init();
expect(gs.ids().length).toEqual(numBaseGlyphs); expect(gs.ids().length).toEqual(numBaseGlyphs);
}); });
it('should remove glyphs on clear', function () { it('should remove glyphs from the cache on clear', function () {
gs.init(); gs.init();
expect(gs.ids().length).toEqual(numBaseGlyphs); expect(gs.ids().length).toEqual(numBaseGlyphs);
gs.clear(); gs.clear();
expect(gs.ids().length).toEqual(0); expect(gs.ids().length).toEqual(0);
}); });
function verifyGlyphLoaded(id, vbox, prefix) { function verifyGlyphLoadedInCache(id, vbox, expPfxId) {
var glyph = gs.glyph(id), var pfxId = expPfxId || id,
glyph = gs.glyph(id),
prefix = prefixLookup[pfxId],
plen = prefix.length; plen = prefix.length;
expect(fs.contains(gs.ids(), id)).toBeTruthy(); expect(fs.contains(gs.ids(), id)).toBeTruthy();
expect(glyph).toBeDefined(); expect(glyph).toBeDefined();
@ -79,47 +98,47 @@ describe('factory: fw/svg/glyph.js', function() {
it('should load the bird glyph', function() { it('should load the bird glyph', function() {
gs.init(); gs.init();
verifyGlyphLoaded('bird', vbBird, 'M427.7,300.4'); verifyGlyphLoadedInCache('bird', vbBird);
}); });
it('should load the unknown glyph', function() { it('should load the unknown glyph', function() {
gs.init(); gs.init();
verifyGlyphLoaded('unknown', vbGlyph, 'M35,40a5'); verifyGlyphLoadedInCache('unknown', vbGlyph);
}); });
it('should load the node glyph', function() { it('should load the node glyph', function() {
gs.init(); gs.init();
verifyGlyphLoaded('node', vbGlyph, 'M15,100a5'); verifyGlyphLoadedInCache('node', vbGlyph);
}); });
it('should load the switch glyph', function() { it('should load the switch glyph', function() {
gs.init(); gs.init();
verifyGlyphLoaded('switch', vbGlyph, 'M10,20a10'); verifyGlyphLoadedInCache('switch', vbGlyph);
}); });
it('should load the roadm glyph', function() { it('should load the roadm glyph', function() {
gs.init(); gs.init();
verifyGlyphLoaded('roadm', vbGlyph, 'M10,35l25-'); verifyGlyphLoadedInCache('roadm', vbGlyph);
}); });
it('should load the endstation glyph', function() { it('should load the endstation glyph', function() {
gs.init(); gs.init();
verifyGlyphLoaded('endstation', vbGlyph, 'M10,15a5,5'); verifyGlyphLoadedInCache('endstation', vbGlyph);
}); });
it('should load the router glyph', function() { it('should load the router glyph', function() {
gs.init(); gs.init();
verifyGlyphLoaded('router', vbGlyph, 'M10,55A45,45'); verifyGlyphLoadedInCache('router', vbGlyph);
}); });
it('should load the bgpSpeaker glyph', function() { it('should load the bgpSpeaker glyph', function() {
gs.init(); gs.init();
verifyGlyphLoaded('bgpSpeaker', vbGlyph, 'M10,40a45,35'); verifyGlyphLoadedInCache('bgpSpeaker', vbGlyph);
}); });
it('should load the chain glyph', function() { it('should load the chain glyph', function() {
gs.init(); gs.init();
verifyGlyphLoaded('chain', vbGlyph, 'M60.4,77.6c-'); verifyGlyphLoadedInCache('chain', vbGlyph);
}); });
it('should load the crown glyph', function() { it('should load the crown glyph', function() {
gs.init(); gs.init();
verifyGlyphLoaded('crown', vbGlyph, 'M99.5,21.6c0'); verifyGlyphLoadedInCache('crown', vbGlyph);
}); });
it('should load the uiAttached glyph', function() { it('should load the uiAttached glyph', function() {
gs.init(); gs.init();
verifyGlyphLoaded('uiAttached', vbBadge, 'M2,2.5a.5,.5'); verifyGlyphLoadedInCache('uiAttached', vbBadge);
}); });
// define some glyphs that we want to install // define some glyphs that we want to install
@ -147,8 +166,8 @@ describe('factory: fw/svg/glyph.js', function() {
expect($log.warn).not.toHaveBeenCalled(); expect($log.warn).not.toHaveBeenCalled();
expect(gs.ids().length).toEqual(numBaseGlyphs + 2); expect(gs.ids().length).toEqual(numBaseGlyphs + 2);
verifyGlyphLoaded('triangle', testVbox, 'M.5,.2'); verifyGlyphLoadedInCache('triangle', testVbox);
verifyGlyphLoaded('diamond', testVbox, 'M.2,.5'); verifyGlyphLoadedInCache('diamond', testVbox);
}); });
it('should not overwrite glyphs with dup IDs', function () { it('should not overwrite glyphs with dup IDs', function () {
@ -163,8 +182,8 @@ describe('factory: fw/svg/glyph.js', function() {
expect(gs.ids().length).toEqual(numBaseGlyphs); expect(gs.ids().length).toEqual(numBaseGlyphs);
// verify original glyphs still exist... // verify original glyphs still exist...
verifyGlyphLoaded('router', vbGlyph, 'M10,55A45,45'); verifyGlyphLoadedInCache('router', vbGlyph);
verifyGlyphLoaded('switch', vbGlyph, 'M10,20a10'); verifyGlyphLoadedInCache('switch', vbGlyph);
}); });
it('should replace glyphs if asked nicely', function () { it('should replace glyphs if asked nicely', function () {
@ -178,8 +197,8 @@ describe('factory: fw/svg/glyph.js', function() {
expect(gs.ids().length).toEqual(numBaseGlyphs); expect(gs.ids().length).toEqual(numBaseGlyphs);
// verify glyphs have been overwritten... // verify glyphs have been overwritten...
verifyGlyphLoaded('router', testVbox, 'M.5,.2'); verifyGlyphLoadedInCache('router', testVbox, 'triangle');
verifyGlyphLoaded('switch', testVbox, 'M.2,.5'); verifyGlyphLoadedInCache('switch', testVbox, 'diamond');
}); });
function verifyPathPrefix(elem, prefix) { function verifyPathPrefix(elem, prefix) {
@ -188,16 +207,19 @@ describe('factory: fw/svg/glyph.js', function() {
expect(d.slice(0, plen)).toEqual(prefix); expect(d.slice(0, plen)).toEqual(prefix);
} }
function verifyLoadedInDom(id, vb, expPfxId) {
var pfxId = expPfxId || id,
symbol = d3Elem.select('#' + id);
expect(symbol.size()).toEqual(1);
expect(symbol.attr('viewBox')).toEqual(vb);
verifyPathPrefix(symbol, prefixLookup[pfxId]);
}
it('should load base glyphs into the DOM', function () { it('should load base glyphs into the DOM', function () {
gs.init(); gs.init();
gs.loadDefs(d3Elem); gs.loadDefs(d3Elem);
expect(d3Elem.selectAll('symbol').size()).toEqual(numBaseGlyphs); expect(d3Elem.selectAll('symbol').size()).toEqual(numBaseGlyphs);
verifyLoadedInDom('bgpSpeaker', vbGlyph);
// verify bgpSpeaker
var bs = d3Elem.select('#bgpSpeaker');
expect(bs.size()).toEqual(1);
expect(bs.attr('viewBox')).toEqual(vbGlyph);
verifyPathPrefix(bs, 'M10,40a45,35');
}); });
it('should load custom glyphs into the DOM', function () { it('should load custom glyphs into the DOM', function () {
@ -205,11 +227,15 @@ describe('factory: fw/svg/glyph.js', function() {
gs.register(testVbox, newGlyphs); gs.register(testVbox, newGlyphs);
gs.loadDefs(d3Elem); gs.loadDefs(d3Elem);
expect(d3Elem.selectAll('symbol').size()).toEqual(numBaseGlyphs + 2); expect(d3Elem.selectAll('symbol').size()).toEqual(numBaseGlyphs + 2);
verifyLoadedInDom('diamond', testVbox);
});
// verify diamond it('should load only specified glyphs into the DOM', function () {
var dia = d3Elem.select('#diamond'); gs.init();
expect(dia.size()).toEqual(1); gs.loadDefs(d3Elem, ['crown', 'chain', 'node']);
expect(dia.attr('viewBox')).toEqual(testVbox); expect(d3Elem.selectAll('symbol').size()).toEqual(3);
verifyPathPrefix(dia, 'M.2,.5l.3,-.3'); verifyLoadedInDom('crown', vbGlyph);
verifyLoadedInDom('chain', vbGlyph);
verifyLoadedInDom('node', vbGlyph);
}); });
}); });