Reverting the theme to light for the demo and switching icons set.
Change-Id: Ic3f7b46ce56100aabc1b7df3370218cbfd94db0c
diff --git a/web/gui/src/main/webapp/topo2.js b/web/gui/src/main/webapp/topo2.js
index 20615e3..bffa191 100644
--- a/web/gui/src/main/webapp/topo2.js
+++ b/web/gui/src/main/webapp/topo2.js
@@ -70,17 +70,23 @@
}
},
topo: {
+ linkBaseColor: '#666',
linkInColor: '#66f',
- linkOutColor: '#f00',
linkInWidth: 14,
+ linkOutColor: '#f00',
linkOutWidth: 30
},
- map: {
- strokeWidth: 1
- },
icons: {
- w: 100,
- h: 100
+ w: 24,
+ h: 24,
+ xoff: -10,
+ yoff: -6
+ },
+ iconUrl: {
+ device: 'img/device.png',
+ host: 'img/host.png',
+ pkt: 'img/pkt.png',
+ opt: 'img/opt.png'
},
force: {
note_for_links: 'link.type is used to differentiate',
@@ -330,6 +336,7 @@
var layerLookup = {
host: {
endstation: 'pkt', // default, if host event does not define type
+ router: 'pkt',
bgpSpeaker: 'pkt'
},
device: {
@@ -526,7 +533,8 @@
}
el.transition()
.duration(1000)
- .attr('stroke-width', linkScale(lw));
+ .attr('stroke-width', linkScale(lw))
+ .attr('stroke', config.topo.linkBaseColor);
}
// ==============================
@@ -1227,8 +1235,8 @@
$.extend(node, xy);
}
- function getIconUrl(d) {
- return 'icons.svg#' + d.type;
+ function iconUrl(d) {
+ return 'img/' + d.type + '.png';
}
// returns the newly computed bounding box of the rectangle
@@ -1270,29 +1278,6 @@
return (label && label.trim()) ? label : '.';
}
- function updateDeviceIconAppearance(node, box, animate) {
- var u = node.select('use');
- var ubbox = u.node().getBBox();
-
- var xoff = -ubbox.width/2 - box.width/2 - 4;
- var yoff = -ubbox.height;
- var iconTransform = 'translate(' + xoff + ',' + yoff + ')';
- if (animate) {
- node.select('use')
- .transition()
- .attr('transform', iconTransform);
- } else {
- node.select('use')
- .attr('transform', iconTransform);
- }
-
- var computedStyle = window.getComputedStyle(node.node());
- u.attr({
- fill: computedStyle.fill,
- color: computedStyle.color
- });
- }
-
function updateDeviceLabel(d) {
var label = niceLabel(deviceLabel(d)),
node = d.el,
@@ -1310,7 +1295,10 @@
.transition()
.attr(box);
- updateDeviceIconAppearance(node, box, true);
+ node.select('image')
+ .transition()
+ .attr('x', box.x + config.icons.xoff)
+ .attr('y', box.y + config.icons.yoff);
}
function updateHostLabel(d) {
@@ -1352,6 +1340,17 @@
}
}
+ function addHostIcon(node, radius, iconId) {
+ var dim = radius * 1.5,
+ xlate = -dim / 2;
+
+ node.append('svg:image')
+ .attr('transform', translate(xlate,xlate))
+ .attr('xlink:href', 'img/' + iconId + '.png')
+ .attr('width', dim)
+ .attr('height', dim);
+ }
+
function updateNodes() {
node = nodeG.selectAll('.node')
.data(network.nodes, function (d) { return d.id; });
@@ -1378,7 +1377,7 @@
// augment device nodes...
entering.filter('.device').each(function (d) {
var node = d3.select(this),
- iconUrl = getIconUrl(d),
+ icon = iconUrl(d),
label = niceLabel(deviceLabel(d)),
box;
@@ -1400,17 +1399,29 @@
node.select('rect')
.attr(box);
- if (iconUrl) {
- node.append('svg:use')
+ if (icon) {
+ var cfg = config.icons;
+ node.append('rect')
.attr({
- 'xlink:href': iconUrl,
- width: config.icons.w,
- height: config.icons.h
+ x: box.x + config.icons.xoff,
+ y: box.y + config.icons.yoff,
+ width: cfg.w,
+ height: cfg.h,
+ rx: 4
+ }).style({
+ stroke: '#000',
+ fill: '#ddd'
+ });
+ node.append('svg:image')
+ .attr({
+ x: box.x + config.icons.xoff + 2,
+ y: box.y + config.icons.yoff + 2,
+ width: cfg.w - 4,
+ height: cfg.h - 4,
+ 'xlink:href': icon
});
}
- updateDeviceIconAppearance(node, box, false);
-
// debug function to show the modelled x,y coordinates of nodes...
if (debug('showNodeXY')) {
node.select('rect').attr('fill-opacity', 0.5);
@@ -1424,43 +1435,41 @@
}
});
+ // TODO: better place for this configuration state
+ var defaultHostRadius = 9,
+ hostRadius = {
+ bgpSpeaker: 14,
+ router: 14,
+ host: 14
+ },
+ hostIcon = {
+ bgpSpeaker: 'bgpSpeaker',
+ router: 'router',
+ host: 'host'
+ };
+
+
// augment host nodes...
entering.filter('.host').each(function (d) {
var node = d3.select(this),
- iconUrl = getIconUrl(d);
+ r = hostRadius[d.type] || defaultHostRadius,
+ textDy = r + 10,
+ icon = hostIcon[d.type];
// provide ref to element from backing data....
d.el = node;
- // var box = node.append('circle')
- // .attr('r', r).node().getBBox();
+ node.append('circle')
+ .attr('r', r);
- var textYOff = 0;
- var textXOff = 0;
- if (iconUrl) {
- var computedStyle = window.getComputedStyle(node.node());
- var u = node.append('svg:use')
- .attr({
- 'xlink:href': iconUrl,
- width: config.icons.w,
- height: config.icons.h,
- fill: computedStyle.fill,
- color: computedStyle.color
- });
-
- var ubbox = node.select('use').node().getBBox();
- u.attr('y', -ubbox.height/2);
- textYOff = ubbox.height/2 + 4; // pad by 4 pixels
- textXOff = ubbox.width/2;
+ if (icon) {
+ addHostIcon(node, r, icon);
}
-
node.append('text')
.text(hostLabel)
- .attr('alignment-baseline', 'text-before-edge')
- .attr('x', textXOff)
- .attr('y', textYOff)
+ .attr('dy', textDy)
.attr('text-anchor', 'middle');
// debug function to show the modelled x,y coordinates of nodes...
@@ -1499,9 +1508,9 @@
.style('opacity', 0);
// note, leave <g>.remove to remove this element
- node.select('use')
- .style('color', '#aaa')
- .style('fill', '#000')
+ node.select('circle')
+ .style('stroke-fill', '#555')
+ .style('fill', '#888')
.style('opacity', 0.5)
.transition()
.duration(1500)
@@ -1858,7 +1867,7 @@
function zoomPan(scale, translate) {
zoomPanContainer.attr("transform", "translate(" + translate + ")scale(" + scale + ")");
// keep the map lines constant width while zooming
- bgImg.attr("stroke-width", config.map.strokeWidth / scale + "px");
+ bgImg.style("stroke-width", 2.0 / scale + "px");
}
function resetZoomPan() {
@@ -1977,27 +1986,6 @@
gly.defBullhorn(defs);
}
- // create references to bring these into cache so that getBBox() works when they
- // are inserted later
- function preloadIcons(svg) {
- var icons = [
- "router",
- "switch",
- "roadm",
- "endstation",
- "bgpSpeaker"
- ];
-
- var g = svg.append('g');
- for (var icon in icons) {
- g.append('use')
- .attr({
- 'xlink:href': 'icons.svg#' + icon
- });
- }
- g.style('visibility', 'hidden');
- }
-
// ==============================
// View life-cycle callbacks
@@ -2014,7 +2002,6 @@
setSize(svg, view);
loadGlyphs(svg);
- preloadIcons(svg);
zoomPanContainer = svg.append('g').attr('id', 'zoomPanContainer');
setupZoomPan();
@@ -2111,7 +2098,7 @@
width: config.birdDim,
height: config.birdDim,
fill: '#111'
- });
+ })
}
function para(sel, text) {
@@ -2226,13 +2213,11 @@
.translate(t);
bgImg = zoomPanContainer.insert("g", '#topo-G');
- // pointer-events: none so that browser select tools don't pick up the map svg
- bgImg.attr('id', 'map').attr('stroke-width', config.map.strokeWidth + 'px').style('pointer-events', 'none')
- .selectAll('path')
- .data(topoData.features)
- .enter()
- .append('path')
- .attr('d', path);
+ bgImg.attr('id', 'map').selectAll('path')
+ .data(topoData.features)
+ .enter()
+ .append('path')
+ .attr('d', path);
}
function resize(view, ctx, flags) {