client/annotviz/app/js/annotstimeline.js
author rougeronj
Tue, 20 Jan 2015 18:37:51 +0100
changeset 100 0d7dac03c1a0
parent 99 client/annotviz/app/js/generalView.js@9d968fbcaa2a
parent 98 client/annotviz/app/js/generalView.js@72d767c5142d
child 102 cc7b06bfd574
permissions -rw-r--r--
Merge with 72d767c5142df7fc6387215096321295fbaaa73d Update doubleroll and annotsroll to support stageView
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');
100
0d7dac03c1a0 Merge with 72d767c5142df7fc6387215096321295fbaaa73d
rougeronj
parents: 99 98
diff changeset
    11
var _ = require('lodash');
99
9d968fbcaa2a Add General Time Line + minor change in annotsRoll
rougeronj
parents: 92
diff changeset
    12
var rgb2hex = require('./utils');
97
545803e685e0 rename components
ymh <ymh.work@gmail.com>
parents: 92
diff changeset
    13
100
0d7dac03c1a0 Merge with 72d767c5142df7fc6387215096321295fbaaa73d
rougeronj
parents: 99 98
diff changeset
    14
var defaultOptions = {		
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,
0d7dac03c1a0 Merge with 72d767c5142df7fc6387215096321295fbaaa73d
rougeronj
parents: 99 98
diff changeset
    18
    maxCellHeight: 20,
0d7dac03c1a0 Merge with 72d767c5142df7fc6387215096321295fbaaa73d
rougeronj
parents: 99 98
diff changeset
    19
};
97
545803e685e0 rename components
ymh <ymh.work@gmail.com>
parents: 92
diff changeset
    20
545803e685e0 rename components
ymh <ymh.work@gmail.com>
parents: 92
diff changeset
    21
100
0d7dac03c1a0 Merge with 72d767c5142df7fc6387215096321295fbaaa73d
rougeronj
parents: 99 98
diff changeset
    22
