client/annotviz/app/js/annotsroll.js
author rougeronj
Wed, 21 Jan 2015 12:14:16 +0100
changeset 102 cc7b06bfd574
parent 100 0d7dac03c1a0
child 103 123a611c7903
permissions -rw-r--r--
update to circle representation
Ignore whitespace changes - Everywhere: Within whitespace: At end of lines:
89
b4bd49f01837 add annotsRoll class and create it in main. Adapt main and pianoroll to allow horizontal or vertical view
rougeronj
parents:
diff changeset
     1
/**
b4bd49f01837 add annotsRoll class and create it in main. Adapt main and pianoroll to allow horizontal or vertical view
rougeronj
parents:
diff changeset
     2
* js/annotsRoll.js
b4bd49f01837 add annotsRoll class and create it in main. Adapt main and pianoroll to allow horizontal or vertical view
rougeronj
parents:
diff changeset
     3
*
b4bd49f01837 add annotsRoll class and create it in main. Adapt main and pianoroll to allow horizontal or vertical view
rougeronj
parents:
diff changeset
     4
* annotsRoll basic component
b4bd49f01837 add annotsRoll class and create it in main. Adapt main and pianoroll to allow horizontal or vertical view
rougeronj
parents:
diff changeset
     5
*
b4bd49f01837 add annotsRoll class and create it in main. Adapt main and pianoroll to allow horizontal or vertical view
rougeronj
parents:
diff changeset
     6
*/
b4bd49f01837 add annotsRoll class and create it in main. Adapt main and pianoroll to allow horizontal or vertical view
rougeronj
parents:
diff changeset
     7
b4bd49f01837 add annotsRoll class and create it in main. Adapt main and pianoroll to allow horizontal or vertical view
rougeronj
parents:
diff changeset
     8
'use strict';
b4bd49f01837 add annotsRoll class and create it in main. Adapt main and pianoroll to allow horizontal or vertical view
rougeronj
parents:
diff changeset
     9
b4bd49f01837 add annotsRoll class and create it in main. Adapt main and pianoroll to allow horizontal or vertical view
rougeronj
parents:
diff changeset
    10
var PIXI = require('pixi');
98
72d767c5142d refactor and make work annotsroll
ymh <ymh.work@gmail.com>
parents: 97
diff changeset
    11
var _ = require('lodash');
89
b4bd49f01837 add annotsRoll class and create it in main. Adapt main and pianoroll to allow horizontal or vertical view
rougeronj
parents:
diff changeset
    12
98
72d767c5142d refactor and make work annotsroll
ymh <ymh.work@gmail.com>
parents: 97
diff changeset
    13
//
72d767c5142d refactor and make work annotsroll
ymh <ymh.work@gmail.com>
parents: 97
diff changeset
    14
//
72d767c5142d refactor and make work annotsroll
ymh <ymh.work@gmail.com>
parents: 97
diff changeset
    15
//
72d767c5142d refactor and make work annotsroll
ymh <ymh.work@gmail.com>
parents: 97
diff changeset
    16
// options = {
72d767c5142d refactor and make work annotsroll
ymh <ymh.work@gmail.com>
parents: 97
diff changeset
    17
//     parentContainer:,
72d767c5142d refactor and make work annotsroll
ymh <ymh.work@gmail.com>
parents: 97
diff changeset
    18
//     externalRefresh: true/false
72d767c5142d refactor and make work annotsroll
ymh <ymh.work@gmail.com>
parents: 97
diff changeset
    19
//     ws:,
72d767c5142d refactor and make work annotsroll
ymh <ymh.work@gmail.com>
parents: 97
diff changeset
    20
//     xInit:,
72d767c5142d refactor and make work annotsroll
ymh <ymh.work@gmail.com>
parents: 97
diff changeset
    21
//     yInit:,
72d767c5142d refactor and make work annotsroll
ymh <ymh.work@gmail.com>
parents: 97
diff changeset
    22
//     width:,
72d767c5142d refactor and make work annotsroll
ymh <ymh.work@gmail.com>
parents: 97
diff changeset
    23
//     height:,
72d767c5142d refactor and make work annotsroll
ymh <ymh.work@gmail.com>
parents: 97
diff changeset
    24
//     widthRoll:,
72d767c5142d refactor and make work annotsroll
ymh <ymh.work@gmail.com>
parents: 97
diff changeset
    25
//     pixelsPerSecond:,
72d767c5142d refactor and make work annotsroll
ymh <ymh.work@gmail.com>
parents: 97
diff changeset
    26
