diff -r 2e2414765a59 -r b4bd49f01837 client/annotviz/app/js/main.js
--- a/client/annotviz/app/js/main.js	Thu Jan 15 17:56:57 2015 +0100
+++ b/client/annotviz/app/js/main.js	Thu Jan 15 17:59:41 2015 +0100
@@ -11,16 +11,27 @@
 var PIXI = require('pixi');
 
 // Config vars
+var horizontalView = false;
 var logger = false;
 var sceneWidth = 1920;
-var prHeight1 = 435;
-var prHeight2 = 645;
-var sceneHeight = prHeight1 + prHeight2;
+var sceneHeight = 1080;
+var prSize1 = 435;
+var prSize2 = 435;
+var prSize3 = 300;
 var sceneBgColor = 0xFFFFFF;
 var lineColor = 0x444444;
-var pixelsPerSecond1 = Math.floor(sceneWidth / 10); // nb of pixels per second
+if (horizontalView){
+	var pixelsPerSecond1 = Math.floor(sceneWidth / 10); // nb of pixels per second
+} else{
+	var pixelsPerSecond1 = Math.floor(sceneHeight / 10); // nb of pixels per second
+}
 var manualFramerate = pixelsPerSecond1 / 4;
-var pixelsPerSecond2 = Math.floor(sceneWidth / 60); // nb of pixels per second
+if (horizontalView){
+	var pixelsPerSecond2 = Math.floor(sceneWidth / 60); // nb of pixels per second
+} else {
+	var pixelsPerSecond2 = Math.floor(sceneHeight / 60); // nb of pixels per second
+}
+var pixelsPerSecond3 = Math.floor(sceneHeight / 60); // nb of pixels per second
 var lineInterval = 5000; // means line every 5 seconds
 var nbLines = -1;
 var noteHeight = 110;
@@ -32,7 +43,6 @@
 var timePageLoaded = Date.now();
 var offsetMusic = false;
 
-
 //create an new instance of a pixi stage
 var stage = new PIXI.Stage(sceneBgColor);
 
@@ -43,36 +53,48 @@
 document.getElementById('canvasContainer').appendChild(renderer.view);
 
 var uberContainer = new PIXI.DisplayObjectContainer();
-uberContainer.position.x = Math.floor(sceneWidth*9/10);
-uberContainer.position.y = 0;
+if (horizontalView){
+	uberContainer.position.x = Math.floor(sceneWidth*9/10);
+	uberContainer.position.y = 0;
+} else {
+	uberContainer.position.x = 0;
+	uberContainer.position.y = Math.floor(sceneHeight*9/10);;
+}
 stage.addChild(uberContainer);
 
+/* ---------------------------------------------------------------- */
+/* ------------------- Init Pianoroll containers ------------------ */
+/* ---------------------------------------------------------------- */
+
 var PianoRoll = require('./pianoroll.js')
 
-// Init containers
 var containerList = [];
-containerList.push(new PianoRoll(uberContainer, 0, 0, prHeight1, true, pixelsPerSecond1, sceneWidth, noteColors, colorsReg, lineColor, lineInterval, offsetMusic, prHeight1 / 128));
-containerList.push(new PianoRoll(uberContainer, 0, prHeight1, prHeight2, false, pixelsPerSecond2, sceneWidth, noteColors, colorsReg, lineColor, lineInterval, offsetMusic, prHeight2 / 128));
+
+if (horizontalView){
+	containerList.push(new PianoRoll(uberContainer, 0, 0, prSize1, true, pixelsPerSecond1, sceneWidth, noteColors, colorsReg, lineColor, lineInterval, offsetMusic, prSize1 / 128, horizontalView));
+	containerList.push(new PianoRoll(uberContainer, 0, prSize1, prSize2, false, pixelsPerSecond2, sceneWidth, noteColors, colorsReg, lineColor, lineInterval, offsetMusic, prSize2 / 128, horizontalView));
+} else {
+//	containerList.push(new PianoRoll(uberContainer, sceneWidth - prSize1, 0, sceneHeight, true, pixelsPerSecond1, prSize1, noteColors, colorsReg, lineColor, lineInterval, offsetMusic, prSize1 / 128, horizontalView));
+//	containerList.push(new PianoRoll(uberContainer, sceneWidth - (prSize1 + prSize2), 0, sceneHeight, false, pixelsPerSecond2, prSize2, noteColors, colorsReg, lineColor, lineInterval, offsetMusic, prSize2 / 128, horizontalView));
+	containerList.push(new PianoRoll(uberContainer, sceneWidth - prSize1, 0, sceneHeight, false, pixelsPerSecond2, prSize2, noteColors, colorsReg, lineColor, lineInterval, offsetMusic, prSize2 / 128, horizontalView));
+}
 
 // Line between two containers
 var graphics = new PIXI.Graphics();
 graphics.beginFill(0xFFFF00);
 graphics.lineStyle(1, lineColor);
-graphics.moveTo(0, prHeight1);
-graphics.lineTo(sceneWidth, prHeight1);
+if (horizontalView){
+	graphics.moveTo(0, prSize1);
+	graphics.lineTo(sceneWidth, prSize1);
+} else {
+	graphics.moveTo(sceneWidth - prSize1, 0);
+	graphics.lineTo(sceneWidth - prSize1, sceneHeight);
+	graphics.moveTo(sceneWidth - (prSize1 + prSize3), 0);
+	graphics.lineTo(sceneWidth - (prSize1 + prSize3), sceneHeight);
+}
 graphics.endFill();
 stage.addChild(graphics);
 
