luci-app-bmx7/files/usr/lib/lua/luci/view/bmx7/topology.htm

   1 <%+header%>
   2 <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.12/d3.min.js"></script>
   3 <script type="text/javascript" src="<%=resource%>/bmx7/js/netjsongraph.js"></script>
   4
   5 <link href="<%=resource%>/bmx7/css/netjsongraph.css" rel="stylesheet">
   6     <style type="text/css">
   7         body {
   8             font-family: Arial, sans-serif;
   9             font-size: 13px;
  10         }
  11
  12         .njg-overlay{
  13             width: auto;
  14             height: auto;
  15             min-width: 200px;
  16             max-width: 400px;
  17             border: 1px solid #000;
  18             border-radius: 2px;
  19             background: rgba(0, 0, 0, 0.7);
  20             top: 10px;
  21             right: 10px;
  22             padding: 0 15px;
  23             font-family: Arial, sans-serif;
  24             font-size: 14px;
  25             color: #fff
  26         }
  27
  28         .njg-node {
  29             fill: #008000;
  30             fill-opacity: 0.8;
  31             stroke: #008000;
  32             stroke-width: 1px;
  33             cursor: pointer;
  34         }
  35         .njg-node:hover,
  36         .njg-node.njg-open{
  37             fill-opacity: 1;
  38         }
  39
  40         .njg-link {
  41             stroke: #00ff00;
  42             stroke-width: 2;
  43             stroke-opacity: .5;
  44             cursor: pointer;
  45         }
  46         .njg-link:hover,
  47         .njg-link.njg-open{
  48             stroke-width: 3;
  49             stroke-opacity: 1
  50         }
  51 </style>
  52 <script>d3.netJsonGraph("/cgi-bin/bmx7-info?netjson/network-graph.json", { defaultStyle: false });</script>
  53 <%+footer%>
  54