client/pianoroll/app/js/pianoroll.js
author rougeronj
Thu, 22 Jan 2015 09:26:43 +0100
changeset 111 a7b72620d227
parent 85 eff9460bd4f2
permissions -rw-r--r--
Add variable "wait". When this variable set, the annotsroll wait ignore some annotations, and wait before printing an otherone so there is no superposition. Can be passed as an options
Ignore whitespace changes - Everywhere: Within whitespace: At end of lines:
84
d7c5bffdd2d8 rework on pianoroll: extract in own app + "browserify"
ymh <ymh.work@gmail.com>
parents:
diff changeset
     1
/**
d7c5bffdd2d8 rework on pianoroll: extract in own app + "browserify"
ymh <ymh.work@gmail.com>
parents:
diff changeset
     2
* js/pianoroll.js
d7c5bffdd2d8 rework on pianoroll: extract in own app + "browserify"
ymh <ymh.work@gmail.com>
parents:
diff changeset
     3
*
d7c5bffdd2d8 rework on pianoroll: extract in own app + "browserify"
ymh <ymh.work@gmail.com>
parents:
diff changeset
     4
* pianoroll basic component
d7c5bffdd2d8 rework on pianoroll: extract in own app + "browserify"
ymh <ymh.work@gmail.com>
parents:
diff changeset
     5
*
d7c5bffdd2d8 rework on pianoroll: extract in own app + "browserify"
ymh <ymh.work@gmail.com>
parents:
diff changeset
     6
*/
d7c5bffdd2d8 rework on pianoroll: extract in own app + "browserify"
ymh <ymh.work@gmail.com>
parents:
diff changeset
     7
d7c5bffdd2d8 rework on pianoroll: extract in own app + "browserify"
ymh <ymh.work@gmail.com>
parents:
diff changeset
     8
'use strict';
d7c5bffdd2d8 rework on pianoroll: extract in own app + "browserify"
ymh <ymh.work@gmail.com>
parents:
diff changeset
     9
d7c5bffdd2d8 rework on pianoroll: extract in own app + "browserify"
ymh <ymh.work@gmail.com>
parents:
diff changeset
    10
var PIXI = require('pixi');
d7c5bffdd2d8 rework on pianoroll: extract in own app + "browserify"
ymh <ymh.work@gmail.com>
parents:
diff changeset
    11
var randomColor = require('randomColor');
d7c5bffdd2d8 rework on pianoroll: extract in own app + "browserify"
ymh <ymh.work@gmail.com>
parents:
diff changeset
    12
85
eff9460bd4f2 add new visualization + small corrections
ymh <ymh.work@gmail.com>
parents: 84
diff changeset
    13