-
-function replaceContainers(){
-    var diff = (Date.now() - timePageLoaded)/1000;// nb of seconds since page loaded
-    //console.log("replace ! diff1 = ", container1.x - Math.floor(-diff*pixelsPerSecond1), ", diff 2 = ", container2.x - Math.floor(-diff*pixelsPerSecond2));
-    for(var i=0;i<containerList.length;i++){
-        containerList[i].moveTo(-diff);
-    }
-    renderer.render(stage);
-}
-
 function addNotes(data){
     if(!offsetMusic){
         // get difference between the current note timecode and my zero to set the difference between the canvas's zero and the music's zero
@@ -80,14 +102,12 @@
         var now = Date.now();
         var timeBetweenNowAndStart = now - timePageLoaded;
         offsetMusic = timeBetweenNowAndStart - data.content[1];
-        //console.log("start: ", timePageLoaded, ", now: ", now, ", timeBetweenNowAndStart = ", timeBetweenNowAndStart, ", offsetMusic = ", offsetMusic);
     }
     var note = data.content[3];
     var velocity = data.content[4];
     if(velocity===0){
         if(typeof noteDict[data.content[2]][note]!=='undefined'){
             // We close the note in container one
-            //console.log("coucou 2", data);
             var duration = data.content[1] - noteDict[data.content[2]][note].ts;
             for(var i=0;i<containerList.length;i++){
                 //               addNote(note, startTime,                          duration, velocity,                                 canal)
@@ -112,10 +132,27 @@
     }
 }
 
+/* ---------------------------------------------------------------- */
+/* ------------------- Init AnnotsRoll containers ----------------- */
+/* ---------------------------------------------------------------- */
 
+var AnnotsRoll = require('./annotsRoll.js')
+
+var AnnotationRoll = new AnnotsRoll(uberContainer, sceneWidth - (prSize2 + prSize3), 0, prSize3 + prSize2, sceneHeight, prSize3, pixelsPerSecond3, lineInterval);
 
-// Socket management
+function addAnnots(data){
+    var title = data.content.category.label;
+    var user = data.content.user;
+    var colorAnnot = 0x65A954;
+    AnnotationRoll.addAnnot(title, user, colorAnnot);
+}
+
+/* ---------------------------------------------------------------- */
+/* ----------------------- Socket management ---------------------- */
+/* ---------------------------------------------------------------- */
+
 var sock = null;
+var sock2 = null;
 var ellog = null;
 function log(m) {
     if(logger){
@@ -132,18 +169,24 @@
         document.body.removeChild(document.getElementById('log'));
     }
 
+    var wsuriInit;
     var wsuri;
+    var wsuri2;
+    
     if (window.location.protocol === 'file:') {
-        wsuri = 'ws://127.0.0.1:8090/broadcast';
+    	wsuriInit = 'ws://127.0.0.1:8090/broadcast';
     } else {
-        wsuri = 'ws://' + window.location.hostname + ':8090/broadcast';
+    	wsuriInit = 'ws://' + window.location.hostname + ':8090/broadcast';
     }
-    wsuri = wsuri + '?channel=PIANOROLL&event_code='+eventCode;
-
+    wsuri = wsuriInit + '?channel=PIANOROLL&event_code='+eventCode;
+    wsuri2 = wsuriInit + '?channel=ANNOT&event_code='+eventCode;
+    
     if ('WebSocket' in window) {
         sock = new WebSocket(wsuri);
+        sock2 = new WebSocket(wsuri2);
     } else if ('MozWebSocket' in window) {
         sock = new MozWebSocket(wsuri);
+        sock2 = new WebSocket(wsuri2);
     } else {
         log('Browser does not support WebSocket!');
         window.location = 'http://autobahn.ws/unsupportedbrowser';
@@ -170,8 +213,44 @@
             addNotes(JSON.parse(e.data));
         };
     }
+    
+    if (sock2) {
+        sock2.onopen = function(){
+            if(logger){
+                log('Connected to ' + wsuri);
+            }
+        };
+
+        sock2.onclose = function(e) {
+            if(logger){
+                log('Connection closed (wasClean = ' + e.wasClean + ', code = ' + e.code + ', reason = \'' + e.reason + '\')');
+            }
+            sock2 = null;
+        };
+
+        sock2.onmessage = function(e) {
+            if(logger){
+                log('Got message: ' + e.data);
+            }
+            addAnnots(JSON.parse(e.data));
+        };
+    }
 };
 
+function replaceContainers(){
+    var diff = (Date.now() - timePageLoaded)/1000;// nb of seconds since page loaded
+    
+    for(var i=0;i<containerList.length;i++){
+        containerList[i].moveTo(-diff);
+        AnnotationRoll.moveTo(-diff);
+    }
+    
+    renderer.render(stage);
+}
+
+/* ---------------------------------------------------------------- */
+/* ---------------------------- Main ------------------------------ */
+/* ---------------------------------------------------------------- */
 
 // Init page and intervals
 addLine();