Mercurial > hg > mood-conductor

changeset 10:63cc59d5b665

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
send on mouse release
author mgeorgi
date Fri, 22 Jun 2012 11:01:34 +0100
parents 180274c3b48a
children 2c3fe4b24640
files nodejs-server/app.js nodejs-server/index.html nodejs-server/index.html~ nodejs-server/server.js
diffstat 4 files changed, 32 insertions(+), 37 deletions(-) [+]
line wrap: on
line diff
--- a/nodejs-server/app.js	Fri Jun 22 10:36:35 2012 +0100
+++ b/nodejs-server/app.js	Fri Jun 22 11:01:34 2012 +0100
@@ -4,12 +4,10 @@
     this.marker = document.getElementById('marker');
     this.label = document.getElementById('label');
 
-    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.canvas.addEventListener('click', this.onMouseUp.bind(this));
     
     this.request("/moods.csv", this.loadMoods.bind(this));
-    this.background();
+    this.draw();
   },
 
   tl: { r: 200, g: 0, b: 0 },
@@ -25,7 +23,7 @@
     };
   },
 
-  background: function() {
+  draw: function() {
     var step = 20;
     var ctx = this.canvas.getContext("2d");  
     ctx.clearRect(0, 0, 320, 320);
@@ -39,6 +37,8 @@
         ctx.fillRect(x, y, step, step);
       }
     }
+
+    ctx.beginPath();
     ctx.strokeStyle = "rgb(0,0,0)";
     ctx.moveTo(0, 160);
     ctx.lineTo(320, 160);
@@ -72,6 +72,13 @@
     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) {
@@ -102,49 +109,34 @@
     request.send(null);
   },
 
-  onMouseDown: function(event) {
-    this.mouseDown = true;
-    this.setMarker(event.pageX, event.pageY);
+  onMouseUp: function(event) {
+    event.preventDefault();
+    this.setMarker(event);
+    this.sendPosition(event);
+    this.draw();
   },
 
-  onMouseMove: function(event) {
-    if (this.mouseDown) {
-      this.setMarker(event.pageX, event.pageY);
-    }
-  },
+  sendPosition: function(event) {
+    var x = event.pageX / 320;
+    var y = 1 - event.pageY / 320;
 
-  onMouseUp: function(event) {
-    this.mouseDown = false;
-    this.setMarker(event.pageX, event.pageY);
-    this.sendPosition(event.pageX, event.pageY);
-  },
-
-  sendPosition: function(pageX, pageY) {
-    var x = pageX / 320;
-    var y = 1 - pageY / 320;
     this.request("/mood?x=" + x + "&y=" + y);
   },
 
-  setMarker: function(pageX, pageY) {
-    this.background();
-    this.drawMarker(pageX, pageY);
+  setMarker: function(event) {
+    this.marker = {
+      x: event.pageX,
+      y: event.pageY
+    };
 
-    var x = pageX / 320;
-    var y = 1 - pageY / 320;
+    var x = event.pageX / 320;
+    var y = 1 - event.pageY / 320;
     
     var mood = this.findMood(x, y);
 
     this.label.innerHTML = mood.label;
     this.mood = mood;
   },
-  
-  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) {
     var distance = 1;
--- a/nodejs-server/index.html	Fri Jun 22 10:36:35 2012 +0100
+++ b/nodejs-server/index.html	Fri Jun 22 11:01:34 2012 +0100
@@ -4,6 +4,7 @@
   <head>
     <title>Mood Conductor</title>
     <script src="app.js"></script>
+    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
   </head>
   <body onload="Application.init()" style="margin:0px;padding:0px">
     <canvas width="320" height="320" id="canvas">
--- a/nodejs-server/index.html~	Fri Jun 22 10:36:35 2012 +0100
+++ b/nodejs-server/index.html~	Fri Jun 22 11:01:34 2012 +0100
@@ -6,8 +6,10 @@
     <script src="app.js"></script>
   </head>
   <body onload="Application.init()" style="margin:0px;padding:0px">
-    <div style="background:#eee; position:absolute; width: 320px; height: 320px" id="canvas">
+    <canvas width="320" height="320" id="canvas">
       <span id="marker" style="position:relative; background:#ccc;"></span>
+    </canvas>
+    <div style="font-size:40px;font-weight:bold" id="label">
     </div>
   </body>
 </html>
--- a/nodejs-server/server.js	Fri Jun 22 10:36:35 2012 +0100
+++ b/nodejs-server/server.js	Fri Jun 22 11:01:34 2012 +0100
@@ -25,4 +25,4 @@
     res.end(fs.readFileSync("index.html"));
     res.writeHead(404, {'Content-Type': 'text/plain'});
   }
-}).listen(3000, "127.0.0.1");
+}).listen(3000, "0.0.0.0");