client/annotviz/app/js/pianoroll.js
author rougeronj
Thu, 22 Jan 2015 09:26:43 +0100
changeset 111 a7b72620d227
parent 103 123a611c7903
child 120 89544c28a364
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:
85
eff9460bd4f2 add new visualization + small corrections
ymh <ymh.work@gmail.com>
parents:
diff changeset
     1
/**
eff9460bd4f2 add new visualization + small corrections
ymh <ymh.work@gmail.com>
parents:
diff changeset
     2
* js/pianoroll.js
eff9460bd4f2 add new visualization + small corrections
ymh <ymh.work@gmail.com>
parents:
diff changeset
     3
*
eff9460bd4f2 add new visualization + small corrections
ymh <ymh.work@gmail.com>
parents:
diff changeset
     4
* pianoroll basic component
eff9460bd4f2 add new visualization + small corrections
ymh <ymh.work@gmail.com>
parents:
diff changeset
     5
*
eff9460bd4f2 add new visualization + small corrections
ymh <ymh.work@gmail.com>
parents:
diff changeset
     6
*/
eff9460bd4f2 add new visualization + small corrections
ymh <ymh.work@gmail.com>
parents:
diff changeset
     7
eff9460bd4f2 add new visualization + small corrections
ymh <ymh.work@gmail.com>
parents:
diff changeset
     8
'use strict';
eff9460bd4f2 add new visualization + small corrections
ymh <ymh.work@gmail.com>
parents:
diff changeset
     9
93
79ae42ad97d4 optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents: 85
diff changeset
    10
85
eff9460bd4f2 add new visualization + small corrections
ymh <ymh.work@gmail.com>
parents:
diff changeset
    11
var PIXI = require('pixi');
eff9460bd4f2 add new visualization + small corrections
ymh <ymh.work@gmail.com>
parents:
diff changeset
    12
var randomColor = require('randomColor');
93
79ae42ad97d4 optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents: 85
diff changeset
    13
var _ = require('lodash');
85
eff9460bd4f2 add new visualization + small corrections
ymh <ymh.work@gmail.com>
parents:
diff changeset
    14
98
72d767c5142d refactor and make work annotsroll
ymh <ymh.work@gmail.com>
parents: 96
diff changeset
    15
var NTP_EPOCH_DELTA = 2208988800; //c.f. RFC 868
93
79ae42ad97d4 optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents: 85
diff changeset
    16
79ae42ad97d4 optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents: 85
diff changeset
    17
