# HG changeset patch
# User mgeorgi
# Date 1340356452 -3600
# Node ID 9d2f4e6a3f3678870f97c897b5ddcd278d592118
# Parent 02b4c5e122e84d5a88b7f3aa8f1e83eb4e226e28
color coding in client ui
diff -r 02b4c5e122e8 -r 9d2f4e6a3f36 mcserver/.DS_Store
Binary file mcserver/.DS_Store has changed
diff -r 02b4c5e122e8 -r 9d2f4e6a3f36 mcserver/static/app.js
--- 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) {
diff -r 02b4c5e122e8 -r 9d2f4e6a3f36 mcserver/static/app.js~
--- 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,51 @@
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);
@@ -51,30 +74,39 @@
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];
}
};
diff -r 02b4c5e122e8 -r 9d2f4e6a3f36 mcserver/static/index.html
--- a/mcserver/static/index.html Sun Jun 17 00:00:01 2012 +0100
+++ b/mcserver/static/index.html Fri Jun 22 10:14:12 2012 +0100
@@ -6,8 +6,10 @@
-