diff -r 4dd9a96a6d3b -r 517e343a86eb pianoroll/app.js
--- a/pianoroll/app.js	Mon Oct 13 19:05:09 2014 +0200
+++ b/pianoroll/app.js	Tue Oct 14 12:17:34 2014 +0200
@@ -7,7 +7,7 @@
    ellog.scrollTop = ellog.scrollHeight;
 };
 
-//Config vars
+// Config vars
 var sceneWidth = 1000;
 var sceneHeight = 128 * 4; // multiple of 128 because of 128 levels in midi signals ->  better look
 var sceneBgColor = 0x66FF99;
@@ -18,7 +18,10 @@
 //var speed = 1; // container -x position at each frame. Speed = 1 ~ 100px for 2 seconds
 var zeroTime = new Date("2014-10-06T12:16:43.000000Z").getTime();
 var noteDict = {};
-var drawPianoNotes = [1,0,1,0,1,1,0,1,0,1,0,1];//Do, Do#, Ré, Ré#, Mi, Fa, Fa#, Sol, Sol#, La, La#, Si
+var pianoNotes = [1,0,1,0,1,1,0,1,0,1,0,1];//Do, Do#, Ré, Ré#, Mi, Fa, Fa#, Sol, Sol#, La, La#, Si
+// Visual config
+var drawPianoNotes = false;
+var drawVerticalLines = false;
 
 
 //create an new instance of a pixi stage
@@ -28,7 +31,7 @@
 var renderer = PIXI.autoDetectRenderer(sceneWidth, sceneHeight);
 
 //add the renderer view element to the DOM
-document.body.appendChild(renderer.view);
+document.getElementById("canvasContainer").appendChild(renderer.view);
 
 //requestAnimFrame( animate );
 
@@ -45,19 +48,21 @@
   graphics.endFill();
   stage.addChild(graphics);
 }
-//Draw 127 lines
-for(var i=0;i<128;i++){
-  var graphics = new PIXI.Graphics();
-  var color = drawPianoNotes[i%12]==1 ? 0xFFFFFF : 0x000000;
-  if(i==60){
-      color = 0xFFD700;
-  }
-  graphics.beginFill(color);
-  graphics.lineStyle(1, 0xAAAAAA);
-  var y = sceneHeight - delta * (i+1);
-  graphics.drawRect(0, y, 20, delta);
-  graphics.endFill();
-  stage.addChild(graphics);
+//Draw piano notes on the left
+if(drawPianoNotes){
+    for(var i=0;i<128;i++){
+        var graphics = new PIXI.Graphics();
+        var color = pianoNotes[i%12]==1 ? 0xFFFFFF : 0x000000;
+        if(i==60){
+            color = 0xFFD700;
+        }
+        graphics.beginFill(color);
+        graphics.lineStyle(1, 0xAAAAAA);
+        var y = sceneHeight - delta * (i+1);
+        graphics.drawRect(0, y, 20, delta);
+        graphics.endFill();
+        stage.addChild(graphics);
+    }
 }
 
 var uberContainer = new PIXI.DisplayObjectContainer();
@@ -91,16 +96,19 @@
 }
 
 function addBunny(data){
+    var timeFromZero = data.content[1];
     var note = data.content[3];
     var velocity = data.content[4];
     if(velocity===0){
         if(note in noteDict){
             // We close the note
-            var beginTime = new Date(noteDict[note].ts).getTime();
+            /*var beginTime = new Date(noteDict[note].ts).getTime();
             var beginDelta = beginTime - zeroTime;
             var durationDelta = new Date(data.ts).getTime() - beginTime;
             var beginX = beginDelta * pixelsPerSecond / 1000;
-            var width = durationDelta * pixelsPerSecond / 1000;
+            var width = durationDelta * pixelsPerSecond / 1000;*/
+            var beginX = noteDict[note].ts * pixelsPerSecond / 1000;
+            var width = (timeFromZero - noteDict[note].ts) * pixelsPerSecond / 1000;
             // We draw the rectangle
             var graphics = new PIXI.Graphics();
             graphics.beginFill(0x0000AA, (noteDict[note].velocity / 128));
@@ -112,7 +120,7 @@
         }
     }
     else{
-        noteDict[note] = {ts: data.ts, velocity:velocity};
+        noteDict[note] = {ts: timeFromZero, velocity:velocity};
     }
 }
 
@@ -176,4 +184,7 @@
     container.addChild(t);
 }
 var moveInterval = window.setInterval(moveContainer, 1000/manualFramerate);
-var linesInterval = window.setInterval(addLine, lineInterval);
+var verticalLinesInterval = false;
+if(drawVerticalLines){
+    verticalLinesInterval = window.setInterval(addLine, lineInterval);
+}