client/annotviz/app/js/annotstimeline.js
author ymh <ymh.work@gmail.com>
Fri, 23 Jan 2015 00:02:20 +0100
changeset 124 b5697bcdbaff
parent 123 d8ef840eaf68
child 125 f9dd7bfed997
child 127 0386fb9efe27
permissions -rw-r--r--
add history load for time lines
Ignore whitespace changes - Everywhere: Within whitespace: At end of lines:
91
09a9074ea7b0 Add general View fonction for main representation
rougeronj
parents:
diff changeset
     1
/**
100
0d7dac03c1a0 Merge with 72d767c5142df7fc6387215096321295fbaaa73d
rougeronj
parents: 99 98
diff changeset
     2
* js/annotstimeline
91
09a9074ea7b0 Add general View fonction for main representation
rougeronj
parents:
diff changeset
     3
*
100
0d7dac03c1a0 Merge with 72d767c5142df7fc6387215096321295fbaaa73d
rougeronj
parents: 99 98
diff changeset
     4
* annotstimeline basic component
91
09a9074ea7b0 Add general View fonction for main representation
rougeronj
parents:
diff changeset
     5
*
09a9074ea7b0 Add general View fonction for main representation
rougeronj
parents:
diff changeset
     6
*/
09a9074ea7b0 Add general View fonction for main representation
rougeronj
parents:
diff changeset
     7
09a9074ea7b0 Add general View fonction for main representation
rougeronj
parents:
diff changeset
     8
'use strict';
09a9074ea7b0 Add general View fonction for main representation
rougeronj
parents:
diff changeset
     9
09a9074ea7b0 Add general View fonction for main representation
rougeronj
parents:
diff changeset
    10
var PIXI = require('pixi');
105
25ac8802c189 Improve interface + Add horizontal pianoroll to annotsvizview
rougeronj
parents: 103
diff changeset
    11
var Utils = require('./utils.js');
100
0d7dac03c1a0 Merge with 72d767c5142df7fc6387215096321295fbaaa73d
rougeronj
parents: 99 98
diff changeset
    12
var _ = require('lodash');
97
545803e685e0 rename components
ymh <ymh.work@gmail.com>
parents: 92
diff changeset
    13
109
8546e2181a73 correct color codes sent by client
ymh <ymh.work@gmail.com>
parents: 105
diff changeset
    14
var defaultOptions = {
100
0d7dac03c1a0 Merge with 72d767c5142df7fc6387215096321295fbaaa73d
rougeronj
parents: 99 98
diff changeset
    15
    logger: undefined,
0d7dac03c1a0 Merge with 72d767c5142df7fc6387215096321295fbaaa73d
rougeronj
parents: 99 98
diff changeset
    16
    intervalWidth: 10,
0d7dac03c1a0 Merge with 72d767c5142df7fc6387215096321295fbaaa73d
rougeronj
parents: 99 98
diff changeset
    17
    intervalHeight: 5,
102
cc7b06bfd574 update to circle representation
rougeronj
parents: 100
diff changeset
    18
    maxCellHeight: 200,
124
b5697bcdbaff add history load for time lines
ymh <ymh.work@gmail.com>
parents: 123
diff changeset
    19
    radius: 300,
b5697bcdbaff add history load for time lines
ymh <ymh.work@gmail.com>
parents: 123
diff changeset
    20
    serverUrl: 'http://127.0.0.1:8080',
b5697bcdbaff add history load for time lines
ymh <ymh.work@gmail.com>
parents: 123
diff changeset
    21
    channel: 'ANNOT',
b5697bcdbaff add history load for time lines
ymh <ymh.work@gmail.com>
parents: 123
diff changeset
    22
    maxPages: 1000,
b5697bcdbaff add history load for time lines
ymh <ymh.work@gmail.com>
parents: 123
diff changeset
    23
    //eventCode:
100
0d7dac03c1a0 Merge with 72d767c5142df7fc6387215096321295fbaaa73d
rougeronj
parents: 99 98
diff changeset
    24
};
97
545803e685e0 rename components
ymh <ymh.work@gmail.com>
parents: 92
diff changeset
    25
545803e685e0 rename components
ymh <ymh.work@gmail.com>
parents: 92
diff changeset
    26
100
0d7dac03c1a0 Merge with 72d767c5142df7fc6387215096321295fbaaa73d
rougeronj
parents: 99 98
diff changeset
    27
