--- a/pianoroll/app.js	Mon Oct 13 16:47:37 2014 +0200
+++ b/pianoroll/app.js	Mon Oct 13 17:53:00 2014 +0200
@@ -8,16 +8,16 @@
 };
 
 //Config vars
-var sceneWidth = 800;
-var sceneHeight = 400;
+var sceneWidth = 1000;
+var sceneHeight = 128 * 4; // multiple of 128 because of 128 levels in midi signals ->  better look
 var sceneBgColor = 0x66FF99;
 var manualFramerate = 24;
-var speed = 1; // container -x position at each frame. Speed = 1 ~ 110px for 2 seconds
 var pixelsPerSecond = 50; // nb of pixels per second
 var lineInterval = 2000; // means line every 2 seconds
 var nbLines = 0;
-
+//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 = {};
 
 
 //create an new instance of a pixi stage
@@ -31,10 +31,27 @@
 
 //requestAnimFrame( animate );
 
+
+//Draw 127 lines
+var delta = sceneHeight / 128;
+for(var i=1;i<128;i++){
+  var graphics = new PIXI.Graphics();
+  graphics.beginFill(0xFFFF00);
+  graphics.lineStyle(1, 0xAAAAAA);
+  var y = delta * i;
+  graphics.moveTo(0, y);
+  graphics.lineTo(sceneWidth, y);
+  graphics.endFill();
+
+  stage.addChild(graphics);
+}
+
 var uberContainer = new PIXI.DisplayObjectContainer();
 uberContainer.position.x = Math.floor(sceneWidth*4/5);
 uberContainer.position.y = 0;
 stage.addChild(uberContainer);
+
+
 var container = new PIXI.DisplayObjectContainer();
 container.position.x = 0;
 container.position.y = 0;
@@ -60,20 +77,30 @@
 }
 
 function addBunny(data){
-    // create a new Sprite using the texture
-    var bunny = new PIXI.Sprite(texture);
-    // center the sprites anchor point
-    //bunny.anchor.x = 0.5;
-    //bunny.anchor.y = 0.5;
-    deltaMilliseconds = new Date(data.ts).getTime() - zeroTime;
-    //bunny.position.x = (sceneWidth / 2) - container.x;
-    //bunny.position.y = Math.floor(Math.random()*sceneHeight);
-    var x = deltaMilliseconds * pixelsPerSecond / 1000;
-    bunny.position.x = x;
-    bunny.position.y = Math.floor( data.content[3] * sceneHeight / 128 );
-    bunny.alpha = data.content[4] / 128;
-    console.log("diff temporelle = ", x);
-    container.addChild(bunny);
+    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 beginDelta = beginTime - zeroTime;
+            var durationDelta = new Date(data.ts).getTime() - beginTime;
+            var beginX = beginDelta * pixelsPerSecond / 1000;
+            var width = durationDelta * pixelsPerSecond / 1000;
+            // We draw the rectangle
+            var graphics = new PIXI.Graphics();
+            graphics.beginFill(0x0000AA, (noteDict[note].velocity / 128));
+            var y = (128-note) * sceneHeight / 128; // (128-note) because y = 0 is for note = 128 and y = 128 for note = 0
+            graphics.drawRect(beginX, y, width, sceneHeight / 128);
+            graphics.endFill();
+            //console.log("diff temporelle = ", x);
+            container.addChild(graphics);
+            delete noteDict[note];
+        }
+    }
+    else{
+        noteDict[note] = {ts: data.ts, velocity:velocity};
+    }
 }
 
 window.onload = function() {