diff --git a/share/views/ajax/device/netmap.tt b/share/views/ajax/device/netmap.tt index e1a3ce39..5863e05d 100644 --- a/share/views/ajax/device/netmap.tt +++ b/share/views/ajax/device/netmap.tt @@ -13,37 +13,42 @@ $.getJSON('[% uri_for('/ajax/data/device/netmap') %]', {q: '[% params.q %]'}, fu } jQuery(document).ready(function() { - window.netmap_pane = netGobrechtsD3Force('netmap_pane') - .debug(true) - .lassoMode(true) - .nodeEventToOpenLink('click') - .nodeLinkTarget('none') - .labelDistance(2) - .zoomMode(true) - .showLinkDirection(false) - .preventLabelOverlappingOnForceEnd(true) - .showSelfLinks(true) - .minZoomFactor(0.1) - .maxZoomFactor(10); + var canvas = document.querySelector("canvas"), + context = canvas.getContext("2d"), + width = canvas.width, + height = canvas.height; - var ticker = netmap_pane.inspect().main.force.tick; - netmap_pane.inspect().main.force.tick = (function(forceTick) { - return function() { - forceTick(); - return true; - } - }(netmap_pane.inspect().main.force.tick)); - - // center on our selected device - netmap_pane.inspect().main.force.on('end.centernode', function() { - var node = netmap_pane.nodeDataById( mapdata['v3']['centernode'] ); - netmap_pane.zoomSmooth(node.x, node.y, node.radius * 200); - netmap_pane.inspect().main.force.on('end.centernode', null); - }); - - jQuery('#nd_sidebar-toggle-img-in').on("click", resizeGraphContainer); - jQuery('#nd_sidebar-toggle-img-out').on("click", resizeGraphContainer); - jQuery(window).on("resize", resizeGraphContainer); +// window.netmap_pane = netGobrechtsD3Force('netmap_pane') +// .debug(true) +// .lassoMode(true) +// .nodeEventToOpenLink('click') +// .nodeLinkTarget('none') +// .labelDistance(2) +// .zoomMode(true) +// .showLinkDirection(false) +// .preventLabelOverlappingOnForceEnd(true) +// .showSelfLinks(true) +// .minZoomFactor(0.1) +// .maxZoomFactor(10); +// +// var ticker = netmap_pane.inspect().main.force.tick; +// netmap_pane.inspect().main.force.tick = (function(forceTick) { +// return function() { +// forceTick(); +// return true; +// } +// }(netmap_pane.inspect().main.force.tick)); +// +// // center on our selected device +// netmap_pane.inspect().main.force.on('end.centernode', function() { +// var node = netmap_pane.nodeDataById( mapdata['v3']['centernode'] ); +// netmap_pane.zoomSmooth(node.x, node.y, node.radius * 200); +// netmap_pane.inspect().main.force.on('end.centernode', null); +// }); +// +// jQuery('#nd_sidebar-toggle-img-in').on("click", resizeGraphContainer); +// jQuery('#nd_sidebar-toggle-img-out').on("click", resizeGraphContainer); +// jQuery(window).on("resize", resizeGraphContainer); var worker = new Worker( 'http://localhost:5000/javascripts/worker.js' ); worker.postMessage(mapdata['v4']); @@ -60,22 +65,54 @@ $.getJSON('[% uri_for('/ajax/data/device/netmap') %]', {q: '[% params.q %]'}, fu //meter.style.width = 100 * progress + "%"; } +// function ended(data) { +// var netmapdata = {'data': { +// 'nodes': data.nodes.map(function(node) { +// var index = node['index']; +// var x = mapdata['v3']['nodes'][index]; +// x['x'] = node['x']; +// x['y'] = node['y']; +// return x; +// }), +// 'links': mapdata['v3']['links'] +// }}; +// netmap_pane.start(netmapdata); +// netmap_pane.inspect().main.force.alpha(0.005).tick(); +// netmap_pane.inspect().main.force.stop(); +// netmap_pane.inspect().main.force.tick = ticker; +// resizeGraphContainer(); +// } + function ended(data) { - var netmapdata = {'data': { - 'nodes': data.nodes.map(function(node) { - var index = node['index']; - var x = mapdata['v3']['nodes'][index]; - x['x'] = node['x']; - x['y'] = node['y']; - return x; - }), - 'links': mapdata['v3']['links'] - }}; - netmap_pane.start(netmapdata); - netmap_pane.inspect().main.force.alpha(0.005).tick(); - netmap_pane.inspect().main.force.stop(); - netmap_pane.inspect().main.force.tick = ticker; - resizeGraphContainer(); + var nodes = data.nodes, + links = data.links; + + context.clearRect(0, 0, width, height); + context.save(); + context.translate(width / 2, height / 2); + + context.beginPath(); + links.forEach(drawLink); + context.strokeStyle = "#aaa"; + context.stroke(); + + context.beginPath(); + nodes.forEach(drawNode); + context.fill(); + context.strokeStyle = "#fff"; + context.stroke(); + + context.restore(); + } + + function drawLink(d) { + context.moveTo(d.source.x, d.source.y); + context.lineTo(d.target.x, d.target.y); + } + + function drawNode(d) { + context.moveTo(d.x + 3, d.y); + context.arc(d.x, d.y, 3, 0, 2 * Math.PI); } }); @@ -83,3 +120,5 @@ $.getJSON('[% uri_for('/ajax/data/device/netmap') %]', {q: '[% params.q %]'}, fu // vim: ft=javascript + +