# HG changeset patch
# User rougeronj
# Date 1421938147 -3600
# Node ID 3b11017a76a4ca93e7865f20f5b6f0bfab4e1967
# Parent  df6b39f962bc413f7d3ca5dd56df68c8b085953a# Parent  e6605fecb175a2d880aa3448085f48bfcaffd29b
Merge with e6605fecb175a2d880aa3448085f48bfcaffd29b + minor update about color pic in annostroll

diff -r e6605fecb175 -r 3b11017a76a4 client/annotviz/app/annotsvizview.html
--- a/client/annotviz/app/annotsvizview.html	Thu Jan 22 12:12:33 2015 +0100
+++ b/client/annotviz/app/annotsvizview.html	Thu Jan 22 15:49:07 2015 +0100
@@ -23,46 +23,13 @@
     <script>
 
         var PIXI = require('pixi');
-        var annotCategories = [];
-
-        function getAnnotCategories(ecode, serverUrl) {
-
-            var url = serverUrl+"/p/api/v1/event/" + ecode;
-
-            var jsonLoader = new PIXI.JsonLoader(url, true);
-            jsonLoader.on('loaded', function(res) {
-                var data = res.target.json;
-
-                while(annotCategories.length > 0) {
-                    annotCategories.pop();
-                }
-
-                data.sessions.forEach(function(session) {
-                    var annotCat = {
-                        ts: session.start_ts === null ? new Date(0) : Date.parse(session.start_ts),
-                        colors: {}
-                    }
-                    var categoriesJson = session.categories_json;
-                    annotCat.order = categoriesJson.order;
-                    categoriesJson.categories.forEach(function(cat) {
-                        annotCat.colors[cat.code] = annotviz.colorToHex(cat.color);
-                    });
-                    annotCat.defaultColor = categoriesJson.defaultColor || "#536991";
-                    annotCategories.push(annotCat);
-                });
-                console.log(annotCategories);
-            });
-
-            jsonLoader.load();
-        }
-
-
 
 	    var pianorollChannel  = 'PIANOROLL';
 	    var annotationChannel = 'ANNOT';
-	    var eventCode = 'test_1';
-        getAnnotCategories(eventCode, "http://127.0.0.1:8080");
+	    var eventCode = 'atelier2';
+	    var serverUrl = "http://172.16.0.20:8080";
 	    var wsUri;
+	    
 	    if (window.location.protocol === 'file:') {
 	        wsUri = 'ws://172.16.0.20:8090/broadcast';
 	    }
