--- a/client/annotviz/app/js/doubleroll.js	Fri Apr 10 16:45:34 2015 +0200
+++ b/client/annotviz/app/js/doubleroll.js	Mon Apr 13 17:11:47 2015 +0200
@@ -23,9 +23,10 @@
         lineInterval: 5000,
         noteHeight: undefined,
         range: {
-    		bottom: 60,
-    		top: 70,
+    		bottom: 50,
+    		top: 90,
         },
+        dynamicRange: true,
       },
       {
         height: 384,
@@ -36,6 +37,7 @@
     		bottom: 0,
     		top: 128,
         },
+        dynamicRange: false,
       },
     ],
     framerate: 25,
@@ -102,11 +104,19 @@
         lineInterval: lineInterval,
         offsetMusic: offsetMusic,
     };
+    
+    var lineGraphics = new PIXI.Graphics()
+	    .beginFill(this.lineFillColor)
+	    .lineStyle(1, this.lineColor)
+	    .moveTo(Math.floor(sceneWidth*zeroShift), 0)
+	    .lineTo(-sceneWidth - Math.floor(sceneWidth*zeroShift), 0)
+	    .endFill();
+	this.container.addChild(lineGraphics);
 
     var yInit = opts.yInit || 0;
     var linesDown = true;
     _(opts.pianorolls).forEach(function(prDef, i) {
-        var prNoteHeight = noteHeight || prDef.noteHeight || prDef.height / (prDef.top - prDef.bottom);
+        var prNoteHeight = noteHeight || prDef.noteHeight || prDef.height / (prDef.range.top - prDef.range.bottom + 1);
         var prTimeWidth = prDef.timeWidth || timeWidth;
         pianorollList.push(new PianoRoll(_({
             yInit: yInit,
@@ -116,6 +126,7 @@
             noteHeight: prNoteHeight,
             lineInterval: prDef.lineInterval,
             range: prDef.range,
+            dynamicRange: prDef.dynamicRange,
         }).defaults(pianorollOptions).value()));
         yInit += prDef.height;
         linesDown = !linesDown;

--- a/client/annotviz/app/js/pianoroll.js	Fri Apr 10 16:45:34 2015 +0200
+++ b/client/annotviz/app/js/pianoroll.js	Mon Apr 13 17:11:47 2015 +0200
@@ -36,7 +36,8 @@
     this.noteHeight = options.noteHeight;
     this.noteDict = {};
     this.startTs = options.startTs || Date.now();
-    
+    this.dynamicRange = options.dynamicRange;
+    this.initRange = options.range;
     this.range = options.range;
     
 
@@ -65,6 +66,7 @@
 
     this.getNoteRect = function(note, x, y, color, alpha, width, height) {
         var graphics = new PIXI.Graphics();
+        graphics.note = note;
         graphics.beginFill(color, alpha);
         graphics.drawRect(0, 0, width, height);
         graphics.endFill();
@@ -72,7 +74,6 @@
         graphics.y = y;
         graphics.width = width;
         graphics.height = height;
-        graphics.note = note;
         return graphics;
     };
 
@@ -126,17 +127,15 @@
                     // not visible. do nothing
                     return;
                 }
-            	if (this.range.bottom > note || note > this.range.top){
-            		if (note < this.range.bottom)
-            			this.range.bottom = note;
-            		else
-            			this.range.top = note;
-            		this.noteHeight = this.height / (this.range.top - this.range.bottom);
-            		this.rescaleScene();
+            	if (this.dynamicRange && (this.range.bottom > note || note > this.range.top)){
+            		var newScale = {};
+            		newScale['bottom'] = Math.min(note, this.range.bottom);
+            		newScale['top'] = Math.max(note, this.range.top);
+            		this.rescaleScene(newScale);
             	}
-            	var y = Math.floor(((this.range.top-this.range.bottom)-(note-this.range.bottom)+0.5) * (this.height / (this.range.top-this.range.bottom)) - (this.noteHeight/2));
+            	var y = Math.floor(((this.range.top-this.range.bottom)-(note-this.range.bottom)+0.5) * (this.noteHeight) - (this.noteHeight/2));
                 var color = this.getColor(channel);
-                //128 hardecoded because its the maximum velocity of MIDI
+                
                 var alpha = (noteVelocity / 128);
 
                 graphics = this.getNoteRect(note, x, y, color, alpha, width, this.noteHeight);
@@ -152,18 +151,31 @@
         }
     };
     
-    this.rescaleScene = function(){
+    //rescale scene in case a note out of range is added or a note out of the range is removed
+    this.rescaleScene = function(newScale){
     	var _this = this;
     	var childrenToUpdate = [];
+    	var top = this.initRange.top;
+    	var bottom = this.initRange.bottom;
     	_(_this.container.children).forEach(function(child) {
-            return typeof(child) === 'undefined' ||
-                (!isHidden(child) && childrenToUpdate.push(child));
+    		if (typeof(child) !== 'undefined' && child.note && !isHidden(child)){
+    			top = Math.max(child.note, top);
+    			bottom = Math.min(child.note, bottom);
+    			return childrenToUpdate.push(child);
+    		}
         });
+    	if (newScale){
+    		this.range = newScale;
+    	}else{
+    		this.range.top = top; 
+    		this.range.bottom = bottom; 
+    	}
+    	this.noteHeight = this.height / (this.range.top - this.range.bottom + 1);
     	childrenToUpdate.forEach(function(child) {
-            child.y = Math.floor(((_this.range.top-_this.range.bottom)-(child.note-_this.range.bottom)+0.5) * (_this.height / (_this.range.top-_this.range.bottom)) - (_this.noteHeight/2));
-            child.height = _this.noteHeight;
+			child.y = Math.floor(((_this.range.top-_this.range.bottom)-(child.note-_this.range.bottom)+0.5) * (_this.noteHeight) - (_this.noteHeight/2));
+			child.height = _this.noteHeight;
         });
-    }
+    };
 
     this.addLine = function(ts){
 
@@ -223,13 +235,21 @@
 
     this.removePassedObjets = function(){
         var childrenToRemove = [];
+        var rescale = false;
         _(_this.container.children).forEach(function(child) {
             return typeof(child) === 'undefined' ||
                 (isHidden(child) && childrenToRemove.push(child));
         });
         childrenToRemove.forEach(function(child) {
+        	if (_this.dynamicRange && (_this.range.bottom === child.note || child.note === _this.range.top)){
+                rescale = true;
+            }
             _this.container.removeChild(child);
         });
+        //externalize this test to avoid repeated call to the function rescaleScene in the previous loop
+        if (rescale){
+            _this.rescaleScene();
+        }
     };
 
     this.start = function() {
@@ -243,12 +263,10 @@
     };
 
     this.stop = function() {
-        //window.clearInterval(this.moveInterval);
         clearInterval(this.verticalLinesInterval);
         clearInterval(this.cleanInterval);
     };
 
-
 }
 
 module.exports = PianoRoll;