1 /**

     2  * scripts/main.js

     3  *

     4  * This is the starting point for your application.

     5  * Take a look at http://browserify.org/ for more info

     6  */

     7 

     8 'use strict';

     9 

    10 

    11 var PIXI = require('pixi');

    12 

    13 // Config vars

    14 var logger = false;

    15 var sceneWidth = 1920;

    16 var prHeight1 = 435;

    17 var prHeight2 = 645;

    18 var sceneHeight = prHeight1 + prHeight2;

    19 var sceneBgColor = 0xFFFFFF;

    20 var lineColor = 0x444444;

    21 var pixelsPerSecond1 = Math.floor(sceneWidth / 10); // nb of pixels per second

    22 var manualFramerate = pixelsPerSecond1 / 4;

    23 var pixelsPerSecond2 = Math.floor(sceneWidth / 60); // nb of pixels per second

    24 var lineInterval = 5000; // means line every 5 seconds

    25 var nbLines = -1;

    26 var noteHeight = 110;

    27 var noteColors = [0xB90000, 0x4BDD71, 0xAF931E, 0x1C28BA, 0x536991];

    28 var colorsReg = {};

    29 // Vars

    30 var noteDict = [];

    31 // Timecode method

    32 var timePageLoaded = Date.now();

    33 var offsetMusic = false;

    34 

    35 

    36 //create an new instance of a pixi stage

    37 var stage = new PIXI.Stage(sceneBgColor);

    38 

    39 //create a renderer instance.

    40 var renderer = PIXI.autoDetectRenderer(sceneWidth, sceneHeight);

    41 

    42 //add the renderer view element to the DOM

    43 document.getElementById('canvasContainer').appendChild(renderer.view);

    44 

    45 var uberContainer = new PIXI.DisplayObjectContainer();

    46 uberContainer.position.x = Math.floor(sceneWidth*9/10);

    47 uberContainer.position.y = 0;

    48 stage.addChild(uberContainer);

    49 

    50 var PianoRoll = require('./pianoroll.js')

    51 

    52 // Init containers

    53 var containerList = [];

    54 containerList.push(new PianoRoll(uberContainer, 0, 0, prHeight1, true, pixelsPerSecond1, sceneWidth, noteColors, colorsReg, lineColor, lineInterval, offsetMusic, prHeight1 / 128));

    55 containerList.push(new PianoRoll(uberContainer, 0, prHeight1, prHeight2, false, pixelsPerSecond2, sceneWidth, noteColors, colorsReg, lineColor, lineInterval, offsetMusic, prHeight2 / 128));

    56 

    57 // Line between two containers

    58 var graphics = new PIXI.Graphics();

    59 graphics.beginFill(0xFFFF00);

    60 graphics.lineStyle(1, lineColor);

    61 graphics.moveTo(0, prHeight1);

    62 graphics.lineTo(sceneWidth, prHeight1);

    63 graphics.endFill();

    64 stage.addChild(graphics);

    65 

    66 

    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){

    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];

    86     var velocity = data.content[4];

    87     if(velocity===0){

    88         if(typeof noteDict[data.content[2]][note]!=='undefined'){

    89             // We close the note in container one

    90             //console.log("coucou 2", data);

    91             var duration = data.content[1] - noteDict[data.content[2]][note].ts;

    92             for(var i=0;i<containerList.length;i++){

    93                 //               addNote(note, startTime,                          duration, velocity,                                 canal)

    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     ts = new Date();

   110     for(var i=0;i<containerList.length;i++){

   111         containerList[i].addLine(ts);

   112     }

   113 }

   114 

   115 

   116 

   117 // Socket management

   118 var sock = null;

   119 var ellog = null;

   120 function log(m) {

   121     if(logger){

   122         ellog.innerHTML += m + '\n';

   123         ellog.scrollTop = ellog.scrollHeight;

   124     }

   125 }

   126 window.onload = function(){

   127 

   128     if(logger){

   129         ellog = document.getElementById('log');

   130     }

   131     else{

   132         document.body.removeChild(document.getElementById('log'));

   133     }

   134 

   135     var wsuri;

   136     if (window.location.protocol === 'file:') {

   137         wsuri = 'ws://127.0.0.1:8090/broadcast';

   138     } else {

   139         wsuri = 'ws://' + window.location.hostname + ':8090/broadcast';

   140     }

   141     wsuri = wsuri + '?channel=PIANOROLL&event_code='+eventCode;

   142 

   143     if ('WebSocket' in window) {

   144         sock = new WebSocket(wsuri);

   145     } else if ('MozWebSocket' in window) {

   146         sock = new MozWebSocket(wsuri);

   147     } else {

   148         log('Browser does not support WebSocket!');

   149         window.location = 'http://autobahn.ws/unsupportedbrowser';

   150     }

   151 

   152     if (sock) {

   153         sock.onopen = function(){

   154             if(logger){

   155                 log('Connected to ' + wsuri);

   156             }

   157         };

   158 

   159         sock.onclose = function(e) {

   160             if(logger){

   161                 log('Connection closed (wasClean = ' + e.wasClean + ', code = ' + e.code + ', reason = \'' + e.reason + '\')');

   162             }

   163             sock = null;

   164         };

   165 

   166         sock.onmessage = function(e) {

   167             if(logger){

   168                 log('Got message: ' + e.data);

   169             }

   170             addNotes(JSON.parse(e.data));

   171         };

   172     }

   173 };

   174 

   175 

   176 // Init page and intervals

   177 addLine();

   178 var moveInterval = window.setInterval(replaceContainers, 1000/manualFramerate);

   179 var verticalLinesInterval = window.setInterval(addLine, lineInterval);

   180 

   181 // Little inteval to show time

   182 var nbSec = 0;

   183 var mySpan = document.getElementById('myspan');

   184 function updateTime(){

   185     nbSec++;

   186     var hours = parseInt( nbSec / 3600 ) % 24;

   187     var minutes = parseInt( nbSec / 60 ) % 60;

   188     var seconds = nbSec % 60;

   189     var timeStr = (hours < 10 ? '0' + hours : hours) + ':' + (minutes < 10 ? '0' + minutes : minutes) + ':' + (seconds  < 10 ? '0' + seconds : seconds);

   190     mySpan.innerHTML = timeStr;

   191 }

   192 var secondInterval = window.setInterval(updateTime, 1000);

   193 

   194 module.exports = {

   195     moveInterval: moveInterval,

   196     verticalLinesInterval: verticalLinesInterval,

   197     secondInterval: secondInterval

   198 };