author | rougeronj |
Fri, 10 Apr 2015 16:45:34 +0200 | |
changeset 145 | a8052f8ab19c |
parent 139 | b62fdb81ce6a |
child 146 | 192d7d7f7bb4 |
permissions | -rw-r--r-- |
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 | 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 | 24 |
var orientation = options.orientation; |
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(); |
145
a8052f8ab19c
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
rougeronj
parents:
139
diff
changeset
|
39 |
|
a8052f8ab19c
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
rougeronj
parents:
139
diff
changeset
|
40 |
this.range = options.range; |
a8052f8ab19c
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
rougeronj
parents:
139
diff
changeset
|
41 |
|
85
eff9460bd4f2
add new visualization + small corrections
ymh <ymh.work@gmail.com>
parents:
diff
changeset
|
42 |
|
94
e0e514c5470f
create doubleroll component and modularize app
ymh <ymh.work@gmail.com>
parents:
93
diff
changeset
|
43 |
var started = false; |
e0e514c5470f
create doubleroll component and modularize app
ymh <ymh.work@gmail.com>
parents:
93
diff
changeset
|
44 |
|
95 | 45 |
var isHidden = function(child) { |
46 |
// TODO: the origin point is an approximation. Should refine this |
|
47 |
var globalPos = child.toGlobal(new PIXI.Point(0,0)); |
|
48 |
return ((globalPos.x + child.width) < 0) || ((globalPos.y + child.height) < 0) ; |
|
49 |
}; |
|
93
79ae42ad97d4
optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents:
85
diff
changeset
|
50 |
|
79ae42ad97d4
optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents:
85
diff
changeset
|
51 |
//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
|
52 |
this.getColor = function(canal) { |
85
eff9460bd4f2
add new visualization + small corrections
ymh <ymh.work@gmail.com>
parents:
diff
changeset
|
53 |
var color = this.colorsReg[canal]; |
eff9460bd4f2
add new visualization + small corrections
ymh <ymh.work@gmail.com>
parents:
diff
changeset
|
54 |
if(typeof(color) === 'undefined') { |
eff9460bd4f2
add new visualization + small corrections
ymh <ymh.work@gmail.com>
parents:
diff
changeset
|
55 |
var colorsRegSize = Object.keys(this.colorsReg).length; |
eff9460bd4f2
add new visualization + small corrections
ymh <ymh.work@gmail.com>
parents:
diff
changeset
|
56 |
if(colorsRegSize < this.noteColors.length) { |
eff9460bd4f2
add new visualization + small corrections
ymh <ymh.work@gmail.com>
parents:
diff
changeset
|
57 |
color = this.colorsReg[canal] = this.noteColors[colorsRegSize]; |
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 |
else { |
eff9460bd4f2
add new visualization + small corrections
ymh <ymh.work@gmail.com>
parents:
diff
changeset
|
60 |
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
|
61 |
} |
eff9460bd4f2
add new visualization + small corrections
ymh <ymh.work@gmail.com>
parents:
diff
changeset
|
62 |
} |
93
79ae42ad97d4
optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents:
85
diff
changeset
|
63 |
return color; |
79ae42ad97d4
optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents:
85
diff
changeset
|
64 |
}; |
79ae42ad97d4
optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents:
85
diff
changeset
|
65 |
|
145
a8052f8ab19c
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
rougeronj
parents:
139
diff
changeset
|
66 |
this.getNoteRect = function(note, x, y, color, alpha, width, height) { |
93
79ae42ad97d4
optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents:
85
diff
changeset
|
67 |
var graphics = new PIXI.Graphics(); |
79ae42ad97d4
optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents:
85
diff
changeset
|
68 |
graphics.beginFill(color, alpha); |
79ae42ad97d4
optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents:
85
diff
changeset
|
69 |
graphics.drawRect(0, 0, width, height); |
85
eff9460bd4f2
add new visualization + small corrections
ymh <ymh.work@gmail.com>
parents:
diff
changeset
|
70 |
graphics.endFill(); |
93
79ae42ad97d4
optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents:
85
diff
changeset
|
71 |
graphics.x = x; |
79ae42ad97d4
optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents:
85
diff
changeset
|
72 |
graphics.y = y; |
79ae42ad97d4
optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents:
85
diff
changeset
|
73 |
graphics.width = width; |
79ae42ad97d4
optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents:
85
diff
changeset
|
74 |
graphics.height = height; |
145
a8052f8ab19c
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
rougeronj
parents:
139
diff
changeset
|
75 |
graphics.note = note; |
93
79ae42ad97d4
optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents:
85
diff
changeset
|
76 |
return graphics; |
79ae42ad97d4
optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents:
85
diff
changeset
|
77 |
}; |
79ae42ad97d4
optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents:
85
diff
changeset
|
78 |
|
98 | 79 |
this.addNoteRaw = function(data) { |
80 |
var note = data.content[3]; |
|
81 |
var velocity = data.content[4]; |
|
82 |
var ts = (data.content[0] - NTP_EPOCH_DELTA)*1000; |
|
83 |
var channel = data.content[2]; |
|
84 |
var sessionTs = data.content[1]; |
|
85 |
||
86 |
this.addNote(note, ts, sessionTs, velocity, channel, 0); |
|
87 |
}; |
|
88 |
||
93
79ae42ad97d4
optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents:
85
diff
changeset
|
89 |
this.addNote = function(note, startTime, sessionTs, velocity, channel, duration) { |
79ae42ad97d4
optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents:
85
diff
changeset
|
90 |
|
79ae42ad97d4
optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents:
85
diff
changeset
|
91 |
var ts = startTime; |
79ae42ad97d4
optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents:
85
diff
changeset
|
92 |
if(this.offsetMusic) { |
79ae42ad97d4
optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents:
85
diff
changeset
|
93 |
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
|
94 |
} |
93
79ae42ad97d4
optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents:
85
diff
changeset
|
95 |
|
79ae42ad97d4
optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents:
85
diff
changeset
|
96 |
var noteDuration = duration; |
79ae42ad97d4
optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents:
85
diff
changeset
|
97 |
var noteVelocity = velocity; |
79ae42ad97d4
optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents:
85
diff
changeset
|
98 |
var graphics; |
79ae42ad97d4
optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents:
85
diff
changeset
|
99 |
if(!duration) { |
79ae42ad97d4
optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents:
85
diff
changeset
|
100 |
if(typeof this.noteDict[channel]==='undefined'){ |
79ae42ad97d4
optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents:
85
diff
changeset
|
101 |
this.noteDict[channel] = {}; |
79ae42ad97d4
optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents:
85
diff
changeset
|
102 |
} |
79ae42ad97d4
optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents:
85
diff
changeset
|
103 |
if(velocity===0) { |
79ae42ad97d4
optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents:
85
diff
changeset
|
104 |
if(typeof this.noteDict[channel][note] !== 'undefined') { |
79ae42ad97d4
optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents:
85
diff
changeset
|
105 |
var noteDef = this.noteDict[channel][note]; |
79ae42ad97d4
optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents:
85
diff
changeset
|
106 |
delete this.noteDict[channel][note]; |
79ae42ad97d4
optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents:
85
diff
changeset
|
107 |
noteDuration = sessionTs - noteDef.sessionTs; |
79ae42ad97d4
optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents:
85
diff
changeset
|
108 |
graphics = noteDef.graphics; |
79ae42ad97d4
optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents:
85
diff
changeset
|
109 |
noteVelocity = noteDef.velocity; |
79ae42ad97d4
optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents:
85
diff
changeset
|
110 |
ts = noteDef.ts; |
79ae42ad97d4
optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents:
85
diff
changeset
|
111 |
} |
79ae42ad97d4
optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents:
85
diff
changeset
|
112 |
} |
79ae42ad97d4
optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents:
85
diff
changeset
|
113 |
else { |
139 | 114 |
noteDuration = Math.abs(Date.now() - ts); |
93
79ae42ad97d4
optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents:
85
diff
changeset
|
115 |
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
|
116 |
} |
79ae42ad97d4
optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents:
85
diff
changeset
|
117 |
} |
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 |
|
79ae42ad97d4
optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents:
85
diff
changeset
|
120 |
if(!this.offsetMusic || velocity===0) { |
79ae42ad97d4
optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents:
85
diff
changeset
|
121 |
|
79ae42ad97d4
optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents:
85
diff
changeset
|
122 |
var width = noteDuration * this.pixelsPerSecond / 1000; |
79ae42ad97d4
optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents:
85
diff
changeset
|
123 |
if(!graphics) { |
79ae42ad97d4
optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents:
85
diff
changeset
|
124 |
var x = (ts-this.startTs) * this.pixelsPerSecond / 1000; |
79ae42ad97d4
optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents:
85
diff
changeset
|
125 |
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
|
126 |
// not visible. do nothing |
79ae42ad97d4
optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents:
85
diff
changeset
|
127 |
return; |
79ae42ad97d4
optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents:
85
diff
changeset
|
128 |
} |
145
a8052f8ab19c
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
rougeronj
parents:
139
diff
changeset
|
129 |
if (this.range.bottom > note || note > this.range.top){ |
a8052f8ab19c
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
rougeronj
parents:
139
diff
changeset
|
130 |
if (note < this.range.bottom) |
a8052f8ab19c
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
rougeronj
parents:
139
diff
changeset
|
131 |
this.range.bottom = note; |
a8052f8ab19c
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
rougeronj
parents:
139
diff
changeset
|
132 |
else |
a8052f8ab19c
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
rougeronj
parents:
139
diff
changeset
|
133 |
this.range.top = note; |
a8052f8ab19c
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
rougeronj
parents:
139
diff
changeset
|
134 |
this.noteHeight = this.height / (this.range.top - this.range.bottom); |
a8052f8ab19c
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
rougeronj
parents:
139
diff
changeset
|
135 |
this.rescaleScene(); |
a8052f8ab19c
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
rougeronj
parents:
139
diff
changeset
|
136 |
} |
a8052f8ab19c
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
rougeronj
parents:
139
diff
changeset
|
137 |
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)); |
93
79ae42ad97d4
optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents:
85
diff
changeset
|
138 |
var color = this.getColor(channel); |
145
a8052f8ab19c
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
rougeronj
parents:
139
diff
changeset
|
139 |
//128 hardecoded because its the maximum velocity of MIDI |
93
79ae42ad97d4
optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents:
85
diff
changeset
|
140 |
var alpha = (noteVelocity / 128); |
79ae42ad97d4
optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents:
85
diff
changeset
|
141 |
|
145
a8052f8ab19c
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
rougeronj
parents:
139
diff
changeset
|
142 |
graphics = this.getNoteRect(note, x, y, color, alpha, width, this.noteHeight); |
93
79ae42ad97d4
optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents:
85
diff
changeset
|
143 |
this.container.addChild(graphics); |
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 |
else { |
79ae42ad97d4
optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents:
85
diff
changeset
|
146 |
graphics.width = width; |
79ae42ad97d4
optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents:
85
diff
changeset
|
147 |
} |
79ae42ad97d4
optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents:
85
diff
changeset
|
148 |
|
79ae42ad97d4
optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents:
85
diff
changeset
|
149 |
if(!duration && velocity) { |
79ae42ad97d4
optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents:
85
diff
changeset
|
150 |
this.noteDict[channel][note].graphics = graphics; |
79ae42ad97d4
optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents:
85
diff
changeset
|
151 |
} |
79ae42ad97d4
optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents:
85
diff
changeset
|
152 |
} |
85
eff9460bd4f2
add new visualization + small corrections
ymh <ymh.work@gmail.com>
parents:
diff
changeset
|
153 |
}; |
145
a8052f8ab19c
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
rougeronj
parents:
139
diff
changeset
|
154 |
|
a8052f8ab19c
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
rougeronj
parents:
139
diff
changeset
|
155 |
this.rescaleScene = function(){ |
a8052f8ab19c
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
rougeronj
parents:
139
diff
changeset
|
156 |
var _this = this; |
a8052f8ab19c
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
rougeronj
parents:
139
diff
changeset
|
157 |
var childrenToUpdate = []; |
a8052f8ab19c
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
rougeronj
parents:
139
diff
changeset
|
158 |
_(_this.container.children).forEach(function(child) { |
a8052f8ab19c
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
rougeronj
parents:
139
diff
changeset
|
159 |
return typeof(child) === 'undefined' || |
a8052f8ab19c
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
rougeronj
parents:
139
diff
changeset
|
160 |
(!isHidden(child) && childrenToUpdate.push(child)); |
a8052f8ab19c
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
rougeronj
parents:
139
diff
changeset
|
161 |
}); |
a8052f8ab19c
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
rougeronj
parents:
139
diff
changeset
|
162 |
childrenToUpdate.forEach(function(child) { |
a8052f8ab19c
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
rougeronj
parents:
139
diff
changeset
|
163 |
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)); |
a8052f8ab19c
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
rougeronj
parents:
139
diff
changeset
|
164 |
child.height = _this.noteHeight; |
a8052f8ab19c
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
rougeronj
parents:
139
diff
changeset
|
165 |
}); |
a8052f8ab19c
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
rougeronj
parents:
139
diff
changeset
|
166 |
} |
85
eff9460bd4f2
add new visualization + small corrections
ymh <ymh.work@gmail.com>
parents:
diff
changeset
|
167 |
|
eff9460bd4f2
add new visualization + small corrections
ymh <ymh.work@gmail.com>
parents:
diff
changeset
|
168 |
this.addLine = function(ts){ |
93
79ae42ad97d4
optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents:
85
diff
changeset
|
169 |
|
79ae42ad97d4
optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents:
85
diff
changeset
|
170 |
if(typeof(ts) === 'undefined') { |
79ae42ad97d4
optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents:
85
diff
changeset
|
171 |
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
|
172 |
} |
85
eff9460bd4f2
add new visualization + small corrections
ymh <ymh.work@gmail.com>
parents:
diff
changeset
|
173 |
var x = -this.container.x; |
eff9460bd4f2
add new visualization + small corrections
ymh <ymh.work@gmail.com>
parents:
diff
changeset
|
174 |
var y = this.linesDown ? this.height - 20 : 0; |
95 | 175 |
|
176 |
var graphics = new PIXI.Graphics() |
|
177 |
.beginFill(0xFFFF00) |
|
178 |
.lineStyle(1, this.lineColor) |
|
179 |
.moveTo(0, 0) |
|
180 |
.lineTo(0, 20) |
|
181 |
.endFill(); |
|
182 |
graphics.x = x; |
|
183 |
graphics.y = y; |
|
85
eff9460bd4f2
add new visualization + small corrections
ymh <ymh.work@gmail.com>
parents:
diff
changeset
|
184 |
this.container.addChild(graphics); |
eff9460bd4f2
add new visualization + small corrections
ymh <ymh.work@gmail.com>
parents:
diff
changeset
|
185 |
// Add text |
eff9460bd4f2
add new visualization + small corrections
ymh <ymh.work@gmail.com>
parents:
diff
changeset
|
186 |
//var totalSec = lineNb * this.lineInterval / 1000; |
eff9460bd4f2
add new visualization + small corrections
ymh <ymh.work@gmail.com>
parents:
diff
changeset
|
187 |
var hours = ts.getHours(); |
eff9460bd4f2
add new visualization + small corrections
ymh <ymh.work@gmail.com>
parents:
diff
changeset
|
188 |
var minutes =ts.getMinutes(); |
eff9460bd4f2
add new visualization + small corrections
ymh <ymh.work@gmail.com>
parents:
diff
changeset
|
189 |
var seconds = ts.getSeconds(); |
eff9460bd4f2
add new visualization + small corrections
ymh <ymh.work@gmail.com>
parents:
diff
changeset
|
190 |
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
|
191 |
|
eff9460bd4f2
add new visualization + small corrections
ymh <ymh.work@gmail.com>
parents:
diff
changeset
|
192 |
var fontObj = { font: '10pt Arial', fill: '#444444' }; |
eff9460bd4f2
add new visualization + small corrections
ymh <ymh.work@gmail.com>
parents:
diff
changeset
|
193 |
var t = new PIXI.Text(timeStr, fontObj); |
95 | 194 |
if(isHorizontal) { |
195 |
t.x = x + 2; |
|
196 |
t.y = this.linesDown ? this.height - 15 : 2; |
|
197 |
} |
|
198 |
else { |
|
199 |
t.rotation = -Math.PI/2; |
|
200 |
t.x = x ; |
|
201 |
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
|
202 |
} |
85
eff9460bd4f2
add new visualization + small corrections
ymh <ymh.work@gmail.com>
parents:
diff
changeset
|
203 |
this.container.addChild(t); |
eff9460bd4f2
add new visualization + small corrections
ymh <ymh.work@gmail.com>
parents:
diff
changeset
|
204 |
}; |
eff9460bd4f2
add new visualization + small corrections
ymh <ymh.work@gmail.com>
parents:
diff
changeset
|
205 |
|
eff9460bd4f2
add new visualization + small corrections
ymh <ymh.work@gmail.com>
parents:
diff
changeset
|
206 |
this.moveTo = function(diffTime){ |
93
79ae42ad97d4
optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents:
85
diff
changeset
|
207 |
var oldX = this.container.x; |
85
eff9460bd4f2
add new visualization + small corrections
ymh <ymh.work@gmail.com>
parents:
diff
changeset
|
208 |
this.container.x = Math.floor(diffTime*this.pixelsPerSecond); |
93
79ae42ad97d4
optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents:
85
diff
changeset
|
209 |
var deltaX = Math.abs(oldX-this.container.x); |
79ae42ad97d4
optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents:
85
diff
changeset
|
210 |
_.forOwn(this.noteDict, function(channelDict) { |
79ae42ad97d4
optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents:
85
diff
changeset
|
211 |
_.forOwn(channelDict, function(noteDef) { |
79ae42ad97d4
optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents:
85
diff
changeset
|
212 |
if(noteDef.graphics) { |
79ae42ad97d4
optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents:
85
diff
changeset
|
213 |
noteDef.graphics.width = noteDef.graphics.width + deltaX; |
79ae42ad97d4
optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents:
85
diff
changeset
|
214 |
} |
79ae42ad97d4
optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents:
85
diff
changeset
|
215 |
}); |
79ae42ad97d4
optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents:
85
diff
changeset
|
216 |
}); |
79ae42ad97d4
optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents:
85
diff
changeset
|
217 |
}; |
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 |
this.move = function() { |
79ae42ad97d4
optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents:
85
diff
changeset
|
220 |
var diff = (this.startTs - Date.now())/1000; |
79ae42ad97d4
optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents:
85
diff
changeset
|
221 |
this.moveTo(diff); |
85
eff9460bd4f2
add new visualization + small corrections
ymh <ymh.work@gmail.com>
parents:
diff
changeset
|
222 |
}; |
eff9460bd4f2
add new visualization + small corrections
ymh <ymh.work@gmail.com>
parents:
diff
changeset
|
223 |
|
eff9460bd4f2
add new visualization + small corrections
ymh <ymh.work@gmail.com>
parents:
diff
changeset
|
224 |
this.removePassedObjets = function(){ |
95 | 225 |
var childrenToRemove = []; |
226 |
_(_this.container.children).forEach(function(child) { |
|
98 | 227 |
return typeof(child) === 'undefined' || |
228 |
(isHidden(child) && childrenToRemove.push(child)); |
|
95 | 229 |
}); |
85
eff9460bd4f2
add new visualization + small corrections
ymh <ymh.work@gmail.com>
parents:
diff
changeset
|
230 |
childrenToRemove.forEach(function(child) { |
eff9460bd4f2
add new visualization + small corrections
ymh <ymh.work@gmail.com>
parents:
diff
changeset
|
231 |
_this.container.removeChild(child); |
eff9460bd4f2
add new visualization + small corrections
ymh <ymh.work@gmail.com>
parents:
diff
changeset
|
232 |
}); |
eff9460bd4f2
add new visualization + small corrections
ymh <ymh.work@gmail.com>
parents:
diff
changeset
|
233 |
}; |
eff9460bd4f2
add new visualization + small corrections
ymh <ymh.work@gmail.com>
parents:
diff
changeset
|
234 |
|
93
79ae42ad97d4
optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents:
85
diff
changeset
|
235 |
this.start = function() { |
94
e0e514c5470f
create doubleroll component and modularize app
ymh <ymh.work@gmail.com>
parents:
93
diff
changeset
|
236 |
if(!started) { |
93
79ae42ad97d4
optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents:
85
diff
changeset
|
237 |
this.startTs = Date.now(); |
79ae42ad97d4
optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents:
85
diff
changeset
|
238 |
this.addLine(); |
98 | 239 |
started = true; |
93
79ae42ad97d4
optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents:
85
diff
changeset
|
240 |
} |
98 | 241 |
this.verticalLinesInterval = setInterval(function() { _this.addLine(); }, this.lineInterval); |
242 |
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
|
243 |
}; |
79ae42ad97d4
optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents:
85
diff
changeset
|
244 |
|
79ae42ad97d4
optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents:
85
diff
changeset
|
245 |
this.stop = function() { |
79ae42ad97d4
optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents:
85
diff
changeset
|
246 |
//window.clearInterval(this.moveInterval); |
98 | 247 |
clearInterval(this.verticalLinesInterval); |
248 |
clearInterval(this.cleanInterval); |
|
93
79ae42ad97d4
optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents:
85
diff
changeset
|
249 |
}; |
79ae42ad97d4
optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents:
85
diff
changeset
|
250 |
|
85
eff9460bd4f2
add new visualization + small corrections
ymh <ymh.work@gmail.com>
parents:
diff
changeset
|
251 |
|
eff9460bd4f2
add new visualization + small corrections
ymh <ymh.work@gmail.com>
parents:
diff
changeset
|
252 |
} |
eff9460bd4f2
add new visualization + small corrections
ymh <ymh.work@gmail.com>
parents:
diff
changeset
|
253 |
|
eff9460bd4f2
add new visualization + small corrections
ymh <ymh.work@gmail.com>
parents:
diff
changeset
|
254 |
module.exports = PianoRoll; |