1 !function(e){if("object"==typeof exports&&"undefined"!=typeof module)module.exports=e();else if("function"==typeof define&&define.amd)define([],e);else{var n;"undefined"!=typeof window?n=window:"undefined"!=typeof global?n=global:"undefined"!=typeof self&&(n=self),n.annotviz=e()}}(function(){var define,module,exports;return (function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){

     2 /**

     3  * scripts/main.js

     4  *

     5  * This is the starting point for your application.

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

     7  */

     8 

     9 'use strict';

    10 

    11 var doubleroll = require('./doubleroll');

    12 var annotsroll = require('./annotsroll');

    13 var annotstimeline = require('./annotstimeline');

    14 var annotsvizview = require('./annotsvizview');

    15 var stageview = require('./stageview');

    16 var wswrapper = require('./wswrapper');

    17 var logger = require('./logger');

    18 

    19 var _ = require('lodash');

    20 

    21 module.exports = _({})

    22     .extend(doubleroll)

    23     .extend(annotsroll)

    24     .extend(annotstimeline)

    25     .extend(annotsvizview)

    26     .extend(stageview)

    27     .extend(wswrapper)

    28     .extend(logger)

    29     .value();

    30 },{"./annotsroll":2,"./annotstimeline":3,"./annotsvizview":4,"./doubleroll":5,"./logger":6,"./stageview":8,"./wswrapper":10,"lodash":"lodash"}],2:[function(require,module,exports){

    31 /**

    32 * js/annotsRoll.js

    33 *

    34 * annotsRoll basic component

    35 *

    36 */

    37 

    38 'use strict';

    39 

    40 var PIXI = require('pixi');

    41 var _ = require('lodash');

    42 

    43 var DEFAULT_ANNOT_COLOR = '#bababa';

    44 

    45 var defaultAnnotStyles = {

    46     'label': { font: '16pt Arial Bold', fill: '#65A954', wordWrap: true},

    47     'text' : { font: '12pt Arial Regular', fill: '#444444', wordWrap: true},

    48     'user' : { font: '14pt Arial regular', fill: '#666666' },

    49 };

    50 

    51 var defaultOptions = {

    52     externalRefresh: false,

    53     defaultColor: DEFAULT_ANNOT_COLOR,

    54     annotStyles: defaultAnnotStyles

    55 };

    56 

    57 function AnnotsRoll(options) {

    58 

    59 //parentContainer, xInit, yInit, width, height, widthRoll, pixelsPerSecond, annotColors

    60     var _this = this;

    61     var opts = _(options).defaults(defaultOptions).value();

    62 

    63 

    64     this.container = new PIXI.DisplayObjectContainer();

    65     this.container.x = opts.xInit;

    66     this.container.y = opts.yInit;

    67     this.container.width = opts.width;

    68 

    69     this.height = opts.height;

    70     this.width = opts.width;

    71     this.widthRoll = opts.widthRoll;

    72     this.pixelsPerSecond = opts.pixelsPerSecond;

    73     this.annotColors = opts.annotColors;

    74     this.startTs = options.startTs || Date.now();

    75 

    76     var yInit = opts.yInit;

    77     var annotStyles = _(opts.annotStyles).defaults(defaultAnnotStyles).value();

    78     for(var style in annotStyles) {

    79     	if (annotStyles[style].wordWrap === true){

    80     		annotStyles[style].wordWrapWidth = this.widthRoll; 

    81     	}

    82     }

    83     console.log(annotStyles);

    84     var started = false;

    85     var ws = opts.ws;

    86     var externalRefresh = opts.externalRefresh;

    87     var stageView = opts.stageView;

    88     

    89     stageView.registerComponent(this);

    90 

    91     var isHidden = function(child) {

    92         // TODO: the origin point is an approximation. Should refine this

    93         var globalPos = child.toGlobal(new PIXI.Point(0,0));

    94         return ((globalPos.x + child.width) < 0) || ((globalPos.y + child.height) < 0) ;

    95     };

    96 

    97     this.addAnnots = function(data) {

    98 

    99         //var title = data.content.category.label;

   100         //var user = data.content.user;

   101         //Test cat and color

   102         //var colorAnnot = 0x65A954;

   103         var category = data.content.category.label,

   104             text     = data.content.text,

   105             user     = data.content.user,

   106             ts       = Date.parse(data.ts),

   107             color    = this.getColor(ts, data.content.category.code);

   108 

   109         this.addAnnot(category, text, user, color, ts);

   110     };

   111 

   112     this.getColor = function(ts, code) {

   113         var colorsDef;

   114         _(this.annotColors).eachRight(function(cdef) {

   115             console.log("cDef", cdef);

   116             console.log("cDef ts", cdef.ts, ts);

   117             if(cdef.ts < ts) {

   118                 colorsDef = cdef.colors;

   119                 return false;

   120             }

   121         });

   122         var resColor;

   123         console.log("colorsDef", colorsDef);

   124         if(colorsDef) {

   125             resColor = colorsDef[code];

   126         }

   127         if(!resColor) {

   128             resColor = DEFAULT_ANNOT_COLOR;

   129         }

   130         return resColor;

   131     }

   132 

   133     this.addAnnot = function(category, text, user, catColor, ts){

   134 

   135         var color = catColor ? catColor : DEFAULT_ANNOT_COLOR;

   136         var x = 0;

   137         var y = (ts-this.startTs) * this.pixelsPerSecond / 1000 + yInit;

   138 

   139         var colorHex = parseInt(color.replace(/^#/, ''), 16);

   140 

   141         var graphics = new PIXI.Graphics()

   142             .beginFill(colorHex)

   143             .drawRect(x, y, 10, 3)

   144             .endFill();

   145 

   146         this.container.addChild(graphics);

   147 

   148         var textHeight = 0;

   149         var catLabel = new PIXI.Text(

   150             category,

   151             _(annotStyles.label).extend({fill: color}).value()

   152         );

   153         catLabel.x = x + 20;

   154         catLabel.y = y - 23;

   155         this.container.addChild(catLabel);

   156         textHeight += (catLabel.height - 23 + 2);

   157 

   158         if(text) {

   159             var catText = new PIXI.Text(text, annotStyles.text);

   160             catText.x = x + 20;

   161             catText.y = y + 2;

   162             this.container.addChild(catText);

   163             textHeight += (catText.height + 2);

   164         }

   165 

   166         var catUser = new PIXI.Text(user, annotStyles.user);

   167         catUser.x = x + 20;

   168         catUser.y = y + 2 + textHeight;

   169         this.container.addChild(catUser);

   170 

   171         this.addAnnotLine(colorHex, y);

   172     };

   173 

   174     this.addAnnotLine = function(color, y) {

   175         var x = this.widthRoll;

   176 

   177 

   178         var graphics = new PIXI.Graphics()

   179             .beginFill(color)

   180             .drawRect(x, y, this.width - x, 3)

   181             .endFill();

   182 

   183         this.container.addChild(graphics);

   184     };

   185 

   186     this.moveTo = function(diffTime){

   187     	this.container.y = Math.floor(diffTime*this.pixelsPerSecond);

   188     };

   189 

   190     this.move = this.refresh = function() {

   191         var diff = (this.startTs - Date.now())/1000;

   192         this.moveTo(diff);

   193     };

   194 

   195     this.removePassedObjets = function(){

   196         var childrenToRemove = [];

   197         _(_this.container.children).forEach(function(child) {

   198             return typeof(child) === 'undefined' ||

   199                 (isHidden(child) && childrenToRemove.push(child));

   200         });

   201         childrenToRemove.forEach(function(child) {

   202             _this.container.removeChild(child);

   203         });

   204     };

   205 

   206     this.init = function() {

   207 

   208         ws.message(function(data) {

   209             _this.addAnnots(data);

   210         });

   211 

   212     };

   213 

   214     this.start = function() {

   215         if(!started) {

   216             this.startTs = Date.now();

   217             started = true;

   218         }

   219         this.cleanInterval = setInterval(function () { _this.removePassedObjets(); }, 1000 * this.height / this.pixelsPerSecond );

   220         if(!externalRefresh) {

   221             this.refreshInterval = setInterval(function() {_this.move();}, 1000/this.framerate);

   222         }

   223     };

   224 

   225     this.stop = function() {

   226         clearInterval(this.cleanInterval);

   227         if(!externalRefresh) {

   228             clearInterval(this.refreshInterval);

   229         }

   230     };

   231 

   232 }

   233 

   234 module.exports = {

   235     AnnotsRoll: AnnotsRoll,

   236 };

   237 

   238 },{"lodash":"lodash","pixi":"pixi"}],3:[function(require,module,exports){

   239 /**

   240 * js/annotstimeline

   241 *

   242 * annotstimeline basic component

   243 *

   244 */

   245 

   246 'use strict';

   247 

   248 var PIXI = require('pixi');

   249 var Utils = require('./utils.js');

   250 var _ = require('lodash');

   251 

   252 var defaultOptions = {		

   253     logger: undefined,

   254     intervalWidth: 10,

   255     intervalHeight: 5,

   256     maxCellHeight: 200,

   257     radius: 300

   258 };

   259 

   260 

   261 function AnnotsTimeLine(options){

   262     var _this = this;

   263     var opts = _(options).defaults(defaultOptions).value();

   264     

   265     this.container = new PIXI.DisplayObjectContainer();

   266     this.container.x = opts.xInit;

   267     this.container.y = opts.yInit;

   268     this.container.width = opts.width;

   269     this.container.height = opts.height;    

   270     

   271     this.timeBegin = opts.timeBegin;

   272     this.timeEnd = opts.timeEnd;

   273     this.duration = (this.timeEnd - this.timeBegin)/1000;

   274     this.width = opts.width;

   275     this.height = opts.height;

   276     this.intervalHeight = opts.intervalHeight;

   277     this.intervalWidth = opts.intervalWidth;

   278     this.maxCellHeight = opts.maxCellHeight;

   279     this.annotCategories = opts.annotCategories;

   280     

   281     this.circleX = opts.circleX || (this.width/2);

   282     this.circleY = opts.circleY || (this.height/2);

   283     this.radius = opts.radius;

   284     this.perimeter = 2*Math.PI* this.radius;

   285     this.intervalDuration = (this.intervalWidth * this.duration / this.perimeter);

   286     

   287     var currentTime = this.timeBegin;

   288     var totalIndex = Math.floor(this.perimeter/this.intervalWidth);

   289     	

   290     this.cells = []

   291     for (var i=0; i<(this.perimeter/this.intervalWidth) ; i++){

   292     	this.cells[i] = [];

   293     	this.cells[i].i = i;

   294     	this.cells[i].totalAnnots = 0;

   295     	this.cells[i].categories = {};

   296     	

   297     	for (var category in this.annotCategories[0].colors){

   298     		this.cells[i].categories[category] = {

   299 				"count": 0,

   300 				"color": this.annotCategories[0].colors[category]

   301     		};

   302     	}

   303     }

   304     

   305     var ws = opts.ws;

   306     var stageView = opts.stageView;

   307 

   308     //draw the base - circle and line to locate the scene

   309     var graphics = new PIXI.Graphics();

   310     graphics.lineStyle(2, 0x646464)

   311     	.drawCircle(this.circleX, this.circleY, this.radius - 3)

   312     	.lineStyle(1, 0xD7D7D7)

   313     	.drawCircle(this.circleX, this.circleY, this.radius*2/3)

   314     	.drawCircle(this.circleX, this.circleY, this.radius/3)

   315     	.lineStyle(1, 0x646464)

   316     	.moveTo(this.circleX, this.circleY - (this.radius/3)/2)

   317     	.lineTo(this.circleX, this.circleY - this.radius - this.maxCellHeight - 10)

   318     	.endFill()

   319     this.container.addChild(graphics);

   320     

   321     //set time text

   322     var currentTimeText = new PIXI.Text("-- : -- : --", { font: '18pt Gothic Standard', fill: '#646464' });

   323     currentTimeText.x = this.circleX - currentTimeText.width/2;

   324     currentTimeText.y = this.circleY - currentTimeText.height/2;

   325     this.container.addChild(currentTimeText);

   326     

   327     stageView.registerComponent(this);

   328 

   329     //Add Annotation to the TimeLine

   330     this.addAnnot = function(data){

   331     	if (typeof(this.annotCategories[0].colors[data.content.category.code]) !== 'undefined'){

   332     		var annotCode = data.content.category.code;

   333     	} else {

   334     		var annotCode = this.annotCategories[0].order[this.annotCategories[0].order.length -1];

   335     	}

   336     	var annotTime = Date.parse(data.ts);

   337     	

   338     	if (this.timeEnd > Date.parse(data.ts)){

   339 	    	var i = Math.floor((Date.parse(data.ts)-this.timeBegin)/(1000*this.intervalDuration));

   340 	    	

   341 			this.cells[i].categories[annotCode].count += 1;

   342 			this.cells[i].totalAnnots +=1;

   343 			this.redrawCell(this.cells[i], i);

   344     	}

   345     };

   346     

   347     this.initGraphics = function(cell){

   348     	cell.graphics = new PIXI.Graphics();

   349     	cell.graphics.position.x = this.circleX + this.radius * Math.sin(cell.i*(360/totalIndex)*(Math.PI/180));

   350     	cell.graphics.position.y = this.circleY - this.radius * Math.cos(cell.i*(360/totalIndex)*(Math.PI/180));

   351     	cell.graphics.rotation = (cell.i)*(360/totalIndex)*(Math.PI/180) + (360/(totalIndex*2))*(Math.PI/180);

   352     	this.container.addChild(cell.graphics);

   353     }

   354     

   355     this.initTimeTexts = function() {

   356 	    var tBeg = new PIXI.Text(Utils.formatTime(this.timeBegin), { font: '12pt Gothic Standard', fill: '#646464' });

   357 	    tBeg.x = this.circleX + 15;

   358 	    tBeg.y = this.circleY - this.radius - this.maxCellHeight - 10;

   359 	    this.container.addChild(tBeg);

   360 	    

   361 	    var tEnd = new PIXI.Text(Utils.formatTime(this.timeEnd), { font: '12pt Gothic Standard', fill: '#646464' });

   362 	    tEnd.x = this.circleX - 15 - tEnd.width;

   363 	    tEnd.y = this.circleY - this.radius - this.maxCellHeight - 10;

   364 	    this.container.addChild(tEnd);

   365 	    

   366 	    var t15 = new PIXI.Text(Utils.formatTime(((this.timeEnd - this.timeBegin)/4) + this.timeBegin), { font: '12pt Gothic Standard', fill: '#646464' });

   367 	    t15.x = this.circleX + this.radius + this.maxCellHeight + 10 ;

   368 	    t15.y = this.circleY - t15.height;

   369 	    t15.rotation = Math.PI /2;

   370 	    this.container.addChild(t15);

   371 	    

   372 	    var t30 = new PIXI.Text(Utils.formatTime(((this.timeEnd - this.timeBegin)/2) + this.timeBegin), { font: '12pt Gothic Standard', fill: '#646464' });

   373 	    t30.x = this.circleX - t30.width/2;

   374 	    t30.y = this.circleY + this.radius + this.maxCellHeight - 2;

   375 	    this.container.addChild(t30);

   376 	    

   377 	    var t45 = new PIXI.Text(Utils.formatTime(((this.timeEnd - this.timeBegin)*3/4) + this.timeBegin), { font: '12pt Gothic Standard', fill: '#646464' });

   378 	    t45.x = this.circleX - this.radius - this.maxCellHeight - 10 ;

   379 	    t45.y = this.circleY + t15.height;

   380 	    t45.rotation = -Math.PI/2;

   381 	    this.container.addChild(t45);

   382     }

   383     

   384     //Draw the cellule

   385     this.redrawCell = function(cell){

   386     	

   387     	if (typeof(cell.graphics) === 'undefined'){

   388     		this.initGraphics(cell);

   389     	} else {

   390     		cell.graphics.clear();

   391     	}

   392     	

   393     	var y = 0;

   394     	

   395     	//Check if total height is higher than Max Cell Height

   396     	if ((cell.totalAnnots*this.intervalHeight) > this.maxCellHeight){

   397     		var heightStep = this.maxCellHeight/cell.totalAnnots;

   398     	} else {

   399     		var heightStep = this.intervalHeight;

   400     	}

   401     	

   402     	//Draw the rect depending on the height step calculated

   403     	for (var i=0; i< this.annotCategories[0].order.length; i++){

   404     		var currentCode = this.annotCategories[0].order[i];

   405 			cell.graphics.beginFill(cell.categories[currentCode].color.replace("#", "0x"))

   406     			.drawRect(0, y, this.intervalWidth-1, -cell.categories[currentCode].count * heightStep)

   407     			.endFill();

   408     		y -= cell.categories[currentCode].count*heightStep;

   409     	}

   410     }

   411     

   412     this.init = function() {

   413     	ws.message(function(data) {

   414             _this.addAnnot(data);

   415         });

   416     	

   417     	this.initTimeTexts();

   418     };

   419     

   420     this.updateTime = function(){

   421     	currentTime += 1000;

   422     	

   423         var nbSec = currentTime / 1000;

   424         var hours = Math.floor( nbSec / 3600 ) % 24;

   425         var minutes = Math.floor( nbSec / 60 ) % 60;

   426         var seconds = Math.floor(nbSec % 60);

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

   428         

   429         currentTimeText.setText(timeStr);

   430     };

   431     

   432     var refreshTimeInterval;

   433     

   434     this.start = function() {

   435     	refreshTimeInterval = setInterval(function() {_this.updateTime();}, 1000);

   436     };

   437     

   438     this.refresh = function() {

   439     	

   440     };

   441     

   442     this.stop = function(){

   443     	console.log(this.cells);

   444     };

   445     

   446     return this;

   447 }

   448 

   449 module.exports = {

   450 	AnnotsTimeLine: AnnotsTimeLine

   451 };

   452 

   453 },{"./utils.js":9,"lodash":"lodash","pixi":"pixi"}],4:[function(require,module,exports){

   454 /**

   455 * js/annotsvizview.js

   456 *

   457 * This is the starting point for your application.

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

   459 */

   460 

   461 'use strict';

   462 

   463 var PIXI = require('pixi');

   464 var _ = require('lodash');

   465 var DoubleRoll = require('./doubleroll.js');

   466 var AnnotsTimeLine = require('./annotstimeline.js');

   467 var AnnotsRoll = require('./annotsroll.js');

   468 

   469 var defaultOptions = {

   470     xInit: 0,

   471     yInit: 0,

   472     width: 1024,

   473     height: 768,

   474     annotCategories: [{

   475         ts: 0,

   476         colors: {

   477             'ntm': '#CDC83F',

   478             'iam': '#CDC83F',

   479             'hip': '#CDC83F',

   480             'hop': '#CDC83F',

   481             'rock': '#DE8B53',

   482             'rap': '#DE8B53',

   483             'classic': '#DE8B53',

   484             'drums': '#C5A3CA',

   485             'guitar': '#C5A3CA',

   486             'bass': '#79BB92',

   487             'default': '#808080'

   488         },

   489         order: ['ntm', 'iam', 'hip', 'hop', 'rock', 'rap', 'classic', 'drums', 'guitar', 'bass', 'default']

   490     }]

   491 };

   492 

   493 function AnnotsVizView(options){

   494 	var _this = this;

   495     var opts = _(options).defaults(defaultOptions).value();

   496 

   497     this.container = new PIXI.DisplayObjectContainer();

   498     this.container.x = opts.xInit;

   499     this.container.y = opts.yInit;

   500 	this.width = opts.width;

   501 	this.height= opts.height;

   502     this.annotCategories = opts.annotCategories;

   503 

   504 	var wsPianoroll = opts.wsPianoroll;

   505 	var wsAnnot = opts.wsAnnot;

   506 	var stageView = opts.stageView;

   507 

   508 	stageView.registerComponent(this);

   509 

   510 	var timeLine = new AnnotsTimeLine.AnnotsTimeLine({

   511     	stageView : stageView,

   512         logger: logger,

   513         ws: new annotviz.WsWrapper(wsUriAnnotation, logger),

   514         xInit: 0,

   515         yInit: 0,

   516         width: 1024 - 200 - 200,

   517         height: 768-200,

   518         timeBegin: Date.now(),

   519         timeEnd: Date.now() + 3000000,

   520         intervalWidth: 6,

   521         intervalHeight: 10,

   522         maxCellHeight: 70,

   523         radius: 200,

   524         annotCategories: this.annotCategories

   525     });

   526 

   527 	var doubleRollH = new DoubleRoll.DoubleRoll({

   528         stageView : stageView,

   529     	logger: logger,

   530         ws: wsPianoroll,

   531         yInit: (this.height - 200),

   532         sceneHeight: 200,

   533         pianorolls : [

   534             {

   535                 height: 200,

   536                 timeWidth: 10,

   537                 lineInterval: 5000,

   538                 noteHeight: 10

   539             },

   540         ]

   541     });

   542 

   543 	var doubleRollV = new DoubleRoll.DoubleRoll({

   544         stageView : stageView,

   545     	logger: logger,

   546         ws: wsPianoroll,

   547         orientation: 'vertical',

   548         sceneHeight: 768-200,

   549         pianorolls : [

   550             {

   551                 height: 200,

   552                 timeWidth: 60,

   553                 lineInterval: 5000,

   554                 noteHeight: 5,

   555             },

   556         ]

   557     });

   558 

   559 	var annotsRoll = new AnnotsRoll.AnnotsRoll({

   560     	stageView : stageView,

   561         logger: logger,

   562         ws: wsAnnot,

   563         parentContainer: doubleRollV.stage,

   564         xInit: 1024 - 200 - 200,

   565         yInit: 768-200,

   566         width: 200 + 200,

   567         height: 768-200,

   568         widthRoll: 200,

   569         framerate: doubleRollV.framerate,

   570         pixelsPerSecond: Math.floor(1024 / 60),

   571         annotColors: this.annotCategories

   572     });

   573 

   574 	var limiters = new PIXI.Graphics()

   575 		.lineStyle(1, 0x646464)

   576 		.moveTo(annotsRoll.container.x, annotsRoll.container.y)

   577 		.lineTo(annotsRoll.container.x, annotsRoll.container.y - annotsRoll.height)

   578 		.moveTo(annotsRoll.container.x + annotsRoll.widthRoll, annotsRoll.container.y)

   579 		.lineTo(annotsRoll.container.x + annotsRoll.widthRoll, annotsRoll.container.y - annotsRoll.height)

   580 		.moveTo(0, this.height - 200)

   581 		.lineTo(this.width, this.height - 200)

   582 		.drawRect(0, 0, this.width -1, this.height -1)

   583 		.beginFill(0xECECEC)

   584 		.drawRect(1024 - 200, 0, 200, 768-200)

   585 		.endFill();

   586 	this.container.addChild(limiters);

   587 

   588 //	var doubleRollV = new DoubleRoll.DoubleRoll({});

   589 

   590 	this.init = function(){

   591 

   592 	}

   593 

   594 	this.start = function() {

   595     };

   596 

   597     this.refresh = function() {

   598     };

   599 

   600     this.stop = function(){

   601     };

   602 

   603     return this;

   604 

   605 }

   606 

   607 module.exports = {

   608 	AnnotsVizView: AnnotsVizView

   609 };

   610 

   611 },{"./annotsroll.js":2,"./annotstimeline.js":3,"./doubleroll.js":5,"lodash":"lodash","pixi":"pixi"}],5:[function(require,module,exports){

   612 /**

   613 * scripts/doubleroll.js

   614 *

   615 * This is the starting point for your application.

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

   617 */

   618 

   619 /* global document: false */

   620 

   621 'use strict';

   622 

   623 

   624 var PIXI = require('pixi');

   625 var _ = require('lodash');

   626 var PianoRoll = require('./pianoroll.js');

   627 

   628 var defaultConfig = {

   629     orientation: 'horizontal',

   630     logger: undefined,

   631     sceneWidth: 1024,

   632     pianorolls : [

   633       {

   634         height: 435,

   635         timeWidth: 10,

   636         lineInterval: 5000,

   637         noteHeight: undefined

   638       },

   639       {

   640         height: 645,

   641         timeWidth: 60,

   642         lineInterval: 5000,

   643         noteHeight: undefined

   644       },

   645     ],

   646     framerate: 25,

   647     offsetMusic: false,

   648     sceneBgColor: 0xFFFFFF,

   649     lineColor: 0x444444,

   650     lineFillColor: 0xFFFF00,

   651     noteColors: [0xB90000, 0x4BDD71, 0xAF931E, 0x1C28BA, 0x536991],

   652     noteHeight: undefined,

   653     zeroShift: 0.9,

   654     timeWidth: 60,

   655     lineInterval: 5000,

   656 //    wsUri: undefined,

   657 //    eventCode: undefined

   658 

   659 };

   660 

   661 function DoubleRoll(options) {

   662 

   663     var _this = this;

   664     var opts = _(options).defaults(defaultConfig).value();

   665 

   666     var orientation = opts.orientation;

   667     var isHorizontal = (orientation !== 'vertical');

   668 

   669     this.logger = opts.logger;

   670     this.lineColor = opts.lineColor;

   671     this.lineFillColor = opts.lineFillColor;

   672     this.framerate = opts.framerate;

   673     this.offsetMusic = opts.offsetMusic;

   674     this.noteColors = opts.noteColors;

   675 

   676     var noteHeight = opts.noteHeight;

   677     var sceneBgColor = opts.sceneBgColor;

   678     var sceneHeight = opts.sceneHeight || _(opts.pianorolls).reduce(function(s,p) { return s + p.height; }, 0);

   679     var timeWidth = opts.timeWidth;

   680     var lineInterval = opts.lineInterval;

   681     var offsetMusic = opts.offsetMusic;

   682 

   683     var sceneWidth = opts.sceneWidth;

   684     var stageView = opts.stageView;

   685 

   686     var zeroShift = opts.zeroShift;

   687 

   688     var ws = opts.ws;

   689 

   690     var colorsReg = {};

   691 

   692     this.container = new PIXI.DisplayObjectContainer();

   693     this.container.x = Math.floor(sceneWidth*zeroShift);

   694     this.container.y = 0;

   695     

   696     stageView.registerComponent(this);

   697 

   698     var pianorollList = [];

   699 

   700     var pianorollOptions = {

   701         parentContainer: this.container,

   702         orientation: orientation,

   703         xInit: 0,

   704         width: sceneWidth,

   705         noteColors: this.noteColors,

   706         colorsReg: colorsReg,

   707         lineColor: this.lineColor,

   708         lineInterval: lineInterval,

   709         offsetMusic: offsetMusic,

   710     };

   711 

   712     var yInit = opts.yInit || 0;

   713     var linesDown = true;

   714     _(opts.pianorolls).forEach(function(prDef, i) {

   715         var prNoteHeight = noteHeight || prDef.noteHeight || prDef.height / 128;

   716         var prTimeWidth = prDef.timeWidth || timeWidth;

   717         pianorollList.push(new PianoRoll(_({

   718             yInit: yInit,

   719             height: prDef.height,

   720             linesDown: linesDown,

   721             pixelsPerSecond: Math.floor(sceneWidth / prTimeWidth),

   722             noteHeight: prNoteHeight,

   723             lineInterval: prDef.lineInterval

   724         }).defaults(pianorollOptions).value()));

   725         yInit += prDef.height;

   726         linesDown = !linesDown;

   727 

   728         if(i<(opts.pianorolls.length-1)) {

   729             var lineGraphics = new PIXI.Graphics()

   730                 .beginFill(_this.lineFillColor)

   731                 .lineStyle(1, _this.lineColor)

   732                 .moveTo(Math.floor(sceneWidth*zeroShift), yInit)

   733                 .lineTo(-sceneWidth - Math.floor(sceneWidth*zeroShift), yInit)

   734                 .endFill();

   735             _this.container.addChild(lineGraphics);

   736         }

   737     });

   738 

   739     if(!isHorizontal) {

   740         this.container.rotation = Math.PI/2;

   741         this.container.y = sceneHeight;

   742         this.container.x = sceneWidth;

   743     }

   744 

   745 

   746     this.init = function() {

   747 

   748     	ws.message(function(data) {

   749             _this.addNotes(data);

   750         });

   751 

   752     };

   753 

   754 

   755     this.addNotes = function(data) {

   756 

   757         pianorollList.forEach(function(c) {

   758             c.addNoteRaw(data);

   759         });

   760     };

   761 

   762     this.refresh = function() {

   763         pianorollList.forEach(function(c) {

   764             c.move();

   765         });

   766     };

   767 

   768     // Init page and intervals

   769     var startTs;

   770 

   771     this.start = function() {

   772 

   773         startTs = Date.now();

   774         pianorollList.forEach(function(c) {

   775             c.start();

   776         });

   777     };

   778 

   779     this.stop = function() {

   780     	

   781         pianorollList.forEach(function(c) {

   782             c.stop();

   783         });

   784     };

   785 

   786 

   787     this.log = function(m) {

   788         if(this.logger) {

   789             this.logger.log(m);

   790         }

   791     };

   792 

   793 

   794 

   795     return this;

   796 }

   797 

   798 module.exports = {

   799     DoubleRoll: DoubleRoll

   800 };

   801 

   802 },{"./pianoroll.js":7,"lodash":"lodash","pixi":"pixi"}],6:[function(require,module,exports){

   803 /**

   804 * js/wswrapper.js

   805 *

   806 * simple logger service

   807 *

   808 */

   809 

   810 /* global document: false */

   811 

   812 'use strict';

   813 

   814 function HtmlLogger(doLog, container) {

   815 

   816     var logContainer = container;

   817     if(typeof(container) === 'string') {

   818         logContainer = document.getElementById(container);

   819     }

   820     if(!doLog) {

   821         document.body.removeChild(logContainer);

   822         logContainer = undefined;

   823     }

   824 

   825 

   826     this.log = function(msg) {

   827         if(doLog && logContainer) {

   828             logContainer.innerHTML += msg + '\n';

   829             logContainer.scrollTop = logContainer.scrollHeight;

   830         }

   831     };

   832 }

   833 

   834 function ConsoleLogger(doLog) {

   835 

   836     this.log = function(msg) {

   837         if(doLog) {

   838             console.log(msg);

   839         }

   840     }

   841 

   842 }

   843 

   844 module.exports = {

   845     HtmlLogger: HtmlLogger,

   846     ConsoleLogger: ConsoleLogger

   847 };

   848 

   849 },{}],7:[function(require,module,exports){

   850 /**

   851 * js/pianoroll.js

   852 *

   853 * pianoroll basic component

   854 *

   855 */

   856 

   857 'use strict';

   858 

   859 

   860 var PIXI = require('pixi');

   861 var randomColor = require('randomColor');

   862 var _ = require('lodash');

   863 

   864 var NTP_EPOCH_DELTA = 2208988800; //c.f. RFC 868

   865 

   866 function PianoRoll(options) {

   867     var _this = this;

   868     this.container = new PIXI.DisplayObjectContainer();

   869     this.container.x = options.xInit;

   870     this.container.y = options.yInit;

   871     options.parentContainer.addChild(this.container);

   872 

   873     var orientation = options.orientation;

   874     var isHorizontal = (orientation !== 'vertical');

   875 

   876     this.linesDown = options.linesDown;

   877     this.height = options.height;

   878     this.pixelsPerSecond = options.pixelsPerSecond;

   879     this.width = options.width;

   880     this.noteColors = options.noteColors;

   881     this.colorsReg = options.colorsReg || {};

   882     this.lineColor = options.lineColor;

   883     this.lineInterval = options.lineInterval;

   884     this.offsetMusic = options.offsetMusic || false;

   885     this.noteHeight = options.noteHeight;

   886     this.noteDict = {};

   887     this.startTs = options.startTs || Date.now();

   888 

   889     var started = false;

   890 

   891     var isHidden = function(child) {

   892         // TODO: the origin point is an approximation. Should refine this

   893         var globalPos = child.toGlobal(new PIXI.Point(0,0));

   894         return ((globalPos.x + child.width) < 0) || ((globalPos.y + child.height) < 0) ;

   895     };

   896 

   897     //TODO: I do not like the "regColor" object. This should not be global, but local

   898     this.getColor = function(canal) {

   899         var color = this.colorsReg[canal];

   900         if(typeof(color) === 'undefined') {

   901             var colorsRegSize = Object.keys(this.colorsReg).length;

   902             if(colorsRegSize < this.noteColors.length) {

   903                 color = this.colorsReg[canal] = this.noteColors[colorsRegSize];

   904             }

   905             else {

   906                 color = this.colorsReg[canal] = parseInt(randomColor({ luminosity: 'light', hue: 'random', format:'hex'}).replace(/^#/, ''), 16);

   907             }

   908         }

   909         return color;

   910     };

   911 

   912     this.getNoteRect = function(x, y, color, alpha, width, height) {

   913         var graphics = new PIXI.Graphics();

   914         graphics.beginFill(color, alpha);

   915         graphics.drawRect(0, 0, width, height);

   916         graphics.endFill();

   917         graphics.x = x;

   918         graphics.y = y;

   919         graphics.width = width;

   920         graphics.height = height;

   921         return graphics;

   922     };

   923 

   924     this.addNoteRaw = function(data) {

   925     	console.log(data);

   926         var note = data.content[3];

   927         var velocity = data.content[4];

   928         var ts = (data.content[0] - NTP_EPOCH_DELTA)*1000;

   929         var channel = data.content[2];

   930         var sessionTs = data.content[1];

   931 

   932         this.addNote(note, ts, sessionTs, velocity, channel, 0);

   933     };

   934 

   935     this.addNote = function(note, startTime, sessionTs, velocity, channel, duration) {

   936 

   937         var ts = startTime;

   938         if(this.offsetMusic) {

   939             ts = this.startTs + sessionTs;

   940         }

   941 

   942         var noteDuration = duration;

   943         var noteVelocity = velocity;

   944         var graphics;

   945         if(!duration) {

   946             if(typeof this.noteDict[channel]==='undefined'){

   947                 this.noteDict[channel] = {};

   948             }

   949             if(velocity===0) {

   950                 if(typeof this.noteDict[channel][note] !== 'undefined') {

   951                     var noteDef = this.noteDict[channel][note];

   952                     delete this.noteDict[channel][note];

   953                     noteDuration = sessionTs - noteDef.sessionTs;

   954                     graphics = noteDef.graphics;

   955                     noteVelocity = noteDef.velocity;

   956                     ts = noteDef.ts;

   957                 }

   958             }

   959             else {

   960                 noteDuration = Date.now() - ts;

   961                 this.noteDict[channel][note] = { ts: ts, velocity: velocity, sessionTs: sessionTs};

   962             }

   963         }

   964 

   965 

   966         if(!this.offsetMusic || velocity===0) {

   967 

   968             var width = noteDuration * this.pixelsPerSecond / 1000;

   969             if(!graphics) {

   970                 var x = (ts-this.startTs) * this.pixelsPerSecond / 1000;

   971                 if((x+width) <  (Math.abs(this.container.x) - this.width)) {

   972                     // not visible. do nothing

   973                     return;

   974                 }

   975                 var y = Math.floor((128-note+0.5) * this.height / 128 - (this.noteHeight/2));

   976                 var color = this.getColor(channel);

   977                 var alpha = (noteVelocity / 128);

   978 

   979                 graphics = this.getNoteRect(x, y, color, alpha, width, this.noteHeight);

   980                 this.container.addChild(graphics);

   981             }

   982             else {

   983                 graphics.width = width;

   984             }

   985 

   986             if(!duration && velocity) {

   987                 this.noteDict[channel][note].graphics = graphics;

   988             }

   989         }

   990     };

   991 

   992     this.addLine = function(ts){

   993 

   994         if(typeof(ts) === 'undefined') {

   995             ts = new Date();

   996         }

   997         var x = -this.container.x;

   998         var y = this.linesDown ? this.height - 20 : 0;

   999 

  1000         var graphics = new PIXI.Graphics()

  1001             .beginFill(0xFFFF00)

  1002             .lineStyle(1, this.lineColor)

  1003             .moveTo(0, 0)

  1004             .lineTo(0, 20)

  1005             .endFill();

  1006         graphics.x = x;

  1007         graphics.y = y;

  1008         this.container.addChild(graphics);

  1009         // Add text

  1010         //var totalSec = lineNb * this.lineInterval / 1000;

  1011         var hours = ts.getHours();

  1012         var minutes =ts.getMinutes();

  1013         var seconds = ts.getSeconds();

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

  1015 

  1016         var fontObj = { font: '10pt Arial', fill: '#444444' };

  1017         var t = new PIXI.Text(timeStr, fontObj);

  1018         if(isHorizontal) {

  1019             t.x = x + 2;

  1020             t.y = this.linesDown ? this.height - 15 : 2;

  1021         }

  1022         else {

  1023             t.rotation = -Math.PI/2;

  1024             t.x = x ;

  1025             t.y = this.linesDown ? this.height - 2 : t.width + 2;

  1026         }

  1027         this.container.addChild(t);

  1028     };

  1029 

  1030     this.moveTo = function(diffTime){

  1031         var oldX = this.container.x;

  1032         this.container.x = Math.floor(diffTime*this.pixelsPerSecond);

  1033         var deltaX = Math.abs(oldX-this.container.x);

  1034         _.forOwn(this.noteDict, function(channelDict) {

  1035             _.forOwn(channelDict, function(noteDef) {

  1036                 if(noteDef.graphics) {

  1037                     noteDef.graphics.width = noteDef.graphics.width + deltaX;

  1038                 }

  1039             });

  1040         });

  1041     };

  1042 

  1043     this.move = function() {

  1044         var diff = (this.startTs - Date.now())/1000;

  1045         this.moveTo(diff);

  1046     };

  1047 

  1048     this.removePassedObjets = function(){

  1049         var childrenToRemove = [];

  1050         _(_this.container.children).forEach(function(child) {

  1051             return typeof(child) === 'undefined' ||

  1052                 (isHidden(child) && childrenToRemove.push(child));

  1053         });

  1054         childrenToRemove.forEach(function(child) {

  1055             _this.container.removeChild(child);

  1056         });

  1057     };

  1058 

  1059     this.start = function() {

  1060         if(!started) {

  1061             this.startTs = Date.now();

  1062             this.addLine();

  1063             started = true;

  1064         }

  1065         this.verticalLinesInterval = setInterval(function() { _this.addLine(); }, this.lineInterval);

  1066         this.cleanInterval = setInterval(function () { _this.removePassedObjets(); }, 1000 * this.width / this.pixelsPerSecond );

  1067     };

  1068 

  1069     this.stop = function() {

  1070         //window.clearInterval(this.moveInterval);

  1071         clearInterval(this.verticalLinesInterval);

  1072         clearInterval(this.cleanInterval);

  1073     };

  1074 

  1075 

  1076 }

  1077 

  1078 module.exports = PianoRoll;

  1079 

  1080 },{"lodash":"lodash","pixi":"pixi","randomColor":"randomColor"}],8:[function(require,module,exports){

  1081 /**

  1082 * scripts/stageview.js

  1083 *

  1084 * This is the starting point for your application.

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

  1086 */

  1087 

  1088 /* global document: false */

  1089 

  1090 'use strict';

  1091 

  1092 

  1093 var PIXI = require('pixi');

  1094 var _ = require('lodash');

  1095 

  1096 var defaultConfig = {

  1097     externalRefresh: false,

  1098     logger: undefined,

  1099     sceneWidth: 1024,

  1100     sceneHeight: 768,

  1101     framerate: 25,

  1102     sceneBgColor: 0xFFFFFF,

  1103     canvasContainer: 'canvasContainer',

  1104 };

  1105 

  1106 function StageView(options) {

  1107 

  1108     var _this = this;

  1109     var opts = _(options).defaults(defaultConfig).value();

  1110 

  1111     var externalRefresh = opts.externalRefresh;

  1112 

  1113     this.logger = opts.logger;

  1114     this.framerate = opts.framerate;

  1115     var sceneBgColor = opts.sceneBgColor;

  1116     var sceneWidth = opts.sceneWidth;

  1117     var sceneHeight = opts.sceneHeight;

  1118     var canvasContainer = opts.canvasContainer;

  1119     var timeContainer = [];

  1120     var components = []; 

  1121     

  1122     //create an new instance of a pixi stage

  1123     this.stage = new PIXI.Stage(sceneBgColor);

  1124     //create a renderer instance.

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

  1126     	

  1127     this.init = function() {

  1128 

  1129         if(typeof(canvasContainer) === 'string') {

  1130             canvasContainer = document.getElementById(canvasContainer);

  1131         }

  1132         if(typeof(timeContainer) === 'string') {

  1133             timeContainer = document.getElementById(timeContainer);

  1134         }

  1135