client/annotviz/app/js/stageview.js
author rougeronj
Thu, 16 Apr 2015 12:15:33 +0200
changeset 153 60bd2b36b9dc
parent 131 0bb70072a56f
permissions -rw-r--r--
put showTime as an option and add it to static pianoroll template on server
Ignore whitespace changes - Everywhere: Within whitespace: At end of lines:
101
7e902dc550c5 add stageView and annotstimeline
rougeronj
parents:
diff changeset
     1
/**
7e902dc550c5 add stageView and annotstimeline
rougeronj
parents:
diff changeset
     2
* scripts/stageview.js
7e902dc550c5 add stageView and annotstimeline
rougeronj
parents:
diff changeset
     3
*
7e902dc550c5 add stageView and annotstimeline
rougeronj
parents:
diff changeset
     4
* This is the starting point for your application.
7e902dc550c5 add stageView and annotstimeline
rougeronj
parents:
diff changeset
     5
* Take a look at http://browserify.org/ for more info
7e902dc550c5 add stageView and annotstimeline
rougeronj
parents:
diff changeset
     6
*/
7e902dc550c5 add stageView and annotstimeline
rougeronj
parents:
diff changeset
     7
7e902dc550c5 add stageView and annotstimeline
rougeronj
parents:
diff changeset
     8
/* global document: false */
7e902dc550c5 add stageView and annotstimeline
rougeronj
parents:
diff changeset
     9
7e902dc550c5 add stageView and annotstimeline
rougeronj
parents:
diff changeset
    10
'use strict';
7e902dc550c5 add stageView and annotstimeline
rougeronj
parents:
diff changeset
    11
7e902dc550c5 add stageView and annotstimeline
rougeronj
parents:
diff changeset
    12
7e902dc550c5 add stageView and annotstimeline
rougeronj
parents:
diff changeset
    13
var PIXI = require('pixi');
7e902dc550c5 add stageView and annotstimeline
rougeronj
parents:
diff changeset
    14
var _ = require('lodash');
7e902dc550c5 add stageView and annotstimeline
rougeronj
parents:
diff changeset
    15
7e902dc550c5 add stageView and annotstimeline
rougeronj
parents:
diff changeset
    16
var defaultConfig = {
7e902dc550c5 add stageView and annotstimeline
rougeronj
parents:
diff changeset
    17
    externalRefresh: false,
7e902dc550c5 add stageView and annotstimeline
rougeronj
parents:
diff changeset
    18
    logger: undefined,
104
685c5ebc59d0 update resolution screen
rougeronj
parents: 101
diff changeset
    19
    sceneWidth: 1024,
685c5ebc59d0 update resolution screen
rougeronj
parents: 101
diff changeset
    20
    sceneHeight: 768,
101
7e902dc550c5 add stageView and annotstimeline
rougeronj
parents:
diff changeset
    21
    framerate: 25,
7e902dc550c5 add stageView and annotstimeline
rougeronj
parents:
diff changeset
    22
    sceneBgColor: 0xFFFFFF,
7e902dc550c5 add stageView and annotstimeline
rougeronj
parents:
diff changeset
    23
    canvasContainer: 'canvasContainer',
7e902dc550c5 add stageView and annotstimeline
rougeronj
parents:
diff changeset
    24
};
7e902dc550c5 add stageView and annotstimeline
rougeronj
parents:
diff changeset
    25
7e902dc550c5 add stageView and annotstimeline
rougeronj
parents:
diff changeset
    26
