comparison mcserver/static/app.js~ @ 6:9d2f4e6a3f36

color coding in client ui

 
     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("/moods.csv", this.loadCSV.bind(this));
+    this.request("/moods.csv", this.loadMoods.bind(this));
+    this.request("/colors.txt", this.loadColors.bind(this));
   },
 
-  loadCSV: function(text) {
+  loadMoods: function(text) {
     this.moods = [];
+
+    var lines = text.split("\n");
+    
+    for (var i = 1; i < lines.length; i++) {
+      var row = lines[i].split(",");
+      var mood = {
+        label: row[1], 
+        x: Number(row[3]), 
+        y: Number(row[5])
+      };
+
+      // var div = document.createElement('div');
+      // this.canvas.appendChild(div);
+      // div.style.position = 'absolute';
+      // div.style.left = mood.x * 320 + 'px';
+      // div.style.top = mood.y * 320 + 'px';
+      // div.innerHTML = mood.label;
+      
+      this.moods.push(mood);
+    }
+  },
+
+  loadColors: function(text) {
+    this.colors = {};
 
     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 row = lines[i].split("\t");
+      this.colors[row[0]] = row[2];
     }
   },
   
   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);
   },
 

   onMouseUp: function(event) {
     this.mouseDown = false;
     this.setMarker(event.pageX, event.pageY);
   },
 
-  setMarker: function(x, y) {
-    this.marker.style.left = x + 'px';
-    this.marker.style.top = y + 'px';
+  setMarker: function(pageX, pageY) {
+    this.marker.style.left = pageX + 'px';
+    this.marker.style.top = pageY + 'px';
     
-    var _x = x / 480;
-    var _y = y / 960;
-    var match = {
-      dx: 1,
-      dy: 1,
-      index: null
-    };
+    var x = pageX / 320;
+    var y = 1 - pageY / 320;
+    
+    var mood = this.findMood(x, y);
+
+    if (mood != this.mood) {
+      this.marker.innerHTML = mood.label;
+      this.mood = mood;
+      this.canvas.style.backgroundColor = '#' + this.colors[mood.label];
+      this.request("/mood?x=" + x + "&y=" + y);
+    }
+  },
+
+  findMood: function(x, y) {
+    var distance = 1;
+    var index = null;
     
     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.x - x);
+      var dy = Math.abs(mood.y - y);
+      var d = Math.sqrt(dx * dx + dy * dy);
 
-      if (dx < match.dx && dy < match.dy) {
-        match.dx = dx;
-        match.dy = dy;
-        match.index = i;
+      if (d < distance) {
+        distance = d;
+        index = i;
       }
     }
 
-    this.label.innerHTML = this.moods[match.index].label;
+    return this.moods[index];
   }
 };