Browse Source

added js effects to markers, fixed check_output on debug mode, more advances

pull/3/head
psy 11 years ago
parent
commit
59368c7ce1
  1. 10
      main.py
  2. 112
      web/index.py
  3. 6
      web/js/jquery-1.10.2.min.js
  4. 228
      web/js/opendatacity.js
  5. 8111
      web/js/raphael.js
  6. 81
      web/js/rlayer-mod.min.js

10
main.py

@ -186,15 +186,17 @@ class bc(object):
if self.browser == "F" or self.browser == "C" or self.browser == "CHROMIUM":
self.browser_version = subprocess.check_output([self.browser_path, '--version']).strip('\n')
elif sys.platform.startswith('linux') and self.browser == "F":
self.browser_version = subprocess.check_output(['firefox', '--version']).strip('\n')
try:
self.browser_version = subprocess.check_output(['firefox', '--version']).strip('\n')
except:
a = subprocess.Popen(['firefox', '--version'], stdout=subprocess.PIPE)
self.browser_version = a.stdout.read()
if self.browser == "S":
print "Can't get Safari version information, you'll have to look it up manually \n"
else:
print "Version:", self.browser_version, "\n"
print "History:", self.browser_history_path, "\n"
def getURL(self):
"""
Set urls to visit
@ -316,7 +318,7 @@ class bc(object):
self.geoip = pygeoip.GeoIP('GeoLiteCity.dat')
self.geoasn = pygeoip.GeoIP('GeoIPASNum.dat')
print '='*45 + "\n", "Current target:\n" + '='*45 + "\n"
print '='*45 + "\n", "Status target:\n" + '='*45 + "\n"
print "URL:", self.url[0], "\n"
url = urlparse(self.getURL()).netloc #changed this for prototyping

112
web/index.py

@ -16,50 +16,110 @@ dom = parseString(data.encode('utf-8'))
f.close()
f2.close()
n_hops = dom.getElementsByTagName('hop')[-1].toxml().replace('<hop>', '').replace('</hop','')
hoplist = []
hop_list = []
hop_ip_list =[]
geoarray = []
latlong= []
asn_list =[]
server_name_list = []
last_hop = int(xml.findall('hop')[-1].text)
b = ''
for counter in range(1, int(xml.findall('hop')[-1].text)+1):
hop = parseString(dom.getElementsByTagName('hop')[counter].toxml().encode('utf-8'))
server_name = hop.getElementsByTagName('server_name')[0].toxml().replace('<server_name>','').replace('</server_name>','')
asn = hop.getElementsByTagName('asn')[0].toxml().replace('<asn>','').replace('</asn>','')
hop_ip = hop.getElementsByTagName('hop_ip')[0].toxml().replace('<hop_ip>','').replace('</hop_ip>','')
longitude = hop.getElementsByTagName('longitude')[0].toxml().replace('<longitude>','').replace('</longitude>','')
latitude = hop.getElementsByTagName('latitude')[0].toxml().replace('<latitude>','').replace('</latitude>','')
point = """ L.marker(["""+latitude+""", """+longitude+"""]).addTo(map)
.bindPopup("<b>"""+server_name+"""</b><br />"""+hop_ip+"""<br />"""+asn+"""<br />").openPopup(); """
for counter in range(1, last_hop+1):
hop_element = parseString(dom.getElementsByTagName('hop')[counter].toxml().encode('utf-8'))
hop = xml.findall('hop')[counter].text
server_name = hop_element.getElementsByTagName('server_name')[0].toxml().replace('<server_name>','').replace('</server_name>','')
asn = hop_element.getElementsByTagName('asn')[0].toxml().replace('<asn>','').replace('</asn>','')
hop_ip = hop_element.getElementsByTagName('hop_ip')[0].toxml().replace('<hop_ip>','').replace('</hop_ip>','')
longitude = hop_element.getElementsByTagName('longitude')[0].toxml().replace('<longitude>','').replace('</longitude>','')
latitude = hop_element.getElementsByTagName('latitude')[0].toxml().replace('<latitude>','').replace('</latitude>','')
latlong = [float(latitude.encode('utf-8')), float(longitude.encode('utf-8'))]
geoarray.append(latlong)
asn_list.append(asn.encode('utf-8'))
hop_list.append(str(hop))
hop_ip_list.append(hop_ip.encode('utf-8'))
server_name_list.append(server_name.encode('utf-8'))
hoplist.append(point)
b = b+point
#f = open('testmap.html', 'w')
output = """
<html>
<head>
<title>Border Check - Web Visualizator</title>
<title>Border Check - Web Visualizor</title>
<link rel="stylesheet" href="js/leaflet/leaflet.css" />
<link rel="stylesheet" href="style.css" />
<script src="js/leaflet/leaflet.js"></script>
<!--<script src="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.js"></script>-->
<script type="text/javascript">
<script src= "js/rlayer-mod.min.js"></script>
<script src= "js/raphael.js"></script>
<script src="js/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
$(function fullScreen(){
var h = $(window).height();
var w = $(window).width();
$("#map").css({
"width": w, "height": h
})
})
$(document).ready( fullScreen())
$(window).resize( fullScreen())
</script>
</script
</head>
<body>
<center>
<td><center><div id="map" style="width: 100px; height: 100px"></div></center></td>
<script type="text/javascript">
window.onload = function () {
var map = L.map('map').setView(["""+latitude+""", """+longitude+"""], 2);
var map = L.map('map').setView(["""+latitude+""", """+longitude+"""], 4);
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
"""+b+"""
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 polyline = L.polyline(latlong, {color: 'red'}).addTo(map);
var asn_list = """+str(asn_list)+"""
server_name_list = """+str(server_name_list)+"""
//var polyline = L.polyline(latlong, {color: 'red'}).addTo(map);
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);}
index = index + 1
}
};
</script>
</head>
@ -69,3 +129,5 @@ output = """
</body>
</html>
"""
f.write(output)
f.close

6
web/js/jquery-1.10.2.min.js

File diff suppressed because one or more lines are too long

228
web/js/opendatacity.js

@ -0,0 +1,228 @@
var DEFAULT_POINT = new L.LatLng(52.50085, 13.42232);
var map;
var rapath;
var info;
function RaPath() {
this.layers = [];
this.timeout = null;
}
RaPath.prototype = {
addPathPart: function (hop_src, hop_dest, cb) {
var b = new R.BezierAnim([hop_src.p, hop_dest.p], {}, function () {
if (cb)
cb();
});
this.layers.push(b);
map.addLayer(b);
},
addPulse: function (hop) {
var pulse = new R.Pulse(
hop.p,
3,
{'stroke': '#2478ad', 'fill': '#30a3ec'},
{'stroke': '#30a3ec', 'stroke-width': 2});
pulse.tooltip = this.getHopsText(hop);
// var caller = this;
pulse.click = function (e) {
//alert(caller.getHopsText(hop));
// var popup = L.popup()
// .setLatLng(hop.p)
// .setContent(caller.getHopsText(hop))
// .openOn(map);
};
this.layers.push(pulse);
map.addLayer(pulse);
return pulse;
},
getHopsText: function (hop) {
return hop.ip + ' - ' + (hop.geo.city ? hop.geo.city + ', ' : '') + hop.geo.country;
},
clear: function () {
if (this.timeout)
window.clearTimeout(this.timeout);
this.timeout = null;
this.setButton(false);
if (this.layers.length > 0)
this.layers.forEach(function (l) {
map.removeLayer(l);
});
info.clear();
},
setButton: function (active) {
if (this.geotrace)
if (active)
$('#btn_' + this.geotrace.id).addClass('btn_active', active);
else
$('#btn_' + this.geotrace.id).removeClass('btn_active', active);
},
start: function (geotrace) {
$('.leaflet-top').fadeIn();
this.clear();
this.geotrace = geotrace;
this.layers = [];
info.append(texts.requestline + ' ' + geotrace.name);
this.setButton(true);
this.processStep(0);
},
processStep: function (index) {
var hop = this.geotrace.hops[index];
info.append(this.getHopsText(hop));
this.addPulse(hop);
map.panTo(hop.p);
var caller = this;
this.timeout = window.setTimeout(function () {
caller.stepPath(index + 1);
}, 200);
},
displayEnd: function () {
//this.setButton(false); just let it active
//$('.leaflet-control-zoom').show();
var result = [];
for (key in this.geotrace.agencies) {
result.push(this.geotrace.agencies[key].name + ' (' + this.geotrace.agencies[key].cc + ')');
}
info.append('<div id="agencies">' + texts.resultline + '</div>');
info.append('<div id="agencies">' + result.join(' - ') + '</div>');
map.fitBounds(this.geotrace.bounds);
},
stepPath: function (index) {
var caller = this;
if (index >= this.geotrace.hops.length) {
this.timeout = window.setTimeout(function () {
caller.displayEnd();
}, 3000);
return;
}
this.addPathPart(this.geotrace.hops[index - 1], this.geotrace.hops[index], function () {
caller.processStep(index);
});
}
};
function getUrlVars() { // Read a page's GET URL variables and return them as an associative array.
var vars = {},
hash;
var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
for (var i = 0; i < hashes.length; i++) {
hash = hashes[i].split('=');
vars[hash[0]] = hash[1];
}
return vars;
}
function init() {
try {
var query = getUrlVars();
if (query.src) {
if (query.src == 'ch')
selectSrc('ch');
else
if (query.src == 'fr')
selectSrc('fr');
}
if ((query.colors) && (query.colors == "nzz")) {
$('body').attr('colors', "nzz");
}
}
catch (e) {
//nop;
}
map = new L.Map("map", { center: DEFAULT_POINT, zoom: 3});
map.addLayer(
new L.TileLayer("http://trace.opendatacloud.de/{z}/{x}/{y}.png ",
{attribution: 'OpenDataCity, CC-BY',
minZoom: 2,
maxZoom: 5}
)
);
rapath = new RaPath();
var legend = L.control({position: 'bottomleft'});
legend.onAdd = function (map) {
var div = L.DomUtil.create('div', 'legend');
$(div).html('<div class="legend border"><span id="cable">&nbsp</span> ' + texts.cable + '</div>');
return div;
};
legend.addTo(map);
info = L.control({position: 'topleft'});
info.onAdd = function (map) {
var div = L.DomUtil.create('div', 'hops');
this._div = $(div);
this._div.attr('id', 'hops');
this._div.empty();
if (isFrame) {
this.append('<span class="upper">' + texts.tagline + '</span>');
this.append(texts.subline);
this.append(texts.helpline);
}
return div;
};
info.setText = function (txt) {
this._div.text(txt);
};
info.setHTML = function (h) {
this._div.html(h);
};
info.append = function (txt) {
if (this._div.children().length > 30)
this._div.children().first().remove();
this._div.append('<p>' + txt + '</p>');
this._div.scrollTop(this._div.prop("scrollHeight"));
};
info.clear = function () {
this._div.empty();
};
info.addTo(map);
//var lines = [texts.helpline];
//new Typing().beginTyping(lines, $('#hops'));
}
function showRoute(id) {
if (routedata[id]) {
var route_agencies = {};
var routes = routedata[id].routes;
if (routes && routes.length) {
var route = routes[(parseInt((Math.random() * 1000), 10) % routes.length)];
var geotrace = {};
geotrace.hops = [];
for (var i = 0; i < route.trace.length; i++) {
var ip = route.trace[i];
var geo = geoinfo[ip];
var hop = {
p: new L.LatLng(geo.lat, geo.lng),
ip: ip,
geo: geo
};
var agency = agencies[geo.cc];
if (agency)
route_agencies[agency.name] = agency;
geotrace.hops.push(hop);
}
var southWest = new L.LatLng(route.south, route.west),
northEast = new L.LatLng(route.north, route.east);
geotrace.bounds = new L.LatLngBounds(southWest, northEast);
geotrace.agencies = route_agencies;
geotrace.id = id;
geotrace.name = routedata[id].name;
rapath.start(geotrace);
}
}
}
function selectSrc(cc) {
$('body').attr('requests', cc);
}
$(document).ready(function () {
init();
});

8111
web/js/raphael.js

File diff suppressed because it is too large

81
web/js/rlayer-mod.min.js

File diff suppressed because one or more lines are too long
Loading…
Cancel
Save