favicon changes dynamically, added new country_code variable, js now resides in bc.js, index.py only exports html, merge with previous

main.py

@@ -53,7 +53,7 @@ class bc(object):
         self.old_url = "" # the before last url from the history file
         self.destination_ip = "" #the ip adress of self.url
         self.hop_ip = "" #the ip of the servers/router on a hop
-        self.timestamp = "" #the time it took to go to a hop in miliseconds.
+        self.timestamp = "1" #the time it took to go to a hop in miliseconds.
 
         # these variables are all the result of Maxmind DB lookups
         self.longitude = "" # the lat/long that corresponds the an ip as per Maxmind DB
@@ -363,17 +363,19 @@ class bc(object):
                                 self.city = city
                                 self.country = country
                                 self.server_name = self.hop_host_name
+                                cc = record['country_code'].lower()
                             elif record.has_key('country_name'):
                                 country = record['country_name']
                                 print "Trace:", self.hop_count, "->", ip, "->", longitude + ":" + latitude, "->", country, "->", self.hop_host_name, "->", self.asn, '->', self.timestamp+'ms'
                                 self.country = country
                                 self.city = '-'
                                 self.server_name = self.hop_host_name
+                                cc = record['country_code'].lower()
                                 #self.hop_count+=1
-                            self.vardict = {'url': self.url, 'destination_ip': self.destination_ip, 'hop_count': self.hop_count,'hop_ip': self.hop_ip, 'server_name': self.server_name, 'country': self.country, 'city': self.city, 'longitude': self.longitude, 'latitude': self.latitude, 'asn' : self.asn, 'timestamp' : self.timestamp }
+                            self.vardict = {'url': self.url, 'destination_ip': self.destination_ip, 'hop_count': self.hop_count,'hop_ip': self.hop_ip, 'server_name': self.server_name, 'country': self.country, 'city': self.city, 'longitude': self.longitude, 'latitude': self.latitude, 'asn' : self.asn, 'timestamp' : self.timestamp, 'country_code': cc  }
                         except:
                             print "Trace:", self.hop_count, "->", "Not allowed"
-                            self.vardict = {'url': self.url, 'destination_ip': self.destination_ip, 'hop_count': self.hop_count,'hop_ip': self.hop_ip, 'server_name': self.server_name, 'country': '-', 'city': '-', 'longitude': '-', 'latitude': '-', 'asn' : self.asn, 'timestamp' : self.timestamp }
+                            self.vardict = {'url': self.url, 'destination_ip': self.destination_ip, 'hop_count': self.hop_count,'hop_ip': self.hop_ip, 'server_name': self.server_name, 'country': '-', 'city': '-', 'longitude': '-', 'latitude': '-', 'asn' : self.asn, 'timestamp' : self.timestamp, 'country_code': '-' }
 
                         self.hop_count+=1
                         # write xml data to file

web/index.py

@@ -6,8 +6,8 @@ GPLv3 - 2013 by psy (epsylon@riseup.net)
 """
 from xml.dom.minidom import parseString
 import xml.etree.ElementTree as ET
-
+  # extract data from a xml file
-# extract data from a xml file
+# try:
 f = open('data.xml', 'r')
 f2 = open('data.xml', 'r')
 xml = ET.parse(f)
@@ -24,6 +24,7 @@ asn_list =[]
 server_name_list = []
 timestamp_list = []
 last_hop = int(xml.findall('hop')[-1].text)
+country_code_list = []
 
 for counter in range(1, last_hop+1):
     url = xml.getroot().text
@@ -35,6 +36,7 @@ for counter in range(1, last_hop+1):
     longitude = hop_element.getElementsByTagName('longitude')[0].toxml().replace('<longitude>','').replace('</longitude>','')
     latitude = hop_element.getElementsByTagName('latitude')[0].toxml().replace('<latitude>','').replace('</latitude>','')
     timestamp = hop_element.getElementsByTagName('timestamp')[0].toxml().replace('<timestamp>','').replace('</timestamp>','')
+    country_code = hop_element.getElementsByTagName('country_code')[0].toxml().replace('<country_code>','').replace('</country_code>','')
 
     latlong = [float(latitude.encode('utf-8')), float(longitude.encode('utf-8'))]
     geoarray.append(latlong)
@@ -43,113 +45,55 @@ for counter in range(1, last_hop+1):
     hop_ip_list.append(hop_ip.encode('utf-8'))
     server_name_list.append(server_name.encode('utf-8'))
     timestamp_list.append(float(timestamp))
+    country_code_list.append(country_code.encode('utf-8'))
 
 
-f = open('kaart.html', 'w')
+#f = open('kaart.html', 'w')
+#the html
 output = """
 <html>
 <head>
   <title>Border Check - Web Visualizor</title>
