Live update for netjson viewer
authorHenning Rogge <henning.rogge@fkie.fraunhofer.de>
Tue, 23 Jun 2015 11:46:35 +0000 (13:46 +0200)
committerHenning Rogge <henning.rogge@fkie.fraunhofer.de>
Tue, 23 Jun 2015 11:46:35 +0000 (13:46 +0200)
files/netjson_viewer/view.html

index 83d2b47..d5c34f3 100644 (file)
@@ -4,6 +4,7 @@
   <title>Network | Basic usage</title>
 
   <!-- This file use the http://visjs.org API -->
+
   <script type="text/javascript" src="vis.js"></script>
   <link href="vis.css" rel="stylesheet" type="text/css" />
 
   Visualization of olsrd2 netjson graph
 </p>
 
+Auto Update: <input type="checkbox" id="autoupdate" onclick="checkbox_clicked();" checked="checked"/>
+
 <div id="mynetwork"></div>
 
 <script type="text/javascript">
 var visNodes, visEdges, visData, visNetwork;
-var count;
+var firstLookup;
+var autoupdate_timeout;
+var common_edge_postfix = "bit/s";
 
 // this URL should return the netjson graph output
 var netjsonurl = "http://169.254.0.101/cgi/netjson.cgi";
 
 function init_network() {
-  var options = {
-//      queue: {
-//          delay: Infinty,
-//      },
-  };
-  
-  // create an array with nodes
-  visNodes = new vis.DataSet([], options);
-
-  // create an array with edges
-  visEdges = new vis.DataSet([], options);
-
-  // create a network
-  var container = document.getElementById('mynetwork');
-  var visData = {
-    nodes: visNodes,
-    edges: visEdges
-  };
-  
-  options = {};
-  visNetwork = new vis.Network(container, visData, options);
+    var options = {
+    };
+
+    // create an array with nodes
+    visNodes = new vis.DataSet([], options);
+
+    // create an array with edges
+    visEdges = new vis.DataSet([], options);
+
+    // create a network
+    var container = document.getElementById('mynetwork');
+    var visData = {
+        nodes: visNodes,
+        edges: visEdges
+    };
+
+    options = {
+        edges: {
+            smooth: {
+                type: 'continuous'
+            }
+        },
+    };
+    visNetwork = new vis.Network(container, visData, options);
   
-  count = 0;
+    firstLookup = true;
 }
 
