Freifunk-Troisdorf/meshviewer
5
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

forcegraph: mark uplink nodes

Browse Source
This commit is contained in:
Milan Pässler 2016-02-06 00:33:39 +01:00
parent 5708b63873
commit 6d6cb72f37
1 changed files with 58 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

100
lib/forcegraph.js
View File

@ -17,6 +17,8 @@ define(["d3"], function (d3) {
var highlightedNodes = []
var highlightedLinks = []
var nodes = []
var uplinkNodes = []
var nonUplinkNodes = []
var unknownNodes = []
var savedPanZoom
@ -251,6 +253,48 @@ define(["d3"], function (d3) {
d.y + margin > screenRect.top && d.y - margin < screenRect.bottom
}
function drawNode(color, radius, scale, r) {
var node = document.createElement("canvas")
node.width = scale * radius * 8 * r
node.height = node.width
var nctx = node.getContext("2d")
nctx.scale(scale * r, scale * r)
nctx.save()
nctx.translate(-node.width / scale, -node.height / scale)
nctx.lineWidth = radius
nctx.beginPath()
nctx.moveTo(radius, 0)
nctx.arc(0, 0, radius, 0, 2 * Math.PI)
nctx.strokeStyle = "rgba(255, 0, 0, 1)"
nctx.shadowOffsetX = node.width * 1.5 + 0
nctx.shadowOffsetY = node.height * 1.5 + 3
nctx.shadowBlur = 12
nctx.shadowColor = "rgba(0, 0, 0, 0.16)"
nctx.stroke()
nctx.shadowOffsetX = node.width * 1.5 + 0
nctx.shadowOffsetY = node.height * 1.5 + 3
nctx.shadowBlur = 12
nctx.shadowColor = "rgba(0, 0, 0, 0.23)"
nctx.stroke()
nctx.restore()
nctx.translate(node.width / 2 / scale / r, node.height / 2 / scale / r)
nctx.beginPath()
nctx.moveTo(radius, 0)
nctx.arc(0, 0, radius, 0, 2 * Math.PI)
nctx.strokeStyle = color
nctx.lineWidth = radius
nctx.stroke()
return node
}
function redraw() {
var r = window.devicePixelRatio
var translate = zoomBehavior.translate()
@ -268,7 +312,8 @@ define(["d3"], function (d3) {
var clientColor = "rgba(230, 50, 75, 1.0)"
var unknownColor = "#D10E2A"
var nodeColor = "#F2E3C6"
var nonUplinkColor = "#F2E3C6"
var uplinkColor = "#5BAAEB"
var highlightColor = "rgba(252, 227, 198, 0.15)"
var nodeRadius = 6
@ -306,50 +351,19 @@ define(["d3"], function (d3) {
// -- draw nodes --
var node = document.createElement("canvas")
node.width = scale * nodeRadius * 8 * r
node.height = node.width
var nctx = node.getContext("2d")
nctx.scale(scale * r, scale * r)
nctx.save()
nctx.translate(-node.width / scale, -node.height / scale)
nctx.lineWidth = nodeRadius
nctx.beginPath()
nctx.moveTo(nodeRadius, 0)
nctx.arc(0, 0, nodeRadius, 0, 2 * Math.PI)
nctx.strokeStyle = "rgba(255, 0, 0, 1)"
nctx.shadowOffsetX = node.width * 1.5 + 0
nctx.shadowOffsetY = node.height * 1.5 + 3
nctx.shadowBlur = 12
nctx.shadowColor = "rgba(0, 0, 0, 0.16)"
nctx.stroke()
nctx.shadowOffsetX = node.width * 1.5 + 0
nctx.shadowOffsetY = node.height * 1.5 + 3
nctx.shadowBlur = 12
nctx.shadowColor = "rgba(0, 0, 0, 0.23)"
nctx.stroke()
nctx.restore()
nctx.translate(node.width / 2 / scale / r, node.height / 2 / scale / r)
nctx.beginPath()
nctx.moveTo(nodeRadius, 0)
nctx.arc(0, 0, nodeRadius, 0, 2 * Math.PI)
nctx.strokeStyle = nodeColor
nctx.lineWidth = nodeRadius
nctx.stroke()
ctx.save()
ctx.scale(1 / scale / r, 1 / scale / r)
nodes.filter(visibleNodes).forEach(function (d) {
ctx.drawImage(node, scale * r * d.x - node.width / 2, scale * r * d.y - node.height / 2)
var nonUplinkNode = drawNode(nonUplinkColor, nodeRadius, scale, r)
nonUplinkNodes.filter(visibleNodes).forEach(function (d) {
ctx.drawImage(nonUplinkNode, scale * r * d.x - nonUplinkNode.width / 2, scale * r * d.y - nonUplinkNode.height / 2)
})
var uplinkNode = drawNode(uplinkColor, nodeRadius, scale, r)
uplinkNodes.filter(visibleNodes).forEach(function (d) {
ctx.drawImage(uplinkNode, scale * r * d.x - uplinkNode.width / 2, scale * r * d.y - uplinkNode.height / 2)
})
ctx.restore()
// -- draw clients --
@ -682,6 +696,8 @@ define(["d3"], function (d3) {
})
nodes = intNodes.filter(function (d) { return d.o.node })
uplinkNodes = nodes.filter(function (d) { return d.o.node.flags.uplink })
nonUplinkNodes = nodes.filter(function (d) { return !d.o.node.flags.uplink })
unknownNodes = intNodes.filter(function (d) { return !d.o.node })
if (localStorageTest()) {