GUI -- Augmented Bri's show-icons html page to label the glyphs.
Change-Id: I4de4615879df8e6cf6304a798fa46c5b3a149e58
diff --git a/web/gui/src/main/webapp/_bripc/show-icons-test.js b/web/gui/src/main/webapp/_bripc/show-icons-test.js
index 36bb53b..aea1343 100644
--- a/web/gui/src/main/webapp/_bripc/show-icons-test.js
+++ b/web/gui/src/main/webapp/_bripc/show-icons-test.js
@@ -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');
}
});
diff --git a/web/gui/src/main/webapp/_bripc/show-icons.html b/web/gui/src/main/webapp/_bripc/show-icons.html
index 15759ed..e6bf1da 100644
--- a/web/gui/src/main/webapp/_bripc/show-icons.html
+++ b/web/gui/src/main/webapp/_bripc/show-icons.html
@@ -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>