client/annotviz/app/js/annotsroll.js
author ymh <ymh.work@gmail.com>
Thu, 22 Jan 2015 08:07:09 +0100
changeset 109 8546e2181a73
parent 106 9b20ddf1fc70
child 112 3e075a48e19e
permissions -rw-r--r--
correct color codes sent by client
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
var DEFAULT_ANNOT_COLOR = '#bababa';
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
var defaultAnnotStyles = {
106
9b20ddf1fc70 Add WordWrap to annots text style to crates multilines if the text is to large
rougeronj
parents: 105
diff changeset
    16
    'label': { font: '16pt Arial Bold', fill: '#65A954', wordWrap: true},
9b20ddf1fc70 Add WordWrap to annots text style to crates multilines if the text is to large
rougeronj
parents: 105
diff changeset
    17
    'text' : { font: '12pt Arial Regular', fill: '#444444', wordWrap: true},
105
25ac8802c189 Improve interface + Add horizontal pianoroll to annotsvizview
rougeronj
parents: 103
diff changeset
    18
    'user' : { font: '14pt Arial regular', fill: '#666666' },
98
72d767c5142d refactor and make work annotsroll
ymh <ymh.work@gmail.com>
parents: 97
diff changeset
    19
};
72d767c5142d refactor and make work annotsroll
ymh <ymh.work@gmail.com>
parents: 97
diff changeset
    20
72d767c5142d refactor and make work annotsroll
ymh <ymh.work@gmail.com>
parents: 97
diff changeset
    21
var defaultOptions = {
72d767c5142d refactor and make work annotsroll
ymh <ymh.work@gmail.com>
parents: 97
diff changeset
    22
    externalRefresh: false,
72d767c5142d refactor and make work annotsroll
ymh <ymh.work@gmail.com>
parents: 97
diff changeset
    23
    defaultColor: DEFAULT_ANNOT_COLOR,
72d767c5142d refactor and make work annotsroll
ymh <ymh.work@gmail.com>
parents: 97
diff changeset
    24
    annotStyles: defaultAnnotStyles
72d767c5142d refactor and make work annotsroll
ymh <ymh.work@gmail.com>
parents: 97
diff changeset
    25
};
72d767c5142d refactor and make work annotsroll
ymh <ymh.work@gmail.com>
parents: 97
diff changeset
    26
72d767c5142d refactor and make work annotsroll
ymh <ymh.work@gmail.com>
parents: 97
diff changeset
    27
