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

   1 <%#
   2 LuCI - Lua Configuration Interface
   3 Copyright 2012 Jo-Philipp Wich <xm@subsignal.org>
   4
   5 Licensed under the Apache License, Version 2.0 (the "License");
   6 you may not use this file except in compliance with the License.
   7 You may obtain a copy of the License at
   8
   9         http://www.apache.org/licenses/LICENSE-2.0
  10
  11 $Id$
  12
  13 -%>
  14
  15 <%
  16         luci.http.prepare_content("text/html")
  17
  18         local location = { unpack(luci.dispatcher.context.path) }
  19         location[#location] = "topology"
  20 %>
  21
  22 <%+header%>
  23
  24 <script type="text/javascript" src="<%=resource%>/bmx6/js/raphael-min.js"></script>
  25 <script type="text/javascript" src="<%=resource%>/bmx6/js/dracula_graffle.js"></script>
  26 <script type="text/javascript" src="<%=resource%>/bmx6/js/jquery-1.4.2.min.js"></script>
  27 <script type="text/javascript" src="<%=resource%>/bmx6/js/dracula_graph.js"></script>
  28
  29 <script type="text/javascript">//<![CDATA[
  30         var redraw;
  31
  32         XHR.get('<%=luci.dispatcher.build_url(unpack(location))%>', null,
  33                 function(x, data)
  34                 {
  35                         var g = new Graph();
  36                         var seen = { };
  37
  38                         for (var i = 0; i < (data.length); i++)
  39                         {
  40                                 // node->node
  41                                 if (data[i].globalId)
  42                                         {
  43                                         for (var j = 0; j < (data[i].links.length); j++)
  44                                                  {
  45                                                  var key = (data[i].globalId < data[i].links[j].globalId)
  46                                                         ? data[i].globalId + '|' + data[i].links[j].globalId
  47                                                         : data[i].links[j].globalId + '|' + data[i].globalId;
  48
  49                                                         var rxRate = data[i].links[j].rxRate;
  50                                                         var txRate = data[i].links[j].txRate;
  51
  52                                                         if (!seen[key] && rxRate>0 && txRate>0)
  53                                                         {
  54                                                          g.addEdge(data[i].globalId, data[i].links[j].globalId,
  55                                                                 { label: rxRate + '/' + txRate,
  56                                                                 directed: false, stroke: '#aaaaaa', fill: '#ffffff',
  57                                                                 'label-style': { 'font-size': 10 }});
  58                                                          seen[key] = true;
  59                                                          }
  60                                                  }
  61                                         }
  62                                         //g.addEdge(data[i].router, data[i].neighbor,
  63                                         //      { label: data[i].label, directed: true, stroke: '#aaaaaa' });
  64                                 // node->leaf
  65                                 //else if (data[i].router && data[i].gateway)
  66                                 //      g.addEdge(data[i].router, data[i].gateway,
  67                                 //              { label: 'leaf', stroke: '#cccccc' });
  68                         }
  69
  70                         var canvas = document.getElementById('canvas');
  71
  72                         var layouter = new Graph.Layout.Spring(g);
  73                         layouter.layout();
  74
  75                         var renderer = new Graph.Renderer.Raphael(canvas.id, g, canvas.offsetWidth, canvas.offsetHeight);
  76                         renderer.draw();
  77
  78                         redraw = function() {
  79                                 layouter.layout();
  80                                 renderer.draw();
  81                         }
  82
  83                 }
  84         );
  85 //]]></script>
  86
  87 <button id="redraw" onclick="redraw();">redraw</button>
  88 <div id="canvas" style="min-width:800px; min-height:800px"></div>
  89
  90
  91 <%+footer%>