--- a/client/annotviz/app/js/pianoroll.js Thu Jan 15 17:56:57 2015 +0100
+++ b/client/annotviz/app/js/pianoroll.js Thu Jan 15 17:59:41 2015 +0100
@@ -10,11 +10,14 @@
var PIXI = require('pixi');
var randomColor = require('randomColor');
-function PianoRoll(parentContainer, xInit, yInit, height, linesDown, pixelsPerSecond, width, noteColors, colorsReg, lineColor, lineInterval, offsetMusic, noteHeight){
+function PianoRoll(parentContainer, xInit, yInit, height, linesDown, pixelsPerSecond, width, noteColors, colorsReg, lineColor, lineInterval, offsetMusic, noteHeight, horizontalView){
var _this = this;
this.container = new PIXI.DisplayObjectContainer();
this.container.position.x = xInit;
this.container.position.y = yInit;
+ if (!horizontalView){
+ this.container.width = width;
+ }
parentContainer.addChild(this.container);
this.linesDown = linesDown;
@@ -29,16 +32,22 @@
this.noteHeight = noteHeight;
this.addNote = function(note, startTime, duration, velocity, canal){
- //console.log("coucou 1", note, timeFromZero, ts, velocity, pixelsPerSecond, container, prHeight);
- var beginX = (this.offsetMusic + startTime) * this.pixelsPerSecond / 1000;
- var width = duration * this.pixelsPerSecond / 1000;
- if((beginX+width) < (Math.abs(this.container.x) - this.width)) {
- // not visible. do nothing
- return;
+ var begin = (this.offsetMusic + startTime) * this.pixelsPerSecond / 1000;
+ if (horizontalView){
+ var width = duration * this.pixelsPerSecond / 1000;
+ if((begin+width) < (Math.abs(this.container.x) - this.width)) {
+ // not visible. do nothing
+ return;
+ }
+ } else {
+ var height = duration * this.pixelsPerSecond / 1000;
+ if((begin+height) < (Math.abs(this.container.y) - this.height)) {
+ // not visible. do nothing
+ return;
+ }
}
// We draw the rectangle
var graphics = new PIXI.Graphics();
- //console.log("beginX = ", beginX, "canal = ", canal, "color = ", noteColor[canal], "width = ", width, "note = ", note, "velocity = ", velocity);
var color = this.colorsReg[canal];
if(typeof(color) === 'undefined') {
var colorsRegSize = Object.keys(this.colorsReg).length;
@@ -50,21 +59,37 @@
}
}
graphics.beginFill(color, (velocity / 128));
- var y = (128-note) * this.height / 128; // (128-note) because y = 0 is for note = 128 and y = 128 for note = 0
- graphics.drawRect(0, Math.floor(y - (noteHeight/2) + ((this.height / 128)/2)), width, noteHeight);
- graphics.endFill();
- graphics.x = beginX;
+ if (horizontalView){
+ var y = (128-note) * this.height / 128; // (128-note) because y = 0 is for note = 128 and y = 128 for note = 0
+ graphics.drawRect(0, Math.floor(y - (noteHeight/2) + ((this.height / 128)/2)), width, noteHeight);
+ graphics.endFill();
+ graphics.x = begin;
+ } else {
+ var x = (128-note) * this.width / 128; // (128-note) because y = 0 is for note = 128 and y = 128 for note = 0
+ graphics.drawRect(Math.floor(x - (noteHeight/2) + ((this.width / 128)/2)), 0, noteHeight, height);
+ graphics.endFill();
+ graphics.y = begin;
+ }
this.container.addChild(graphics);
};
this.addLine = function(ts){
var graphics = new PIXI.Graphics();
- var x = -this.container.x;
+ if (horizontalView){
+ var x = -this.container.x;
+ var y = this.linesDown ? this.height - 20 : 0;
+ } else {
+ var x = this.linesDown ? 0 : this.width - 20 ;
+ var y = -this.container.y;
+ }
graphics.beginFill(0xFFFF00);
graphics.lineStyle(1, this.lineColor);
- var y = this.linesDown ? this.height - 20 : 0;
graphics.moveTo(x, y);
- graphics.lineTo(x, y + 20);
+ if (horizontalView){
+ graphics.lineTo(x, y + 20);
+ } else {
+ graphics.lineTo(x + 20, y);
+ }
graphics.endFill();
this.container.addChild(graphics);
// Add text
@@ -76,13 +101,22 @@
var fontObj = { font: '10pt Arial', fill: '#444444' };
var t = new PIXI.Text(timeStr, fontObj);
- t.x = x + 2;
- t.y = this.linesDown ? this.height - 15 : 2;
+ if (horizontalView){
+ t.x = x + 2;
+ t.y = this.linesDown ? this.height - 15 : 2;
+ } else {
+ t.x = this.linesDown ? 2 : this.width - 55;
+ t.y = y + 2;
+ }
this.container.addChild(t);
};
this.moveTo = function(diffTime){
- this.container.x = Math.floor(diffTime*this.pixelsPerSecond);
+ if (horizontalView){
+ this.container.x = Math.floor(diffTime*this.pixelsPerSecond);
+ } else {
+ this.container.y = Math.floor(diffTime*this.pixelsPerSecond);
+ }
};
this.removePassedObjets = function(){
@@ -90,28 +124,37 @@
var i = 0, childIsNowDisplayed = false, childrenToRemove = [];
while(i<nbChilds && !childIsNowDisplayed){
var child = _this.container.children[i++];
- //console.log("remove ? ", child.x, child.width, ((child.x + child.width) < (Math.abs(_this.container.x) - _this.width)));
if(typeof(child) == 'undefined') {
continue;
}
- if((child.x + child.width) < (Math.abs(_this.container.x) - _this.width)){
- childrenToRemove.push(child);
- //console.log(" remove !!!");
- }
- else {
- childIsNowDisplayed = true;
- //console.log(" childIsNowDisplayed");
+ if (horizontalView){
+ if((child.x + child.width) < (Math.abs(_this.container.x) - _this.width)){
+ childrenToRemove.push(child);
+ }
+ else {
+ childIsNowDisplayed = true;
+ }
+ } else {
+ if((child.y + child.height) < (Math.abs(_this.container.y) - _this.height)){
+ childrenToRemove.push(child);
+ }
+ else {
+ childIsNowDisplayed = true;
+ }
}
}
childrenToRemove.forEach(function(child) {
_this.container.removeChild(child);
});
- //console.log("before : ", nbChilds, ", after : ", _this.container.children.length);
};
// remove notes each scene width
//var removeInterval = window.setInterval(this.removePassedObjets, 1000 * sceneWidth / this.pixelsPerSecond );
- window.setInterval(this.removePassedObjets, 1000 * this.width / this.pixelsPerSecond );
+ if (horizontalView){
+ window.setInterval(this.removePassedObjets, 1000 * this.width / this.pixelsPerSecond );
+ } else {
+ window.setInterval(this.removePassedObjets, 1000 * this.height / this.pixelsPerSecond );
+ }
}