diff -r 3b70b46e8044 -r a2525a44ec94 pianoroll/app.js
--- a/pianoroll/app.js	Tue Oct 14 12:35:22 2014 +0200
+++ b/pianoroll/app.js	Tue Oct 14 16:24:49 2014 +0200
@@ -9,10 +9,15 @@
 
 // Config vars
 var sceneWidth = 1920;
-var sceneHeight = 128 * 4; // multiple of 128 because of 128 levels in midi signals ->  better look
+//var sceneHeight = 128 * 4; // multiple of 128 because of 128 levels in midi signals ->  better look
+var prHeight1 = 435;
+var prHeight2 = 645;
+var sceneHeight = prHeight1 + prHeight2;
 var sceneBgColor = 0xFFFFFF;
+var lineColor = 0x444444;
 var manualFramerate = 24;
-var pixelsPerSecond = 50; // nb of pixels per second
+var pixelsPerSecond1 = Math.floor(sceneWidth / 30); // nb of pixels per second
+var pixelsPerSecond2 = Math.floor(sceneWidth / 60); // nb of pixels per second
 var lineInterval = 5000; // means line every 5 seconds
 var nbLines = -1;
 var noteHeight = 110;
@@ -77,14 +82,28 @@
 stage.addChild(uberContainer);
 
 
-var container = new PIXI.DisplayObjectContainer();
-container.position.x = 0;
-container.position.y = 0;
-uberContainer.addChild(container);
+var container1 = new PIXI.DisplayObjectContainer();
+container1.position.x = 0;
+container1.position.y = 0;
+uberContainer.addChild(container1);
+var container2 = new PIXI.DisplayObjectContainer();
+container2.position.x = 0;
+container2.position.y = prHeight1;
+uberContainer.addChild(container2);
 
+// Line between two containers
+var graphics = new PIXI.Graphics();
+graphics.beginFill(0xFFFF00);
+graphics.lineStyle(1, lineColor);
+var y = delta * i;
+graphics.moveTo(0, prHeight1);
+graphics.lineTo(sceneWidth, prHeight1);
+graphics.endFill();
+stage.addChild(graphics);
 
 function moveContainer() {
-    container.x -= pixelsPerSecond/manualFramerate;
+    container1.x -= pixelsPerSecond1/manualFramerate;
+    container2.x -= pixelsPerSecond2/manualFramerate;
     renderer.render(stage);
 }
 
@@ -94,22 +113,32 @@
     var velocity = data.content[4];
     if(velocity===0){
         if(note in noteDict){
-            // We close the note
+            // 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 * pixelsPerSecond / 1000;
-            var width = durationDelta * pixelsPerSecond / 1000;*/
-            var beginX = noteDict[note].ts * pixelsPerSecond / 1000;
-            var width = (timeFromZero - noteDict[note].ts) * pixelsPerSecond / 1000;
+            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) * 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.drawRect(beginX, Math.floor(y - (noteHeight/2) + ((sceneHeight / 128)/2)), width, noteHeight);
+            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();
-            container.addChild(graphics);
+            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);
+            // delete entry
             delete noteDict[note];
         }
     }
@@ -158,24 +187,39 @@
 function addLine(){
     nbLines++;
     var graphics = new PIXI.Graphics();
-    var x = nbLines * (lineInterval/1000) * pixelsPerSecond;
+    var x = nbLines * (lineInterval/1000) * pixelsPerSecond1;
     //console.log("nbLines = ",nbLines, "x = ", x);
     graphics.beginFill(0xFFFF00);
-    graphics.lineStyle(1, 0x444444);
-    graphics.moveTo(x, sceneHeight*(9/10));
-    graphics.lineTo(x, sceneHeight);
+    graphics.lineStyle(1, lineColor);
+    graphics.moveTo(x, prHeight1 - 20);
+    graphics.lineTo(x, prHeight1);
     graphics.endFill();
-    container.addChild(graphics);
+    container1.addChild(graphics);
     // Add text
     var totalSec = nbLines * lineInterval / 1000;
     var hours = parseInt( totalSec / 3600 ) % 24;
     var minutes = parseInt( totalSec / 60 ) % 60;
     var seconds = totalSec % 60;
     var timeStr = (hours < 10 ? "0" + hours : hours) + ":" + (minutes < 10 ? "0" + minutes : minutes) + ":" + (seconds  < 10 ? "0" + seconds : seconds);
-    var t = new PIXI.Text(timeStr, { font: "10pt Arial", fill: "#444444" });
+    var fontObj = { font: "10pt Arial", fill: "#444444" };
+    var t = new PIXI.Text(timeStr, fontObj);
     t.x = x + 2;
-    t.y = sceneHeight - 15;
-    container.addChild(t);
+    t.y = prHeight1 - 15;
+    container1.addChild(t);
+    // Second container
+    graphics = new PIXI.Graphics();
+    x = nbLines * (lineInterval/1000) * pixelsPerSecond2;
+    graphics.beginFill(0xFFFF00);
+    graphics.lineStyle(1, lineColor);
+    graphics.moveTo(x, 0);
+    graphics.lineTo(x, 20);
+    graphics.endFill();
+    container2.addChild(graphics);
+    var t = new PIXI.Text(timeStr, fontObj);
+    t.x = x + 2;
+    t.y = 2;
+    container2.addChild(t);
+    
 }
 var moveInterval = window.setInterval(moveContainer, 1000/manualFramerate);
 var verticalLinesInterval = false;