author | ymh <ymh.work@gmail.com> |
Fri, 16 Jan 2015 03:16:19 +0100 | |
changeset 93 | 79ae42ad97d4 |
parent 87 | 9611905b58fe |
child 94 | e0e514c5470f |
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 |
* scripts/main.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 |
* This is the starting point for your application. |
eff9460bd4f2
add new visualization + small corrections
ymh <ymh.work@gmail.com>
parents:
diff
changeset
|
5 |
* Take a look at http://browserify.org/ for more info |
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 |
|
93
79ae42ad97d4
optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents:
87
diff
changeset
|
8 |
/* global window: false */ |
79ae42ad97d4
optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents:
87
diff
changeset
|
9 |
/* global document: false */ |
79ae42ad97d4
optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents:
87
diff
changeset
|
10 |
/* global WebSocket: false */ |
79ae42ad97d4
optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents:
87
diff
changeset
|
11 |
/* global MozWebSocket: false */ |
79ae42ad97d4
optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents:
87
diff
changeset
|
12 |
|
79ae42ad97d4
optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents:
87
diff
changeset
|
13 |
/* global eventCode: false */ |
85
eff9460bd4f2
add new visualization + small corrections
ymh <ymh.work@gmail.com>
parents:
diff
changeset
|
14 |
'use strict'; |
eff9460bd4f2
add new visualization + small corrections
ymh <ymh.work@gmail.com>
parents:
diff
changeset
|
15 |
|
eff9460bd4f2
add new visualization + small corrections
ymh <ymh.work@gmail.com>
parents:
diff
changeset
|
16 |
|
eff9460bd4f2
add new visualization + small corrections
ymh <ymh.work@gmail.com>
parents:
diff
changeset
|
17 |
var PIXI = require('pixi'); |
93
79ae42ad97d4
optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents:
87
diff
changeset
|
18 |
var _ = require('lodash'); |
85
eff9460bd4f2
add new visualization + small corrections
ymh <ymh.work@gmail.com>
parents:
diff
changeset
|
19 |
|
93
79ae42ad97d4
optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents:
87
diff
changeset
|
20 |
|
79ae42ad97d4
optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents:
87
diff
changeset
|
21 |
var NTP_EPOCH_DELTA = 2208988800; //c.f. RFC 868 |
85
eff9460bd4f2
add new visualization + small corrections
ymh <ymh.work@gmail.com>
parents:
diff
changeset
|
22 |
// Config vars |
eff9460bd4f2
add new visualization + small corrections
ymh <ymh.work@gmail.com>
parents:
diff
changeset
|
23 |
var logger = false; |
eff9460bd4f2
add new visualization + small corrections
ymh <ymh.work@gmail.com>
parents:
diff
changeset
|
24 |
var sceneWidth = 1920; |
eff9460bd4f2
add new visualization + small corrections
ymh <ymh.work@gmail.com>
parents:
diff
changeset
|
25 |
var prHeight1 = 435; |
eff9460bd4f2
add new visualization + small corrections
ymh <ymh.work@gmail.com>
parents:
diff
changeset
|
26 |
var prHeight2 = 645; |
eff9460bd4f2
add new visualization + small corrections
ymh <ymh.work@gmail.com>
parents:
diff
changeset
|
27 |
var sceneHeight = prHeight1 + prHeight2; |
eff9460bd4f2
add new visualization + small corrections
ymh <ymh.work@gmail.com>
parents:
diff
changeset
|
28 |
var sceneBgColor = 0xFFFFFF; |
eff9460bd4f2
add new visualization + small corrections
ymh <ymh.work@gmail.com>
parents:
diff
changeset
|
29 |
var lineColor = 0x444444; |
eff9460bd4f2
add new visualization + small corrections
ymh <ymh.work@gmail.com>
parents:
diff
changeset
|
30 |
var pixelsPerSecond1 = Math.floor(sceneWidth / 10); // nb of pixels per second |
eff9460bd4f2
add new visualization + small corrections
ymh <ymh.work@gmail.com>
parents:
diff
changeset
|
31 |
var manualFramerate = pixelsPerSecond1 / 4; |
eff9460bd4f2
add new visualization + small corrections
ymh <ymh.work@gmail.com>
parents:
diff
changeset
|
32 |
var pixelsPerSecond2 = Math.floor(sceneWidth / 60); // nb of pixels per second |
eff9460bd4f2
add new visualization + small corrections
ymh <ymh.work@gmail.com>
parents:
diff
changeset
|
33 |
var lineInterval = 5000; // means line every 5 seconds |
93
79ae42ad97d4
optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents:
87
diff
changeset
|
34 |
//var noteHeight = 110; |
85
eff9460bd4f2
add new visualization + small corrections
ymh <ymh.work@gmail.com>
parents:
diff
changeset
|
35 |
var noteColors = [0xB90000, 0x4BDD71, 0xAF931E, 0x1C28BA, 0x536991]; |
eff9460bd4f2
add new visualization + small corrections
ymh <ymh.work@gmail.com>
parents:
diff
changeset
|
36 |
var colorsReg = {}; |
eff9460bd4f2
add new visualization + small corrections
ymh <ymh.work@gmail.com>
parents:
diff
changeset
|
37 |
// Timecode method |
eff9460bd4f2
add new visualization + small corrections
ymh <ymh.work@gmail.com>
parents:
diff
changeset
|
38 |
var offsetMusic = false; |
eff9460bd4f2
add new visualization + small corrections
ymh <ymh.work@gmail.com>
parents:
diff
changeset
|
39 |
|
eff9460bd4f2
add new visualization + small corrections
ymh <ymh.work@gmail.com>
parents:
diff
changeset
|
40 |
|
eff9460bd4f2
add new visualization + small corrections
ymh <ymh.work@gmail.com>
parents:
diff
changeset
|
41 |
//create an new instance of a pixi stage |
eff9460bd4f2
add new visualization + small corrections
ymh <ymh.work@gmail.com>
parents:
diff
changeset
|
42 |
var stage = new PIXI.Stage(sceneBgColor); |
eff9460bd4f2
add new visualization + small corrections
ymh <ymh.work@gmail.com>
parents:
diff
changeset
|
43 |
|
eff9460bd4f2
add new visualization + small corrections
ymh <ymh.work@gmail.com>
parents:
diff
changeset
|
44 |
//create a renderer instance. |
eff9460bd4f2
add new visualization + small corrections
ymh <ymh.work@gmail.com>
parents:
diff
changeset
|
45 |
var renderer = PIXI.autoDetectRenderer(sceneWidth, sceneHeight); |
eff9460bd4f2
add new visualization + small corrections
ymh <ymh.work@gmail.com>
parents:
diff
changeset
|
46 |
|
eff9460bd4f2
add new visualization + small corrections
ymh <ymh.work@gmail.com>
parents:
diff
changeset
|
47 |
//add the renderer view element to the DOM |
eff9460bd4f2
add new visualization + small corrections
ymh <ymh.work@gmail.com>
parents:
diff
changeset
|
48 |
document.getElementById('canvasContainer').appendChild(renderer.view); |
eff9460bd4f2
add new visualization + small corrections
ymh <ymh.work@gmail.com>
parents:
diff
changeset
|
49 |
|
eff9460bd4f2
add new visualization + small corrections
ymh <ymh.work@gmail.com>
parents:
diff
changeset
|
50 |
var uberContainer = new PIXI.DisplayObjectContainer(); |
eff9460bd4f2
add new visualization + small corrections
ymh <ymh.work@gmail.com>
parents:
diff
changeset
|
51 |
uberContainer.position.x = Math.floor(sceneWidth*9/10); |
eff9460bd4f2
add new visualization + small corrections
ymh <ymh.work@gmail.com>
parents:
diff
changeset
|
52 |
uberContainer.position.y = 0; |
eff9460bd4f2
add new visualization + small corrections
ymh <ymh.work@gmail.com>
parents:
diff
changeset
|
53 |
stage.addChild(uberContainer); |
eff9460bd4f2
add new visualization + small corrections
ymh <ymh.work@gmail.com>
parents:
diff
changeset
|
54 |
|
93
79ae42ad97d4
optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents:
87
diff
changeset
|
55 |
var PianoRoll = require('./pianoroll.js'); |
85
eff9460bd4f2
add new visualization + small corrections
ymh <ymh.work@gmail.com>
parents:
diff
changeset
|
56 |
|
eff9460bd4f2
add new visualization + small corrections
ymh <ymh.work@gmail.com>
parents:
diff
changeset
|
57 |
// Init containers |
eff9460bd4f2
add new visualization + small corrections
ymh <ymh.work@gmail.com>
parents:
diff
changeset
|
58 |
var containerList = []; |
93
79ae42ad97d4
optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents:
87
diff
changeset
|
59 |
|
79ae42ad97d4
optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents:
87
diff
changeset
|
60 |
var pianorollOptions = { |
79ae42ad97d4
optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents:
87
diff
changeset
|
61 |
parentContainer: uberContainer, |
79ae42ad97d4
optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents:
87
diff
changeset
|
62 |
xInit: 0, |
79ae42ad97d4
optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents:
87
diff
changeset
|
63 |
width: sceneWidth, |
79ae42ad97d4
optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents:
87
diff
changeset
|
64 |
noteColors: noteColors, |
79ae42ad97d4
optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents:
87
diff
changeset
|
65 |
colorsReg: colorsReg, |
79ae42ad97d4
optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents:
87
diff
changeset
|
66 |
lineColor: lineColor, |
79ae42ad97d4
optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents:
87
diff
changeset
|
67 |
lineInterval: lineInterval, |
79ae42ad97d4
optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents:
87
diff
changeset
|
68 |
offsetMusic: offsetMusic |
79ae42ad97d4
optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents:
87
diff
changeset
|
69 |
}; |
79ae42ad97d4
optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents:
87
diff
changeset
|
70 |
|
79ae42ad97d4
optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents:
87
diff
changeset
|
71 |
|
79ae42ad97d4
optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents:
87
diff
changeset
|
72 |
containerList.push(new PianoRoll(_.extend(_.clone(pianorollOptions), { |
79ae42ad97d4
optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents:
87
diff
changeset
|
73 |
yInit: 0, |
79ae42ad97d4
optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents:
87
diff
changeset
|
74 |
height: prHeight1, |
79ae42ad97d4
optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents:
87
diff
changeset
|
75 |
linesDown: true, |
79ae42ad97d4
optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents:
87
diff
changeset
|
76 |
pixelsPerSecond: pixelsPerSecond1, |
79ae42ad97d4
optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents:
87
diff
changeset
|
77 |
noteHeight: prHeight1 / 128 |
79ae42ad97d4
optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents:
87
diff
changeset
|
78 |
}))); |
79ae42ad97d4
optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents:
87
diff
changeset
|
79 |
containerList.push(new PianoRoll(_.extend(_.clone(pianorollOptions), { |
79ae42ad97d4
optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents:
87
diff
changeset
|
80 |
yInit: prHeight1, |
79ae42ad97d4
optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents:
87
diff
changeset
|
81 |
height: prHeight2, |
79ae42ad97d4
optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents:
87
diff
changeset
|
82 |
linesDown: false, |
79ae42ad97d4
optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents:
87
diff
changeset
|
83 |
pixelsPerSecond: pixelsPerSecond2, |
79ae42ad97d4
optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents:
87
diff
changeset
|
84 |
noteHeight: prHeight2 / 128 |
79ae42ad97d4
optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents:
87
diff
changeset
|
85 |
}))); |
79ae42ad97d4
optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents:
87
diff
changeset
|
86 |
|
85
eff9460bd4f2
add new visualization + small corrections
ymh <ymh.work@gmail.com>
parents:
diff
changeset
|
87 |
|
eff9460bd4f2
add new visualization + small corrections
ymh <ymh.work@gmail.com>
parents:
diff
changeset
|
88 |
// Line between two containers |
eff9460bd4f2
add new visualization + small corrections
ymh <ymh.work@gmail.com>
parents:
diff
changeset
|
89 |
var graphics = new PIXI.Graphics(); |
eff9460bd4f2
add new visualization + small corrections
ymh <ymh.work@gmail.com>
parents:
diff
changeset
|
90 |
graphics.beginFill(0xFFFF00); |
eff9460bd4f2
add new visualization + small corrections
ymh <ymh.work@gmail.com>
parents:
diff
changeset
|
91 |
graphics.lineStyle(1, lineColor); |
eff9460bd4f2
add new visualization + small corrections
ymh <ymh.work@gmail.com>
parents:
diff
changeset
|
92 |
graphics.moveTo(0, prHeight1); |
eff9460bd4f2
add new visualization + small corrections
ymh <ymh.work@gmail.com>
parents:
diff
changeset
|
93 |
graphics.lineTo(sceneWidth, prHeight1); |
eff9460bd4f2
add new visualization + small corrections
ymh <ymh.work@gmail.com>
parents:
diff
changeset
|
94 |
graphics.endFill(); |
eff9460bd4f2
add new visualization + small corrections
ymh <ymh.work@gmail.com>
parents:
diff
changeset
|
95 |
stage.addChild(graphics); |
eff9460bd4f2
add new visualization + small corrections
ymh <ymh.work@gmail.com>
parents:
diff
changeset
|
96 |
|
eff9460bd4f2
add new visualization + small corrections
ymh <ymh.work@gmail.com>
parents:
diff
changeset
|
97 |
|
eff9460bd4f2
add new visualization + small corrections
ymh <ymh.work@gmail.com>
parents:
diff
changeset
|
98 |
function addNotes(data){ |
eff9460bd4f2
add new visualization + small corrections
ymh <ymh.work@gmail.com>
parents:
diff
changeset
|
99 |
var note = data.content[3]; |
eff9460bd4f2
add new visualization + small corrections
ymh <ymh.work@gmail.com>
parents:
diff
changeset
|
100 |
var velocity = data.content[4]; |
93
79ae42ad97d4
optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents:
87
diff
changeset
|
101 |
var ts = (data.content[0] - NTP_EPOCH_DELTA)*1000; |
79ae42ad97d4
optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents:
87
diff
changeset
|
102 |
var channel = data.content[2]; |
79ae42ad97d4
optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents:
87
diff
changeset
|
103 |
var sessionTs = data.content[1]; |
85
eff9460bd4f2
add new visualization + small corrections
ymh <ymh.work@gmail.com>
parents:
diff
changeset
|
104 |
|
93
79ae42ad97d4
optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents:
87
diff
changeset
|
105 |
containerList.forEach(function(c) { |
79ae42ad97d4
optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents:
87
diff
changeset
|
106 |
c.addNote(note, ts, sessionTs, velocity, channel, 0); |
79ae42ad97d4
optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents:
87
diff
changeset
|
107 |
}); |
85
eff9460bd4f2
add new visualization + small corrections
ymh <ymh.work@gmail.com>
parents:
diff
changeset
|
108 |
} |
eff9460bd4f2
add new visualization + small corrections
ymh <ymh.work@gmail.com>
parents:
diff
changeset
|
109 |
|
eff9460bd4f2
add new visualization + small corrections
ymh <ymh.work@gmail.com>
parents:
diff
changeset
|
110 |
|
eff9460bd4f2
add new visualization + small corrections
ymh <ymh.work@gmail.com>
parents:
diff
changeset
|
111 |
|
eff9460bd4f2
add new visualization + small corrections
ymh <ymh.work@gmail.com>
parents:
diff
changeset
|
112 |
// Socket management |
eff9460bd4f2
add new visualization + small corrections
ymh <ymh.work@gmail.com>
parents:
diff
changeset
|
113 |
var sock = null; |
eff9460bd4f2
add new visualization + small corrections
ymh <ymh.work@gmail.com>
parents:
diff
changeset
|
114 |
var ellog = null; |
eff9460bd4f2
add new visualization + small corrections
ymh <ymh.work@gmail.com>
parents:
diff
changeset
|
115 |
function log(m) { |
eff9460bd4f2
add new visualization + small corrections
ymh <ymh.work@gmail.com>
parents:
diff
changeset
|
116 |
if(logger){ |
eff9460bd4f2
add new visualization + small corrections
ymh <ymh.work@gmail.com>
parents:
diff
changeset
|
117 |
ellog.innerHTML += m + '\n'; |
eff9460bd4f2
add new visualization + small corrections
ymh <ymh.work@gmail.com>
parents:
diff
changeset
|
118 |
ellog.scrollTop = ellog.scrollHeight; |
eff9460bd4f2
add new visualization + small corrections
ymh <ymh.work@gmail.com>
parents:
diff
changeset
|
119 |
} |
eff9460bd4f2
add new visualization + small corrections
ymh <ymh.work@gmail.com>
parents:
diff
changeset
|
120 |
} |
eff9460bd4f2
add new visualization + small corrections
ymh <ymh.work@gmail.com>
parents:
diff
changeset
|
121 |
window.onload = function(){ |
eff9460bd4f2
add new visualization + small corrections
ymh <ymh.work@gmail.com>
parents:
diff
changeset
|
122 |
|
eff9460bd4f2
add new visualization + small corrections
ymh <ymh.work@gmail.com>
parents:
diff
changeset
|
123 |
if(logger){ |
eff9460bd4f2
add new visualization + small corrections
ymh <ymh.work@gmail.com>
parents:
diff
changeset
|
124 |
ellog = document.getElementById('log'); |
eff9460bd4f2
add new visualization + small corrections
ymh <ymh.work@gmail.com>
parents:
diff
changeset
|
125 |
} |
eff9460bd4f2
add new visualization + small corrections
ymh <ymh.work@gmail.com>
parents:
diff
changeset
|
126 |
else{ |
eff9460bd4f2
add new visualization + small corrections
ymh <ymh.work@gmail.com>
parents:
diff
changeset
|
127 |
document.body.removeChild(document.getElementById('log')); |
eff9460bd4f2
add new visualization + small corrections
ymh <ymh.work@gmail.com>
parents:
diff
changeset
|
128 |
} |
eff9460bd4f2
add new visualization + small corrections
ymh <ymh.work@gmail.com>
parents:
diff
changeset
|
129 |
|
eff9460bd4f2
add new visualization + small corrections
ymh <ymh.work@gmail.com>
parents:
diff
changeset
|
130 |
var wsuri; |
eff9460bd4f2
add new visualization + small corrections
ymh <ymh.work@gmail.com>
parents:
diff
changeset
|
131 |
if (window.location.protocol === 'file:') { |
eff9460bd4f2
add new visualization + small corrections
ymh <ymh.work@gmail.com>
parents:
diff
changeset
|
132 |
wsuri = 'ws://127.0.0.1:8090/broadcast'; |
eff9460bd4f2
add new visualization + small corrections
ymh <ymh.work@gmail.com>
parents:
diff
changeset
|
133 |
} else { |
eff9460bd4f2
add new visualization + small corrections
ymh <ymh.work@gmail.com>
parents:
diff
changeset
|
134 |
wsuri = 'ws://' + window.location.hostname + ':8090/broadcast'; |
eff9460bd4f2
add new visualization + small corrections
ymh <ymh.work@gmail.com>
parents:
diff
changeset
|
135 |
} |
eff9460bd4f2
add new visualization + small corrections
ymh <ymh.work@gmail.com>
parents:
diff
changeset
|
136 |
wsuri = wsuri + '?channel=PIANOROLL&event_code='+eventCode; |
eff9460bd4f2
add new visualization + small corrections
ymh <ymh.work@gmail.com>
parents:
diff
changeset
|
137 |
|
eff9460bd4f2
add new visualization + small corrections
ymh <ymh.work@gmail.com>
parents:
diff
changeset
|
138 |
if ('WebSocket' in window) { |
eff9460bd4f2
add new visualization + small corrections
ymh <ymh.work@gmail.com>
parents:
diff
changeset
|
139 |
sock = new WebSocket(wsuri); |
eff9460bd4f2
add new visualization + small corrections
ymh <ymh.work@gmail.com>
parents:
diff
changeset
|
140 |
} else if ('MozWebSocket' in window) { |
eff9460bd4f2
add new visualization + small corrections
ymh <ymh.work@gmail.com>
parents:
diff
changeset
|
141 |
sock = new MozWebSocket(wsuri); |
eff9460bd4f2
add new visualization + small corrections
ymh <ymh.work@gmail.com>
parents:
diff
changeset
|
142 |
} else { |
eff9460bd4f2
add new visualization + small corrections
ymh <ymh.work@gmail.com>
parents:
diff
changeset
|
143 |
log('Browser does not support WebSocket!'); |
eff9460bd4f2
add new visualization + small corrections
ymh <ymh.work@gmail.com>
parents:
diff
changeset
|
144 |
window.location = 'http://autobahn.ws/unsupportedbrowser'; |
eff9460bd4f2
add new visualization + small corrections
ymh <ymh.work@gmail.com>
parents:
diff
changeset
|
145 |
} |
eff9460bd4f2
add new visualization + small corrections
ymh <ymh.work@gmail.com>
parents:
diff
changeset
|
146 |
|
eff9460bd4f2
add new visualization + small corrections
ymh <ymh.work@gmail.com>
parents:
diff
changeset
|
147 |
if (sock) { |
eff9460bd4f2
add new visualization + small corrections
ymh <ymh.work@gmail.com>
parents:
diff
changeset
|
148 |
sock.onopen = function(){ |
eff9460bd4f2
add new visualization + small corrections
ymh <ymh.work@gmail.com>
parents:
diff
changeset
|
149 |
if(logger){ |
eff9460bd4f2
add new visualization + small corrections
ymh <ymh.work@gmail.com>
parents:
diff
changeset
|
150 |
log('Connected to ' + wsuri); |
eff9460bd4f2
add new visualization + small corrections
ymh <ymh.work@gmail.com>
parents:
diff
changeset
|
151 |
} |
eff9460bd4f2
add new visualization + small corrections
ymh <ymh.work@gmail.com>
parents:
diff
changeset
|
152 |
}; |
eff9460bd4f2
add new visualization + small corrections
ymh <ymh.work@gmail.com>
parents:
diff
changeset
|
153 |
|
eff9460bd4f2
add new visualization + small corrections
ymh <ymh.work@gmail.com>
parents:
diff
changeset
|
154 |
sock.onclose = function(e) { |
eff9460bd4f2
add new visualization + small corrections
ymh <ymh.work@gmail.com>
parents:
diff
changeset
|
155 |
if(logger){ |
eff9460bd4f2
add new visualization + small corrections
ymh <ymh.work@gmail.com>
parents:
diff
changeset
|
156 |
log('Connection closed (wasClean = ' + e.wasClean + ', code = ' + e.code + ', reason = \'' + e.reason + '\')'); |
eff9460bd4f2
add new visualization + small corrections
ymh <ymh.work@gmail.com>
parents:
diff
changeset
|
157 |
} |
eff9460bd4f2
add new visualization + small corrections
ymh <ymh.work@gmail.com>
parents:
diff
changeset
|
158 |
sock = null; |
eff9460bd4f2
add new visualization + small corrections
ymh <ymh.work@gmail.com>
parents:
diff
changeset
|
159 |
}; |
eff9460bd4f2
add new visualization + small corrections
ymh <ymh.work@gmail.com>
parents:
diff
changeset
|
160 |
|
eff9460bd4f2
add new visualization + small corrections
ymh <ymh.work@gmail.com>
parents:
diff
changeset
|
161 |
sock.onmessage = function(e) { |
93
79ae42ad97d4
optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents:
87
diff
changeset
|
162 |
var dataJson = JSON.parse(e.data); |
79ae42ad97d4
optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents:
87
diff
changeset
|
163 |
var dataDate = new Date((dataJson.content[0]-NTP_EPOCH_DELTA)*1000); |
85
eff9460bd4f2
add new visualization + small corrections
ymh <ymh.work@gmail.com>
parents:
diff
changeset
|
164 |
if(logger){ |
93
79ae42ad97d4
optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents:
87
diff
changeset
|
165 |
log('Got message: ' + e.data + ' - ' + dataDate.toISOString()); |
85
eff9460bd4f2
add new visualization + small corrections
ymh <ymh.work@gmail.com>
parents:
diff
changeset
|
166 |
} |
93
79ae42ad97d4
optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents:
87
diff
changeset
|
167 |
addNotes(dataJson); |
85
eff9460bd4f2
add new visualization + small corrections
ymh <ymh.work@gmail.com>
parents:
diff
changeset
|
168 |
}; |
eff9460bd4f2
add new visualization + small corrections
ymh <ymh.work@gmail.com>
parents:
diff
changeset
|
169 |
} |
eff9460bd4f2
add new visualization + small corrections
ymh <ymh.work@gmail.com>
parents:
diff
changeset
|
170 |
}; |
eff9460bd4f2
add new visualization + small corrections
ymh <ymh.work@gmail.com>
parents:
diff
changeset
|
171 |
|
93
79ae42ad97d4
optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents:
87
diff
changeset
|
172 |
function refreshStage() { |
79ae42ad97d4
optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents:
87
diff
changeset
|
173 |
containerList.forEach(function(c) { |
79ae42ad97d4
optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents:
87
diff
changeset
|
174 |
c.move(); |
79ae42ad97d4
optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents:
87
diff
changeset
|
175 |
}); |
79ae42ad97d4
optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents:
87
diff
changeset
|
176 |
renderer.render(stage); |
79ae42ad97d4
optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents:
87
diff
changeset
|
177 |
} |
79ae42ad97d4
optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents:
87
diff
changeset
|
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 |
// Init page and intervals |
93
79ae42ad97d4
optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents:
87
diff
changeset
|
181 |
var refreshInterval; |
79ae42ad97d4
optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents:
87
diff
changeset
|
182 |
|
79ae42ad97d4
optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents:
87
diff
changeset
|
183 |
function start() { |
79ae42ad97d4
optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents:
87
diff
changeset
|
184 |
refreshInterval = window.setInterval(refreshStage, 1000/manualFramerate); |
79ae42ad97d4
optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents:
87
diff
changeset
|
185 |
containerList.forEach(function(c) { |
79ae42ad97d4
optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents:
87
diff
changeset
|
186 |
c.start(); |
79ae42ad97d4
optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents:
87
diff
changeset
|
187 |
}); |
79ae42ad97d4
optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents:
87
diff
changeset
|
188 |
} |
85
eff9460bd4f2
add new visualization + small corrections
ymh <ymh.work@gmail.com>
parents:
diff
changeset
|
189 |
|
93
79ae42ad97d4
optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents:
87
diff
changeset
|
190 |
function stop() { |
79ae42ad97d4
optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents:
87
diff
changeset
|
191 |
window.clearInterval(refreshInterval); |
79ae42ad97d4
optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents:
87
diff
changeset
|
192 |
containerList.forEach(function(c) { |
79ae42ad97d4
optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents:
87
diff
changeset
|
193 |
c.stop(); |
79ae42ad97d4
optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents:
87
diff
changeset
|
194 |
}); |
79ae42ad97d4
optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents:
87
diff
changeset
|
195 |
} |
79ae42ad97d4
optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents:
87
diff
changeset
|
196 |
|
79ae42ad97d4
optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents:
87
diff
changeset
|
197 |
// Little interval to show time |
85
eff9460bd4f2
add new visualization + small corrections
ymh <ymh.work@gmail.com>
parents:
diff
changeset
|
198 |
var nbSec = 0; |
eff9460bd4f2
add new visualization + small corrections
ymh <ymh.work@gmail.com>
parents:
diff
changeset
|
199 |
var mySpan = document.getElementById('myspan'); |
eff9460bd4f2
add new visualization + small corrections
ymh <ymh.work@gmail.com>
parents:
diff
changeset
|
200 |
function updateTime(){ |
eff9460bd4f2
add new visualization + small corrections
ymh <ymh.work@gmail.com>
parents:
diff
changeset
|
201 |
nbSec++; |
eff9460bd4f2
add new visualization + small corrections
ymh <ymh.work@gmail.com>
parents:
diff
changeset
|
202 |
var hours = parseInt( nbSec / 3600 ) % 24; |
eff9460bd4f2
add new visualization + small corrections
ymh <ymh.work@gmail.com>
parents:
diff
changeset
|
203 |
var minutes = parseInt( nbSec / 60 ) % 60; |
eff9460bd4f2
add new visualization + small corrections
ymh <ymh.work@gmail.com>
parents:
diff
changeset
|
204 |
var seconds = nbSec % 60; |
eff9460bd4f2
add new visualization + small corrections
ymh <ymh.work@gmail.com>
parents:
diff
changeset
|
205 |
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
|
206 |
mySpan.innerHTML = timeStr; |
eff9460bd4f2
add new visualization + small corrections
ymh <ymh.work@gmail.com>
parents:
diff
changeset
|
207 |
} |
93
79ae42ad97d4
optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents:
87
diff
changeset
|
208 |
window.setInterval(updateTime, 1000); |
79ae42ad97d4
optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents:
87
diff
changeset
|
209 |
|
79ae42ad97d4
optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents:
87
diff
changeset
|
210 |
start(); |
85
eff9460bd4f2
add new visualization + small corrections
ymh <ymh.work@gmail.com>
parents:
diff
changeset
|
211 |
|
eff9460bd4f2
add new visualization + small corrections
ymh <ymh.work@gmail.com>
parents:
diff
changeset
|
212 |
module.exports = { |
93
79ae42ad97d4
optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents:
87
diff
changeset
|
213 |
start: start, |
79ae42ad97d4
optimize and refactor pianoroll component
ymh <ymh.work@gmail.com>
parents:
87
diff
changeset
|
214 |
stop: stop, |
85
eff9460bd4f2
add new visualization + small corrections
ymh <ymh.work@gmail.com>
parents:
diff
changeset
|
215 |
}; |