홍길동 / onos

Go to a project
Toggle navigation Toggle navigation pinning
Simon Hunt
5a6c60c5 1 parent 6deb4ce0

Enhanced "Show-Glyphs" development web page to show zoomed icons. 

Change-Id: I2fe267a2bf67ef9f99637fd5916b31a0b657fcf3
Inline Side-by-side
Showing 4 changed files with 156 additions and 51 deletions
...@@ -16,37 +16,26 @@ ...@@ -16,37 +16,26 @@
16 --> 16 -->
17 17
18 <!-- 18 <!--
19 - ONOS -- Displaying icons with Angular test page 19 + ONOS -- Displaying All core glyphs.
20 --> 20 -->
21 21
22 <html> 22 <html>
23 <head lang="en"> 23 <head lang="en">
24 <meta charset="UTF-8"> 24 <meta charset="UTF-8">
25 - <title>Show Icons Angular</title> 25 + <title>ONOS Core Glyphs</title>
26 26
27 <script type="text/javascript" src="../tp/angular.js"></script> 27 <script type="text/javascript" src="../tp/angular.js"></script>
28 - <script type="text/javascript" src="../tp/angular-route.js"></script>
29 -
30 <script type="text/javascript" src="../tp/d3.js"></script> 28 <script type="text/javascript" src="../tp/d3.js"></script>
31 29
32 <script type="text/javascript" src="../app/fw/util/util.js"></script> 30 <script type="text/javascript" src="../app/fw/util/util.js"></script>
33 <script type="text/javascript" src="../app/fw/util/fn.js"></script> 31 <script type="text/javascript" src="../app/fw/util/fn.js"></script>
34 - <script type="text/javascript" src="../app/fw/util/theme.js"></script>
35 - <script type="text/javascript" src="../app/fw/util/keys.js"></script>
36 32
37 <script type="text/javascript" src="../app/fw/svg/svg.js"></script> 33 <script type="text/javascript" src="../app/fw/svg/svg.js"></script>
38 <script type="text/javascript" src="../app/fw/svg/svgUtil.js"></script> 34 <script type="text/javascript" src="../app/fw/svg/svgUtil.js"></script>
39 <script type="text/javascript" src="../app/fw/svg/glyph.js"></script> 35 <script type="text/javascript" src="../app/fw/svg/glyph.js"></script>
40 <script type="text/javascript" src="../app/fw/svg/glyphData.js"></script> 36 <script type="text/javascript" src="../app/fw/svg/glyphData.js"></script>
41 - <script type="text/javascript" src="../app/fw/svg/icon.js"></script>
42 - <script type="text/javascript" src="../app/fw/svg/geodata.js"></script>
43 - <script type="text/javascript" src="../app/fw/svg/map.js"></script>
44 - <script type="text/javascript" src="../app/fw/svg/zoom.js"></script>
45 -
46 - <script type="text/javascript" src="show-icons-test.js"></script>
47 37
48 - <link rel="stylesheet" href="../app/common.css"> 38 + <script type="text/javascript" src="show-glyphs.js"></script>
49 - <link rel="stylesheet" href="../app/fw/svg/icon.css">
50 39
51 <style> 40 <style>
52 html, 41 html,
...@@ -56,13 +45,24 @@ ...@@ -56,13 +45,24 @@
56 font-size: 9pt; 45 font-size: 9pt;
57 } 46 }
58 47
48 + #IconLibDefs {
49 + display: none;
50 + }
51 +
59 h2 { 52 h2 {
60 color: darkred; 53 color: darkred;
54 + display: inline-block;
55 + }
56 +
57 + h2#tag {
58 + float: right;
59 + padding-right: 20px;
60 + color: midnightblue;
61 } 61 }
62 62
63 svg .glyph { 63 svg .glyph {
64 stroke: none; 64 stroke: none;
65 - fill: #123456; 65 + fill: midnightblue;
66 fill-rule: evenodd; 66 fill-rule: evenodd;
67 } 67 }
68 68
...@@ -70,23 +70,39 @@ ...@@ -70,23 +70,39 @@
70 fill: #fff 70 fill: #fff
71 } 71 }
72 72
73 + #showGlyphs {
74 + overflow-y: scroll;
75 + width: 400px;
76 + border: 1px solid green;
77 + display: inline-block;
78 + padding-left: 4px;
79 + background-color: #bbd;
80 + }
81 + #zoomed {
82 + /*border: 1px solid green;*/
83 + display: inline-block;
84 + }
85 +
86 + #zoomed svg {
87 + background-color: #eef;
88 + position: absolute;
89 + }
90 +
73 </style> 91 </style>
74 92
75 </head> 93 </head>
76 -<!-- outline for using a controller in Angular --> 94 +<body class="light" ng-app="showGlyphs" ng-controller="OvShowGlyphs as ctrl">
77 -<body class="light" ng-app="showIconsTest" ng-controller="OvShowIconsTest as ctrl"> 95 +
78 - <h2>Displaying Icons and Glyphs with Angular</h2> 96 + <h2>ONOS Core Glyphs</h2>
79 - <div id="showIcons"> 97 + <h2 id="tag"></h2>
80 - <p>Show all icons in icon library:<br></p> 98 + <div id="container">
99 + <div id="showGlyphs" class="half vscroll"></div>
100 + <div id="zoomed" class="half">
81 </div> 101 </div>
82 - <hr>
83 - <div id="showGlyphs">
84 - <p>Show all glyphs in glyph library:</p>
85 - <p>(Displays checkMark and xMark too, because icons are built on top
86 - of glyphs.)</p>
87 </div> 102 </div>
88 103
89 - 104 + <svg id="IconLibDefs">
90 - 105 + <defs></defs>
106 + </svg>
91 </body> 107 </body>
92 </html> 108 </html>
...\ No newline at end of file ...\ No newline at end of file
......
...@@ -15,12 +15,16 @@ ...@@ -15,12 +15,16 @@
15 */ 15 */
16 16
17 /* 17 /*
18 - ONOS GUI -- Showing Icons Test Module 18 + ONOS GUI -- Display ONOS Glyphs (development module)
19 */ 19 */
20 20
21 (function () { 21 (function () {
22 'use strict'; 22 'use strict';
23 23
24 + var $log, $window, fs, gs;
25 +
26 + var vspace = 60;
27 +
24 // assuming the glyph is a square 28 // assuming the glyph is a square
25 // div is a D3 selection of the <DIV> element into which icon should load 29 // div is a D3 selection of the <DIV> element into which icon should load
26 // size is the size of the glyph 30 // size is the size of the glyph
...@@ -42,6 +46,10 @@ ...@@ -42,6 +46,10 @@
42 viewBox: '0 0 ' + dim + ' ' + dim 46 viewBox: '0 0 ' + dim + ' ' + dim
43 }); 47 });
44 48
49 + svg.on('mousemove', function () {
50 + showZoomedGlyph(id);
51 + });
52 +
45 g = svg.append('g').attr({ 53 g = svg.append('g').attr({
46 'class': 'glyph' 54 'class': 'glyph'
47 }); 55 });
...@@ -70,38 +78,100 @@ ...@@ -70,38 +78,100 @@
70 .text(id); 78 .text(id);
71 } 79 }
72 80
73 - angular.module('showIconsTest', ['onosSvg']) 81 + function showZoomedGlyph(id) {
82 + var s = d3.select('#zoomed').select('svg'),
83 + zd = zsize();
74 84
75 - .controller('OvShowIconsTest', ['$log', 'GlyphService', 'IconService', 85 + s.selectAll('g').remove();
76 - function ($log, gs, icns) {
77 - var self = this;
78 86
79 - gs.init(); 87 + var g = s.append('g').attr({
88 + 'class': 'glyph'
89 + });
90 + g.append('use').attr({
91 + width: zd,
92 + height: zd,
93 + 'class': 'glyph',
94 + 'xlink:href': '#' + id
95 + });
96 +
97 + d3.select('#tag').text(id);
98 + }
99 +
100 + function boxSize() {
101 + return {
102 + w: $window.innerWidth,
103 + h: $window.innerHeight - vspace
104 + };
105 + }
106 +
107 + function zsize() {
108 + return boxSize().w - 430;
109 + }
80 110
81 - var div = d3.select('#showIcons'); 111 + function updateLayout() {
112 + var box = boxSize(),
113 + zdim = box.w - 425,
114 + zsdim = zdim - 5;
82 115
83 - // show device online and offline icons 116 + $log.debug('updateLayout()', box);
84 - icns.loadEmbeddedIcon(div, 'active', 50);
85 - div.append('span').style('padding-left', '15px');
86 - icns.loadEmbeddedIcon(div, 'inactive', 50);
87 117
88 - var defs = d3.select('defs'); 118 + var c = d3.select('#container')
119 + .style('width', box.w + 'px')
120 + .style('height', box.h + 'px');
89 121
90 - // show all glyphs in glyph library 122 + c.select('#showGlyphs').style('height', (box.h - 4) + 'px');
91 - gs.loadDefs(defs, null, true); 123 + var z = c.select('#zoomed').style('height', (box.h - 4) + 'px')
92 - var list = gs.ids(), 124 + .style('width', zdim + 'px');
125 +
126 + var zsvg = z.select('svg');
127 + if (zsvg.empty()) {
128 + zsvg = z.append('svg');
129 + }
130 + zsvg.style({
131 + width: zsdim + 'px',
132 + height: zsdim + 'px'
133 + });
134 + zsvg.selectAll('g').remove();
135 + d3.select('#tag').text('');
136 + }
137 +
138 + function watchWindow() {
139 + var w = angular.element($window);
140 + w.bind('resize', function () {
141 + updateLayout();
142 + });
143 + }
144 +
145 +
146 + angular.module('showGlyphs', ['onosUtil', 'onosSvg'])
147 + .controller('OvShowGlyphs',
148 + ['$log', '$window', 'FnService', 'GlyphService',
149 +
150 + function (_$log_, _$window_, _fs_, _gs_) {
151 + var defs = d3.select('defs'),
93 gDiv = d3.select('#showGlyphs'), 152 gDiv = d3.select('#showGlyphs'),
94 - ctr = 0; 153 + cols = 6,
95 - list.forEach(function (id) { 154 + k = 0;
155 +
156 + $log = _$log_;
157 + $window = _$window_;
158 + fs = _fs_;
159 + gs = _gs_;
160 +
161 + updateLayout();
162 + watchWindow();
163 +
164 + gs.init();
165 + gs.loadDefs(defs, null, true);
166 +
167 + gs.ids().forEach(function (id) {
96 createGlyph(gDiv, 50, id); 168 createGlyph(gDiv, 50, id);
97 - ctr += 1; 169 + k += 1;
98 - if (ctr%6 > 0) { 170 + if (k % cols > 0) {
99 gDiv.append('span').style('padding-left', '15px'); 171 gDiv.append('span').style('padding-left', '15px');
100 } else { 172 } else {
101 gDiv.append('br'); 173 gDiv.append('br');
102 } 174 }
103 }); 175 });
104 -
105 - $log.log('OvShowIconsTest has been created');
106 }]); 176 }]);
107 }()); 177 }());
......
...@@ -564,6 +564,26 @@ ...@@ -564,6 +564,26 @@
564 'M71.1,79.3c11.2,7.6,24.6,6.4,22.1-11.7' + 564 'M71.1,79.3c11.2,7.6,24.6,6.4,22.1-11.7' +
565 'M36.4,76.8c3.4,13.3,35.4,11.6,36.1-1.4' + 565 'M36.4,76.8c3.4,13.3,35.4,11.6,36.1-1.4' +
566 'M70.4,31c11.8-10.4,26.2-5.2,24.7,10.1' 566 'M70.4,31c11.8-10.4,26.2-5.2,24.7,10.1'
567 + },
568 +
569 + mojoDataSet = {
570 + _viewbox: '0 0 100 100',
571 +
572 + mojo_cloud: 'M50.5,70.2H29.9a20.6,20.6,0,0,1-5.3-.6' +
573 + 'C14,66.6,10.2,53.6,17.1,45' +
574 + 'c5.3-6.6,15-6.7,20.6-2.5,1.5,1.2,2,2.3,1,3.3s-2.2.8-3.4,0' +
575 + 'A11.6,11.6,0,0,0,22,45.7' +
576 + 'c-3.7,2.4-5.2,8.9-3.9,12.5,1.8,5.2,5.4,7.9,11,8H72.1' +
577 + 'A11.5,11.5,0,0,0,83.7,55.8c0.6-5.2-3.3-10.6-8.9-11.8' +
578 + 'a15.2,15.2,0,0,0-5.1,0c-2,.3-3,0-3.2-1.4s1-2.3,2.4-2.6' +
579 + 'c6.2-1.2,11.5.5,15.5,5.4' +
580 + 'a14.2,14.2,0,0,1,2,15.7,14.8,14.8,0,0,1-13.8,9.1' +
581 + 'c-7.4.2-14.7,0.1-22.1,0.1h0Z' +
582 + 'M50.6,30a11.5,11.5,0,0,0-10.9,7l-0.3.9a2,2,0,0,1-2.7,1.6' +
583 + 'c-1.5-.5-1.5-1.7-1.1-3A15.8,15.8,0,0,1,48.4,26' +
584 + 'C58.6,24.8,67.3,34.4,65,44.5' +
585 + 'a4.9,4.9,0,0,1-1.7,2.4,1.9,1.9,0,0,1-1.7-.5,5.3,5.3,0,0,' +
586 + '1-.4-2.9,11,11,0,0,0-2.1-9C56.8,31.7,54,29.8,50.6,30Z'
567 }; 587 };
568 588
569 589
...@@ -575,6 +595,7 @@ ...@@ -575,6 +595,7 @@
575 gsApi.registerGlyphSet(glyphDataSet); 595 gsApi.registerGlyphSet(glyphDataSet);
576 gsApi.registerGlyphSet(badgeDataSet); 596 gsApi.registerGlyphSet(badgeDataSet);
577 gsApi.registerGlyphs(spriteData); 597 gsApi.registerGlyphs(spriteData);
598 + gsApi.registerGlyphSet(mojoDataSet);
578 } 599 }
579 600
580 // ---------------------------------------------------------------------- 601 // ----------------------------------------------------------------------
......
...@@ -18,12 +18,10 @@ ...@@ -18,12 +18,10 @@
18 ONOS GUI -- SVG -- Glyph Service - Unit Tests 18 ONOS GUI -- SVG -- Glyph Service - Unit Tests
19 */ 19 */
20 20
21 -//FIXME Size are changed
22 -
23 describe('factory: fw/svg/glyph.js', function() { 21 describe('factory: fw/svg/glyph.js', function() {
24 var $log, fs, gs, d3Elem, svg; 22 var $log, fs, gs, d3Elem, svg;
25 23
26 - var numBaseGlyphs = 51, 24 + var numBaseGlyphs = 52,
27 vbBird = '352 224 113 112', 25 vbBird = '352 224 113 112',
28 vbGlyph = '0 0 110 110', 26 vbGlyph = '0 0 110 110',
29 vbBadge = '0 0 10 10', 27 vbBadge = '0 0 10 10',
......