diff mcserver/static/app.js @ 6:9d2f4e6a3f36

color coding in client ui

--- a/mcserver/static/app.js	Sun Jun 17 00:00:01 2012 +0100
+++ b/mcserver/static/app.js	Fri Jun 22 10:14:12 2012 +0100
@@ -8,28 +8,95 @@
     this.canvas.addEventListener('mousemove', this.onMouseMove.bind(this));
     this.canvas.addEventListener('mouseup', this.onMouseUp.bind(this));
     
-    this.request("/moodconductor/moods.csv", this.loadCSV.bind(this));
+    this.request("/moods.csv", this.loadMoods.bind(this));
+    this.background();
   },
 
-  loadCSV: function(text) {
+  tl: { r: 200, g: 0, b: 0 },
+  tr: { r: 200, g: 150, b: 0 },
+  bl: { r: 0, g: 50, b: 100 },
+  br: { r: 200, g: 230, b: 80 },
+  
+  interpolateColor: function(a, b, x) {
+    return {
+      r: Math.floor(a.r + (b.r - a.r) * x),
+      g: Math.floor(a.g + (b.g - a.g) * x),
+      b: Math.floor(a.b + (b.b - a.b) * x)
+    };
+  },
+
+  background: function() {
+    var step = 20;
+    var ctx = this.canvas.getContext("2d");  
+    ctx.clearRect(0, 0, 320, 320);
+
+    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);
+      for (var x = 0; x < 320; x += step) {
+        var color = this.interpolateColor(left, right, x / 320);
+        ctx.fillStyle = "rgb(" + color.r + "," + color.g + "," + color.b + ")";
+        ctx.fillRect(x, y, step, step);
+      }
+    }
+    ctx.strokeStyle = "rgb(0,0,0)";
+    ctx.moveTo(0, 160);
+    ctx.lineTo(320, 160);
+    ctx.stroke();
+    
+    ctx.fillStyle = "rgb(0,0,0)";
+    ctx.beginPath();
+    ctx.moveTo(320, 160);
+    ctx.lineTo(310, 150);
+    ctx.lineTo(310, 170);
+    ctx.fill();
+
+    ctx.strokeStyle = "rgb(0,0,0)";
+    ctx.moveTo(160, 320);
+    ctx.lineTo(160, 0);
+    ctx.stroke();
+    
+    ctx.fillStyle = "rgb(0,0,0)";
+    ctx.beginPath();
+    ctx.moveTo(160, 0);
+    ctx.lineTo(150, 10);
+    ctx.lineTo(170, 10);
+    ctx.fill();
+
+    ctx.font = "16px Arial";
+    ctx.fillText("Valence", 200, 158);  
+    
+    ctx.save();
+    ctx.translate(158, 120);
+    ctx.rotate(Math.PI * 1.5);
+    ctx.font = "16px Arial";
+    ctx.fillText("Arousal", 0, 0);  
+    ctx.restore();
+  },
+
+  loadMoods: function(text) {
     this.moods = [];
 
     var lines = text.split("\n");
-
+    
     for (var i = 1; i < lines.length; i++) {
       var row = lines[i].split(",");
-      this.moods.push({
-        label: row[1], 
-        x: Number(row[3]), 
-        y: Number(row[5])
-      });
+      var mood = {
+        label: row[0],
+        val: Number(row[1]), 
+        aro: Number(row[2]),
+        dom: Number(row[3])
+      };
+      this.moods.push(mood);
     }
   },
-  
+ 
   request: function(url, callback) {
     var request = new XMLHttpRequest();
     request.onreadystatechange = function() {
-      callback(request.responseText);
+      if (callback) {
+        callback(request.responseText);
+      }
     }.bind(this);
     request.open("GET", url);
     request.send(null);
@@ -52,21 +119,28 @@
   },
 
   setMarker: function(pageX, pageY) {
-    this.marker.style.left = pageX + 'px';
-    this.marker.style.top = pageY + 'px';
-    
-    var x = 1 - pageX / 480;
-    var y = 1 - pageY / 960;
+    this.background();
+    this.drawMarker(pageX, pageY);
+
+    var x = pageX / 320;
+    var y = 1 - pageY / 320;
     
     var mood = this.findMood(x, y);
 
-    this.marker.innerHTML = mood.label;
-   
     if (mood != this.mood) {
+      this.label.innerHTML = mood.label;
       this.mood = mood;
-      this.request("/moodconductor/mood?x=" + x + "&y=" + y);
+      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) {
     var distance = 1;
@@ -74,8 +148,8 @@
     
     for (var i = 0; i < this.moods.length; i++) {
       var mood = this.moods[i];
-      var dx = Math.abs(mood.x - x);
-      var dy = Math.abs(mood.y - y);
+      var dx = Math.abs(mood.val - x);
+      var dy = Math.abs(mood.aro - y);
       var d = Math.sqrt(dx * dx + dy * dy);
 
       if (d < distance) {