--- a/client/annotviz/app/js/annotstimeline.js Fri Jan 23 01:08:34 2015 +0100
+++ b/client/annotviz/app/js/annotstimeline.js Fri Jan 23 02:00:19 2015 +0100
@@ -44,29 +44,29 @@
this.intervalWidth = opts.intervalWidth;
this.maxCellHeight = opts.maxCellHeight;
this.annotCategories = opts.annotCategories;
- this.startTs = options.startTs || Date.now();
+ this.startTs = options.startTs || Date.now();
this.showClockGraphics = opts.showClockGraphics;
this.archive = opts.archive;
-
+
this.circleX = opts.circleX || (this.width/2);
this.circleY = opts.circleY || (this.height/2);
this.radius = opts.radius;
var perimeter = 2*Math.PI* this.radius;
this.intervalDuration = (this.intervalWidth * this.duration / perimeter);
-
+
var channel = opts.channel;
var eventCode = opts.eventCode;
var serverUrl = opts.serverUrl;
var maxPages = opts.maxPages;
-
+
var totalIndex = Math.floor( perimeter/this.intervalWidth);
- this.cells = []
+ this.cells = [];
for (var i=0; i<(perimeter/this.intervalWidth) ; i++){
- this.cells[i] = [];
- this.cells[i].i = i;
- this.cells[i].totalAnnots = 0;
- this.cells[i].categories = {};
+ this.cells[i] = [];
+ this.cells[i].i = i;
+ this.cells[i].totalAnnots = 0;
+ this.cells[i].categories = {};
}
var ws = opts.ws;
@@ -75,13 +75,13 @@
//draw the base - circle and line to locate the scene
var graphics = new PIXI.Graphics();
graphics.lineStyle(2, 0x646464)
- .drawCircle(this.circleX, this.circleY, this.radius - 3)
- .endFill()
+ .drawCircle(this.circleX, this.circleY, this.radius - 3)
+ .endFill();
this.container.addChild(graphics);
stageView.registerComponent(this);
- var loadArchives = function() {
+ var loadArchives = function() {
//start timeBegin end startTime
//query -> need channel + eventCode
//iterate over data fill cells
@@ -125,73 +125,74 @@
//Add Annotation to the TimeLine
this.addAnnot = function(data){
- var ts = Date.parse(data.ts);
- var colorsDef;
- _(this.annotCategories).eachRight(function(cdef) {
+ var ts = Date.parse(data.ts);
+ var colorsDef;
+ _(this.annotCategories).eachRight(function(cdef) {
if(cdef.ts < ts) {
colorsDef = cdef;
return false;
}
});
- if (this.timeEnd > ts){
- var i = Math.floor((ts - this.timeBegin)/(1000*this.intervalDuration));
+ if (this.timeEnd > ts){
+ var i = Math.floor((ts - this.timeBegin)/(1000*this.intervalDuration));
- if (typeof(this.cells[i].graphics) === 'undefined'){
- this.initCell(this.cells[i], colorsDef);
- }
+ if (typeof(this.cells[i].graphics) === 'undefined'){
+ this.initCell(this.cells[i], colorsDef);
+ }
- if (typeof(colorsDef.colors[data.content.category.code]) !== 'undefined'){
- var annotCode = data.content.category.code;
- } else {
- var annotCode = 'default';
- }
+ var annotCode;
+ if (typeof(colorsDef.colors[data.content.category.code]) !== 'undefined'){
+ annotCode = data.content.category.code;
+ } else {
+ annotCode = 'default';
+ }
- this.cells[i].categories[annotCode].count += 1;
- this.cells[i].totalAnnots +=1;
- this.redrawCell(this.cells[i], colorsDef);
- }
+ this.cells[i].categories[annotCode].count += 1;
+ this.cells[i].totalAnnots +=1;
+ this.redrawCell(this.cells[i], colorsDef);
+ }
};
this.initClockGraphics = 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 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 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 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 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);
-
- var lineV = new PIXI.Graphics();
- lineV.lineStyle(1, 0x646464)
- .moveTo(this.circleX, this.circleY - (this.radius/3)/2)
- .lineTo(this.circleX, this.circleY - this.radius - this.maxCellHeight - 10)
- .endFill();
- this.container.addChild(lineV);
- }
+ 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);
+
+ var lineV = new PIXI.Graphics();
+ lineV.lineStyle(1, 0x646464)
+ .moveTo(this.circleX, this.circleY - (this.radius/3)/2)
+ .lineTo(this.circleX, this.circleY - this.radius - this.maxCellHeight - 10)
+ .endFill();
+ this.container.addChild(lineV);
+ };
//Draw the cellule
this.redrawCell = function(cell, colorsDef){
- var y = 0;
+ var y = 0;
//Check if total height is higher than Max Cell Height
var heightStep;
@@ -201,50 +202,50 @@
heightStep = this.intervalHeight;
}
- //Draw the rect depending on the height step calculated
- for (var i=0; i< colorsDef.order.length; i++){
- var currentCode = colorsDef.order[i];
- cell.graphics.beginFill(cell.categories[currentCode].color.replace("#", "0x"))
- .drawRect(0, y, this.intervalWidth-1, -cell.categories[currentCode].count * heightStep)
- .endFill();
- y -= cell.categories[currentCode].count*heightStep;
- }
- }
+ //Draw the rect depending on the height step calculated
+ for (var i=0; i< colorsDef.order.length; i++){
+ var currentCode = colorsDef.order[i];
+ cell.graphics.beginFill(cell.categories[currentCode].color.replace('#', '0x'))
+ .drawRect(0, y, this.intervalWidth-1, -cell.categories[currentCode].count * heightStep)
+ .endFill();
+ y -= cell.categories[currentCode].count*heightStep;
+ }
+ };
this.initCell = function(cell, colorsDef){
- cell.graphics = new PIXI.Graphics();
- cell.graphics.position.x = this.circleX + this.radius * Math.sin(cell.i*(360/totalIndex)*(Math.PI/180));
- cell.graphics.position.y = this.circleY - this.radius * Math.cos(cell.i*(360/totalIndex)*(Math.PI/180));
- cell.graphics.rotation = (cell.i)*(360/totalIndex)*(Math.PI/180) + (360/(totalIndex*2))*(Math.PI/180);
- this.container.addChild(cell.graphics);
+ cell.graphics = new PIXI.Graphics();
+ cell.graphics.position.x = this.circleX + this.radius * Math.sin(cell.i*(360/totalIndex)*(Math.PI/180));
+ cell.graphics.position.y = this.circleY - this.radius * Math.cos(cell.i*(360/totalIndex)*(Math.PI/180));
+ cell.graphics.rotation = (cell.i)*(360/totalIndex)*(Math.PI/180) + (360/(totalIndex*2))*(Math.PI/180);
+ this.container.addChild(cell.graphics);
- for (var category in colorsDef.colors){
- cell.categories[category] = {
- "count": 0,
- "color": colorsDef.colors[category]
- };
- }
- if (typeof(cell.categories['default']) === 'undefined'){
- cell.categories['default'] = {
- "count": 0,
- "color": colorsDef.defaultColor
- }
- }
- }
+ for (var category in colorsDef.colors){
+ cell.categories[category] = {
+ 'count': 0,
+ 'color': colorsDef.colors[category]
+ };
+ }
+ if (typeof(cell.categories['default']) === 'undefined'){
+ cell.categories['default'] = {
+ 'count': 0,
+ 'color': colorsDef.defaultColor
+ };
+ }
+ };
this.init = function() {
- if (!this.archive){
- ws.message(function(data) {
- _this.addAnnot(data);
- });
- }
+ if (!this.archive){
+ ws.message(function(data) {
+ _this.addAnnot(data);
+ });
+ }
- if (this.showClockGraphics){this.initClockGraphics();}
+ if (this.showClockGraphics){this.initClockGraphics();}
};
this.start = function() {
- this.startTs = Date.now();
+ this.startTs = Date.now();
loadArchives();
};
@@ -259,5 +260,5 @@
}
module.exports = {
- AnnotsTimeLine: AnnotsTimeLine
+ AnnotsTimeLine: AnnotsTimeLine
};