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.background();
  },

  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(",");
      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() {
      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.background();
    this.drawMarker(pageX, pageY);

    var x = pageX / 320;
    var y = 1 - pageY / 320;
    
    var mood = this.findMood(x, y);

    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) {
    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.val - x);
      var dy = Math.abs(mood.aro - y);
      var d = Math.sqrt(dx * dx + dy * dy);

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

    return this.moods[index];
  }
};