# HG changeset patch # User ymh # Date 1421670688 -3600 # Node ID 806739a2685816cf96f839306f0a12ddbd9cf6a4 # Parent e0e514c5470f02b44c4ffc3531597edf6f61966a add vertical version for pianoroll diff -r e0e514c5470f -r 806739a26858 client/annotviz/app/index.html --- a/client/annotviz/app/index.html Fri Jan 16 20:20:28 2015 +0100 +++ b/client/annotviz/app/index.html Mon Jan 19 13:31:28 2015 +0100 @@ -7,30 +7,19 @@ - Piano Roll + Piano Roll Tests -

Piano Roll

- -
+

Piano Roll Tests

- stop intervals - - start intervals - - temps écoulé : +

- 

-    
-    
-    
 
 
diff -r e0e514c5470f -r 806739a26858 client/annotviz/app/js/doubleroll.js
--- a/client/annotviz/app/js/doubleroll.js	Fri Jan 16 20:20:28 2015 +0100
+++ b/client/annotviz/app/js/doubleroll.js	Mon Jan 19 13:31:28 2015 +0100
@@ -20,6 +20,7 @@
 var NTP_EPOCH_DELTA = 2208988800; //c.f. RFC 868
 
 var defaultConfig = {
+    orientation: 'horizontal',
     logger: false,
     sceneWidth: 1920,
     pianorolls : [
@@ -60,6 +61,9 @@
     var _this = this;
     var opts = _(options).defaults(defaultConfig).value();
 
+    var orientation = opts.orientation;
+    var isHorizontal = (orientation !== 'vertical');
+
     this.logger = opts.logger;
     this.lineColor = opts.lineColor;
     this.lineFillColor = opts.lineFillColor;
@@ -111,6 +115,7 @@
 
     var pianorollOptions = {
         parentContainer: uberContainer,
+        orientation: orientation,
         xInit: 0,
         width: sceneWidth,
         noteColors: this.noteColors,
@@ -140,13 +145,20 @@
             var lineGraphics = new PIXI.Graphics()
                 .beginFill(_this.lineFillColor)
                 .lineStyle(1, _this.lineColor)
-                .moveTo(0, yInit)
-                .lineTo(sceneWidth, yInit)
+                .moveTo(Math.floor(sceneWidth*zeroShift), yInit)
+                .lineTo(-sceneWidth - Math.floor(sceneWidth*zeroShift), yInit)
                 .endFill();
-            stage.addChild(lineGraphics);
+            uberContainer.addChild(lineGraphics);
         }
     });
 
+    if(!isHorizontal) {
+        uberContainer.rotation = Math.PI/2;
+        uberContainer.y = sceneHeight;
+        uberContainer.x = sceneWidth;
+    }
+
+
     this.init = function() {
 
         if(typeof(canvasContainer) === 'string') {
diff -r e0e514c5470f -r 806739a26858 client/annotviz/app/js/pianoroll.js
--- a/client/annotviz/app/js/pianoroll.js	Fri Jan 16 20:20:28 2015 +0100
+++ b/client/annotviz/app/js/pianoroll.js	Mon Jan 19 13:31:28 2015 +0100
@@ -21,6 +21,9 @@
     this.container.y = options.yInit;
     options.parentContainer.addChild(this.container);
 
+    var orientation = options.orientation;
+    var isHorizontal = (orientation !== 'vertical');
+
     this.linesDown = options.linesDown;
     this.height = options.height;
     this.pixelsPerSecond = options.pixelsPerSecond;
@@ -36,6 +39,11 @@
 
     var started = false;
 
+    var isHidden = function(child) {
+        // TODO: the origin point is an approximation. Should refine this
+        var globalPos = child.toGlobal(new PIXI.Point(0,0));
+        return ((globalPos.x + child.width) < 0) || ((globalPos.y + child.height) < 0) ;
+    };
 
     //TODO: I do not like the "regColor" object. This should not be global, but local
     this.getColor = function(canal) {
@@ -54,7 +62,6 @@
 
     this.getNoteRect = function(x, y, color, alpha, width, height) {
         var graphics = new PIXI.Graphics();
-        //console.log("beginX = ", beginX, "canal = ", canal, "color = ", noteColor[canal], "width = ", width, "note = ", note, "velocity = ", velocity);
         graphics.beginFill(color, alpha);
         graphics.drawRect(0, 0, width, height);
         graphics.endFill();
@@ -111,7 +118,6 @@
 
                 graphics = this.getNoteRect(x, y, color, alpha, width, this.noteHeight);
                 this.container.addChild(graphics);
-                //console.log(color, alpha, graphics.lineColor, graphics.fillAlpha);
             }
             else {
                 graphics.width = width;
@@ -128,14 +134,17 @@
         if(typeof(ts) === 'undefined') {
             ts = new Date();
         }
-        var graphics = new PIXI.Graphics();
         var x = -this.container.x;
-        graphics.beginFill(0xFFFF00);
-        graphics.lineStyle(1, this.lineColor);
         var y = this.linesDown ? this.height - 20 : 0;
-        graphics.moveTo(x, y);
-        graphics.lineTo(x, y + 20);
-        graphics.endFill();
+
+        var graphics = new PIXI.Graphics()
+            .beginFill(0xFFFF00)
+            .lineStyle(1, this.lineColor)
+            .moveTo(0, 0)
+            .lineTo(0, 20)
+            .endFill();
+        graphics.x = x;
+        graphics.y = y;
         this.container.addChild(graphics);
         // Add text
         //var totalSec = lineNb * this.lineInterval / 1000;
@@ -146,8 +155,15 @@
 
         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;
+        if(isHorizontal) {
+            t.x = x + 2;
+            t.y = this.linesDown ? this.height - 15 : 2;
+        }
+        else {
+            t.rotation = -Math.PI/2;
+            t.x = x ;
+            t.y = this.linesDown ? this.height - 2 : t.width + 2;
+        }
         this.container.addChild(t);
     };
 
@@ -171,26 +187,14 @@
 
     this.removePassedObjets = function(){
         var nbChilds = _this.container.children.length;
-        var i = 0, childIsNowDisplayed = false, childrenToRemove = [];
-        while(i
+
+
+    
+    
+    
+    
+    
+
+    Piano Roll
+
+    
+    
+
+
+
+    
Piano Roll

+    
+    

+    

+        stop intervals -
+        start intervals -
+        temps écoulé : 
+    

+    

+    
+    
+    
+
+
diff -r e0e514c5470f -r 806739a26858 client/annotviz/app/pianoroll_v.html
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/client/annotviz/app/pianoroll_v.html	Mon Jan 19 13:31:28 2015 +0100
@@ -0,0 +1,37 @@
+
+
+
+    
+    
+    
+    
+    
+
+    Piano Roll Vertical
+
+    
+    
+
+
+
+    
Piano Roll vertical

+    
+    

+    

+        stop intervals -
+        start intervals -
+        temps écoulé : 
+    

+    

+    
+    
+    
+
+