-
Notifications
You must be signed in to change notification settings - Fork 1
/
blode_map.js
139 lines (111 loc) · 4.05 KB
/
blode_map.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
var Point = Class.create({
initialize: function(x, y) {
this.x = x;
this.y = y;
},
toString: function() {
return "(" + this.x + ", " + this.y + ")";
}
});
// Blode message graphing
var BlodeMap = Class.create({
initialize: function(container_id) {
this._container = $(container_id);
this._socket = new BlodeSocket().listen('10.10.10.2', '8008');
this._geo_url = "http://ben-dev/geoip/lookup.php?jsonp=window.blode_map.log_visitor&ip=";
this._map_image = "images/world_map.jpg";
this._background = this.create_canvas(this._container, 0);
this._foreground = this.create_canvas(this._container, 1);
this.party_mode = false;
this._point_size = 2;
this._point_color = "rgba(255, 0, 0, 0.5)";
this._point_buffer = [];
this._point_buffer_size = 1000;
// prime the point buffer
this.initialize_point_buffer();
this.render_background();
this.listen();
},
initialize_point_buffer: function() {
this._point_buffer = [];
for(var i = 0; i < this._point_buffer_size; i++)
this._point_buffer[i] = new Point(0, 0);
},
listen: function() {
this._socket.observe('blode:message', function(data) {
var message = data.memo.message();
if(message.include('app.run')) {
var ip = message.evalJSON().remote_addr;
new Ajax.JSONRequest(this._geo_url + ip, {
});
}
}.bind(this));
},
create_canvas: function(container, layer) {
var canvas = new Element('canvas'),
layer = layer || 0;
// each canvas (layer) is the exact same size as its parent container
canvas.style.position = "absolute";
canvas.clonePosition(container);
canvas.width = container.getWidth();
canvas.height = container.getWidth() / 2;
canvas.style.zIndex = layer;
container.insert(canvas);
return canvas;
},
render_background: function() {
// The background layer consists of each bar's background color
var context = this._background.getContext('2d');
// clear layer
context.clearRect(0, 0, this._background.width, this._background.height);
var context = this._background.getContext('2d');
var img = new Image();
img.src = this._map_image;
img.onload = function() {
context.drawImage(img, 0, 0, img.width, img.height, 0, 0, context.canvas.width, context.canvas.height);
}.bind(this);
},
render_foreground: function() {
var context = this._foreground.getContext('2d');
// clear layer
context.clearRect(0, 0, this._foreground.width, this._foreground.height);
for(i = 0, j = this._point_buffer_size; i < j; i++) {
if(this._point_buffer[i].x != 0 && this._point_buffer[i].y != 0) {
// set layer color
if(this.party_mode)
context.fillStyle = this.select_random_color();
else
context.fillStyle = this._point_color;
var point_size = (i == 0) ? this._point_size * 2 : this._point_size;
context.beginPath();
context.arc(this._point_buffer[i].x - (point_size / 2),
this._point_buffer[i].y - (point_size / 2),
point_size,
0, Math.PI * 2, true);
context.closePath();
context.fill();
}
}
},
log_visitor: function(geo_data) {
var context = this._foreground.getContext('2d');
var minX = -180,
minY = -90,
maxX = 180,
maxY = 90;
var lon = geo_data.longitude,
lat = geo_data.latitude;
if(lon == 0 || lat == 0)
return;
var x = (this._foreground.width * (lon - minX)) / (maxX - minX),
y = this._foreground.height - ((this._foreground.height * (lat - minY)) / (maxY - minY));
// insert the new piont into the buffer
this._point_buffer.unshift(new Point(x, y));
// remove the last item from the buffer
this._point_buffer = this._point_buffer.slice(0, -1);
this.render_foreground();
},
select_random_color: function(index) {
return("rgba(" + Math.floor(Math.random() * 255) + ", " + Math.floor(Math.random() * 255) + ", " + Math.floor(Math.random() * 255) + ", 0.5)");
}
});