client/annotviz/app/js/annotsvizview.js
changeset 108 082b64a5c699
parent 105 25ac8802c189
child 110 e4f0c105090d
equal deleted inserted replaced
107:6d41506f9482 108:082b64a5c699
    11 var _ = require('lodash');
    11 var _ = require('lodash');
    12 var DoubleRoll = require('./doubleroll.js');
    12 var DoubleRoll = require('./doubleroll.js');
    13 var AnnotsTimeLine = require('./annotstimeline.js');
    13 var AnnotsTimeLine = require('./annotstimeline.js');
    14 var AnnotsRoll = require('./annotsroll.js');
    14 var AnnotsRoll = require('./annotsroll.js');
    15 
    15 
    16 var defaultOptions = {		
    16 var defaultOptions = {
    17     xInit: 0,
    17     xInit: 0,
    18     yInit: 0,
    18     yInit: 0,
    19     width: 1024,
    19     width: 1024,
    20     height: 768,
    20     height: 768,
       
    21     annotCategories: [{
       
    22         ts: 0,
       
    23         colors: {
       
    24             'ntm': '#CDC83F',
       
    25             'iam': '#CDC83F',
       
    26             'hip': '#CDC83F',
       
    27             'hop': '#CDC83F',
       
    28             'rock': '#DE8B53',
       
    29             'rap': '#DE8B53',
       
    30             'classic': '#DE8B53',
       
    31             'drums': '#C5A3CA',
       
    32             'guitar': '#C5A3CA',
       
    33             'bass': '#79BB92',
       
    34             'default': '#808080'
       
    35         },
       
    36         order: ['ntm', 'iam', 'hip', 'hop', 'rock', 'rap', 'classic', 'drums', 'guitar', 'bass', 'default']
       
    37     }]
    21 };
    38 };
    22 
    39 
    23 function AnnotsVizView(options){
    40 function AnnotsVizView(options){
    24 	var _this = this;
    41 	var _this = this;
    25     var opts = _(options).defaults(defaultOptions).value();
    42     var opts = _(options).defaults(defaultOptions).value();
    26     
    43 
    27     this.container = new PIXI.DisplayObjectContainer();
    44     this.container = new PIXI.DisplayObjectContainer();
    28     this.container.x = opts.xInit;
    45     this.container.x = opts.xInit;
    29     this.container.y = opts.yInit;
    46     this.container.y = opts.yInit;
    30 	this.width = opts.width;
    47 	this.width = opts.width;
    31 	this.height= opts.height;
    48 	this.height= opts.height;
    32 	
    49     this.annotCategories = opts.annotCategories;
       
    50 
    33 	var wsPianoroll = opts.wsPianoroll;
    51 	var wsPianoroll = opts.wsPianoroll;
    34 	var wsAnnot = opts.wsAnnot;
    52 	var wsAnnot = opts.wsAnnot;
    35 	var stageView = opts.stageView;
    53 	var stageView = opts.stageView;
    36 	
    54 
    37 	stageView.registerComponent(this);
    55 	stageView.registerComponent(this);
    38 	
    56 
    39 	var timeLine = new AnnotsTimeLine.AnnotsTimeLine({
    57 	var timeLine = new AnnotsTimeLine.AnnotsTimeLine({
    40     	stageView : stageView,
    58     	stageView : stageView,
    41         logger: logger,
    59         logger: logger,
    42         ws: new annotviz.WsWrapper(wsUriAnnotation, logger),
    60         ws: new annotviz.WsWrapper(wsUriAnnotation, logger),
    43         xInit: 0,
    61         xInit: 0,
    48         timeEnd: Date.now() + 3000000,
    66         timeEnd: Date.now() + 3000000,
    49         intervalWidth: 6,
    67         intervalWidth: 6,
    50         intervalHeight: 10,
    68         intervalHeight: 10,
    51         maxCellHeight: 70,
    69         maxCellHeight: 70,
    52         radius: 200,
    70         radius: 200,
    53         annotCategories: [{
    71         annotCategories: this.annotCategories
    54        		ts: 0, 
       
    55        		colors: {		
       
    56    	       		'ntm': '#CDC83F',
       
    57    	       	    'iam': '#CDC83F',
       
    58    	       	    'hip': '#CDC83F',
       
    59    	       	    'hop': '#CDC83F',
       
    60    	       	    'rock': '#DE8B53',
       
    61    	       	    'rap': '#DE8B53',
       
    62    	       	    'classic': '#DE8B53',
       
    63    	       	    'drums': '#C5A3CA',
       
    64    	       	    'guitar': '#C5A3CA',
       
    65    	       	    'bass': '#79BB92',
       
    66    	       	   	'default': '#808080'
       
    67 			},
       
    68         	order: ['ntm', 'iam', 'hip', 'hop', 'rock', 'rap', 'classic', 'drums', 'guitar', 'bass', 'default']
       
    69        	}]
       
    70     });
    72     });
    71 	
    73 
    72 	var doubleRollH = new DoubleRoll.DoubleRoll({
    74 	var doubleRollH = new DoubleRoll.DoubleRoll({
    73         stageView : stageView,
    75         stageView : stageView,
    74     	logger: logger,
    76     	logger: logger,
    75         ws: wsPianoroll,
    77         ws: wsPianoroll,
    76         yInit: (this.height - 200),
    78         yInit: (this.height - 200),
    82                 lineInterval: 5000,
    84                 lineInterval: 5000,
    83                 noteHeight: 10
    85                 noteHeight: 10
    84             },
    86             },
    85         ]
    87         ]
    86     });
    88     });
    87 	
    89 
    88 	var doubleRollV = new DoubleRoll.DoubleRoll({
    90 	var doubleRollV = new DoubleRoll.DoubleRoll({
    89         stageView : stageView,
    91         stageView : stageView,
    90     	logger: logger,
    92     	logger: logger,
    91         ws: wsPianoroll,
    93         ws: wsPianoroll,
    92         orientation: 'vertical',
    94         orientation: 'vertical',
    98                 lineInterval: 5000,
   100                 lineInterval: 5000,
    99                 noteHeight: 5,
   101                 noteHeight: 5,
   100             },
   102             },
   101         ]
   103         ]
   102     });
   104     });
   103 	
   105 
   104 	var annotsRoll = new AnnotsRoll.AnnotsRoll({
   106 	var annotsRoll = new AnnotsRoll.AnnotsRoll({
   105     	stageView : stageView,
   107     	stageView : stageView,
   106         logger: logger,
   108         logger: logger,
   107         ws: wsAnnot,
   109         ws: wsAnnot,
   108         parentContainer: doubleRollV.stage,
   110         parentContainer: doubleRollV.stage,
   111         width: 200 + 200,
   113         width: 200 + 200,
   112         height: 768-200,
   114         height: 768-200,
   113         widthRoll: 200,
   115         widthRoll: 200,
   114         framerate: doubleRollV.framerate,
   116         framerate: doubleRollV.framerate,
   115         pixelsPerSecond: Math.floor(1024 / 60),
   117         pixelsPerSecond: Math.floor(1024 / 60),
   116         annotColors: [{
   118         annotColors: this.annotCategories
   117         	ts: 0, 
       
   118         	colors: {		
       
   119    	       		'ntm': '#CDC83F',
       
   120    	       	    'iam': '#CDC83F',
       
   121    	       	    'hip': '#CDC83F',
       
   122    	       	    'hop': '#CDC83F',
       
   123    	       	    'rock': '#DE8B53',
       
   124    	       	    'rap': '#DE8B53',
       
   125    	       	    'classic': '#DE8B53',
       
   126    	       	    'drums': '#C5A3CA',
       
   127    	       	    'guitar': '#C5A3CA',
       
   128    	       	    'bass': '#79BB92',
       
   129    	       	   	'default': '#808080'
       
   130 			}
       
   131         }]
       
   132     });
   119     });
   133 	
   120 
   134 	var limiters = new PIXI.Graphics()
   121 	var limiters = new PIXI.Graphics()
   135 		.lineStyle(1, 0x646464)
   122 		.lineStyle(1, 0x646464)
   136 		.moveTo(annotsRoll.container.x, annotsRoll.container.y)
   123 		.moveTo(annotsRoll.container.x, annotsRoll.container.y)
   137 		.lineTo(annotsRoll.container.x, annotsRoll.container.y - annotsRoll.height)
   124 		.lineTo(annotsRoll.container.x, annotsRoll.container.y - annotsRoll.height)
   138 		.moveTo(annotsRoll.container.x + annotsRoll.widthRoll, annotsRoll.container.y)
   125 		.moveTo(annotsRoll.container.x + annotsRoll.widthRoll, annotsRoll.container.y)
   142 		.drawRect(0, 0, this.width -1, this.height -1)
   129 		.drawRect(0, 0, this.width -1, this.height -1)
   143 		.beginFill(0xECECEC)
   130 		.beginFill(0xECECEC)
   144 		.drawRect(1024 - 200, 0, 200, 768-200)
   131 		.drawRect(1024 - 200, 0, 200, 768-200)
   145 		.endFill();
   132 		.endFill();
   146 	this.container.addChild(limiters);
   133 	this.container.addChild(limiters);
   147 	
   134 
   148 //	var doubleRollV = new DoubleRoll.DoubleRoll({});
   135 //	var doubleRollV = new DoubleRoll.DoubleRoll({});
   149 	
   136 
   150 	this.init = function(){
   137 	this.init = function(){
   151 		
   138 
   152 	}
   139 	}
   153 	
   140 
   154 	this.start = function() {
   141 	this.start = function() {
   155     };
   142     };
   156     
   143 
   157     this.refresh = function() {
   144     this.refresh = function() {
   158     };
   145     };
   159     
   146 
   160     this.stop = function(){
   147     this.stop = function(){
   161     };
   148     };
   162     
   149 
   163     return this;
   150     return this;
   164 	
   151 
   165 }
   152 }
   166 
   153 
   167 module.exports = {
   154 module.exports = {
   168 	AnnotsVizView: AnnotsVizView
   155 	AnnotsVizView: AnnotsVizView
   169 };
   156 };