Add basic netjson viewer
[oonf.git] / files / netjson_viewer / view.html
1 <!doctype html>
2 <html>
3 <head>
4   <title>Network | Basic usage</title>
5
6   <!-- This file use the http://visjs.org/index.html API -->
7   <script type="text/javascript" src="vis.js"></script>
8   <link href="vis.css" rel="stylesheet" type="text/css" />
9
10   <style type="text/css">
11     #mynetwork {
12       width: 1280px;
13       height: 768px;
14       border: 1px solid lightgray;
15     }
16   </style>
17 </head>
18 <body>
19
20 <p>
21   Visualization of olsrd2 netjson graph
22 </p>
23
24 <div id="mynetwork"></div>
25
26 <script type="text/javascript">
27 var visNodes, visEdges, visData, visNetwork;
28
29 // this URL should return the netjson graph output
30 var netjsonurl = "http://169.254.0.101/cgi/netjson.cgi";
31
32 function init_network() {
33   // create an array with nodes
34   visNodes = new vis.DataSet([
35   ]);
36
37   // create an array with edges
38   visEdges = new vis.DataSet([
39   ]);
40
41   // create a network
42   var container = document.getElementById('mynetwork');
43   var visData = {
44     nodes: visNodes,
45     edges: visEdges
46   };
47   var options = {};
48   visNetwork = new vis.Network(container, visData, options);
49 }
50
51 function layout_graph(element) {
52     nodes = element.nodes;
53
54     for (ni = 0; ni < nodes.length; ni++) {
55         var newId = nodes[ni].id;
56         var newLabel = newId;
57         visNodes.add(
58             {
59                 id:    newId,
60                 label: newLabel,
61                 mass:  2,
62             }
63         );
64     }
65
66     edges = element.links;
67
68     for (ei = 0; ei < edges.length; ei++) {
69         var fromId = edges[ei].source;
70         var toId = edges[ei].target;
71
72         var newLabel = edges[ei].weight.toString();
73         if (edges[ei].properties && edges[ei].properties["weight_txt"]) {
74             newLabel = edges[ei].properties["weight_txt"];
75         }
76         visEdges.add(
77             {
78                 from:   fromId,
79                 to:     toId,
80                 label:  newLabel,
81                 arrows: "to",
82                 font: {
83                     align: 'top'
84                 }
85             }
86         ); 
87     }
88 }
89
90 function xmlhttp_changed()
91 {
92     if (xmlhttp.readyState==XMLHttpRequest.DONE && xmlhttp.status==200) {
93         obj = JSON.parse(xmlhttp.responseText);
94
95         if (obj.type != "NetworkCollection") {
96             return;
97         }
98
99         for (index = 0; index < obj.collection.length; index++) {
100             element = obj.collection[index];
101
102             if (element.router_id.indexOf(':') != -1) {
103                 continue;
104             }
105
106             if (element.type == "NetworkGraph") {
107                 layout_graph(element);
108             }
109         }
110     }
111 }
112
113 init_network();
114
115 var xmlhttp = new XMLHttpRequest();
116 xmlhttp.onreadystatechange=xmlhttp_changed
117 xmlhttp.open("GET",netjsonurl,true);
118 xmlhttp.send();  
119
120 </script>
121
122 </body>
123 </html>