--- a/annot-server/static/js/pianoroll.js	Mon Oct 20 15:00:19 2014 +0200
+++ b/annot-server/static/js/pianoroll.js	Mon Oct 20 18:02:31 2014 +0200
@@ -23,6 +23,9 @@
 var drawPianoNotes = false;
 var drawHorizontalLines = false;
 var drawVerticalLines = true;
+// Timecode method
+var timePageLoaded = Date.now();
+var offsetMusic = false;
 
 
 //create an new instance of a pixi stage
@@ -100,53 +103,53 @@
     renderer.render(stage);
 }
 function moveContainerMore() {
-    container1.x -= 10*(pixelsPerSecond1/manualFramerate);
-    container2.x -= 10*(pixelsPerSecond2/manualFramerate);
+    container1.x -= 50*(pixelsPerSecond1/manualFramerate);
+    container2.x -= 50*(pixelsPerSecond2/manualFramerate);
     renderer.render(stage);
 }
 function moveContainerRight() {
-    container1.x += 10*(pixelsPerSecond1/manualFramerate);
-    container2.x += 10*(pixelsPerSecond2/manualFramerate);
+    container1.x += 50*(pixelsPerSecond1/manualFramerate);
+    container2.x += 50*(pixelsPerSecond2/manualFramerate);
     renderer.render(stage);
 }
 
-function addBunny(data){
-    var timeFromZero = data.content[1];
+function addNoteInContainer(note, startTime, duration, velocity, pixelsPerSecond, container, prHeight){
+    //console.log("coucou 1", note, timeFromZero, ts, velocity, pixelsPerSecond, container, prHeight);
+    var beginX = (offsetMusic + startTime) * pixelsPerSecond / 1000;
+    var width = duration * pixelsPerSecond / 1000;
+    // We draw the rectangle
+    var graphics = new PIXI.Graphics();
+    graphics.beginFill(noteColor, (velocity / 128));
+    var y = (128-note) * prHeight / 128; // (128-note) because y = 0 is for note = 128 and y = 128 for note = 0
+    graphics.drawRect(beginX, Math.floor(y - (noteHeight/2) + ((prHeight / 128)/2)), width, noteHeight);
+    graphics.endFill();
+    container.addChild(graphics);
+}
+
+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
+        // in order to place in real time
+        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(note in noteDict){
             // We close the note in container one
-            /*var beginTime = new Date(noteDict[note].ts).getTime();
-            var beginDelta = beginTime - zeroTime;
-            var durationDelta = new Date(data.ts).getTime() - beginTime;
-            var beginX = beginDelta * pixelsPerSecond1 / 1000;
-            var width = durationDelta * pixelsPerSecond1 / 1000;*/
-            var beginX = noteDict[note].ts * pixelsPerSecond1 / 1000;
-            var width = (timeFromZero - noteDict[note].ts) * pixelsPerSecond1 / 1000;
-            // We draw the rectangle
-            var graphics = new PIXI.Graphics();
-            graphics.beginFill(noteColor, (noteDict[note].velocity / 128));
-            var y = (128-note) * prHeight1 / 128; // (128-note) because y = 0 is for note = 128 and y = 128 for note = 0
-            graphics.drawRect(beginX, Math.floor(y - (noteHeight/2) + ((prHeight1 / 128)/2)), width, noteHeight);
-            graphics.endFill();
-            container1.addChild(graphics);
-            // container 2
-            beginX = noteDict[note].ts * pixelsPerSecond2 / 1000;
-            width = (timeFromZero - noteDict[note].ts) * pixelsPerSecond2 / 1000;
-            // We draw the rectangle
-            graphics = new PIXI.Graphics();
-            graphics.beginFill(noteColor, (noteDict[note].velocity / 128));
-            y = (128-note) * prHeight2 / 128; // (128-note) because y = 0 is for note = 128 and y = 128 for note = 0
-            graphics.drawRect(beginX, Math.floor(y - (noteHeight/2) + ((prHeight2 / 128)/2)), width, noteHeight);
-            graphics.endFill();
-            container2.addChild(graphics);
+            //console.log("coucou 2", data);
+            var duration = data.content[1] - noteDict[note].ts;
+            addNoteInContainer(note, noteDict[note].ts, duration, noteDict[note].velocity, pixelsPerSecond1, container1, prHeight1);
+            addNoteInContainer(note, noteDict[note].ts, duration, noteDict[note].velocity, pixelsPerSecond2, container2, prHeight2);
             // delete entry
             delete noteDict[note];
         }
     }
     else{
-        noteDict[note] = {ts: timeFromZero, velocity:velocity};
+        noteDict[note] = {ts: data.content[1], velocity:velocity};
     }
 }
 
@@ -201,7 +204,7 @@
            if(logger){
                log("Got message: " + e.data);
            }
-          addBunny(JSON.parse(e.data));
+          addNotes(JSON.parse(e.data));
        }
     }
 };
@@ -242,7 +245,6 @@
     t.x = x + 2;
     t.y = 2;
     container2.addChild(t);
-    
 }
 addLine();
 var moveInterval = window.setInterval(moveContainer, 1000/manualFramerate);