-function layout_graph(element) {
-    nodes = element.nodes;
+function layout_nodes(element) {
+    var jsonNodes = element.nodes;
+    var newIds = []
+    var oldIds = []
     
-    for (ni = 0; ni < nodes.length; ni++) {
-        var nId = nodes[ni].id;
-        var nLabel = nId;
+    /* add new nodes */
+    newIds = []
+    oldIds = visNodes.getIds()
+    for (ni = 0; ni < jsonNodes.length; ni++) {
+        var nId = jsonNodes[ni].id;
         var nBorder = 1;
-        
-        if (nodes[ni].id == element.router_id) {
+
+        var idx = nId.lastIndexOf('.');
+        var nLabel = nId.substring(idx+1, nId.length);
+                
+        newIds.push(nId);
+        if (jsonNodes[ni].id == element.router_id) {
             nBorder = 5;
         }
 
-        if (visNodes.get(nId)) {    
-            visNodes.update(
-                {
-                    id:          nId,
-                    label:       nLabel,
-//                    physics:     false,
-                }
-            );
-        }
-        else {
-            visNodes.update(
+        if (!visNodes.get(nId)) {    
+            visNodes.add(
                 {
                     id:          nId,
                     label:       nLabel,
                     borderWidth: nBorder,
+                    mass:        4,
                 }
             );
         }
     }
     
-    edges = element.links;
-
-    for (ei = 0; ei < edges.length; ei++) {
-        var eFrom = edges[ei].source;
-        var eTo = edges[ei].target;
-        var eUuid = eFrom + "-" + eTo;
-        var eWidth = 1;
-        var eLabel = edges[ei].weight.toString();
+    /* remove old nodes */
+    for (ni = 0; ni < oldIds.length; ni++) {
+        if (newIds.indexOf(oldIds[ni]) == -1) {
+            visNodes.remove(oldIds[ni]);
+        }
+    }
+}
+
+function layout_edges(element) {
+    var jsonEdges = element.links;
+    var newIds = []
+    var oldIds = []
+    var undirectedEdges = {}
+    
+    /* calculate unidirectional edges */
+    newIds = []
+    oldIds = visEdges.getIds()
+    for (ei = 0; ei < jsonEdges.length; ei++) {
+        var eFrom = jsonEdges[ei].source;
+        var eTo = jsonEdges[ei].target;
+        
+        if (eFrom > eTo) {
+            var tmp = eTo;
+            eTo = eFrom;
+            eFrom = tmp;
+        }
+
+        var uuid = eFrom + "-" + eTo;
         
-        if (edges[ei].properties) {
-            if (edges[ei].properties["weight_txt"]) {
-                eLabel = edges[ei].properties["weight_txt"];
+        var edge = undirectedEdges[uuid];
+        if (edge == null) {
+            edge = {
+                uuid:      eFrom + "-" + eTo,
+                from:      eFrom,
+                to:        eTo,
+                width:     1,
+                arrows:    "",
+                fromLabel: "-",
+                toLabel:   "-"
+            };
+            undirectedEdges[uuid] = edge;
+        };
+                
+        newIds.push(edge.uuid);
+        
+        var eLabel =  jsonEdges[ei].weight.toString();
+        if (jsonEdges[ei].properties) {
+            if (jsonEdges[ei].properties["weight_txt"]) {
+                eLabel = jsonEdges[ei].properties["weight_txt"];
             }
-            if (edges[ei].properties["outgoing_tree"] == "true") {
-                eWidth=3;
+            if (jsonEdges[ei].properties["outgoing_tree"] == "true") {
+                edge.width=3;
+                if (jsonEdges[ei].source == eFrom) {
+                    edge.arrows = "to";
+                }
+                else {
+                    edge.arrows = "from";
+                }
             }
         }
         
-        if (visEdges.get(eUuid)) {
+        if (jsonEdges[ei].source == eFrom) {
+            edge.fromLabel = eLabel;
+        }
+        else {
+            edge.toLabel = eLabel;
+        }
+    }
+    
+    /* add new edges */
+    for (ei = 0; ei < newIds.length; ei++) {
+        var edge = undirectedEdges[newIds[ei]];
+        var label = "";
+        
+        var flen = edge.fromLabel.length - common_edge_postfix.length;
+        var tlen = edge.toLabel.length - common_edge_postfix.length;
+        
+        if (edge.fromLabel == edge.toLabel) {
+            label = edge.fromLabel;
+        }
+        else if (edge.fromLabel.substring(flen) == common_edge_postfix
+                && edge.fromLabel.substring(flen) == common_edge_postfix) {
+            label = edge.fromLabel.substring(0, flen).trim() + "/"
+                + edge.toLabel.substring(0, tlen).trim()
+                + " " + common_edge_postfix;             
+        }
+        else {
+            label = edge.fromLabel + "/" + edge.toLabel;
+        }
+        
+        if (visEdges.get(edge.uuid)) {
             visEdges.update(
                 {
-                    id:          eUuid,
-                    label:       eLabel,
-                    width:       eWidth,
-//                    physics:     false,
+                    id:          edge.uuid,
+                    label:       label,
+                    width:       edge.width,
+                    arrows:      edge.arrows,
                 }
             );
         }
         else {
-            visEdges.update(
+            visEdges.add(
                 {
-                    id:          eUuid,
-                    from:        eFrom,
-                    to:          eTo,
-                    label:       eLabel,
-                    arrows:      "to",
+                    id:          edge.uuid,
+                    from:        edge.from,
+                    to:          edge.to,
+                    label:       label,
                     length:      200,
-                    width:       eWidth,
+                    width:       edge.width,
+                    arrows:      edge.arrows,
                     font: {
                         align:       "top",
                     }
@@ -133,11 +213,20 @@ function layout_graph(element) {
             );
         }
     }
+
+    /* remove old edges */
+    for (ei = 0; ei < oldIds.length; ei++) {
+        if (newIds.indexOf(oldIds[ei]) == -1) {
+            visEdges.remove(oldIds[ei]);
+        }
+    }
 }
 
 function xmlhttp_changed()
 {
     if (xmlhttp.readyState==XMLHttpRequest.DONE && xmlhttp.status==200) {
+        console.log("Got update");
+        
         obj = JSON.parse(xmlhttp.responseText);
 
         if (obj.type != "NetworkCollection") {
@@ -155,23 +244,33 @@ function xmlhttp_changed()
                 layout_graph(element);
             }
         }
-        if (count < 3) {
-            count = count + 1;
-            window.setTimeout(send_request, 5000);
+        
+        var checkbox = document.getElementById("autoupdate");
+        if (checkbox.checked) {
+            autoupdate_timeout = window.setTimeout(send_request, 5000);
         }
     }
 }
 
-init_network();
-var xmlhttp = new XMLHttpRequest();
-xmlhttp.onreadystatechange=xmlhttp_changed
+function checkbox_clicked() {
+    var checkbox = document.getElementById("autoupdate");
+    if (checkbox.checked === false) {
+        window.clearTimeout(autoupdate_timeout);
+    }
+    else {
+        send_request();
+    }    
+}
 
-function send_request()
-{
+function send_request() {
     xmlhttp.open("GET",netjsonurl,true);
     xmlhttp.send();
 }
 
+var xmlhttp = new XMLHttpRequest();
+xmlhttp.onreadystatechange=xmlhttp_changed
+
+init_network();
 send_request();
 
 </script>