changeset 23:9d57fcc848c0

iphone fix

--- a/mcserver/static/app.js	Fri Jun 22 15:39:55 2012 +0100
+++ b/mcserver/static/app.js	Fri Jun 22 17:47:09 2012 +0100
@@ -19,11 +19,21 @@
   ],
  
   init: function() {
+    this.is_touch_device = 'ontouchstart' in document.documentElement;
     this.canvas = document.getElementById('canvas');
     this.label = document.getElementById('label');
     this.draw();
 
-    this.canvas.addEventListener('click', this.onMouseUp.bind(this));
+    if (this.is_touch_device) {
+      this.canvas.addEventListener('touchstart', function(event) {
+        Application.onMouseUp(event.targetTouches[0]);
+      });
+    }
+    else {
+      this.canvas.addEventListener('click', function(event) {
+        Application.onMouseUp(event);
+      });
+    }
   },
 
   tl: { r: 200, g: 0, b: 0 },
@@ -44,6 +54,8 @@
     var ctx = this.canvas.getContext("2d");  
     ctx.clearRect(0, 0, 320, 320);
 
+    var list = [];
+
     for (var y = 0; y < 320; y += step) {
       var left = this.interpolateColor(this.tl, this.bl, y / 320);
       var right = this.interpolateColor(this.tr, this.br, y / 320);
@@ -99,17 +111,11 @@
  
   request: function(url, callback) {
     var request = new XMLHttpRequest();
-    request.onreadystatechange = function() {
-      if (callback) {
-        callback(request.responseText);
-      }
-    }.bind(this);
     request.open("GET", url);
     request.send(null);
   },
 
   onMouseUp: function(event) {
-    event.preventDefault();
     this.setMarker(event);
     this.sendPosition(event);
     this.draw();

--- a/mcserver/static/app.js~	Fri Jun 22 15:39:55 2012 +0100
+++ b/mcserver/static/app.js~	Fri Jun 22 17:47:09 2012 +0100
@@ -4,14 +4,12 @@
     this.marker = document.getElementById('marker');
     this.label = document.getElementById('label');
 
-    this.canvas.addEventListener('click', this.onMouseUp.bind(this));
+    this.canvas.addEventListener('mousedown', this.onMouseDown.bind(this));
+    this.canvas.addEventListener('mousemove', this.onMouseMove.bind(this));
+    this.canvas.addEventListener('mouseup', this.onMouseUp.bind(this));
     
-    this.request("/moodconductor/moods.csv", this.loadMoods.bind(this));
-<<<<<<< local
+    this.request("/moods.csv", this.loadMoods.bind(this));
     this.background();
-=======
-    this.draw();
->>>>>>> other
   },
 
   tl: { r: 200, g: 0, b: 0 },
@@ -27,7 +25,7 @@
     };
   },
 
-  draw: function() {
+  background: function() {
     var step = 20;
     var ctx = this.canvas.getContext("2d");  
     ctx.clearRect(0, 0, 320, 320);
@@ -41,8 +39,6 @@
         ctx.fillRect(x, y, step, step);
       }
     }
-
-    ctx.beginPath();
     ctx.strokeStyle = "rgb(0,0,0)";
     ctx.moveTo(0, 160);
     ctx.lineTo(320, 160);
@@ -76,13 +72,6 @@
     ctx.font = "16px Arial";
     ctx.fillText("Arousal", 0, 0);  
     ctx.restore();
- 
-    if (this.marker) {
-      ctx.fillStyle = "rgba(0, 0, 0, 0.5)";
-      ctx.beginPath();
-      ctx.arc(this.marker.x, this.marker.y, 20, 0, Math.PI*2, true); 
-      ctx.fill();
-    }
   },
 
   loadMoods: function(text) {
@@ -113,31 +102,20 @@
     request.send(null);
   },
 
-  onMouseUp: function(event) {
-    event.preventDefault();
-    this.setMarker(event);
-    this.sendPosition(event);
-    this.draw();
+  onMouseDown: function(event) {
+    this.mouseDown = true;
+    this.setMarker(event.pageX, event.pageY);
   },
 
-  sendPosition: function(event) {
-    var x = event.pageX / 320;
-    var y = 1 - event.pageY / 320;
-
-    this.request("/moodconductor/mood?x=" + x + "&y=" + y);
+  onMouseMove: function(event) {
+    if (this.mouseDown) {
+      this.setMarker(event.pageX, event.pageY);
+    }
   },
 
-  setMarker: function(event) {
-    this.marker = {
-      x: event.pageX,
-      y: event.pageY
-    };
-
-<<<<<<< local
-  sendPosition: function(pageX, pageY) {
-    var x = pageX / 320;
-    var y = 1 - pageY / 320;
-    this.request("/moodconductor/mood?x=" + x + "&y=" + y);
+  onMouseUp: function(event) {
+    this.mouseDown = false;
+    this.setMarker(event.pageX, event.pageY);
   },
 
   setMarker: function(pageX, pageY) {
@@ -146,15 +124,22 @@
 
     var x = pageX / 320;
     var y = 1 - pageY / 320;
-=======
-    var x = event.pageX / 320;
-    var y = 1 - event.pageY / 320;
->>>>>>> other
     
     var mood = this.findMood(x, y);
 
-    this.label.innerHTML = mood.label;
-    this.mood = mood;
+    if (mood != this.mood) {
+      this.label.innerHTML = mood.label;
+      this.mood = mood;
+      this.request("/mood?x=" + x + "&y=" + y);
+    }
+  },
+  
+  drawMarker: function(x, y) {
+    var ctx = this.canvas.getContext("2d");  
+    ctx.fillStyle = "rgba(0, 0, 0, 0.5)";
+    ctx.beginPath();
+    ctx.arc(x, y, 20, 0, Math.PI*2, true); 
+    ctx.fill();
   },
 
   findMood: function(x, y) {
@@ -175,4 +160,4 @@
 
     return this.moods[index];
   }
-};
\ No newline at end of file
+};