client/annotviz/app/js/annotsvizview.js
author ymh <ymh.work@gmail.com>
Thu, 22 Jan 2015 07:04:42 +0100
changeset 108 082b64a5c699
parent 105 25ac8802c189
child 110 e4f0c105090d
permissions -rw-r--r--
add vizualizations to server
Ignore whitespace changes - Everywhere: Within whitespace: At end of lines:
98
72d767c5142d refactor and make work annotsroll
ymh <ymh.work@gmail.com>
parents:
diff changeset
     1
/**
72d767c5142d refactor and make work annotsroll
ymh <ymh.work@gmail.com>
parents:
diff changeset
     2
* js/annotsvizview.js
72d767c5142d refactor and make work annotsroll
ymh <ymh.work@gmail.com>
parents:
diff changeset
     3
*
72d767c5142d refactor and make work annotsroll
ymh <ymh.work@gmail.com>
parents:
diff changeset
     4
* This is the starting point for your application.
72d767c5142d refactor and make work annotsroll
ymh <ymh.work@gmail.com>
parents:
diff changeset
     5
* Take a look at http://browserify.org/ for more info
72d767c5142d refactor and make work annotsroll
ymh <ymh.work@gmail.com>
parents:
diff changeset
     6
*/
103
123a611c7903 minor update of options and add annotsvizview
rougeronj
parents: 98
diff changeset
     7
123a611c7903 minor update of options and add annotsvizview
rougeronj
parents: 98
diff changeset
     8
'use strict';
123a611c7903 minor update of options and add annotsvizview
rougeronj
parents: 98
diff changeset
     9
123a611c7903 minor update of options and add annotsvizview
rougeronj
parents: 98
diff changeset
    10
var PIXI = require('pixi');
123a611c7903 minor update of options and add annotsvizview
rougeronj
parents: 98
diff changeset
    11
var _ = require('lodash');
123a611c7903 minor update of options and add annotsvizview
rougeronj
parents: 98
diff changeset
    12
var DoubleRoll = require('./doubleroll.js');
123a611c7903 minor update of options and add annotsvizview
rougeronj
parents: 98
diff changeset
    13
var AnnotsTimeLine = require('./annotstimeline.js');
123a611c7903 minor update of options and add annotsvizview
rougeronj
parents: 98
diff changeset
    14
var AnnotsRoll = require('./annotsroll.js');
123a611c7903 minor update of options and add annotsvizview
rougeronj
parents: 98
diff changeset
    15
108
082b64a5c699 add vizualizations to server
ymh <ymh.work@gmail.com>
parents: 105
diff changeset
    16