function PianoRoll(options) {
85
eff9460bd4f2 add new visualization + small corrections
ymh <ymh.work@gmail.com>
parents:
diff changeset
    18
    var _this = this;
eff9460bd4f2 add new visualization + small corrections
ymh <ymh.work@gmail.com>
parents:
diff changeset
    19
    this.container = new PIXI.DisplayObjectContainer();
94
e0e514c5470f create doubleroll component and modularize app
ymh <ymh.work@gmail.com>
parents: 93
diff changeset
    20
    this.container.x = options.xInit;
e0e514c5470f create doubleroll component and modularize app
ymh <ymh.work@gmail.com>
parents: 93
diff changeset
    21
    this.container.y = options.yInit;
93
79ae42ad97d4 optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents: 85
diff changeset
    22
    options.parentContainer.addChild(this.container);
85
eff9460bd4f2 add new visualization + small corrections
ymh <ymh.work@gmail.com>
parents:
diff changeset
    23
95
806739a26858 add vertical version for pianoroll
ymh <ymh.work@gmail.com>
parents: 94
diff changeset
    24
    var orientation = options.orientation;
806739a26858 add vertical version for pianoroll
ymh <ymh.work@gmail.com>
parents: 94
diff changeset
    25
    var isHorizontal = (orientation !== 'vertical');
85
eff9460bd4f2 add new visualization + small corrections
ymh <ymh.work@gmail.com>
parents:
diff changeset
    26
93
79ae42ad97d4 optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents: 85
diff changeset
    27
    this.linesDown = options.linesDown;
79ae42ad97d4 optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents: 85
diff changeset
    28
    this.height = options.height;
79ae42ad97d4 optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents: 85
diff changeset
    29
    this.pixelsPerSecond = options.pixelsPerSecond;
79ae42ad97d4 optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents: 85
diff changeset
    30
    this.width = options.width;
79ae42ad97d4 optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents: 85
diff changeset
    31
    this.noteColors = options.noteColors;
79ae42ad97d4 optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents: 85
diff changeset
    32
    this.colorsReg = options.colorsReg || {};
79ae42ad97d4 optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents: 85
diff changeset
    33
    this.lineColor = options.lineColor;
79ae42ad97d4 optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents: 85
diff changeset
    34
    this.lineInterval = options.lineInterval;
79ae42ad97d4 optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents: 85
diff changeset
    35
    this.offsetMusic = options.offsetMusic || false;
79ae42ad97d4 optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents: 85
diff changeset
    36
    this.noteHeight = options.noteHeight;
79ae42ad97d4 optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents: 85
diff changeset
    37
    this.noteDict = {};
79ae42ad97d4 optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents: 85
diff changeset
    38
    this.startTs = options.startTs || Date.now();
85
eff9460bd4f2 add new visualization + small corrections
ymh <ymh.work@gmail.com>
parents:
diff changeset
    39
94
e0e514c5470f create doubleroll component and modularize app
ymh <ymh.work@gmail.com>
parents: 93
diff changeset
    40
    var started = false;
e0e514c5470f create doubleroll component and modularize app
ymh <ymh.work@gmail.com>
parents: 93
diff changeset
    41
95
806739a26858 add vertical version for pianoroll
ymh <ymh.work@gmail.com>
parents: 94
diff changeset
    42
    var isHidden = function(child) {
806739a26858 add vertical version for pianoroll
ymh <ymh.work@gmail.com>
parents: 94
diff changeset
    43
        // TODO: the origin point is an approximation. Should refine this
806739a26858 add vertical version for pianoroll
ymh <ymh.work@gmail.com>
parents: 94
diff changeset
    44
        var globalPos = child.toGlobal(new PIXI.Point(0,0));
806739a26858 add vertical version for pianoroll
ymh <ymh.work@gmail.com>
parents: 94
diff changeset
    45
        return ((globalPos.x + child.width) < 0) || ((globalPos.y + child.height) < 0) ;
806739a26858 add vertical version for pianoroll
ymh <ymh.work@gmail.com>
parents: 94
diff changeset
    46
    };
93
79ae42ad97d4 optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents: 85
diff changeset
    47
79ae42ad97d4 optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents: 85
diff changeset
    48
    //TODO: I do not like the "regColor" object. This should not be global, but local
79ae42ad97d4 optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents: 85
diff changeset
    49
    this.getColor = function(canal) {
85
eff9460bd4f2 add new visualization + small corrections
ymh <ymh.work@gmail.com>
parents:
diff changeset
    50
        var color = this.colorsReg[canal];
eff9460bd4f2 add new visualization + small corrections
ymh <ymh.work@gmail.com>
parents:
diff changeset
    51
        if(typeof(color) === 'undefined') {
eff9460bd4f2 add new visualization + small corrections
ymh <ymh.work@gmail.com>
parents:
diff changeset
    52
            var colorsRegSize = Object.keys(this.colorsReg).length;
eff9460bd4f2 add new visualization + small corrections
ymh <ymh.work@gmail.com>
parents:
diff changeset
    53
            if(colorsRegSize < this.noteColors.length) {
eff9460bd4f2 add new visualization + small corrections
ymh <ymh.work@gmail.com>
parents:
diff changeset
    54
                color = this.colorsReg[canal] = this.noteColors[colorsRegSize];
eff9460bd4f2 add new visualization + small corrections
ymh <ymh.work@gmail.com>
parents:
diff changeset
    55
            }
eff9460bd4f2 add new visualization + small corrections
ymh <ymh.work@gmail.com>
parents:
diff changeset
    56
            else {
eff9460bd4f2 add new visualization + small corrections
ymh <ymh.work@gmail.com>
parents:
diff changeset
    57
                color = this.colorsReg[canal] = parseInt(randomColor({ luminosity: 'light', hue: 'random', format:'hex'}).replace(/^#/, ''), 16);
eff9460bd4f2 add new visualization + small corrections
ymh <ymh.work@gmail.com>
parents:
diff changeset
    58
            }
eff9460bd4f2 add new visualization + small corrections
ymh <ymh.work@gmail.com>
parents:
diff changeset
    59
        }
93
79ae42ad97d4 optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents: 85
diff changeset
    60
        return color;
79ae42ad97d4 optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents: 85
diff changeset
    61
    };
79ae42ad97d4 optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents: 85
diff changeset
    62
79ae42ad97d4 optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents: 85
diff changeset
    63
    this.getNoteRect = function(x, y, color, alpha, width, height) {
79ae42ad97d4 optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents: 85
diff changeset
    64
        var graphics = new PIXI.Graphics();
79ae42ad97d4 optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents: 85
diff changeset
    65
        graphics.beginFill(color, alpha);
79ae42ad97d4 optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents: 85
diff changeset
    66
        graphics.drawRect(0, 0, width, height);
85
eff9460bd4f2 add new visualization + small corrections
ymh <ymh.work@gmail.com>
parents:
diff changeset
    67
        graphics.endFill();
93
79ae42ad97d4 optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents: 85
diff changeset
    68
        graphics.x = x;
79ae42ad97d4 optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents: 85
diff changeset
    69
        graphics.y = y;
79ae42ad97d4 optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents: 85
diff changeset
    70
        graphics.width = width;
79ae42ad97d4 optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents: 85
diff changeset
    71
        graphics.height = height;
79ae42ad97d4 optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents: 85
diff changeset
    72
        return graphics;
79ae42ad97d4 optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents: 85
diff changeset
    73
    };
79ae42ad97d4 optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents: 85
diff changeset
    74
98
72d767c5142d refactor and make work annotsroll
ymh <ymh.work@gmail.com>
parents: 96
diff changeset
    75
    this.addNoteRaw = function(data) {
103
123a611c7903 minor update of options and add annotsvizview
rougeronj
parents: 98
diff changeset
    76
    	console.log(data);
98
72d767c5142d refactor and make work annotsroll
ymh <ymh.work@gmail.com>
parents: 96
diff changeset
    77
        var note = data.content[3];
72d767c5142d refactor and make work annotsroll
ymh <ymh.work@gmail.com>
parents: 96
diff changeset
    78
        var velocity = data.content[4];
72d767c5142d refactor and make work annotsroll
ymh <ymh.work@gmail.com>
parents: 96
diff changeset
    79
        var ts = (data.content[0] - NTP_EPOCH_DELTA)*1000;
72d767c5142d refactor and make work annotsroll
ymh <ymh.work@gmail.com>
parents: 96
diff changeset
    80
        var channel = data.content[2];
72d767c5142d refactor and make work annotsroll
ymh <ymh.work@gmail.com>
parents: 96
diff changeset
    81
        var sessionTs = data.content[1];
72d767c5142d refactor and make work annotsroll
ymh <ymh.work@gmail.com>
parents: 96
diff changeset
    82
72d767c5142d refactor and make work annotsroll
ymh <ymh.work@gmail.com>
parents: 96
diff changeset
    83
        this.addNote(note, ts, sessionTs, velocity, channel, 0);
72d767c5142d refactor and make work annotsroll
ymh <ymh.work@gmail.com>
parents: 96
diff changeset
    84
    };
72d767c5142d refactor and make work annotsroll
ymh <ymh.work@gmail.com>
parents: 96
diff changeset
    85
93
79ae42ad97d4 optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents: 85
diff changeset
    86
    this.addNote = function(note, startTime, sessionTs, velocity, channel, duration) {
79ae42ad97d4 optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents: 85
diff changeset
    87
79ae42ad97d4 optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents: 85
diff changeset
    88
        var ts = startTime;
79ae42ad97d4 optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents: 85
diff changeset
    89
        if(this.offsetMusic) {
79ae42ad97d4 optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents: 85
diff changeset
    90
            ts = this.startTs + sessionTs;
89
b4bd49f01837 add annotsRoll class and create it in main. Adapt main and pianoroll to allow horizontal or vertical view
rougeronj
parents: 85
diff changeset
    91
        }
93
79ae42ad97d4 optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents: 85
diff changeset
    92
79ae42ad97d4 optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents: 85
diff changeset
    93
        var noteDuration = duration;
79ae42ad97d4 optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents: 85
diff changeset
    94
        var noteVelocity = velocity;
79ae42ad97d4 optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents: 85
diff changeset
    95
        var graphics;
79ae42ad97d4 optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents: 85
diff changeset
    96
        if(!duration) {
79ae42ad97d4 optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents: 85
diff changeset
    97
            if(typeof this.noteDict[channel]==='undefined'){
79ae42ad97d4 optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents: 85
diff changeset
    98
                this.noteDict[channel] = {};
79ae42ad97d4 optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents: 85
diff changeset
    99
            }
79ae42ad97d4 optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents: 85
diff changeset
   100
            if(velocity===0) {
79ae42ad97d4 optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents: 85
diff changeset
   101
                if(typeof this.noteDict[channel][note] !== 'undefined') {
79ae42ad97d4 optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents: 85
diff changeset
   102
                    var noteDef = this.noteDict[channel][note];
79ae42ad97d4 optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents: 85
diff changeset
   103
                    delete this.noteDict[channel][note];
79ae42ad97d4 optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents: 85
diff changeset
   104
                    noteDuration = sessionTs - noteDef.sessionTs;
79ae42ad97d4 optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents: 85
diff changeset
   105
                    graphics = noteDef.graphics;
79ae42ad97d4 optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents: 85
diff changeset
   106
                    noteVelocity = noteDef.velocity;
79ae42ad97d4 optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents: 85
diff changeset
   107
                    ts = noteDef.ts;
79ae42ad97d4 optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents: 85
diff changeset
   108
                }
79ae42ad97d4 optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents: 85
diff changeset
   109
            }
79ae42ad97d4 optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents: 85
diff changeset
   110
            else {
79ae42ad97d4 optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents: 85
diff changeset
   111
                noteDuration = Date.now() - ts;
79ae42ad97d4 optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents: 85
diff changeset
   112
                this.noteDict[channel][note] = { ts: ts, velocity: velocity, sessionTs: sessionTs};
79ae42ad97d4 optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents: 85
diff changeset
   113
            }
79ae42ad97d4 optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents: 85
diff changeset
   114
        }
79ae42ad97d4 optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents: 85
diff changeset
   115
79ae42ad97d4 optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents: 85
diff changeset
   116
79ae42ad97d4 optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents: 85
diff changeset
   117
        if(!this.offsetMusic || velocity===0) {
79ae42ad97d4 optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents: 85
diff changeset
   118
79ae42ad97d4 optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents: 85
diff changeset
   119
            var width = noteDuration * this.pixelsPerSecond / 1000;
79ae42ad97d4 optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents: 85
diff changeset
   120
            if(!graphics) {
79ae42ad97d4 optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents: 85
diff changeset
   121
                var x = (ts-this.startTs) * this.pixelsPerSecond / 1000;
79ae42ad97d4 optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents: 85
diff changeset
   122
                if((x+width) <  (Math.abs(this.container.x) - this.width)) {
79ae42ad97d4 optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents: 85
diff changeset
   123
                    // not visible. do nothing
79ae42ad97d4 optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents: 85
diff changeset
   124
                    return;
79ae42ad97d4 optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents: 85
diff changeset
   125
                }
79ae42ad97d4 optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents: 85
diff changeset
   126
                var y = Math.floor((128-note+0.5) * this.height / 128 - (this.noteHeight/2));
79ae42ad97d4 optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents: 85
diff changeset
   127
                var color = this.getColor(channel);
79ae42ad97d4 optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents: 85
diff changeset
   128
                var alpha = (noteVelocity / 128);
79ae42ad97d4 optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents: 85
diff changeset
   129
79ae42ad97d4 optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents: 85
diff changeset
   130
                graphics = this.getNoteRect(x, y, color, alpha, width, this.noteHeight);
79ae42ad97d4 optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents: 85
diff changeset
   131
                this.container.addChild(graphics);
79ae42ad97d4 optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents: 85
diff changeset
   132
            }
79ae42ad97d4 optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents: 85
diff changeset
   133
            else {
79ae42ad97d4 optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents: 85
diff changeset
   134
                graphics.width = width;
79ae42ad97d4 optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents: 85
diff changeset
   135
            }
79ae42ad97d4 optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents: 85
diff changeset
   136
79ae42ad97d4 optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents: 85
diff changeset
   137
            if(!duration && velocity) {
79ae42ad97d4 optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents: 85
diff changeset
   138
                this.noteDict[channel][note].graphics = graphics;
79ae42ad97d4 optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents: 85
diff changeset
   139
            }
79ae42ad97d4 optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents: 85
diff changeset
   140
        }
85
eff9460bd4f2 add new visualization + small corrections
ymh <ymh.work@gmail.com>
parents:
diff changeset
   141
    };
eff9460bd4f2 add new visualization + small corrections
ymh <ymh.work@gmail.com>
parents:
diff changeset
   142
eff9460bd4f2 add new visualization + small corrections
ymh <ymh.work@gmail.com>
parents:
diff changeset
   143
    this.addLine = function(ts){
93
79ae42ad97d4 optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents: 85
diff changeset
   144
79ae42ad97d4 optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents: 85
diff changeset
   145
        if(typeof(ts) === 'undefined') {
79ae42ad97d4 optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents: 85
diff changeset
   146
            ts = new Date();
89
b4bd49f01837 add annotsRoll class and create it in main. Adapt main and pianoroll to allow horizontal or vertical view
rougeronj
parents: 85
diff changeset
   147
        }
85
eff9460bd4f2 add new visualization + small corrections
ymh <ymh.work@gmail.com>
parents:
diff changeset
   148
        var x = -this.container.x;
eff9460bd4f2 add new visualization + small corrections
ymh <ymh.work@gmail.com>
parents:
diff changeset
   149
        var y = this.linesDown ? this.height - 20 : 0;
95
806739a26858 add vertical version for pianoroll
ymh <ymh.work@gmail.com>
parents: 94
diff changeset
   150
806739a26858 add vertical version for pianoroll
ymh <ymh.work@gmail.com>
parents: 94
diff changeset
   151
        var graphics = new PIXI.Graphics()
806739a26858 add vertical version for pianoroll
ymh <ymh.work@gmail.com>
parents: 94
diff changeset
   152
            .beginFill(0xFFFF00)
806739a26858 add vertical version for pianoroll
ymh <ymh.work@gmail.com>
parents: 94
diff changeset
   153
            .lineStyle(1, this.lineColor)
806739a26858 add vertical version for pianoroll
ymh <ymh.work@gmail.com>
parents: 94
diff changeset
   154
            .moveTo(0, 0)
806739a26858 add vertical version for pianoroll
ymh <ymh.work@gmail.com>
parents: 94
diff changeset
   155
            .lineTo(0, 20)
806739a26858 add vertical version for pianoroll
ymh <ymh.work@gmail.com>
parents: 94
diff changeset
   156
            .endFill();
806739a26858 add vertical version for pianoroll
ymh <ymh.work@gmail.com>
parents: 94
diff changeset
   157
        graphics.x = x;
806739a26858 add vertical version for pianoroll
ymh <ymh.work@gmail.com>
parents: 94
diff changeset
   158
        graphics.y = y;
85
eff9460bd4f2 add new visualization + small corrections
ymh <ymh.work@gmail.com>
parents:
diff changeset
   159
        this.container.addChild(graphics);
eff9460bd4f2 add new visualization + small corrections
ymh <ymh.work@gmail.com>
parents:
diff changeset
   160
        // Add text
eff9460bd4f2 add new visualization + small corrections
ymh <ymh.work@gmail.com>
parents:
diff changeset
   161
        //var totalSec = lineNb * this.lineInterval / 1000;
eff9460bd4f2 add new visualization + small corrections
ymh <ymh.work@gmail.com>
parents:
diff changeset
   162
        var hours = ts.getHours();
eff9460bd4f2 add new visualization + small corrections
ymh <ymh.work@gmail.com>
parents:
diff changeset
   163
        var minutes =ts.getMinutes();
eff9460bd4f2 add new visualization + small corrections
ymh <ymh.work@gmail.com>
parents:
diff changeset
   164
        var seconds = ts.getSeconds();
eff9460bd4f2 add new visualization + small corrections
ymh <ymh.work@gmail.com>
parents:
diff changeset
   165
        var timeStr = (hours < 10 ? '0' + hours : hours) + ':' + (minutes < 10 ? '0' + minutes : minutes) + ':' + (seconds  < 10 ? '0' + seconds : seconds);
eff9460bd4f2 add new visualization + small corrections
ymh <ymh.work@gmail.com>
parents:
diff changeset
   166
eff9460bd4f2 add new visualization + small corrections
ymh <ymh.work@gmail.com>
parents:
diff changeset
   167
        var fontObj = { font: '10pt Arial', fill: '#444444' };
eff9460bd4f2 add new visualization + small corrections
ymh <ymh.work@gmail.com>
parents:
diff changeset
   168
        var t = new PIXI.Text(timeStr, fontObj);
95
806739a26858 add vertical version for pianoroll
ymh <ymh.work@gmail.com>
parents: 94
diff changeset
   169
        if(isHorizontal) {
806739a26858 add vertical version for pianoroll
ymh <ymh.work@gmail.com>
parents: 94
diff changeset
   170
            t.x = x + 2;
806739a26858 add vertical version for pianoroll
ymh <ymh.work@gmail.com>
parents: 94
diff changeset
   171
            t.y = this.linesDown ? this.height - 15 : 2;
806739a26858 add vertical version for pianoroll
ymh <ymh.work@gmail.com>
parents: 94
diff changeset
   172
        }
806739a26858 add vertical version for pianoroll
ymh <ymh.work@gmail.com>
parents: 94
diff changeset
   173
        else {
806739a26858 add vertical version for pianoroll
ymh <ymh.work@gmail.com>
parents: 94
diff changeset
   174
            t.rotation = -Math.PI/2;
806739a26858 add vertical version for pianoroll
ymh <ymh.work@gmail.com>
parents: 94
diff changeset
   175
            t.x = x ;
806739a26858 add vertical version for pianoroll
ymh <ymh.work@gmail.com>
parents: 94
diff changeset
   176
            t.y = this.linesDown ? this.height - 2 : t.width + 2;
89
b4bd49f01837 add annotsRoll class and create it in main. Adapt main and pianoroll to allow horizontal or vertical view
rougeronj
parents: 85
diff changeset
   177
        }
85
eff9460bd4f2 add new visualization + small corrections
ymh <ymh.work@gmail.com>
parents:
diff changeset
   178
        this.container.addChild(t);
eff9460bd4f2 add new visualization + small corrections
ymh <ymh.work@gmail.com>
parents:
diff changeset
   179
    };
eff9460bd4f2 add new visualization + small corrections
ymh <ymh.work@gmail.com>
parents:
diff changeset
   180
eff9460bd4f2 add new visualization + small corrections
ymh <ymh.work@gmail.com>
parents:
diff changeset
   181
    this.moveTo = function(diffTime){
93
79ae42ad97d4 optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents: 85
diff changeset
   182
        var oldX = this.container.x;
85
eff9460bd4f2 add new visualization + small corrections
ymh <ymh.work@gmail.com>
parents:
diff changeset
   183
        this.container.x = Math.floor(diffTime*this.pixelsPerSecond);
93
79ae42ad97d4 optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents: 85
diff changeset
   184
        var deltaX = Math.abs(oldX-this.container.x);
79ae42ad97d4 optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents: 85
diff changeset
   185
        _.forOwn(this.noteDict, function(channelDict) {
79ae42ad97d4 optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents: 85
diff changeset
   186
            _.forOwn(channelDict, function(noteDef) {
79ae42ad97d4 optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents: 85
diff changeset
   187
                if(noteDef.graphics) {
79ae42ad97d4 optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents: 85
diff changeset
   188
                    noteDef.graphics.width = noteDef.graphics.width + deltaX;
79ae42ad97d4 optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents: 85
diff changeset
   189
                }
79ae42ad97d4 optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents: 85
diff changeset
   190
            });
79ae42ad97d4 optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents: 85
diff changeset
   191
        });
79ae42ad97d4 optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents: 85
diff changeset
   192
    };
79ae42ad97d4 optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents: 85
diff changeset
   193
79ae42ad97d4 optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents: 85
diff changeset
   194
    this.move = function() {
79ae42ad97d4 optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents: 85
diff changeset
   195
        var diff = (this.startTs - Date.now())/1000;
79ae42ad97d4 optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents: 85
diff changeset
   196
        this.moveTo(diff);
85
eff9460bd4f2 add new visualization + small corrections
ymh <ymh.work@gmail.com>
parents:
diff changeset
   197
    };
eff9460bd4f2 add new visualization + small corrections
ymh <ymh.work@gmail.com>
parents:
diff changeset
   198
eff9460bd4f2 add new visualization + small corrections
ymh <ymh.work@gmail.com>
parents:
diff changeset
   199
    this.removePassedObjets = function(){
95
806739a26858 add vertical version for pianoroll
ymh <ymh.work@gmail.com>
parents: 94
diff changeset
   200
        var childrenToRemove = [];
806739a26858 add vertical version for pianoroll
ymh <ymh.work@gmail.com>
parents: 94
diff changeset
   201
        _(_this.container.children).forEach(function(child) {
98
72d767c5142d refactor and make work annotsroll
ymh <ymh.work@gmail.com>
parents: 96
diff changeset
   202
            return typeof(child) === 'undefined' ||
72d767c5142d refactor and make work annotsroll
ymh <ymh.work@gmail.com>
parents: 96
diff changeset
   203
                (isHidden(child) && childrenToRemove.push(child));
95
806739a26858 add vertical version for pianoroll
ymh <ymh.work@gmail.com>
parents: 94
diff changeset
   204
        });
85
eff9460bd4f2 add new visualization + small corrections
ymh <ymh.work@gmail.com>
parents:
diff changeset
   205
        childrenToRemove.forEach(function(child) {
eff9460bd4f2 add new visualization + small corrections
ymh <ymh.work@gmail.com>
parents:
diff changeset
   206
            _this.container.removeChild(child);
eff9460bd4f2 add new visualization + small corrections
ymh <ymh.work@gmail.com>
parents:
diff changeset
   207
        });
eff9460bd4f2 add new visualization + small corrections
ymh <ymh.work@gmail.com>
parents:
diff changeset
   208
    };
eff9460bd4f2 add new visualization + small corrections
ymh <ymh.work@gmail.com>
parents:
diff changeset
   209
93
79ae42ad97d4 optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents: 85
diff changeset
   210
    this.start = function() {
94
e0e514c5470f create doubleroll component and modularize app
ymh <ymh.work@gmail.com>
parents: 93
diff changeset
   211
        if(!started) {
93
79ae42ad97d4 optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents: 85
diff changeset
   212
            this.startTs = Date.now();
79ae42ad97d4 optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents: 85
diff changeset
   213
            this.addLine();
98
72d767c5142d refactor and make work annotsroll
ymh <ymh.work@gmail.com>
parents: 96
diff changeset
   214
            started = true;
93
79ae42ad97d4 optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents: 85
diff changeset
   215
        }
98
72d767c5142d refactor and make work annotsroll
ymh <ymh.work@gmail.com>
parents: 96
diff changeset
   216
        this.verticalLinesInterval = setInterval(function() { _this.addLine(); }, this.lineInterval);
72d767c5142d refactor and make work annotsroll
ymh <ymh.work@gmail.com>
parents: 96
diff changeset
   217
        this.cleanInterval = setInterval(function () { _this.removePassedObjets(); }, 1000 * this.width / this.pixelsPerSecond );
93
79ae42ad97d4 optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents: 85
diff changeset
   218
    };
79ae42ad97d4 optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents: 85
diff changeset
   219
79ae42ad97d4 optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents: 85
diff changeset
   220
    this.stop = function() {
79ae42ad97d4 optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents: 85
diff changeset
   221
        //window.clearInterval(this.moveInterval);
98
72d767c5142d refactor and make work annotsroll
ymh <ymh.work@gmail.com>
parents: 96
diff changeset
   222
        clearInterval(this.verticalLinesInterval);
72d767c5142d refactor and make work annotsroll
ymh <ymh.work@gmail.com>
parents: 96
diff changeset
   223
        clearInterval(this.cleanInterval);
93
79ae42ad97d4 optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents: 85
diff changeset
   224
    };
79ae42ad97d4 optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents: 85
diff changeset
   225
85
eff9460bd4f2 add new visualization + small corrections
ymh <ymh.work@gmail.com>
parents:
diff changeset
   226
eff9460bd4f2 add new visualization + small corrections
ymh <ymh.work@gmail.com>
parents:
diff changeset
   227
}
eff9460bd4f2 add new visualization + small corrections
ymh <ymh.work@gmail.com>
parents:
diff changeset
   228
eff9460bd4f2 add new visualization + small corrections
ymh <ymh.work@gmail.com>
parents:
diff changeset
   229
module.exports = PianoRoll;