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

   1 <%#
   2 Copyright (C) 2011 Pau Escrich <pau@dabax.net>
   3 Contributors Jo-Philip
   4
   5 This program is free software; you can redistribute it and/or modify
   6 it under the terms of the GNU General Public License as published by
   7 the Free Software Foundation; either version 2 of the License, or
   8 (at your option) any later version.
   9
  10 This program is distributed in the hope that it will be useful,
  11 but WITHOUT ANY WARRANTY; without even the implied warranty of
  12 MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
  13 GNU General Public License for more details.
  14
  15 You should have received a copy of the GNU General Public License along
  16 with this program; if not, write to the Free Software Foundation, Inc.,
  17 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA.
  18
  19 The full GNU General Public License is included in this distribution in
  20 the file called "COPYING".
  21 -%>
  22
  23 <%
  24         luci.http.prepare_content("text/html")
  25
  26         local location = { unpack(luci.dispatcher.context.path) }
  27         location[#location] = "topology"
  28 %>
  29
  30 <%+header%>
  31
  32 <script type="text/javascript" src="<%=resource%>/bmx6/js/raphael-min.js"></script>
  33 <script type="text/javascript" src="<%=resource%>/bmx6/js/dracula_graffle.js"></script>
  34 <script type="text/javascript" src="<%=resource%>/bmx6/js/jquery-1.4.2.min.js"></script>
  35 <script type="text/javascript" src="<%=resource%>/bmx6/js/dracula_graph.js"></script>
  36
  37 <button id="redraw" onclick="redraw();">&nbsp redraw &nbsp</button>
  38
  39 <div id="wait" style="text-align: center">
  40 <br /><br />
  41 <img src="<%=resource%>/icons/loading.gif" />
  42 <%:Collecting data...%>
  43
  44 </div>
  45
  46 <div id="canvas" style="min-width:800px; min-height:800px"></div>
  47
  48 <script type="text/javascript">//<![CDATA[
  49         var redraw;
  50
  51         XHR.get('<%=luci.dispatcher.build_url(unpack(location))%>', null,
  52                 function(x, data)
  53                 {
  54                         var g = new Graph();
  55                         var seen = { };
  56
  57                         for (var i = 0; i < (data.length); i++)
  58                         {
  59                                 // node->node
  60                                 if (data[i].globalId)
  61                                         {
  62                                         for (var j = 0; j < (data[i].links.length); j++)
  63                                                  {
  64                                                  var key = (data[i].globalId < data[i].links[j].globalId)
  65                                                         ? data[i].globalId + '|' + data[i].links[j].globalId
  66                                                         : data[i].links[j].globalId + '|' + data[i].globalId;
  67
  68                                                         var rxRate = data[i].links[j].rxRate;
  69                                                         var txRate = data[i].links[j].txRate;
  70
  71                                                         if (!seen[key] && rxRate>0 && txRate>0)
  72                                                         {
  73                                                          g.addEdge(data[i].globalId, data[i].links[j].globalId,
  74                                                                 { label: rxRate + '/' + txRate,
  75                                                                 directed: false, stroke: '#aaaaaa', fill: '#ffffff',
  76                                                                 'label-style': { 'font-size': 8 }});
  77                                                          seen[key] = true;
  78                                                          }
  79                                                  }
  80                                         }
  81                                         //g.addEdge(data[i].router, data[i].neighbor,
  82                                         //      { label: data[i].label, directed: true, stroke: '#aaaaaa' });
  83                                 // node->leaf
  84                                 //else if (data[i].router && data[i].gateway)
  85                                 //      g.addEdge(data[i].router, data[i].gateway,
  86                                 //              { label: 'leaf', stroke: '#cccccc' });
  87                         }
  88
  89                         var canvas = document.getElementById('canvas');
  90
  91                         var layouter = new Graph.Layout.Spring(g);
  92                         layouter.layout();
  93
  94                         var divwait = document.getElementById("wait");
  95                         divwait.parentNode.removeChild(divwait);
  96
  97                         var renderer = new Graph.Renderer.Raphael(canvas.id, g, canvas.offsetWidth, canvas.offsetHeight);
  98                         renderer.draw();
  99
 100                         redraw = function() {
 101                                 layouter.layout();
 102                                 renderer.draw();
 103                         }
 104
 105                 }
 106         );
 107 //]]></script>
 108
 109
 110 <%+footer%>