0x2620/oxjs
2
0
Fork 1
Code Issues 172 Pull requests Releases Wiki Activity

update ipv4 map example, including bug fixes

Browse source
This commit is contained in:
rolux 2012-07-03 18:19:55 +02:00
parent f3334c13cf
commit a150457748
2 changed files with 83 additions and 57 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

131
examples/maps/ipv4_map_of_the_internet/js/example.js
View file

@ -1,3 +1,14 @@
/*
The code below implements a map widget to navigate a zoomable globe made of
tiled images — similar to Google Maps. The catch is that the map doesn't
show the surface of the Earth, but the Internet   instead of geographical
or political boundaries, it maps the country-wise allocation of the IPv4 address
space.
Inline comments, below, are minimal — but the widget has its own "About"
section that explains how it was done.
*/
'use strict'; 'use strict';
/* /*
@ -57,12 +68,13 @@ Ox.load('UI', function() {
key_m: function() { self.$toggle.trigger('click'); }, key_m: function() { self.$toggle.trigger('click'); },
key_minus: function() { zoomBy(-1); }, key_minus: function() { zoomBy(-1); },
key_right: function() { panBy([0.5, 0]); }, key_right: function() { panBy([0.5, 0]); },
key_shift_down: function() { panBy([0, 1]) }, key_shift_down: function() { panBy([0, 1]); },
key_shift_enter: function() { find(''); },
key_shift_equal: function() { zoomBy(2); }, key_shift_equal: function() { zoomBy(2); },
key_shift_left: function() { panBy([-1, 0]) }, key_shift_left: function() { panBy([-1, 0]); },
key_shift_minus: function() { zoomBy(-2); }, key_shift_minus: function() { zoomBy(-2); },
key_shift_right: function() { panBy([1, 0]) }, key_shift_right: function() { panBy([1, 0]); },
key_shift_up: function() { panBy([0, -1]) }, key_shift_up: function() { panBy([0, -1]); },
key_slash: function() { toggleOverlay('milliondollarhomepage'); }, key_slash: function() { toggleOverlay('milliondollarhomepage'); },
key_up: function() { panBy([0, -0.5]); }, key_up: function() { panBy([0, -0.5]); },
mousedown: function(e) { mousedown: function(e) {
@ -102,7 +114,8 @@ Ox.load('UI', function() {
self.mapSize = Math.pow(2, self.options.zoom) * self.tileSize; self.mapSize = Math.pow(2, self.options.zoom) * self.tileSize;
/* /*
Tiles layer. Tiles layer with a dynamic tooltip that reacts to mousewheel, drag and
click events.
*/ */
self.$tiles = Ox.Element({ self.$tiles = Ox.Element({
tooltip: function(e) { tooltip: function(e) {
@ -131,7 +144,7 @@ Ox.load('UI', function() {
.appendTo(that); .appendTo(that);
/* /*
About button. About button that opens a dialog.
*/ */
self.$about = Ox.Button({ self.$about = Ox.Button({
selectable: false, selectable: false,
@ -156,7 +169,7 @@ Ox.load('UI', function() {
.appendTo(that); .appendTo(that);
/* /*
The panel inside the about dialog. The tabbed panel inside the about dialog.
*/ */
self.$panel = Ox.TabPanel({ self.$panel = Ox.TabPanel({
content: { content: {
@ -187,6 +200,25 @@ Ox.load('UI', function() {
] ]
}); });
/*
The images in the "About" section.
*/
[
'png/xkcd.png', 'png/projection.png', 'png/flags.png', 'png/map.png'
].forEach(function(image) {
$('<a>')
.attr({href: image, target: '_blank'})
.append(
$('<img>')
.attr({src: image})
.css({width: '256px', marginBottom: '16px'})
)
.appendTo(self.$images);
});
/*
The contents of the "Mouse & Keyboard Controls" panel.
*/
Ox.forEach({ Ox.forEach({
'Mouse': { 'Mouse': {
'Click': 'Pan to position / Select marker', 'Click': 'Pan to position / Select marker',
@ -238,7 +270,7 @@ Ox.load('UI', function() {
}); });
/* /*
About dialog. The dialog itself.
*/ */
self.$dialog = Ox.Dialog({ self.$dialog = Ox.Dialog({
buttons: [ buttons: [
@ -261,21 +293,9 @@ Ox.load('UI', function() {
width: 560 + Ox.UI.SCROLLBAR_SIZE width: 560 + Ox.UI.SCROLLBAR_SIZE
}); });
[
'png/xkcd.png', 'png/projection.png', 'png/flags.png', 'png/map.png'
].forEach(function(image) {
$('<a>')
.attr({href: image, target: '_blank'})
.append(
$('<img>')
.attr({src: image})
.css({width: '256px', marginBottom: '16px'})
)
.appendTo(self.$images);
});
/* /*
Find element. Find element to search for host names or IP addresses, with a menu to
select pre-defined bookmarks.
*/ */
self.$findElement = Ox.FormElementGroup({ self.$findElement = Ox.FormElementGroup({
elements: [ elements: [
@ -318,7 +338,7 @@ Ox.load('UI', function() {
.appendTo(that); .appendTo(that);
/* /*
Zoom control. Zoom control. 0 is the lowest zoom level, 8 is the highest.
*/ */
self.$zoom = Ox.Range({ self.$zoom = Ox.Range({
arrows: true, arrows: true,
@ -339,7 +359,7 @@ Ox.load('UI', function() {
.appendTo(that); .appendTo(that);
/* /*
Overview map control. Button that toggles the overview map.
*/ */
self.$toggle = Ox.Button({ self.$toggle = Ox.Button({
title: 'Show Overview Map', title: 'Show Overview Map',
@ -353,7 +373,7 @@ Ox.load('UI', function() {
.appendTo(that); .appendTo(that);
/* /*
Overview map. The overview map itself, showing the entire internet.
*/ */
self.$world = Ox.Element({ self.$world = Ox.Element({
tooltip: function(e) { tooltip: function(e) {
@ -381,7 +401,7 @@ Ox.load('UI', function() {
.appendTo(that); .appendTo(that);
/* /*
Position marker on overview map. The position marker on overview map.
*/ */
self.$point = Ox.Element() self.$point = Ox.Element()
.addClass('marker') .addClass('marker')
@ -394,6 +414,9 @@ Ox.load('UI', function() {
.attr({id: 'regions'}) .attr({id: 'regions'})
.appendTo(self.$world); .appendTo(self.$world);
/*
The regions of the overview map, 'center' being the visible area.
*/
[ [
'center', 'left', 'right', 'top', 'bottom' 'center', 'left', 'right', 'top', 'bottom'
].forEach(function(region) { ].forEach(function(region) {
@ -415,7 +438,8 @@ Ox.load('UI', function() {
document.location.hash && onHashchange(); document.location.hash && onHashchange();
/* /*
Looks up a given host name or IP address. Looks up a given host name or IP address and then, if there is a result,
pans to its position and adds a marker.
*/ */
function find(value) { function find(value) {
var isHost, query = ''; var isHost, query = '';
@ -434,7 +458,6 @@ Ox.load('UI', function() {
self.$find.options({value: value}); self.$find.options({value: value});
getJSONP(self.options.lookupURL + query, function(data) { getJSONP(self.options.lookupURL + query, function(data) {
if (isHost && !isIP(data.ip)) { if (isHost && !isIP(data.ip)) {
//document.location.hash = '';
self.$find.addClass('OxError'); self.$find.addClass('OxError');
} else { } else {
data.host = value ? data.host : 'Me'; data.host = value ? data.host : 'Me';
@ -456,7 +479,7 @@ Ox.load('UI', function() {
} }
/* /*
Returns an IP address for a given number. Translates an given integer into an IP address.
*/ */
function getIPByN(n) { function getIPByN(n) {
return Ox.range(4).map(function(i) { return Ox.range(4).map(function(i) {
@ -471,14 +494,12 @@ Ox.load('UI', function() {
var n = 0, path = self.path, var n = 0, path = self.path,
z = zoom === void 0 ? self.options.zoom : zoom; z = zoom === void 0 ? self.options.zoom : zoom;
Ox.loop(8 + z, function(i) { Ox.loop(8 + z, function(i) {
try {
var p2 = Math.pow(2, 7 + z - i), var p2 = Math.pow(2, 7 + z - i),
p4 = Math.pow(4, 7 + z - i), p4 = Math.pow(4, 7 + z - i),
xy_ = xy.map(function(v) { xy_ = xy.map(function(v) {
return Math.floor(v / p2); return Math.floor(v / p2);
}), }),
q = self.projection[path][0].indexOf(xy_[0] + xy_[1] * 2); q = self.projection[path][0].indexOf(xy_[0] + xy_[1] * 2);
} catch(e) { Ox.print('ERROR', q, path); }
n += q * p4; n += q * p4;
xy = xy.map(function(v, i) { xy = xy.map(function(v, i) {
return v - xy_[i] * p2; return v - xy_[i] * p2;
@ -494,7 +515,7 @@ Ox.load('UI', function() {
var getJSONP = Ox.cache(Ox.getJSONP, {async: true}); var getJSONP = Ox.cache(Ox.getJSONP, {async: true});
/* /*
Returns a marker for a given mouse event. Returns the marker that recieved a given click event, or null.
*/ */
function getMarker(e) { function getMarker(e) {
var $target = $(e.target); var $target = $(e.target);
@ -504,7 +525,7 @@ Ox.load('UI', function() {
} }
/* /*
Returns a number for a given IP address. Translates a given IP adress into an integer.
*/ */
function getNByIP(ip) { function getNByIP(ip) {
return ip.split('.').reduce(function(prev, curr, i) { return ip.split('.').reduce(function(prev, curr, i) {
@ -583,14 +604,14 @@ Ox.load('UI', function() {
} }
/* /*
Handles doubleclick event. Handles doubleclick events by delegating to the mousewheel handler.
*/ */
function onDoubleclick(e) { function onDoubleclick(e) {
onMousewheel(e, 0, 0, e.shiftKey ? - 1 : 1); onMousewheel(e, 0, 0, e.shiftKey ? - 1 : 1);
} }
/* /*
Handles drag event for map and overview map. Handles drag events for both the main map and the overview map.
*/ */
function onDrag(e) { function onDrag(e) {
var delta = [e.clientDX, e.clientDY]; var delta = [e.clientDX, e.clientDY];
@ -601,7 +622,7 @@ Ox.load('UI', function() {
} }
/* /*
Handles dragstart event for map and overview map. Handles dragstart events for both the main map and the overview map.
*/ */
function onDragstart(e, isWorld) { function onDragstart(e, isWorld) {
self.dragstartXY = self.xy; self.dragstartXY = self.xy;
@ -609,7 +630,7 @@ Ox.load('UI', function() {
} }
/* /*
Handles hashchange event. Handles hashchange events.
*/ */
function onHashchange() { function onHashchange() {
var parts; var parts;
@ -624,7 +645,8 @@ Ox.load('UI', function() {
} }
/* /*
Handles mousewheel event. Handles mousewheel events (zooms in or out, but maintains the position
that the mouse is pointing at).
*/ */
function onMousewheel(e, delta, deltaX, deltaY) { function onMousewheel(e, delta, deltaX, deltaY) {
var $marker = getMarker(e), var $marker = getMarker(e),
@ -641,10 +663,13 @@ Ox.load('UI', function() {
setIP($marker.attr('id')); setIP($marker.attr('id'));
} else { } else {
setXY(self.xy.map(function(xy, i) { setXY(self.xy.map(function(xy, i) {
return deltaZ == -1 return Ox.limit(
? 2 * xy - mouseXY[i] deltaZ == -1
: (xy + mouseXY[i]) / 2 ? 2 * xy - mouseXY[i]
})); : (xy + mouseXY[i]) / 2,
0, self.mapSize - 1
);
}));
} }
zoomBy(deltaZ); zoomBy(deltaZ);
self.zooming = true; self.zooming = true;
@ -656,7 +681,7 @@ Ox.load('UI', function() {
} }
/* /*
Handles window resize event. Handles window resize events.
*/ */
function onResize() { function onResize() {
self.mapCenter = [ self.mapCenter = [
@ -680,11 +705,13 @@ Ox.load('UI', function() {
} }
/* /*
Handles singleclick event. Handles singleclick events. Clicking on a marker selects it, but holding
the Meta key toggles its selected state instead, and holding shift adds
it to the current selection. Clicking on the map and holding shift adds
a marker at that place.
*/ */
function onSingleclick(e) { function onSingleclick(e) {
var $marker = getMarker(e), var $marker = getMarker(e), ip;
ip = getIPByMouseXY(e);
if ($marker) { if ($marker) {
if (e.metaKey) { if (e.metaKey) {
$marker.toggleClass('selected'); $marker.toggleClass('selected');
@ -694,6 +721,7 @@ Ox.load('UI', function() {
} }
} else { } else {
$('.marker.selected').removeClass('selected'); $('.marker.selected').removeClass('selected');
ip = getIPByMouseXY(e);
panTo(getXYByMouseXY(e), function() { panTo(getXYByMouseXY(e), function() {
e.shiftKey && find(ip); e.shiftKey && find(ip);
}); });
@ -731,7 +759,7 @@ Ox.load('UI', function() {
} }
/* /*
Renders the map. Renders the tiles of the map.
*/ */
function renderMap() { function renderMap() {
var halfWidth, halfHeight; var halfWidth, halfHeight;
@ -766,11 +794,10 @@ Ox.load('UI', function() {
}); });
updateWorld(); updateWorld();
$('.OxTooltip').remove(); $('.OxTooltip').remove();
//document.location.hash = self.options.ip + ',' + self.options.zoom;
} }
/* /*
Renders a marker. Renders a map marker with the given properties.
*/ */
function renderMarker(data) { function renderMarker(data) {
var $icon, $marker = self.$tiles.find('div[id="' + data.ip + '"]'), var $icon, $marker = self.$tiles.find('div[id="' + data.ip + '"]'),
@ -875,7 +902,7 @@ Ox.load('UI', function() {
} }
/* /*
Sets IP and XY. Updates XY when setting the IP address.
*/ */
function setIP(ip) { function setIP(ip) {
self.options.ip = ip; self.options.ip = ip;
@ -883,7 +910,7 @@ Ox.load('UI', function() {
} }
/* /*
Sets XY and IP. Updates the IP address when setting XY.
*/ */
function setXY(xy) { function setXY(xy) {
self.xy = xy; self.xy = xy;
@ -891,7 +918,7 @@ Ox.load('UI', function() {
} }
/* /*
Toggles overlay image. Toggles the overlay image.
*/ */
function toggleOverlay(image) { function toggleOverlay(image) {
var $overlay = $('#overlay'), src = 'png/' + image + '.png'; var $overlay = $('#overlay'), src = 'png/' + image + '.png';

9
examples/maps/ipv4_map_of_the_internet/txt/ipv4map.py.txt
View file

@ -8,8 +8,6 @@ import os
import ox import ox
import pygeoip import pygeoip
# fixme: pow(a, b) -> a ** b
geoip = pygeoip.GeoIP('../dat/GeoLiteCity.dat', pygeoip.MEMORY_CACHE) geoip = pygeoip.GeoIP('../dat/GeoLiteCity.dat', pygeoip.MEMORY_CACHE)
path = '../../../../oxjs.org/source/Ox.Geo/png/flags/' path = '../../../../oxjs.org/source/Ox.Geo/png/flags/'
projection = { projection = {
@ -68,7 +66,7 @@ def render_flags():
# renders an image of 256 flags # renders an image of 256 flags
image = Image.new('RGB', (1024, 1024)) image = Image.new('RGB', (1024, 1024))
font = '../ttf/DejaVuSansMonoBold.ttf' font = '../ttf/DejaVuSansMonoBold.ttf'
countries = ox.file.read_json('../../../../oxjs.org/oxjs/source/Ox.Geo/json/Ox.Geo.json') countries = ox.file.read_json(path.replace('png/flags/', 'json/Ox.Geo.json'))
countries = filter(lambda x: len(x['code']) == 2 and not x['code'] in ['UK', 'XK'], countries) countries = filter(lambda x: len(x['code']) == 2 and not x['code'] in ['UK', 'XK'], countries)
for i, country in enumerate(sorted(countries, key=lambda x: x['code'])): for i, country in enumerate(sorted(countries, key=lambda x: x['code'])):
flag = get_flag_image(country['code'], 64) flag = get_flag_image(country['code'], 64)
@ -180,12 +178,13 @@ def render_projection():
image.save('../png/projection.png') image.save('../png/projection.png')
if __name__ == '__main__': if __name__ == '__main__':
# qlmanage -t -s 16384 -o . ../../../../oxjs.org/tools/geo/svg/icons/NTHH.svg
render_flags() render_flags()
render_projection() render_projection()
render_tiles() render_tiles()
render_tile('0.0.0.0', 0) render_tile('0.0.0.0', 0)
render_map() render_map()
# to get a sufficiently large "international" icon, run:
# qlmanage -t -s 16384 -o . ../../../../oxjs.org/tools/geo/svg/icons/NTHH.svg
# http://s3.amazonaws.com/alexa-static/top-1m.csv.zip