More work on the 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 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 var count;
29
30 // this URL should return the netjson graph output
31 var netjsonurl = "http://169.254.0.101/cgi/netjson.cgi";
32
33 function init_network() {
34   var options = {
35 //      queue: {
36 //          delay: Infinty,
37 //      },
38   };
39   
40   // create an array with nodes
41   visNodes = new vis.DataSet([], options);
42
43   // create an array with edges
44   visEdges = new vis.DataSet([], options);
45
46   // create a network
47   var container = document.getElementById('mynetwork');
48   var visData = {
49     nodes: visNodes,
50     edges: visEdges
51   };
52   
53   options = {};
54   visNetwork = new vis.Network(container, visData, options);
55   
56   count = 0;
57 }
58
59 function layout_graph(element) {
60     nodes = element.nodes;
61     
62     for (ni = 0; ni < nodes.length; ni++) {
63         var nId = nodes[ni].id;
64         var nLabel = nId;
65         var nBorder = 1;
66         
67         if (nodes[ni].id == element.router_id) {
68             nBorder = 5;
69         }
70
71         if (visNodes.get(nId)) {    
72             visNodes.update(
73                 {
74                     id:          nId,
75                     label:       nLabel,
76 //                    physics:     false,
77                 }
78             );
79         }
80         else {
81             visNodes.update(
82                 {
83                     id:          nId,
84                     label:       nLabel,
85                     borderWidth: nBorder,
86                 }
87             );
88         }
89     }
90     
91     edges = element.links;
92
93     for (ei = 0; ei < edges.length; ei++) {
94         var eFrom = edges[ei].source;
95         var eTo = edges[ei].target;
96         var eUuid = eFrom + "-" + eTo;
97         var eWidth = 1;
98         var eLabel = edges[ei].weight.toString();
99         
100         if (edges[ei].properties) {
101             if (edges[ei].properties["weight_txt"]) {
102                 eLabel = edges[ei].properties["weight_txt"];
103             }
104             if (edges[ei].properties["outgoing_tree"] == "true") {
105                 eWidth=3;
106             }
107         }
108         
109         if (visEdges.get(eUuid)) {
110             visEdges.update(
111                 {
112                     id:          eUuid,
113                     label:       eLabel,
114                     width:       eWidth,
115 //                    physics:     false,
116                 }
117             );
118         }
119         else {
120             visEdges.update(
121                 {
122                     id:          eUuid,
123                     from:        eFrom,
124                     to:          eTo,
125                     label:       eLabel,
126                     arrows:      "to",
127                     length:      200,
128                     width:       eWidth,
129                     font: {
130                         align:       "top",
131                     }
132                 }
133             );
134         }
135     }
136 }
137
138 function xmlhttp_changed()
139 {
140     if (xmlhttp.readyState==XMLHttpRequest.DONE && xmlhttp.status==200) {
141         obj = JSON.parse(xmlhttp.responseText);
142
143         if (obj.type != "NetworkCollection") {
144             return;
145         }
146
147         for (index = 0; index < obj.collection.length; index++) {
148             element = obj.collection[index];
149
150             if (element.router_id.indexOf(':') != -1) {
151                 continue;
152             }
153
154             if (element.type == "NetworkGraph") {
155                 layout_graph(element);
156             }
157         }
158         if (count < 3) {
159             count = count + 1;
160             window.setTimeout(send_request, 5000);
161         }
162     }
163 }
164
165 init_network();
166 var xmlhttp = new XMLHttpRequest();
167 xmlhttp.onreadystatechange=xmlhttp_changed
168
169 function send_request()
170 {
171     xmlhttp.open("GET",netjsonurl,true);
172     xmlhttp.send();
173 }
174
175 send_request();
176
177 </script>
178
179 </body>
180 </html>