# HG changeset patch # User rougeronj # Date 1428677134 -7200 # Node ID a8052f8ab19ced3a3ae376feb54915a6f365cade # Parent 1762372184aeaad3acef805f656a8f927098590b 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 diff -r 1762372184ae -r a8052f8ab19c client/annotviz/app/js/doubleroll.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; 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){