-   <link rel="stylesheet" href="js/leaflet/leaflet.css" />
+  <link rel="stylesheet" href="js/leaflet/leaflet.css" />
-   <link rel="stylesheet" href="style.css" />
+  <link rel="stylesheet" href="style.css" />
-    <script src="js/leaflet/leaflet.js"></script>
+  <script src="js/leaflet/leaflet.js"></script>
-    <script src= "js/rlayer-modified.min.js"></script>
+  <script src="js/rlayer-modified.min.js"></script>
-     <script src= "js/raphael.js"></script>
+  <script src="js/raphael.js"></script>
-     <script src="js/jquery-1.10.2.min.js"></script>
+  <script src="js/jquery-1.10.2.min.js"></script>
-     <script type="text/javascript">
+  <script src="js/bc.js"></script>
+  <script src="js/favicon.js"></script>
+
+  <script type="text/javascript">
         $(document).ready (function(){
           var h = $(window).innerHeight();
           var w = $(window).innerWidth();
           $("#wrapper").css({
             "width": w, "height": h
             })
-          }) 
+          })
-
-          //$(document).ready( fullScreen())
-          //$(window).resize( fullScreen())
-
-
   </script>
-    </head>
+</head>
 <body>
-<div id="wrapper">
+  <div id="wrapper">
-    <div id="header">"""+url+"""</div>
+      <div id="header">"""+url+"""</div>
-    <div id="map" style="width: 100%; height: 100%"></div>
+      <div id="map" style="width: 100%; height: 100%"></div>
-    <div id="bar"><button id='button'><</button></div>
+      <div id="bar"><button id='button'><</button></div>
-</div>
+  </div>
-  <script type="text/javascript">
+<script type="text/javascript">
-  window.onload = function () {
+  hop_list = """+str(hop_list)+"""
-    var map = L.map('map',{
+  hop_ip_list = """+str(hop_ip_list)+"""
-        minZoom: 2,
+  counter_max = """+str(last_hop)+"""
-        maxZoom:5,
+  latlong = """+str(geoarray)+"""
-
+  asn_list = """+str(asn_list)+"""
-        }).setView(["""+latitude+""", """+longitude+"""], 3);
-
-    L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
-    attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
-    }).addTo(map);
-
-        $('#button').bind('click', function(){
-            $('#bar').animate({"width": '200'})
-            var info = $("<div id = info><p>this is where info goes</p><p>I will make a 'slide back' option later</p></div>")
-                .appendTo("#bar")
-            console.log('click')
-
-            })
-
-
-  var hop_list = """+str(hop_list)+"""
-  var hop_ip_list = """+str(hop_ip_list)+"""
-  var counter_max = """+str(last_hop)+"""
-  var latlong = """+str(geoarray)+"""
-  var asn_list = """+str(asn_list)+"""
   server_name_list = """+str(server_name_list)+"""
   timestamp_list = """+str(timestamp_list)+"""
