홍길동 / 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 @@ ...@@ -29,6 +29,7 @@
29 // svgClass is the class name for your glyph 29 // svgClass is the class name for your glyph
30 function createGlyph(div, size, id, rer, svgClass) { 30 function createGlyph(div, size, id, rer, svgClass) {
31 var dim = size || 20, 31 var dim = size || 20,
32 + texty = 30,
32 gid = id || 'unknown', 33 gid = id || 'unknown',
33 rx = rer || 4, 34 rx = rer || 4,
34 svgCls = svgClass || 'embeddedGlyph', 35 svgCls = svgClass || 'embeddedGlyph',
...@@ -37,7 +38,7 @@ ...@@ -37,7 +38,7 @@
37 svg = div.append('svg').attr({ 38 svg = div.append('svg').attr({
38 'class': svgCls, 39 'class': svgCls,
39 width: dim, 40 width: dim,
40 - height: dim, 41 + height: dim + texty,
41 viewBox: '0 0 ' + dim + ' ' + dim 42 viewBox: '0 0 ' + dim + ' ' + dim
42 }); 43 });
43 44
...@@ -58,7 +59,16 @@ ...@@ -58,7 +59,16 @@
58 'xlink:href': '#' + gid 59 'xlink:href': '#' + gid
59 }); 60 });
60 61
61 -} 62 + g.append('text')
63 + .attr({
64 + 'text-anchor': 'left',
65 + y: '1em',
66 + x: 0,
67 + transform: 'translate(0, ' + dim + ')scale(0.8)'
68 + })
69 + .style('fill', '#800')
70 + .text(id);
71 + }
62 72
63 angular.module('showIconsTest', ['onosSvg']) 73 angular.module('showIconsTest', ['onosSvg'])
64 74
...@@ -72,7 +82,7 @@ ...@@ -72,7 +82,7 @@
72 82
73 // show device online and offline icons 83 // show device online and offline icons
74 icns.loadEmbeddedIcon(div, 'deviceOnline', 50); 84 icns.loadEmbeddedIcon(div, 'deviceOnline', 50);
75 - div.append('br'); 85 + div.append('span').style('padding-left', '15px');
76 icns.loadEmbeddedIcon(div, 'deviceOffline', 50); 86 icns.loadEmbeddedIcon(div, 'deviceOffline', 50);
77 87
78 var defs = d3.select('defs'); 88 var defs = d3.select('defs');
...@@ -85,9 +95,10 @@ ...@@ -85,9 +95,10 @@
85 list.forEach(function (id) { 95 list.forEach(function (id) {
86 createGlyph(gDiv, 50, id); 96 createGlyph(gDiv, 50, id);
87 ctr += 1; 97 ctr += 1;
88 - if(ctr/3 > 1) { 98 + if (ctr%6 > 0) {
89 - ctr = 0; 99 + gDiv.append('span').style('padding-left', '15px');
90 - gDiv.append('p'); 100 + } else {
101 + gDiv.append('br');
91 } 102 }
92 }); 103 });
93 104
......
...@@ -28,7 +28,6 @@ ...@@ -28,7 +28,6 @@
28 <script type="text/javascript" src="../tp/angular-route.js"></script> 28 <script type="text/javascript" src="../tp/angular-route.js"></script>
29 29
30 <script type="text/javascript" src="../tp/d3.js"></script> 30 <script type="text/javascript" src="../tp/d3.js"></script>
31 - <script type="text/javascript" src="../tp/jquery-2.1.1.min.js"></script>
32 31
33 <script type="text/javascript" src="../app/fw/util/util.js"></script> 32 <script type="text/javascript" src="../app/fw/util/util.js"></script>
34 <script type="text/javascript" src="../app/fw/util/fn.js"></script> 33 <script type="text/javascript" src="../app/fw/util/fn.js"></script>
...@@ -36,6 +35,7 @@ ...@@ -36,6 +35,7 @@
36 <script type="text/javascript" src="../app/fw/util/keys.js"></script> 35 <script type="text/javascript" src="../app/fw/util/keys.js"></script>
37 36
38 <script type="text/javascript" src="../app/fw/svg/svg.js"></script> 37 <script type="text/javascript" src="../app/fw/svg/svg.js"></script>
38 + <script type="text/javascript" src="../app/fw/svg/svgUtil.js"></script>
39 <script type="text/javascript" src="../app/fw/svg/glyph.js"></script> 39 <script type="text/javascript" src="../app/fw/svg/glyph.js"></script>
40 <script type="text/javascript" src="../app/fw/svg/icon.js"></script> 40 <script type="text/javascript" src="../app/fw/svg/icon.js"></script>
41 <script type="text/javascript" src="../app/fw/svg/geodata.js"></script> 41 <script type="text/javascript" src="../app/fw/svg/geodata.js"></script>
......