client/annotviz/app/js/main.js
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--
optimize and refactor pianoroll component
Ignore whitespace changes - Everywhere: Within whitespace: At end of lines:
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
};