# HG changeset patch
# User cavaliet
# Date 1413282922 -7200
# Node ID 3b70b46e8044e6cbc767021b8074d67263e6dbf8
# Parent  517e343a86eb229403d8ed420a9abb89892261e7
piano roll with visual specifications

diff -r 517e343a86eb -r 3b70b46e8044 pianoroll/app.js
--- a/pianoroll/app.js	Tue Oct 14 12:17:34 2014 +0200
+++ b/pianoroll/app.js	Tue Oct 14 12:35:22 2014 +0200
@@ -8,20 +8,23 @@
 };
 
 // Config vars
-var sceneWidth = 1000;
+var sceneWidth = 1920;
 var sceneHeight = 128 * 4; // multiple of 128 because of 128 levels in midi signals ->  better look
-var sceneBgColor = 0x66FF99;
+var sceneBgColor = 0xFFFFFF;
 var manualFramerate = 24;
 var pixelsPerSecond = 50; // nb of pixels per second
-var lineInterval = 2000; // means line every 2 seconds
+var lineInterval = 5000; // means line every 5 seconds
 var nbLines = -1;
+var noteHeight = 110;
+var noteColor = 0xB74141;
 //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 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 drawVerticalLines = false;
+var drawHorizontalLines = false;
+var drawVerticalLines = true;
 
 
 //create an new instance of a pixi stage
@@ -38,16 +41,19 @@
 
 //Draw 127 lines
 var delta = sceneHeight / 128;
-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);
+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++){
@@ -76,19 +82,6 @@
 container.position.y = 0;
 uberContainer.addChild(container);
 
-//create a texture from an image path
-var texture = PIXI.Texture.fromImage("bunny.png");
-
-
-/*function animate() {
-    requestAnimFrame( animate );
-    // just for fun, lets rotate mr rabbit a little
-    //bunny.rotation += 0.1;
-    container.x -= speed;
-    //console.log("container.x = ", container.x);
-    // render the stage  
-    renderer.render(stage);
-}*/
 
 function moveContainer() {
     container.x -= pixelsPerSecond/manualFramerate;
@@ -111,9 +104,10 @@
             var width = (timeFromZero - noteDict[note].ts) * pixelsPerSecond / 1000;
             // We draw the rectangle
             var graphics = new PIXI.Graphics();
-            graphics.beginFill(0x0000AA, (noteDict[note].velocity / 128));
+            graphics.beginFill(noteColor, (noteDict[note].velocity / 128));
             var y = (128-note) * sceneHeight / 128; // (128-note) because y = 0 is for note = 128 and y = 128 for note = 0
-            graphics.drawRect(beginX, y, width, sceneHeight / 128);
+            //graphics.drawRect(beginX, y, width, sceneHeight / 128);
+            graphics.drawRect(beginX, Math.floor(y - (noteHeight/2) + ((sceneHeight / 128)/2)), width, noteHeight);
             graphics.endFill();
             container.addChild(graphics);
             delete noteDict[note];
@@ -168,7 +162,7 @@
     //console.log("nbLines = ",nbLines, "x = ", x);
     graphics.beginFill(0xFFFF00);
     graphics.lineStyle(1, 0x444444);
-    graphics.moveTo(x, 0);
+    graphics.moveTo(x, sceneHeight*(9/10));
     graphics.lineTo(x, sceneHeight);
     graphics.endFill();
     container.addChild(graphics);
@@ -180,7 +174,7 @@
     var timeStr = (hours < 10 ? "0" + hours : hours) + ":" + (minutes < 10 ? "0" + minutes : minutes) + ":" + (seconds  < 10 ? "0" + seconds : seconds);
     var t = new PIXI.Text(timeStr, { font: "10pt Arial", fill: "#444444" });
     t.x = x + 2;
-    t.y = sceneHeight - 20;
+    t.y = sceneHeight - 15;
     container.addChild(t);
 }
 var moveInterval = window.setInterval(moveContainer, 1000/manualFramerate);