# HG changeset patch # User ymh # Date 1421154211 -3600 # Node ID e944c017b8c85e4ad19e35b6b9472c7cc8a2de6f # Parent eff9460bd4f2b4d02c68d6102367c382ddd11d0c propagate small correctionson server diff -r eff9460bd4f2 -r e944c017b8c8 annot-server/static/js/pianoroll.js --- a/annot-server/static/js/pianoroll.js Tue Jan 13 10:46:05 2015 +0100 +++ b/annot-server/static/js/pianoroll.js Tue Jan 13 14:03:31 2015 +0100 @@ -52,8 +52,8 @@ // Init containers var containerList = []; -containerList.push(new PianoRoll(uberContainer, 0, 0, prHeight1, true, pixelsPerSecond1, sceneWidth, noteColors, colorsReg, lineColor, lineInterval)); -containerList.push(new PianoRoll(uberContainer, 0, prHeight1, prHeight2, false, pixelsPerSecond2, sceneWidth, noteColors, colorsReg, lineColor, lineInterval)); +containerList.push(new PianoRoll(uberContainer, 0, 0, prHeight1, true, pixelsPerSecond1, sceneWidth, noteColors, colorsReg, lineColor, lineInterval, offsetMusic, prHeight1 / 128)); +containerList.push(new PianoRoll(uberContainer, 0, prHeight1, prHeight2, false, pixelsPerSecond2, sceneWidth, noteColors, colorsReg, lineColor, lineInterval, offsetMusic, prHeight2 / 128)); // Line between two containers var graphics = new PIXI.Graphics(); @@ -211,7 +211,7 @@ var PIXI = require('pixi'); var randomColor = require('randomColor'); -function PianoRoll(parentContainer, xInit, yInit, height, linesDown, pixelsPerSecond, width, noteColors, colorsReg, lineColor, lineInterval){ +function PianoRoll(parentContainer, xInit, yInit, height, linesDown, pixelsPerSecond, width, noteColors, colorsReg, lineColor, lineInterval, offsetMusic, noteHeight){ var _this = this; this.container = new PIXI.DisplayObjectContainer(); this.container.position.x = xInit; @@ -226,11 +226,17 @@ this.colorsReg = colorsReg || {}; this.lineColor = lineColor; this.lineInterval = lineInterval; + this.offsetMusic = offsetMusic || 0; + this.noteHeight = noteHeight; this.addNote = function(note, startTime, duration, velocity, canal){ //console.log("coucou 1", note, timeFromZero, ts, velocity, pixelsPerSecond, container, prHeight); - var beginX = (offsetMusic + startTime) * this.pixelsPerSecond / 1000; + var beginX = (this.offsetMusic + startTime) * this.pixelsPerSecond / 1000; var width = duration * this.pixelsPerSecond / 1000; + if((beginX+width) < Math.abs(this.container.x) - this.width) { + // not visible. do nothing + return; + } // We draw the rectangle var graphics = new PIXI.Graphics(); //console.log("beginX = ", beginX, "canal = ", canal, "color = ", noteColor[canal], "width = ", width, "note = ", note, "velocity = ", velocity); @@ -281,20 +287,25 @@ this.removePassedObjets = function(){ var nbChilds = _this.container.children.length; - var i = 0, childIsNowDisplayed = false; + var i = 0, childIsNowDisplayed = false, childrenToRemove = []; while(ie?"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(),S=!1,M=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,M.addChild(O);var T=e("./pianoroll.js"),j=[];j.push(new T(O,0,0,c,!0,w,d,y,C,p,m)),j.push(new T(O,0,c,h,!1,g,d,y,C,p,m));var L=new a.Graphics;L.beginFill(16776960),L.lineStyle(1,p),L.moveTo(0,c),L.lineTo(d,c),L.endFill(),M.addChild(L);var P=null,F=null;window.onload=function(){l?F=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 R=window.setInterval(t,1e3/v),k=window.setInterval(i,m),E=0,N=document.getElementById("myspan"),B=window.setInterval(s,1e3);n.exports={moveInterval:R,verticalLinesInterval:k,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){var u=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.addNote=function(e,n,t,r,s){var a=(offsetMusic+n)*this.pixelsPerSecond/1e3,l=t*this.pixelsPerSecond/1e3,d=new o.Graphics,c=this.colorsReg[s];if("undefined"==typeof c){var h=Object.keys(this.colorsReg).length;c=this.colorsReg[s]=hs?"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=u.container.children.length,n=0,t=!1;e>n&&!t;){var o=u.container.children[0];o.x+o.widthe?"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+ls?"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