toggle controller selection
diff --git a/web/ons-demo/css/skin.default.css b/web/ons-demo/css/skin.default.css
index 898e483..807aa4c 100644
--- a/web/ons-demo/css/skin.default.css
+++ b/web/ons-demo/css/skin.default.css
@@ -55,6 +55,10 @@
border-right: 1px solid white;
}
+.controller {
+ padding: .25em;
+}
+
#logo {
height: 50px;
@@ -89,3 +93,69 @@
#traceButton {
visibility: hidden
}
+
+.color1, .color2, .color3, .color4, .color5, .color6, .color7, .color8, .color9, .color10, .color11, .color12 {
+ fill: rgba(255, 255, 255, .15);
+ background-color: rgba(255, 255, 255, .15);
+}
+
+
+.color1-selected .color1 {
+ fill: #EC0033;
+ background-color: #EC0033;
+}
+
+.color2-selected .color2 {
+ fill: #FFBA00;
+ background-color: #FFBA00;
+}
+
+.color3-selected .color3 {
+ fill: #3714B0;
+ background-color: #3714B0;
+}
+
+.color4-selected .color4 {
+ fill: #B12C49;
+ background-color: #B12C49;
+}
+
+.color5-selected .color5 {
+ fill: #402C84;
+ background-color: #402C84;
+}
+
+.color6-selected .color6 {
+ fill: #990021;
+ background-color: #990021;
+}
+
+.color7-selected .color7 {
+ fill: #990021;
+ background-color: ;
+}
+
+.color8-selected .color8 {
+ fill: #A67900;
+ background-color: #A67900;
+}
+
+.color9-selected .color9 {
+ fill: #F53D65;
+ background-color: #F53D65;
+}
+
+.color10-selected .color10 {
+ fill: #1F0772;
+ background-color: #1F0772;
+}
+
+.color11-selected .color11 {
+ fill: #F56E8B;
+ background-color: #F56E8B;
+}
+
+.color12-selected .color12 {
+ fill: #6949D7;
+ background-color: #6949D7;
+}
diff --git a/web/ons-demo/index.html b/web/ons-demo/index.html
index 9016b63..ef2cd65 100644
--- a/web/ons-demo/index.html
+++ b/web/ons-demo/index.html
@@ -24,7 +24,7 @@
<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 class='status'><span class='dynamic' id='activeFlows'>4000</span><span class='static'>Active Flows</span></div>
+ <div class='status'><span class='dynamic' id='activeFlows'>4000</span><span class='static'>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>
diff --git a/web/ons-demo/js/app.js b/web/ons-demo/js/app.js
index 1025fee..6f259d0 100644
--- a/web/ons-demo/js/app.js
+++ b/web/ons-demo/js/app.js
@@ -2,20 +2,18 @@
var colors = [
- '#EC0033',
- '#FFBA00',
- '#3714B0',
- '#B12C49',
- '#BF9830',
- '#402C84',
- '#990021',
- '#A67900',
- '#F53D65',
- '#1F0772',
- '#F56E8B',
- '#FFCB40',
- '#6949D7',
- '#FFD973'
+ 'color1',
+ 'color2',
+ 'color3',
+ 'color4',
+ 'color5',
+ 'color6',
+ 'color7',
+ 'color8',
+ 'color9',
+ 'color10',
+ 'color11',
+ 'color12',
]
var controllerColorMap = {};
@@ -120,7 +118,9 @@
});
nodes.append("svg:circle")
- .attr('class', data.className)
+ .attr('class', function (_, i) {
+ return data.className + ' ' + controllerColorMap[data.switches[i].controller];
+ })
.attr("transform", function(_, i) {
var m = document.querySelector('#viewbox').getTransformToElement().inverse();
if (data.scale) {
@@ -131,9 +131,9 @@
.attr("x", -data.width / 2)
.attr("y", -data.width / 2)
.attr("r", data.width)
- .attr("fill", function (_, i) {
- return controllerColorMap[data.switches[i].controller]
- })
+ // .attr("fill", function (_, i) {
+ // return controllerColorMap[data.switches[i].controller]
+ // })
nodes.append("svg:text")
.text(function (d, i) {return d.switches[i].dpid})
@@ -210,21 +210,26 @@
function updateControllers(model) {
var controllers = d3.select('#controllerList').selectAll('.controller').data(model.controllers);
- controllers.enter().append('div').attr('class', 'controller')
- .attr('style', function (d) {
+ controllers.enter().append('div')
+ .attr('class', function (d) {
var color = controllerColorMap[d];
if (!color) {
color = controllerColorMap[d] = colors.pop();
}
- return 'background-color:' + color;
+ return 'controller ' + color;
});
controllers.text(function (d) {
return d;
});
controllers.exit().remove();
- controllers.on('click', function (data, index) {
+ model.controllers.forEach(function (c) {
+ d3.select(document.body).classed(controllerColorMap[c] + '-selected', true);
+ });
+ controllers.on('click', function (c, index) {
+ var selected = d3.select(document.body).classed(controllerColorMap[c] + '-selected');
+ d3.select(document.body).classed(controllerColorMap[c] + '-selected', !selected);
});
}