# HG changeset patch
# User rougeronj
# Date 1421971200 -3600
# Node ID 7181e1f28eb0e32f43e7c6a958735c76414c10db
# Parent  9f2334598088b810adb9e7a54e00714eddf2d17b# Parent  f9dd7bfed9976461c79bf521ed01bf4caaf4fbcf
Merge with f9dd7bfed9976461c79bf521ed01bf4caaf4fbcf

diff -r f9dd7bfed997 -r 7181e1f28eb0 client/annotviz/app/annotsvizview.html
--- a/client/annotviz/app/annotsvizview.html	Fri Jan 23 00:41:35 2015 +0100
+++ b/client/annotviz/app/annotsvizview.html	Fri Jan 23 01:00:00 2015 +0100
@@ -21,13 +21,11 @@
     <script src="/js/libs-annotviz.js"></script>
     <script src="/js/annotviz.js"></script>
     <script>
-
-        var PIXI = require('pixi');
-
+    
 	    var pianorollChannel  = 'PIANOROLL';
 	    var annotationChannel = 'ANNOT';
-	    var eventCode = 'atelier2';
-	    var serverUrl = "http://172.16.0.20:8080";
+	    var eventCode = 'test_1';
+	    var serverUrl = "http://localhost:8080";
 	    var wsUri;
 	    
 	    if (window.location.protocol === 'file:') {
@@ -45,15 +43,16 @@
 	    	logger: logger
 	    });
 
-
         var annotsvizview = new annotviz.AnnotsVizView({
         	urlCategories: serverUrl + "/p/api/v1/event/" + eventCode,
         	logger: logger,
         	stageView: stageView,
         	wsPianoroll: new annotviz.WsWrapper(wsUriPianoroll, logger),
         	wsAnnot: new annotviz.WsWrapper(wsUriAnnotation, logger),
-        	timeBegin: 1421919000000,
-        	timeEnd: 1421951400000
+        	timeBegin: Date.parse("2015-01-23T09:30:00+01:00"),
+        	timeEnd: Date.parse("2015-01-23T18:30:00+01:00"),
+        	eventCode: eventCode,
+            channel: annotationChannel
         });
 
 
diff -r f9dd7bfed997 -r 7181e1f28eb0 client/annotviz/app/js/annotstimeline.js
--- a/client/annotviz/app/js/annotstimeline.js	Fri Jan 23 00:41:35 2015 +0100
+++ b/client/annotviz/app/js/annotstimeline.js	Fri Jan 23 01:00:00 2015 +0100
@@ -10,7 +10,6 @@
 var PIXI = require('pixi');
 var Utils = require('./utils.js');
 var _ = require('lodash');
-var moment = require('moment');
 
 var defaultOptions = {
     logger: undefined,
@@ -21,7 +20,8 @@
     serverUrl: 'http://127.0.0.1:8080',
     channel: 'ANNOT',
     maxPages: 1000,
-    //eventCode:
+    showClockGraphics: true,
+    archive: false
 };
 
 
@@ -44,24 +44,25 @@
     this.intervalWidth = opts.intervalWidth;
     this.maxCellHeight = opts.maxCellHeight;
     this.annotCategories = opts.annotCategories;
-
-    this.startTs = options.startTs || Date.now();
-
+	this.startTs = options.startTs || Date.now();
+    this.showClockGraphics = opts.showClockGraphics;
+    this.archive = opts.archive;
+    
     this.circleX = opts.circleX || (this.width/2);
     this.circleY = opts.circleY || (this.height/2);
     this.radius = opts.radius;
-    this.perimeter = 2*Math.PI* this.radius;
-    this.intervalDuration = (this.intervalWidth * this.duration / this.perimeter);
-
+    var perimeter = 2*Math.PI* this.radius;
+    this.intervalDuration = (this.intervalWidth * this.duration / perimeter);
+    
     var channel = opts.channel;
     var eventCode = opts.eventCode;
     var serverUrl = opts.serverUrl;
     var maxPages = opts.maxPages;
-
-    var totalIndex = Math.floor(this.perimeter/this.intervalWidth);
+    
+    var totalIndex = Math.floor( perimeter/this.intervalWidth);
 
