client/annotviz/app/js/doubleroll.js
changeset 95 806739a26858
parent 94 e0e514c5470f
child 98 72d767c5142d
equal deleted inserted replaced
94:e0e514c5470f 95:806739a26858
    18 var PianoRoll = require('./pianoroll.js');
    18 var PianoRoll = require('./pianoroll.js');
    19 
    19 
    20 var NTP_EPOCH_DELTA = 2208988800; //c.f. RFC 868
    20 var NTP_EPOCH_DELTA = 2208988800; //c.f. RFC 868
    21 
    21 
    22 var defaultConfig = {
    22 var defaultConfig = {
       
    23     orientation: 'horizontal',
    23     logger: false,
    24     logger: false,
    24     sceneWidth: 1920,
    25     sceneWidth: 1920,
    25     pianorolls : [
    26     pianorolls : [
    26       {
    27       {
    27         height: 435,
    28         height: 435,
    58 function DoubleRoll(options) {
    59 function DoubleRoll(options) {
    59 
    60 
    60     var _this = this;
    61     var _this = this;
    61     var opts = _(options).defaults(defaultConfig).value();
    62     var opts = _(options).defaults(defaultConfig).value();
    62 
    63 
       
    64     var orientation = opts.orientation;
       
    65     var isHorizontal = (orientation !== 'vertical');
       
    66 
    63     this.logger = opts.logger;
    67     this.logger = opts.logger;
    64     this.lineColor = opts.lineColor;
    68     this.lineColor = opts.lineColor;
    65     this.lineFillColor = opts.lineFillColor;
    69     this.lineFillColor = opts.lineFillColor;
    66     this.framerate = opts.framerate;
    70     this.framerate = opts.framerate;
    67     this.offsetMusic = opts.offsetMusic;
    71     this.offsetMusic = opts.offsetMusic;
   109 
   113 
   110     var pianorollList = [];
   114     var pianorollList = [];
   111 
   115 
   112     var pianorollOptions = {
   116     var pianorollOptions = {
   113         parentContainer: uberContainer,
   117         parentContainer: uberContainer,
       
   118         orientation: orientation,
   114         xInit: 0,
   119         xInit: 0,
   115         width: sceneWidth,
   120         width: sceneWidth,
   116         noteColors: this.noteColors,
   121         noteColors: this.noteColors,
   117         colorsReg: colorsReg,
   122         colorsReg: colorsReg,
   118         lineColor: this.lineColor,
   123         lineColor: this.lineColor,
   138 
   143 
   139         if(i<(opts.pianorolls.length-1)) {
   144         if(i<(opts.pianorolls.length-1)) {
   140             var lineGraphics = new PIXI.Graphics()
   145             var lineGraphics = new PIXI.Graphics()
   141                 .beginFill(_this.lineFillColor)
   146                 .beginFill(_this.lineFillColor)
   142                 .lineStyle(1, _this.lineColor)
   147                 .lineStyle(1, _this.lineColor)
   143                 .moveTo(0, yInit)
   148                 .moveTo(Math.floor(sceneWidth*zeroShift), yInit)
   144                 .lineTo(sceneWidth, yInit)
   149                 .lineTo(-sceneWidth - Math.floor(sceneWidth*zeroShift), yInit)
   145                 .endFill();
   150                 .endFill();
   146             stage.addChild(lineGraphics);
   151             uberContainer.addChild(lineGraphics);
   147         }
   152         }
   148     });
   153     });
       
   154 
       
   155     if(!isHorizontal) {
       
   156         uberContainer.rotation = Math.PI/2;
       
   157         uberContainer.y = sceneHeight;
       
   158         uberContainer.x = sceneWidth;
       
   159     }
       
   160 
   149 
   161 
   150     this.init = function() {
   162     this.init = function() {
   151 
   163 
   152         if(typeof(canvasContainer) === 'string') {
   164         if(typeof(canvasContainer) === 'string') {
   153             canvasContainer = document.getElementById(canvasContainer);
   165             canvasContainer = document.getElementById(canvasContainer);