diff -r fb4ad86bc7f2 -r 99658249716c annot-server/static/js/pianoroll.js --- a/annot-server/static/js/pianoroll.js Sat Oct 25 19:37:12 2014 +0200 +++ b/annot-server/static/js/pianoroll.js Mon Oct 27 17:22:48 2014 +0100 @@ -1,13 +1,11 @@ // Config vars var logger = false; var sceneWidth = 1920; -//var sceneHeight = 128 * 4; // multiple of 128 because of 128 levels in midi signals -> better look var prHeight1 = 435; var prHeight2 = 645; var sceneHeight = prHeight1 + prHeight2; var sceneBgColor = 0xFFFFFF; var lineColor = 0x444444; -//var manualFramerate = 24; var pixelsPerSecond1 = Math.floor(sceneWidth / 10); // nb of pixels per second var manualFramerate = pixelsPerSecond1 / 4; var pixelsPerSecond2 = Math.floor(sceneWidth / 60); // nb of pixels per second @@ -20,14 +18,8 @@ 0xB90000, 0x4BDD71, 0xAF931E, 0x1C28BA, 0x536991, 0xB90000, 0x4BDD71, 0xAF931E, 0x1C28BA, 0x536991, 0xB90000, 0x4BDD71, 0xAF931E, 0x1C28BA, 0x536991]; -//var speed = 1; // container -x position at each frame. Speed = 1 ~ 100px for 2 seconds -//var zeroTime = new Date("2014-10-06T12:16:43.000000Z").getTime(); -var noteDict = [{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{}]; -var pianoNotes = [1,0,1,0,1,1,0,1,0,1,0,1];//Do, Do#, Ré, Ré#, Mi, Fa, Fa#, Sol, Sol#, La, La#, Si -// Visual config -var drawPianoNotes = false; -var drawHorizontalLines = false; -var drawVerticalLines = true; +// Vars +var noteDict = []; // Timecode method var timePageLoaded = Date.now(); var offsetMusic = false; @@ -42,104 +34,88 @@ //add the renderer view element to the DOM document.getElementById("canvasContainer").appendChild(renderer.view); -//requestAnimFrame( animate ); - - -//Draw 127 lines -var delta = sceneHeight / 128; -if(drawHorizontalLines){ - for(var i=1;i<128;i++){ - var graphics = new PIXI.Graphics(); - graphics.beginFill(0xFFFF00); - graphics.lineStyle(1, 0xAAAAAA); - var y = delta * i; - graphics.moveTo(0, y); - graphics.lineTo(sceneWidth, y); - graphics.endFill(); - stage.addChild(graphics); - } -} - -//Draw piano notes on the left -if(drawPianoNotes){ - for(var i=0;i<128;i++){ - var graphics = new PIXI.Graphics(); - var color = pianoNotes[i%12]==1 ? 0xFFFFFF : 0x000000; - if(i==60){ - color = 0xFFD700; - } - graphics.beginFill(color); - graphics.lineStyle(1, 0xAAAAAA); - var y = sceneHeight - delta * (i+1); - graphics.drawRect(0, y, 20, delta); - graphics.endFill(); - stage.addChild(graphics); - } -} - var uberContainer = new PIXI.DisplayObjectContainer(); uberContainer.position.x = Math.floor(sceneWidth*9/10); uberContainer.position.y = 0; stage.addChild(uberContainer); -var container1 = new PIXI.DisplayObjectContainer(); -container1.position.x = 0; -container1.position.y = 0; -uberContainer.addChild(container1); -var container2 = new PIXI.DisplayObjectContainer(); -container2.position.x = 0; -container2.position.y = prHeight1; -uberContainer.addChild(container2); +function PianoRoll(parentContainer, xInit, yInit, height, linesDown, pixelsPerSecond){ + + this.container = new PIXI.DisplayObjectContainer(); + this.container.position.x = xInit; + this.container.position.y = yInit; + parentContainer.addChild(this.container); + + this.linesDown = linesDown; + this.height = height; + this.pixelsPerSecond = pixelsPerSecond; + + 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 width = duration * this.pixelsPerSecond / 1000; + // We draw the rectangle + var graphics = new PIXI.Graphics(); + //console.log("beginX = ", beginX, "canal = ", canal, "color = ", noteColor[canal], "width = ", width, "note = ", note, "velocity = ", velocity); + graphics.beginFill(noteColor[canal], (velocity / 128)); + var y = (128-note) * this.height / 128; // (128-note) because y = 0 is for note = 128 and y = 128 for note = 0 + graphics.drawRect(beginX, Math.floor(y - (noteHeight/2) + ((this.height / 128)/2)), width, noteHeight); + graphics.endFill(); + this.container.addChild(graphics); + }; + + this.addLine = function(lineNb){ + var graphics = new PIXI.Graphics(); + var x = -this.container.x; + graphics.beginFill(0xFFFF00); + graphics.lineStyle(1, lineColor); + var y = this.linesDown ? this.height - 20 : 0; + graphics.moveTo(x, y); + graphics.lineTo(x, y + 20); + graphics.endFill(); + this.container.addChild(graphics); + // Add text + var totalSec = lineNb * lineInterval / 1000; + var hours = parseInt( totalSec / 3600 ) % 24; + var minutes = parseInt( totalSec / 60 ) % 60; + var seconds = totalSec % 60; + var timeStr = (hours < 10 ? "0" + hours : hours) + ":" + (minutes < 10 ? "0" + minutes : minutes) + ":" + (seconds < 10 ? "0" + seconds : seconds); + var fontObj = { font: "10pt Arial", fill: "#444444" }; + var t = new PIXI.Text(timeStr, fontObj); + t.x = x + 2; + t.y = this.linesDown ? this.height - 15 : 2; + this.container.addChild(t); + } + + this.moveTo = function(diffTime){ + this.container.x = Math.floor(diffTime*this.pixelsPerSecond); + }; + +} + +// Init containers +var container1 = new PianoRoll(uberContainer, 0, 0, prHeight1, true, pixelsPerSecond1); +var container2 = new PianoRoll(uberContainer, 0, prHeight1, prHeight2, false, pixelsPerSecond2); // Line between two containers var graphics = new PIXI.Graphics(); graphics.beginFill(0xFFFF00); graphics.lineStyle(1, lineColor); -var y = delta * i; graphics.moveTo(0, prHeight1); graphics.lineTo(sceneWidth, prHeight1); graphics.endFill(); stage.addChild(graphics); -function moveContainer(){ - container1.x -= pixelsPerSecond1/manualFramerate; - container2.x -= pixelsPerSecond2/manualFramerate; - renderer.render(stage); -} function replaceContainers(){ var diff = (Date.now() - timePageLoaded)/1000;// nb of seconds since page loaded //console.log("replace ! diff1 = ", container1.x - Math.floor(-diff*pixelsPerSecond1), ", diff 2 = ", container2.x - Math.floor(-diff*pixelsPerSecond2)); - container1.x = Math.floor(-diff*pixelsPerSecond1); - container2.x = Math.floor(-diff*pixelsPerSecond2); - renderer.render(stage); -} -function moveContainerMore(){ - container1.x -= 50*(pixelsPerSecond1/manualFramerate); - container2.x -= 50*(pixelsPerSecond2/manualFramerate); - renderer.render(stage); -} -function moveContainerRight(){ - container1.x += 50*(pixelsPerSecond1/manualFramerate); - container2.x += 50*(pixelsPerSecond2/manualFramerate); + container1.moveTo(-diff); + container2.moveTo(-diff); renderer.render(stage); } -function addNoteInContainer(note, startTime, duration, velocity, pixelsPerSecond, container, prHeight, canal){ - //console.log("coucou 1", note, timeFromZero, ts, velocity, pixelsPerSecond, container, prHeight); - var beginX = (offsetMusic + startTime) * pixelsPerSecond / 1000; - var width = duration * pixelsPerSecond / 1000; - // We draw the rectangle - var graphics = new PIXI.Graphics(); - //console.log("beginX = ", beginX, "canal = ", canal, "color = ", noteColor[canal], "width = ", width, "note = ", note, "velocity = ", velocity); - graphics.beginFill(noteColor[canal], (velocity / 128)); - var y = (128-note) * prHeight / 128; // (128-note) because y = 0 is for note = 128 and y = 128 for note = 0 - graphics.drawRect(beginX, Math.floor(y - (noteHeight/2) + ((prHeight / 128)/2)), width, noteHeight); - graphics.endFill(); - container.addChild(graphics); -} - function addNotes(data){ if(!offsetMusic){ // get difference between the current note timecode and my zero to set the difference between the canvas's zero and the music's zero @@ -156,8 +132,11 @@ // We close the note in container one //console.log("coucou 2", data); var duration = data.content[1] - noteDict[data.content[2]][note].ts; - addNoteInContainer(note, noteDict[data.content[2]][note].ts, duration, noteDict[data.content[2]][note].velocity, pixelsPerSecond1, container1, prHeight1, data.content[2]); - addNoteInContainer(note, noteDict[data.content[2]][note].ts, duration, noteDict[data.content[2]][note].velocity, pixelsPerSecond2, container2, prHeight2, data.content[2]); + //addNoteInContainer(note, noteDict[data.content[2]][note].ts, duration, noteDict[data.content[2]][note].velocity, pixelsPerSecond1, container1, prHeight1, data.content[2]); + // addNote(note, startTime, duration, velocity, canal) + container1.addNote(note, noteDict[data.content[2]][note].ts, duration, noteDict[data.content[2]][note].velocity, data.content[2]); + //addNoteInContainer(note, noteDict[data.content[2]][note].ts, duration, noteDict[data.content[2]][note].velocity, pixelsPerSecond2, container2, prHeight2, data.content[2]); + container2.addNote(note, noteDict[data.content[2]][note].ts, duration, noteDict[data.content[2]][note].velocity, data.content[2]); // delete entry delete noteDict[data.content[2]][note]; } @@ -170,6 +149,12 @@ } } +function addLine(){ + nbLines++; + container1.addLine(nbLines); + container2.addLine(nbLines); +} + // Socket management var sock = null; var ellog = null; @@ -221,58 +206,18 @@ if(logger){ log("Got message: " + e.data); } - addNotes(JSON.parse(e.data)); + addNotes(JSON.parse(e.data)); } } }; -function addLine(){ - nbLines++; - var graphics = new PIXI.Graphics(); - //var x = nbLines * (lineInterval/1000) * pixelsPerSecond1; - var x = -container1.x; - //console.log("nbLines = ",nbLines, "x = ", x); - graphics.beginFill(0xFFFF00); - graphics.lineStyle(1, lineColor); - graphics.moveTo(x, prHeight1 - 20); - graphics.lineTo(x, prHeight1); - graphics.endFill(); - container1.addChild(graphics); - // Add text - var totalSec = nbLines * lineInterval / 1000; - var hours = parseInt( totalSec / 3600 ) % 24; - var minutes = parseInt( totalSec / 60 ) % 60; - var seconds = totalSec % 60; - var timeStr = (hours < 10 ? "0" + hours : hours) + ":" + (minutes < 10 ? "0" + minutes : minutes) + ":" + (seconds < 10 ? "0" + seconds : seconds); - var fontObj = { font: "10pt Arial", fill: "#444444" }; - var t = new PIXI.Text(timeStr, fontObj); - t.x = x + 2; - t.y = prHeight1 - 15; - container1.addChild(t); - // Second container - graphics = new PIXI.Graphics(); - //x = nbLines * (lineInterval/1000) * pixelsPerSecond2; - x = -container2.x; - graphics.beginFill(0xFFFF00); - graphics.lineStyle(1, lineColor); - graphics.moveTo(x, 0); - graphics.lineTo(x, 20); - graphics.endFill(); - container2.addChild(graphics); - var t = new PIXI.Text(timeStr, fontObj); - t.x = x + 2; - t.y = 2; - container2.addChild(t); -} +// Init page and intervals addLine(); var moveInterval = window.setInterval(replaceContainers, 1000/manualFramerate); -// To be sure of synchronism, we replace the container with time calculting every minute -//var replaceInterval = window.setInterval(replaceContainers, 60*1000); -var verticalLinesInterval = false; -if(drawVerticalLines){ - verticalLinesInterval = window.setInterval(addLine, lineInterval); -} +verticalLinesInterval = window.setInterval(addLine, lineInterval); + +// Little inteval to show time var nbSec = 0; var mySpan = document.getElementById("myspan"); function updateTime(){