-    this.cells = [];
-    for (var i=0; i<(this.perimeter/this.intervalWidth) ; i++){
+    this.cells = []
+    for (var i=0; i<(perimeter/this.intervalWidth) ; i++){
     	this.cells[i] = [];
     	this.cells[i].i = i;
     	this.cells[i].totalAnnots = 0;
@@ -74,26 +75,13 @@
     //draw the base - circle and line to locate the scene
     var graphics = new PIXI.Graphics();
     graphics.lineStyle(2, 0x646464)
-        .drawCircle(this.circleX, this.circleY, this.radius - 3)
-        .lineStyle(1, 0xD7D7D7)
-        .drawCircle(this.circleX, this.circleY, this.radius*2/3)
-        .drawCircle(this.circleX, this.circleY, this.radius/3)
-        .lineStyle(1, 0x646464)
-        .moveTo(this.circleX, this.circleY - (this.radius/3)/2)
-        .lineTo(this.circleX, this.circleY - this.radius - this.maxCellHeight - 10)
-        .endFill();
+    	.drawCircle(this.circleX, this.circleY, this.radius - 3)
+    	.endFill()
     this.container.addChild(graphics);
 
-    //set time text
-    //TODO : move this to annotsvizview
-    var currentTimeText = new PIXI.Text('-- : -- : --', { font: '18pt Gothic Standard', fill: '#646464' });
-    currentTimeText.x = this.circleX - currentTimeText.width/2;
-    currentTimeText.y = this.circleY - currentTimeText.height/2;
-    this.container.addChild(currentTimeText);
-
     stageView.registerComponent(this);
 
-    var loadArchives = function() {
+	var loadArchives = function() {
         //start timeBegin end startTime
         //query -> need channel + eventCode
         //iterate over data fill cells
@@ -108,8 +96,6 @@
             { name: 'event_code', op: '==', val: eventCode} //eventcode
         ];
 
-        console.log(JSON.stringify({filters:filters}));
-
         url = url + '?q=' + JSON.stringify({filters:filters});
 
         var totalPage = 1;
@@ -121,7 +107,6 @@
                 var data = res.target.json;
                 /*jshint -W069 */
                 totalPage = Math.min(maxPages,parseInt(data['total_pages']));
-                console.log('DATA', data);
                 data.objects.forEach(function(annotation) {
                     _this.addAnnot(annotation);
                 });
@@ -168,38 +153,44 @@
     	}
     };
 
-    this.initTimeTexts = function() {
-        var tBeg = new PIXI.Text(Utils.formatTime(this.timeBegin), { font: '12pt Gothic Standard', fill: '#646464' });
-        tBeg.x = this.circleX + 15;
-        tBeg.y = this.circleY - this.radius - this.maxCellHeight - 10;
-        this.container.addChild(tBeg);
+    this.initClockGraphics = function() {
+	    var tBeg = new PIXI.Text(Utils.formatTime(this.timeBegin), { font: '12pt Gothic Standard', fill: '#646464' });
+	    tBeg.x = this.circleX + 15;
+	    tBeg.y = this.circleY - this.radius - this.maxCellHeight - 10;
+	    this.container.addChild(tBeg);
 
-        var tEnd = new PIXI.Text(Utils.formatTime(this.timeEnd), { font: '12pt Gothic Standard', fill: '#646464' });
-        tEnd.x = this.circleX - 15 - tEnd.width;
-        tEnd.y = this.circleY - this.radius - this.maxCellHeight - 10;
-        this.container.addChild(tEnd);
+	    var tEnd = new PIXI.Text(Utils.formatTime(this.timeEnd), { font: '12pt Gothic Standard', fill: '#646464' });
+	    tEnd.x = this.circleX - 15 - tEnd.width;
+	    tEnd.y = this.circleY - this.radius - this.maxCellHeight - 10;
+	    this.container.addChild(tEnd);
+
+	    var t15 = new PIXI.Text(Utils.formatTime(((this.timeEnd - this.timeBegin)/4) + this.timeBegin), { font: '12pt Gothic Standard', fill: '#646464' });
+	    t15.x = this.circleX + this.radius + this.maxCellHeight + 10 ;
+	    t15.y = this.circleY - t15.height;
+	    t15.rotation = Math.PI /2;
+	    this.container.addChild(t15);
 
-        var t15 = new PIXI.Text(Utils.formatTime(((this.timeEnd - this.timeBegin)/4) + this.timeBegin), { font: '12pt Gothic Standard', fill: '#646464' });
-        t15.x = this.circleX + this.radius + this.maxCellHeight + 10 ;
-        t15.y = this.circleY - t15.height;
-        t15.rotation = Math.PI /2;
-        this.container.addChild(t15);
+	    var t30 = new PIXI.Text(Utils.formatTime(((this.timeEnd - this.timeBegin)/2) + this.timeBegin), { font: '12pt Gothic Standard', fill: '#646464' });
+	    t30.x = this.circleX - t30.width/2;
+	    t30.y = this.circleY + this.radius + this.maxCellHeight - 2;
+	    this.container.addChild(t30);
 
-        var t30 = new PIXI.Text(Utils.formatTime(((this.timeEnd - this.timeBegin)/2) + this.timeBegin), { font: '12pt Gothic Standard', fill: '#646464' });
-        t30.x = this.circleX - t30.width/2;
-        t30.y = this.circleY + this.radius + this.maxCellHeight - 2;
-        this.container.addChild(t30);
-
-        var t45 = new PIXI.Text(Utils.formatTime(((this.timeEnd - this.timeBegin)*3/4) + this.timeBegin), { font: '12pt Gothic Standard', fill: '#646464' });
-        t45.x = this.circleX - this.radius - this.maxCellHeight - 10 ;
-        t45.y = this.circleY + t15.height;
-        t45.rotation = -Math.PI/2;
-        this.container.addChild(t45);
-    };
+	    var t45 = new PIXI.Text(Utils.formatTime(((this.timeEnd - this.timeBegin)*3/4) + this.timeBegin), { font: '12pt Gothic Standard', fill: '#646464' });
+	    t45.x = this.circleX - this.radius - this.maxCellHeight - 10 ;
+	    t45.y = this.circleY + t15.height;
+	    t45.rotation = -Math.PI/2;
+	    this.container.addChild(t45);
+	    
+	    var lineV = new PIXI.Graphics();
+	    lineV.lineStyle(1, 0x646464)
+	    	.moveTo(this.circleX, this.circleY - (this.radius/3)/2)
+	    	.lineTo(this.circleX, this.circleY - this.radius - this.maxCellHeight - 10)
+    	.endFill();
+	    this.container.addChild(lineV);
+    }
 
     //Draw the cellule
     this.redrawCell = function(cell, colorsDef){
-
     	var y = 0;
 
         //Check if total height is higher than Max Cell Height
@@ -233,33 +224,27 @@
 				"color": colorsDef.colors[category]
     		};
     	}
