client/annotviz/app/js/annotstimeline.js
changeset 121 df6b39f962bc
parent 114 9fcb0e0991ed
child 123 d8ef840eaf68
equal deleted inserted replaced
120:89544c28a364 121:df6b39f962bc
    37     this.height = opts.height;
    37     this.height = opts.height;
    38     this.intervalHeight = opts.intervalHeight;
    38     this.intervalHeight = opts.intervalHeight;
    39     this.intervalWidth = opts.intervalWidth;
    39     this.intervalWidth = opts.intervalWidth;
    40     this.maxCellHeight = opts.maxCellHeight;
    40     this.maxCellHeight = opts.maxCellHeight;
    41     this.annotCategories = opts.annotCategories;
    41     this.annotCategories = opts.annotCategories;
    42 
    42     
    43     this.circleX = opts.circleX || (this.width/2);
    43     this.circleX = opts.circleX || (this.width/2);
    44     this.circleY = opts.circleY || (this.height/2);
    44     this.circleY = opts.circleY || (this.height/2);
    45     this.radius = opts.radius;
    45     this.radius = opts.radius;
    46     this.perimeter = 2*Math.PI* this.radius;
    46     this.perimeter = 2*Math.PI* this.radius;
    47     this.intervalDuration = (this.intervalWidth * this.duration / this.perimeter);
    47     this.intervalDuration = (this.intervalWidth * this.duration / this.perimeter);
    53     for (var i=0; i<(this.perimeter/this.intervalWidth) ; i++){
    53     for (var i=0; i<(this.perimeter/this.intervalWidth) ; i++){
    54     	this.cells[i] = [];
    54     	this.cells[i] = [];
    55     	this.cells[i].i = i;
    55     	this.cells[i].i = i;
    56     	this.cells[i].totalAnnots = 0;
    56     	this.cells[i].totalAnnots = 0;
    57     	this.cells[i].categories = {};
    57     	this.cells[i].categories = {};
    58     	
       
    59     	for (var category in this.annotCategories[0].colors){
       
    60     		this.cells[i].categories[category] = {
       
    61 				"count": 0,
       
    62 				"color": this.annotCategories[0].colors[category]
       
    63     		};
       
    64     	}
       
    65     }
    58     }
    66 
    59 
    67     var ws = opts.ws;
    60     var ws = opts.ws;
    68     var stageView = opts.stageView;
    61     var stageView = opts.stageView;
    69 
    62 
    89 
    82 
    90     stageView.registerComponent(this);
    83     stageView.registerComponent(this);
    91 
    84 
    92     //Add Annotation to the TimeLine
    85     //Add Annotation to the TimeLine
    93     this.addAnnot = function(data){
    86     this.addAnnot = function(data){
    94     	if (typeof(this.annotCategories[0].colors[data.content.category.code]) !== 'undefined'){
    87     	
    95     		var annotCode = data.content.category.code;
       
    96     	} else {
       
    97     		var annotCode = this.annotCategories[0].order[this.annotCategories[0].order.length -1];
       
    98     	}
       
    99     	var annotTime = Date.parse(data.ts);
       
   100 
       
   101     	if (this.timeEnd > Date.parse(data.ts)){
    88     	if (this.timeEnd > Date.parse(data.ts)){
   102     		console.log(this.timeBegin);
       
   103     		console.log(data.ts);
       
   104     		console.log(Date.parse(data.ts));
       
   105     		console.log(Date.now());
       
   106 	    	var i = Math.floor(((Date.parse(data.ts) + 3600*1000) - this.timeBegin)/(1000*this.intervalDuration));
    89 	    	var i = Math.floor(((Date.parse(data.ts) + 3600*1000) - this.timeBegin)/(1000*this.intervalDuration));
   107 	    	console.log(i);
    90 
       
    91 	    	if (typeof(this.cells[i].graphics) === 'undefined'){
       
    92 	    		this.initCell(this.cells[i]);
       
    93 	    	}
       
    94 	    	
       
    95 	    	if (typeof(this.annotCategories[0].colors[data.content.category.code]) !== 'undefined'){
       
    96 	    		var annotCode = data.content.category.code;
       
    97 	    	} else {
       
    98 	    		var annotCode = 'default';
       
    99 	    	}
       
   100 	    	
   108 			this.cells[i].categories[annotCode].count += 1;
   101 			this.cells[i].categories[annotCode].count += 1;
   109 			this.cells[i].totalAnnots +=1;
   102 			this.cells[i].totalAnnots +=1;
   110 			this.redrawCell(this.cells[i], i);
   103 			this.redrawCell(this.cells[i], i);
   111     	}
   104     	}
   112     };
   105     };
   113 
       
   114     this.initCell = function(cell){
       
   115     	cell.graphics = new PIXI.Graphics();
       
   116     	cell.graphics.position.x = this.circleX + this.radius * Math.sin(cell.i*(360/totalIndex)*(Math.PI/180));
       
   117     	cell.graphics.position.y = this.circleY - this.radius * Math.cos(cell.i*(360/totalIndex)*(Math.PI/180));
       
   118     	cell.graphics.rotation = (cell.i)*(360/totalIndex)*(Math.PI/180) + (360/(totalIndex*2))*(Math.PI/180);
       
   119     	this.container.addChild(cell.graphics);
       
   120     }
       
   121 
   106 
   122     this.initTimeTexts = function() {
   107     this.initTimeTexts = function() {
   123 	    var tBeg = new PIXI.Text(Utils.formatTime(this.timeBegin), { font: '12pt Gothic Standard', fill: '#646464' });
   108 	    var tBeg = new PIXI.Text(Utils.formatTime(this.timeBegin), { font: '12pt Gothic Standard', fill: '#646464' });
   124 	    tBeg.x = this.circleX + 15;
   109 	    tBeg.x = this.circleX + 15;
   125 	    tBeg.y = this.circleY - this.radius - this.maxCellHeight - 10;
   110 	    tBeg.y = this.circleY - this.radius - this.maxCellHeight - 10;
   148 	    this.container.addChild(t45);
   133 	    this.container.addChild(t45);
   149     }
   134     }
   150 
   135 
   151     //Draw the cellule
   136     //Draw the cellule
   152     this.redrawCell = function(cell){
   137     this.redrawCell = function(cell){
   153 
   138     	
   154     	if (typeof(cell.graphics) === 'undefined'){
       
   155     		this.initCell(cell);
       
   156     	} else {
       
   157     		cell.graphics.clear();
       
   158     	}
       
   159 
       
   160     	var y = 0;
   139     	var y = 0;
   161 
   140 
   162     	//Check if total height is higher than Max Cell Height
   141     	//Check if total height is higher than Max Cell Height
   163     	if ((cell.totalAnnots*this.intervalHeight) > this.maxCellHeight){
   142     	if ((cell.totalAnnots*this.intervalHeight) > this.maxCellHeight){
   164     		var heightStep = this.maxCellHeight/cell.totalAnnots;
   143     		var heightStep = this.maxCellHeight/cell.totalAnnots;
   173     			.drawRect(0, y, this.intervalWidth-1, -cell.categories[currentCode].count * heightStep)
   152     			.drawRect(0, y, this.intervalWidth-1, -cell.categories[currentCode].count * heightStep)
   174     			.endFill();
   153     			.endFill();
   175     		y -= cell.categories[currentCode].count*heightStep;
   154     		y -= cell.categories[currentCode].count*heightStep;
   176     	}
   155     	}
   177     }
   156     }
       
   157     
       
   158     this.initCell = function(cell){
       
   159     	cell.graphics = new PIXI.Graphics();
       
   160     	cell.graphics.position.x = this.circleX + this.radius * Math.sin(cell.i*(360/totalIndex)*(Math.PI/180));
       
   161     	cell.graphics.position.y = this.circleY - this.radius * Math.cos(cell.i*(360/totalIndex)*(Math.PI/180));
       
   162     	cell.graphics.rotation = (cell.i)*(360/totalIndex)*(Math.PI/180) + (360/(totalIndex*2))*(Math.PI/180);
       
   163     	this.container.addChild(cell.graphics);
       
   164     	
       
   165     	for (var category in this.annotCategories[0].colors){
       
   166     		cell.categories[category] = {
       
   167 				"count": 0,
       
   168 				"color": this.annotCategories[0].colors[category]
       
   169     		};
       
   170     	}
       
   171     	cell.categories['default'] = {
       
   172 			"count": 0,
       
   173 			"color": this.annotCategories[0].defaultColor
       
   174     	}
       
   175     }
   178 
   176 
   179     this.init = function() {
   177     this.init = function() {
   180     	ws.message(function(data) {
   178     	ws.message(function(data) {
   181             _this.addAnnot(data);
   179             _this.addAnnot(data);
   182         });
   180         });