Live update for 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
8   <script type="text/javascript" src="vis.js"></script>
9   <link href="vis.css" rel="stylesheet" type="text/css" />
10
11   <style type="text/css">
12     #mynetwork {
13       width: 1280px;
14       height: 768px;
15       border: 1px solid lightgray;
16     }
17   </style>
18 </head>
19 <body>
20
21 <p>
22   Visualization of olsrd2 netjson graph
23 </p>
24
25 Auto Update: <input type="checkbox" id="autoupdate" onclick="checkbox_clicked();" checked="checked"/>
26
27 <div id="mynetwork"></div>
28
29 <script type="text/javascript">
30 var visNodes, visEdges, visData, visNetwork;
31 var firstLookup;
32 var autoupdate_timeout;
33 var common_edge_postfix = "bit/s";
34
35 // this URL should return the netjson graph output
36 var netjsonurl = "http://169.254.0.101/cgi/netjson.cgi";
37
38 function init_network() {
39     var options = {
40     };
41
42     // create an array with nodes
43     visNodes = new vis.DataSet([], options);
44
45     // create an array with edges
46     visEdges = new vis.DataSet([], options);
47
48     // create a network
49     var container = document.getElementById('mynetwork');
50     var visData = {
51         nodes: visNodes,
52         edges: visEdges
53     };
54
55     options = {
56         edges: {
57             smooth: {
58                 type: 'continuous'
59             }
60         },
61     };
62     visNetwork = new vis.Network(container, visData, options);
63   
64     firstLookup = true;
65 }
66
67 function layout_nodes(element) {
68     var jsonNodes = element.nodes;
69     var newIds = []
70     var oldIds = []
71     
72     /* add new nodes */
73     newIds = []
74     oldIds = visNodes.getIds()
75     for (ni = 0; ni < jsonNodes.length; ni++) {
76         var nId = jsonNodes[ni].id;
77         var nBorder = 1;
78
79         var idx = nId.lastIndexOf('.');
80         var nLabel = nId.substring(idx+1, nId.length);
81                 
82         newIds.push(nId);
83         if (jsonNodes[ni].id == element.router_id) {
84             nBorder = 5;
85         }
86
87         if (!visNodes.get(nId)) {    
88             visNodes.add(
89                 {
90                     id:          nId,
91                     label:       nLabel,
92                     borderWidth: nBorder,
93                     mass:        4,
94                 }
95             );
96         }
97     }
98     
99     /* remove old nodes */
100     for (ni = 0; ni < oldIds.length; ni++) {
101         if (newIds.indexOf(oldIds[ni]) == -1) {
102             visNodes.remove(oldIds[ni]);
103         }
104     }
105 }
106
107 function layout_edges(element) {
108     var jsonEdges = element.links;
109     var newIds = []
110     var oldIds = []
111     var undirectedEdges = {}
112     
113     /* calculate unidirectional edges */
114     newIds = []
115     oldIds = visEdges.getIds()
116     for (ei = 0; ei < jsonEdges.length; ei++) {
117         var eFrom = jsonEdges[ei].source;
118         var eTo = jsonEdges[ei].target;
119         
120         if (eFrom > eTo) {
121             var tmp = eTo;
122             eTo = eFrom;
123             eFrom = tmp;
124         }
125
126         var uuid = eFrom + "-" + eTo;
127         
128         var edge = undirectedEdges[uuid];
129         if (edge == null) {
130             edge = {
131                 uuid:      eFrom + "-" + eTo,
132                 from:      eFrom,
133                 to:        eTo,
134                 width:     1,
135                 arrows:    "",
136                 fromLabel: "-",
137                 toLabel:   "-"
138             };
139             undirectedEdges[uuid] = edge;
140         };
141                 
142         newIds.push(edge.uuid);
143         
144         var eLabel =  jsonEdges[ei].weight.toString();
145         if (jsonEdges[ei].properties) {
146             if (jsonEdges[ei].properties["weight_txt"]) {
147                 eLabel = jsonEdges[ei].properties["weight_txt"];
148             }
149             if (jsonEdges[ei].properties["outgoing_tree"] == "true") {
150                 edge.width=3;
151                 if (jsonEdges[ei].source == eFrom) {
152                     edge.arrows = "to";
153                 }
154                 else {
155                     edge.arrows = "from";
156                 }
157             }
158         }
159         
160         if (jsonEdges[ei].source == eFrom) {
161             edge.fromLabel = eLabel;
162         }
163         else {
164             edge.toLabel = eLabel;
165         }
166     }
167     
168     /* add new edges */
169     for (ei = 0; ei < newIds.length; ei++) {
170         var edge = undirectedEdges[newIds[ei]];
171         var label = "";
172         
173         var flen = edge.fromLabel.length - common_edge_postfix.length;
174         var tlen = edge.toLabel.length - common_edge_postfix.length;
175         
176         if (edge.fromLabel == edge.toLabel) {
177             label = edge.fromLabel;
178         }
179         else if (edge.fromLabel.substring(flen) == common_edge_postfix
180                 && edge.fromLabel.substring(flen) == common_edge_postfix) {
181             label = edge.fromLabel.substring(0, flen).trim() + "/"
182                 + edge.toLabel.substring(0, tlen).trim()
183                 + " " + common_edge_postfix;             
184         }
185         else {
186             label = edge.fromLabel + "/" + edge.toLabel;
187         }
188         
189         if (visEdges.get(edge.uuid)) {
190             visEdges.update(
191                 {
192                     id:          edge.uuid,
193                     label:       label,
194                     width:       edge.width,
195                     arrows:      edge.arrows,
196                 }
197             );
198         }
199         else {
200             visEdges.add(
201                 {
202                     id:          edge.uuid,
203                     from:        edge.from,
204                     to:          edge.to,
205                     label:       label,
206                     length:      200,
207                     width:       edge.width,
208                     arrows:      edge.arrows,
209                     font: {
210                         align:       "top",
211                     }
212                 }
213             );
214         }
215     }
216
217     /* remove old edges */
218     for (ei = 0; ei < oldIds.length; ei++) {
219         if (newIds.indexOf(oldIds[ei]) == -1) {
220             visEdges.remove(oldIds[ei]);
221         }
222     }
223 }
224
225 function xmlhttp_changed()
226 {
227     if (xmlhttp.readyState==XMLHttpRequest.DONE && xmlhttp.status==200) {
228         console.log("Got update");
229         
230         obj = JSON.parse(xmlhttp.responseText);
231
232         if (obj.type != "NetworkCollection") {
233             return;
234         }
235
236         for (index = 0; index < obj.collection.length; index++) {
237             element = obj.collection[index];
238
239             if (element.router_id.indexOf(':') != -1) {
240                 continue;
241             }
242
243             if (element.type == "NetworkGraph") {
244                 layout_graph(element);
245             }
246         }
247         
248         var checkbox = document.getElementById("autoupdate");
249         if (checkbox.checked) {
250             autoupdate_timeout = window.setTimeout(send_request, 5000);
251         }
252     }
253 }
254
255 function checkbox_clicked() {
256     var checkbox = document.getElementById("autoupdate");
257     if (checkbox.checked === false) {
258         window.clearTimeout(autoupdate_timeout);
259     }
260     else {
261         send_request();
262     }    
263 }
264
265 function send_request() {
266     xmlhttp.open("GET",netjsonurl,true);
267     xmlhttp.send();
268 }
269
270 var xmlhttp = new XMLHttpRequest();
271 xmlhttp.onreadystatechange=xmlhttp_changed
272
273 init_network();
274 send_request();
275
276 </script>
277
278 </body>
279 </html>