attempt to draw svg switches. doesn't look great.
diff --git a/web/ons-demo/RELEASE_NOTES.txt b/web/ons-demo/RELEASE_NOTES.txt
index 09cda38..231ba46 100644
--- a/web/ons-demo/RELEASE_NOTES.txt
+++ b/web/ons-demo/RELEASE_NOTES.txt
@@ -3,7 +3,8 @@
- onos nodes at top
- count only active switches in header
- hook up switchctrl all and local actions
-- various small ui improvements (hover feedback e.g.)
+- various small ui improvements (hover feedback, flow chooser animation e.g.)
+- splash screen and use vector graphics for on.lab logo
** April 8, 2013 **
diff --git a/web/ons-demo/css/skin.default.css b/web/ons-demo/css/skin.default.css
index f94ab69..f6086a3 100644
--- a/web/ons-demo/css/skin.default.css
+++ b/web/ons-demo/css/skin.default.css
@@ -201,7 +201,6 @@
border-left: 1px solid #AAA;
}
-
.controller {
padding: .25em;
padding-left: 2.5em;
@@ -216,7 +215,7 @@
}
.action, .controller {
- font-size: 20px;
+ font-size: 18px;
}
@@ -433,3 +432,8 @@
-webkit-animation-iteration-count: 70;
}
+.core path {
+ stroke-width: 1px;
+ stroke: black;
+}
+
diff --git a/web/ons-demo/js/map.js b/web/ons-demo/js/map.js
index 35ca77d..62df872 100644
--- a/web/ons-demo/js/map.js
+++ b/web/ons-demo/js/map.js
@@ -1,6 +1,3 @@
-
-
-
(function () {
var projection = d3.geo.mercator()
@@ -8,6 +5,8 @@
.scale(8000)
.rotate([-180,0]);
+var switchXML;
+
function createMap(svg, cb) {
topology = svg.append('svg:svg').attr('id', 'viewBox').attr('viewBox', '0 0 1000 1000').
attr('id', 'viewbox');
@@ -23,7 +22,10 @@
.append('path')
.attr('d', path)
- cb();
+ d3.xml('assets/switch.svg', function (xml) {
+ switchXML = document.importNode(xml.documentElement, true);;
+ cb();
+ });
});
}
@@ -220,12 +222,26 @@
function switchEnter(d) {
var g = d3.select(this);
- var width = widths[d.className];
+ var width;
- g.append('svg:circle').attr('r', width)
- .classed(d.className, true)
- .attr('cx', d.x)
- .attr('cy', d.y);
+ // attempt to draw an svg switch
+ if (false && d.className == 'core') {
+ width = 30;
+ g.select(function () {
+ return this.appendChild(switchXML.cloneNode(true));
+ })
+ .classed(d.className, true)
+ .attr('x', d.x - 30)
+ .attr('y', d.y - 30);
+
+ } else {
+ width = widths[d.className];
+ g.append('svg:circle').attr('r', width)
+ .classed(d.className, true)
+ .attr('cx', d.x)
+ .attr('cy', d.y);
+ }
+
if (d.label) {
g.append('svg:text')
diff --git a/web/ons-demo/js/topologyactions.js b/web/ons-demo/js/topologyactions.js
index 843f829..6501e5b 100644
--- a/web/ons-demo/js/topologyactions.js
+++ b/web/ons-demo/js/topologyactions.js
@@ -1,3 +1,12 @@
+function clearHighlight() {
+ topology.selectAll('circle').each(function (data) {
+ data.mouseDown = false;
+ d3.select('#topologyArea').classed('linking', false);
+ mouseOutSwitch(data);
+ });
+ d3.select('#linkVector').remove();
+};
+
function mouseOverSwitch(data) {
d3.event.preventDefault();
@@ -87,6 +96,8 @@
}
function doubleClickSwitch(data) {
+ clearHighlight();
+
var circle = d3.select(document.getElementById(data.dpid)).select('circle');
if (data.state == 'ACTIVE') {
var prompt = 'Deactivate ' + data.dpid + '?';
@@ -103,16 +114,7 @@
}
}
-d3.select(document.body).on('mouseup', function () {
- function clearHighlight() {
- topology.selectAll('circle').each(function (data) {
- data.mouseDown = false;
- d3.select('#topologyArea').classed('linking', false);
- mouseOutSwitch(data);
- });
- d3.select('#linkVector').remove();
- };
-
+d3.select(window).on('mouseup', function () {
d3.selectAll('.nodrop').classed('nodrop', false);
function removeLink(link) {