3 * |
3 * |
4 * This is the starting point for your application. |
4 * This is the starting point for your application. |
5 * Take a look at http://browserify.org/ for more info |
5 * Take a look at http://browserify.org/ for more info |
6 */ |
6 */ |
7 |
7 |
|
8 /* global window: false */ |
|
9 /* global document: false */ |
|
10 /* global WebSocket: false */ |
|
11 /* global MozWebSocket: false */ |
|
12 |
|
13 /* global eventCode: false */ |
8 'use strict'; |
14 'use strict'; |
9 |
15 |
10 |
16 |
11 var PIXI = require('pixi'); |
17 var PIXI = require('pixi'); |
12 |
18 var _ = require('lodash'); |
|
19 |
|
20 |
|
21 var NTP_EPOCH_DELTA = 2208988800; //c.f. RFC 868 |
13 // Config vars |
22 // Config vars |
14 var logger = false; |
23 var logger = false; |
15 var sceneWidth = 1920; |
24 var sceneWidth = 1920; |
16 var prHeight1 = 435; |
25 var prHeight1 = 435; |
17 var prHeight2 = 645; |
26 var prHeight2 = 645; |
20 var lineColor = 0x444444; |
29 var lineColor = 0x444444; |
21 var pixelsPerSecond1 = Math.floor(sceneWidth / 10); // nb of pixels per second |
30 var pixelsPerSecond1 = Math.floor(sceneWidth / 10); // nb of pixels per second |
22 var manualFramerate = pixelsPerSecond1 / 4; |
31 var manualFramerate = pixelsPerSecond1 / 4; |
23 var pixelsPerSecond2 = Math.floor(sceneWidth / 60); // nb of pixels per second |
32 var pixelsPerSecond2 = Math.floor(sceneWidth / 60); // nb of pixels per second |
24 var lineInterval = 5000; // means line every 5 seconds |
33 var lineInterval = 5000; // means line every 5 seconds |
25 var nbLines = -1; |
34 //var noteHeight = 110; |
26 var noteHeight = 110; |
|
27 var noteColors = [0xB90000, 0x4BDD71, 0xAF931E, 0x1C28BA, 0x536991]; |
35 var noteColors = [0xB90000, 0x4BDD71, 0xAF931E, 0x1C28BA, 0x536991]; |
28 var colorsReg = {}; |
36 var colorsReg = {}; |
29 // Vars |
|
30 var noteDict = []; |
|
31 // Timecode method |
37 // Timecode method |
32 var timePageLoaded = Date.now(); |
|
33 var offsetMusic = false; |
38 var offsetMusic = false; |
34 |
39 |
35 |
40 |
36 //create an new instance of a pixi stage |
41 //create an new instance of a pixi stage |
37 var stage = new PIXI.Stage(sceneBgColor); |
42 var stage = new PIXI.Stage(sceneBgColor); |
45 var uberContainer = new PIXI.DisplayObjectContainer(); |
50 var uberContainer = new PIXI.DisplayObjectContainer(); |
46 uberContainer.position.x = Math.floor(sceneWidth*9/10); |
51 uberContainer.position.x = Math.floor(sceneWidth*9/10); |
47 uberContainer.position.y = 0; |
52 uberContainer.position.y = 0; |
48 stage.addChild(uberContainer); |
53 stage.addChild(uberContainer); |
49 |
54 |
50 var PianoRoll = require('./pianoroll.js') |
55 var PianoRoll = require('./pianoroll.js'); |
51 |
56 |
52 // Init containers |
57 // Init containers |
53 var containerList = []; |
58 var containerList = []; |
54 containerList.push(new PianoRoll(uberContainer, 0, 0, prHeight1, true, pixelsPerSecond1, sceneWidth, noteColors, colorsReg, lineColor, lineInterval, offsetMusic, prHeight1 / 128)); |
59 |
55 containerList.push(new PianoRoll(uberContainer, 0, prHeight1, prHeight2, false, pixelsPerSecond2, sceneWidth, noteColors, colorsReg, lineColor, lineInterval, offsetMusic, prHeight2 / 128)); |
60 var pianorollOptions = { |
|
61 parentContainer: uberContainer, |
|
62 xInit: 0, |
|
63 width: sceneWidth, |
|
64 noteColors: noteColors, |
|
65 colorsReg: colorsReg, |
|
66 lineColor: lineColor, |
|
67 lineInterval: lineInterval, |
|
68 offsetMusic: offsetMusic |
|
69 }; |
|
70 |
|
71 |
|
72 containerList.push(new PianoRoll(_.extend(_.clone(pianorollOptions), { |
|
73 yInit: 0, |
|
74 height: prHeight1, |
|
75 linesDown: true, |
|
76 pixelsPerSecond: pixelsPerSecond1, |
|
77 noteHeight: prHeight1 / 128 |
|
78 }))); |
|
79 containerList.push(new PianoRoll(_.extend(_.clone(pianorollOptions), { |
|
80 yInit: prHeight1, |
|
81 height: prHeight2, |
|
82 linesDown: false, |
|
83 pixelsPerSecond: pixelsPerSecond2, |
|
84 noteHeight: prHeight2 / 128 |
|
85 }))); |
|
86 |
56 |
87 |
57 // Line between two containers |
88 // Line between two containers |
58 var graphics = new PIXI.Graphics(); |
89 var graphics = new PIXI.Graphics(); |
59 graphics.beginFill(0xFFFF00); |
90 graphics.beginFill(0xFFFF00); |
60 graphics.lineStyle(1, lineColor); |
91 graphics.lineStyle(1, lineColor); |
62 graphics.lineTo(sceneWidth, prHeight1); |
93 graphics.lineTo(sceneWidth, prHeight1); |
63 graphics.endFill(); |
94 graphics.endFill(); |
64 stage.addChild(graphics); |
95 stage.addChild(graphics); |
65 |
96 |
66 |
97 |
67 function replaceContainers(){ |
|
68 var diff = (Date.now() - timePageLoaded)/1000;// nb of seconds since page loaded |
|
69 //console.log("replace ! diff1 = ", container1.x - Math.floor(-diff*pixelsPerSecond1), ", diff 2 = ", container2.x - Math.floor(-diff*pixelsPerSecond2)); |
|
70 for(var i=0;i<containerList.length;i++){ |
|
71 containerList[i].moveTo(-diff); |
|
72 } |
|
73 renderer.render(stage); |
|
74 } |
|
75 |
|
76 function addNotes(data){ |
98 function addNotes(data){ |
77 if(!offsetMusic){ |
|
78 // get difference between the current note timecode and my zero to set the difference between the canvas's zero and the music's zero |
|
79 // in order to place in real time |
|
80 var now = Date.now(); |
|
81 var timeBetweenNowAndStart = now - timePageLoaded; |
|
82 offsetMusic = timeBetweenNowAndStart - data.content[1]; |
|
83 //console.log("start: ", timePageLoaded, ", now: ", now, ", timeBetweenNowAndStart = ", timeBetweenNowAndStart, ", offsetMusic = ", offsetMusic); |
|
84 } |
|
85 var note = data.content[3]; |
99 var note = data.content[3]; |
86 var velocity = data.content[4]; |
100 var velocity = data.content[4]; |
87 if(velocity===0){ |
101 var ts = (data.content[0] - NTP_EPOCH_DELTA)*1000; |
88 if(typeof noteDict[data.content[2]][note]!=='undefined'){ |
102 var channel = data.content[2]; |
89 // We close the note in container one |
103 var sessionTs = data.content[1]; |
90 //console.log("coucou 2", data); |
104 |
91 var duration = data.content[1] - noteDict[data.content[2]][note].ts; |
105 containerList.forEach(function(c) { |
92 for(var i=0;i<containerList.length;i++){ |
106 c.addNote(note, ts, sessionTs, velocity, channel, 0); |
93 // addNote(note, startTime, duration, velocity, canal) |
107 }); |
94 containerList[i].addNote(note, noteDict[data.content[2]][note].ts, duration, noteDict[data.content[2]][note].velocity, data.content[2]); |
|
95 } |
|
96 // delete entry |
|
97 delete noteDict[data.content[2]][note]; |
|
98 } |
|
99 } |
|
100 else{ |
|
101 if(typeof noteDict[data.content[2]]==='undefined'){ |
|
102 noteDict[data.content[2]] = {}; |
|
103 } |
|
104 noteDict[data.content[2]][note] = {ts: data.content[1], velocity:velocity}; |
|
105 } |
|
106 } |
|
107 |
|
108 function addLine(){ |
|
109 var ts = new Date(); |
|
110 for(var i=0;i<containerList.length;i++){ |
|
111 containerList[i].addLine(ts); |
|
112 } |
|
113 } |
108 } |
114 |
109 |
115 |
110 |
116 |
111 |
117 // Socket management |
112 // Socket management |
162 } |
157 } |
163 sock = null; |
158 sock = null; |
164 }; |
159 }; |
165 |
160 |
166 sock.onmessage = function(e) { |
161 sock.onmessage = function(e) { |
|
162 var dataJson = JSON.parse(e.data); |
|
163 var dataDate = new Date((dataJson.content[0]-NTP_EPOCH_DELTA)*1000); |
167 if(logger){ |
164 if(logger){ |
168 log('Got message: ' + e.data); |
165 log('Got message: ' + e.data + ' - ' + dataDate.toISOString()); |
169 } |
166 } |
170 addNotes(JSON.parse(e.data)); |
167 addNotes(dataJson); |
171 }; |
168 }; |
172 } |
169 } |
173 }; |
170 }; |
174 |
171 |
|
172 function refreshStage() { |
|
173 containerList.forEach(function(c) { |
|
174 c.move(); |
|
175 }); |
|
176 renderer.render(stage); |
|
177 } |
|
178 |
175 |
179 |
176 // Init page and intervals |
180 // Init page and intervals |
177 addLine(); |
181 var refreshInterval; |
178 var moveInterval = window.setInterval(replaceContainers, 1000/manualFramerate); |
182 |
179 var verticalLinesInterval = window.setInterval(addLine, lineInterval); |
183 function start() { |
180 |
184 refreshInterval = window.setInterval(refreshStage, 1000/manualFramerate); |
181 // Little inteval to show time |
185 containerList.forEach(function(c) { |
|
186 c.start(); |
|
187 }); |
|
188 } |
|
189 |
|
190 function stop() { |
|
191 window.clearInterval(refreshInterval); |
|
192 containerList.forEach(function(c) { |
|
193 c.stop(); |
|
194 }); |
|
195 } |
|
196 |
|
197 // Little interval to show time |
182 var nbSec = 0; |
198 var nbSec = 0; |
183 var mySpan = document.getElementById('myspan'); |
199 var mySpan = document.getElementById('myspan'); |
184 function updateTime(){ |
200 function updateTime(){ |
185 nbSec++; |
201 nbSec++; |
186 var hours = parseInt( nbSec / 3600 ) % 24; |
202 var hours = parseInt( nbSec / 3600 ) % 24; |
187 var minutes = parseInt( nbSec / 60 ) % 60; |
203 var minutes = parseInt( nbSec / 60 ) % 60; |
188 var seconds = nbSec % 60; |
204 var seconds = nbSec % 60; |
189 var timeStr = (hours < 10 ? '0' + hours : hours) + ':' + (minutes < 10 ? '0' + minutes : minutes) + ':' + (seconds < 10 ? '0' + seconds : seconds); |
205 var timeStr = (hours < 10 ? '0' + hours : hours) + ':' + (minutes < 10 ? '0' + minutes : minutes) + ':' + (seconds < 10 ? '0' + seconds : seconds); |
190 mySpan.innerHTML = timeStr; |
206 mySpan.innerHTML = timeStr; |
191 } |
207 } |
192 var secondInterval = window.setInterval(updateTime, 1000); |
208 window.setInterval(updateTime, 1000); |
|
209 |
|
210 start(); |
193 |
211 |
194 module.exports = { |
212 module.exports = { |
195 moveInterval: moveInterval, |
213 start: start, |
196 verticalLinesInterval: verticalLinesInterval, |
214 stop: stop, |
197 secondInterval: secondInterval |
|
198 }; |
215 }; |