//     framerate:,
72d767c5142d refactor and make work annotsroll
ymh <ymh.work@gmail.com>
parents: 97
diff changeset
    27
//     annotColors: [{ts: , colors: {code1 : '#dshdsj', code2: 'sdasd', 'default': 'dsadas'}}],
72d767c5142d refactor and make work annotsroll
ymh <ymh.work@gmail.com>
parents: 97
diff changeset
    28
//     defaultColor: default,
72d767c5142d refactor and make work annotsroll
ymh <ymh.work@gmail.com>
parents: 97
diff changeset
    29
//     annotStyles: {
72d767c5142d refactor and make work annotsroll
ymh <ymh.work@gmail.com>
parents: 97
diff changeset
    30
//         'label': {font:, fill:},
72d767c5142d refactor and make work annotsroll
ymh <ymh.work@gmail.com>
parents: 97
diff changeset
    31
//         'text':{font:, fill:},
72d767c5142d refactor and make work annotsroll
ymh <ymh.work@gmail.com>
parents: 97
diff changeset
    32
//         'user':{font:, fill:},
72d767c5142d refactor and make work annotsroll
ymh <ymh.work@gmail.com>
parents: 97
diff changeset
    33
//     }
72d767c5142d refactor and make work annotsroll
ymh <ymh.work@gmail.com>
parents: 97
diff changeset
    34
// }
72d767c5142d refactor and make work annotsroll
ymh <ymh.work@gmail.com>
parents: 97
diff changeset
    35
var DEFAULT_ANNOT_COLOR = '#bababa';
72d767c5142d refactor and make work annotsroll
ymh <ymh.work@gmail.com>
parents: 97
diff changeset
    36
72d767c5142d refactor and make work annotsroll
ymh <ymh.work@gmail.com>
parents: 97
diff changeset
    37
var defaultAnnotStyles = {
72d767c5142d refactor and make work annotsroll
ymh <ymh.work@gmail.com>
parents: 97
diff changeset
    38
    'label': { font: '26pt Arial Bold', fill: '#65A954' },
72d767c5142d refactor and make work annotsroll
ymh <ymh.work@gmail.com>
parents: 97
diff changeset
    39
    'text' : { font: '20pt Arial Regular', fill: '#444444' },
72d767c5142d refactor and make work annotsroll
ymh <ymh.work@gmail.com>
parents: 97
diff changeset
    40
    'user' : { font: '22pt Arial regular', fill: '#444444' },
72d767c5142d refactor and make work annotsroll
ymh <ymh.work@gmail.com>
parents: 97
diff changeset
    41
};
72d767c5142d refactor and make work annotsroll
ymh <ymh.work@gmail.com>
parents: 97
diff changeset
    42
72d767c5142d refactor and make work annotsroll
ymh <ymh.work@gmail.com>
parents: 97
diff changeset
    43
var defaultOptions = {
72d767c5142d refactor and make work annotsroll
ymh <ymh.work@gmail.com>
parents: 97
diff changeset
    44
    externalRefresh: false,
72d767c5142d refactor and make work annotsroll
ymh <ymh.work@gmail.com>
parents: 97
diff changeset
    45
    defaultColor: DEFAULT_ANNOT_COLOR,
72d767c5142d refactor and make work annotsroll
ymh <ymh.work@gmail.com>
parents: 97
diff changeset
    46
    annotStyles: defaultAnnotStyles
72d767c5142d refactor and make work annotsroll
ymh <ymh.work@gmail.com>
parents: 97
diff changeset
    47
};
72d767c5142d refactor and make work annotsroll
ymh <ymh.work@gmail.com>
parents: 97
diff changeset
    48
72d767c5142d refactor and make work annotsroll
ymh <ymh.work@gmail.com>
parents: 97
diff changeset
    49
