client/annotviz/app/js/generalView.js
changeset 99 9d968fbcaa2a
parent 92 a323578ea954
equal deleted inserted replaced
92:a323578ea954 99:9d968fbcaa2a
     7 
     7 
     8 'use strict';
     8 'use strict';
     9 
     9 
    10 var PIXI = require('pixi');
    10 var PIXI = require('pixi');
    11 var randomColor = require('randomColor');
    11 var randomColor = require('randomColor');
       
    12 var rgb2hex = require('./utils');
    12 
    13 
    13 function GeneralView(parentContainer, xInit, yInit, width, height, timeBegin, timeEnd, intervalSize){
    14 function GeneralView(parentContainer, xInit, yInit, width, height, timeBegin, timeEnd, intervalWidth, intervalHeight, maxCellHeight, categories){
    14 	console.log(width);
       
    15     var _this = this;
    15     var _this = this;
    16     this.container = new PIXI.DisplayObjectContainer();
    16     this.container = new PIXI.DisplayObjectContainer();
    17     this.container.position.x = xInit;
    17     this.container.position.x = xInit;
    18     this.container.position.y = yInit;
    18     this.container.position.y = yInit;
    19     this.container.width = width;
    19     this.container.width = width;
    23     this.timeBegin = timeBegin;
    23     this.timeBegin = timeBegin;
    24     this.timeEnd = timeEnd;
    24     this.timeEnd = timeEnd;
    25     this.duration = (timeEnd - timeBegin)/1000 
    25     this.duration = (timeEnd - timeBegin)/1000 
    26     this.width = width;
    26     this.width = width;
    27     this.height = height;
    27     this.height = height;
    28     //define interval corresponding to the time of one step
    28     this.intervalHeight = intervalHeight;
    29     //e.g: 60 for a step of 60 seconds
    29     this.intervalWidth = intervalWidth;
    30     this.intervalSize = intervalSize;
    30     this.maxCellHeight = maxCellHeight;
    31     // define the step depending the interval we passed and the duration
    31     this.intervalDuration = (intervalWidth*this.duration/width);
    32     this.intervalDuration = (intervalSize*this.duration/width);
       
    33     
    32     
    34   //Initialise the list of step
    33     
       
    34     //Initialise the list of step
    35     //each cell will contain the list categories and the number of annotations per categories
    35     //each cell will contain the list categories and the number of annotations per categories
    36     this.cells = []
    36     this.cells = []
    37     
    37     for (var i=0; i<(width/intervalWidth) ; i++){
    38     
    38     	this.cells[i] = [];
       
    39     	this.cells[i].x = i * this.intervalWidth;
       
    40     	this.cells[i].totalAnnots = 0;
       
    41     	this.cells[i].graphics = new PIXI.Graphics();
       
    42     	this.container.addChild(this.cells[i].graphics);
       
    43     	this.cells[i].categories = {};
       
    44     	
       
    45     	for (var category in categories){
       
    46     		this.cells[i].categories[category] = {
       
    47 				"count": 0,
       
    48 				"color": categories[category]
       
    49     		};
       
    50     	}
       
    51     }
    39     // draw temp line to locate the middle of the container
    52     // draw temp line to locate the middle of the container
    40     var graphics = new PIXI.Graphics();
    53     var graphics = new PIXI.Graphics();
    41     graphics.beginFill(0x000000);
    54     graphics.beginFill(0x000000)
    42     graphics.lineStyle(1, 0x000000);
    55     	.lineStyle(1, 0x000000)
    43     graphics.moveTo(xInit, (-this.height/2) );
    56     	.moveTo(xInit, (-this.height/2) )
    44     graphics.lineTo(this.width, (-this.height/2));
    57     	.lineTo(this.width, (-this.height/2))
    45     graphics.endFill();
    58     	.endFill();
    46     this.container.addChild(graphics);
    59     this.container.addChild(graphics);
    47 
    60 
       
    61     //Add Annotation to the TimeLine
    48     this.addAnnot = function(category, time){
    62     this.addAnnot = function(category, time){
    49     	var x = Math.floor( (time-this.timeBegin)/(1000*this.intervalDuration)) * this.intervalSize;
    63     	console.log(this.timeEnd);
    50     	var y = (-this.height/2);
    64     	console.log(time);
       
    65     	if (this.timeEnd < time){
       
    66     		return;
       
    67     	}
       
    68     	var i = Math.floor((time-this.timeBegin)/(1000*this.intervalDuration));
       
    69 		this.cells[i].categories[category].count += 1;
       
    70 		this.cells[i].totalAnnots +=1;
       
    71 		this.redrawCell(this.cells[i]);
       
    72     };
       
    73     
       
    74     //Draw the cellule
       
    75     this.redrawCell = function(cell){
       
    76     	var x = cell.x; 
       
    77     	var y = -this.height/2;
       
    78     	cell.graphics.clear();
    51     	
    79     	
    52     	//Check if cell is already set.
    80     	//Check if total height is higher than Max Cell Height
    53     	//If yes get increment the numbere of annots in the category corresponding
    81     	if ((cell.totalAnnots*this.intervalHeight) > this.maxCellHeight){
    54     	//If not initialise the cell
    82     		var heightStep = this.maxCellHeight/cell.totalAnnots;
    55 //    	if (this.cells[x] === "undefined"){
    83     	} else {
    56 //    		cells[x].push({
    84     		var heightStep = this.intervalHeight;
    57 //    			"code" : category.code,
    85     	}
    58 //    			"color" : category.color,
    86     	//Draw the rect depending on the height step calculated
    59 //    			"count" : 1
    87     	for (var category in cell.categories){
    60 //    		});
    88 			cell.graphics.beginFill(cell.categories[category].color)
    61 //    	} else {
    89     			.drawRect(x, y, this.intervalWidth, -cell.categories[category].count * heightStep)
    62 //    		if (c)
    90     			.endFill();
    63 //    	} 
    91     		y -= cell.categories[category].count*heightStep;
    64     	
    92     	}
    65     	console.log("x : " + x + " | y : " + y);
    93     }
    66         
       
    67     	// We draw the rectangle
       
    68         var graphics = new PIXI.Graphics();
       
    69         graphics.beginFill(0x536991);
       
    70         graphics.drawRect(x, y, this.intervalSize, -10);
       
    71         graphics.endFill();
       
    72         
       
    73         this.container.addChild(graphics);
       
    74     };
       
    75 
       
    76 }
    94 }
    77 
    95 
    78 module.exports = GeneralView;
    96 module.exports = GeneralView;