GUI -- Finished icons test page. Displays all icons and glyphs using Angular constructs.

Change-Id: I65d9195eb5434a49e5d8e6fac7ce3205a72d22dd

@@ -21,15 +21,75 @@
 (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,
+            gid = id || 'unknown',
+            rx = rer || 4,
+            svgCls = svgClass || 'embeddedGlyph',
+            svg, g;
+
+        svg = div.append('svg').attr({
+            'class': svgCls,
+            width: dim,
+            height: dim,
+            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
+        });
+
+}
+
     angular.module('showIconsTest', ['onosSvg'])
 
         .controller('OvShowIconsTest', ['$log', 'GlyphService', 'IconService',
             function ($log, gs, icns) {
                 var self = this;
-                self.a = 1;
-                self.b = 2;
 
-                self.message = "Hi";
+                gs.init();
+
+                var div = d3.select('#showIcons');
+
+                // show device online and offline icons
+                icns.loadEmbeddedIcon(div, 'deviceOnline', 50);
+                div.append('br');
+                icns.loadEmbeddedIcon(div, 'deviceOffline', 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/3 > 1) {
+                        ctr = 0;
+                        gDiv.append('p');
+                    }
+                });
 
                 $log.log('OvShowIconsTest has been created');
             }]);

@@ -28,17 +28,24 @@
     <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>
     <script type="text/javascript" src="../app/fw/util/theme.js"></script>
     <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/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>
+    <script type="text/javascript" src="../app/fw/svg/map.js"></script>
+    <script type="text/javascript" src="../app/fw/svg/zoom.js"></script>
+
     <script type="text/javascript" src="show-icons-test.js"></script>
 
     <link rel="stylesheet" href="../app/common.css">
+    <link rel="stylesheet" href="../app/fw/svg/icon.css">
 
     <style>
         html,
@@ -51,15 +58,31 @@
         h2 {
             color: darkred;
         }
+
+        svg .glyph {
+            stroke: none;
+            fill: #123456;
+            fill-rule: evenodd;
+        }
+
+        svg.embeddedGlyph .glyph rect {
+            fill: #fff
+        }
+
     </style>
 
 </head>
 <!-- outline for using a controller in Angular -->
-<body class="light" ng-app="showIconsTest">
-    <h2>Showing Icons with Icon Service Angular</h2>
-    <div id="show-icons" ng-controller="OvShowIconsTest as ctrl">
-        <!--{{message}}-->
-        <p>{{ctrl.a}} + {{ctrl.b}} = {{ctrl.a+ctrl.b}}</p>
+<body class="light" ng-app="showIconsTest" ng-controller="OvShowIconsTest as ctrl">
+    <h2>Displaying Icons and Glyphs with Angular</h2>
+    <div id="showIcons">
+        <p>Show all icons in icon library:<br></p>
+    </div>
+    <hr>
+    <div id="showGlyphs">
+        <p>Show all glyphs in glyph library:</p>
+        <p>(Displays checkMark and xMark too, because icons are built on top
+            of glyphs.)</p>
     </div>
 
 

@@ -23,6 +23,14 @@ table.summary-list {
     font-size: 10pt;
 }
 
+/* TODO: uncomment following lines for scrollable table */
+/* Possible CSS style for creating a scrollable table */
+/*table.summary-list tbody {*/
+    /*height: 100px;*/
+    /*overflow: auto;*/
+    /*display: block;*/
+/*}*/
+
 table.summary-list th {
     padding: 5px;
 }

 <!-- Device partial HTML -->
 <div id="ov-device">
     <h2>Device View</h2>
-
+<!-- TODO: uncomment and test the thead and tbody tags for CSS styling -->
     <table class="summary-list">
+        <!-- <thead> -->
         <tr>
             <th></th>
             <th>ID</th>
@@ -10,6 +11,9 @@
             <th>Hardware Version</th>
             <th>Software Version</th>
         </tr>
+        <!-- </thead> -->
+
+        <!-- <tbody> -->
         <tr ng-repeat="dev in ctrl.deviceData">
             <td><div icon icon-id="{{dev._iconid_available}}"></div></td>
             <td>{{dev.id}}</td>
@@ -18,6 +22,7 @@
             <td>{{dev.sw}}</td>
             <!-- add more property fields for table from device data -->
         </tr>
+        <!-- </tbody> -->
     </table>
 
 </div>