author | ymh <ymh.work@gmail.com> |
Fri, 17 Apr 2015 15:32:19 +0200 | |
changeset 166 | fa9e24e46968 |
parent 162 | 44320144951a |
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 |
|
162 | 8 |
//TODO: add delay to adjust the "zero". this could should be given as an option |
9 |
//or if explicitely null automatically adjusted from the mean of difference |
|
10 |
//between the note timestamp and the current timestamp. |
|
11 |
||
85
eff9460bd4f2
add new visualization + small corrections
ymh <ymh.work@gmail.com>
parents:
diff
changeset
|
12 |
'use strict'; |
eff9460bd4f2
add new visualization + small corrections
ymh <ymh.work@gmail.com>
parents:
diff
changeset
|
13 |
|
93
79ae42ad97d4
optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents:
85
diff
changeset
|
14 |
|
85
eff9460bd4f2
add new visualization + small corrections
ymh <ymh.work@gmail.com>
parents:
diff
changeset
|
15 |
var PIXI = require('pixi'); |
eff9460bd4f2
add new visualization + small corrections
ymh <ymh.work@gmail.com>
parents:
diff
changeset
|
16 |
var randomColor = require('randomColor'); |
93
79ae42ad97d4
optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents:
85
diff
changeset
|
17 |
var _ = require('lodash'); |
85
eff9460bd4f2
add new visualization + small corrections
ymh <ymh.work@gmail.com>
parents:
diff
changeset
|
18 |
|
98 | 19 |
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
|
20 |
|
79ae42ad97d4
optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents:
85
diff
changeset
|
21 |
function PianoRoll(options) { |
85
eff9460bd4f2
add new visualization + small corrections
ymh <ymh.work@gmail.com>
parents:
diff
changeset
|
22 |
var _this = this; |
eff9460bd4f2
add new visualization + small corrections
ymh <ymh.work@gmail.com>
parents:
diff
changeset
|
23 |
this.container = new PIXI.DisplayObjectContainer(); |
94
e0e514c5470f
create doubleroll component and modularize app
ymh <ymh.work@gmail.com>
parents:
93
diff
changeset
|
24 |
this.container.x = options.xInit; |
e0e514c5470f
create doubleroll component and modularize app
ymh <ymh.work@gmail.com>
parents:
93
diff
changeset
|
25 |
this.container.y = options.yInit; |
93
79ae42ad97d4
optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents:
85
diff
changeset
|
26 |
options.parentContainer.addChild(this.container); |
85
eff9460bd4f2
add new visualization + small corrections
ymh <ymh.work@gmail.com>
parents:
diff
changeset
|
27 |
|
95 | 28 |
var orientation = options.orientation; |
29 |
var isHorizontal = (orientation !== 'vertical'); |
|
85
eff9460bd4f2
add new visualization + small corrections
ymh <ymh.work@gmail.com>
parents:
diff
changeset
|
30 |
|
93
79ae42ad97d4
optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents:
85
diff
changeset
|
31 |
this.linesDown = options.linesDown; |
79ae42ad97d4
optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents:
85
diff
changeset
|
32 |
this.height = options.height; |
79ae42ad97d4
optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents:
85
diff
changeset
|
33 |
this.pixelsPerSecond = options.pixelsPerSecond; |
79ae42ad97d4
optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents:
85
diff
changeset
|
34 |
this.width = options.width; |
79ae42ad97d4
optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents:
85
diff
changeset
|
35 |
this.noteColors = options.noteColors; |
79ae42ad97d4
optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents:
85
diff
changeset
|
36 |
this.colorsReg = options.colorsReg || {}; |
79ae42ad97d4
optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents:
85
diff
changeset
|
37 |
this.lineColor = options.lineColor; |
79ae42ad97d4
optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents:
85
diff
changeset
|
38 |
this.lineInterval = options.lineInterval; |
79ae42ad97d4
optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents:
85
diff
changeset
|
39 |
this.offsetMusic = options.offsetMusic || false; |
79ae42ad97d4
optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents:
85
diff
changeset
|
40 |
this.noteHeight = options.noteHeight; |
79ae42ad97d4
optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents:
85
diff
changeset
|
41 |
this.noteDict = {}; |
79ae42ad97d4
optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents:
85
diff
changeset
|
42 |
this.startTs = options.startTs || Date.now(); |
146 | 43 |
this.dynamicRange = options.dynamicRange; |
44 |
this.initRange = options.range; |
|
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
|
45 |
this.range = options.range; |
166 | 46 |
|
85
eff9460bd4f2
add new visualization + small corrections
ymh <ymh.work@gmail.com>
parents:
diff
changeset
|
47 |
|
94
e0e514c5470f
create doubleroll component and modularize app
ymh <ymh.work@gmail.com>
parents:
93
diff
changeset
|
48 |
var started = false; |
e0e514c5470f
create doubleroll component and modularize app
ymh <ymh.work@gmail.com>
parents:
93
diff
changeset
|
49 |
|
95 | 50 |
var isHidden = function(child) { |
51 |
// TODO: the origin point is an approximation. Should refine this |
|
52 |
var globalPos = child.toGlobal(new PIXI.Point(0,0)); |
|
53 |
return ((globalPos.x + child.width) < 0) || ((globalPos.y + child.height) < 0) ; |
|
54 |
}; |
|
93
79ae42ad97d4
optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents:
85
diff
changeset
|
55 |
|
79ae42ad97d4
optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents:
85
diff
changeset
|
56 |
//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
|
57 |
this.getColor = function(canal) { |
85
eff9460bd4f2
add new visualization + small corrections
ymh <ymh.work@gmail.com>
parents:
diff
changeset
|
58 |
var color = this.colorsReg[canal]; |
eff9460bd4f2
add new visualization + small corrections
ymh <ymh.work@gmail.com>
parents:
diff
changeset
|
59 |
if(typeof(color) === 'undefined') { |
eff9460bd4f2
add new visualization + small corrections
ymh <ymh.work@gmail.com>
parents:
diff
changeset
|
60 |
var colorsRegSize = Object.keys(this.colorsReg).length; |
eff9460bd4f2
add new visualization + small corrections
ymh <ymh.work@gmail.com>
parents:
diff
changeset
|
61 |
if(colorsRegSize < this.noteColors.length) { |
eff9460bd4f2
add new visualization + small corrections
ymh <ymh.work@gmail.com>
parents:
diff
changeset
|
62 |
color = this.colorsReg[canal] = this.noteColors[colorsRegSize]; |
eff9460bd4f2
add new visualization + small corrections
ymh <ymh.work@gmail.com>
parents:
diff
changeset
|
63 |
} |
eff9460bd4f2
add new visualization + small corrections
ymh <ymh.work@gmail.com>
parents:
diff
changeset
|
64 |
else { |
eff9460bd4f2
add new visualization + small corrections
ymh <ymh.work@gmail.com>
parents:
diff
changeset
|
65 |
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
|
66 |
} |
eff9460bd4f2
add new visualization + small corrections
ymh <ymh.work@gmail.com>
parents:
diff
changeset
|
67 |
} |
93
79ae42ad97d4
optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents:
85
diff
changeset
|
68 |
return color; |
79ae42ad97d4
optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents:
85
diff
changeset
|
69 |
}; |
79ae42ad97d4
optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents:
85
diff
changeset
|
70 |
|
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
|
71 |
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
|
72 |
var graphics = new PIXI.Graphics(); |
146 | 73 |
graphics.note = note; |
93
79ae42ad97d4
optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents:
85
diff
changeset
|
74 |
graphics.beginFill(color, alpha); |
79ae42ad97d4
optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents:
85
diff
changeset
|
75 |
graphics.drawRect(0, 0, width, height); |
85
eff9460bd4f2
add new visualization + small corrections
ymh <ymh.work@gmail.com>
parents:
diff
changeset
|
76 |
graphics.endFill(); |
93
79ae42ad97d4
optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents:
85
diff
changeset
|
77 |
graphics.x = x; |
79ae42ad97d4
optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents:
85
diff
changeset
|
78 |
graphics.y = y; |
79ae42ad97d4
optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents:
85
diff
changeset
|
79 |
graphics.width = width; |
79ae42ad97d4
optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents:
85
diff
changeset
|
80 |
graphics.height = height; |
79ae42ad97d4
optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents:
85
diff
changeset
|
81 |
return graphics; |
79ae42ad97d4
optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents:
85
diff
changeset
|
82 |
}; |
79ae42ad97d4
optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents:
85
diff
changeset
|
83 |
|
98 | 84 |
this.addNoteRaw = function(data) { |
85 |
var note = data.content[3]; |
|
86 |
var velocity = data.content[4]; |
|
166 | 87 |
//var ts = (data.content[0] - NTP_EPOCH_DELTA)*1000; |
88 |
var ts = Date.parse(data.ts_server); |
|
98 | 89 |
var channel = data.content[2]; |
90 |
var sessionTs = data.content[1]; |
|
91 |
||
162 | 92 |
if(velocity !== 0 && typeof(this.noteDict[channel]) !== 'undefined' && typeof(this.noteDict[channel][note] !== 'undefined')) { |
93 |
this.addNote(note, ts, sessionTs, 0, channel, 0); |
|
94 |
} |
|
95 |
||
98 | 96 |
this.addNote(note, ts, sessionTs, velocity, channel, 0); |
97 |
}; |
|
98 |
||
93
79ae42ad97d4
optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents:
85
diff
changeset
|
99 |
this.addNote = function(note, startTime, sessionTs, velocity, channel, duration) { |
79ae42ad97d4
optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents:
85
diff
changeset
|
100 |
|
79ae42ad97d4
optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents:
85
diff
changeset
|
101 |
var ts = startTime; |
79ae42ad97d4
optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents:
85
diff
changeset
|
102 |
if(this.offsetMusic) { |
79ae42ad97d4
optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents:
85
diff
changeset
|
103 |
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
|
104 |
} |
93
79ae42ad97d4
optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents:
85
diff
changeset
|
105 |
|
79ae42ad97d4
optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents:
85
diff
changeset
|
106 |
var noteDuration = duration; |
79ae42ad97d4
optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents:
85
diff
changeset
|
107 |
var noteVelocity = velocity; |
79ae42ad97d4
optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents:
85
diff
changeset
|
108 |
var graphics; |
79ae42ad97d4
optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents:
85
diff
changeset
|
109 |
if(!duration) { |
79ae42ad97d4
optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents:
85
diff
changeset
|
110 |
if(typeof this.noteDict[channel]==='undefined'){ |
79ae42ad97d4
optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents:
85
diff
changeset
|
111 |
this.noteDict[channel] = {}; |
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 |
if(velocity===0) { |
79ae42ad97d4
optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents:
85
diff
changeset
|
114 |
if(typeof this.noteDict[channel][note] !== 'undefined') { |
79ae42ad97d4
optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents:
85
diff
changeset
|
115 |
var noteDef = this.noteDict[channel][note]; |
79ae42ad97d4
optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents:
85
diff
changeset
|
116 |
delete this.noteDict[channel][note]; |
79ae42ad97d4
optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents:
85
diff
changeset
|
117 |
noteDuration = sessionTs - noteDef.sessionTs; |
79ae42ad97d4
optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents:
85
diff
changeset
|
118 |
graphics = noteDef.graphics; |
79ae42ad97d4
optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents:
85
diff
changeset
|
119 |
noteVelocity = noteDef.velocity; |
79ae42ad97d4
optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents:
85
diff
changeset
|
120 |
ts = noteDef.ts; |
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 |
} |
79ae42ad97d4
optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents:
85
diff
changeset
|
123 |
else { |
139 | 124 |
noteDuration = Math.abs(Date.now() - ts); |
93
79ae42ad97d4
optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents:
85
diff
changeset
|
125 |
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
|
126 |
} |
79ae42ad97d4
optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents:
85
diff
changeset
|
127 |
} |
79ae42ad97d4
optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents:
85
diff
changeset
|
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 |
if(!this.offsetMusic || velocity===0) { |
79ae42ad97d4
optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents:
85
diff
changeset
|
131 |
|
79ae42ad97d4
optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents:
85
diff
changeset
|
132 |
var width = noteDuration * this.pixelsPerSecond / 1000; |
79ae42ad97d4
optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents:
85
diff
changeset
|
133 |
if(!graphics) { |
79ae42ad97d4
optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents:
85
diff
changeset
|
134 |
var x = (ts-this.startTs) * this.pixelsPerSecond / 1000; |
79ae42ad97d4
optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents:
85
diff
changeset
|
135 |
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
|
136 |
// not visible. do nothing |
79ae42ad97d4
optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents:
85
diff
changeset
|
137 |
return; |
79ae42ad97d4
optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents:
85
diff
changeset
|
138 |
} |
146 | 139 |
if (this.dynamicRange && (this.range.bottom > note || note > this.range.top)){ |
140 |
var newScale = {}; |
|
141 |
newScale['bottom'] = Math.min(note, this.range.bottom); |
|
142 |
newScale['top'] = Math.max(note, this.range.top); |
|
143 |
this.rescaleScene(newScale); |
|
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
|
144 |
} |
146 | 145 |
var y = Math.floor(((this.range.top-this.range.bottom)-(note-this.range.bottom)+0.5) * (this.noteHeight) - (this.noteHeight/2)); |
93
79ae42ad97d4
optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents:
85
diff
changeset
|
146 |
var color = this.getColor(channel); |
166 | 147 |
|
93
79ae42ad97d4
optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents:
85
diff
changeset
|
148 |
var alpha = (noteVelocity / 128); |
79ae42ad97d4
optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents:
85
diff
changeset
|
149 |
|
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
|
150 |
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
|
151 |
this.container.addChild(graphics); |
79ae42ad97d4
optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents:
85
diff
changeset
|
152 |
} |
79ae42ad97d4
optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents:
85
diff
changeset
|
153 |
else { |
79ae42ad97d4
optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents:
85
diff
changeset
|
154 |
graphics.width = width; |
79ae42ad97d4
optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents:
85
diff
changeset
|
155 |
} |
79ae42ad97d4
optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents:
85
diff
changeset
|
156 |
|
79ae42ad97d4
optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents:
85
diff
changeset
|
157 |
if(!duration && velocity) { |
79ae42ad97d4
optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents:
85
diff
changeset
|
158 |
this.noteDict[channel][note].graphics = graphics; |
79ae42ad97d4
optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents:
85
diff
changeset
|
159 |
} |
79ae42ad97d4
optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents:
85
diff
changeset
|
160 |
} |
85
eff9460bd4f2
add new visualization + small corrections
ymh <ymh.work@gmail.com>
parents:
diff
changeset
|
161 |
}; |
166 | 162 |
|
146 | 163 |
//rescale scene in case a note out of range is added or a note out of the range is removed |
164 |
this.rescaleScene = function(newScale){ |
|
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
|
165 |
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
|
166 |
var childrenToUpdate = []; |
146 | 167 |
var top = this.initRange.top; |
168 |
var bottom = this.initRange.bottom; |
|
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
|
169 |
_(_this.container.children).forEach(function(child) { |
146 | 170 |
if (typeof(child) !== 'undefined' && child.note && !isHidden(child)){ |
171 |
top = Math.max(child.note, top); |
|
172 |
bottom = Math.min(child.note, bottom); |
|
173 |
return childrenToUpdate.push(child); |
|
174 |
} |
|
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
|
175 |
}); |
146 | 176 |
if (newScale){ |
177 |
this.range = newScale; |
|
178 |
}else{ |
|
166 | 179 |
this.range.top = top; |
180 |
this.range.bottom = bottom; |
|
146 | 181 |
} |
182 |
this.noteHeight = this.height / (this.range.top - this.range.bottom + 1); |
|
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
|
183 |
childrenToUpdate.forEach(function(child) { |
146 | 184 |
child.y = Math.floor(((_this.range.top-_this.range.bottom)-(child.note-_this.range.bottom)+0.5) * (_this.noteHeight) - (_this.noteHeight/2)); |
185 |
child.height = _this.noteHeight; |
|
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
|
186 |
}); |
146 | 187 |
}; |
85
eff9460bd4f2
add new visualization + small corrections
ymh <ymh.work@gmail.com>
parents:
diff
changeset
|
188 |
|
eff9460bd4f2
add new visualization + small corrections
ymh <ymh.work@gmail.com>
parents:
diff
changeset
|
189 |
this.addLine = function(ts){ |
93
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 |
if(typeof(ts) === 'undefined') { |
79ae42ad97d4
optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents:
85
diff
changeset
|
192 |
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
|
193 |
} |
85
eff9460bd4f2
add new visualization + small corrections
ymh <ymh.work@gmail.com>
parents:
diff
changeset
|
194 |
var x = -this.container.x; |
eff9460bd4f2
add new visualization + small corrections
ymh <ymh.work@gmail.com>
parents:
diff
changeset
|
195 |
var y = this.linesDown ? this.height - 20 : 0; |
95 | 196 |
|
197 |
var graphics = new PIXI.Graphics() |
|
198 |
.beginFill(0xFFFF00) |
|
199 |
.lineStyle(1, this.lineColor) |
|
200 |
.moveTo(0, 0) |
|
201 |
.lineTo(0, 20) |
|
202 |
.endFill(); |
|
203 |
graphics.x = x; |
|
204 |
graphics.y = y; |
|
85
eff9460bd4f2
add new visualization + small corrections
ymh <ymh.work@gmail.com>
parents:
diff
changeset
|
205 |
this.container.addChild(graphics); |
eff9460bd4f2
add new visualization + small corrections
ymh <ymh.work@gmail.com>
parents:
diff
changeset
|
206 |
// Add text |
eff9460bd4f2
add new visualization + small corrections
ymh <ymh.work@gmail.com>
parents:
diff
changeset
|
207 |
//var totalSec = lineNb * this.lineInterval / 1000; |
eff9460bd4f2
add new visualization + small corrections
ymh <ymh.work@gmail.com>
parents:
diff
changeset
|
208 |
var hours = ts.getHours(); |
eff9460bd4f2
add new visualization + small corrections
ymh <ymh.work@gmail.com>
parents:
diff
changeset
|
209 |
var minutes =ts.getMinutes(); |
eff9460bd4f2
add new visualization + small corrections
ymh <ymh.work@gmail.com>
parents:
diff
changeset
|
210 |
var seconds = ts.getSeconds(); |
eff9460bd4f2
add new visualization + small corrections
ymh <ymh.work@gmail.com>
parents:
diff
changeset
|
211 |
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
|
212 |
|
eff9460bd4f2
add new visualization + small corrections
ymh <ymh.work@gmail.com>
parents:
diff
changeset
|
213 |
var fontObj = { font: '10pt Arial', fill: '#444444' }; |
eff9460bd4f2
add new visualization + small corrections
ymh <ymh.work@gmail.com>
parents:
diff
changeset
|
214 |
var t = new PIXI.Text(timeStr, fontObj); |
95 | 215 |
if(isHorizontal) { |
216 |
t.x = x + 2; |
|
217 |
t.y = this.linesDown ? this.height - 15 : 2; |
|
218 |
} |
|
219 |
else { |
|
220 |
t.rotation = -Math.PI/2; |
|
221 |
t.x = x ; |
|
222 |
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
|
223 |
} |
85
eff9460bd4f2
add new visualization + small corrections
ymh <ymh.work@gmail.com>
parents:
diff
changeset
|
224 |
this.container.addChild(t); |
eff9460bd4f2
add new visualization + small corrections
ymh <ymh.work@gmail.com>
parents:
diff
changeset
|
225 |
}; |
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 |
this.moveTo = function(diffTime){ |
93
79ae42ad97d4
optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents:
85
diff
changeset
|
228 |
var oldX = this.container.x; |
85
eff9460bd4f2
add new visualization + small corrections
ymh <ymh.work@gmail.com>
parents:
diff
changeset
|
229 |
this.container.x = Math.floor(diffTime*this.pixelsPerSecond); |
93
79ae42ad97d4
optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents:
85
diff
changeset
|
230 |
var deltaX = Math.abs(oldX-this.container.x); |
79ae42ad97d4
optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents:
85
diff
changeset
|
231 |
_.forOwn(this.noteDict, function(channelDict) { |
79ae42ad97d4
optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents:
85
diff
changeset
|
232 |
_.forOwn(channelDict, function(noteDef) { |
79ae42ad97d4
optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents:
85
diff
changeset
|
233 |
if(noteDef.graphics) { |
79ae42ad97d4
optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents:
85
diff
changeset
|
234 |
noteDef.graphics.width = noteDef.graphics.width + deltaX; |
79ae42ad97d4
optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents:
85
diff
changeset
|
235 |
} |
79ae42ad97d4
optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents:
85
diff
changeset
|
236 |
}); |
79ae42ad97d4
optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents:
85
diff
changeset
|
237 |
}); |
79ae42ad97d4
optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents:
85
diff
changeset
|
238 |
}; |
79ae42ad97d4
optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents:
85
diff
changeset
|
239 |
|
79ae42ad97d4
optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents:
85
diff
changeset
|
240 |
this.move = function() { |
79ae42ad97d4
optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents:
85
diff
changeset
|
241 |
var diff = (this.startTs - Date.now())/1000; |
79ae42ad97d4
optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents:
85
diff
changeset
|
242 |
this.moveTo(diff); |
85
eff9460bd4f2
add new visualization + small corrections
ymh <ymh.work@gmail.com>
parents:
diff
changeset
|
243 |
}; |
eff9460bd4f2
add new visualization + small corrections
ymh <ymh.work@gmail.com>
parents:
diff
changeset
|
244 |
|
eff9460bd4f2
add new visualization + small corrections
ymh <ymh.work@gmail.com>
parents:
diff
changeset
|
245 |
this.removePassedObjets = function(){ |
95 | 246 |
var childrenToRemove = []; |
146 | 247 |
var rescale = false; |
95 | 248 |
_(_this.container.children).forEach(function(child) { |
98 | 249 |
return typeof(child) === 'undefined' || |
250 |
(isHidden(child) && childrenToRemove.push(child)); |
|
95 | 251 |
}); |
85
eff9460bd4f2
add new visualization + small corrections
ymh <ymh.work@gmail.com>
parents:
diff
changeset
|
252 |
childrenToRemove.forEach(function(child) { |
146 | 253 |
if (_this.dynamicRange && (_this.range.bottom === child.note || child.note === _this.range.top)){ |
254 |
rescale = true; |
|
255 |
} |
|
85
eff9460bd4f2
add new visualization + small corrections
ymh <ymh.work@gmail.com>
parents:
diff
changeset
|
256 |
_this.container.removeChild(child); |
eff9460bd4f2
add new visualization + small corrections
ymh <ymh.work@gmail.com>
parents:
diff
changeset
|
257 |
}); |
146 | 258 |
//externalize this test to avoid repeated call to the function rescaleScene in the previous loop |
259 |
if (rescale){ |
|
260 |
_this.rescaleScene(); |
|
261 |
} |
|
85
eff9460bd4f2
add new visualization + small corrections
ymh <ymh.work@gmail.com>
parents:
diff
changeset
|
262 |
}; |
eff9460bd4f2
add new visualization + small corrections
ymh <ymh.work@gmail.com>
parents:
diff
changeset
|
263 |
|
93
79ae42ad97d4
optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents:
85
diff
changeset
|
264 |
this.start = function() { |
94
e0e514c5470f
create doubleroll component and modularize app
ymh <ymh.work@gmail.com>
parents:
93
diff
changeset
|
265 |
if(!started) { |
93
79ae42ad97d4
optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents:
85
diff
changeset
|
266 |
this.startTs = Date.now(); |
79ae42ad97d4
optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents:
85
diff
changeset
|
267 |
this.addLine(); |
98 | 268 |
started = true; |
93
79ae42ad97d4
optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents:
85
diff
changeset
|
269 |
} |
98 | 270 |
this.verticalLinesInterval = setInterval(function() { _this.addLine(); }, this.lineInterval); |
271 |
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
|
272 |
}; |
79ae42ad97d4
optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents:
85
diff
changeset
|
273 |
|
79ae42ad97d4
optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents:
85
diff
changeset
|
274 |
this.stop = function() { |
98 | 275 |
clearInterval(this.verticalLinesInterval); |
276 |
clearInterval(this.cleanInterval); |
|
93
79ae42ad97d4
optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents:
85
diff
changeset
|
277 |
}; |
79ae42ad97d4
optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents:
85
diff
changeset
|
278 |
|
85
eff9460bd4f2
add new visualization + small corrections
ymh <ymh.work@gmail.com>
parents:
diff
changeset
|
279 |
} |
eff9460bd4f2
add new visualization + small corrections
ymh <ymh.work@gmail.com>
parents:
diff
changeset
|
280 |
|
eff9460bd4f2
add new visualization + small corrections
ymh <ymh.work@gmail.com>
parents:
diff
changeset
|
281 |
module.exports = PianoRoll; |