GUI - Converted Instances to use Glyph icons instead of png's.

Change-Id: I6a2e04135eea29e3baad32c7cfc36e8e34ee3b10

@@ -32,6 +32,7 @@
 
 
 /* TODO: move glyphs into framework */
 /* TODO: move glyphs into framework */
 
 
+#topo-oibox svg .glyphIcon,
 #topo svg .glyphIcon {
 #topo svg .glyphIcon {
     fill: black;
     fill: black;
     stroke: none;
     stroke: none;
@@ -269,11 +270,24 @@ svg .node.host circle {
     color: black;
     color: black;
 }
 }
 
 
-#topo-oibox .onosInst img {
+#topo-oibox .onosInst svg .glyphIcon {
     opacity: 0.5;
     opacity: 0.5;
-    padding: 3px;
+    fill: black;
+    stroke: none;
+    fill-rule: evenodd;
+}
+#topo-oibox .onosInst.online svg .glyphIcon {
+    opacity: 1;
+    fill: black;
+    stroke: none;
+    fill-rule: evenodd;
 }
 }
 
 
+/*#topo-oibox .onosInst img {*/
+    /*opacity: 0.5;*/
+    /*padding: 3px;*/
+/*}*/
+
 #topo-oibox .onosInst.online img {
 #topo-oibox .onosInst.online img {
     opacity: 1.0;
     opacity: 1.0;
     padding: 3px;
     padding: 3px;

@@ -74,7 +74,7 @@
             linkInColor: '#66f',
             linkInColor: '#66f',
             linkInWidth: 14,
             linkInWidth: 14,
             linkOutColor: '#f00',
             linkOutColor: '#f00',
-            linkOutWidth: 30
+            linkOutWidth: 14
         },
         },
         icons: {
         icons: {
             w: 30,
             w: 30,
@@ -885,6 +885,9 @@
         });
         });
     }
     }
 
 
+    function stripPx(s) {
+        return s.replace(/px$/,'');
+    }
     // ==============================
     // ==============================
     // onos instance panel functions
     // onos instance panel functions
 
 
@@ -904,12 +907,29 @@
         entering.each(function (d, i) {
         entering.each(function (d, i) {
             var el = d3.select(this),
             var el = d3.select(this),
                 img;
                 img;
+            var css = window.getComputedStyle(this),
+                w = stripPx(css.width),
+                h = stripPx(css.height) / 2;
 
 
-            $('<img src="img/node.png">').appendTo(el);
-            img = el.select('img')
-                .attr({
-                    width: 30
-                });
+            var svg = el.append('svg').attr({
+                width: w,
+                height: h
+            });
+            var dim = 30;
+            svg.append('use').attr({
+                class: 'glyphIcon',
+                transform: translate(2,2),
+                'xlink:href': '#node',
+                width: dim,
+                height: dim
+
+            });
+
+            //$('<img src="img/node.png">').appendTo(el);
+            //img = el.select('img')
+            //    .attr({
+            //        width: 30
+            //    });
 
 
             $('<div>').attr('class', 'onosTitle').text(d.id).appendTo(el);
             $('<div>').attr('class', 'onosTitle').text(d.id).appendTo(el);