var defaultOptions = {
103
123a611c7903 minor update of options and add annotsvizview
rougeronj
parents: 98
diff changeset
    17
    xInit: 0,
123a611c7903 minor update of options and add annotsvizview
rougeronj
parents: 98
diff changeset
    18
    yInit: 0,
104
685c5ebc59d0 update resolution screen
rougeronj
parents: 103
diff changeset
    19
    width: 1024,
685c5ebc59d0 update resolution screen
rougeronj
parents: 103
diff changeset
    20
    height: 768,
108
082b64a5c699 add vizualizations to server
ymh <ymh.work@gmail.com>
parents: 105
diff changeset
    21
    annotCategories: [{
082b64a5c699 add vizualizations to server
ymh <ymh.work@gmail.com>
parents: 105
diff changeset
    22
        ts: 0,
082b64a5c699 add vizualizations to server
ymh <ymh.work@gmail.com>
parents: 105
diff changeset
    23
        colors: {
082b64a5c699 add vizualizations to server
ymh <ymh.work@gmail.com>
parents: 105
diff changeset
    24
            'ntm': '#CDC83F',
082b64a5c699 add vizualizations to server
ymh <ymh.work@gmail.com>
parents: 105
diff changeset
    25
            'iam': '#CDC83F',
082b64a5c699 add vizualizations to server
ymh <ymh.work@gmail.com>
parents: 105
diff changeset
    26
            'hip': '#CDC83F',
082b64a5c699 add vizualizations to server
ymh <ymh.work@gmail.com>
parents: 105
diff changeset
    27
            'hop': '#CDC83F',
082b64a5c699 add vizualizations to server
ymh <ymh.work@gmail.com>
parents: 105
diff changeset
    28
            'rock': '#DE8B53',
082b64a5c699 add vizualizations to server
ymh <ymh.work@gmail.com>
parents: 105
diff changeset
    29
            'rap': '#DE8B53',
082b64a5c699 add vizualizations to server
ymh <ymh.work@gmail.com>
parents: 105
diff changeset
    30
            'classic': '#DE8B53',
082b64a5c699 add vizualizations to server
ymh <ymh.work@gmail.com>
parents: 105
diff changeset
    31
            'drums': '#C5A3CA',
082b64a5c699 add vizualizations to server
ymh <ymh.work@gmail.com>
parents: 105
diff changeset
    32
            'guitar': '#C5A3CA',
082b64a5c699 add vizualizations to server
ymh <ymh.work@gmail.com>
parents: 105
diff changeset
    33
            'bass': '#79BB92',
082b64a5c699 add vizualizations to server
ymh <ymh.work@gmail.com>
parents: 105
diff changeset
    34
            'default': '#808080'
082b64a5c699 add vizualizations to server
ymh <ymh.work@gmail.com>
parents: 105
diff changeset
    35
        },
082b64a5c699 add vizualizations to server
ymh <ymh.work@gmail.com>
parents: 105
diff changeset
    36
        order: ['ntm', 'iam', 'hip', 'hop', 'rock', 'rap', 'classic', 'drums', 'guitar', 'bass', 'default']
082b64a5c699 add vizualizations to server
ymh <ymh.work@gmail.com>
parents: 105
diff changeset
    37
    }]
103
123a611c7903 minor update of options and add annotsvizview
rougeronj
parents: 98
diff changeset
    38
};
123a611c7903 minor update of options and add annotsvizview
rougeronj
parents: 98
diff changeset
    39
123a611c7903 minor update of options and add annotsvizview
rougeronj
parents: 98
diff changeset
    40