function StageView(options) {
7e902dc550c5 add stageView and annotstimeline
rougeronj
parents:
diff changeset
    27
7e902dc550c5 add stageView and annotstimeline
rougeronj
parents:
diff changeset
    28
    var _this = this;
7e902dc550c5 add stageView and annotstimeline
rougeronj
parents:
diff changeset
    29
    var opts = _(options).defaults(defaultConfig).value();
7e902dc550c5 add stageView and annotstimeline
rougeronj
parents:
diff changeset
    30
7e902dc550c5 add stageView and annotstimeline
rougeronj
parents:
diff changeset
    31
    var externalRefresh = opts.externalRefresh;
7e902dc550c5 add stageView and annotstimeline
rougeronj
parents:
diff changeset
    32
7e902dc550c5 add stageView and annotstimeline
rougeronj
parents:
diff changeset
    33
    this.logger = opts.logger;
7e902dc550c5 add stageView and annotstimeline
rougeronj
parents:
diff changeset
    34
    this.framerate = opts.framerate;
7e902dc550c5 add stageView and annotstimeline
rougeronj
parents:
diff changeset
    35
    var sceneBgColor = opts.sceneBgColor;
7e902dc550c5 add stageView and annotstimeline
rougeronj
parents:
diff changeset
    36
    var sceneWidth = opts.sceneWidth;
7e902dc550c5 add stageView and annotstimeline
rougeronj
parents:
diff changeset
    37
    var sceneHeight = opts.sceneHeight;
7e902dc550c5 add stageView and annotstimeline
rougeronj
parents:
diff changeset
    38
    var canvasContainer = opts.canvasContainer;
105
25ac8802c189 Improve interface + Add horizontal pianoroll to annotsvizview
rougeronj
parents: 104
diff changeset
    39
    var timeContainer = [];
131
0bb70072a56f some quick cleaning
ymh <ymh.work@gmail.com>
parents: 105
diff changeset
    40
    var components = [];
0bb70072a56f some quick cleaning
ymh <ymh.work@gmail.com>
parents: 105
diff changeset
    41
101
7e902dc550c5 add stageView and annotstimeline
rougeronj
parents:
diff changeset
    42
    //create an new instance of a pixi stage
7e902dc550c5 add stageView and annotstimeline
rougeronj
parents:
diff changeset
    43
    this.stage = new PIXI.Stage(sceneBgColor);
7e902dc550c5 add stageView and annotstimeline
rougeronj
parents:
diff changeset
    44
    //create a renderer instance.
7e902dc550c5 add stageView and annotstimeline
rougeronj
parents:
diff changeset
    45
    var renderer = PIXI.autoDetectRenderer(sceneWidth, sceneHeight);
131
0bb70072a56f some quick cleaning
ymh <ymh.work@gmail.com>
parents: 105
diff changeset
    46
101
7e902dc550c5 add stageView and annotstimeline
rougeronj
parents:
diff changeset
    47
    this.init = function() {
7e902dc550c5 add stageView and annotstimeline
rougeronj
parents:
diff changeset
    48
7e902dc550c5 add stageView and annotstimeline
rougeronj
parents:
diff changeset
    49
        if(typeof(canvasContainer) === 'string') {
7e902dc550c5 add stageView and annotstimeline
rougeronj
parents:
diff changeset
    50
            canvasContainer = document.getElementById(canvasContainer);
7e902dc550c5 add stageView and annotstimeline
rougeronj
parents:
diff changeset
    51
        }
7e902dc550c5 add stageView and annotstimeline
rougeronj
parents:
diff changeset
    52
        if(typeof(timeContainer) === 'string') {
7e902dc550c5 add stageView and annotstimeline
rougeronj
parents:
diff changeset
    53
            timeContainer = document.getElementById(timeContainer);
7e902dc550c5 add stageView and annotstimeline
rougeronj
parents:
diff changeset
    54
        }
7e902dc550c5 add stageView and annotstimeline
rougeronj
parents:
diff changeset
    55
7e902dc550c5 add stageView and annotstimeline
rougeronj
parents:
diff changeset
    56
        canvasContainer.appendChild(renderer.view);
131
0bb70072a56f some quick cleaning
ymh <ymh.work@gmail.com>
parents: 105
diff changeset
    57
101
7e902dc550c5 add stageView and annotstimeline
rougeronj
parents:
diff changeset
    58
        components.forEach(function(c){
7e902dc550c5 add stageView and annotstimeline
rougeronj
parents:
diff changeset
    59
    		c.init();
7e902dc550c5 add stageView and annotstimeline
rougeronj
parents:
diff changeset
    60
    	});
7e902dc550c5 add stageView and annotstimeline
rougeronj
parents:
diff changeset
    61
    };
131
0bb70072a56f some quick cleaning
ymh <ymh.work@gmail.com>
parents: 105
diff changeset
    62
105
25ac8802c189 Improve interface + Add horizontal pianoroll to annotsvizview
rougeronj
parents: 104
diff changeset
    63
    this.registerTimeContainer = function(container) {
25ac8802c189 Improve interface + Add horizontal pianoroll to annotsvizview
rougeronj
parents: 104
diff changeset
    64
    	timeContainer.push(container);
25ac8802c189 Improve interface + Add horizontal pianoroll to annotsvizview
rougeronj
parents: 104
diff changeset
    65
    };
131
0bb70072a56f some quick cleaning
ymh <ymh.work@gmail.com>
parents: 105
diff changeset
    66
101
7e902dc550c5 add stageView and annotstimeline
rougeronj
parents:
diff changeset
    67
    this.registerComponent = function(component) {
7e902dc550c5 add stageView and annotstimeline
rougeronj
parents:
diff changeset
    68
    	components.push(component);
7e902dc550c5 add stageView and annotstimeline
rougeronj
parents:
diff changeset
    69
    	this.stage.addChild(component.container);
7e902dc550c5 add stageView and annotstimeline
rougeronj
parents:
diff changeset
    70
    };
7e902dc550c5 add stageView and annotstimeline
rougeronj
parents:
diff changeset
    71
7e902dc550c5 add stageView and annotstimeline
rougeronj
parents:
diff changeset
    72
    this.refresh = function() {
7e902dc550c5 add stageView and annotstimeline
rougeronj
parents:
diff changeset
    73
    	components.forEach(function(c){
7e902dc550c5 add stageView and annotstimeline
rougeronj
parents:
diff changeset
    74
    		c.refresh();
7e902dc550c5 add stageView and annotstimeline
rougeronj
parents:
diff changeset
    75
    	});
7e902dc550c5 add stageView and annotstimeline
rougeronj
parents:
diff changeset
    76
        renderer.render(this.stage);
7e902dc550c5 add stageView and annotstimeline
rougeronj
parents:
diff changeset
    77
    };
7e902dc550c5 add stageView and annotstimeline
rougeronj
parents:
diff changeset
    78
7e902dc550c5 add stageView and annotstimeline
rougeronj
parents:
diff changeset
    79
    // Init page and intervals
7e902dc550c5 add stageView and annotstimeline
rougeronj
parents:
diff changeset
    80
    var refreshInterval;
7e902dc550c5 add stageView and annotstimeline
rougeronj
parents:
diff changeset
    81
7e902dc550c5 add stageView and annotstimeline
rougeronj
parents:
diff changeset
    82
    this.start = function() {
7e902dc550c5 add stageView and annotstimeline
rougeronj
parents:
diff changeset
    83
7e902dc550c5 add stageView and annotstimeline
rougeronj
parents:
diff changeset
    84
        if(!externalRefresh) {
7e902dc550c5 add stageView and annotstimeline
rougeronj
parents:
diff changeset
    85
            refreshInterval = setInterval(function() {_this.refresh();}, 1000/this.framerate);
7e902dc550c5 add stageView and annotstimeline
rougeronj
parents:
diff changeset
    86
        }
131
0bb70072a56f some quick cleaning
ymh <ymh.work@gmail.com>
parents: 105
diff changeset
    87
101
7e902dc550c5 add stageView and annotstimeline
rougeronj
parents:
diff changeset
    88
        components.forEach(function(c){
7e902dc550c5 add stageView and annotstimeline
rougeronj
parents:
diff changeset
    89
    		c.start();
7e902dc550c5 add stageView and annotstimeline
rougeronj
parents:
diff changeset
    90
    	});
7e902dc550c5 add stageView and annotstimeline
rougeronj
parents:
diff changeset
    91
    };
7e902dc550c5 add stageView and annotstimeline
rougeronj
parents:
diff changeset
    92
7e902dc550c5 add stageView and annotstimeline
rougeronj
parents:
diff changeset
    93
    this.stop = function() {
7e902dc550c5 add stageView and annotstimeline
rougeronj
parents:
diff changeset
    94
        if(!externalRefresh) {
7e902dc550c5 add stageView and annotstimeline
rougeronj
parents:
diff changeset
    95
            clearInterval(refreshInterval);
7e902dc550c5 add stageView and annotstimeline
rougeronj
parents:
diff changeset
    96
        }
7e902dc550c5 add stageView and annotstimeline
rougeronj
parents:
diff changeset
    97
        
7e902dc550c5 add stageView and annotstimeline
rougeronj
parents:
diff changeset
    98
        components.forEach(function(c){
7e902dc550c5 add stageView and annotstimeline
rougeronj
parents:
diff changeset
    99
    		c.stop();
7e902dc550c5 add stageView and annotstimeline
rougeronj
parents:
diff changeset
   100
    	});
7e902dc550c5 add stageView and annotstimeline
rougeronj
parents:
diff changeset
   101
    };
7e902dc550c5 add stageView and annotstimeline
rougeronj
parents:
diff changeset
   102
7e902dc550c5 add stageView and annotstimeline
rougeronj
parents:
diff changeset
   103
7e902dc550c5 add stageView and annotstimeline
rougeronj
parents:
diff changeset
   104
    this.log = function(m) {
7e902dc550c5 add stageView and annotstimeline
rougeronj
parents:
diff changeset
   105
        if(this.logger) {
7e902dc550c5 add stageView and annotstimeline
rougeronj
parents:
diff changeset
   106
            this.logger.log(m);
7e902dc550c5 add stageView and annotstimeline
rougeronj
parents:
diff changeset
   107
        }
7e902dc550c5 add stageView and annotstimeline
rougeronj
parents:
diff changeset
   108
    };
7e902dc550c5 add stageView and annotstimeline
rougeronj
parents:
diff changeset
   109
7e902dc550c5 add stageView and annotstimeline
rougeronj
parents:
diff changeset
   110
7e902dc550c5 add stageView and annotstimeline
rougeronj
parents:
diff changeset
   111
    return this;
7e902dc550c5 add stageView and annotstimeline
rougeronj
parents:
diff changeset
   112
}
7e902dc550c5 add stageView and annotstimeline
rougeronj
parents:
diff changeset
   113
7e902dc550c5 add stageView and annotstimeline
rougeronj
parents:
diff changeset
   114
module.exports = {
7e902dc550c5 add stageView and annotstimeline
rougeronj
parents:
diff changeset
   115
    StageView: StageView
7e902dc550c5 add stageView and annotstimeline
rougeronj
parents:
diff changeset
   116
};