function AnnotsTimeLine(options){
91
09a9074ea7b0 Add general View fonction for main representation
rougeronj
parents:
diff changeset
    28
    var _this = this;
100
0d7dac03c1a0 Merge with 72d767c5142df7fc6387215096321295fbaaa73d
rougeronj
parents: 99 98
diff changeset
    29
    var opts = _(options).defaults(defaultOptions).value();
109
8546e2181a73 correct color codes sent by client
ymh <ymh.work@gmail.com>
parents: 105
diff changeset
    30
100
0d7dac03c1a0 Merge with 72d767c5142df7fc6387215096321295fbaaa73d
rougeronj
parents: 99 98
diff changeset
    31
    this.container = new PIXI.DisplayObjectContainer();
0d7dac03c1a0 Merge with 72d767c5142df7fc6387215096321295fbaaa73d
rougeronj
parents: 99 98
diff changeset
    32
    this.container.x = opts.xInit;
0d7dac03c1a0 Merge with 72d767c5142df7fc6387215096321295fbaaa73d
rougeronj
parents: 99 98
diff changeset
    33
    this.container.y = opts.yInit;
0d7dac03c1a0 Merge with 72d767c5142df7fc6387215096321295fbaaa73d
rougeronj
parents: 99 98
diff changeset
    34
    this.container.width = opts.width;
109
8546e2181a73 correct color codes sent by client
ymh <ymh.work@gmail.com>
parents: 105
diff changeset
    35
    this.container.height = opts.height;
8546e2181a73 correct color codes sent by client
ymh <ymh.work@gmail.com>
parents: 105
diff changeset
    36
100
0d7dac03c1a0 Merge with 72d767c5142df7fc6387215096321295fbaaa73d
rougeronj
parents: 99 98
diff changeset
    37
    this.timeBegin = opts.timeBegin;
0d7dac03c1a0 Merge with 72d767c5142df7fc6387215096321295fbaaa73d
rougeronj
parents: 99 98
diff changeset
    38
    this.timeEnd = opts.timeEnd;
0d7dac03c1a0 Merge with 72d767c5142df7fc6387215096321295fbaaa73d
rougeronj
parents: 99 98
diff changeset
    39
    this.duration = (this.timeEnd - this.timeBegin)/1000;
0d7dac03c1a0 Merge with 72d767c5142df7fc6387215096321295fbaaa73d
rougeronj
parents: 99 98
diff changeset
    40
    this.width = opts.width;
0d7dac03c1a0 Merge with 72d767c5142df7fc6387215096321295fbaaa73d
rougeronj
parents: 99 98
diff changeset
    41
    this.height = opts.height;
0d7dac03c1a0 Merge with 72d767c5142df7fc6387215096321295fbaaa73d
rougeronj
parents: 99 98
diff changeset
    42
    this.intervalHeight = opts.intervalHeight;
0d7dac03c1a0 Merge with 72d767c5142df7fc6387215096321295fbaaa73d
rougeronj
parents: 99 98
diff changeset
    43
    this.intervalWidth = opts.intervalWidth;
0d7dac03c1a0 Merge with 72d767c5142df7fc6387215096321295fbaaa73d
rougeronj
parents: 99 98
diff changeset
    44
    this.maxCellHeight = opts.maxCellHeight;
0d7dac03c1a0 Merge with 72d767c5142df7fc6387215096321295fbaaa73d
rougeronj
parents: 99 98
diff changeset
    45
    this.annotCategories = opts.annotCategories;
124
b5697bcdbaff add history load for time lines
ymh <ymh.work@gmail.com>
parents: 123
diff changeset
    46
b5697bcdbaff add history load for time lines
ymh <ymh.work@gmail.com>
parents: 123
diff changeset
    47
    this.startTs = options.startTs || Date.now();
b5697bcdbaff add history load for time lines
ymh <ymh.work@gmail.com>
parents: 123
diff changeset
    48
103
123a611c7903 minor update of options and add annotsvizview
rougeronj
parents: 102
diff changeset
    49
    this.circleX = opts.circleX || (this.width/2);
123a611c7903 minor update of options and add annotsvizview
rougeronj
parents: 102
diff changeset
    50
    this.circleY = opts.circleY || (this.height/2);
102
cc7b06bfd574 update to circle representation
rougeronj
parents: 100
diff changeset
    51
    this.radius = opts.radius;
cc7b06bfd574 update to circle representation
rougeronj
parents: 100
diff changeset
    52
    this.perimeter = 2*Math.PI* this.radius;
cc7b06bfd574 update to circle representation
rougeronj
parents: 100
diff changeset
    53
    this.intervalDuration = (this.intervalWidth * this.duration / this.perimeter);
109
8546e2181a73 correct color codes sent by client
ymh <ymh.work@gmail.com>
parents: 105
diff changeset
    54
124
b5697bcdbaff add history load for time lines
ymh <ymh.work@gmail.com>
parents: 123
diff changeset
    55
    var channel = opts.channel;
b5697bcdbaff add history load for time lines
ymh <ymh.work@gmail.com>
parents: 123
diff changeset
    56
    var eventCode = opts.eventCode;
b5697bcdbaff add history load for time lines
ymh <ymh.work@gmail.com>
parents: 123
diff changeset
    57
    var serverUrl = opts.serverUrl;
b5697bcdbaff add history load for time lines
ymh <ymh.work@gmail.com>
parents: 123
diff changeset
    58
    var maxPages = opts.maxPages;
b5697bcdbaff add history load for time lines
ymh <ymh.work@gmail.com>
parents: 123
diff changeset
    59
102
cc7b06bfd574 update to circle representation
rougeronj
parents: 100
diff changeset
    60
    var totalIndex = Math.floor(this.perimeter/this.intervalWidth);
109
8546e2181a73 correct color codes sent by client
ymh <ymh.work@gmail.com>
parents: 105
diff changeset
    61
124
b5697bcdbaff add history load for time lines
ymh <ymh.work@gmail.com>
parents: 123
diff changeset
    62
    this.cells = [];
102
cc7b06bfd574 update to circle representation
rougeronj
parents: 100
diff changeset
    63
    for (var i=0; i<(this.perimeter/this.intervalWidth) ; i++){
99
9d968fbcaa2a Add General Time Line + minor change in annotsRoll
rougeronj
parents: 92
diff changeset
    64
    	this.cells[i] = [];
103
123a611c7903 minor update of options and add annotsvizview
rougeronj
parents: 102
diff changeset
    65
    	this.cells[i].i = i;
99
9d968fbcaa2a Add General Time Line + minor change in annotsRoll
rougeronj
parents: 92
diff changeset
    66
    	this.cells[i].totalAnnots = 0;
9d968fbcaa2a Add General Time Line + minor change in annotsRoll
rougeronj
parents: 92
diff changeset
    67
    	this.cells[i].categories = {};
9d968fbcaa2a Add General Time Line + minor change in annotsRoll
rougeronj
parents: 92
diff changeset
    68
    }
109
8546e2181a73 correct color codes sent by client
ymh <ymh.work@gmail.com>
parents: 105
diff changeset
    69
100
0d7dac03c1a0 Merge with 72d767c5142df7fc6387215096321295fbaaa73d
rougeronj
parents: 99 98
diff changeset
    70
    var ws = opts.ws;
0d7dac03c1a0 Merge with 72d767c5142df7fc6387215096321295fbaaa73d
rougeronj
parents: 99 98
diff changeset
    71
    var stageView = opts.stageView;
102
cc7b06bfd574 update to circle representation
rougeronj
parents: 100
diff changeset
    72
103
123a611c7903 minor update of options and add annotsvizview
rougeronj
parents: 102
diff changeset
    73
    //draw the base - circle and line to locate the scene
91
09a9074ea7b0 Add general View fonction for main representation
rougeronj
parents:
diff changeset
    74
    var graphics = new PIXI.Graphics();
105
25ac8802c189 Improve interface + Add horizontal pianoroll to annotsvizview
rougeronj
parents: 103
diff changeset
    75
    graphics.lineStyle(2, 0x646464)
124
b5697bcdbaff add history load for time lines
ymh <ymh.work@gmail.com>
parents: 123
diff changeset
    76
        .drawCircle(this.circleX, this.circleY, this.radius - 3)
b5697bcdbaff add history load for time lines
ymh <ymh.work@gmail.com>
parents: 123
diff changeset
    77
        .lineStyle(1, 0xD7D7D7)
b5697bcdbaff add history load for time lines
ymh <ymh.work@gmail.com>
parents: 123
diff changeset
    78
        .drawCircle(this.circleX, this.circleY, this.radius*2/3)
b5697bcdbaff add history load for time lines
ymh <ymh.work@gmail.com>
parents: 123
diff changeset
    79
        .drawCircle(this.circleX, this.circleY, this.radius/3)
b5697bcdbaff add history load for time lines
ymh <ymh.work@gmail.com>
parents: 123
diff changeset
    80
        .lineStyle(1, 0x646464)
b5697bcdbaff add history load for time lines
ymh <ymh.work@gmail.com>
parents: 123
diff changeset
    81
        .moveTo(this.circleX, this.circleY - (this.radius/3)/2)
b5697bcdbaff add history load for time lines
ymh <ymh.work@gmail.com>
parents: 123
diff changeset
    82
        .lineTo(this.circleX, this.circleY - this.radius - this.maxCellHeight - 10)
b5697bcdbaff add history load for time lines
ymh <ymh.work@gmail.com>
parents: 123
diff changeset
    83
        .endFill();
91
09a9074ea7b0 Add general View fonction for main representation
rougeronj
parents:
diff changeset
    84
    this.container.addChild(graphics);
109
8546e2181a73 correct color codes sent by client
ymh <ymh.work@gmail.com>
parents: 105
diff changeset
    85
105
25ac8802c189 Improve interface + Add horizontal pianoroll to annotsvizview
rougeronj
parents: 103
diff changeset
    86
    //set time text
109
8546e2181a73 correct color codes sent by client
ymh <ymh.work@gmail.com>
parents: 105
diff changeset
    87
    //TODO : move this to annotsvizview
124
b5697bcdbaff add history load for time lines
ymh <ymh.work@gmail.com>
parents: 123
diff changeset
    88
    var currentTimeText = new PIXI.Text('-- : -- : --', { font: '18pt Gothic Standard', fill: '#646464' });
105
25ac8802c189 Improve interface + Add horizontal pianoroll to annotsvizview
rougeronj
parents: 103
diff changeset
    89
    currentTimeText.x = this.circleX - currentTimeText.width/2;
25ac8802c189 Improve interface + Add horizontal pianoroll to annotsvizview
rougeronj
parents: 103
diff changeset
    90
    currentTimeText.y = this.circleY - currentTimeText.height/2;
25ac8802c189 Improve interface + Add horizontal pianoroll to annotsvizview
rougeronj
parents: 103
diff changeset
    91
    this.container.addChild(currentTimeText);
109
8546e2181a73 correct color codes sent by client
ymh <ymh.work@gmail.com>
parents: 105
diff changeset
    92
100
0d7dac03c1a0 Merge with 72d767c5142df7fc6387215096321295fbaaa73d
rougeronj
parents: 99 98
diff changeset
    93
    stageView.registerComponent(this);
97
545803e685e0 rename components
ymh <ymh.work@gmail.com>
parents: 92
diff changeset
    94
124
b5697bcdbaff add history load for time lines
ymh <ymh.work@gmail.com>
parents: 123
diff changeset
    95
    var loadArchives = function() {
b5697bcdbaff add history load for time lines
ymh <ymh.work@gmail.com>
parents: 123
diff changeset
    96
        //start timeBegin end startTime
b5697bcdbaff add history load for time lines
ymh <ymh.work@gmail.com>
parents: 123
diff changeset
    97
        //query -> need channel + eventCode
b5697bcdbaff add history load for time lines
ymh <ymh.work@gmail.com>
parents: 123
diff changeset
    98
        //iterate over data fill cells
b5697bcdbaff add history load for time lines
ymh <ymh.work@gmail.com>
parents: 123
diff changeset
    99
        var startTs = _this.timeBegin;
b5697bcdbaff add history load for time lines
ymh <ymh.work@gmail.com>
parents: 123
diff changeset
   100
        var endTs = _this.startTs;
b5697bcdbaff add history load for time lines
ymh <ymh.work@gmail.com>
parents: 123
diff changeset
   101
b5697bcdbaff add history load for time lines
ymh <ymh.work@gmail.com>
parents: 123
diff changeset
   102
        var url = serverUrl + '/p/api/v1/annotation';
b5697bcdbaff add history load for time lines
ymh <ymh.work@gmail.com>
parents: 123
diff changeset
   103
        var filters = [
b5697bcdbaff add history load for time lines
ymh <ymh.work@gmail.com>
parents: 123
diff changeset
   104
            { name: 'ts', op: '>', val: new Date(startTs).toISOString()}, //start
b5697bcdbaff add history load for time lines
ymh <ymh.work@gmail.com>
parents: 123
diff changeset
   105
            { name: 'ts', op: '<=', val: new Date(endTs).toISOString()}, //end
b5697bcdbaff add history load for time lines
ymh <ymh.work@gmail.com>
parents: 123
diff changeset
   106
            { name: 'channel', op: '==', val: channel}, //channel
b5697bcdbaff add history load for time lines
ymh <ymh.work@gmail.com>
parents: 123
diff changeset
   107
            { name: 'event_code', op: '==', val: eventCode} //eventcode
b5697bcdbaff add history load for time lines
ymh <ymh.work@gmail.com>
parents: 123
diff changeset
   108
        ];
b5697bcdbaff add history load for time lines
ymh <ymh.work@gmail.com>
parents: 123
diff changeset
   109
b5697bcdbaff add history load for time lines
ymh <ymh.work@gmail.com>
parents: 123
diff changeset
   110
        console.log(JSON.stringify({filters:filters}));
b5697bcdbaff add history load for time lines
ymh <ymh.work@gmail.com>
parents: 123
diff changeset
   111
b5697bcdbaff add history load for time lines
ymh <ymh.work@gmail.com>
parents: 123
diff changeset
   112
        url = url + '?q=' + JSON.stringify({filters:filters});
b5697bcdbaff add history load for time lines
ymh <ymh.work@gmail.com>
parents: 123
diff changeset
   113
b5697bcdbaff add history load for time lines
ymh <ymh.work@gmail.com>
parents: 123
diff changeset
   114
        var totalPage = 1;
b5697bcdbaff add history load for time lines
ymh <ymh.work@gmail.com>
parents: 123
diff changeset
   115
        var currentPage = 1;
b5697bcdbaff add history load for time lines
ymh <ymh.work@gmail.com>
parents: 123
diff changeset
   116
b5697bcdbaff add history load for time lines
ymh <ymh.work@gmail.com>
parents: 123
diff changeset
   117
        var processResFunction = function(res) {
b5697bcdbaff add history load for time lines
ymh <ymh.work@gmail.com>
parents: 123
diff changeset
   118
b5697bcdbaff add history load for time lines
ymh <ymh.work@gmail.com>
parents: 123
diff changeset
   119
            if(res) {
b5697bcdbaff add history load for time lines
ymh <ymh.work@gmail.com>
parents: 123
diff changeset
   120
                var data = res.target.json;
b5697bcdbaff add history load for time lines
ymh <ymh.work@gmail.com>
parents: 123
diff changeset
   121
                /*jshint -W069 */
b5697bcdbaff add history load for time lines
ymh <ymh.work@gmail.com>
parents: 123
diff changeset
   122
                totalPage = Math.min(maxPages,parseInt(data['total_pages']));
b5697bcdbaff add history load for time lines
ymh <ymh.work@gmail.com>
parents: 123
diff changeset
   123
                console.log('DATA', data);
b5697bcdbaff add history load for time lines
ymh <ymh.work@gmail.com>
parents: 123
diff changeset
   124
                data.objects.forEach(function(annotation) {
b5697bcdbaff add history load for time lines
ymh <ymh.work@gmail.com>
parents: 123
diff changeset
   125
                    _this.addAnnot(annotation);
b5697bcdbaff add history load for time lines
ymh <ymh.work@gmail.com>
parents: 123
diff changeset
   126
                });
b5697bcdbaff add history load for time lines
ymh <ymh.work@gmail.com>
parents: 123
diff changeset
   127
            }
b5697bcdbaff add history load for time lines
ymh <ymh.work@gmail.com>
parents: 123
diff changeset
   128
            if(currentPage <= totalPage) {
b5697bcdbaff add history load for time lines
ymh <ymh.work@gmail.com>
parents: 123
diff changeset
   129
                var jsonLoader = new PIXI.JsonLoader(url+'&page='+currentPage, true);
b5697bcdbaff add history load for time lines
ymh <ymh.work@gmail.com>
parents: 123
diff changeset
   130
                jsonLoader.on('loaded', processResFunction);
b5697bcdbaff add history load for time lines
ymh <ymh.work@gmail.com>
parents: 123
diff changeset
   131
                jsonLoader.load();
b5697bcdbaff add history load for time lines
ymh <ymh.work@gmail.com>
parents: 123
diff changeset
   132
                currentPage++;
b5697bcdbaff add history load for time lines
ymh <ymh.work@gmail.com>
parents: 123
diff changeset
   133
            }
b5697bcdbaff add history load for time lines
ymh <ymh.work@gmail.com>
parents: 123
diff changeset
   134
        };
b5697bcdbaff add history load for time lines
ymh <ymh.work@gmail.com>
parents: 123
diff changeset
   135
        processResFunction();
b5697bcdbaff add history load for time lines
ymh <ymh.work@gmail.com>
parents: 123
diff changeset
   136
b5697bcdbaff add history load for time lines
ymh <ymh.work@gmail.com>
parents: 123
diff changeset
   137
    };
b5697bcdbaff add history load for time lines
ymh <ymh.work@gmail.com>
parents: 123
diff changeset
   138
99
9d968fbcaa2a Add General Time Line + minor change in annotsRoll
rougeronj
parents: 92
diff changeset
   139
    //Add Annotation to the TimeLine
100
0d7dac03c1a0 Merge with 72d767c5142df7fc6387215096321295fbaaa73d
rougeronj
parents: 99 98
diff changeset
   140
    this.addAnnot = function(data){
124
b5697bcdbaff add history load for time lines
ymh <ymh.work@gmail.com>
parents: 123
diff changeset
   141
123
d8ef840eaf68 get the correct json category depending on the timestamp
rougeronj
parents: 121
diff changeset
   142
    	var ts = Date.parse(data.ts);
d8ef840eaf68 get the correct json category depending on the timestamp
rougeronj
parents: 121
diff changeset
   143
    	var colorsDef;
d8ef840eaf68 get the correct json category depending on the timestamp
rougeronj
parents: 121
diff changeset
   144
    	_(this.annotCategories).eachRight(function(cdef) {
d8ef840eaf68 get the correct json category depending on the timestamp
rougeronj
parents: 121
diff changeset
   145
            if(cdef.ts < ts) {
d8ef840eaf68 get the correct json category depending on the timestamp
rougeronj
parents: 121
diff changeset
   146
                colorsDef = cdef;
d8ef840eaf68 get the correct json category depending on the timestamp
rougeronj
parents: 121
diff changeset
   147
                return false;
d8ef840eaf68 get the correct json category depending on the timestamp
rougeronj
parents: 121
diff changeset
   148
            }
d8ef840eaf68 get the correct json category depending on the timestamp
rougeronj
parents: 121
diff changeset
   149
        });
124
b5697bcdbaff add history load for time lines
ymh <ymh.work@gmail.com>
parents: 123
diff changeset
   150
b5697bcdbaff add history load for time lines
ymh <ymh.work@gmail.com>
parents: 123
diff changeset
   151
    	if (this.timeEnd > ts){
b5697bcdbaff add history load for time lines
ymh <ymh.work@gmail.com>
parents: 123
diff changeset
   152
	    	var i = Math.floor((ts - this.timeBegin)/(1000*this.intervalDuration));
109
8546e2181a73 correct color codes sent by client
ymh <ymh.work@gmail.com>
parents: 105
diff changeset
   153
121
df6b39f962bc Add getAnnotCategories to utils and propagate the modification to annotsvizview and annotstimeline
rougeronj
parents: 114
diff changeset
   154
	    	if (typeof(this.cells[i].graphics) === 'undefined'){
123
d8ef840eaf68 get the correct json category depending on the timestamp
rougeronj
parents: 121
diff changeset
   155
	    		this.initCell(this.cells[i], colorsDef);
121
df6b39f962bc Add getAnnotCategories to utils and propagate the modification to annotsvizview and annotstimeline
rougeronj
parents: 114
diff changeset
   156
	    	}
124
b5697bcdbaff add history load for time lines
ymh <ymh.work@gmail.com>
parents: 123
diff changeset
   157
123
d8ef840eaf68 get the correct json category depending on the timestamp
rougeronj
parents: 121
diff changeset
   158
	    	if (typeof(colorsDef.colors[data.content.category.code]) !== 'undefined'){
121
df6b39f962bc Add getAnnotCategories to utils and propagate the modification to annotsvizview and annotstimeline
rougeronj
parents: 114
diff changeset
   159
	    		var annotCode = data.content.category.code;
df6b39f962bc Add getAnnotCategories to utils and propagate the modification to annotsvizview and annotstimeline
rougeronj
parents: 114
diff changeset
   160
	    	} else {
df6b39f962bc Add getAnnotCategories to utils and propagate the modification to annotsvizview and annotstimeline
rougeronj
parents: 114
diff changeset
   161
	    		var annotCode = 'default';
df6b39f962bc Add getAnnotCategories to utils and propagate the modification to annotsvizview and annotstimeline
rougeronj
parents: 114
diff changeset
   162
	    	}
124
b5697bcdbaff add history load for time lines
ymh <ymh.work@gmail.com>
parents: 123
diff changeset
   163
100
0d7dac03c1a0 Merge with 72d767c5142df7fc6387215096321295fbaaa73d
rougeronj
parents: 99 98
diff changeset
   164
			this.cells[i].categories[annotCode].count += 1;
0d7dac03c1a0 Merge with 72d767c5142df7fc6387215096321295fbaaa73d
rougeronj
parents: 99 98
diff changeset
   165
			this.cells[i].totalAnnots +=1;
123
d8ef840eaf68 get the correct json category depending on the timestamp
rougeronj
parents: 121
diff changeset
   166
			this.redrawCell(this.cells[i], colorsDef);
100
0d7dac03c1a0 Merge with 72d767c5142df7fc6387215096321295fbaaa73d
rougeronj
parents: 99 98
diff changeset
   167
    	}
99
9d968fbcaa2a Add General Time Line + minor change in annotsRoll
rougeronj
parents: 92
diff changeset
   168
    };
109
8546e2181a73 correct color codes sent by client
ymh <ymh.work@gmail.com>
parents: 105
diff changeset
   169
105
25ac8802c189 Improve interface + Add horizontal pianoroll to annotsvizview
rougeronj
parents: 103
diff changeset
   170
    this.initTimeTexts = function() {
124
b5697bcdbaff add history load for time lines
ymh <ymh.work@gmail.com>
parents: 123
diff changeset
   171
        var tBeg = new PIXI.Text(Utils.formatTime(this.timeBegin), { font: '12pt Gothic Standard', fill: '#646464' });
b5697bcdbaff add history load for time lines
ymh <ymh.work@gmail.com>
parents: 123
diff changeset
   172
        tBeg.x = this.circleX + 15;
b5697bcdbaff add history load for time lines
ymh <ymh.work@gmail.com>
parents: 123
diff changeset
   173
        tBeg.y = this.circleY - this.radius - this.maxCellHeight - 10;
b5697bcdbaff add history load for time lines
ymh <ymh.work@gmail.com>
parents: 123
diff changeset
   174
        this.container.addChild(tBeg);
109
8546e2181a73 correct color codes sent by client
ymh <ymh.work@gmail.com>
parents: 105
diff changeset
   175
124
b5697bcdbaff add history load for time lines
ymh <ymh.work@gmail.com>
parents: 123
diff changeset
   176
        var tEnd = new PIXI.Text(Utils.formatTime(this.timeEnd), { font: '12pt Gothic Standard', fill: '#646464' });
b5697bcdbaff add history load for time lines
ymh <ymh.work@gmail.com>
parents: 123
diff changeset
   177
        tEnd.x = this.circleX - 15 - tEnd.width;
b5697bcdbaff add history load for time lines
ymh <ymh.work@gmail.com>
parents: 123
diff changeset
   178
        tEnd.y = this.circleY - this.radius - this.maxCellHeight - 10;
b5697bcdbaff add history load for time lines
ymh <ymh.work@gmail.com>
parents: 123
diff changeset
   179
        this.container.addChild(tEnd);
109
8546e2181a73 correct color codes sent by client
ymh <ymh.work@gmail.com>
parents: 105
diff changeset
   180
124
b5697bcdbaff add history load for time lines
ymh <ymh.work@gmail.com>
parents: 123
diff changeset
   181
        var t15 = new PIXI.Text(Utils.formatTime(((this.timeEnd - this.timeBegin)/4) + this.timeBegin), { font: '12pt Gothic Standard', fill: '#646464' });
b5697bcdbaff add history load for time lines
ymh <ymh.work@gmail.com>
parents: 123
diff changeset
   182
        t15.x = this.circleX + this.radius + this.maxCellHeight + 10 ;
b5697bcdbaff add history load for time lines
ymh <ymh.work@gmail.com>
parents: 123
diff changeset
   183
        t15.y = this.circleY - t15.height;
b5697bcdbaff add history load for time lines
ymh <ymh.work@gmail.com>
parents: 123
diff changeset
   184
        t15.rotation = Math.PI /2;
b5697bcdbaff add history load for time lines
ymh <ymh.work@gmail.com>
parents: 123
diff changeset
   185
        this.container.addChild(t15);
109
8546e2181a73 correct color codes sent by client
ymh <ymh.work@gmail.com>
parents: 105
diff changeset
   186
124
b5697bcdbaff add history load for time lines
ymh <ymh.work@gmail.com>
parents: 123
diff changeset
   187
        var t30 = new PIXI.Text(Utils.formatTime(((this.timeEnd - this.timeBegin)/2) + this.timeBegin), { font: '12pt Gothic Standard', fill: '#646464' });
b5697bcdbaff add history load for time lines
ymh <ymh.work@gmail.com>
parents: 123
diff changeset
   188
        t30.x = this.circleX - t30.width/2;
b5697bcdbaff add history load for time lines
ymh <ymh.work@gmail.com>
parents: 123
diff changeset
   189
        t30.y = this.circleY + this.radius + this.maxCellHeight - 2;
b5697bcdbaff add history load for time lines
ymh <ymh.work@gmail.com>
parents: 123
diff changeset
   190
        this.container.addChild(t30);
109
8546e2181a73 correct color codes sent by client
ymh <ymh.work@gmail.com>
parents: 105
diff changeset
   191
124
b5697bcdbaff add history load for time lines
ymh <ymh.work@gmail.com>
parents: 123
diff changeset
   192
        var t45 = new PIXI.Text(Utils.formatTime(((this.timeEnd - this.timeBegin)*3/4) + this.timeBegin), { font: '12pt Gothic Standard', fill: '#646464' });
b5697bcdbaff add history load for time lines
ymh <ymh.work@gmail.com>
parents: 123
diff changeset
   193
        t45.x = this.circleX - this.radius - this.maxCellHeight - 10 ;
b5697bcdbaff add history load for time lines
ymh <ymh.work@gmail.com>
parents: 123
diff changeset
   194
        t45.y = this.circleY + t15.height;
b5697bcdbaff add history load for time lines
ymh <ymh.work@gmail.com>
parents: 123
diff changeset
   195
        t45.rotation = -Math.PI/2;
b5697bcdbaff add history load for time lines
ymh <ymh.work@gmail.com>
parents: 123
diff changeset
   196
        this.container.addChild(t45);
b5697bcdbaff add history load for time lines
ymh <ymh.work@gmail.com>
parents: 123
diff changeset
   197
    };
109
8546e2181a73 correct color codes sent by client
ymh <ymh.work@gmail.com>
parents: 105
diff changeset
   198
99
9d968fbcaa2a Add General Time Line + minor change in annotsRoll
rougeronj
parents: 92
diff changeset
   199
    //Draw the cellule
123
d8ef840eaf68 get the correct json category depending on the timestamp
rougeronj
parents: 121
diff changeset
   200
    this.redrawCell = function(cell, colorsDef){
124
b5697bcdbaff add history load for time lines
ymh <ymh.work@gmail.com>
parents: 123
diff changeset
   201
102
cc7b06bfd574 update to circle representation
rougeronj
parents: 100
diff changeset
   202
    	var y = 0;
109
8546e2181a73 correct color codes sent by client
ymh <ymh.work@gmail.com>
parents: 105
diff changeset
   203
124
b5697bcdbaff add history load for time lines
ymh <ymh.work@gmail.com>
parents: 123
diff changeset
   204
        //Check if total height is higher than Max Cell Height
b5697bcdbaff add history load for time lines
ymh <ymh.work@gmail.com>
parents: 123
diff changeset
   205
        var heightStep;
b5697bcdbaff add history load for time lines
ymh <ymh.work@gmail.com>
parents: 123
diff changeset
   206
        if ((cell.totalAnnots*this.intervalHeight) > this.maxCellHeight){
b5697bcdbaff add history load for time lines
ymh <ymh.work@gmail.com>
parents: 123
diff changeset
   207
            heightStep = this.maxCellHeight/cell.totalAnnots;
b5697bcdbaff add history load for time lines
ymh <ymh.work@gmail.com>
parents: 123
diff changeset
   208
        } else {
b5697bcdbaff add history load for time lines
ymh <ymh.work@gmail.com>
parents: 123
diff changeset
   209
            heightStep = this.intervalHeight;
b5697bcdbaff add history load for time lines
ymh <ymh.work@gmail.com>
parents: 123
diff changeset
   210
        }
109
8546e2181a73 correct color codes sent by client
ymh <ymh.work@gmail.com>
parents: 105
diff changeset
   211
99
9d968fbcaa2a Add General Time Line + minor change in annotsRoll
rougeronj
parents: 92
diff changeset
   212
    	//Draw the rect depending on the height step calculated
123
d8ef840eaf68 get the correct json category depending on the timestamp
rougeronj
parents: 121
diff changeset
   213
    	for (var i=0; i< colorsDef.order.length; i++){
d8ef840eaf68 get the correct json category depending on the timestamp
rougeronj
parents: 121
diff changeset
   214
    		var currentCode = colorsDef.order[i];
100
0d7dac03c1a0 Merge with 72d767c5142df7fc6387215096321295fbaaa73d
rougeronj
parents: 99 98
diff changeset
   215
			cell.graphics.beginFill(cell.categories[currentCode].color.replace("#", "0x"))
103
123a611c7903 minor update of options and add annotsvizview
rougeronj
parents: 102
diff changeset
   216
    			.drawRect(0, y, this.intervalWidth-1, -cell.categories[currentCode].count * heightStep)
99
9d968fbcaa2a Add General Time Line + minor change in annotsRoll
rougeronj
parents: 92
diff changeset
   217
    			.endFill();
100
0d7dac03c1a0 Merge with 72d767c5142df7fc6387215096321295fbaaa73d
rougeronj
parents: 99 98
diff changeset
   218
    		y -= cell.categories[currentCode].count*heightStep;
99
9d968fbcaa2a Add General Time Line + minor change in annotsRoll
rougeronj
parents: 92
diff changeset
   219
    	}
9d968fbcaa2a Add General Time Line + minor change in annotsRoll
rougeronj
parents: 92
diff changeset
   220
    }
124
b5697bcdbaff add history load for time lines
ymh <ymh.work@gmail.com>
parents: 123
diff changeset
   221
123
d8ef840eaf68 get the correct json category depending on the timestamp
rougeronj
parents: 121
diff changeset
   222
    this.initCell = function(cell, colorsDef){
121
df6b39f962bc Add getAnnotCategories to utils and propagate the modification to annotsvizview and annotstimeline
rougeronj
parents: 114
diff changeset
   223
    	cell.graphics = new PIXI.Graphics();
df6b39f962bc Add getAnnotCategories to utils and propagate the modification to annotsvizview and annotstimeline
rougeronj
parents: 114
diff changeset
   224
    	cell.graphics.position.x = this.circleX + this.radius * Math.sin(cell.i*(360/totalIndex)*(Math.PI/180));
df6b39f962bc Add getAnnotCategories to utils and propagate the modification to annotsvizview and annotstimeline
rougeronj
parents: 114
diff changeset
   225
    	cell.graphics.position.y = this.circleY - this.radius * Math.cos(cell.i*(360/totalIndex)*(Math.PI/180));
df6b39f962bc Add getAnnotCategories to utils and propagate the modification to annotsvizview and annotstimeline
rougeronj
parents: 114
diff changeset
   226
    	cell.graphics.rotation = (cell.i)*(360/totalIndex)*(Math.PI/180) + (360/(totalIndex*2))*(Math.PI/180);
df6b39f962bc Add getAnnotCategories to utils and propagate the modification to annotsvizview and annotstimeline
rougeronj
parents: 114
diff changeset
   227
    	this.container.addChild(cell.graphics);
124
b5697bcdbaff add history load for time lines
ymh <ymh.work@gmail.com>
parents: 123
diff changeset
   228
123
d8ef840eaf68 get the correct json category depending on the timestamp
rougeronj
parents: 121
diff changeset
   229
    	for (var category in colorsDef.colors){
121
df6b39f962bc Add getAnnotCategories to utils and propagate the modification to annotsvizview and annotstimeline
rougeronj
parents: 114
diff changeset
   230
    		cell.categories[category] = {
df6b39f962bc Add getAnnotCategories to utils and propagate the modification to annotsvizview and annotstimeline
rougeronj
parents: 114
diff changeset
   231
				"count": 0,
123
d8ef840eaf68 get the correct json category depending on the timestamp
rougeronj
parents: 121
diff changeset
   232
				"color": colorsDef.colors[category]
121
df6b39f962bc Add getAnnotCategories to utils and propagate the modification to annotsvizview and annotstimeline
rougeronj
parents: 114
diff changeset
   233
    		};
df6b39f962bc Add getAnnotCategories to utils and propagate the modification to annotsvizview and annotstimeline
rougeronj
parents: 114
diff changeset
   234
    	}
df6b39f962bc Add getAnnotCategories to utils and propagate the modification to annotsvizview and annotstimeline
rougeronj
parents: 114
diff changeset
   235
    	cell.categories['default'] = {
df6b39f962bc Add getAnnotCategories to utils and propagate the modification to annotsvizview and annotstimeline
rougeronj
parents: 114
diff changeset
   236
			"count": 0,
123
d8ef840eaf68 get the correct json category depending on the timestamp
rougeronj
parents: 121
diff changeset
   237
			"color": colorsDef.defaultColor
121
df6b39f962bc Add getAnnotCategories to utils and propagate the modification to annotsvizview and annotstimeline
rougeronj
parents: 114
diff changeset
   238
    	}
df6b39f962bc Add getAnnotCategories to utils and propagate the modification to annotsvizview and annotstimeline
rougeronj
parents: 114
diff changeset
   239
    }
109
8546e2181a73 correct color codes sent by client
ymh <ymh.work@gmail.com>
parents: 105
diff changeset
   240
100
0d7dac03c1a0 Merge with 72d767c5142df7fc6387215096321295fbaaa73d
rougeronj
parents: 99 98
diff changeset
   241
    this.init = function() {
124
b5697bcdbaff add history load for time lines
ymh <ymh.work@gmail.com>
parents: 123
diff changeset
   242
        ws.message(function(data) {
100
0d7dac03c1a0 Merge with 72d767c5142df7fc6387215096321295fbaaa73d
rougeronj
parents: 99 98
diff changeset
   243
            _this.addAnnot(data);
0d7dac03c1a0 Merge with 72d767c5142df7fc6387215096321295fbaaa73d
rougeronj
parents: 99 98
diff changeset
   244
        });
109
8546e2181a73 correct color codes sent by client
ymh <ymh.work@gmail.com>
parents: 105
diff changeset
   245
124
b5697bcdbaff add history load for time lines
ymh <ymh.work@gmail.com>
parents: 123
diff changeset
   246
        this.initTimeTexts();
100
0d7dac03c1a0 Merge with 72d767c5142df7fc6387215096321295fbaaa73d
rougeronj
parents: 99 98
diff changeset
   247
    };
109
8546e2181a73 correct color codes sent by client
ymh <ymh.work@gmail.com>
parents: 105
diff changeset
   248
124
b5697bcdbaff add history load for time lines
ymh <ymh.work@gmail.com>
parents: 123
diff changeset
   249
    //TODO use moment.js
105
25ac8802c189 Improve interface + Add horizontal pianoroll to annotsvizview
rougeronj
parents: 103
diff changeset
   250
    this.updateTime = function(){
124
b5697bcdbaff add history load for time lines
ymh <ymh.work@gmail.com>
parents: 123
diff changeset
   251
        var currentTime = Date.now() + 3600*1000;
109
8546e2181a73 correct color codes sent by client
ymh <ymh.work@gmail.com>
parents: 105
diff changeset
   252
105
25ac8802c189 Improve interface + Add horizontal pianoroll to annotsvizview
rougeronj
parents: 103
diff changeset
   253
        var nbSec = currentTime / 1000;
25ac8802c189 Improve interface + Add horizontal pianoroll to annotsvizview
rougeronj
parents: 103
diff changeset
   254
        var hours = Math.floor( nbSec / 3600 ) % 24;
25ac8802c189 Improve interface + Add horizontal pianoroll to annotsvizview
rougeronj
parents: 103
diff changeset
   255
        var minutes = Math.floor( nbSec / 60 ) % 60;
25ac8802c189 Improve interface + Add horizontal pianoroll to annotsvizview
rougeronj
parents: 103
diff changeset
   256
        var seconds = Math.floor(nbSec % 60);
25ac8802c189 Improve interface + Add horizontal pianoroll to annotsvizview
rougeronj
parents: 103
diff changeset
   257
        var timeStr = (hours < 10 ? '0' + hours : hours) + ':' + (minutes < 10 ? '0' + minutes : minutes) + ':' + (seconds  < 10 ? '0' + seconds : seconds);
109
8546e2181a73 correct color codes sent by client
ymh <ymh.work@gmail.com>
parents: 105
diff changeset
   258
105
25ac8802c189 Improve interface + Add horizontal pianoroll to annotsvizview
rougeronj
parents: 103
diff changeset
   259
        currentTimeText.setText(timeStr);
25ac8802c189 Improve interface + Add horizontal pianoroll to annotsvizview
rougeronj
parents: 103
diff changeset
   260
    };
109
8546e2181a73 correct color codes sent by client
ymh <ymh.work@gmail.com>
parents: 105
diff changeset
   261
105
25ac8802c189 Improve interface + Add horizontal pianoroll to annotsvizview
rougeronj
parents: 103
diff changeset
   262
    var refreshTimeInterval;
109
8546e2181a73 correct color codes sent by client
ymh <ymh.work@gmail.com>
parents: 105
diff changeset
   263
100
0d7dac03c1a0 Merge with 72d767c5142df7fc6387215096321295fbaaa73d
rougeronj
parents: 99 98
diff changeset
   264
    this.start = function() {
124
b5697bcdbaff add history load for time lines
ymh <ymh.work@gmail.com>
parents: 123
diff changeset
   265
        this.startTs = Date.now();
b5697bcdbaff add history load for time lines
ymh <ymh.work@gmail.com>
parents: 123
diff changeset
   266
        refreshTimeInterval = setInterval(function() {_this.updateTime();}, 1000);
b5697bcdbaff add history load for time lines
ymh <ymh.work@gmail.com>
parents: 123
diff changeset
   267
        loadArchives();
91
09a9074ea7b0 Add general View fonction for main representation
rougeronj
parents:
diff changeset
   268
    };
109
8546e2181a73 correct color codes sent by client
ymh <ymh.work@gmail.com>
parents: 105
diff changeset
   269
100
0d7dac03c1a0 Merge with 72d767c5142df7fc6387215096321295fbaaa73d
rougeronj
parents: 99 98
diff changeset
   270
    this.refresh = function() {
109
8546e2181a73 correct color codes sent by client
ymh <ymh.work@gmail.com>
parents: 105
diff changeset
   271
100
0d7dac03c1a0 Merge with 72d767c5142df7fc6387215096321295fbaaa73d
rougeronj
parents: 99 98
diff changeset
   272
    };
109
8546e2181a73 correct color codes sent by client
ymh <ymh.work@gmail.com>
parents: 105
diff changeset
   273
100
0d7dac03c1a0 Merge with 72d767c5142df7fc6387215096321295fbaaa73d
rougeronj
parents: 99 98
diff changeset
   274
    this.stop = function(){
124
b5697bcdbaff add history load for time lines
ymh <ymh.work@gmail.com>
parents: 123
diff changeset
   275
        console.log(this.cells);
100
0d7dac03c1a0 Merge with 72d767c5142df7fc6387215096321295fbaaa73d
rougeronj
parents: 99 98
diff changeset
   276
    };
109
8546e2181a73 correct color codes sent by client
ymh <ymh.work@gmail.com>
parents: 105
diff changeset
   277
100
0d7dac03c1a0 Merge with 72d767c5142df7fc6387215096321295fbaaa73d
rougeronj
parents: 99 98
diff changeset
   278
    return this;
91
09a9074ea7b0 Add general View fonction for main representation
rougeronj
parents:
diff changeset
   279
}
09a9074ea7b0 Add general View fonction for main representation
rougeronj
parents:
diff changeset
   280
98
72d767c5142d refactor and make work annotsroll
ymh <ymh.work@gmail.com>
parents: 97
diff changeset
   281
module.exports = {
124
b5697bcdbaff add history load for time lines
ymh <ymh.work@gmail.com>
parents: 123
diff changeset
   282
    AnnotsTimeLine: AnnotsTimeLine
98
72d767c5142d refactor and make work annotsroll
ymh <ymh.work@gmail.com>
parents: 97
diff changeset
   283
};