--- a/pianoroll/app.js Mon Oct 13 19:05:09 2014 +0200
+++ b/pianoroll/app.js Tue Oct 14 12:17:34 2014 +0200
@@ -7,7 +7,7 @@
ellog.scrollTop = ellog.scrollHeight;
};
-//Config vars
+// Config vars
var sceneWidth = 1000;
var sceneHeight = 128 * 4; // multiple of 128 because of 128 levels in midi signals -> better look
var sceneBgColor = 0x66FF99;
@@ -18,7 +18,10 @@
//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 drawPianoNotes = [1,0,1,0,1,1,0,1,0,1,0,1];//Do, Do#, Ré, Ré#, Mi, Fa, Fa#, Sol, Sol#, La, La#, Si
+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 drawVerticalLines = false;
//create an new instance of a pixi stage
@@ -28,7 +31,7 @@
var renderer = PIXI.autoDetectRenderer(sceneWidth, sceneHeight);
//add the renderer view element to the DOM
-document.body.appendChild(renderer.view);
+document.getElementById("canvasContainer").appendChild(renderer.view);
//requestAnimFrame( animate );
@@ -45,19 +48,21 @@
graphics.endFill();
stage.addChild(graphics);
}
-//Draw 127 lines
-for(var i=0;i<128;i++){
- var graphics = new PIXI.Graphics();
- var color = drawPianoNotes[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);
+//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();
@@ -91,16 +96,19 @@
}
function addBunny(data){
+ var timeFromZero = data.content[1];
var note = data.content[3];
var velocity = data.content[4];
if(velocity===0){
if(note in noteDict){
// We close the note
- var beginTime = new Date(noteDict[note].ts).getTime();
+ /*var beginTime = new Date(noteDict[note].ts).getTime();
var beginDelta = beginTime - zeroTime;
var durationDelta = new Date(data.ts).getTime() - beginTime;
var beginX = beginDelta * pixelsPerSecond / 1000;
- var width = durationDelta * pixelsPerSecond / 1000;
+ var width = durationDelta * pixelsPerSecond / 1000;*/
+ var beginX = noteDict[note].ts * pixelsPerSecond / 1000;
+ var width = (timeFromZero - noteDict[note].ts) * pixelsPerSecond / 1000;
// We draw the rectangle
var graphics = new PIXI.Graphics();
graphics.beginFill(0x0000AA, (noteDict[note].velocity / 128));
@@ -112,7 +120,7 @@
}
}
else{
- noteDict[note] = {ts: data.ts, velocity:velocity};
+ noteDict[note] = {ts: timeFromZero, velocity:velocity};
}
}
@@ -176,4 +184,7 @@
container.addChild(t);
}
var moveInterval = window.setInterval(moveContainer, 1000/manualFramerate);
-var linesInterval = window.setInterval(addLine, lineInterval);
+var verticalLinesInterval = false;
+if(drawVerticalLines){
+ verticalLinesInterval = window.setInterval(addLine, lineInterval);
+}