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

color coding in client ui

var Application = {
  init: function() {
    this.canvas = document.getElementById('canvas');
    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.request("/moods.csv", this.loadMoods.bind(this));
    this.request("/colors.txt", this.loadColors.bind(this));
  },

  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("\t");
      this.colors[row[0]] = row[2];
    }
  },
  
  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);
  },

  onMouseDown: function(event) {
    this.mouseDown = true;
    this.setMarker(event.pageX, event.pageY);
  },

  onMouseMove: function(event) {
    if (this.mouseDown) {
      this.setMarker(event.pageX, event.pageY);
    }
  },

  onMouseUp: function(event) {
    this.mouseDown = false;
    this.setMarker(event.pageX, event.pageY);
  },

  setMarker: function(pageX, pageY) {
    this.marker.style.left = pageX + 'px';
    this.marker.style.top = pageY + 'px';
    
    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 d = Math.sqrt(dx * dx + dy * dy);

      if (d < distance) {
        distance = d;
        index = i;
      }
    }

    return this.moods[index];
  }
};