# HG changeset patch # User rougeronj # Date 1428937907 -7200 # Node ID 192d7d7f7bb43639cf506e5caec3355f3f5449ce # Parent a8052f8ab19ced3a3ae376feb54915a6f365cade Add dynamicRange option. Adapt rescaleScene to be able to increase the scale (new note is added) or decrease the scale (a note is deleted). diff -r a8052f8ab19c -r 192d7d7f7bb4 client/annotviz/app/js/doubleroll.js --- 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; diff -r a8052f8ab19c -r 192d7d7f7bb4 client/annotviz/app/js/pianoroll.js --- 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;