@@ -80,6 +47,7 @@
 
 
         var annotsvizview = new annotviz.AnnotsVizView({
+        	urlCategories: serverUrl + "/p/api/v1/event/" + eventCode,
         	logger: logger,
         	stageView: stageView,
         	wsPianoroll: new annotviz.WsWrapper(wsUriPianoroll, logger),
diff -r e6605fecb175 -r 3b11017a76a4 client/annotviz/app/js/annotsroll.js
--- a/client/annotviz/app/js/annotsroll.js	Thu Jan 22 12:12:33 2015 +0100
+++ b/client/annotviz/app/js/annotsroll.js	Thu Jan 22 15:49:07 2015 +0100
@@ -47,9 +47,10 @@
 
     var yInit = opts.yInit;
     var annotStyles = _(opts.annotStyles).defaults(defaultAnnotStyles).value();
+    var marginX = 15;
     for(var style in annotStyles) {
     	if (annotStyles[style].wordWrap === true){
-    		annotStyles[style].wordWrapWidth = this.widthRoll; 
+    		annotStyles[style].wordWrapWidth = this.widthRoll - marginX; 
     	}
     }
     var started = false;
@@ -77,7 +78,7 @@
             text     = data.content.text,
             user     = data.content.user,
             ts       = Date.parse(data.ts),
-            color    = this.getColor(ts, data.content.category.code);
+            color    = data.content.color || this.getColor(ts, data.content.category.code);
 
         this.addAnnot(category, text, user, color, ts);
     };
@@ -85,27 +86,23 @@
     this.getColor = function(ts, code) {
         var colorsDef;
         _(this.annotColors).eachRight(function(cdef) {
-            console.log("cDef", cdef);
-            console.log("cDef ts", cdef.ts, ts);
             if(cdef.ts < ts) {
                 colorsDef = cdef.colors;
                 return false;
             }
         });
         var resColor;
-        console.log("colorsDef", colorsDef);
         if(colorsDef) {
             resColor = colorsDef[code];
         }
         if(!resColor) {
-            resColor = DEFAULT_ANNOT_COLOR;
+            resColor = this.annotColors[0].defaultColor || DEFAULT_ANNOT_COLOR;
         }
         return resColor;
     }
 
-    this.addAnnot = function(category, text, user, catColor, ts){
+    this.addAnnot = function(category, text, user, color, ts){
 
-        var color = catColor ? catColor : DEFAULT_ANNOT_COLOR;
         var x = 0;
         var y = (ts-this.startTs) * this.pixelsPerSecond / 1000 + yInit;
 
@@ -124,21 +121,21 @@
 	            category,
 	            _(annotStyles.label).extend({fill: color}).value()
 	        );
-	        catLabel.x = x + 20;
+	        catLabel.x = x + marginX;
 	        catLabel.y = y - 23;
 	        this.container.addChild(catLabel);
 	        textHeight += (catLabel.height - 23 + 2);
 	
 	        if(text) {
 	            var catText = new PIXI.Text(text, annotStyles.text);
-	            catText.x = x + 20;
+	            catText.x = x + marginX;
 	            catText.y = y + textHeight;
 	            this.container.addChild(catText);
 	            textHeight += (catText.height + 2);
 	        }
 	
 	        var catUser = new PIXI.Text(user, annotStyles.user);
-	        catUser.x = x + 20;
+	        catUser.x = x + marginX;
 	        catUser.y = y + textHeight;
 	        this.container.addChild(catUser);
 	        textHeight += (catUser.height + 8);
diff -r e6605fecb175 -r 3b11017a76a4 client/annotviz/app/js/annotstimeline.js
--- a/client/annotviz/app/js/annotstimeline.js	Thu Jan 22 12:12:33 2015 +0100
+++ b/client/annotviz/app/js/annotstimeline.js	Thu Jan 22 15:49:07 2015 +0100
@@ -39,7 +39,7 @@
     this.intervalWidth = opts.intervalWidth;
     this.maxCellHeight = opts.maxCellHeight;
     this.annotCategories = opts.annotCategories;
-
+    
     this.circleX = opts.circleX || (this.width/2);
     this.circleY = opts.circleY || (this.height/2);
     this.radius = opts.radius;
@@ -55,13 +55,6 @@
     	this.cells[i].i = i;
     	this.cells[i].totalAnnots = 0;
     	this.cells[i].categories = {};
-    	
-    	for (var category in this.annotCategories[0].colors){
-    		this.cells[i].categories[category] = {
-				"count": 0,
-				"color": this.annotCategories[0].colors[category]
-    		};
-    	}
     }
 
     var ws = opts.ws;
@@ -91,34 +84,26 @@
 
     //Add Annotation to the TimeLine
     this.addAnnot = function(data){
-    	if (typeof(this.annotCategories[0].colors[data.content.category.code]) !== 'undefined'){
-    		var annotCode = data.content.category.code;
-    	} else {
-    		var annotCode = this.annotCategories[0].order[this.annotCategories[0].order.length -1];
-    	}
-    	var annotTime = Date.parse(data.ts);
+    	
+    	if (this.timeEnd > Date.parse(data.ts)){
+	    	var i = Math.floor(((Date.parse(data.ts) + 3600*1000) - this.timeBegin)/(1000*this.intervalDuration));
 
-    	if (this.timeEnd > Date.parse(data.ts)){
-    		console.log(this.timeBegin);
-    		console.log(data.ts);
-    		console.log(Date.parse(data.ts));
-    		console.log(Date.now());
-	    	var i = Math.floor(((Date.parse(data.ts) + 3600*1000) - this.timeBegin)/(1000*this.intervalDuration));
-	    	console.log(i);
+	    	if (typeof(this.cells[i].graphics) === 'undefined'){
+	    		this.initCell(this.cells[i]);
+	    	}
+	    	
+	    	if (typeof(this.annotCategories[0].colors[data.content.category.code]) !== 'undefined'){
+	    		var annotCode = data.content.category.code;
+	    	} else {
+	    		var annotCode = 'default';
+	    	}
+	    	
 			this.cells[i].categories[annotCode].count += 1;
 			this.cells[i].totalAnnots +=1;
 			this.redrawCell(this.cells[i], i);
     	}
     };
 
-    this.initCell = function(cell){
-    	cell.graphics = new PIXI.Graphics();
-    	cell.graphics.position.x = this.circleX + this.radius * Math.sin(cell.i*(360/totalIndex)*(Math.PI/180));
-    	cell.graphics.position.y = this.circleY - this.radius * Math.cos(cell.i*(360/totalIndex)*(Math.PI/180));
-    	cell.graphics.rotation = (cell.i)*(360/totalIndex)*(Math.PI/180) + (360/(totalIndex*2))*(Math.PI/180);
-    	this.container.addChild(cell.graphics);
-    }
-
     this.initTimeTexts = function() {
 	    var tBeg = new PIXI.Text(Utils.formatTime(this.timeBegin), { font: '12pt Gothic Standard', fill: '#646464' });
 	    tBeg.x = this.circleX + 15;
@@ -150,13 +135,7 @@
 
     //Draw the cellule
     this.redrawCell = function(cell){
-
-    	if (typeof(cell.graphics) === 'undefined'){
-    		this.initCell(cell);
-    	} else {
-    		cell.graphics.clear();
-    	}
-
+    	
     	var y = 0;
 
     	//Check if total height is higher than Max Cell Height
@@ -175,6 +154,25 @@
     		y -= cell.categories[currentCode].count*heightStep;
     	}
     }
+    
+    this.initCell = function(cell){
+    	cell.graphics = new PIXI.Graphics();
+    	cell.graphics.position.x = this.circleX + this.radius * Math.sin(cell.i*(360/totalIndex)*(Math.PI/180));
+    	cell.graphics.position.y = this.circleY - this.radius * Math.cos(cell.i*(360/totalIndex)*(Math.PI/180));
+    	cell.graphics.rotation = (cell.i)*(360/totalIndex)*(Math.PI/180) + (360/(totalIndex*2))*(Math.PI/180);
+    	this.container.addChild(cell.graphics);
+    	
+    	for (var category in this.annotCategories[0].colors){
+    		cell.categories[category] = {
+				"count": 0,
+				"color": this.annotCategories[0].colors[category]
+    		};
+    	}
+    	cell.categories['default'] = {
+			"count": 0,
+			"color": this.annotCategories[0].defaultColor
+    	}
+    }
 
     this.init = function() {
     	ws.message(function(data) {
diff -r e6605fecb175 -r 3b11017a76a4 client/annotviz/app/js/annotsvizview.js
--- a/client/annotviz/app/js/annotsvizview.js	Thu Jan 22 12:12:33 2015 +0100
+++ b/client/annotviz/app/js/annotsvizview.js	Thu Jan 22 15:49:07 2015 +0100
@@ -12,29 +12,30 @@
 var DoubleRoll = require('./doubleroll.js');
 var AnnotsTimeLine = require('./annotstimeline.js');
 var AnnotsRoll = require('./annotsroll.js');
+var Utils = require('./utils.js');
 
 var defaultOptions = {
     xInit: 0,
     yInit: 0,
     width: 1024,
     height: 768,
-    annotCategories: [
-    {
-        "ts": 1421928213000,
-        "colors": {
-            "transgressions": "#b90000",
-            "rythmique": "#af931e",
-            "narration": "#4bdd71",
-            "relation": "#1c28ba"
-        },
-        "order": [
-            "transgressions",
-            "rythmique",
-            "narration",
-            "relation"
-        ],
-        "defaultColor": "#536991"
-    }]
+//    annotCategories: [
+//    {
+//        "ts": 1421928213000,
+//        "colors": {
+//            "transgressions": "#b90000",
+//            "rythmique": "#af931e",
+//            "narration": "#4bdd71",
+//            "relation": "#1c28ba"
+//        },
+//        "order": [
+//            "transgressions",
+//            "rythmique",
+//            "narration",
+//            "relation"
+//        ],
+//        "defaultColor": "#536991"
+//    }]
 };
 
 function AnnotsVizView(options){
@@ -46,10 +47,12 @@
     this.container.y = opts.yInit;
 	this.width = opts.width;
 	this.height= opts.height;
-    this.annotCategories = opts.annotCategories;
     this.timeBegin = opts.timeBegin;
     this.timeEnd = opts.timeEnd;
-
+    
+    this.annotCategories = [];
+    Utils.getAnnotCategories(opts.urlCategories, this.annotCategories);
+    
 	var wsPianoroll = opts.wsPianoroll;
 	var wsAnnot = opts.wsAnnot;
 	var stageView = opts.stageView;
diff -r e6605fecb175 -r 3b11017a76a4 client/annotviz/app/js/pianoroll.js
--- a/client/annotviz/app/js/pianoroll.js	Thu Jan 22 12:12:33 2015 +0100
+++ b/client/annotviz/app/js/pianoroll.js	Thu Jan 22 15:49:07 2015 +0100
@@ -73,7 +73,6 @@
     };
 
     this.addNoteRaw = function(data) {
-    	console.log(data);
         var note = data.content[3];
         var velocity = data.content[4];
         var ts = (data.content[0] - NTP_EPOCH_DELTA)*1000;
diff -r e6605fecb175 -r 3b11017a76a4 client/annotviz/app/js/utils.js
--- a/client/annotviz/app/js/utils.js	Thu Jan 22 12:12:33 2015 +0100
+++ b/client/annotviz/app/js/utils.js	Thu Jan 22 15:49:07 2015 +0100
@@ -19,9 +19,40 @@
 	return m ? '#' + (1 << 24 | m[1] << 16 | m[2] << 8 | m[3]).toString(16).substr(1) : c;
 }
 
+function getAnnotCategories(urlCategories, annotCategories) {
 
+    var jsonLoader = new PIXI.JsonLoader(urlCategories, true);
+    
+    jsonLoader.on('loaded', function(res) {
+        var data = res.target.json;
+
+        while(annotCategories.length > 0) {
+        	annotCategories.pop();
+        }
+
+        data.sessions.forEach(function(session) {
+            var annotCat = {
+                ts: session.start_ts === null ? new Date(0) : Date.parse(session.start_ts),
+                colors: {}
+            }
+            var categoriesJson = session.categories_json;
+            annotCat.order = categoriesJson.order;
+            categoriesJson.categories.forEach(function(cat) {
+                annotCat.colors[cat.code] = colorToHex(cat.color);
+            });
+            annotCat.defaultColor = categoriesJson.defaultColor || "#536991";
+            annotCategories.push(annotCat);
+        });
+        console.log(annotCategories);
+        annotCategories[0].order.push("default");
+    });
+    
+    jsonLoader.load();
+    
+}
 
 module.exports = {
 	formatTime: formatTime,
+	getAnnotCategories: getAnnotCategories,
 	colorToHex: colorToHex
 };