function AnnotsVizView(options){
123a611c7903 minor update of options and add annotsvizview
rougeronj
parents: 98
diff changeset
    41
	var _this = this;
123a611c7903 minor update of options and add annotsvizview
rougeronj
parents: 98
diff changeset
    42
    var opts = _(options).defaults(defaultOptions).value();
108
082b64a5c699 add vizualizations to server
ymh <ymh.work@gmail.com>
parents: 105
diff changeset
    43
103
123a611c7903 minor update of options and add annotsvizview
rougeronj
parents: 98
diff changeset
    44
    this.container = new PIXI.DisplayObjectContainer();
123a611c7903 minor update of options and add annotsvizview
rougeronj
parents: 98
diff changeset
    45
    this.container.x = opts.xInit;
123a611c7903 minor update of options and add annotsvizview
rougeronj
parents: 98
diff changeset
    46
    this.container.y = opts.yInit;
123a611c7903 minor update of options and add annotsvizview
rougeronj
parents: 98
diff changeset
    47
	this.width = opts.width;
123a611c7903 minor update of options and add annotsvizview
rougeronj
parents: 98
diff changeset
    48
	this.height= opts.height;
108
082b64a5c699 add vizualizations to server
ymh <ymh.work@gmail.com>
parents: 105
diff changeset
    49
    this.annotCategories = opts.annotCategories;
082b64a5c699 add vizualizations to server
ymh <ymh.work@gmail.com>
parents: 105
diff changeset
    50
103
123a611c7903 minor update of options and add annotsvizview
rougeronj
parents: 98
diff changeset
    51
	var wsPianoroll = opts.wsPianoroll;
123a611c7903 minor update of options and add annotsvizview
rougeronj
parents: 98
diff changeset
    52
	var wsAnnot = opts.wsAnnot;
123a611c7903 minor update of options and add annotsvizview
rougeronj
parents: 98
diff changeset
    53
	var stageView = opts.stageView;
108
082b64a5c699 add vizualizations to server
ymh <ymh.work@gmail.com>
parents: 105
diff changeset
    54
103
123a611c7903 minor update of options and add annotsvizview
rougeronj
parents: 98
diff changeset
    55
	stageView.registerComponent(this);
108
082b64a5c699 add vizualizations to server
ymh <ymh.work@gmail.com>
parents: 105
diff changeset
    56
103
123a611c7903 minor update of options and add annotsvizview
rougeronj
parents: 98
diff changeset
    57
	var timeLine = new AnnotsTimeLine.AnnotsTimeLine({
123a611c7903 minor update of options and add annotsvizview
rougeronj
parents: 98
diff changeset
    58
    	stageView : stageView,
123a611c7903 minor update of options and add annotsvizview
rougeronj
parents: 98
diff changeset
    59
        logger: logger,
123a611c7903 minor update of options and add annotsvizview
rougeronj
parents: 98
diff changeset
    60
        ws: new annotviz.WsWrapper(wsUriAnnotation, logger),
123a611c7903 minor update of options and add annotsvizview
rougeronj
parents: 98
diff changeset
    61
        xInit: 0,
123a611c7903 minor update of options and add annotsvizview
rougeronj
parents: 98
diff changeset
    62
        yInit: 0,
104
685c5ebc59d0 update resolution screen
rougeronj
parents: 103
diff changeset
    63
        width: 1024 - 200 - 200,
105
25ac8802c189 Improve interface + Add horizontal pianoroll to annotsvizview
rougeronj
parents: 104
diff changeset
    64
        height: 768-200,
103
123a611c7903 minor update of options and add annotsvizview
rougeronj
parents: 98
diff changeset
    65
        timeBegin: Date.now(),
105
25ac8802c189 Improve interface + Add horizontal pianoroll to annotsvizview
rougeronj
parents: 104
diff changeset
    66
        timeEnd: Date.now() + 3000000,
103
123a611c7903 minor update of options and add annotsvizview
rougeronj
parents: 98
diff changeset
    67
        intervalWidth: 6,
123a611c7903 minor update of options and add annotsvizview
rougeronj
parents: 98
diff changeset
    68
        intervalHeight: 10,
105
25ac8802c189 Improve interface + Add horizontal pianoroll to annotsvizview
rougeronj
parents: 104
diff changeset
    69
        maxCellHeight: 70,
104
685c5ebc59d0 update resolution screen
rougeronj
parents: 103
diff changeset
    70
        radius: 200,
108
082b64a5c699 add vizualizations to server
ymh <ymh.work@gmail.com>
parents: 105
diff changeset
    71
        annotCategories: this.annotCategories
103
123a611c7903 minor update of options and add annotsvizview
rougeronj
parents: 98
diff changeset
    72
    });
108
082b64a5c699 add vizualizations to server
ymh <ymh.work@gmail.com>
parents: 105
diff changeset
    73
105
25ac8802c189 Improve interface + Add horizontal pianoroll to annotsvizview
rougeronj
parents: 104
diff changeset
    74
	var doubleRollH = new DoubleRoll.DoubleRoll({
25ac8802c189 Improve interface + Add horizontal pianoroll to annotsvizview
rougeronj
parents: 104
diff changeset
    75
        stageView : stageView,
25ac8802c189 Improve interface + Add horizontal pianoroll to annotsvizview
rougeronj
parents: 104
diff changeset
    76
    	logger: logger,
25ac8802c189 Improve interface + Add horizontal pianoroll to annotsvizview
rougeronj
parents: 104
diff changeset
    77
        ws: wsPianoroll,
25ac8802c189 Improve interface + Add horizontal pianoroll to annotsvizview
rougeronj
parents: 104
diff changeset
    78
        yInit: (this.height - 200),
25ac8802c189 Improve interface + Add horizontal pianoroll to annotsvizview
rougeronj
parents: 104
diff changeset
    79
        sceneHeight: 200,
25ac8802c189 Improve interface + Add horizontal pianoroll to annotsvizview
rougeronj
parents: 104
diff changeset
    80
        pianorolls : [
25ac8802c189 Improve interface + Add horizontal pianoroll to annotsvizview
rougeronj
parents: 104
diff changeset
    81
            {
25ac8802c189 Improve interface + Add horizontal pianoroll to annotsvizview
rougeronj
parents: 104
diff changeset
    82
                height: 200,
25ac8802c189 Improve interface + Add horizontal pianoroll to annotsvizview
rougeronj
parents: 104
diff changeset
    83
                timeWidth: 10,
25ac8802c189 Improve interface + Add horizontal pianoroll to annotsvizview
rougeronj
parents: 104
diff changeset
    84
                lineInterval: 5000,
25ac8802c189 Improve interface + Add horizontal pianoroll to annotsvizview
rougeronj
parents: 104
diff changeset
    85
                noteHeight: 10
25ac8802c189 Improve interface + Add horizontal pianoroll to annotsvizview
rougeronj
parents: 104
diff changeset
    86
            },
25ac8802c189 Improve interface + Add horizontal pianoroll to annotsvizview
rougeronj
parents: 104
diff changeset
    87
        ]
25ac8802c189 Improve interface + Add horizontal pianoroll to annotsvizview
rougeronj
parents: 104
diff changeset
    88
    });
108
082b64a5c699 add vizualizations to server
ymh <ymh.work@gmail.com>
parents: 105
diff changeset
    89
103
123a611c7903 minor update of options and add annotsvizview
rougeronj
parents: 98
diff changeset
    90
	var doubleRollV = new DoubleRoll.DoubleRoll({
123a611c7903 minor update of options and add annotsvizview
rougeronj
parents: 98
diff changeset
    91
        stageView : stageView,
123a611c7903 minor update of options and add annotsvizview
rougeronj
parents: 98
diff changeset
    92
    	logger: logger,
123a611c7903 minor update of options and add annotsvizview
rougeronj
parents: 98
diff changeset
    93
        ws: wsPianoroll,
123a611c7903 minor update of options and add annotsvizview
rougeronj
parents: 98
diff changeset
    94
        orientation: 'vertical',
105
25ac8802c189 Improve interface + Add horizontal pianoroll to annotsvizview
rougeronj
parents: 104
diff changeset
    95
        sceneHeight: 768-200,
103
123a611c7903 minor update of options and add annotsvizview
rougeronj
parents: 98
diff changeset
    96
        pianorolls : [
123a611c7903 minor update of options and add annotsvizview
rougeronj
parents: 98
diff changeset
    97
            {
104
685c5ebc59d0 update resolution screen
rougeronj
parents: 103
diff changeset
    98
                height: 200,
103
123a611c7903 minor update of options and add annotsvizview
rougeronj
parents: 98
diff changeset
    99
                timeWidth: 60,
123a611c7903 minor update of options and add annotsvizview
rougeronj
parents: 98
diff changeset
   100
                lineInterval: 5000,
105
25ac8802c189 Improve interface + Add horizontal pianoroll to annotsvizview
rougeronj
parents: 104
diff changeset
   101
                noteHeight: 5,
103
123a611c7903 minor update of options and add annotsvizview
rougeronj
parents: 98
diff changeset
   102
            },
123a611c7903 minor update of options and add annotsvizview
rougeronj
parents: 98
diff changeset
   103
        ]
123a611c7903 minor update of options and add annotsvizview
rougeronj
parents: 98
diff changeset
   104
    });
108
082b64a5c699 add vizualizations to server
ymh <ymh.work@gmail.com>
parents: 105
diff changeset
   105
103
123a611c7903 minor update of options and add annotsvizview
rougeronj
parents: 98
diff changeset
   106
	var annotsRoll = new AnnotsRoll.AnnotsRoll({
123a611c7903 minor update of options and add annotsvizview
rougeronj
parents: 98
diff changeset
   107
    	stageView : stageView,
123a611c7903 minor update of options and add annotsvizview
rougeronj
parents: 98
diff changeset
   108
        logger: logger,
123a611c7903 minor update of options and add annotsvizview
rougeronj
parents: 98
diff changeset
   109
        ws: wsAnnot,
123a611c7903 minor update of options and add annotsvizview
rougeronj
parents: 98
diff changeset
   110
        parentContainer: doubleRollV.stage,
104
685c5ebc59d0 update resolution screen
rougeronj
parents: 103
diff changeset
   111
        xInit: 1024 - 200 - 200,
105
25ac8802c189 Improve interface + Add horizontal pianoroll to annotsvizview
rougeronj
parents: 104
diff changeset
   112
        yInit: 768-200,
104
685c5ebc59d0 update resolution screen
rougeronj
parents: 103
diff changeset
   113
        width: 200 + 200,
105
25ac8802c189 Improve interface + Add horizontal pianoroll to annotsvizview
rougeronj
parents: 104
diff changeset
   114
        height: 768-200,
104
685c5ebc59d0 update resolution screen
rougeronj
parents: 103
diff changeset
   115
        widthRoll: 200,
103
123a611c7903 minor update of options and add annotsvizview
rougeronj
parents: 98
diff changeset
   116
        framerate: doubleRollV.framerate,
105
25ac8802c189 Improve interface + Add horizontal pianoroll to annotsvizview
rougeronj
parents: 104
diff changeset
   117
        pixelsPerSecond: Math.floor(1024 / 60),
108
082b64a5c699 add vizualizations to server
ymh <ymh.work@gmail.com>
parents: 105
diff changeset
   118
        annotColors: this.annotCategories
103
123a611c7903 minor update of options and add annotsvizview
rougeronj
parents: 98
diff changeset
   119
    });
108
082b64a5c699 add vizualizations to server
ymh <ymh.work@gmail.com>
parents: 105
diff changeset
   120
105
25ac8802c189 Improve interface + Add horizontal pianoroll to annotsvizview
rougeronj
parents: 104
diff changeset
   121
	var limiters = new PIXI.Graphics()
25ac8802c189 Improve interface + Add horizontal pianoroll to annotsvizview
rougeronj
parents: 104
diff changeset
   122
		.lineStyle(1, 0x646464)
103
123a611c7903 minor update of options and add annotsvizview
rougeronj
parents: 98
diff changeset
   123
		.moveTo(annotsRoll.container.x, annotsRoll.container.y)
123a611c7903 minor update of options and add annotsvizview
rougeronj
parents: 98
diff changeset
   124
		.lineTo(annotsRoll.container.x, annotsRoll.container.y - annotsRoll.height)
123a611c7903 minor update of options and add annotsvizview
rougeronj
parents: 98
diff changeset
   125
		.moveTo(annotsRoll.container.x + annotsRoll.widthRoll, annotsRoll.container.y)
123a611c7903 minor update of options and add annotsvizview
rougeronj
parents: 98
diff changeset
   126
		.lineTo(annotsRoll.container.x + annotsRoll.widthRoll, annotsRoll.container.y - annotsRoll.height)
105
25ac8802c189 Improve interface + Add horizontal pianoroll to annotsvizview
rougeronj
parents: 104
diff changeset
   127
		.moveTo(0, this.height - 200)
25ac8802c189 Improve interface + Add horizontal pianoroll to annotsvizview
rougeronj
parents: 104
diff changeset
   128
		.lineTo(this.width, this.height - 200)
25ac8802c189 Improve interface + Add horizontal pianoroll to annotsvizview
rougeronj
parents: 104
diff changeset
   129
		.drawRect(0, 0, this.width -1, this.height -1)
25ac8802c189 Improve interface + Add horizontal pianoroll to annotsvizview
rougeronj
parents: 104
diff changeset
   130
		.beginFill(0xECECEC)
25ac8802c189 Improve interface + Add horizontal pianoroll to annotsvizview
rougeronj
parents: 104
diff changeset
   131
		.drawRect(1024 - 200, 0, 200, 768-200)
103
123a611c7903 minor update of options and add annotsvizview
rougeronj
parents: 98
diff changeset
   132
		.endFill();
105
25ac8802c189 Improve interface + Add horizontal pianoroll to annotsvizview
rougeronj
parents: 104
diff changeset
   133
	this.container.addChild(limiters);
108
082b64a5c699 add vizualizations to server
ymh <ymh.work@gmail.com>
parents: 105
diff changeset
   134
103
123a611c7903 minor update of options and add annotsvizview
rougeronj
parents: 98
diff changeset
   135
//	var doubleRollV = new DoubleRoll.DoubleRoll({});
108
082b64a5c699 add vizualizations to server
ymh <ymh.work@gmail.com>
parents: 105
diff changeset
   136
103
123a611c7903 minor update of options and add annotsvizview
rougeronj
parents: 98
diff changeset
   137
	this.init = function(){
108
082b64a5c699 add vizualizations to server
ymh <ymh.work@gmail.com>
parents: 105
diff changeset
   138
103
123a611c7903 minor update of options and add annotsvizview
rougeronj
parents: 98
diff changeset
   139
	}
108
082b64a5c699 add vizualizations to server
ymh <ymh.work@gmail.com>
parents: 105
diff changeset
   140
103
123a611c7903 minor update of options and add annotsvizview
rougeronj
parents: 98
diff changeset
   141
	this.start = function() {
123a611c7903 minor update of options and add annotsvizview
rougeronj
parents: 98
diff changeset
   142
    };
108
082b64a5c699 add vizualizations to server
ymh <ymh.work@gmail.com>
parents: 105
diff changeset
   143
103
123a611c7903 minor update of options and add annotsvizview
rougeronj
parents: 98
diff changeset
   144
    this.refresh = function() {
123a611c7903 minor update of options and add annotsvizview
rougeronj
parents: 98
diff changeset
   145
    };
108
082b64a5c699 add vizualizations to server
ymh <ymh.work@gmail.com>
parents: 105
diff changeset
   146
103
123a611c7903 minor update of options and add annotsvizview
rougeronj
parents: 98
diff changeset
   147
    this.stop = function(){
123a611c7903 minor update of options and add annotsvizview
rougeronj
parents: 98
diff changeset
   148
    };
108
082b64a5c699 add vizualizations to server
ymh <ymh.work@gmail.com>
parents: 105
diff changeset
   149
103
123a611c7903 minor update of options and add annotsvizview
rougeronj
parents: 98
diff changeset
   150
    return this;
108
082b64a5c699 add vizualizations to server
ymh <ymh.work@gmail.com>
parents: 105
diff changeset
   151
103
123a611c7903 minor update of options and add annotsvizview
rougeronj
parents: 98
diff changeset
   152
}
123a611c7903 minor update of options and add annotsvizview
rougeronj
parents: 98
diff changeset
   153
123a611c7903 minor update of options and add annotsvizview
rougeronj
parents: 98
diff changeset
   154
module.exports = {
123a611c7903 minor update of options and add annotsvizview
rougeronj
parents: 98
diff changeset
   155
	AnnotsVizView: AnnotsVizView
108
082b64a5c699 add vizualizations to server
ymh <ymh.work@gmail.com>
parents: 105
diff changeset
   156
};