-    	cell.categories['default'] = {
-			"count": 0,
-			"color": colorsDef.defaultColor
+    	if (typeof(cell.categories['default']) === 'undefined'){
+			cell.categories['default'] = {
+				"count": 0,
+				"color": colorsDef.defaultColor
+			}
     	}
     }
 
     this.init = function() {
-        ws.message(function(data) {
-            _this.addAnnot(data);
-        });
+    	if (!this.archive){
+	        ws.message(function(data) {
+	            _this.addAnnot(data);
+	        });
+    	}
 
-        this.initTimeTexts();
+    	if (this.showClockGraphics){this.initClockGraphics();}
     };
 
-    //TODO use moment.js
-    this.updateTime = function() {
-
-        var timeStr = moment().format("HH:mm:ss");
-
-        currentTimeText.setText(timeStr);
-    };
-
-    var refreshTimeInterval;
 
     this.start = function() {
-        this.startTs = Date.now();
-        refreshTimeInterval = setInterval(function() {_this.updateTime();}, 1000);
+    	this.startTs = Date.now();
         loadArchives();
     };
 
@@ -268,12 +253,11 @@
     };
 
     this.stop = function(){
-        console.log(this.cells);
     };
 
     return this;
 }
 
 module.exports = {
-    AnnotsTimeLine: AnnotsTimeLine
+	AnnotsTimeLine: AnnotsTimeLine
 };
diff -r f9dd7bfed997 -r 7181e1f28eb0 client/annotviz/app/js/annotsvizview.js
--- a/client/annotviz/app/js/annotsvizview.js	Fri Jan 23 00:41:35 2015 +0100
+++ b/client/annotviz/app/js/annotsvizview.js	Fri Jan 23 01:00:00 2015 +0100
@@ -18,24 +18,7 @@
     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"