function AnnotsTimeLine(options){
91
09a9074ea7b0 Add general View fonction for main representation
rougeronj
parents:
diff changeset
    23
    var _this = this;
100
0d7dac03c1a0 Merge with 72d767c5142df7fc6387215096321295fbaaa73d
rougeronj
parents: 99 98
diff changeset
    24
    var opts = _(options).defaults(defaultOptions).value();
91
09a9074ea7b0 Add general View fonction for main representation
rougeronj
parents:
diff changeset
    25
    
100
0d7dac03c1a0 Merge with 72d767c5142df7fc6387215096321295fbaaa73d
rougeronj
parents: 99 98
diff changeset
    26
    this.container = new PIXI.DisplayObjectContainer();
0d7dac03c1a0 Merge with 72d767c5142df7fc6387215096321295fbaaa73d
rougeronj
parents: 99 98
diff changeset
    27
    this.container.x = opts.xInit;
0d7dac03c1a0 Merge with 72d767c5142df7fc6387215096321295fbaaa73d
rougeronj
parents: 99 98
diff changeset
    28
    this.container.y = opts.yInit;
0d7dac03c1a0 Merge with 72d767c5142df7fc6387215096321295fbaaa73d
rougeronj
parents: 99 98
diff changeset
    29
    this.container.width = opts.width;
0d7dac03c1a0 Merge with 72d767c5142df7fc6387215096321295fbaaa73d
rougeronj
parents: 99 98
diff changeset
    30
    this.container.height = opts.height;    
91
09a9074ea7b0 Add general View fonction for main representation
rougeronj
parents:
diff changeset
    31
    
100
0d7dac03c1a0 Merge with 72d767c5142df7fc6387215096321295fbaaa73d
rougeronj
parents: 99 98
diff changeset
    32
    this.timeBegin = opts.timeBegin;
0d7dac03c1a0 Merge with 72d767c5142df7fc6387215096321295fbaaa73d
rougeronj
parents: 99 98
diff changeset
    33
    this.timeEnd = opts.timeEnd;
0d7dac03c1a0 Merge with 72d767c5142df7fc6387215096321295fbaaa73d
rougeronj
parents: 99 98
diff changeset
    34
    this.duration = (this.timeEnd - this.timeBegin)/1000;
0d7dac03c1a0 Merge with 72d767c5142df7fc6387215096321295fbaaa73d
rougeronj
parents: 99 98
diff changeset
    35
    this.width = opts.width;
0d7dac03c1a0 Merge with 72d767c5142df7fc6387215096321295fbaaa73d
rougeronj
parents: 99 98
diff changeset
    36
    this.height = opts.height;
0d7dac03c1a0 Merge with 72d767c5142df7fc6387215096321295fbaaa73d
rougeronj
parents: 99 98
diff changeset
    37
    this.intervalHeight = opts.intervalHeight;
0d7dac03c1a0 Merge with 72d767c5142df7fc6387215096321295fbaaa73d
rougeronj
parents: 99 98
diff changeset
    38
    this.intervalWidth = opts.intervalWidth;
0d7dac03c1a0 Merge with 72d767c5142df7fc6387215096321295fbaaa73d
rougeronj
parents: 99 98
diff changeset
    39
    this.maxCellHeight = opts.maxCellHeight;
0d7dac03c1a0 Merge with 72d767c5142df7fc6387215096321295fbaaa73d
rougeronj
parents: 99 98
diff changeset
    40
    this.intervalDuration = (this.intervalWidth * this.duration / this.width);
0d7dac03c1a0 Merge with 72d767c5142df7fc6387215096321295fbaaa73d
rougeronj
parents: 99 98
diff changeset
    41
    this.annotCategories = opts.annotCategories;
99
9d968fbcaa2a Add General Time Line + minor change in annotsRoll
rougeronj
parents: 92
diff changeset
    42
    
91
09a9074ea7b0 Add general View fonction for main representation
rougeronj
parents:
diff changeset
    43
    this.cells = []
100
0d7dac03c1a0 Merge with 72d767c5142df7fc6387215096321295fbaaa73d
rougeronj
parents: 99 98
diff changeset
    44
    for (var i=0; i<(this.width/this.intervalWidth) ; i++){
99
9d968fbcaa2a Add General Time Line + minor change in annotsRoll
rougeronj
parents: 92
diff changeset
    45
    	this.cells[i] = [];
9d968fbcaa2a Add General Time Line + minor change in annotsRoll
rougeronj
parents: 92
diff changeset
    46
    	this.cells[i].x = i * this.intervalWidth;
9d968fbcaa2a Add General Time Line + minor change in annotsRoll
rougeronj
parents: 92
diff changeset
    47
    	this.cells[i].totalAnnots = 0;
9d968fbcaa2a Add General Time Line + minor change in annotsRoll
rougeronj
parents: 92
diff changeset
    48
    	this.cells[i].graphics = new PIXI.Graphics();
9d968fbcaa2a Add General Time Line + minor change in annotsRoll
rougeronj
parents: 92
diff changeset
    49
    	this.container.addChild(this.cells[i].graphics);
9d968fbcaa2a Add General Time Line + minor change in annotsRoll
rougeronj
parents: 92
diff changeset
    50
    	this.cells[i].categories = {};
9d968fbcaa2a Add General Time Line + minor change in annotsRoll
rougeronj
parents: 92
diff changeset
    51
    	
100
0d7dac03c1a0 Merge with 72d767c5142df7fc6387215096321295fbaaa73d
rougeronj
parents: 99 98
diff changeset
    52
    	for (var category in this.annotCategories[0].colors){
99
9d968fbcaa2a Add General Time Line + minor change in annotsRoll
rougeronj
parents: 92
diff changeset
    53
    		this.cells[i].categories[category] = {
9d968fbcaa2a Add General Time Line + minor change in annotsRoll
rougeronj
parents: 92
diff changeset
    54
				"count": 0,
100
0d7dac03c1a0 Merge with 72d767c5142df7fc6387215096321295fbaaa73d
rougeronj
parents: 99 98
diff changeset
    55
				"color": this.annotCategories[0].colors[category]
99
9d968fbcaa2a Add General Time Line + minor change in annotsRoll
rougeronj
parents: 92
diff changeset
    56
    		};
9d968fbcaa2a Add General Time Line + minor change in annotsRoll
rougeronj
parents: 92
diff changeset
    57
    	}
9d968fbcaa2a Add General Time Line + minor change in annotsRoll
rougeronj
parents: 92
diff changeset
    58
    }
100
0d7dac03c1a0 Merge with 72d767c5142df7fc6387215096321295fbaaa73d
rougeronj
parents: 99 98
diff changeset
    59
    
0d7dac03c1a0 Merge with 72d767c5142df7fc6387215096321295fbaaa73d
rougeronj
parents: 99 98
diff changeset
    60
    var ws = opts.ws;
0d7dac03c1a0 Merge with 72d767c5142df7fc6387215096321295fbaaa73d
rougeronj
parents: 99 98
diff changeset
    61
    var stageView = opts.stageView;
91
09a9074ea7b0 Add general View fonction for main representation
rougeronj
parents:
diff changeset
    62
    // draw temp line to locate the middle of the container
09a9074ea7b0 Add general View fonction for main representation
rougeronj
parents:
diff changeset
    63
    var graphics = new PIXI.Graphics();
99
9d968fbcaa2a Add General Time Line + minor change in annotsRoll
rougeronj
parents: 92
diff changeset
    64
    graphics.beginFill(0x000000)
9d968fbcaa2a Add General Time Line + minor change in annotsRoll
rougeronj
parents: 92
diff changeset
    65
    	.lineStyle(1, 0x000000)
100
0d7dac03c1a0 Merge with 72d767c5142df7fc6387215096321295fbaaa73d
rougeronj
parents: 99 98
diff changeset
    66
    	.moveTo(this.container.x, (this.height/2))
0d7dac03c1a0 Merge with 72d767c5142df7fc6387215096321295fbaaa73d
rougeronj
parents: 99 98
diff changeset
    67
    	.lineTo(this.width, (this.height/2))
99
9d968fbcaa2a Add General Time Line + minor change in annotsRoll
rougeronj
parents: 92
diff changeset
    68
    	.endFill();
91
09a9074ea7b0 Add general View fonction for main representation
rougeronj
parents:
diff changeset
    69
    this.container.addChild(graphics);
100
0d7dac03c1a0 Merge with 72d767c5142df7fc6387215096321295fbaaa73d
rougeronj
parents: 99 98
diff changeset
    70
    
0d7dac03c1a0 Merge with 72d767c5142df7fc6387215096321295fbaaa73d
rougeronj
parents: 99 98
diff changeset
    71
    stageView.registerComponent(this);
97
545803e685e0 rename components
ymh <ymh.work@gmail.com>
parents: 92
diff changeset
    72
99
9d968fbcaa2a Add General Time Line + minor change in annotsRoll
rougeronj
parents: 92
diff changeset
    73
    //Add Annotation to the TimeLine
100
0d7dac03c1a0 Merge with 72d767c5142df7fc6387215096321295fbaaa73d
rougeronj
parents: 99 98
diff changeset
    74
    this.addAnnot = function(data){
0d7dac03c1a0 Merge with 72d767c5142df7fc6387215096321295fbaaa73d
rougeronj
parents: 99 98
diff changeset
    75
    	if (typeof(this.annotCategories[0].colors[data.content.category.code]) !== 'undefined'){
0d7dac03c1a0 Merge with 72d767c5142df7fc6387215096321295fbaaa73d
rougeronj
parents: 99 98
diff changeset
    76
    		var annotCode = data.content.category.code;
0d7dac03c1a0 Merge with 72d767c5142df7fc6387215096321295fbaaa73d
rougeronj
parents: 99 98
diff changeset
    77
    	} else {
0d7dac03c1a0 Merge with 72d767c5142df7fc6387215096321295fbaaa73d
rougeronj
parents: 99 98
diff changeset
    78
    		var annotCode = this.annotCategories[0].order[this.annotCategories[0].order.length -1];
99
9d968fbcaa2a Add General Time Line + minor change in annotsRoll
rougeronj
parents: 92
diff changeset
    79
    	}
100
0d7dac03c1a0 Merge with 72d767c5142df7fc6387215096321295fbaaa73d
rougeronj
parents: 99 98
diff changeset
    80
    	var annotTime = Date.parse(data.ts);
0d7dac03c1a0 Merge with 72d767c5142df7fc6387215096321295fbaaa73d
rougeronj
parents: 99 98
diff changeset
    81
    	
0d7dac03c1a0 Merge with 72d767c5142df7fc6387215096321295fbaaa73d
rougeronj
parents: 99 98
diff changeset
    82
    	if (this.timeEnd > Date.parse(data.ts)){
0d7dac03c1a0 Merge with 72d767c5142df7fc6387215096321295fbaaa73d
rougeronj
parents: 99 98
diff changeset
    83
	    	var i = Math.floor((Date.parse(data.ts)-this.timeBegin)/(1000*this.intervalDuration));
0d7dac03c1a0 Merge with 72d767c5142df7fc6387215096321295fbaaa73d
rougeronj
parents: 99 98
diff changeset
    84
			this.cells[i].categories[annotCode].count += 1;
0d7dac03c1a0 Merge with 72d767c5142df7fc6387215096321295fbaaa73d
rougeronj
parents: 99 98
diff changeset
    85
			this.cells[i].totalAnnots +=1;
0d7dac03c1a0 Merge with 72d767c5142df7fc6387215096321295fbaaa73d
rougeronj
parents: 99 98
diff changeset
    86
			this.redrawCell(this.cells[i]);
0d7dac03c1a0 Merge with 72d767c5142df7fc6387215096321295fbaaa73d
rougeronj
parents: 99 98
diff changeset
    87
    	}
99
9d968fbcaa2a Add General Time Line + minor change in annotsRoll
rougeronj
parents: 92
diff changeset
    88
    };
9d968fbcaa2a Add General Time Line + minor change in annotsRoll
rougeronj
parents: 92
diff changeset
    89
    
9d968fbcaa2a Add General Time Line + minor change in annotsRoll
rougeronj
parents: 92
diff changeset
    90
    //Draw the cellule
9d968fbcaa2a Add General Time Line + minor change in annotsRoll
rougeronj
parents: 92
diff changeset
    91
    this.redrawCell = function(cell){
9d968fbcaa2a Add General Time Line + minor change in annotsRoll
rougeronj
parents: 92
diff changeset
    92
    	var x = cell.x; 
100
0d7dac03c1a0 Merge with 72d767c5142df7fc6387215096321295fbaaa73d
rougeronj
parents: 99 98
diff changeset
    93
    	var y = this.height/2;
99
9d968fbcaa2a Add General Time Line + minor change in annotsRoll
rougeronj
parents: 92
diff changeset
    94
    	cell.graphics.clear();
91
09a9074ea7b0 Add general View fonction for main representation
rougeronj
parents:
diff changeset
    95
    	
99
9d968fbcaa2a Add General Time Line + minor change in annotsRoll
rougeronj
parents: 92
diff changeset
    96
    	//Check if total height is higher than Max Cell Height
9d968fbcaa2a Add General Time Line + minor change in annotsRoll
rougeronj
parents: 92
diff changeset
    97
    	if ((cell.totalAnnots*this.intervalHeight) > this.maxCellHeight){
9d968fbcaa2a Add General Time Line + minor change in annotsRoll
rougeronj
parents: 92
diff changeset
    98
    		var heightStep = this.maxCellHeight/cell.totalAnnots;
9d968fbcaa2a Add General Time Line + minor change in annotsRoll
rougeronj
parents: 92
diff changeset
    99
    	} else {
9d968fbcaa2a Add General Time Line + minor change in annotsRoll
rougeronj
parents: 92
diff changeset
   100
    		var heightStep = this.intervalHeight;
9d968fbcaa2a Add General Time Line + minor change in annotsRoll
rougeronj
parents: 92
diff changeset
   101
    	}
9d968fbcaa2a Add General Time Line + minor change in annotsRoll
rougeronj
parents: 92
diff changeset
   102
    	//Draw the rect depending on the height step calculated
100
0d7dac03c1a0 Merge with 72d767c5142df7fc6387215096321295fbaaa73d
rougeronj
parents: 99 98
diff changeset
   103
    	for (var i=0; i< this.annotCategories[0].order.length; i++){
0d7dac03c1a0 Merge with 72d767c5142df7fc6387215096321295fbaaa73d
rougeronj
parents: 99 98
diff changeset
   104
    		var currentCode = this.annotCategories[0].order[i];
0d7dac03c1a0 Merge with 72d767c5142df7fc6387215096321295fbaaa73d
rougeronj
parents: 99 98
diff changeset
   105
			cell.graphics.beginFill(cell.categories[currentCode].color.replace("#", "0x"))
0d7dac03c1a0 Merge with 72d767c5142df7fc6387215096321295fbaaa73d
rougeronj
parents: 99 98
diff changeset
   106
    			.drawRect(x, y, this.intervalWidth, -cell.categories[currentCode].count * heightStep)
99
9d968fbcaa2a Add General Time Line + minor change in annotsRoll
rougeronj
parents: 92
diff changeset
   107
    			.endFill();
100
0d7dac03c1a0 Merge with 72d767c5142df7fc6387215096321295fbaaa73d
rougeronj
parents: 99 98
diff changeset
   108
    		y -= cell.categories[currentCode].count*heightStep;
99
9d968fbcaa2a Add General Time Line + minor change in annotsRoll
rougeronj
parents: 92
diff changeset
   109
    	}
9d968fbcaa2a Add General Time Line + minor change in annotsRoll
rougeronj
parents: 92
diff changeset
   110
    }
100
0d7dac03c1a0 Merge with 72d767c5142df7fc6387215096321295fbaaa73d
rougeronj
parents: 99 98
diff changeset
   111
    
0d7dac03c1a0 Merge with 72d767c5142df7fc6387215096321295fbaaa73d
rougeronj
parents: 99 98
diff changeset
   112
    this.init = function() {
97
545803e685e0 rename components
ymh <ymh.work@gmail.com>
parents: 92
diff changeset
   113
100
0d7dac03c1a0 Merge with 72d767c5142df7fc6387215096321295fbaaa73d
rougeronj
parents: 99 98
diff changeset
   114
    	ws.message(function(data) {
0d7dac03c1a0 Merge with 72d767c5142df7fc6387215096321295fbaaa73d
rougeronj
parents: 99 98
diff changeset
   115
            _this.addAnnot(data);
0d7dac03c1a0 Merge with 72d767c5142df7fc6387215096321295fbaaa73d
rougeronj
parents: 99 98
diff changeset
   116
        });
97
545803e685e0 rename components
ymh <ymh.work@gmail.com>
parents: 92
diff changeset
   117
100
0d7dac03c1a0 Merge with 72d767c5142df7fc6387215096321295fbaaa73d
rougeronj
parents: 99 98
diff changeset
   118
    };
0d7dac03c1a0 Merge with 72d767c5142df7fc6387215096321295fbaaa73d
rougeronj
parents: 99 98
diff changeset
   119
    
0d7dac03c1a0 Merge with 72d767c5142df7fc6387215096321295fbaaa73d
rougeronj
parents: 99 98
diff changeset
   120
    this.start = function() {
91
09a9074ea7b0 Add general View fonction for main representation
rougeronj
parents:
diff changeset
   121
    };
100
0d7dac03c1a0 Merge with 72d767c5142df7fc6387215096321295fbaaa73d
rougeronj
parents: 99 98
diff changeset
   122
    
0d7dac03c1a0 Merge with 72d767c5142df7fc6387215096321295fbaaa73d
rougeronj
parents: 99 98
diff changeset
   123
    this.refresh = function() {
0d7dac03c1a0 Merge with 72d767c5142df7fc6387215096321295fbaaa73d
rougeronj
parents: 99 98
diff changeset
   124
    };
0d7dac03c1a0 Merge with 72d767c5142df7fc6387215096321295fbaaa73d
rougeronj
parents: 99 98
diff changeset
   125
    
0d7dac03c1a0 Merge with 72d767c5142df7fc6387215096321295fbaaa73d
rougeronj
parents: 99 98
diff changeset
   126
    this.stop = function(){
0d7dac03c1a0 Merge with 72d767c5142df7fc6387215096321295fbaaa73d
rougeronj
parents: 99 98
diff changeset
   127
    };
0d7dac03c1a0 Merge with 72d767c5142df7fc6387215096321295fbaaa73d
rougeronj
parents: 99 98
diff changeset
   128
    
0d7dac03c1a0 Merge with 72d767c5142df7fc6387215096321295fbaaa73d
rougeronj
parents: 99 98
diff changeset
   129
    return this;
91
09a9074ea7b0 Add general View fonction for main representation
rougeronj
parents:
diff changeset
   130
}
09a9074ea7b0 Add general View fonction for main representation
rougeronj
parents:
diff changeset
   131
98
72d767c5142d refactor and make work annotsroll
ymh <ymh.work@gmail.com>
parents: 97
diff changeset
   132
module.exports = {
100
0d7dac03c1a0 Merge with 72d767c5142df7fc6387215096321295fbaaa73d
rougeronj
parents: 99 98
diff changeset
   133
		AnnotsTimeLine: AnnotsTimeLine
98
72d767c5142d refactor and make work annotsroll
ymh <ymh.work@gmail.com>
parents: 97
diff changeset
   134
};