files/netjson_viewer/netjson_view.html

   1 <!doctype html>
   2 <html>
   3 <head>
   4     <title>Network | Basic usage</title>
   5
   6     <!-- This file use the http://visjs.org API -->
   7
   8     <link href="vis.css" rel="stylesheet" type="text/css" />
   9
  10     <style type="text/css">
  11         div#section {
  12             left:    5%;
  13             width:   95%;
  14             height:  768px;
  15             margin:  auto;
  16             padding: 10px;
  17         }
  18         div#networkgraph {
  19             width:   70%;
  20             height:  768px;
  21             float:   left;
  22             border:  1px solid lightgray;
  23         }
  24         div#infotext {
  25             margin-left:  70%;
  26             height:       768px;
  27             border:       1px solid lightgray;
  28         }
  29     </style>
  30
  31     <script type="text/javascript" src="vis.js"></script>
  32     <script type="text/javascript" src="netjson_view.js"></script>
  33 </head>
  34 <body>
  35     <p>Visualization of olsrd2 netjson graph</p>
  36
  37     Auto Update: <input type="checkbox" id="autoupdate"/>
  38     Dynamic Layout: <input type="checkbox" id="dynamiclayout"/>
  39     IPv4: <input type="checkbox" id="ipv4"/>
  40     <div id="section">
  41         <div id="networkgraph"></div>
  42         <div id="infotext"></div>
  43     </div>
  44
  45     <script type="text/javascript">
  46         init_netjson_viewer({
  47             checkbox_autoupdate:     "autoupdate",
  48             checkbox_dynamic_layout: "dynamiclayout",
  49             checkbox_ipv4:           "ipv4",
  50             div_showdata:            "infotext",
  51
  52             common_edge_postfix: "bit/s",
  53             common_node_prefix: {
  54                 ipv4: "192.168.0.",
  55                 ipv6: "fd00:0:0",
  56             },
  57             netjsonurl: "/telnet/netjsoninfo graph",
  58         });
  59     </script>
  60 </body>
  61 </html>