1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
|
/*
* Copyright 2014,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 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');
}]);
}());
|
