getting stretched layout working
diff --git a/web/ons-demo/css/skin.2.css b/web/ons-demo/css/skin.2.css
index 27c9487..e69de29 100644
--- a/web/ons-demo/css/skin.2.css
+++ b/web/ons-demo/css/skin.2.css
@@ -1,3 +0,0 @@
-body {
- background-color: blue;
-}
\ No newline at end of file
diff --git a/web/ons-demo/css/skin.default.css b/web/ons-demo/css/skin.default.css
index dd1e0ac..f6f125d 100644
--- a/web/ons-demo/css/skin.default.css
+++ b/web/ons-demo/css/skin.default.css
@@ -32,12 +32,19 @@
border: 1px solid white;
}
+.header {
+ height: 50px;
+}
+
#left .header {
background-color: lightgreen;
}
#right .header {
background-color: lightblue;
+ font-size: 12px;
+ padding-right: .25em;
+ -webkit-box-sizing: border-box;
}
#controllers {
@@ -48,4 +55,18 @@
background-color: blue;
}
-#logo {}
+#logo {
+ height: 50px;
+}
+
+.edge {
+ fill: lightgray;
+ stroke: black;
+ stroke-width: 1.5px;
+}
+
+.aggregation {
+ fill: darkgrey;
+ stroke: black;
+ stroke-width: 2px;
+}
diff --git a/web/ons-demo/index.html b/web/ons-demo/index.html
index 580a230..532992f 100644
--- a/web/ons-demo/index.html
+++ b/web/ons-demo/index.html
@@ -21,8 +21,8 @@
<div class='header'>
<div id='status'>
<div class='status'><span class='static'>Last updated:</span><span id='lastUpdate' class='dynamic'>Mon Mar 18 11:11:12 PDT 2013</span></div>
- <div id='activeFlows' class='status'><span class='dynamic'>4000</span><span class='static'>Active Flows</span></div>
- <div id='activeSwitches' class='status'><span class='dynamic'>200</span><span class='static'>Active Switches</span></div>
+ <div class='status'><span class='dynamic' id='activeFlows'>4000</span><span class='static'>Active Flows</span></div>
+ <div class='status'><span class='dynamic' id='activeSwitches'>200</span><span class='static'>Active Switches</span></div>
</div>
<div id='traceButton' class='button'>Trace</div>
</div>
diff --git a/web/ons-demo/js/app.js b/web/ons-demo/js/app.js
index c22a603..4cdacd7 100644
--- a/web/ons-demo/js/app.js
+++ b/web/ons-demo/js/app.js
@@ -1,30 +1,37 @@
/*global d3*/
function createTopologyView() {
- return d3.select('#svg-container').append('svg:svg').attr('viewBox', '0 0 1000 1000').
- append('svg:g').attr('transform', 'translate(500 500)');
+ return d3.select('#svg-container').append('svg:svg').attr('viewBox', '0 0 1000 1000').attr('preserveAspectRatio', 'none').
+ attr('id', 'viewbox').append('svg:g').attr('transform', 'translate(500 500)');
}
-
-
function drawHeader(model) {
d3.select('#lastUpdate').text(model.timestamp);
+ d3.select('#activeSwitches').text(model.edgeSwitches.length + model.aggregationSwitches.length + model.coreSwitches.length);
+ d3.select('#activeFlows').text(model.flows.length);
+}
+
+function toRadians (angle) {
+ return angle * (Math.PI / 180);
}
function drawTopology(svg, model) {
var rings = [{
radius: 3,
- width: 16,
- switches: model.edgeSwitches
+ width: 8,
+ switches: model.edgeSwitches,
+ className: 'edge'
}, {
radius: 1.5,
width: 32,
- switches: model.aggregationSwitches
+ switches: model.aggregationSwitches,
+ className: 'aggregation'
}, {
radius: 1,
width: 32,
- switches: model.coreSwitches
+ switches: model.coreSwitches,
+ className: 'core'
}];
function ringEnter(data, i) {
@@ -41,13 +48,21 @@
.enter().append("svg:g")
.attr("class", "square")
.attr("transform", function(_, i) {
- return "rotate(" + i * k + ")translate(" + data.radius*150 + ")";
- })
- .append("svg:rect")
+ return "rotate(" + i*k + ")translate(" + data.radius*150 + ")rotate(" + (-i*k) + ")";
+ }
+ )
+ .append("svg:circle")
+ .attr('class', data.className)
+ .attr("transform", function(_, i) {
+ var m = document.querySelector('svg').getTransformToElement().inverse();
+ return "matrix( " + m.a + " " + m.b + " " + m.c + " " + m.d + " " + m.e + " " + m.f + " )";
+ })
.attr("x", -data.width / 2)
.attr("y", -data.width / 2)
- .attr("width", data.width)
- .attr("height", data.width);
+ // .attr("width", data.width)
+ // .attr("height", data.width)
+ .attr("r", data.width)
+
}
var ring = svg.selectAll("g")
diff --git a/web/ons-demo/js/model.js b/web/ons-demo/js/model.js
index e979196..3a19190 100644
--- a/web/ons-demo/js/model.js
+++ b/web/ons-demo/js/model.js
@@ -4,7 +4,8 @@
var model = {
edgeSwitches: [],
aggregationSwitches: [],
- coreSwitches: []
+ coreSwitches: [],
+ flows: results.flows
}