function PianoRoll(parentContainer, xInit, yInit, height, linesDown, pixelsPerSecond, width, noteColors, colorsReg, lineColor, lineInterval, offsetMusic, noteHeight){
84
d7c5bffdd2d8 rework on pianoroll: extract in own app + "browserify"
ymh <ymh.work@gmail.com>
parents:
diff changeset
    14
    var _this = this;
d7c5bffdd2d8 rework on pianoroll: extract in own app + "browserify"
ymh <ymh.work@gmail.com>
parents:
diff changeset
    15
    this.container = new PIXI.DisplayObjectContainer();
d7c5bffdd2d8 rework on pianoroll: extract in own app + "browserify"
ymh <ymh.work@gmail.com>
parents:
diff changeset
    16
    this.container.position.x = xInit;
d7c5bffdd2d8 rework on pianoroll: extract in own app + "browserify"
ymh <ymh.work@gmail.com>
parents:
diff changeset
    17
    this.container.position.y = yInit;
d7c5bffdd2d8 rework on pianoroll: extract in own app + "browserify"
ymh <ymh.work@gmail.com>
parents:
diff changeset
    18
    parentContainer.addChild(this.container);
d7c5bffdd2d8 rework on pianoroll: extract in own app + "browserify"
ymh <ymh.work@gmail.com>
parents:
diff changeset
    19
d7c5bffdd2d8 rework on pianoroll: extract in own app + "browserify"
ymh <ymh.work@gmail.com>
parents:
diff changeset
    20
    this.linesDown = linesDown;
d7c5bffdd2d8 rework on pianoroll: extract in own app + "browserify"
ymh <ymh.work@gmail.com>
parents:
diff changeset
    21
    this.height = height;
d7c5bffdd2d8 rework on pianoroll: extract in own app + "browserify"
ymh <ymh.work@gmail.com>
parents:
diff changeset
    22
    this.pixelsPerSecond = pixelsPerSecond;
d7c5bffdd2d8 rework on pianoroll: extract in own app + "browserify"
ymh <ymh.work@gmail.com>
parents:
diff changeset
    23
    this.width = width;
d7c5bffdd2d8 rework on pianoroll: extract in own app + "browserify"
ymh <ymh.work@gmail.com>
parents:
diff changeset
    24
    this.noteColors = noteColors;
d7c5bffdd2d8 rework on pianoroll: extract in own app + "browserify"
ymh <ymh.work@gmail.com>
parents:
diff changeset
    25
    this.colorsReg = colorsReg || {};
d7c5bffdd2d8 rework on pianoroll: extract in own app + "browserify"
ymh <ymh.work@gmail.com>
parents:
diff changeset
    26
    this.lineColor = lineColor;
d7c5bffdd2d8 rework on pianoroll: extract in own app + "browserify"
ymh <ymh.work@gmail.com>
parents:
diff changeset
    27
    this.lineInterval = lineInterval;
85
eff9460bd4f2 add new visualization + small corrections
ymh <ymh.work@gmail.com>
parents: 84
diff changeset
    28
    this.offsetMusic = offsetMusic || 0;
eff9460bd4f2 add new visualization + small corrections
ymh <ymh.work@gmail.com>
parents: 84
diff changeset
    29
    this.noteHeight = noteHeight;
84
d7c5bffdd2d8 rework on pianoroll: extract in own app + "browserify"
ymh <ymh.work@gmail.com>
parents:
diff changeset
    30
d7c5bffdd2d8 rework on pianoroll: extract in own app + "browserify"
ymh <ymh.work@gmail.com>
parents:
diff changeset
    31
    this.addNote = function(note, startTime, duration, velocity, canal){
d7c5bffdd2d8 rework on pianoroll: extract in own app + "browserify"
ymh <ymh.work@gmail.com>
parents:
diff changeset
    32
        //console.log("coucou 1", note, timeFromZero, ts, velocity, pixelsPerSecond, container, prHeight);
85
eff9460bd4f2 add new visualization + small corrections
ymh <ymh.work@gmail.com>
parents: 84
diff changeset
    33
        var beginX = (this.offsetMusic + startTime) * this.pixelsPerSecond / 1000;
84
d7c5bffdd2d8 rework on pianoroll: extract in own app + "browserify"
ymh <ymh.work@gmail.com>
parents:
diff changeset
    34
        var width = duration * this.pixelsPerSecond / 1000;
85
eff9460bd4f2 add new visualization + small corrections
ymh <ymh.work@gmail.com>
parents: 84
diff changeset
    35
        if((beginX+width) <  Math.abs(this.container.x) - this.width) {
eff9460bd4f2 add new visualization + small corrections
ymh <ymh.work@gmail.com>
parents: 84
diff changeset
    36
            // not visible. do nothing
eff9460bd4f2 add new visualization + small corrections
ymh <ymh.work@gmail.com>
parents: 84
diff changeset
    37
            return;
eff9460bd4f2 add new visualization + small corrections
ymh <ymh.work@gmail.com>
parents: 84
diff changeset
    38
        }
84
d7c5bffdd2d8 rework on pianoroll: extract in own app + "browserify"
ymh <ymh.work@gmail.com>
parents:
diff changeset
    39
        // We draw the rectangle
d7c5bffdd2d8 rework on pianoroll: extract in own app + "browserify"
ymh <ymh.work@gmail.com>
parents:
diff changeset
    40
        var graphics = new PIXI.Graphics();
d7c5bffdd2d8 rework on pianoroll: extract in own app + "browserify"
ymh <ymh.work@gmail.com>
parents:
diff changeset
    41
        //console.log("beginX = ", beginX, "canal = ", canal, "color = ", noteColor[canal], "width = ", width, "note = ", note, "velocity = ", velocity);
d7c5bffdd2d8 rework on pianoroll: extract in own app + "browserify"
ymh <ymh.work@gmail.com>
parents:
diff changeset
    42
        var color = this.colorsReg[canal];
d7c5bffdd2d8 rework on pianoroll: extract in own app + "browserify"
ymh <ymh.work@gmail.com>
parents:
diff changeset
    43
        if(typeof(color) === 'undefined') {
d7c5bffdd2d8 rework on pianoroll: extract in own app + "browserify"
ymh <ymh.work@gmail.com>
parents:
diff changeset
    44
            var colorsRegSize = Object.keys(this.colorsReg).length;
d7c5bffdd2d8 rework on pianoroll: extract in own app + "browserify"
ymh <ymh.work@gmail.com>
parents:
diff changeset
    45
            if(colorsRegSize < this.noteColors.length) {
d7c5bffdd2d8 rework on pianoroll: extract in own app + "browserify"
ymh <ymh.work@gmail.com>
parents:
diff changeset
    46
                color = this.colorsReg[canal] = this.noteColors[colorsRegSize];
d7c5bffdd2d8 rework on pianoroll: extract in own app + "browserify"
ymh <ymh.work@gmail.com>
parents:
diff changeset
    47
            }
d7c5bffdd2d8 rework on pianoroll: extract in own app + "browserify"
ymh <ymh.work@gmail.com>
parents:
diff changeset
    48
            else {
d7c5bffdd2d8 rework on pianoroll: extract in own app + "browserify"
ymh <ymh.work@gmail.com>
parents:
diff changeset
    49
                color = this.colorsReg[canal] = parseInt(randomColor({ luminosity: 'light', hue: 'random', format:'hex'}).replace(/^#/, ''), 16);
d7c5bffdd2d8 rework on pianoroll: extract in own app + "browserify"
ymh <ymh.work@gmail.com>
parents:
diff changeset
    50
            }
d7c5bffdd2d8 rework on pianoroll: extract in own app + "browserify"
ymh <ymh.work@gmail.com>
parents:
diff changeset
    51
        }
d7c5bffdd2d8 rework on pianoroll: extract in own app + "browserify"
ymh <ymh.work@gmail.com>
parents:
diff changeset
    52
        graphics.beginFill(color, (velocity / 128));
d7c5bffdd2d8 rework on pianoroll: extract in own app + "browserify"
ymh <ymh.work@gmail.com>
parents:
diff changeset
    53
        var y = (128-note) * this.height / 128; // (128-note) because y = 0 is for note = 128 and y = 128 for note = 0
d7c5bffdd2d8 rework on pianoroll: extract in own app + "browserify"
ymh <ymh.work@gmail.com>
parents:
diff changeset
    54
        graphics.drawRect(0, Math.floor(y - (noteHeight/2) + ((this.height / 128)/2)), width, noteHeight);
d7c5bffdd2d8 rework on pianoroll: extract in own app + "browserify"
ymh <ymh.work@gmail.com>
parents:
diff changeset
    55
        graphics.endFill();
d7c5bffdd2d8 rework on pianoroll: extract in own app + "browserify"
ymh <ymh.work@gmail.com>
parents:
diff changeset
    56
        graphics.x = beginX;
d7c5bffdd2d8 rework on pianoroll: extract in own app + "browserify"
ymh <ymh.work@gmail.com>
parents:
diff changeset
    57
        this.container.addChild(graphics);
d7c5bffdd2d8 rework on pianoroll: extract in own app + "browserify"
ymh <ymh.work@gmail.com>
parents:
diff changeset
    58
    };
d7c5bffdd2d8 rework on pianoroll: extract in own app + "browserify"
ymh <ymh.work@gmail.com>
parents:
diff changeset
    59
d7c5bffdd2d8 rework on pianoroll: extract in own app + "browserify"
ymh <ymh.work@gmail.com>
parents:
diff changeset
    60
    this.addLine = function(lineNb){
d7c5bffdd2d8 rework on pianoroll: extract in own app + "browserify"
ymh <ymh.work@gmail.com>
parents:
diff changeset
    61
        var graphics = new PIXI.Graphics();
d7c5bffdd2d8 rework on pianoroll: extract in own app + "browserify"
ymh <ymh.work@gmail.com>
parents:
diff changeset
    62
        var x = -this.container.x;
d7c5bffdd2d8 rework on pianoroll: extract in own app + "browserify"
ymh <ymh.work@gmail.com>
parents:
diff changeset
    63
        graphics.beginFill(0xFFFF00);
d7c5bffdd2d8 rework on pianoroll: extract in own app + "browserify"
ymh <ymh.work@gmail.com>
parents:
diff changeset
    64
        graphics.lineStyle(1, this.lineColor);
d7c5bffdd2d8 rework on pianoroll: extract in own app + "browserify"
ymh <ymh.work@gmail.com>
parents:
diff changeset
    65
        var y = this.linesDown ? this.height - 20 : 0;
d7c5bffdd2d8 rework on pianoroll: extract in own app + "browserify"
ymh <ymh.work@gmail.com>
parents:
diff changeset
    66
        graphics.moveTo(x, y);
d7c5bffdd2d8 rework on pianoroll: extract in own app + "browserify"
ymh <ymh.work@gmail.com>
parents:
diff changeset
    67
        graphics.lineTo(x, y + 20);
d7c5bffdd2d8 rework on pianoroll: extract in own app + "browserify"
ymh <ymh.work@gmail.com>
parents:
diff changeset
    68
        graphics.endFill();
d7c5bffdd2d8 rework on pianoroll: extract in own app + "browserify"
ymh <ymh.work@gmail.com>
parents:
diff changeset
    69
        this.container.addChild(graphics);
d7c5bffdd2d8 rework on pianoroll: extract in own app + "browserify"
ymh <ymh.work@gmail.com>
parents:
diff changeset
    70
        // Add text
d7c5bffdd2d8 rework on pianoroll: extract in own app + "browserify"
ymh <ymh.work@gmail.com>
parents:
diff changeset
    71
        var totalSec = lineNb * this.lineInterval / 1000;
d7c5bffdd2d8 rework on pianoroll: extract in own app + "browserify"
ymh <ymh.work@gmail.com>
parents:
diff changeset
    72
        var hours = parseInt( totalSec / 3600 ) % 24;
d7c5bffdd2d8 rework on pianoroll: extract in own app + "browserify"
ymh <ymh.work@gmail.com>
parents:
diff changeset
    73
        var minutes = parseInt( totalSec / 60 ) % 60;
d7c5bffdd2d8 rework on pianoroll: extract in own app + "browserify"
ymh <ymh.work@gmail.com>
parents:
diff changeset
    74
        var seconds = totalSec % 60;
d7c5bffdd2d8 rework on pianoroll: extract in own app + "browserify"
ymh <ymh.work@gmail.com>
parents:
diff changeset
    75
        var timeStr = (hours < 10 ? '0' + hours : hours) + ':' + (minutes < 10 ? '0' + minutes : minutes) + ':' + (seconds  < 10 ? '0' + seconds : seconds);
d7c5bffdd2d8 rework on pianoroll: extract in own app + "browserify"
ymh <ymh.work@gmail.com>
parents:
diff changeset
    76
        var fontObj = { font: '10pt Arial', fill: '#444444' };
d7c5bffdd2d8 rework on pianoroll: extract in own app + "browserify"
ymh <ymh.work@gmail.com>
parents:
diff changeset
    77
        var t = new PIXI.Text(timeStr, fontObj);
d7c5bffdd2d8 rework on pianoroll: extract in own app + "browserify"
ymh <ymh.work@gmail.com>
parents:
diff changeset
    78
        t.x = x + 2;
d7c5bffdd2d8 rework on pianoroll: extract in own app + "browserify"
ymh <ymh.work@gmail.com>
parents:
diff changeset
    79
        t.y = this.linesDown ? this.height - 15 : 2;
d7c5bffdd2d8 rework on pianoroll: extract in own app + "browserify"
ymh <ymh.work@gmail.com>
parents:
diff changeset
    80
        this.container.addChild(t);
d7c5bffdd2d8 rework on pianoroll: extract in own app + "browserify"
ymh <ymh.work@gmail.com>
parents:
diff changeset
    81
    };
d7c5bffdd2d8 rework on pianoroll: extract in own app + "browserify"
ymh <ymh.work@gmail.com>
parents:
diff changeset
    82
d7c5bffdd2d8 rework on pianoroll: extract in own app + "browserify"
ymh <ymh.work@gmail.com>
parents:
diff changeset
    83
    this.moveTo = function(diffTime){
d7c5bffdd2d8 rework on pianoroll: extract in own app + "browserify"
ymh <ymh.work@gmail.com>
parents:
diff changeset
    84
        this.container.x = Math.floor(diffTime*this.pixelsPerSecond);
d7c5bffdd2d8 rework on pianoroll: extract in own app + "browserify"
ymh <ymh.work@gmail.com>
parents:
diff changeset
    85
    };
d7c5bffdd2d8 rework on pianoroll: extract in own app + "browserify"
ymh <ymh.work@gmail.com>
parents:
diff changeset
    86
d7c5bffdd2d8 rework on pianoroll: extract in own app + "browserify"
ymh <ymh.work@gmail.com>
parents:
diff changeset
    87
    this.removePassedObjets = function(){
d7c5bffdd2d8 rework on pianoroll: extract in own app + "browserify"
ymh <ymh.work@gmail.com>
parents:
diff changeset
    88
        var nbChilds = _this.container.children.length;
85
eff9460bd4f2 add new visualization + small corrections
ymh <ymh.work@gmail.com>
parents: 84
diff changeset
    89
        var i = 0, childIsNowDisplayed = false, childrenToRemove = [];
84
d7c5bffdd2d8 rework on pianoroll: extract in own app + "browserify"
ymh <ymh.work@gmail.com>
parents:
diff changeset
    90
        while(i<nbChilds && !childIsNowDisplayed){
85
eff9460bd4f2 add new visualization + small corrections
ymh <ymh.work@gmail.com>
parents: 84
diff changeset
    91
            var child = _this.container.children[i++];
84
d7c5bffdd2d8 rework on pianoroll: extract in own app + "browserify"
ymh <ymh.work@gmail.com>
parents:
diff changeset
    92
            //console.log("remove ? ", child.x, child.width, ((child.x + child.width) < (Math.abs(_this.container.x) - _this.width)));
85
eff9460bd4f2 add new visualization + small corrections
ymh <ymh.work@gmail.com>
parents: 84
diff changeset
    93
            if(typeof(child) == 'undefined') {
eff9460bd4f2 add new visualization + small corrections
ymh <ymh.work@gmail.com>
parents: 84
diff changeset
    94
                continue;
eff9460bd4f2 add new visualization + small corrections
ymh <ymh.work@gmail.com>
parents: 84
diff changeset
    95
            }
84
d7c5bffdd2d8 rework on pianoroll: extract in own app + "browserify"
ymh <ymh.work@gmail.com>
parents:
diff changeset
    96
            if((child.x + child.width) < (Math.abs(_this.container.x) - _this.width)){
85
eff9460bd4f2 add new visualization + small corrections
ymh <ymh.work@gmail.com>
parents: 84
diff changeset
    97
                childrenToRemove.push(child);
84
d7c5bffdd2d8 rework on pianoroll: extract in own app + "browserify"
ymh <ymh.work@gmail.com>
parents:
diff changeset
    98
                //console.log("    remove !!!");
d7c5bffdd2d8 rework on pianoroll: extract in own app + "browserify"
ymh <ymh.work@gmail.com>
parents:
diff changeset
    99
            }
85
eff9460bd4f2 add new visualization + small corrections
ymh <ymh.work@gmail.com>
parents: 84
diff changeset
   100
            else {
84
d7c5bffdd2d8 rework on pianoroll: extract in own app + "browserify"
ymh <ymh.work@gmail.com>
parents:
diff changeset
   101
                childIsNowDisplayed = true;
d7c5bffdd2d8 rework on pianoroll: extract in own app + "browserify"
ymh <ymh.work@gmail.com>
parents:
diff changeset
   102
                //console.log("    childIsNowDisplayed");
d7c5bffdd2d8 rework on pianoroll: extract in own app + "browserify"
ymh <ymh.work@gmail.com>
parents:
diff changeset
   103
            }
d7c5bffdd2d8 rework on pianoroll: extract in own app + "browserify"
ymh <ymh.work@gmail.com>
parents:
diff changeset
   104
        }
85
eff9460bd4f2 add new visualization + small corrections
ymh <ymh.work@gmail.com>
parents: 84
diff changeset
   105
        childrenToRemove.forEach(function(child) {
eff9460bd4f2 add new visualization + small corrections
ymh <ymh.work@gmail.com>
parents: 84
diff changeset
   106
            _this.container.removeChild(child);
eff9460bd4f2 add new visualization + small corrections
ymh <ymh.work@gmail.com>
parents: 84
diff changeset
   107
        });
84
d7c5bffdd2d8 rework on pianoroll: extract in own app + "browserify"
ymh <ymh.work@gmail.com>
parents:
diff changeset
   108
        //console.log("before : ", nbChilds, ", after : ", _this.container.children.length);
d7c5bffdd2d8 rework on pianoroll: extract in own app + "browserify"
ymh <ymh.work@gmail.com>
parents:
diff changeset
   109
    };
d7c5bffdd2d8 rework on pianoroll: extract in own app + "browserify"
ymh <ymh.work@gmail.com>
parents:
diff changeset
   110
d7c5bffdd2d8 rework on pianoroll: extract in own app + "browserify"
ymh <ymh.work@gmail.com>
parents:
diff changeset
   111
    // remove notes each scene width
d7c5bffdd2d8 rework on pianoroll: extract in own app + "browserify"
ymh <ymh.work@gmail.com>
parents:
diff changeset
   112
    //var removeInterval = window.setInterval(this.removePassedObjets, 1000 * sceneWidth / this.pixelsPerSecond );
d7c5bffdd2d8 rework on pianoroll: extract in own app + "browserify"
ymh <ymh.work@gmail.com>
parents:
diff changeset
   113
    window.setInterval(this.removePassedObjets, 1000 * this.width / this.pixelsPerSecond );
d7c5bffdd2d8 rework on pianoroll: extract in own app + "browserify"
ymh <ymh.work@gmail.com>
parents:
diff changeset
   114
d7c5bffdd2d8 rework on pianoroll: extract in own app + "browserify"
ymh <ymh.work@gmail.com>
parents:
diff changeset
   115
}
d7c5bffdd2d8 rework on pianoroll: extract in own app + "browserify"
ymh <ymh.work@gmail.com>
parents:
diff changeset
   116
d7c5bffdd2d8 rework on pianoroll: extract in own app + "browserify"
ymh <ymh.work@gmail.com>
parents:
diff changeset
   117
module.exports = PianoRoll;