gyorgyf@0
|
1 var Application = {
|
gyorgyf@0
|
2 init: function() {
|
gyorgyf@0
|
3 this.canvas = document.getElementById('canvas');
|
gyorgyf@0
|
4 this.marker = document.getElementById('marker');
|
gyorgyf@0
|
5 this.label = document.getElementById('label');
|
gyorgyf@0
|
6
|
gyorgyf@0
|
7 this.canvas.addEventListener('mousedown', this.onMouseDown.bind(this));
|
gyorgyf@0
|
8 this.canvas.addEventListener('mousemove', this.onMouseMove.bind(this));
|
gyorgyf@0
|
9 this.canvas.addEventListener('mouseup', this.onMouseUp.bind(this));
|
gyorgyf@0
|
10
|
gyorgyf@0
|
11 this.request("/moods.csv", this.loadCSV.bind(this));
|
gyorgyf@0
|
12 },
|
gyorgyf@0
|
13
|
gyorgyf@0
|
14 loadCSV: function(text) {
|
gyorgyf@0
|
15 this.moods = [];
|
gyorgyf@0
|
16
|
gyorgyf@0
|
17 var lines = text.split("\n");
|
gyorgyf@0
|
18
|
gyorgyf@0
|
19 for (var i = 1; i < lines.length; i++) {
|
gyorgyf@0
|
20 var row = lines[i].split(",");
|
gyorgyf@0
|
21 this.moods.push({
|
gyorgyf@0
|
22 label: row[1],
|
gyorgyf@0
|
23 x: Number(row[3]),
|
gyorgyf@0
|
24 y: Number(row[5])
|
gyorgyf@0
|
25 });
|
gyorgyf@0
|
26 }
|
gyorgyf@0
|
27 },
|
gyorgyf@0
|
28
|
gyorgyf@0
|
29 request: function(url, callback) {
|
gyorgyf@0
|
30 var request = new XMLHttpRequest();
|
gyorgyf@0
|
31 request.onreadystatechange = function() {
|
gyorgyf@0
|
32 callback(request.responseText);
|
gyorgyf@0
|
33 }.bind(this);
|
gyorgyf@0
|
34 request.open("GET", url);
|
gyorgyf@0
|
35 request.send(null);
|
gyorgyf@0
|
36 },
|
gyorgyf@0
|
37
|
gyorgyf@0
|
38 onMouseDown: function(event) {
|
gyorgyf@0
|
39 this.mouseDown = true;
|
gyorgyf@0
|
40 this.setMarker(event.pageX, event.pageY);
|
gyorgyf@0
|
41 },
|
gyorgyf@0
|
42
|
gyorgyf@0
|
43 onMouseMove: function(event) {
|
gyorgyf@0
|
44 if (this.mouseDown) {
|
gyorgyf@0
|
45 this.setMarker(event.pageX, event.pageY);
|
gyorgyf@0
|
46 }
|
gyorgyf@0
|
47 },
|
gyorgyf@0
|
48
|
gyorgyf@0
|
49 onMouseUp: function(event) {
|
gyorgyf@0
|
50 this.mouseDown = false;
|
gyorgyf@0
|
51 this.setMarker(event.pageX, event.pageY);
|
gyorgyf@0
|
52 },
|
gyorgyf@0
|
53
|
gyorgyf@0
|
54 setMarker: function(pageX, pageY) {
|
gyorgyf@0
|
55 this.marker.style.left = pageX + 'px';
|
gyorgyf@0
|
56 this.marker.style.top = pageY + 'px';
|
gyorgyf@0
|
57
|
gyorgyf@0
|
58 var x = 1 - pageX / 480;
|
gyorgyf@0
|
59 var y = 1 - pageY / 960;
|
gyorgyf@0
|
60
|
gyorgyf@0
|
61 var mood = this.findMood(x, y);
|
gyorgyf@0
|
62
|
gyorgyf@0
|
63 this.marker.innerHTML = mood.label;
|
gyorgyf@0
|
64
|
gyorgyf@0
|
65 if (mood != this.mood) {
|
gyorgyf@0
|
66 this.mood = mood;
|
gyorgyf@0
|
67 this.request("/mood?x=" + x + "&y=" + y);
|
gyorgyf@0
|
68 }
|
gyorgyf@0
|
69 },
|
gyorgyf@0
|
70
|
gyorgyf@0
|
71 findMood: function(x, y) {
|
gyorgyf@0
|
72 var distance = 1;
|
gyorgyf@0
|
73 var index = null;
|
gyorgyf@0
|
74
|
gyorgyf@0
|
75 for (var i = 0; i < this.moods.length; i++) {
|
gyorgyf@0
|
76 var mood = this.moods[i];
|
gyorgyf@0
|
77 var dx = Math.abs(mood.x - x);
|
gyorgyf@0
|
78 var dy = Math.abs(mood.y - y);
|
gyorgyf@0
|
79 var d = Math.sqrt(dx * dx + dy * dy);
|
gyorgyf@0
|
80
|
gyorgyf@0
|
81 if (d < distance) {
|
gyorgyf@0
|
82 distance = d;
|
gyorgyf@0
|
83 index = i;
|
gyorgyf@0
|
84 }
|
gyorgyf@0
|
85 }
|
gyorgyf@0
|
86
|
gyorgyf@0
|
87 return this.moods[index];
|
gyorgyf@0
|
88 }
|
gyorgyf@0
|
89 };
|