-//    }]
+    height: 768
 };
 
 function AnnotsVizView(options){
@@ -49,17 +32,20 @@
 	this.height= opts.height;
     this.timeBegin = opts.timeBegin;
     this.timeEnd = opts.timeEnd;
+    this.annotCategories = [];
     
-    this.annotCategories = [];
     Utils.getAnnotCategories(opts.urlCategories, this.annotCategories);
     
 	var wsPianoroll = opts.wsPianoroll;
 	var wsAnnot = opts.wsAnnot;
 	var stageView = opts.stageView;
+	var currentTime = Date.now() + 3600*1000;
+	var eventCode = opts.eventCode;
+    var channel = opts.channel;
 
 	stageView.registerComponent(this);
 
-	var timeLine = new AnnotsTimeLine.AnnotsTimeLine({
+	var timeLineDay2 = new AnnotsTimeLine.AnnotsTimeLine({
     	stageView : stageView,
         logger: logger,
         ws: new annotviz.WsWrapper(wsUriAnnotation, logger),
@@ -73,9 +59,44 @@
         intervalHeight: 10,
         maxCellHeight: 70,
         radius: 200,
+        eventCode: eventCode,
+        channel: channel,
         annotCategories: this.annotCategories
     });
+	
+    //Archive day 1
+    var timeLineDay1 = new AnnotsTimeLine.AnnotsTimeLine({
+    	stageView : stageView,
+        archive: true,
+        xInit: 0,
+        yInit: 0,
+        width: 1024 - 200 - 200,
+        height: 768-200,
+        timeBegin: Date.parse("2015-01-22T09:30:00+01:00"),
+        timeEnd: Date.parse("2015-01-22T18:30:00+01:00"),
+        circleX: timeLineDay2.circleX,
+        circleY: timeLineDay2.circleY,
+        intervalWidth: (timeLineDay2.radius*2/3)* timeLineDay2.intervalWidth / timeLineDay2.radius,
+        intervalHeight: (timeLineDay2.intervalHeight * (timeLineDay2.radius - timeLineDay2.radius*2/3))/ timeLineDay2.maxCellHeight,
+        maxCellHeight: (timeLineDay2.radius - timeLineDay2.radius*2/3)/4,
+        radius: timeLineDay2.radius*2/3,
+        annotCategories: this.annotCategories,
+        eventCode: eventCode,
+        channel: channel,
+        showClockGraphics:false
+    });
+    
+    var currentTimeText = new PIXI.Text("-- : -- : --", { font: '18pt Gothic Standard', fill: '#646464' });
+    currentTimeText.x = timeLineDay2.circleX - currentTimeText.width/2;
+    currentTimeText.y = timeLineDay2.circleY - currentTimeText.height/2;
+    this.container.addChild(currentTimeText);
 
+    var timeLineDay3 = new PIXI.Graphics();
+    timeLineDay3.lineStyle(1, 0x646464)
+    	.drawCircle(timeLineDay2.circleX, timeLineDay2.circleY, timeLineDay2.radius/3)
+    	.endFill()
+    this.container.addChild(timeLineDay3);
+    
 	var doubleRollH = new DoubleRoll.DoubleRoll({
         stageView : stageView,
     	logger: logger,
@@ -137,13 +158,17 @@
 		.endFill();
 	this.container.addChild(limiters);
 
-//	var doubleRollV = new DoubleRoll.DoubleRoll({});
-
 	this.init = function(){
+	};
 
-	}
+	this.updateTime = function(){
+        currentTimeText.setText(Utils.formatTime(Date.now()));
+    };
 
+    var refreshTimeInterval;
+    
 	this.start = function() {
+		refreshTimeInterval = setInterval(function() {_this.updateTime();}, 1000);
     };
 
     this.refresh = function() {
diff -r f9dd7bfed997 -r 7181e1f28eb0 client/annotviz/app/js/utils.js
--- a/client/annotviz/app/js/utils.js	Fri Jan 23 00:41:35 2015 +0100
+++ b/client/annotviz/app/js/utils.js	Fri Jan 23 01:00:00 2015 +0100
@@ -38,6 +38,9 @@
             }
             var categoriesJson = session.categories_json;
             annotCat.order = categoriesJson.order;
+            if (typeof(annotCat.order['default']) === 'undefined'){
+            	annotCat.order.push('default');
+            }
 			var catList = _.clone(categoriesJson.categories);
 			while(catList.length > 0) {
 				var cat = catList.pop();
@@ -56,8 +59,6 @@
             annotCat.defaultColor = categoriesJson.defaultColor || "#536991";
             annotCategories.push(annotCat);
         });
-        console.log(annotCategories);
-        annotCategories[0].order.push("default");
     });
 
     jsonLoader.load();