--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/client/annotviz/app/js/generalView.js	Fri Jan 16 22:09:56 2015 +0100
@@ -0,0 +1,77 @@
+/**
+* js/generalView
+*
+* generalView basic component
+*
+*/
+
+'use strict';
+
+var PIXI = require('pixi');
+var randomColor = require('randomColor');
+
+function GeneralView(parentContainer, xInit, yInit, width, height, duration, interval, beginTime){
+	console.log(width);
+    var _this = this;
+    this.container = new PIXI.DisplayObjectContainer();
+    this.container.position.x = xInit;
+    this.container.position.y = yInit;
+    this.container.width = width;
+    this.container.height = height;
+    parentContainer.addChild(this.container);
+    
+    this.duration = duration;
+    this.beginTime = beginTime;
+    this.width = width;
+    this.height = height;
+    //define interval corresponding to the time of one step
+    //e.g: 60 for a step of 60 seconds
+    this.interval = interval;
+    // define the step depending the interval we passed and the duration
+    this.step = width*interval/duration;
+    
+  //Initialise the list of step
+    //each cell will contain the list categories and the number of annotations per categories
+    this.cells = []
+    
+    
+    // draw temp line to locate the middle of the container
+    var graphics = new PIXI.Graphics();
+    graphics.beginFill(0x000000);
+    graphics.lineStyle(1, 0x000000);
+    graphics.moveTo(xInit, (-this.height/2) );
+    graphics.lineTo(this.width, (-this.height/2));
+    graphics.endFill();
+    this.container.addChild(graphics);
+
+    this.addAnnot = function(category, time){
+    	var x = Math.floor( (time-this.beginTime)/(1000*this.interval)) * this.step;
+    	var y = (-this.height/2);
+    	
+    	//Check if cell is already set.
+    	//If yes get increment the numbere of annots in the category corresponding
+    	//If not initialise the cell
+//    	if (this.cells[x] === "undefined"){
+//    		cells[x].push({
+//    			"code" : category.code,
+//    			"color" : category.color,
+//    			"count" : 1
+//    		});
+//    	} else {
+//    		if (c)
+//    	} 
+    	
+    	console.log("x : " + x + " | y : " + y);
+        
+    	// We draw the rectangle
+        var graphics = new PIXI.Graphics();
+        graphics.beginFill(0x536991);
+        graphics.drawRect(x, y, this.step, -10);
+        graphics.endFill();
+        
+        this.container.addChild(graphics);
+    };
+
+}
+
+module.exports = GeneralView;

--- a/client/annotviz/app/js/main.js	Fri Jan 16 13:33:18 2015 +0100
+++ b/client/annotviz/app/js/main.js	Fri Jan 16 22:09:56 2015 +0100
@@ -140,11 +140,23 @@
 
 var AnnotationRoll = new AnnotsRoll(uberContainer, sceneWidth - (prSize2 + prSize3), 0, prSize3 + prSize2, sceneHeight, prSize3, pixelsPerSecond3, lineInterval);
 
+/* ---------------------------------------------------------------- */
+/* ------------------- Init generalView container ----------------- */
+/* ---------------------------------------------------------------- */
+
+var GeneralView = require('./generalView.js')
+
+var GeneralRoll = new GeneralView(uberContainer, 0, 0, sceneWidth - (prSize2 + prSize3), sceneHeight, 3600, 60, Date.now());
+
+
 function addAnnots(data){
     var title = data.content.category.label;
     var user = data.content.user;
+    //Test cat and color
     var colorAnnot = 0x65A954;
+    
     AnnotationRoll.addAnnot(title, user, colorAnnot);
+    GeneralRoll.addAnnot(title, Date.now());
 }
 
 /* ---------------------------------------------------------------- */
@@ -232,6 +244,7 @@
             if(logger){
                 log('Got message: ' + e.data);
             }
+            console.log(e);
             addAnnots(JSON.parse(e.data));
         };
     }