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