--- a/client/annotviz/app/js/annotstimeline.js Thu Jan 22 09:26:43 2015 +0100
+++ b/client/annotviz/app/js/annotstimeline.js Thu Jan 22 09:29:49 2015 +0100
@@ -11,7 +11,7 @@
var Utils = require('./utils.js');
var _ = require('lodash');
-var defaultOptions = {
+var defaultOptions = {
logger: undefined,
intervalWidth: 10,
intervalHeight: 5,
@@ -23,13 +23,13 @@
function AnnotsTimeLine(options){
var _this = this;
var opts = _(options).defaults(defaultOptions).value();
-
+
this.container = new PIXI.DisplayObjectContainer();
this.container.x = opts.xInit;
this.container.y = opts.yInit;
this.container.width = opts.width;
- this.container.height = opts.height;
-
+ this.container.height = opts.height;
+
this.timeBegin = opts.timeBegin;
this.timeEnd = opts.timeEnd;
this.duration = (this.timeEnd - this.timeBegin)/1000;
@@ -39,23 +39,23 @@
this.intervalWidth = opts.intervalWidth;
this.maxCellHeight = opts.maxCellHeight;
this.annotCategories = opts.annotCategories;
-
+
this.circleX = opts.circleX || (this.width/2);
this.circleY = opts.circleY || (this.height/2);
this.radius = opts.radius;
this.perimeter = 2*Math.PI* this.radius;
this.intervalDuration = (this.intervalWidth * this.duration / this.perimeter);
-
+
var currentTime = this.timeBegin;
var totalIndex = Math.floor(this.perimeter/this.intervalWidth);
-
+
this.cells = []
for (var i=0; i<(this.perimeter/this.intervalWidth) ; i++){
this.cells[i] = [];
this.cells[i].i = i;
this.cells[i].totalAnnots = 0;
this.cells[i].categories = {};
-
+
for (var category in this.annotCategories[0].colors){
this.cells[i].categories[category] = {
"count": 0,
@@ -63,7 +63,7 @@
};
}
}
-
+
var ws = opts.ws;
var stageView = opts.stageView;
@@ -79,13 +79,14 @@
.lineTo(this.circleX, this.circleY - this.radius - this.maxCellHeight - 10)
.endFill()
this.container.addChild(graphics);
-
+
//set time text
+ //TODO : move this to annotsvizview
var currentTimeText = new PIXI.Text("-- : -- : --", { font: '18pt Gothic Standard', fill: '#646464' });
currentTimeText.x = this.circleX - currentTimeText.width/2;
currentTimeText.y = this.circleY - currentTimeText.height/2;
this.container.addChild(currentTimeText);
-
+
stageView.registerComponent(this);
//Add Annotation to the TimeLine
@@ -96,16 +97,16 @@
var annotCode = this.annotCategories[0].order[this.annotCategories[0].order.length -1];
}
var annotTime = Date.parse(data.ts);
-
+
if (this.timeEnd > Date.parse(data.ts)){
var i = Math.floor((Date.parse(data.ts)-this.timeBegin)/(1000*this.intervalDuration));
-
+
this.cells[i].categories[annotCode].count += 1;
this.cells[i].totalAnnots +=1;
this.redrawCell(this.cells[i], i);
}
};
-
+
this.initGraphics = function(cell){
cell.graphics = new PIXI.Graphics();
cell.graphics.position.x = this.circleX + this.radius * Math.sin(cell.i*(360/totalIndex)*(Math.PI/180));
@@ -113,54 +114,54 @@
cell.graphics.rotation = (cell.i)*(360/totalIndex)*(Math.PI/180) + (360/(totalIndex*2))*(Math.PI/180);
this.container.addChild(cell.graphics);
}
-
+
this.initTimeTexts = function() {
var tBeg = new PIXI.Text(Utils.formatTime(this.timeBegin), { font: '12pt Gothic Standard', fill: '#646464' });
tBeg.x = this.circleX + 15;
tBeg.y = this.circleY - this.radius - this.maxCellHeight - 10;
this.container.addChild(tBeg);
-
+
var tEnd = new PIXI.Text(Utils.formatTime(this.timeEnd), { font: '12pt Gothic Standard', fill: '#646464' });
tEnd.x = this.circleX - 15 - tEnd.width;
tEnd.y = this.circleY - this.radius - this.maxCellHeight - 10;
this.container.addChild(tEnd);
-
+
var t15 = new PIXI.Text(Utils.formatTime(((this.timeEnd - this.timeBegin)/4) + this.timeBegin), { font: '12pt Gothic Standard', fill: '#646464' });
t15.x = this.circleX + this.radius + this.maxCellHeight + 10 ;
t15.y = this.circleY - t15.height;
t15.rotation = Math.PI /2;
this.container.addChild(t15);
-
+
var t30 = new PIXI.Text(Utils.formatTime(((this.timeEnd - this.timeBegin)/2) + this.timeBegin), { font: '12pt Gothic Standard', fill: '#646464' });
t30.x = this.circleX - t30.width/2;
t30.y = this.circleY + this.radius + this.maxCellHeight - 2;
this.container.addChild(t30);
-
+
var t45 = new PIXI.Text(Utils.formatTime(((this.timeEnd - this.timeBegin)*3/4) + this.timeBegin), { font: '12pt Gothic Standard', fill: '#646464' });
t45.x = this.circleX - this.radius - this.maxCellHeight - 10 ;
t45.y = this.circleY + t15.height;
t45.rotation = -Math.PI/2;
this.container.addChild(t45);
}
-
+
//Draw the cellule
this.redrawCell = function(cell){
-
+
if (typeof(cell.graphics) === 'undefined'){
this.initGraphics(cell);
} else {
cell.graphics.clear();
}
-
+
var y = 0;
-
+
//Check if total height is higher than Max Cell Height
if ((cell.totalAnnots*this.intervalHeight) > this.maxCellHeight){
var heightStep = this.maxCellHeight/cell.totalAnnots;
} else {
var heightStep = this.intervalHeight;
}
-
+
//Draw the rect depending on the height step calculated
for (var i=0; i< this.annotCategories[0].order.length; i++){
var currentCode = this.annotCategories[0].order[i];
@@ -170,41 +171,41 @@
y -= cell.categories[currentCode].count*heightStep;
}
}
-
+
this.init = function() {
ws.message(function(data) {
_this.addAnnot(data);
});
-
+
this.initTimeTexts();
};
-
+
this.updateTime = function(){
currentTime += 1000;
-
+
var nbSec = currentTime / 1000;
var hours = Math.floor( nbSec / 3600 ) % 24;
var minutes = Math.floor( nbSec / 60 ) % 60;
var seconds = Math.floor(nbSec % 60);
var timeStr = (hours < 10 ? '0' + hours : hours) + ':' + (minutes < 10 ? '0' + minutes : minutes) + ':' + (seconds < 10 ? '0' + seconds : seconds);
-
+
currentTimeText.setText(timeStr);
};
-
+
var refreshTimeInterval;
-
+
this.start = function() {
refreshTimeInterval = setInterval(function() {_this.updateTime();}, 1000);
};
-
+
this.refresh = function() {
-
+
};
-
+
this.stop = function(){
console.log(this.cells);
};
-
+
return this;
}