freifunk/hopglass
8
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

forcegraph: new, dark color theme

Browse source
This commit is contained in:
Nils Schneider 2015-07-07 12:42:57 +02:00
parent d1beb51868
commit a240bb2f7a
3 changed files with 16 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

23
lib/forcegraph.js
View file

@ -309,13 +309,18 @@ define(["d3"], function (d3) {
} }
}) })
ctx.fillStyle = "#99173C" var clientColor = "#E6324B"
var hilightColor = "#FA940F"
var unknownColor = "#353634"
var nodeColor = "#F2E3C6"
ctx.fillStyle = clientColor
ctx.fill() ctx.fill()
if (highlightedLinks.length) { if (highlightedLinks.length) {
ctx.save() ctx.save()
ctx.lineWidth = 10 ctx.lineWidth = 10
ctx.strokeStyle = "#F2AB38" ctx.strokeStyle = hilightColor
highlightedLinks.forEach(function (d) { highlightedLinks.forEach(function (d) {
ctx.beginPath() ctx.beginPath()
@ -351,7 +356,7 @@ define(["d3"], function (d3) {
ctx.arc(d.x, d.y, 8, 0, 2 * Math.PI) ctx.arc(d.x, d.y, 8, 0, 2 * Math.PI)
}) })
ctx.fillStyle = "#555152" ctx.fillStyle = unknownColor
ctx.fill() ctx.fill()
@ -361,14 +366,14 @@ define(["d3"], function (d3) {
ctx.arc(d.x, d.y, 8, 0, 2 * Math.PI) ctx.arc(d.x, d.y, 8, 0, 2 * Math.PI)
}) })
ctx.fillStyle = "#EFFFCD" ctx.fillStyle = nodeColor
ctx.fill() ctx.fill()
if (highlightedNodes.length) { if (highlightedNodes.length) {
ctx.save() ctx.save()
ctx.strokeStyle = "#F2AB38" ctx.strokeStyle = hilightColor
ctx.fillStyle = "#EFFFCD" ctx.fillStyle = nodeColor
ctx.lineWidth = 6 ctx.lineWidth = 6
highlightedNodes.forEach(function (d) { highlightedNodes.forEach(function (d) {
@ -564,7 +569,7 @@ define(["d3"], function (d3) {
e.target = newNodesDict[d.target.id] e.target = newNodesDict[d.target.id]
if (d.vpn) if (d.vpn)
e.color = "rgba(170, 162, 164, " + (0.6 / d.tq) + ")" e.color = "rgba(255, 255, 255, " + (0.6 / d.tq) + ")"
else else
e.color = linkScale(d.tq).hex() e.color = linkScale(d.tq).hex()
@ -597,8 +602,8 @@ define(["d3"], function (d3) {
bctx.textAlign = "center" bctx.textAlign = "center"
bctx.lineWidth = lineWidth bctx.lineWidth = lineWidth
bctx.lineCap = "round" bctx.lineCap = "round"
bctx.strokeStyle = "rgba(85, 81, 82, 0.03)" bctx.strokeStyle = "rgba(53, 54, 52, 0.1)"
bctx.fillStyle = "rgba(220, 233, 190, 0.8)" bctx.fillStyle = "rgba(242, 227, 198, 0.8)"
bctx.miterLimit = 2 bctx.miterLimit = 2
bctx.strokeText(name, buffer.width / (2 * scale), buffer.height / (2 * scale)) bctx.strokeText(name, buffer.width / (2 * scale), buffer.height / (2 * scale))
bctx.fillText(name, buffer.width / (2 * scale), buffer.height / (2 * scale)) bctx.fillText(name, buffer.width / (2 * scale), buffer.height / (2 * scale))

2
lib/gui.js
View file

@ -11,7 +11,7 @@ function (chroma, Map, Sidebar, Tabs, Container, Meshstats, Linklist,
var content var content
var contentDiv var contentDiv
var linkScale = chroma.scale(chroma.interpolate.bezier(["green", "yellow", "red"])).domain([1, 5]) var linkScale = chroma.scale(chroma.interpolate.bezier(["#04C714", "#FF5500", "#F02311"])).domain([1, 5])
var sidebar var sidebar
var buttons = document.createElement("div") var buttons = document.createElement("div")

2
scss/_forcegraph.scss
View file

@ -1,7 +1,7 @@
.graph { .graph {
height: 100%; height: 100%;
width: 100%; width: 100%;
background: #2E2633; background: #2B2B2B;
canvas { canvas {
display: block; display: block;