GUI - Converted Instances to use Glyph icons instead of png's.
Change-Id: I6a2e04135eea29e3baad32c7cfc36e8e34ee3b10
diff --git a/web/gui/src/main/webapp/topo2.css b/web/gui/src/main/webapp/topo2.css
index 8a3f973..fd88ccb 100644
--- a/web/gui/src/main/webapp/topo2.css
+++ b/web/gui/src/main/webapp/topo2.css
@@ -32,6 +32,7 @@
/* TODO: move glyphs into framework */
+#topo-oibox svg .glyphIcon,
#topo svg .glyphIcon {
fill: black;
stroke: none;
@@ -269,10 +270,23 @@
color: black;
}
-#topo-oibox .onosInst img {
+#topo-oibox .onosInst svg .glyphIcon {
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 {
opacity: 1.0;
diff --git a/web/gui/src/main/webapp/topo2.js b/web/gui/src/main/webapp/topo2.js
index 1e3e886..aed6087 100644
--- a/web/gui/src/main/webapp/topo2.js
+++ b/web/gui/src/main/webapp/topo2.js
@@ -74,7 +74,7 @@
linkInColor: '#66f',
linkInWidth: 14,
linkOutColor: '#f00',
- linkOutWidth: 30
+ linkOutWidth: 14
},
icons: {
w: 30,
@@ -885,6 +885,9 @@
});
}
+ function stripPx(s) {
+ return s.replace(/px$/,'');
+ }
// ==============================
// onos instance panel functions
@@ -904,12 +907,29 @@
entering.each(function (d, i) {
var el = d3.select(this),
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);