diff -r 1762372184ae -r a8052f8ab19c client/annotviz/app/js/pianoroll.js
--- a/client/annotviz/app/js/pianoroll.js	Mon Jan 26 01:36:56 2015 +0100
+++ b/client/annotviz/app/js/pianoroll.js	Fri Apr 10 16:45:34 2015 +0200
@@ -36,6 +36,9 @@
     this.noteHeight = options.noteHeight;
     this.noteDict = {};
     this.startTs = options.startTs || Date.now();
+    
+    this.range = options.range;
+    
 
     var started = false;
 
@@ -60,7 +63,7 @@
         return color;
     };
 
-    this.getNoteRect = function(x, y, color, alpha, width, height) {
+    this.getNoteRect = function(note, x, y, color, alpha, width, height) {
         var graphics = new PIXI.Graphics();
         graphics.beginFill(color, alpha);
         graphics.drawRect(0, 0, width, height);
@@ -69,6 +72,7 @@
         graphics.y = y;
         graphics.width = width;
         graphics.height = height;
+        graphics.note = note;
         return graphics;
     };
 
@@ -122,11 +126,20 @@
                     // not visible. do nothing
                     return;
                 }
-                var y = Math.floor((128-note+0.5) * this.height / 128 - (this.noteHeight/2));
+            	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();
+            	}
+            	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 color = this.getColor(channel);
+                //128 hardecoded because its the maximum velocity of MIDI
                 var alpha = (noteVelocity / 128);
 
-                graphics = this.getNoteRect(x, y, color, alpha, width, this.noteHeight);
+                graphics = this.getNoteRect(note, x, y, color, alpha, width, this.noteHeight);
                 this.container.addChild(graphics);
             }
             else {
@@ -138,6 +151,19 @@
             }
         }
     };
+    
+    this.rescaleScene = function(){
+    	var _this = this;
+    	var childrenToUpdate = [];
+    	_(_this.container.children).forEach(function(child) {
+            return typeof(child) === 'undefined' ||
+                (!isHidden(child) && childrenToUpdate.push(child));
+        });
+    	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;
+        });
+    }
 
     this.addLine = function(ts){