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