-  //var polyline = L.polyline(latlong, {color: 'red'}).addTo(map);
+  country_code_list = """+str(country_code_list)+"""
-
+  </script>
-index = 0
-
-AddStep(latlong[index], latlong[index+1], index)
-
-function AddMarker(src, index){
-  var marker = L.marker([src[0], src[1]]).bindPopup(
-    "Hop: <b>"+hop_list[index]+"</b><br />"+server_name_list[index]+"<br />"+asn_list[index]
-    );
-  marker.addTo(map).openPopup()
-}
-
-function AddStep(src, dest, index){
-  var b = new R.BezierAnim([src, dest], {})
-  map.addLayer(b)
-  AddMarker(src, index)
-  processStep(index)
-}
-
-function processStep (index) {
-    map.panTo(latlong[index]);
-    if (index < counter_max-2) {
-      console.log('hop#', hop_list[index])
-      window.setTimeout(function () {
-      AddStep(latlong[index], latlong[index+1], index)
-     }, 500);}
-      //in the wait function we can add the ms of the actual traceroute to get the (de)acceleration of the real thing
-    else
-    if (index < counter_max-1){
-    console.log('hop#', hop_list[index])
-      window.setTimeout(function () {
-      AddStep(latlong[index], latlong[index], index)
-     }, 500);}
-
-    else
-    if (index = counter_max-1){
-      console.log('fin')
-      }
-
-    index = index + 1
-    }
-};
-</script>
 </html>
 """
-f.write(output)
+  #f.write(output)
-f.close
+  #f.close
+# except:
+#   output = """
+#   <html> loading </html>
+#   """

web/js/bc.js

@@ -0,0 +1,70 @@
+window.onload = function () {
+  var map = L.map('map',{
+      minZoom: 2,
+      maxZoom:5,
+
+      }).setView([38.0, -97.0], 3);
+
+  L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
+  attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
+  }).addTo(map);
+
+      //the slider bar
+      $('#button').bind('click', function(){
+          $('#bar').animate({"width": '200'})
+          var info = $("<div id = info><p>this is where info goes</p><p>I will make a 'slide back' option later</p></div>")
+              .appendTo("#bar")
+          console.log('click')
+
+          })
+
+  //function chain for drawing the markers and lines on the map.
+  index = 0
+  delay = (400+timestamp_list[index])
+
+  AddStep(latlong[index], latlong[index+1], index)
+
+  function AddMarker(src, index){
+  var marker = L.marker([src[0], src[1]]).bindPopup(
+    "<p>Hop no:"+hop_list[index]+"<br /><a>show metadata</a></p><p id=metadata'>Server name:<br />"+server_name_list[index]+"<br />Network owner:<br />"+asn_list[index]+"</p>"
+    );
+  marker.addTo(map).openPopup()
+  }
+
+  function AddStep(src, dest, index){
+  var b = new R.BezierAnim([src, dest], {})
+  map.addLayer(b)
+  AddMarker(src, index)
+  processStep(index)
+  //console.log(delay)
+  }
+
+  function processStep (index) {
+    map.panTo(latlong[index]);
+    if (index < counter_max-2) {
+      //console.log('hop#', hop_list[index])
+      changeFavicon('js/world/'+country_code_list[index]+'.png')
+      window.setTimeout(function () {
+      AddStep(latlong[index], latlong[index+1], index)
+     }, delay);}
+    else
+    if (index < counter_max-1){
+    //console.log('hop#', hop_list[index])
+    changeFavicon('js/world/'+country_code_list[index]+'.png')
+      window.setTimeout(function () {
+      AddStep(latlong[index], latlong[index], index)
+     }, delay);}
+
+    else
+    if (index = counter_max-1){
+      changeFavicon('js/world/'+country_code_list[index]+'.png')
+      //console.log('fin')
+      //map.fitBounds([bounds])
+      
+    }
+
+    index = index + 1
+    delay = (400 + timestamp_list[index])
+    }
+};
+

web/js/favicon.js

@@ -0,0 +1,20 @@
+/*!
+ * Dynamically changing favicons with JavaScript
+ * Works in all A-grade browsers except Safari and Internet Explorer
+ * Demo: http://mathiasbynens.be/demo/dynamic-favicons
+ */
+
+// HTML5™, baby! http://mathiasbynens.be/notes/document-head
+document.head = document.head || document.getElementsByTagName('head')[0];
+
+function changeFavicon(src) {
+ var link = document.createElement('link'),
+     oldLink = document.getElementById('dynamic-favicon');
+ link.id = 'dynamic-favicon';
+ link.rel = 'shortcut icon';
+ link.href = src;
+ if (oldLink) {
+  document.head.removeChild(oldLink);
+ }
+ document.head.appendChild(link);
+}