function AnnotsRoll(options) {
72d767c5142d refactor and make work annotsroll
ymh <ymh.work@gmail.com>
parents: 97
diff changeset
    28
72d767c5142d refactor and make work annotsroll
ymh <ymh.work@gmail.com>
parents: 97
diff changeset
    29
//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
    30
    var _this = this;
98
72d767c5142d refactor and make work annotsroll
ymh <ymh.work@gmail.com>
parents: 97
diff changeset
    31
    var opts = _(options).defaults(defaultOptions).value();
72d767c5142d refactor and make work annotsroll
ymh <ymh.work@gmail.com>
parents: 97
diff changeset
    32
72d767c5142d refactor and make work annotsroll
ymh <ymh.work@gmail.com>
parents: 97
diff changeset
    33
89
b4bd49f01837 add annotsRoll class and create it in main. Adapt main and pianoroll to allow horizontal or vertical view
rougeronj
parents:
diff changeset
    34
    this.container = new PIXI.DisplayObjectContainer();
98
72d767c5142d refactor and make work annotsroll
ymh <ymh.work@gmail.com>
parents: 97
diff changeset
    35
    this.container.x = opts.xInit;
72d767c5142d refactor and make work annotsroll
ymh <ymh.work@gmail.com>
parents: 97
diff changeset
    36
    this.container.y = opts.yInit;
72d767c5142d refactor and make work annotsroll
ymh <ymh.work@gmail.com>
parents: 97
diff changeset
    37
    this.container.width = opts.width;
72d767c5142d refactor and make work annotsroll
ymh <ymh.work@gmail.com>
parents: 97
diff changeset
    38
72d767c5142d refactor and make work annotsroll
ymh <ymh.work@gmail.com>
parents: 97
diff changeset
    39
    this.height = opts.height;
72d767c5142d refactor and make work annotsroll
ymh <ymh.work@gmail.com>
parents: 97
diff changeset
    40
    this.width = opts.width;
72d767c5142d refactor and make work annotsroll
ymh <ymh.work@gmail.com>
parents: 97
diff changeset
    41
    this.widthRoll = opts.widthRoll;
72d767c5142d refactor and make work annotsroll
ymh <ymh.work@gmail.com>
parents: 97
diff changeset
    42
    this.pixelsPerSecond = opts.pixelsPerSecond;
72d767c5142d refactor and make work annotsroll
ymh <ymh.work@gmail.com>
parents: 97
diff changeset
    43
    this.annotColors = opts.annotColors;
72d767c5142d refactor and make work annotsroll
ymh <ymh.work@gmail.com>
parents: 97
diff changeset
    44
    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
    45
98
72d767c5142d refactor and make work annotsroll
ymh <ymh.work@gmail.com>
parents: 97
diff changeset
    46
    var yInit = opts.yInit;
72d767c5142d refactor and make work annotsroll
ymh <ymh.work@gmail.com>
parents: 97
diff changeset
    47
    var annotStyles = _(opts.annotStyles).defaults(defaultAnnotStyles).value();
106
9b20ddf1fc70 Add WordWrap to annots text style to crates multilines if the text is to large
rougeronj
parents: 105
diff changeset
    48
    for(var style in annotStyles) {
9b20ddf1fc70 Add WordWrap to annots text style to crates multilines if the text is to large
rougeronj
parents: 105
diff changeset
    49
    	if (annotStyles[style].wordWrap === true){
109
8546e2181a73 correct color codes sent by client
ymh <ymh.work@gmail.com>
parents: 106
diff changeset
    50
    		annotStyles[style].wordWrapWidth = this.widthRoll;
106
9b20ddf1fc70 Add WordWrap to annots text style to crates multilines if the text is to large
rougeronj
parents: 105
diff changeset
    51
    	}
9b20ddf1fc70 Add WordWrap to annots text style to crates multilines if the text is to large
rougeronj
parents: 105
diff changeset
    52
    }
98
72d767c5142d refactor and make work annotsroll
ymh <ymh.work@gmail.com>
parents: 97
diff changeset
    53
    var started = false;
72d767c5142d refactor and make work annotsroll
ymh <ymh.work@gmail.com>
parents: 97
diff changeset
    54
    var ws = opts.ws;
72d767c5142d refactor and make work annotsroll
ymh <ymh.work@gmail.com>
parents: 97
diff changeset
    55
    var externalRefresh = opts.externalRefresh;
100
0d7dac03c1a0 Merge with 72d767c5142df7fc6387215096321295fbaaa73d
rougeronj
parents: 99 98
diff changeset
    56
    var stageView = opts.stageView;
109
8546e2181a73 correct color codes sent by client
ymh <ymh.work@gmail.com>
parents: 106
diff changeset
    57
100
0d7dac03c1a0 Merge with 72d767c5142df7fc6387215096321295fbaaa73d
rougeronj
parents: 99 98
diff changeset
    58
    stageView.registerComponent(this);
98
72d767c5142d refactor and make work annotsroll
ymh <ymh.work@gmail.com>
parents: 97
diff changeset
    59
72d767c5142d refactor and make work annotsroll
ymh <ymh.work@gmail.com>
parents: 97
diff changeset
    60
    var isHidden = function(child) {
72d767c5142d refactor and make work annotsroll
ymh <ymh.work@gmail.com>
parents: 97
diff changeset
    61
        // 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
    62
        var globalPos = child.toGlobal(new PIXI.Point(0,0));
72d767c5142d refactor and make work annotsroll
ymh <ymh.work@gmail.com>
parents: 97
diff changeset
    63
        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
    64
    };
72d767c5142d refactor and make work annotsroll
ymh <ymh.work@gmail.com>
parents: 97
diff changeset
    65
72d767c5142d refactor and make work annotsroll
ymh <ymh.work@gmail.com>
parents: 97
diff changeset
    66
    this.addAnnots = function(data) {
72d767c5142d refactor and make work annotsroll
ymh <ymh.work@gmail.com>
parents: 97
diff changeset
    67
72d767c5142d refactor and make work annotsroll
ymh <ymh.work@gmail.com>
parents: 97
diff changeset
    68
        //var title = data.content.category.label;
72d767c5142d refactor and make work annotsroll
ymh <ymh.work@gmail.com>
parents: 97
diff changeset
    69
        //var user = data.content.user;
72d767c5142d refactor and make work annotsroll
ymh <ymh.work@gmail.com>
parents: 97
diff changeset
    70
        //Test cat and color
72d767c5142d refactor and make work annotsroll
ymh <ymh.work@gmail.com>
parents: 97
diff changeset
    71
        //var colorAnnot = 0x65A954;
72d767c5142d refactor and make work annotsroll
ymh <ymh.work@gmail.com>
parents: 97
diff changeset
    72
        var category = data.content.category.label,
72d767c5142d refactor and make work annotsroll
ymh <ymh.work@gmail.com>
parents: 97
diff changeset
    73
            text     = data.content.text,
72d767c5142d refactor and make work annotsroll
ymh <ymh.work@gmail.com>
parents: 97
diff changeset
    74
            user     = data.content.user,
72d767c5142d refactor and make work annotsroll
ymh <ymh.work@gmail.com>
parents: 97
diff changeset
    75
            ts       = Date.parse(data.ts),
109
8546e2181a73 correct color codes sent by client
ymh <ymh.work@gmail.com>
parents: 106
diff changeset
    76
            color    = data.content.color || this.getColor(ts, data.content.category.code);
98
72d767c5142d refactor and make work annotsroll
ymh <ymh.work@gmail.com>
parents: 97
diff changeset
    77
72d767c5142d refactor and make work annotsroll
ymh <ymh.work@gmail.com>
parents: 97
diff changeset
    78
        this.addAnnot(category, text, user, color, ts);
72d767c5142d refactor and make work annotsroll
ymh <ymh.work@gmail.com>
parents: 97
diff changeset
    79
    };
89
b4bd49f01837 add annotsRoll class and create it in main. Adapt main and pianoroll to allow horizontal or vertical view
rougeronj
parents:
diff changeset
    80
98
72d767c5142d refactor and make work annotsroll
ymh <ymh.work@gmail.com>
parents: 97
diff changeset
    81
    this.getColor = function(ts, code) {
72d767c5142d refactor and make work annotsroll
ymh <ymh.work@gmail.com>
parents: 97
diff changeset
    82
        var colorsDef;
72d767c5142d refactor and make work annotsroll
ymh <ymh.work@gmail.com>
parents: 97
diff changeset
    83
        _(this.annotColors).eachRight(function(cdef) {
72d767c5142d refactor and make work annotsroll
ymh <ymh.work@gmail.com>
parents: 97
diff changeset
    84
            console.log("cDef", cdef);
72d767c5142d refactor and make work annotsroll
ymh <ymh.work@gmail.com>
parents: 97
diff changeset
    85
            console.log("cDef ts", cdef.ts, ts);
72d767c5142d refactor and make work annotsroll
ymh <ymh.work@gmail.com>
parents: 97
diff changeset
    86
            if(cdef.ts < ts) {
72d767c5142d refactor and make work annotsroll
ymh <ymh.work@gmail.com>
parents: 97
diff changeset
    87
                colorsDef = cdef.colors;
72d767c5142d refactor and make work annotsroll
ymh <ymh.work@gmail.com>
parents: 97
diff changeset
    88
                return false;
72d767c5142d refactor and make work annotsroll
ymh <ymh.work@gmail.com>
parents: 97
diff changeset
    89
            }
72d767c5142d refactor and make work annotsroll
ymh <ymh.work@gmail.com>
parents: 97
diff changeset
    90
        });
72d767c5142d refactor and make work annotsroll
ymh <ymh.work@gmail.com>
parents: 97
diff changeset
    91
        var resColor;
72d767c5142d refactor and make work annotsroll
ymh <ymh.work@gmail.com>
parents: 97
diff changeset
    92
        console.log("colorsDef", colorsDef);
72d767c5142d refactor and make work annotsroll
ymh <ymh.work@gmail.com>
parents: 97
diff changeset
    93
        if(colorsDef) {
72d767c5142d refactor and make work annotsroll
ymh <ymh.work@gmail.com>
parents: 97
diff changeset
    94
            resColor = colorsDef[code];
72d767c5142d refactor and make work annotsroll
ymh <ymh.work@gmail.com>
parents: 97
diff changeset
    95
        }
72d767c5142d refactor and make work annotsroll
ymh <ymh.work@gmail.com>
parents: 97
diff changeset
    96
        if(!resColor) {
72d767c5142d refactor and make work annotsroll
ymh <ymh.work@gmail.com>
parents: 97
diff changeset
    97
            resColor = DEFAULT_ANNOT_COLOR;
72d767c5142d refactor and make work annotsroll
ymh <ymh.work@gmail.com>
parents: 97
diff changeset
    98
        }
72d767c5142d refactor and make work annotsroll
ymh <ymh.work@gmail.com>
parents: 97
diff changeset
    99
        return resColor;
72d767c5142d refactor and make work annotsroll
ymh <ymh.work@gmail.com>
parents: 97
diff changeset
   100
    }
72d767c5142d refactor and make work annotsroll
ymh <ymh.work@gmail.com>
parents: 97
diff changeset
   101
72d767c5142d refactor and make work annotsroll
ymh <ymh.work@gmail.com>
parents: 97
diff changeset
   102
    this.addAnnot = function(category, text, user, catColor, ts){
72d767c5142d refactor and make work annotsroll
ymh <ymh.work@gmail.com>
parents: 97
diff changeset
   103
72d767c5142d refactor and make work annotsroll
ymh <ymh.work@gmail.com>
parents: 97
diff changeset
   104
        var color = catColor ? catColor : DEFAULT_ANNOT_COLOR;
72d767c5142d refactor and make work annotsroll
ymh <ymh.work@gmail.com>
parents: 97
diff changeset
   105
        var x = 0;
72d767c5142d refactor and make work annotsroll
ymh <ymh.work@gmail.com>
parents: 97
diff changeset
   106
        var y = (ts-this.startTs) * this.pixelsPerSecond / 1000 + yInit;
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 colorHex = parseInt(color.replace(/^#/, ''), 16);
72d767c5142d refactor and make work annotsroll
ymh <ymh.work@gmail.com>
parents: 97
diff changeset
   109
72d767c5142d refactor and make work annotsroll
ymh <ymh.work@gmail.com>
parents: 97
diff changeset
   110
        var graphics = new PIXI.Graphics()
72d767c5142d refactor and make work annotsroll
ymh <ymh.work@gmail.com>
parents: 97
diff changeset
   111
            .beginFill(colorHex)
72d767c5142d refactor and make work annotsroll
ymh <ymh.work@gmail.com>
parents: 97
diff changeset
   112
            .drawRect(x, y, 10, 3)
72d767c5142d refactor and make work annotsroll
ymh <ymh.work@gmail.com>
parents: 97
diff changeset
   113
            .endFill();
72d767c5142d refactor and make work annotsroll
ymh <ymh.work@gmail.com>
parents: 97
diff changeset
   114
89
b4bd49f01837 add annotsRoll class and create it in main. Adapt main and pianoroll to allow horizontal or vertical view
rougeronj
parents:
diff changeset
   115
        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
   116
106
9b20ddf1fc70 Add WordWrap to annots text style to crates multilines if the text is to large
rougeronj
parents: 105
diff changeset
   117
        var textHeight = 0;
98
72d767c5142d refactor and make work annotsroll
ymh <ymh.work@gmail.com>
parents: 97
diff changeset
   118
        var catLabel = new PIXI.Text(
72d767c5142d refactor and make work annotsroll
ymh <ymh.work@gmail.com>
parents: 97
diff changeset
   119
            category,
72d767c5142d refactor and make work annotsroll
ymh <ymh.work@gmail.com>
parents: 97
diff changeset
   120
            _(annotStyles.label).extend({fill: color}).value()
72d767c5142d refactor and make work annotsroll
ymh <ymh.work@gmail.com>
parents: 97
diff changeset
   121
        );
72d767c5142d refactor and make work annotsroll
ymh <ymh.work@gmail.com>
parents: 97
diff changeset
   122
        catLabel.x = x + 20;
72d767c5142d refactor and make work annotsroll
ymh <ymh.work@gmail.com>
parents: 97
diff changeset
   123
        catLabel.y = y - 23;
72d767c5142d refactor and make work annotsroll
ymh <ymh.work@gmail.com>
parents: 97
diff changeset
   124
        this.container.addChild(catLabel);
106
9b20ddf1fc70 Add WordWrap to annots text style to crates multilines if the text is to large
rougeronj
parents: 105
diff changeset
   125
        textHeight += (catLabel.height - 23 + 2);
98
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
        if(text) {
72d767c5142d refactor and make work annotsroll
ymh <ymh.work@gmail.com>
parents: 97
diff changeset
   128
            var catText = new PIXI.Text(text, annotStyles.text);
72d767c5142d refactor and make work annotsroll
ymh <ymh.work@gmail.com>
parents: 97
diff changeset
   129
            catText.x = x + 20;
72d767c5142d refactor and make work annotsroll
ymh <ymh.work@gmail.com>
parents: 97
diff changeset
   130
            catText.y = y + 2;
72d767c5142d refactor and make work annotsroll
ymh <ymh.work@gmail.com>
parents: 97
diff changeset
   131
            this.container.addChild(catText);
72d767c5142d refactor and make work annotsroll
ymh <ymh.work@gmail.com>
parents: 97
diff changeset
   132
            textHeight += (catText.height + 2);
72d767c5142d refactor and make work annotsroll
ymh <ymh.work@gmail.com>
parents: 97
diff changeset
   133
        }
72d767c5142d refactor and make work annotsroll
ymh <ymh.work@gmail.com>
parents: 97
diff changeset
   134
72d767c5142d refactor and make work annotsroll
ymh <ymh.work@gmail.com>
parents: 97
diff changeset
   135
        var catUser = new PIXI.Text(user, annotStyles.user);
72d767c5142d refactor and make work annotsroll
ymh <ymh.work@gmail.com>
parents: 97
diff changeset
   136
        catUser.x = x + 20;
72d767c5142d refactor and make work annotsroll
ymh <ymh.work@gmail.com>
parents: 97
diff changeset
   137
        catUser.y = y + 2 + textHeight;
72d767c5142d refactor and make work annotsroll
ymh <ymh.work@gmail.com>
parents: 97
diff changeset
   138
        this.container.addChild(catUser);
72d767c5142d refactor and make work annotsroll
ymh <ymh.work@gmail.com>
parents: 97
diff changeset
   139
72d767c5142d refactor and make work annotsroll
ymh <ymh.work@gmail.com>
parents: 97
diff changeset
   140
        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
   141
    };
b4bd49f01837 add annotsRoll class and create it in main. Adapt main and pianoroll to allow horizontal or vertical view
rougeronj
parents:
diff changeset
   142
98
72d767c5142d refactor and make work annotsroll
ymh <ymh.work@gmail.com>
parents: 97
diff changeset
   143
    this.addAnnotLine = function(color, y) {
72d767c5142d refactor and make work annotsroll
ymh <ymh.work@gmail.com>
parents: 97
diff changeset
   144
        var x = this.widthRoll;
72d767c5142d refactor and make work annotsroll
ymh <ymh.work@gmail.com>
parents: 97
diff changeset
   145
72d767c5142d refactor and make work annotsroll
ymh <ymh.work@gmail.com>
parents: 97
diff changeset
   146
72d767c5142d refactor and make work annotsroll
ymh <ymh.work@gmail.com>
parents: 97
diff changeset
   147
        var graphics = new PIXI.Graphics()
72d767c5142d refactor and make work annotsroll
ymh <ymh.work@gmail.com>
parents: 97
diff changeset
   148
            .beginFill(color)
72d767c5142d refactor and make work annotsroll
ymh <ymh.work@gmail.com>
parents: 97
diff changeset
   149
            .drawRect(x, y, this.width - x, 3)
72d767c5142d refactor and make work annotsroll
ymh <ymh.work@gmail.com>
parents: 97
diff changeset
   150
            .endFill();
72d767c5142d refactor and make work annotsroll
ymh <ymh.work@gmail.com>
parents: 97
diff changeset
   151
89
b4bd49f01837 add annotsRoll class and create it in main. Adapt main and pianoroll to allow horizontal or vertical view
rougeronj
parents:
diff changeset
   152
        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
   153
    };
b4bd49f01837 add annotsRoll class and create it in main. Adapt main and pianoroll to allow horizontal or vertical view
rougeronj
parents:
diff changeset
   154
b4bd49f01837 add annotsRoll class and create it in main. Adapt main and pianoroll to allow horizontal or vertical view
rougeronj
parents:
diff changeset
   155
    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
   156
    	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
   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.move = this.refresh = function() {
72d767c5142d refactor and make work annotsroll
ymh <ymh.work@gmail.com>
parents: 97
diff changeset
   160
        var diff = (this.startTs - Date.now())/1000;
72d767c5142d refactor and make work annotsroll
ymh <ymh.work@gmail.com>
parents: 97
diff changeset
   161
        this.moveTo(diff);
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
89
b4bd49f01837 add annotsRoll class and create it in main. Adapt main and pianoroll to allow horizontal or vertical view
rougeronj
parents:
diff changeset
   164
    this.removePassedObjets = function(){
98
72d767c5142d refactor and make work annotsroll
ymh <ymh.work@gmail.com>
parents: 97
diff changeset
   165
        var childrenToRemove = [];
72d767c5142d refactor and make work annotsroll
ymh <ymh.work@gmail.com>
parents: 97
diff changeset
   166
        _(_this.container.children).forEach(function(child) {
72d767c5142d refactor and make work annotsroll
ymh <ymh.work@gmail.com>
parents: 97
diff changeset
   167
            return typeof(child) === 'undefined' ||
72d767c5142d refactor and make work annotsroll
ymh <ymh.work@gmail.com>
parents: 97
diff changeset
   168
                (isHidden(child) && childrenToRemove.push(child));
72d767c5142d refactor and make work annotsroll
ymh <ymh.work@gmail.com>
parents: 97
diff changeset
   169
        });
89
b4bd49f01837 add annotsRoll class and create it in main. Adapt main and pianoroll to allow horizontal or vertical view
rougeronj
parents:
diff changeset
   170
        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
   171
            _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
   172
        });
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.init = function() {
72d767c5142d refactor and make work annotsroll
ymh <ymh.work@gmail.com>
parents: 97
diff changeset
   176
72d767c5142d refactor and make work annotsroll
ymh <ymh.work@gmail.com>
parents: 97
diff changeset
   177
        ws.message(function(data) {
72d767c5142d refactor and make work annotsroll
ymh <ymh.work@gmail.com>
parents: 97
diff changeset
   178
            _this.addAnnots(data);
72d767c5142d refactor and make work annotsroll
ymh <ymh.work@gmail.com>
parents: 97
diff changeset
   179
        });
72d767c5142d refactor and make work annotsroll
ymh <ymh.work@gmail.com>
parents: 97
diff changeset
   180
72d767c5142d refactor and make work annotsroll
ymh <ymh.work@gmail.com>
parents: 97
diff changeset
   181
    };
72d767c5142d refactor and make work annotsroll
ymh <ymh.work@gmail.com>
parents: 97
diff changeset
   182
72d767c5142d refactor and make work annotsroll
ymh <ymh.work@gmail.com>
parents: 97
diff changeset
   183
    this.start = function() {
72d767c5142d refactor and make work annotsroll
ymh <ymh.work@gmail.com>
parents: 97
diff changeset
   184
        if(!started) {
72d767c5142d refactor and make work annotsroll
ymh <ymh.work@gmail.com>
parents: 97
diff changeset
   185
            this.startTs = Date.now();
72d767c5142d refactor and make work annotsroll
ymh <ymh.work@gmail.com>
parents: 97
diff changeset
   186
            started = true;
72d767c5142d refactor and make work annotsroll
ymh <ymh.work@gmail.com>
parents: 97
diff changeset
   187
        }
72d767c5142d refactor and make work annotsroll
ymh <ymh.work@gmail.com>
parents: 97
diff changeset
   188
        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
   189
        if(!externalRefresh) {
72d767c5142d refactor and make work annotsroll
ymh <ymh.work@gmail.com>
parents: 97
diff changeset
   190
            this.refreshInterval = setInterval(function() {_this.move();}, 1000/this.framerate);
72d767c5142d refactor and make work annotsroll
ymh <ymh.work@gmail.com>
parents: 97
diff changeset
   191
        }
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
72d767c5142d refactor and make work annotsroll
ymh <ymh.work@gmail.com>
parents: 97
diff changeset
   194
    this.stop = function() {
72d767c5142d refactor and make work annotsroll
ymh <ymh.work@gmail.com>
parents: 97
diff changeset
   195
        clearInterval(this.cleanInterval);
72d767c5142d refactor and make work annotsroll
ymh <ymh.work@gmail.com>
parents: 97
diff changeset
   196
        if(!externalRefresh) {
72d767c5142d refactor and make work annotsroll
ymh <ymh.work@gmail.com>
parents: 97
diff changeset
   197
            clearInterval(this.refreshInterval);
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
    };
89
b4bd49f01837 add annotsRoll class and create it in main. Adapt main and pianoroll to allow horizontal or vertical view
rougeronj
parents:
diff changeset
   200
b4bd49f01837 add annotsRoll class and create it in main. Adapt main and pianoroll to allow horizontal or vertical view
rougeronj
parents:
diff changeset
   201
}
b4bd49f01837 add annotsRoll class and create it in main. Adapt main and pianoroll to allow horizontal or vertical view
rougeronj
parents:
diff changeset
   202
98
72d767c5142d refactor and make work annotsroll
ymh <ymh.work@gmail.com>
parents: 97
diff changeset
   203
module.exports = {
72d767c5142d refactor and make work annotsroll
ymh <ymh.work@gmail.com>
parents: 97
diff changeset
   204
    AnnotsRoll: AnnotsRoll,
72d767c5142d refactor and make work annotsroll
ymh <ymh.work@gmail.com>
parents: 97
diff changeset
   205
};