routing/files/usr/lib/lua/luci/view/bmx6/graph.htm

91 lines
2.5 KiB
HTML

<%#
LuCI - Lua Configuration Interface
Copyright 2012 Jo-Philipp Wich <xm@subsignal.org>
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
$Id$
-%>
<%
luci.http.prepare_content("text/html")
local location = { unpack(luci.dispatcher.context.path) }
location[#location] = "topology"
%>
<%+header%>
<script type="text/javascript" src="<%=resource%>/bmx6/js/raphael-min.js"></script>
<script type="text/javascript" src="<%=resource%>/bmx6/js/dracula_graffle.js"></script>
<script type="text/javascript" src="<%=resource%>/bmx6/js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="<%=resource%>/bmx6/js/dracula_graph.js"></script>
<script type="text/javascript">//<![CDATA[
var redraw;
XHR.get('<%=luci.dispatcher.build_url(unpack(location))%>', null,
function(x, data)
{
var g = new Graph();
var seen = { };
for (var i = 0; i < (data.length); i++)
{
// node->node
if (data[i].globalId)
{
for (var j = 0; j < (data[i].links.length); j++)
{
var key = (data[i].globalId < data[i].links[j].globalId)
? data[i].globalId + '|' + data[i].links[j].globalId
: data[i].links[j].globalId + '|' + data[i].globalId;
var rxRate = data[i].links[j].rxRate;
var txRate = data[i].links[j].txRate;
if (!seen[key] && rxRate>0 && txRate>0)
{
g.addEdge(data[i].globalId, data[i].links[j].globalId,
{ label: rxRate + '/' + txRate,
directed: false, stroke: '#aaaaaa', fill: '#ffffff',
'label-style': { 'font-size': 10 }});
seen[key] = true;
}
}
}
//g.addEdge(data[i].router, data[i].neighbor,
// { label: data[i].label, directed: true, stroke: '#aaaaaa' });
// node->leaf
//else if (data[i].router && data[i].gateway)
// g.addEdge(data[i].router, data[i].gateway,
// { label: 'leaf', stroke: '#cccccc' });
}
var canvas = document.getElementById('canvas');
var layouter = new Graph.Layout.Spring(g);
layouter.layout();
var renderer = new Graph.Renderer.Raphael(canvas.id, g, canvas.offsetWidth, canvas.offsetHeight);
renderer.draw();
redraw = function() {
layouter.layout();
renderer.draw();
}
}
);
//]]></script>
<button id="redraw" onclick="redraw();">redraw</button>
<div id="canvas" style="min-width:800px; min-height:800px"></div>
<%+footer%>