function AnnotsRoll(options) {
72d767c5142d refactor and make work annotsroll
ymh <ymh.work@gmail.com>
parents: 97
diff changeset
    50
72d767c5142d refactor and make work annotsroll
ymh <ymh.work@gmail.com>
parents: 97
diff changeset
    51
//parentContainer, xInit, yInit, width, height, widthRoll, pixelsPerSecond, annotColors
89
b4bd49f01837 add annotsRoll class and create it in main. Adapt main and pianoroll to allow horizontal or vertical view
rougeronj
parents:
diff changeset
    52
    var _this = this;
98
72d767c5142d refactor and make work annotsroll
ymh <ymh.work@gmail.com>
parents: 97
diff changeset
    53
    var opts = _(options).defaults(defaultOptions).value();
72d767c5142d refactor and make work annotsroll
ymh <ymh.work@gmail.com>
parents: 97
diff changeset
    54
72d767c5142d refactor and make work annotsroll
ymh <ymh.work@gmail.com>
parents: 97
diff changeset
    55
89
b4bd49f01837 add annotsRoll class and create it in main. Adapt main and pianoroll to allow horizontal or vertical view
rougeronj
parents:
diff changeset
    56
    this.container = new PIXI.DisplayObjectContainer();
98
72d767c5142d refactor and make work annotsroll
ymh <ymh.work@gmail.com>
parents: 97
diff changeset
    57
    this.container.x = opts.xInit;
72d767c5142d refactor and make work annotsroll
ymh <ymh.work@gmail.com>
parents: 97
diff changeset
    58
    this.container.y = opts.yInit;
72d767c5142d refactor and make work annotsroll
ymh <ymh.work@gmail.com>
parents: 97
diff changeset
    59
    this.container.width = opts.width;
72d767c5142d refactor and make work annotsroll
ymh <ymh.work@gmail.com>
parents: 97
diff changeset
    60
72d767c5142d refactor and make work annotsroll
ymh <ymh.work@gmail.com>
parents: 97
diff changeset
    61
    this.height = opts.height;
72d767c5142d refactor and make work annotsroll
ymh <ymh.work@gmail.com>
parents: 97
diff changeset
    62
    this.width = opts.width;
72d767c5142d refactor and make work annotsroll
ymh <ymh.work@gmail.com>
parents: 97
diff changeset
    63
    this.widthRoll = opts.widthRoll;
72d767c5142d refactor and make work annotsroll
ymh <ymh.work@gmail.com>
parents: 97
diff changeset
    64
    this.pixelsPerSecond = opts.pixelsPerSecond;
72d767c5142d refactor and make work annotsroll
ymh <ymh.work@gmail.com>
parents: 97
diff changeset
    65
    this.annotColors = opts.annotColors;
72d767c5142d refactor and make work annotsroll
ymh <ymh.work@gmail.com>
parents: 97
diff changeset
    66
    this.startTs = options.startTs || Date.now();
89
b4bd49f01837 add annotsRoll class and create it in main. Adapt main and pianoroll to allow horizontal or vertical view
rougeronj
parents:
diff changeset
    67
98
72d767c5142d refactor and make work annotsroll
ymh <ymh.work@gmail.com>
parents: 97
diff changeset
    68
    var yInit = opts.yInit;
72d767c5142d refactor and make work annotsroll
ymh <ymh.work@gmail.com>
parents: 97
diff changeset
    69
    var annotStyles = _(opts.annotStyles).defaults(defaultAnnotStyles).value();
72d767c5142d refactor and make work annotsroll
ymh <ymh.work@gmail.com>
parents: 97
diff changeset
    70
    var started = false;
72d767c5142d refactor and make work annotsroll
ymh <ymh.work@gmail.com>
parents: 97
diff changeset
    71
    var ws = opts.ws;
72d767c5142d refactor and make work annotsroll
ymh <ymh.work@gmail.com>
parents: 97
diff changeset
    72
    var externalRefresh = opts.externalRefresh;
100
0d7dac03c1a0 Merge with 72d767c5142df7fc6387215096321295fbaaa73d
rougeronj
parents: 99 98
diff changeset
    73
    var stageView = opts.stageView;
0d7dac03c1a0 Merge with 72d767c5142df7fc6387215096321295fbaaa73d
rougeronj
parents: 99 98
diff changeset
    74
    
0d7dac03c1a0 Merge with 72d767c5142df7fc6387215096321295fbaaa73d
rougeronj
parents: 99 98
diff changeset
    75
    stageView.registerComponent(this);
98
72d767c5142d refactor and make work annotsroll
ymh <ymh.work@gmail.com>
parents: 97
diff changeset
    76
72d767c5142d refactor and make work annotsroll
ymh <ymh.work@gmail.com>
parents: 97
diff changeset
    77
    var isHidden = function(child) {
72d767c5142d refactor and make work annotsroll
ymh <ymh.work@gmail.com>
parents: 97
diff changeset
    78
        // TODO: the origin point is an approximation. Should refine this
72d767c5142d refactor and make work annotsroll
ymh <ymh.work@gmail.com>
parents: 97
diff changeset
    79
        var globalPos = child.toGlobal(new PIXI.Point(0,0));
72d767c5142d refactor and make work annotsroll
ymh <ymh.work@gmail.com>
parents: 97
diff changeset
    80
        return ((globalPos.x + child.width) < 0) || ((globalPos.y + child.height) < 0) ;
72d767c5142d refactor and make work annotsroll
ymh <ymh.work@gmail.com>
parents: 97
diff changeset
    81
    };
72d767c5142d refactor and make work annotsroll
ymh <ymh.work@gmail.com>
parents: 97
diff changeset
    82
72d767c5142d refactor and make work annotsroll
ymh <ymh.work@gmail.com>
parents: 97
diff changeset
    83
    this.addAnnots = function(data) {
72d767c5142d refactor and make work annotsroll
ymh <ymh.work@gmail.com>
parents: 97
diff changeset
    84
72d767c5142d refactor and make work annotsroll
ymh <ymh.work@gmail.com>
parents: 97
diff changeset
    85
        //var title = data.content.category.label;
72d767c5142d refactor and make work annotsroll
ymh <ymh.work@gmail.com>
parents: 97
diff changeset
    86
        //var user = data.content.user;
72d767c5142d refactor and make work annotsroll
ymh <ymh.work@gmail.com>
parents: 97
diff changeset
    87
        //Test cat and color
72d767c5142d refactor and make work annotsroll
ymh <ymh.work@gmail.com>
parents: 97
diff changeset
    88
        //var colorAnnot = 0x65A954;
72d767c5142d refactor and make work annotsroll
ymh <ymh.work@gmail.com>
parents: 97
diff changeset
    89
        var category = data.content.category.label,
72d767c5142d refactor and make work annotsroll
ymh <ymh.work@gmail.com>
parents: 97
diff changeset
    90
            text     = data.content.text,
72d767c5142d refactor and make work annotsroll
ymh <ymh.work@gmail.com>
parents: 97
diff changeset
    91
            user     = data.content.user,
72d767c5142d refactor and make work annotsroll
ymh <ymh.work@gmail.com>
parents: 97
diff changeset
    92
            ts       = Date.parse(data.ts),
72d767c5142d refactor and make work annotsroll
ymh <ymh.work@gmail.com>
parents: 97
diff changeset
    93
            color    = this.getColor(ts, data.content.category.code);
72d767c5142d refactor and make work annotsroll
ymh <ymh.work@gmail.com>
parents: 97
diff changeset
    94
72d767c5142d refactor and make work annotsroll
ymh <ymh.work@gmail.com>
parents: 97
diff changeset
    95
        this.addAnnot(category, text, user, color, ts);
72d767c5142d refactor and make work annotsroll
ymh <ymh.work@gmail.com>
parents: 97
diff changeset
    96
    };
89
b4bd49f01837 add annotsRoll class and create it in main. Adapt main and pianoroll to allow horizontal or vertical view
rougeronj
parents:
diff changeset
    97
98
72d767c5142d refactor and make work annotsroll
ymh <ymh.work@gmail.com>
parents: 97
diff changeset
    98
    this.getColor = function(ts, code) {
72d767c5142d refactor and make work annotsroll
ymh <ymh.work@gmail.com>
parents: 97
diff changeset
    99
        var colorsDef;
72d767c5142d refactor and make work annotsroll
ymh <ymh.work@gmail.com>
parents: 97
diff changeset
   100
        _(this.annotColors).eachRight(function(cdef) {
72d767c5142d refactor and make work annotsroll
ymh <ymh.work@gmail.com>
parents: 97
diff changeset
   101
            console.log("cDef", cdef);
72d767c5142d refactor and make work annotsroll
ymh <ymh.work@gmail.com>
parents: 97
diff changeset
   102
            console.log("cDef ts", cdef.ts, ts);
72d767c5142d refactor and make work annotsroll
ymh <ymh.work@gmail.com>
parents: 97
diff changeset
   103
            if(cdef.ts < ts) {
72d767c5142d refactor and make work annotsroll
ymh <ymh.work@gmail.com>
parents: 97
diff changeset
   104
                colorsDef = cdef.colors;
72d767c5142d refactor and make work annotsroll
ymh <ymh.work@gmail.com>
parents: 97
diff changeset
   105
                return false;
72d767c5142d refactor and make work annotsroll
ymh <ymh.work@gmail.com>
parents: 97
diff changeset
   106
            }
72d767c5142d refactor and make work annotsroll
ymh <ymh.work@gmail.com>
parents: 97
diff changeset
   107
        });
72d767c5142d refactor and make work annotsroll
ymh <ymh.work@gmail.com>
parents: 97
diff changeset
   108
        var resColor;
72d767c5142d refactor and make work annotsroll
ymh <ymh.work@gmail.com>
parents: 97
diff changeset
   109
        console.log("colorsDef", colorsDef);
72d767c5142d refactor and make work annotsroll
ymh <ymh.work@gmail.com>
parents: 97
diff changeset
   110
        if(colorsDef) {
72d767c5142d refactor and make work annotsroll
ymh <ymh.work@gmail.com>
parents: 97
diff changeset
   111
            resColor = colorsDef[code];
72d767c5142d refactor and make work annotsroll
ymh <ymh.work@gmail.com>
parents: 97
diff changeset
   112
        }
72d767c5142d refactor and make work annotsroll
ymh <ymh.work@gmail.com>
parents: 97
diff changeset
   113
        if(!resColor) {
72d767c5142d refactor and make work annotsroll
ymh <ymh.work@gmail.com>
parents: 97
diff changeset
   114
            resColor = DEFAULT_ANNOT_COLOR;
72d767c5142d refactor and make work annotsroll
ymh <ymh.work@gmail.com>
parents: 97
diff changeset
   115
        }
72d767c5142d refactor and make work annotsroll
ymh <ymh.work@gmail.com>
parents: 97
diff changeset
   116
        return resColor;
72d767c5142d refactor and make work annotsroll
ymh <ymh.work@gmail.com>
parents: 97
diff changeset
   117
    }
72d767c5142d refactor and make work annotsroll
ymh <ymh.work@gmail.com>
parents: 97
diff changeset
   118
72d767c5142d refactor and make work annotsroll
ymh <ymh.work@gmail.com>
parents: 97
diff changeset
   119
    this.addAnnot = function(category, text, user, catColor, ts){
72d767c5142d refactor and make work annotsroll
ymh <ymh.work@gmail.com>
parents: 97
diff changeset
   120
72d767c5142d refactor and make work annotsroll
ymh <ymh.work@gmail.com>
parents: 97
diff changeset
   121
        var color = catColor ? catColor : DEFAULT_ANNOT_COLOR;
72d767c5142d refactor and make work annotsroll
ymh <ymh.work@gmail.com>
parents: 97
diff changeset
   122
        var x = 0;
72d767c5142d refactor and make work annotsroll
ymh <ymh.work@gmail.com>
parents: 97
diff changeset
   123
        var y = (ts-this.startTs) * this.pixelsPerSecond / 1000 + yInit;
72d767c5142d refactor and make work annotsroll
ymh <ymh.work@gmail.com>
parents: 97
diff changeset
   124
72d767c5142d refactor and make work annotsroll
ymh <ymh.work@gmail.com>
parents: 97
diff changeset
   125
        var colorHex = parseInt(color.replace(/^#/, ''), 16);
72d767c5142d refactor and make work annotsroll
ymh <ymh.work@gmail.com>
parents: 97
diff changeset
   126
72d767c5142d refactor and make work annotsroll
ymh <ymh.work@gmail.com>
parents: 97
diff changeset
   127
        var graphics = new PIXI.Graphics()
72d767c5142d refactor and make work annotsroll
ymh <ymh.work@gmail.com>
parents: 97
diff changeset
   128
            .beginFill(colorHex)
72d767c5142d refactor and make work annotsroll
ymh <ymh.work@gmail.com>
parents: 97
diff changeset
   129
            .drawRect(x, y, 10, 3)
72d767c5142d refactor and make work annotsroll
ymh <ymh.work@gmail.com>
parents: 97
diff changeset
   130
            .endFill();
72d767c5142d refactor and make work annotsroll
ymh <ymh.work@gmail.com>
parents: 97
diff changeset
   131
89
b4bd49f01837 add annotsRoll class and create it in main. Adapt main and pianoroll to allow horizontal or vertical view
rougeronj
parents:
diff changeset
   132
        this.container.addChild(graphics);
b4bd49f01837 add annotsRoll class and create it in main. Adapt main and pianoroll to allow horizontal or vertical view
rougeronj
parents:
diff changeset
   133
98
72d767c5142d refactor and make work annotsroll
ymh <ymh.work@gmail.com>
parents: 97
diff changeset
   134
        var catLabel = new PIXI.Text(
72d767c5142d refactor and make work annotsroll
ymh <ymh.work@gmail.com>
parents: 97
diff changeset
   135
            category,
72d767c5142d refactor and make work annotsroll
ymh <ymh.work@gmail.com>
parents: 97
diff changeset
   136
            _(annotStyles.label).extend({fill: color}).value()
72d767c5142d refactor and make work annotsroll
ymh <ymh.work@gmail.com>
parents: 97
diff changeset
   137
        );
72d767c5142d refactor and make work annotsroll
ymh <ymh.work@gmail.com>
parents: 97
diff changeset
   138
        catLabel.x = x + 20;
72d767c5142d refactor and make work annotsroll
ymh <ymh.work@gmail.com>
parents: 97
diff changeset
   139
        catLabel.y = y - 23;
72d767c5142d refactor and make work annotsroll
ymh <ymh.work@gmail.com>
parents: 97
diff changeset
   140
        this.container.addChild(catLabel);
72d767c5142d refactor and make work annotsroll
ymh <ymh.work@gmail.com>
parents: 97
diff changeset
   141
72d767c5142d refactor and make work annotsroll
ymh <ymh.work@gmail.com>
parents: 97
diff changeset
   142
        var textHeight = 0;
72d767c5142d refactor and make work annotsroll
ymh <ymh.work@gmail.com>
parents: 97
diff changeset
   143
        if(text) {
72d767c5142d refactor and make work annotsroll
ymh <ymh.work@gmail.com>
parents: 97
diff changeset
   144
            var catText = new PIXI.Text(text, annotStyles.text);
72d767c5142d refactor and make work annotsroll
ymh <ymh.work@gmail.com>
parents: 97
diff changeset
   145
            catText.x = x + 20;
72d767c5142d refactor and make work annotsroll
ymh <ymh.work@gmail.com>
parents: 97
diff changeset
   146
            catText.y = y + 2;
72d767c5142d refactor and make work annotsroll
ymh <ymh.work@gmail.com>
parents: 97
diff changeset
   147
            this.container.addChild(catText);
72d767c5142d refactor and make work annotsroll
ymh <ymh.work@gmail.com>
parents: 97
diff changeset
   148
            textHeight += (catText.height + 2);
72d767c5142d refactor and make work annotsroll
ymh <ymh.work@gmail.com>
parents: 97
diff changeset
   149
        }
72d767c5142d refactor and make work annotsroll
ymh <ymh.work@gmail.com>
parents: 97
diff changeset
   150
72d767c5142d refactor and make work annotsroll
ymh <ymh.work@gmail.com>
parents: 97
diff changeset
   151
        var catUser = new PIXI.Text(user, annotStyles.user);
72d767c5142d refactor and make work annotsroll
ymh <ymh.work@gmail.com>
parents: 97
diff changeset
   152
        catUser.x = x + 20;
72d767c5142d refactor and make work annotsroll
ymh <ymh.work@gmail.com>
parents: 97
diff changeset
   153
        catUser.y = y + 2 + textHeight;
72d767c5142d refactor and make work annotsroll
ymh <ymh.work@gmail.com>
parents: 97
diff changeset
   154
        this.container.addChild(catUser);
72d767c5142d refactor and make work annotsroll
ymh <ymh.work@gmail.com>
parents: 97
diff changeset
   155
72d767c5142d refactor and make work annotsroll
ymh <ymh.work@gmail.com>
parents: 97
diff changeset
   156
        this.addAnnotLine(colorHex, y);
89
b4bd49f01837 add annotsRoll class and create it in main. Adapt main and pianoroll to allow horizontal or vertical view
rougeronj
parents:
diff changeset
   157
    };
b4bd49f01837 add annotsRoll class and create it in main. Adapt main and pianoroll to allow horizontal or vertical view
rougeronj
parents:
diff changeset
   158
98
72d767c5142d refactor and make work annotsroll
ymh <ymh.work@gmail.com>
parents: 97
diff changeset
   159
    this.addAnnotLine = function(color, y) {
72d767c5142d refactor and make work annotsroll
ymh <ymh.work@gmail.com>
parents: 97
diff changeset
   160
        var x = this.widthRoll;
72d767c5142d refactor and make work annotsroll
ymh <ymh.work@gmail.com>
parents: 97
diff changeset
   161
72d767c5142d refactor and make work annotsroll
ymh <ymh.work@gmail.com>
parents: 97
diff changeset
   162
72d767c5142d refactor and make work annotsroll
ymh <ymh.work@gmail.com>
parents: 97
diff changeset
   163
        var graphics = new PIXI.Graphics()
72d767c5142d refactor and make work annotsroll
ymh <ymh.work@gmail.com>
parents: 97
diff changeset
   164
            .beginFill(color)
72d767c5142d refactor and make work annotsroll
ymh <ymh.work@gmail.com>
parents: 97
diff changeset
   165
            .drawRect(x, y, this.width - x, 3)
72d767c5142d refactor and make work annotsroll
ymh <ymh.work@gmail.com>
parents: 97
diff changeset
   166
            .endFill();
72d767c5142d refactor and make work annotsroll
ymh <ymh.work@gmail.com>
parents: 97
diff changeset
   167
89
b4bd49f01837 add annotsRoll class and create it in main. Adapt main and pianoroll to allow horizontal or vertical view
rougeronj
parents:
diff changeset
   168
        this.container.addChild(graphics);
b4bd49f01837 add annotsRoll class and create it in main. Adapt main and pianoroll to allow horizontal or vertical view
rougeronj
parents:
diff changeset
   169
    };
b4bd49f01837 add annotsRoll class and create it in main. Adapt main and pianoroll to allow horizontal or vertical view
rougeronj
parents:
diff changeset
   170
b4bd49f01837 add annotsRoll class and create it in main. Adapt main and pianoroll to allow horizontal or vertical view
rougeronj
parents:
diff changeset
   171
    this.moveTo = function(diffTime){
b4bd49f01837 add annotsRoll class and create it in main. Adapt main and pianoroll to allow horizontal or vertical view
rougeronj
parents:
diff changeset
   172
    	this.container.y = Math.floor(diffTime*this.pixelsPerSecond);
b4bd49f01837 add annotsRoll class and create it in main. Adapt main and pianoroll to allow horizontal or vertical view
rougeronj
parents:
diff changeset
   173
    };
b4bd49f01837 add annotsRoll class and create it in main. Adapt main and pianoroll to allow horizontal or vertical view
rougeronj
parents:
diff changeset
   174
98
72d767c5142d refactor and make work annotsroll
ymh <ymh.work@gmail.com>
parents: 97
diff changeset
   175
    this.move = this.refresh = function() {
72d767c5142d refactor and make work annotsroll
ymh <ymh.work@gmail.com>
parents: 97
diff changeset
   176
        var diff = (this.startTs - Date.now())/1000;
72d767c5142d refactor and make work annotsroll
ymh <ymh.work@gmail.com>
parents: 97
diff changeset
   177
        this.moveTo(diff);
72d767c5142d refactor and make work annotsroll
ymh <ymh.work@gmail.com>
parents: 97
diff changeset
   178
    };
72d767c5142d refactor and make work annotsroll
ymh <ymh.work@gmail.com>
parents: 97
diff changeset
   179
89
b4bd49f01837 add annotsRoll class and create it in main. Adapt main and pianoroll to allow horizontal or vertical view
rougeronj
parents:
diff changeset
   180
    this.removePassedObjets = function(){
98
72d767c5142d refactor and make work annotsroll
ymh <ymh.work@gmail.com>
parents: 97
diff changeset
   181
        var childrenToRemove = [];
72d767c5142d refactor and make work annotsroll
ymh <ymh.work@gmail.com>
parents: 97
diff changeset
   182
        _(_this.container.children).forEach(function(child) {
72d767c5142d refactor and make work annotsroll
ymh <ymh.work@gmail.com>
parents: 97
diff changeset
   183
            return typeof(child) === 'undefined' ||
72d767c5142d refactor and make work annotsroll
ymh <ymh.work@gmail.com>
parents: 97
diff changeset
   184
                (isHidden(child) && childrenToRemove.push(child));
72d767c5142d refactor and make work annotsroll
ymh <ymh.work@gmail.com>
parents: 97
diff changeset
   185
        });
89
b4bd49f01837 add annotsRoll class and create it in main. Adapt main and pianoroll to allow horizontal or vertical view
rougeronj
parents:
diff changeset
   186
        childrenToRemove.forEach(function(child) {
b4bd49f01837 add annotsRoll class and create it in main. Adapt main and pianoroll to allow horizontal or vertical view
rougeronj
parents:
diff changeset
   187
            _this.container.removeChild(child);
b4bd49f01837 add annotsRoll class and create it in main. Adapt main and pianoroll to allow horizontal or vertical view
rougeronj
parents:
diff changeset
   188
        });
b4bd49f01837 add annotsRoll class and create it in main. Adapt main and pianoroll to allow horizontal or vertical view
rougeronj
parents:
diff changeset
   189
    };
b4bd49f01837 add annotsRoll class and create it in main. Adapt main and pianoroll to allow horizontal or vertical view
rougeronj
parents:
diff changeset
   190
98
72d767c5142d refactor and make work annotsroll
ymh <ymh.work@gmail.com>
parents: 97
diff changeset
   191
    this.init = function() {
72d767c5142d refactor and make work annotsroll
ymh <ymh.work@gmail.com>
parents: 97
diff changeset
   192
72d767c5142d refactor and make work annotsroll
ymh <ymh.work@gmail.com>
parents: 97
diff changeset
   193
        ws.message(function(data) {
72d767c5142d refactor and make work annotsroll
ymh <ymh.work@gmail.com>
parents: 97
diff changeset
   194
            _this.addAnnots(data);
72d767c5142d refactor and make work annotsroll
ymh <ymh.work@gmail.com>
parents: 97
diff changeset
   195
        });
72d767c5142d refactor and make work annotsroll
ymh <ymh.work@gmail.com>
parents: 97
diff changeset
   196
72d767c5142d refactor and make work annotsroll
ymh <ymh.work@gmail.com>
parents: 97
diff changeset
   197
    };
72d767c5142d refactor and make work annotsroll
ymh <ymh.work@gmail.com>
parents: 97
diff changeset
   198
72d767c5142d refactor and make work annotsroll
ymh <ymh.work@gmail.com>
parents: 97
diff changeset
   199
    this.start = function() {
72d767c5142d refactor and make work annotsroll
ymh <ymh.work@gmail.com>
parents: 97
diff changeset
   200
        if(!started) {
72d767c5142d refactor and make work annotsroll
ymh <ymh.work@gmail.com>
parents: 97
diff changeset
   201
            this.startTs = Date.now();
72d767c5142d refactor and make work annotsroll
ymh <ymh.work@gmail.com>
parents: 97
diff changeset
   202
            started = true;
72d767c5142d refactor and make work annotsroll
ymh <ymh.work@gmail.com>
parents: 97
diff changeset
   203
        }
72d767c5142d refactor and make work annotsroll
ymh <ymh.work@gmail.com>
parents: 97
diff changeset
   204
        this.cleanInterval = setInterval(function () { _this.removePassedObjets(); }, 1000 * this.height / this.pixelsPerSecond );
72d767c5142d refactor and make work annotsroll
ymh <ymh.work@gmail.com>
parents: 97
diff changeset
   205
        if(!externalRefresh) {
72d767c5142d refactor and make work annotsroll
ymh <ymh.work@gmail.com>
parents: 97
diff changeset
   206
            this.refreshInterval = setInterval(function() {_this.move();}, 1000/this.framerate);
72d767c5142d refactor and make work annotsroll
ymh <ymh.work@gmail.com>
parents: 97
diff changeset
   207
        }
72d767c5142d refactor and make work annotsroll
ymh <ymh.work@gmail.com>
parents: 97
diff changeset
   208
    };
72d767c5142d refactor and make work annotsroll
ymh <ymh.work@gmail.com>
parents: 97
diff changeset
   209
72d767c5142d refactor and make work annotsroll
ymh <ymh.work@gmail.com>
parents: 97
diff changeset
   210
    this.stop = function() {
72d767c5142d refactor and make work annotsroll
ymh <ymh.work@gmail.com>
parents: 97
diff changeset
   211
        clearInterval(this.cleanInterval);
72d767c5142d refactor and make work annotsroll
ymh <ymh.work@gmail.com>
parents: 97
diff changeset
   212
        if(!externalRefresh) {
72d767c5142d refactor and make work annotsroll
ymh <ymh.work@gmail.com>
parents: 97
diff changeset
   213
            clearInterval(this.refreshInterval);
72d767c5142d refactor and make work annotsroll
ymh <ymh.work@gmail.com>
parents: 97
diff changeset
   214
        }
72d767c5142d refactor and make work annotsroll
ymh <ymh.work@gmail.com>
parents: 97
diff changeset
   215
    };
89
b4bd49f01837 add annotsRoll class and create it in main. Adapt main and pianoroll to allow horizontal or vertical view
rougeronj
parents:
diff changeset
   216
b4bd49f01837 add annotsRoll class and create it in main. Adapt main and pianoroll to allow horizontal or vertical view
rougeronj
parents:
diff changeset
   217
}
b4bd49f01837 add annotsRoll class and create it in main. Adapt main and pianoroll to allow horizontal or vertical view
rougeronj
parents:
diff changeset
   218
98
72d767c5142d refactor and make work annotsroll
ymh <ymh.work@gmail.com>
parents: 97
diff changeset
   219
module.exports = {
72d767c5142d refactor and make work annotsroll
ymh <ymh.work@gmail.com>
parents: 97
diff changeset
   220
    AnnotsRoll: AnnotsRoll,
72d767c5142d refactor and make work annotsroll
ymh <ymh.work@gmail.com>
parents: 97
diff changeset
   221
};