ffmap-backend/html/force.js

541 lines
13 KiB
JavaScript
Raw Normal View History

2012-05-12 17:06:00 +02:00
function getOffset( el ) {
var _x = 0, _y = 0
2012-06-03 18:57:36 +02:00
while( el && !isNaN( el.offsetLeft ) && !isNaN( el.offsetTop ) ) {
_x += el.offsetLeft - el.scrollLeft
_y += el.offsetTop - el.scrollTop
el = el.offsetParent
2012-06-03 18:57:36 +02:00
}
return { top: _y, left: _x }
2012-05-12 17:06:00 +02:00
}
var offset = getOffset(document.getElementById('chart'))
2012-05-12 17:06:00 +02:00
2012-06-16 04:49:35 +02:00
var w, h
resize()
window.onresize = resize
function resize() {
var offset = getOffset(document.getElementById('chart'))
w = window.innerWidth - offset.left
h = window.innerHeight - offset.top - 1
d3.select("#chart")
.attr("width", w).attr("height", h)
if (vis)
vis.attr("width", w).attr("height", h)
if (force)
force.size([w, h]).start()
}
2012-02-17 02:09:21 +01:00
2012-06-08 03:50:14 +02:00
function next_style() {
2012-06-16 15:22:29 +02:00
var n = document.styleSheetSets.length
var i;
for (i = 0; i < n; i++) {
if (document.styleSheetSets[i] == document.selectedStyleSheetSet)
break
}
2012-06-08 03:50:14 +02:00
2012-06-16 15:22:29 +02:00
var s = document.styleSheetSets[(i+1) % n]
style_btn.text(s)
document.selectedStyleSheetSet = s
2012-06-08 03:50:14 +02:00
}
2012-06-08 03:26:38 +02:00
var cp = d3.select("header").append("div")
.attr("id", "controlpanel")
2012-06-03 18:57:36 +02:00
2012-06-06 15:18:09 +02:00
var updated_at = cp.append("p")
2012-06-06 05:50:09 +02:00
cp.append("button")
.attr("class", "btn")
.attr("value", "reload")
.text("Aktualisieren")
.on("click", reload)
2012-06-08 03:50:14 +02:00
var style_btn = cp.append("button")
.attr("class", "btn")
.attr("value", "reload")
.text("Farbwechsler")
.on("click", next_style)
2012-06-12 01:02:49 +02:00
cp.append("button")
.attr("class", "btn")
.attr("value", "reload")
.on("click", pacman)
2012-06-16 04:06:32 +02:00
.append("svg")
.attr("width", 12)
.attr("height", 12)
.append("path")
.attr("d", d3.svg.arc().innerRadius(0)
.outerRadius(5)
.endAngle(-Math.PI/4 + Math.PI/2 + 2*Math.PI)
.startAngle(Math.PI/4 + Math.PI/2))
.attr("fill", "#888")
.attr("transform", "translate(6,7)")
2012-06-12 01:02:49 +02:00
2012-06-03 18:57:36 +02:00
var btns = cp.append("div")
.attr("class", "btn-group")
2012-06-03 18:57:36 +02:00
btns.append("button")
.attr("class", "btn active left")
2012-06-06 04:15:08 +02:00
.attr("value", "clients")
.text("Clients")
.on("click", update_graph)
2012-06-03 18:57:36 +02:00
btns.append("button")
2012-06-06 04:15:08 +02:00
.attr("class", "btn active right")
.attr("value", "vpn")
.text("VPN")
.on("click", update_graph)
2012-06-03 18:57:36 +02:00
var meshinfo = d3.select("#sidebar")
2012-06-16 04:31:24 +02:00
.insert("div", ":first-child")
meshinfo.append("h2").text("Mesh")
meshinfo.append("p")
.attr("id", "nodecount")
meshinfo.append("p")
.attr("id", "gatewaycount")
2012-06-16 04:31:24 +02:00
meshinfo.append("p")
.attr("id", "clientcount")
2012-06-16 04:31:24 +02:00
2012-06-15 20:34:14 +02:00
//cp.append("input")
// .on("keyup", function(){show_node(this.value)})
// .on("change", function(){show_node(this.value)})
2012-06-04 18:23:39 +02:00
function show_node(mac) {
d3.selectAll("#chart .node")
.classed("marked", false)
2012-06-04 18:27:57 +02:00
if (mac.length == 0)
return
2012-06-04 18:27:57 +02:00
d3.selectAll("#chart .node")
.each( function(d) {
if (d.id == mac)
d3.select(this)
.classed("marked", true)
})
2012-06-04 18:23:39 +02:00
}
var hashstr = window.location.hash.substring(1)
function isConnected(a, b) {
return linkedByIndex[a.index + "," + b.index] ||
linkedByIndex[b.index + "," + a.index] ||
a.index == b.index
}
function fade(opacity) {
return function(d) {
vis.selectAll("g.node")
  .style("stroke-opacity", function(o) {
var connected = isConnected(d, o)
if (connected && opacity != 1)
d3.select(this)
.classed("highlight", true)
else
d3.select(this)
.classed("highlight", false)
        thisOpacity = connected?1:opacity
   this.setAttribute('fill-opacity', thisOpacity)
        return thisOpacity
 })
vis.selectAll(".link *")
  .style("stroke-opacity", function(o) {
 return o.source === d || o.target === d ? 1 : opacity
 })
  }
}
function show_node_info(d) {
2012-06-07 00:25:42 +02:00
d3.selectAll("#nodeinfo").remove()
nodeinfo = d3.select("#chart")
.append("div")
.attr("id", "nodeinfo")
2012-06-07 00:25:42 +02:00
nodeinfo.append("button")
.attr("class", "close")
.text("x")
.on("click", function(d) {
nodeinfo.remove()
})
nodeinfo.append("h1")
2012-06-07 00:25:42 +02:00
.text(d.name + " / " + d.id)
nodeinfo.append("p")
2012-06-07 00:25:42 +02:00
.append("label")
.text("macs: " + d.macs)
2012-06-07 00:25:42 +02:00
if (d.geo) {
nodeinfo.append("h2").text("Geodaten")
nodeinfo.append("p")
.text(d.geo)
url = GMaps.staticMapURL({
size: [300, 100],
lat: d.geo[0],
lng: d.geo[1],
markers: [
2012-06-08 01:22:04 +02:00
{lat: d.geo[0], lng: d.geo[1]}
2012-06-07 00:25:42 +02:00
]
})
nodeinfo.append("img")
.attr("src", url)
}
}
2012-06-04 18:23:39 +02:00
2012-06-03 18:57:36 +02:00
function update_graph() {
2012-06-06 04:15:08 +02:00
jQuery(this).toggleClass("active")
2012-06-03 18:57:36 +02:00
var value = jQuery(this).val()
2012-06-06 04:15:08 +02:00
visible[value] = jQuery(this).hasClass("active")
2012-06-06 05:50:09 +02:00
update()
2012-06-03 18:57:36 +02:00
}
var vis = d3.select("#chart").append("svg")
.attr("width", w)
.attr("height", h)
vis.append("g").attr("class", "links")
vis.append("g").attr("class", "nodes")
var linkedByIndex
var force = d3.layout.force()
2012-06-12 04:03:48 +02:00
.charge( function (d) {
if (d.flags.client)
return -30
return -200
})
.gravity(0.035)
.friction(0.73)
.theta(0.8)
.size([w, h])
.linkDistance(function (d) {
switch (d.type) {
2012-06-12 04:03:48 +02:00
case "vpn": return 200
case "client": return 20
default: return 70
}
})
.linkStrength(function (d) {
switch (d.type) {
2012-06-12 04:03:48 +02:00
case "vpn": return 0.05
case "client": return 1
2012-06-12 04:03:48 +02:00
default: return 0.8
}
})
force.on("tick", function() {
var size = force.size()
var nodes = force.nodes()
var n = nodes.length
for (i = 0; i < n; i++) {
var o = nodes[i]
if (!o.fixed) {
node = d3.select(document.getElementById(o.id))[0][0]
box = bounding_box(node)
if (o.x < box.rx) o.x = box.rx
if (o.x > size[0] - box.rx) o.x = size[0] - box.rx
if (o.y < box.ry) o.y = box.ry
if (o.y > size[1] - box.ry) o.y = size[1] - box.ry
}
}
var link = vis.selectAll(".link")
link.selectAll("line")
.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 })
vis.selectAll(".node").attr("transform", function(d) {
return "translate(" + d.x + "," + d.y + ")";
2012-06-10 18:55:18 +02:00
})
})
var data
2012-06-06 04:15:08 +02:00
var visible = {clients: true, vpn: true}
2012-06-06 05:50:09 +02:00
function reload() {
d3.json("nodes.json", function(json) {
2012-06-06 06:03:30 +02:00
// update existing nodes with new info
// XXX inefficient data structure
json.nodes.forEach(function(d, i) {
var n
force.nodes().forEach(function(x) {if (x.id == d.id) n = x})
if (n) {
for (var key in d)
if (d.hasOwnProperty(key))
n[key] = d[key]
2012-06-06 04:15:08 +02:00
2012-06-06 06:03:30 +02:00
json.nodes[i] = n
}
})
json.links.forEach(function(d, i) {
var n
force.links().forEach(function(x) {if (x.id == d.id) n = x})
if (n) {
for (var key in d)
if (d.hasOwnProperty(key))
n[key] = d[key]
2012-06-06 06:03:30 +02:00
json.links[i] = n
}
})
// replace indices with real objects
2012-06-06 05:50:09 +02:00
json.links.forEach( function(d) {
if (typeof d.source == "number") d.source = json.nodes[d.source];
if (typeof d.target == "number") d.target = json.nodes[d.target];
})
2012-06-06 04:15:08 +02:00
2012-06-12 16:16:37 +02:00
// count vpn links
2012-06-06 06:07:23 +02:00
json.nodes.forEach(function(d) {
2012-06-12 16:16:37 +02:00
d.vpns = 0
2012-06-06 06:07:23 +02:00
})
2012-06-06 05:50:09 +02:00
json.links.forEach(function(d) {
var node, other
2012-06-12 16:16:37 +02:00
if (d.type == "vpn") {
d.source.vpns++
d.target.vpns++
2012-06-06 05:50:09 +02:00
}
})
2012-06-06 05:50:09 +02:00
data = json
2012-06-06 15:18:09 +02:00
updated_at.text(d3.time.format("%X")(new Date()))
var nNodes = data.nodes.filter(function(d) {
2012-06-16 05:04:21 +02:00
return !d.flags.client && d.flags.online
}).length,
nGateways = data.nodes.filter(function(d) {
2012-06-16 05:04:21 +02:00
return d.flags.gateway && d.flags.online
}).length,
nClients = data.nodes.filter(function(d) {
2012-06-16 05:04:21 +02:00
return d.flags.client && d.flags.online
}).length
2012-06-16 04:31:24 +02:00
d3.select("#nodecount")
.text(nNodes + " Knoten")
2012-06-16 04:31:24 +02:00
d3.select("#gatewaycount")
.text(nGateways + " Gateways")
2012-06-16 04:31:24 +02:00
d3.select("#clientcount")
.text("ungefähr " + (nClients - nNodes) + " Clients")
2012-06-16 04:31:24 +02:00
2012-06-06 05:50:09 +02:00
update()
})
}
var linkcolor = d3.scale.linear()
2012-06-11 15:54:49 +02:00
.domain([1, 1.5, 3])
.range(["#0a3", "orange", "red"]);
2012-06-06 05:50:09 +02:00
function update() {
var links = data.links
.filter(function (d) {
if (!visible.vpn && d.type == "vpn")
return false
if (!visible.clients && (d.source.flags.client || d.target.flags.client))
2012-06-06 04:15:08 +02:00
return false
// hides links to clients
if (!visible.vpn && (d.source.flags.vpn || d.target.flags.vpn))
2012-06-06 04:15:08 +02:00
return false
return true
})
var link = vis.select("g.links")
.selectAll("g.link")
.data(links, function(d) {
2012-06-06 01:26:38 +02:00
return d.id
})
2012-06-03 14:05:44 +02:00
var linkEnter = link.enter().append("g")
2012-06-11 22:11:11 +02:00
.attr("class", function(d) {
return "link " + d.type
})
2012-06-08 02:31:22 +02:00
.on("mouseover", function(d) {
d.source.fixed |= 2
d.target.fixed |= 2
})
.on("mouseout", function(d) {
d.source.fixed &= 1
d.target.fixed &= 1
})
linkEnter.append("line")
2012-06-11 20:35:30 +02:00
.append("title")
link.selectAll("line")
.filter( function (d) {
return d.type != 'client'
})
.style("stroke", function(d) {
return linkcolor(Math.max.apply(null, d.quality.split(",")))
})
2012-06-11 22:11:11 +02:00
2012-06-11 20:35:30 +02:00
link.selectAll("title")
.text( function (d) {
2012-06-11 22:11:11 +02:00
var s = d.quality
if (d.type)
s += " (" + d.type + ")"
return s
})
link.exit().remove()
2012-06-06 05:50:09 +02:00
var nodes = data.nodes.filter(function (d) {
if (!visible.vpn && d.flags.vpn)
2012-06-06 04:15:08 +02:00
return false
if (!visible.clients && d.flags.client)
2012-06-06 04:15:08 +02:00
return false
2012-06-12 00:37:07 +02:00
if (!d.flags.online)
return false
2012-06-06 04:15:08 +02:00
return true
2012-06-06 05:50:09 +02:00
})
var node = vis.select("g.nodes")
.selectAll("g.node")
.data(nodes,
function(d) {
2012-06-06 01:26:38 +02:00
return d.id
}
)
2012-06-06 05:50:09 +02:00
var nodeEnter = node.enter().append("g")
.attr("id", function (d) {
return d.id
})
.attr("class", "node")
.on("mouseover", fade(.2))
.on("mouseout", fade(1))
.on("click", show_node_info)
.call(force.drag)
nodeEnter.append("ellipse")
.attr("class", function(d) {
var s = []
for (var key in d.flags)
if (d.flags.hasOwnProperty(key) && d.flags[key])
s.push(key)
return s.join(" ")
})
2012-06-06 05:50:09 +02:00
node.selectAll("ellipse")
.attr("rx", function(d) {
if (d.flags.client) return 4
else return Math.max(10, d.name.length * 5)
})
.attr("ry", function(d) {
if (d.flags.client) return 4
else return 10
})
nodeEnter.filter(function(d) {
return !d.flags.client
})
.append("text")
2012-06-06 06:07:23 +02:00
.attr("class", "name")
2012-06-03 18:57:36 +02:00
.attr("text-anchor", "middle")
.attr("y", "4px")
2012-06-06 05:50:09 +02:00
2012-06-06 06:07:23 +02:00
node.selectAll("text.name")
2012-06-06 05:50:09 +02:00
.text(function(d) { return d.name })
2012-02-17 02:09:21 +01:00
nodeEnter.append("title")
2012-06-06 05:50:09 +02:00
node.selectAll("title")
.text(function(d) { return d.macs })
2012-06-03 18:57:36 +02:00
2012-06-06 06:07:23 +02:00
node.selectAll(".uplinks").remove()
2012-06-06 04:15:08 +02:00
if (!visible.vpn) {
2012-06-03 19:05:48 +02:00
var uplink_info = node.filter(function (d) {
2012-06-12 16:16:37 +02:00
return d.vpns > 0
2012-06-03 19:05:48 +02:00
})
2012-06-06 04:15:08 +02:00
.append("g")
.attr("class", "uplinks")
2012-06-03 19:05:48 +02:00
2012-06-03 21:08:48 +02:00
uplink_info.append("path")
.attr("d","m -2.8850049,-13.182327"
+ "c 7.5369165,0.200772 12.1529864,-1.294922 12.3338513,-10.639456"
+ "l 2.2140476,1.018191 -3.3137621,-5.293097 -3.2945999,5.20893 2.4339957,-0.995747"
+ "c -0.4041883,5.76426 -1.1549641,10.561363 -10.3735326,10.701179 z")
2012-06-03 18:57:36 +02:00
uplink_info.append("text")
.attr("text-anchor", "middle")
2012-06-03 21:08:48 +02:00
.attr("y", 3 - 20)
2012-06-12 16:16:37 +02:00
.text(function (d) {return d.vpns})
2012-06-03 18:57:36 +02:00
}
2012-02-17 02:09:21 +01:00
node.exit().remove()
2012-06-04 18:25:58 +02:00
2012-06-06 05:50:09 +02:00
force.nodes(nodes)
.links(links)
2012-06-06 21:43:13 +02:00
.alpha(0.1)
2012-06-06 05:50:09 +02:00
.start()
linkedByIndex = {}
2012-06-04 18:23:39 +02:00
links.forEach(function(d) {
linkedByIndex[d.source.index + "," + d.target.index] = 1
})
if (hashstr.length != 0)
show_node(hashstr)
2012-06-03 18:57:36 +02:00
}
2012-06-06 05:50:09 +02:00
function bounding_box(d) {
var c = d.firstChild
var r = {}
switch(c.nodeName) {
case "ellipse":
r.rx = c.rx.animVal.value
r.ry = c.ry.animVal.value
break;
case "circle":
r.rx = r.rz = c.r.animVal.value
break;
default:
r.rx = r.ry = 10
}
return r
}
2012-06-06 05:50:09 +02:00
reload()
2012-06-06 15:18:09 +02:00
var timer = window.setInterval(reload, 30000)