--- /dev/null
+//$("#univbris_welcome").hide();
+ //jQuery("#univbris_flowspace_selection").show();
+
+ /* d3 data */
+ var nIslands=[], //replace
+ pad = 5,
+ width = parseInt($("#topologyContainer").css("width")), /* Obtain width from container */
+ height = 400;
+
+ //Islands area generation
+ var p = width/height
+ ny = Math.sqrt(nIslands/p),
+ nx = Math.ceil(p*ny),
+ ny = Math.ceil(ny),
+ foci = [];
+
+ if (nx*ny > nIslands){
+ if (nx > ny && (nx-1)*ny >= nIslands)
+ nx--;
+ else if( nx <= ny && nx*(ny-1) >= nIslands)
+ ny--;
+ }
+
+ var aw = Math.floor((width-(nx+1)*pad)/nx),
+ ah = Math.floor((height-(ny+1)*pad)/ny);
+
+ for (i=0; i<nIslands; i++){
+ tx0 = pad + (pad + aw)*(Math.floor(i%nx));
+ ty0 = pad + (pad + ah)*(Math.floor(i/nx));
+ foci[i] = {x0: tx0, x1: tx0 + aw, y0: ty0, y1: ty0 + ah};
+ }
+
+ function randomXToY(minVal,maxVal,floatVal){
+ var randVal = minVal+(Math.random()*(maxVal-minVal));
+ return typeof floatVal=='undefined'?Math.round(randVal):randVal.toFixed(floatVal);
+ };
+
+
+ function pEllipse(set){
+ function getDistance(p){
+ return Math.pow((p[0]-cx),2)/Math.pow(rx,2) + Math.pow((p[1]-cy),2)/Math.pow(ry,2);
+ };
+
+ d = 2;
+
+ try {
+ cx = (set.x1 + set.x0)/2;
+ rx = ((set.x1 - set.x0)/2 + (set.y1 - set.y0)/2)/2;
+ cy = (set.y1 + set.y0)/2;
+ ry = (set.y1 - set.y0)/2;
+
+ while (d>1) {
+ p = [randomXToY(set.x0, set.x1), randomXToY(set.y0, set.y1) ];
+ d = getDistance(p);
+ }
+ } catch(err) {
+ p = [];
+ }
+
+ return p;
+ };
+
+ var epoints= [];
+ for (i=0;i<d3_nodes.length;i++){
+ epoints.push(d3_nodes[i]['group']);
+
+ };
+
+ var data = {};
+
+ var nodes=[];
+
+
+ for (i=0;i<d3_nodes.length;i++){
+ var node={};
+ node['nodeValue']=d3_nodes[i].value;
+ node['nodeName']=d3_nodes[i].name;
+ node['image']=d3_nodes[i].image;
+ node['color']= "";
+ node['group']=d3_nodes[i].group;
+ node['location']=d3_nodes[i].location;
+ node['description']= d3_nodes[i].description;
+ node['fixed']= false;
+ node['radius']= 10;
+ node['available']= d3_nodes[i].available;
+ nodes.push(node);
+ };
+
+ data["nodes"]=nodes;
+
+ var links=[];
+ for (i=0;i<d3_links.length;i++){
+ var link={};
+ link['source']= d3_links[i].source;
+ link['target']= d3_links[i].target;
+ link['value']= d3_links[i].value;
+ links.push(link);
+ }
+
+ data["links"]=links;
+ },
+
+ function getLinkStyle(d, attr){
+ rsc_ids = d.value.split("-");
+ if(attr=="click"){
+ id0 = rsc_ids[0];
+ id1 = rsc_ids[1];
+ if (id1.indexOf("eth") != -1){
+ $(":checkbox#"+id0).click();
+ }
+ else{
+ if((! $(":checkbox#"+id0+":checked").length && ! $(":checkbox#"+id1+":checked").length) || ($(":checkbox#"+id0+":checked").length && $(":checkbox#"+id1+":checked").length)){
+ $(":checkbox#"+id0).click();
+ $(":checkbox#"+id1).click();
+ }
+ else if ($(":checkbox#"+id0+":checked").length){
+ $(":checkbox#"+id1).click();
+ }
+ else{
+ $(":checkbox#"+id0).click();
+ }
+ }
+ }else if(attr=="mouseover"){
+ var values = {stroke: "#00BFFF", strokewidth: "2" };
+ return values;
+ }else{
+ if( ($(":checkbox#"+rsc_ids[0]+":checked").length && rsc_ids[1].indexOf("eth") != -1) ||($(":checkbox#"+rsc_ids[0]+":checked").length && $(":checkbox#"+rsc_ids[1]+":checked").length)){
+ if (attr == "stroke")
+ return "#666";
+ else
+ return 2;
+ }else{
+ if (attr == "stroke")
+ return "#ccc";
+ else
+ return 2;
+ }
+ }
+ };
+
+ function getBaseNodeColor(d){
+ var group = 0;
+ group = d.group;
+ return d3.rgb(d.color.toString().toString()).darker(.15*group);
+ };
+
+ function getNodeCircleStyle(d, attr){
+ selected_len = $(":checkbox:checked.node_id_"+d.nodeValue).length;
+ all_len = $(":checkbox:.node_id_"+d.nodeValue).length;
+ selected_server = $(".server_node_"+d.nodeValue+".connected").length;
+ if(attr == "drag"){
+ return d3.rgb(d.color.toString()).brighter(5);
+ }else if(attr=="click"){
+ if(selected_len == all_len) {
+ $(":checkbox:checked.node_id_"+d.nodeValue).click();
+ return getBaseNodeColor(d);
+ }else{
+ $(":checkbox:not(:checked).node_id_"+d.nodeValue).click();
+ return d3.rgb(d.color.toString()).darker(5);
+ }
+ }else if (attr == "dragstop" && selected_len == 0){
+ return getBaseNodeColor(d);
+ }else{
+ if (attr == "fill"){
+ return getBaseNodeColor(d);
+ } else{
+ if (selected_len != 0){
+ return d3.rgb(d.color.toString()).darker(5);
+ }else{
+ return getBaseNodeColor(d);
+ }
+ }
+ }
+ };
+
+ function getNodesIsland(d){
+ var nNodes = 0;
+ data.nodes.forEach(function(o, i){
+ if(o.group == d){
+ nNodes++;
+ }
+ });
+ return nNodes;
+ }
+
+ cur_zoom = 1;
+ zoom_in_active = false;
+ zoom_out_active = false;
+
+
+ function zoomIn(zoom){
+ if(zoom_in_active == false && zoom_out_active == false){
+ $("#link_zoom_in img").css("background-color", "#666");
+ cur_zoom = cur_zoom + zoom;
+ zoom_in_active = true;
+ }
+
+ else if(zoom_in_active == true){
+ cur_zoom = cur_zoom - zoom;
+ $("#link_zoom_in img").css("background-color", "");
+ $("#target, svg, g").css("cursor", "move");
+ zoom_in_active = false;
+ }
+
+ else{
+ cur_zoom = cur_zoom + zoom + zoom;
+ $("#link_zoom_out img").css("background-color", "");
+ $("#link_zoom_in img").css("background-color", "#666");
+ zoom_out_active = false;
+ zoom_in_active = true;
+ }
+ };
+
+
+ function zoomOut(zoom){
+ if(zoom_out_active == false && zoom_in_active == false){
+ if((cur_zoom - zoom) >0){
+ $("#link_zoom_out img").css("background-color", "#666");
+ cur_zoom = cur_zoom - zoom;
+ zoom_out_active = true;
+ }
+ else{
+ $("#target, svg, g").css("cursor", "move");
+ }
+ }
+ else if(zoom_out_active == true){
+ cur_zoom = cur_zoom + zoom;
+ $("#link_zoom_out img").css("background-color", "");
+ $("#target, svg, g").css("cursor", "move");
+ zoom_out_active = false;
+ }
+
+ else{
+ cur_zoom = cur_zoom - zoom;
+ zoom_out_active = false;
+ $("#link_zoom_in img").css("background-color", "");
+ if((cur_zoom - zoom) > 0){
+ $("#link_zoom_out img").css("background-color", "#666");
+ zoom_out_active = true;
+ }
+ else{
+ $("#target, svg, g").css("cursor", "move");
+ }
+ }
+ };
+
+ function zoomReset(){
+ cur_zoom = 0.99;
+ posx = 0;
+ posy = 0;
+ return redraw();
+ };
+
+ function click(){
+ if (zoom_in_active == true || zoom_out_active == true){
+ var mouseClick = d3.mouse(this);
+ _x = -mouseClick[0]/2;
+ _y = -mouseClick[1]/2;
+ if(zoom_out_active == true){
+ _x = -_x/2;
+ _y = -_y/2;
+ }
+ posx += _x;
+ posy += _y;
+ zoom_in_active = false;
+ zoom_out_active = false;
+ return redraw();
+ }
+ };
+
+ function redraw() {
+ // trans=[(Math.round(width/cur_zoom) - width)/2, (Math.round(height/cur_zoom) - height)/2];
+ trans = [posx, posy];
+ svg.transition()
+ .duration(500)
+ .attr('x', function(d){ return d.x; })
+ .attr('y', function(d){ return d.y; })
+ .attr("transform",
+ "translate(" + trans +")"
+ + "scale(" + cur_zoom + ")");
+ $("#link_zoom_in img").css("background-color","");
+ $("#link_zoom_out img").css("background-color","");
+ $("#target, svg, g").css("cursor", "move");
+ };
+
+ //Global position of the canvas
+ var posx = 0;
+ var posy = 0;
+
+ /* Translation - bound to drag behavior */
+ dragMap = function(d) {
+ //No drag while zoom option active
+ if(zoom_in_active == false && zoom_out_active == false){
+ posx += d3.event.dx;
+ posy += d3.event.dy;
+ svg.attr('x', function(d) { return d.x; })
+ .attr('y', function(d) { return d.y; })
+ .attr("transform", "translate(" + posx + "," + posy + ") scale (" + cur_zoom + ")");
+ }
+ };
+
+
+ /* Instantiation General parameters*/
+ var padding = 6,
+ color = d3.scale.category10().domain(d3.range(nIslands)),
+ radius = d3.scale.sqrt().range([0, 12]);
+
+ var svg = d3.select("#target")
+ .on("click", click)
+ .append("svg")
+ .attr("pointer-events", "all")
+ .attr("width", width)
+ .attr("height", height)
+ .datum({x: 0, y: 0})
+ .call(d3.behavior.drag().on("drag", dragMap))
+ .append("svg:g").on("zoom", redraw)
+ .attr("cursor", "move")
+
+ // DATA VARIABLES
+ var nodes = data.nodes;
+ // Set color for each node
+ nodes.forEach(function(d) {
+ if (d.available != "False") {
+ d.color = color(d.group%nIslands);
+ } else {
+ d.color = "#CCC";
+ }
+ });
+
+ var links = data.links;
+
+ // Modified version (Carolina)
+ var force = d3.layout.force()
+ .gravity(1/(2*nIslands))
+ .distance(200/nIslands)
+ .friction(0.6)
+ .size([width, height])
+ .nodes(nodes)
+ .links(links)
+ .start();
+
+ var EMPTY_ISLAND = "Island with no resources";
+
+ //XXX:Very ugly, needs improvement
+ var islandsLocs = []
+ for (i = 0; i< nIslands; i++){
+ islandsLocs[i] = EMPTY_ISLAND;
+ }
+
+ nodeInitialPos = []
+ for (i = 0; i< nodes.length; i++){
+ nodeInitialPos[i] = [nodes[i].x, nodes[i].y];
+ if (islandsLocs[nodes[i].group] == EMPTY_ISLAND){
+ islandsLocs[nodes[i].group] = nodes[i].location;
+ }
+ }
+
+ var dataislands = []
+ for (i = 0; i< nIslands; i++){
+ dataislands[i] = {rx: (aw/2 + ah/2)/2, ry: ah/2, cx:(foci[i].x0+foci[i].x1)/2, cy:(foci[i].y0+foci[i].y1)/2, group: i, location: islandsLocs[i]};
+ }
+
+ var islands = svg.selectAll(".island")
+ .data(dataislands)
+ .enter().append("g")
+ .attr("class", "island")
+
+ var iellipses = islands.append("ellipse")
+ .attr("rx", function(d) { return d.rx; })
+ .attr("ry", function(d) { return d.ry; })
+ .attr("cx",function(d) { return d.cx; })
+ .attr("cy", function(d) { return d.cy; })
+ .style("fill", function(d) { return color(d.group%nIslands); })
+ .style("stroke", function(d) { return color(d.group%nIslands);})
+ .style("opacity", 0.3)
+ .style("stroke-opacity", 0.7)
+
+ var ilabels = islands.append("text")
+ .attr("text-anchor", "middle")
+ .attr("y", function(d){ return d.cy + d.ry*0.9})
+ .attr("x", function(d){ return d.cx})
+ .attr("font-color", function(d) { return d3.rgb(color(d.group%nIslands)).darker(5); })
+ .style("opacity",1)
+ .style("cursor", "default")
+ .text(function(d) { return d.location });
+
+ //First ellipse animation on startup
+ animate();
+
+ var link = svg.selectAll(".link")
+ .data(links)
+ .enter().append("line")
+ .attr("class", "link");
+
+ link.on("click", function(d) {
+ d3.select(this).style("stroke", function(d){return getLinkStyle(d, "click");})});
+
+ var node = svg.selectAll(".node")
+ .data(nodes)
+ .enter().append("g")
+ .attr("class", "node")
+ .call(force.drag)
+ .call(d3.behavior.drag()
+ .on("dragstart", function(d, i, e) {
+ d.fixed = false;
+ force.stop();
+ })
+ .on("drag", function(d, i) {
+ d.px += d3.event.dx;
+ d.py += d3.event.dy;
+ d.x += d3.event.dx;
+ d.y += d3.event.dy;
+ d3.select(this).selectAll("circle").style("stroke", function(d){return getNodeCircleStyle(d, "drag");})
+ tick();
+ })
+ .on("dragend", function(d, i) {
+ // d.fixed = true; // of course set the node to fixed so the force does not include the node in its auto positioning stuff //with the force.stop() it won't autopositioning, allowing to regroup the nodes
+ d3.select(this).selectAll("circle").style("stroke", function(d){return getNodeCircleStyle(d, "dragstop");})
+ tick();
+ force.stop();
+ })
+ );
+
+
+ node.append("circle")
+ .attr("r", function(d) { return d.radius; })
+ .style("stroke", function(d){return getNodeCircleStyle(d, "stroke");})
+ .style("fill", function(d){return getNodeCircleStyle(d, "fill");});
+
+ node.append("image")
+ .attr("xlink:href", function (d) { return d.image; })
+ .attr("x", -8)
+ .attr("y", -8)
+ .attr("width", 16)
+ .attr("height", 16)
+ .attr("opacity", function(d) { return d.available=="False"?0.8:1; })
+
+ node.append("text")
+ .attr("dx", 12)
+ .attr("dy", ".35em")
+ .text(function(d) { return d.name });
+
+ node.on("mouseover", function (d, i){
+ //tooltip.show(get_node_info_formated(d));
+ // Ugly hack to decode HTML
+ tooltip.show($('<div/>').html(d.description).text());
+ $("#selected_node_info").html("Selected " + d.type + ": " + d.nodeName + " at " + d.location);
+ $("#selected_node_info").css("background-color", d.color );
+ $("#selected_node_info").css("text-shadow", "-3px 2px 4px #eee");
+ $("#selected_node_info").show();
+ }
+ )
+ .on("mouseout", function() {
+ $("#selected_node_info").css("background-color", "#ebf5ff");
+ //$("#selected_node_info").hide()
+ tooltip.hide();
+ })
+ .on("click", function(d) {
+ /* Only available AMs can be selected */
+ if (d.available != "False") {
+ //checkTopologyLoops(d);
+ d3.select(this).selectAll("circle").style("stroke", function(d){return getNodeCircleStyle(d, "click");});
+ }
+ })
+
+ //Number of nodes in each Island
+ var qNodes = [];
+ for(i=0; i<nIslands; i++){
+ qNodes[i] = getNodesIsland(i);
+ }
+ var grav = 0.008 * nx * ny;
+
+ force.on("tick", function(e){
+ var k = grav * e.alpha;
+ var node_groups = {}
+
+ // Adjust K colliding factor
+ $.each(data.nodes, function(i, n){
+ if (node_groups[n.group] == undefined) {
+ node_groups[n.group] = 1;
+ } else {
+ node_groups[n.group] += 1;
+ }
+ });
+
+ data.nodes.forEach(function(o, i){
+ var fact = 1;
+ // Dumb hack: limit expansion through #nodes
+ if (node_groups[o.group] >= 10) {
+ fact = Math.floor(node_groups[o.group]/10);
+ } else {
+ fact = o.group+1;
+ }
+ // Carolina: when there are few nodes, avoid them to stay too far away from the center
+ // AND when there are so many nodes avoid them to stay too near each others
+ if(qNodes[o.group] < 5){
+ fact = fact * 2;
+ } else {
+ fact = fact/2;
+ }
+ try {
+ o.y += k * fact * qNodes[o.group] * ((dataislands[o.group].cy) - o.y);
+ o.x += k * fact * qNodes[o.group] * ((dataislands[o.group].cx) - o.x);
+ } catch (err) {
+ }
+ });
+
+ node.each(collide(.5));
+ node.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")";})
+ .attr("cx", function(d) { return d.x; })
+ .attr("cy", function(d) { return d.y; });
+
+ link.attr("x1", function(d) { return d.source.x; })
+ .attr("y1", function(d) { return d.source.y; })
+ .attr("x2", function(d) { return d.target.x; })
+ .attr("y2", function(d) { return d.target.y; });
+ });
+
+ function redrawNodes(){
+ node.selectAll("circle").style("stroke", function(d){return getNodeCircleStyle(d, "stroke");});
+ link.style("stroke", function(d) {return getLinkStyle(d, "stroke");});
+ link.style("stroke-width", function(d) {return getLinkStyle(d, "stroke-width");});
+ }
+
+ function tick() {
+
+ link.attr("x1", function(d) { return d.source.x; })
+ .attr("y1", function(d) { return d.source.y; })
+ .attr("x2", function(d) { return d.target.x; })
+ .attr("y2", function(d) { return d.target.y; });
+
+ node.each(collide(.5));
+ node.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; })
+ .attr("cx", d.x)
+ .attr("cy", d.y);
+ };
+
+ function animate(){
+
+ iellipses.attr("rx", function(d) { return d.rx; })
+ .style("display","block")
+ .attr("ry", function(d) { return d.ry; })
+ .attr("cx",function(d) { return d.cx; })
+ .attr("cy", function(d) { return d.cy; })
+ .style("fill", function(d) { return color(d.group%nIslands); })
+ .style("stroke", function(d) { return color(d.group%nIslands);})
+ .style("opacity", 0.3)
+ .style("stroke-opacity", 0.7)
+
+ ilabels.attr("text-anchor", "middle")
+ .attr("y", function(d){ return d.cy + d.ry*0.9})
+ .attr("x", function(d){ return d.cx})
+ .attr("font-color", function(d) { return d3.rgb(color(d.group%nIslands)).darker(5); })
+ .style("opacity",1)
+ .text(function(d) { return d.location });
+
+ iellipses.transition()
+ .style("stroke-width",3)
+ .style("stroke", function(d) { return d3.rgb(color(d.group%nIslands)).brighter(10);})
+ .duration(1500)
+ iellipses.transition()
+ .delay(1500)
+ .style("opacity",0)
+ .duration(3000)
+ ilabels.transition()
+ .delay(1500)
+ .style("opacity",0)
+ .duration(3000);
+ }
+
+ function regroup(){
+ force.resume();
+ animate();
+ }
+
+ function collide(alpha) {
+ var quadtree = d3.geom.quadtree(nodes);
+ return function(d) {
+ var r = d.radius + radius.domain()[1] + padding,
+ nx1 = d.x - r,
+ nx2 = d.x + r,
+ ny1 = d.y - r,
+ ny2 = d.y + r;
+ quadtree.visit(function(quad, x1, y1, x2, y2) {
+ if (quad.point && (quad.point !== d)) {
+ var x = d.x - quad.point.x,
+ y = d.y - quad.point.y,
+ l = Math.sqrt(x * x + y * y),
+ r = d.radius + quad.point.radius + (d.color !== quad.point.color) * padding;
+ if (l < r) {
+ l = (l - r) / l * alpha;
+ d.x -= x *= l;
+ d.y -= y *= l;
+ quad.point.x += x;
+ quad.point.y += y;
+ }
+ }
+ return x1 > nx2
+ || x2 < nx1
+ || y1 > ny2
+ || y2 < ny1;
+ });
+ };
+ };
+
+ $("#link_zoom_in").click(function(){
+ $("#target, svg, g").css("cursor", "url({%url img_media 'zoomin.png' %}),auto");
+ });
+
+ $("#link_zoom_out").click(function(){
+ $("#target, svg, g").css("cursor", "url({%url img_media 'zoomout.png' %}),auto" );
+ });
+
git://git.onelab.eu / unfold.git / blobdiff