!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.pianoroll=e()}}(function(){return function e(n,t,o){function i(s,a){if(!t[s]){if(!n[s]){var l="function"==typeof require&&require;if(!a&&l)return l(s,!0);if(r)return r(s,!0);var d=new Error("Cannot find module '"+s+"'");throw d.code="MODULE_NOT_FOUND",d}var c=t[s]={exports:{}};n[s][0].call(c.exports,function(e){var t=n[s][1][e];return i(t?t:e)},c,c.exports,e,n,t,o)}return t[s].exports}for(var r="function"==typeof require&&require,s=0;s<o.length;s++)i(o[s]);return i}({1:[function(e,n){"use strict";function t(){for(var e=(Date.now()-I)/1e3,n=0;n<j.length;n++)j[n].moveTo(-e);D.render(S)}function o(e){if(!M){var n=Date.now(),t=n-I;M=t-e.content[1]}var o=e.content[3],i=e.content[4];if(0===i){if("undefined"!=typeof b[e.content[2]][o]){for(var r=e.content[1]-b[e.content[2]][o].ts,s=0;s<j.length;s++)j[s].addNote(o,b[e.content[2]][o].ts,r,b[e.content[2]][o].velocity,e.content[2]);delete b[e.content[2]][o]}}else"undefined"==typeof b[e.content[2]]&&(b[e.content[2]]={}),b[e.content[2]][o]={ts:e.content[1],velocity:i}}function i(){x++;for(var e=0;e<j.length;e++)j[e].addLine(x)}function r(e){l&&(E.innerHTML+=e+"\n",E.scrollTop=E.scrollHeight)}function s(){k++;var e=parseInt(k/3600)%24,n=parseInt(k/60)%60,t=k%60,o=(10>e?"0"+e:e)+":"+(10>n?"0"+n:n)+":"+(10>t?"0"+t:t);N.innerHTML=o}var a=e("pixi"),l=!1,d=1920,c=435,h=645,f=c+h,u=16777215,p=4473924,w=Math.floor(d/10),v=w/4,g=Math.floor(d/60),m=5e3,x=-1,y=[12124160,4971889,11506462,1845434,5466513],C={},b=[],I=Date.now(),M=!1,S=new a.Stage(u),D=a.autoDetectRenderer(d,f);document.getElementById("canvasContainer").appendChild(D.view);var O=new a.DisplayObjectContainer;O.position.x=Math.floor(9*d/10),O.position.y=0,S.addChild(O);var T=e("./pianoroll.js"),j=[];j.push(new T(O,0,0,c,!0,w,d,y,C,p,m,M,c/128)),j.push(new T(O,0,c,h,!1,g,d,y,C,p,m,M,h/128));var L=new a.Graphics;L.beginFill(16776960),L.lineStyle(1,p),L.moveTo(0,c),L.lineTo(d,c),L.endFill(),S.addChild(L);var P=null,E=null;window.onload=function(){l?E=document.getElementById("log"):document.body.removeChild(document.getElementById("log"));var e;e="file:"===window.location.protocol?"ws://127.0.0.1:8090/broadcast":"ws://"+window.location.hostname+":8090/broadcast",e=e+"?channel=PIANOROLL&event_code="+eventCode,"WebSocket"in window?P=new WebSocket(e):"MozWebSocket"in window?P=new MozWebSocket(e):(r("Browser does not support WebSocket!"),window.location="http://autobahn.ws/unsupportedbrowser"),P&&(P.onopen=function(){l&&r("Connected to "+e)},P.onclose=function(e){l&&r("Connection closed (wasClean = "+e.wasClean+", code = "+e.code+", reason = '"+e.reason+"')"),P=null},P.onmessage=function(e){l&&r("Got message: "+e.data),o(JSON.parse(e.data))})},i();var F=window.setInterval(t,1e3/v),R=window.setInterval(i,m),k=0,N=document.getElementById("myspan"),B=window.setInterval(s,1e3);n.exports={moveInterval:F,verticalLinesInterval:R,secondInterval:B}},{"./pianoroll.js":2,pixi:"pixi"}],2:[function(e,n){"use strict";function t(e,n,t,r,s,a,l,d,c,h,f,u,p){var w=this;this.container=new o.DisplayObjectContainer,this.container.position.x=n,this.container.position.y=t,e.addChild(this.container),this.linesDown=s,this.height=r,this.pixelsPerSecond=a,this.width=l,this.noteColors=d,this.colorsReg=c||{},this.lineColor=h,this.lineInterval=f,this.offsetMusic=u||0,this.noteHeight=p,this.addNote=function(e,n,t,r,s){var a=(this.offsetMusic+n)*this.pixelsPerSecond/1e3,l=t*this.pixelsPerSecond/1e3;if(!(a+l<Math.abs(this.container.x)-this.width)){var d=new o.Graphics,c=this.colorsReg[s];if("undefined"==typeof c){var h=Object.keys(this.colorsReg).length;c=this.colorsReg[s]=h<this.noteColors.length?this.noteColors[h]:parseInt(i({luminosity:"light",hue:"random",format:"hex"}).replace(/^#/,""),16)}d.beginFill(c,r/128);var f=(128-e)*this.height/128;d.drawRect(0,Math.floor(f-p/2+this.height/128/2),l,p),d.endFill(),d.x=a,this.container.addChild(d)}},this.addLine=function(e){var n=new o.Graphics,t=-this.container.x;n.beginFill(16776960),n.lineStyle(1,this.lineColor);var i=this.linesDown?this.height-20:0;n.moveTo(t,i),n.lineTo(t,i+20),n.endFill(),this.container.addChild(n);var r=e*this.lineInterval/1e3,s=parseInt(r/3600)%24,a=parseInt(r/60)%60,l=r%60,d=(10>s?"0"+s:s)+":"+(10>a?"0"+a:a)+":"+(10>l?"0"+l:l),c={font:"10pt Arial",fill:"#444444"},h=new o.Text(d,c);h.x=t+2,h.y=this.linesDown?this.height-15:2,this.container.addChild(h)},this.moveTo=function(e){this.container.x=Math.floor(e*this.pixelsPerSecond)},this.removePassedObjets=function(){for(var e=w.container.children.length,n=0,t=!1,o=[];e>n&&!t;){var i=w.container.children[n++];"undefined"!=typeof i&&(i.x+i.width<Math.abs(w.container.x)-w.width?o.push(i):t=!0)}o.forEach(function(e){w.container.removeChild(e)})},window.setInterval(this.removePassedObjets,1e3*this.width/this.pixelsPerSecond)}var o=e("pixi"),i=e("randomColor");n.exports=t},{pixi:"pixi",randomColor:"randomColor"}]},{},[1])(1)});