8 'use strict'; |
8 'use strict'; |
9 |
9 |
10 var PIXI = require('pixi'); |
10 var PIXI = require('pixi'); |
11 var randomColor = require('randomColor'); |
11 var randomColor = require('randomColor'); |
12 |
12 |
13 function PianoRoll(parentContainer, xInit, yInit, height, linesDown, pixelsPerSecond, width, noteColors, colorsReg, lineColor, lineInterval, offsetMusic, noteHeight){ |
13 function PianoRoll(parentContainer, xInit, yInit, height, linesDown, pixelsPerSecond, width, noteColors, colorsReg, lineColor, lineInterval, offsetMusic, noteHeight, horizontalView){ |
14 var _this = this; |
14 var _this = this; |
15 this.container = new PIXI.DisplayObjectContainer(); |
15 this.container = new PIXI.DisplayObjectContainer(); |
16 this.container.position.x = xInit; |
16 this.container.position.x = xInit; |
17 this.container.position.y = yInit; |
17 this.container.position.y = yInit; |
|
18 if (!horizontalView){ |
|
19 this.container.width = width; |
|
20 } |
18 parentContainer.addChild(this.container); |
21 parentContainer.addChild(this.container); |
19 |
22 |
20 this.linesDown = linesDown; |
23 this.linesDown = linesDown; |
21 this.height = height; |
24 this.height = height; |
22 this.pixelsPerSecond = pixelsPerSecond; |
25 this.pixelsPerSecond = pixelsPerSecond; |
27 this.lineInterval = lineInterval; |
30 this.lineInterval = lineInterval; |
28 this.offsetMusic = offsetMusic || 0; |
31 this.offsetMusic = offsetMusic || 0; |
29 this.noteHeight = noteHeight; |
32 this.noteHeight = noteHeight; |
30 |
33 |
31 this.addNote = function(note, startTime, duration, velocity, canal){ |
34 this.addNote = function(note, startTime, duration, velocity, canal){ |
32 //console.log("coucou 1", note, timeFromZero, ts, velocity, pixelsPerSecond, container, prHeight); |
35 var begin = (this.offsetMusic + startTime) * this.pixelsPerSecond / 1000; |
33 var beginX = (this.offsetMusic + startTime) * this.pixelsPerSecond / 1000; |
36 if (horizontalView){ |
34 var width = duration * this.pixelsPerSecond / 1000; |
37 var width = duration * this.pixelsPerSecond / 1000; |
35 if((beginX+width) < (Math.abs(this.container.x) - this.width)) { |
38 if((begin+width) < (Math.abs(this.container.x) - this.width)) { |
36 // not visible. do nothing |
39 // not visible. do nothing |
37 return; |
40 return; |
|
41 } |
|
42 } else { |
|
43 var height = duration * this.pixelsPerSecond / 1000; |
|
44 if((begin+height) < (Math.abs(this.container.y) - this.height)) { |
|
45 // not visible. do nothing |
|
46 return; |
|
47 } |
38 } |
48 } |
39 // We draw the rectangle |
49 // We draw the rectangle |
40 var graphics = new PIXI.Graphics(); |
50 var graphics = new PIXI.Graphics(); |
41 //console.log("beginX = ", beginX, "canal = ", canal, "color = ", noteColor[canal], "width = ", width, "note = ", note, "velocity = ", velocity); |
|
42 var color = this.colorsReg[canal]; |
51 var color = this.colorsReg[canal]; |
43 if(typeof(color) === 'undefined') { |
52 if(typeof(color) === 'undefined') { |
44 var colorsRegSize = Object.keys(this.colorsReg).length; |
53 var colorsRegSize = Object.keys(this.colorsReg).length; |
45 if(colorsRegSize < this.noteColors.length) { |
54 if(colorsRegSize < this.noteColors.length) { |
46 color = this.colorsReg[canal] = this.noteColors[colorsRegSize]; |
55 color = this.colorsReg[canal] = this.noteColors[colorsRegSize]; |
48 else { |
57 else { |
49 color = this.colorsReg[canal] = parseInt(randomColor({ luminosity: 'light', hue: 'random', format:'hex'}).replace(/^#/, ''), 16); |
58 color = this.colorsReg[canal] = parseInt(randomColor({ luminosity: 'light', hue: 'random', format:'hex'}).replace(/^#/, ''), 16); |
50 } |
59 } |
51 } |
60 } |
52 graphics.beginFill(color, (velocity / 128)); |
61 graphics.beginFill(color, (velocity / 128)); |
53 var y = (128-note) * this.height / 128; // (128-note) because y = 0 is for note = 128 and y = 128 for note = 0 |
62 if (horizontalView){ |
54 graphics.drawRect(0, Math.floor(y - (noteHeight/2) + ((this.height / 128)/2)), width, noteHeight); |
63 var y = (128-note) * this.height / 128; // (128-note) because y = 0 is for note = 128 and y = 128 for note = 0 |
55 graphics.endFill(); |
64 graphics.drawRect(0, Math.floor(y - (noteHeight/2) + ((this.height / 128)/2)), width, noteHeight); |
56 graphics.x = beginX; |
65 graphics.endFill(); |
|
66 graphics.x = begin; |
|
67 } else { |
|
68 var x = (128-note) * this.width / 128; // (128-note) because y = 0 is for note = 128 and y = 128 for note = 0 |
|
69 graphics.drawRect(Math.floor(x - (noteHeight/2) + ((this.width / 128)/2)), 0, noteHeight, height); |
|
70 graphics.endFill(); |
|
71 graphics.y = begin; |
|
72 } |
57 this.container.addChild(graphics); |
73 this.container.addChild(graphics); |
58 }; |
74 }; |
59 |
75 |
60 this.addLine = function(ts){ |
76 this.addLine = function(ts){ |
61 var graphics = new PIXI.Graphics(); |
77 var graphics = new PIXI.Graphics(); |
62 var x = -this.container.x; |
78 if (horizontalView){ |
|
79 var x = -this.container.x; |
|
80 var y = this.linesDown ? this.height - 20 : 0; |
|
81 } else { |
|
82 var x = this.linesDown ? 0 : this.width - 20 ; |
|
83 var y = -this.container.y; |
|
84 } |
63 graphics.beginFill(0xFFFF00); |
85 graphics.beginFill(0xFFFF00); |
64 graphics.lineStyle(1, this.lineColor); |
86 graphics.lineStyle(1, this.lineColor); |
65 var y = this.linesDown ? this.height - 20 : 0; |
|
66 graphics.moveTo(x, y); |
87 graphics.moveTo(x, y); |
67 graphics.lineTo(x, y + 20); |
88 if (horizontalView){ |
|
89 graphics.lineTo(x, y + 20); |
|
90 } else { |
|
91 graphics.lineTo(x + 20, y); |
|
92 } |
68 graphics.endFill(); |
93 graphics.endFill(); |
69 this.container.addChild(graphics); |
94 this.container.addChild(graphics); |
70 // Add text |
95 // Add text |
71 //var totalSec = lineNb * this.lineInterval / 1000; |
96 //var totalSec = lineNb * this.lineInterval / 1000; |
72 var hours = ts.getHours(); |
97 var hours = ts.getHours(); |
74 var seconds = ts.getSeconds(); |
99 var seconds = ts.getSeconds(); |
75 var timeStr = (hours < 10 ? '0' + hours : hours) + ':' + (minutes < 10 ? '0' + minutes : minutes) + ':' + (seconds < 10 ? '0' + seconds : seconds); |
100 var timeStr = (hours < 10 ? '0' + hours : hours) + ':' + (minutes < 10 ? '0' + minutes : minutes) + ':' + (seconds < 10 ? '0' + seconds : seconds); |
76 |
101 |
77 var fontObj = { font: '10pt Arial', fill: '#444444' }; |
102 var fontObj = { font: '10pt Arial', fill: '#444444' }; |
78 var t = new PIXI.Text(timeStr, fontObj); |
103 var t = new PIXI.Text(timeStr, fontObj); |
79 t.x = x + 2; |
104 if (horizontalView){ |
80 t.y = this.linesDown ? this.height - 15 : 2; |
105 t.x = x + 2; |
|
106 t.y = this.linesDown ? this.height - 15 : 2; |
|
107 } else { |
|
108 t.x = this.linesDown ? 2 : this.width - 55; |
|
109 t.y = y + 2; |
|
110 } |
81 this.container.addChild(t); |
111 this.container.addChild(t); |
82 }; |
112 }; |
83 |
113 |
84 this.moveTo = function(diffTime){ |
114 this.moveTo = function(diffTime){ |
85 this.container.x = Math.floor(diffTime*this.pixelsPerSecond); |
115 if (horizontalView){ |
|
116 this.container.x = Math.floor(diffTime*this.pixelsPerSecond); |
|
117 } else { |
|
118 this.container.y = Math.floor(diffTime*this.pixelsPerSecond); |
|
119 } |
86 }; |
120 }; |
87 |
121 |
88 this.removePassedObjets = function(){ |
122 this.removePassedObjets = function(){ |
89 var nbChilds = _this.container.children.length; |
123 var nbChilds = _this.container.children.length; |
90 var i = 0, childIsNowDisplayed = false, childrenToRemove = []; |
124 var i = 0, childIsNowDisplayed = false, childrenToRemove = []; |
91 while(i<nbChilds && !childIsNowDisplayed){ |
125 while(i<nbChilds && !childIsNowDisplayed){ |
92 var child = _this.container.children[i++]; |
126 var child = _this.container.children[i++]; |
93 //console.log("remove ? ", child.x, child.width, ((child.x + child.width) < (Math.abs(_this.container.x) - _this.width))); |
|
94 if(typeof(child) == 'undefined') { |
127 if(typeof(child) == 'undefined') { |
95 continue; |
128 continue; |
96 } |
129 } |
97 if((child.x + child.width) < (Math.abs(_this.container.x) - _this.width)){ |
130 if (horizontalView){ |
98 childrenToRemove.push(child); |
131 if((child.x + child.width) < (Math.abs(_this.container.x) - _this.width)){ |
99 //console.log(" remove !!!"); |
132 childrenToRemove.push(child); |
100 } |
133 } |
101 else { |
134 else { |
102 childIsNowDisplayed = true; |
135 childIsNowDisplayed = true; |
103 //console.log(" childIsNowDisplayed"); |
136 } |
|
137 } else { |
|
138 if((child.y + child.height) < (Math.abs(_this.container.y) - _this.height)){ |
|
139 childrenToRemove.push(child); |
|
140 } |
|
141 else { |
|
142 childIsNowDisplayed = true; |
|
143 } |
104 } |
144 } |
105 } |
145 } |
106 childrenToRemove.forEach(function(child) { |
146 childrenToRemove.forEach(function(child) { |
107 _this.container.removeChild(child); |
147 _this.container.removeChild(child); |
108 }); |
148 }); |
109 //console.log("before : ", nbChilds, ", after : ", _this.container.children.length); |
|
110 }; |
149 }; |
111 |
150 |
112 // remove notes each scene width |
151 // remove notes each scene width |
113 //var removeInterval = window.setInterval(this.removePassedObjets, 1000 * sceneWidth / this.pixelsPerSecond ); |
152 //var removeInterval = window.setInterval(this.removePassedObjets, 1000 * sceneWidth / this.pixelsPerSecond ); |
114 window.setInterval(this.removePassedObjets, 1000 * this.width / this.pixelsPerSecond ); |
153 if (horizontalView){ |
|
154 window.setInterval(this.removePassedObjets, 1000 * this.width / this.pixelsPerSecond ); |
|
155 } else { |
|
156 window.setInterval(this.removePassedObjets, 1000 * this.height / this.pixelsPerSecond ); |
|
157 } |
115 |
158 |
116 } |
159 } |
117 |
160 |
118 module.exports = PianoRoll; |
161 module.exports = PianoRoll; |