Developing lightweight computation at the DSG edge

graph.htm 2.48 KB
Newer Older
p4u's avatar
p4u committed
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<%#
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;
48
49
50

							var rxRate = data[i].links[j].rxRate;
							var txRate = data[i].links[j].txRate;
51

52
							if (!seen[key] && rxRate>0 && txRate>0)
p4u's avatar
p4u committed
53
						 	{
54
55
							 g.addEdge(data[i].globalId, data[i].links[j].globalId,
							 	{ label: rxRate + '/' + txRate,
p4u's avatar
p4u committed
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
								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();
			}
82

p4u's avatar
p4u committed
83
84
85
86
87
88
89
90
91
		}
	);
//]]></script>

<button id="redraw" onclick="redraw();">redraw</button>
<div id="canvas" style="min-width:800px; min-height:800px"></div>


<%+footer%>