홍길동 / onos

Go to a project
Toggle navigation Toggle navigation pinning
Simon Hunt
c4c5a071 1 parent 90dcc3e0

GUI -- Augmented Bri's show-icons html page to label the glyphs. 

Change-Id: I4de4615879df8e6cf6304a798fa46c5b3a149e58
Inline Side-by-side
Showing 2 changed files with 18 additions and 7 deletions
......@@ -29,6 +29,7 @@
// 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',
......@@ -37,7 +38,7 @@
svg = div.append('svg').attr({
'class': svgCls,
width: dim,
height: dim,
height: dim + texty,
viewBox: '0 0 ' + dim + ' ' + dim
});
......@@ -58,7 +59,16 @@
'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'])
......@@ -72,7 +82,7 @@
// show device online and offline icons
icns.loadEmbeddedIcon(div, 'deviceOnline', 50);
div.append('br');
div.append('span').style('padding-left', '15px');
icns.loadEmbeddedIcon(div, 'deviceOffline', 50);
var defs = d3.select('defs');
......@@ -85,9 +95,10 @@
list.forEach(function (id) {
createGlyph(gDiv, 50, id);
ctr += 1;
if(ctr/3 > 1) {
ctr = 0;
gDiv.append('p');
if (ctr%6 > 0) {
gDiv.append('span').style('padding-left', '15px');
} else {
gDiv.append('br');
}
});
......
......@@ -28,7 +28,6 @@
<script type="text/javascript" src="../tp/angular-route.js"></script>
<script type="text/javascript" src="../tp/d3.js"></script>
<script type="text/javascript" src="../tp/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="../app/fw/util/util.js"></script>
<script type="text/javascript" src="../app/fw/util/fn.js"></script>
......@@ -36,6 +35,7 @@
<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/icon.js"></script>
<script type="text/javascript" src="../app/fw/svg/geodata.js"></script>
......