add range options to scale the scene depending on this range. Add rescale function to rescale the scene when a note is out of this range
authorrougeronj
Fri, 10 Apr 2015 16:45:34 +0200
changeset 145 a8052f8ab19c
parent 144 1762372184ae
child 146 192d7d7f7bb4
add range options to scale the scene depending on this range. Add rescale function to rescale the scene when a note is out of this range
client/annotviz/app/js/doubleroll.js
client/annotviz/app/js/pianoroll.js
--- a/client/annotviz/app/js/doubleroll.js	Mon Jan 26 01:36:56 2015 +0100
+++ b/client/annotviz/app/js/doubleroll.js	Fri Apr 10 16:45:34 2015 +0200
@@ -18,16 +18,24 @@
     sceneWidth: 1024,
     pianorolls : [
       {
-        height: 435,
+        height: 384,
         timeWidth: 10,
         lineInterval: 5000,
-        noteHeight: undefined
+        noteHeight: undefined,
+        range: {
+    		bottom: 60,
+    		top: 70,
+        },
       },
       {
-        height: 645,
+        height: 384,
         timeWidth: 60,
         lineInterval: 5000,
-        noteHeight: undefined
+        noteHeight: undefined,
+        range:{
+    		bottom: 0,
+    		top: 128,
+        },
       },
     ],
     framerate: 25,
@@ -98,7 +106,7 @@
     var yInit = opts.yInit || 0;
     var linesDown = true;
     _(opts.pianorolls).forEach(function(prDef, i) {
-        var prNoteHeight = noteHeight || prDef.noteHeight || prDef.height / 128;
+        var prNoteHeight = noteHeight || prDef.noteHeight || prDef.height / (prDef.top - prDef.bottom);
         var prTimeWidth = prDef.timeWidth || timeWidth;
         pianorollList.push(new PianoRoll(_({
             yInit: yInit,
@@ -106,7 +114,8 @@
             linesDown: linesDown,
             pixelsPerSecond: Math.floor(sceneWidth / prTimeWidth),
             noteHeight: prNoteHeight,
-            lineInterval: prDef.lineInterval
+            lineInterval: prDef.lineInterval,
+            range: prDef.range,
         }).defaults(pianorollOptions).value()));
         yInit += prDef.height;
         linesDown = !linesDown;
--- 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){