Add timeline of the 2nd day - take out from the clock annotstimeline and put it in annotsvizview - make the clocks graphics optional through showClockGraphics
--- a/client/annotviz/app/js/annotstimeline.js Thu Jan 22 16:16:54 2015 +0100
+++ b/client/annotviz/app/js/annotstimeline.js Thu Jan 22 23:58:11 2015 +0100
@@ -16,7 +16,8 @@
intervalWidth: 10,
intervalHeight: 5,
maxCellHeight: 200,
- radius: 300
+ radius: 300,
+ showClockGraphics: true
};
@@ -39,18 +40,18 @@
this.intervalWidth = opts.intervalWidth;
this.maxCellHeight = opts.maxCellHeight;
this.annotCategories = opts.annotCategories;
+ this.showClockGraphics = opts.showClockGraphics;
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 = Date.now() + 3600*1000;
- var totalIndex = Math.floor(this.perimeter/this.intervalWidth);
+ var perimeter = 2*Math.PI* this.radius;
+ this.intervalDuration = (this.intervalWidth * this.duration / perimeter);
+
+ var totalIndex = Math.floor( perimeter/this.intervalWidth);
this.cells = []
- for (var i=0; i<(this.perimeter/this.intervalWidth) ; i++){
+ for (var i=0; i<(perimeter/this.intervalWidth) ; i++){
this.cells[i] = [];
this.cells[i].i = i;
this.cells[i].totalAnnots = 0;
@@ -64,27 +65,13 @@
var graphics = new PIXI.Graphics();
graphics.lineStyle(2, 0x646464)
.drawCircle(this.circleX, this.circleY, this.radius - 3)
- .lineStyle(1, 0xD7D7D7)
- .drawCircle(this.circleX, this.circleY, this.radius*2/3)
- .drawCircle(this.circleX, this.circleY, this.radius/3)
- .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(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
- this.addAnnot = function(data){
-
+ this.addAnnot = function(data){
var ts = Date.parse(data.ts);
var colorsDef;
_(this.annotCategories).eachRight(function(cdef) {
@@ -93,10 +80,8 @@
return false;
}
});
-
- if (this.timeEnd > Date.parse(data.ts)){
- var i = Math.floor(((Date.parse(data.ts) + 3600*1000) - 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);
}
@@ -113,7 +98,7 @@
}
};
- this.initTimeTexts = function() {
+ 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;
@@ -140,11 +125,17 @@
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;
//Check if total height is higher than Max Cell Height
@@ -177,9 +168,11 @@
"color": colorsDef.colors[category]
};
}
- cell.categories['default'] = {
- "count": 0,
- "color": colorsDef.defaultColor
+ if (typeof(cell.categories['default']) === 'undefined'){
+ cell.categories['default'] = {
+ "count": 0,
+ "color": colorsDef.defaultColor
+ }
}
}
@@ -188,25 +181,11 @@
_this.addAnnot(data);
});
- this.initTimeTexts();
+ if (this.showClockGraphics){this.initClockGraphics();}
};
- this.updateTime = function(){
- currentTime = Date.now() + 3600*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() {
--- a/client/annotviz/app/js/annotsvizview.js Thu Jan 22 16:16:54 2015 +0100
+++ b/client/annotviz/app/js/annotsvizview.js Thu Jan 22 23:58:11 2015 +0100
@@ -18,24 +18,7 @@
xInit: 0,
yInit: 0,
width: 1024,
- height: 768,
-// annotCategories: [
-// {
-// "ts": 1421928213000,
-// "colors": {
-// "transgressions": "#b90000",
-// "rythmique": "#af931e",
-// "narration": "#4bdd71",
-// "relation": "#1c28ba"
-// },
-// "order": [
-// "transgressions",
-// "rythmique",
-// "narration",
-// "relation"
-// ],
-// "defaultColor": "#536991"
-// }]
+ height: 768
};
function AnnotsVizView(options){
@@ -50,16 +33,16 @@
this.timeBegin = opts.timeBegin;
this.timeEnd = opts.timeEnd;
- this.annotCategories = [];
Utils.getAnnotCategories(opts.urlCategories, this.annotCategories);
var wsPianoroll = opts.wsPianoroll;
var wsAnnot = opts.wsAnnot;
var stageView = opts.stageView;
+ var currentTime = Date.now() + 3600*1000;
stageView.registerComponent(this);
- var timeLine = new AnnotsTimeLine.AnnotsTimeLine({
+ var timeLineDay2 = new AnnotsTimeLine.AnnotsTimeLine({
stageView : stageView,
logger: logger,
ws: new annotviz.WsWrapper(wsUriAnnotation, logger),
@@ -75,7 +58,39 @@
radius: 200,
annotCategories: this.annotCategories
});
+
+
+ var timeLineDay1 = new AnnotsTimeLine.AnnotsTimeLine({
+ stageView : stageView,
+ logger: logger,
+ ws: new annotviz.WsWrapper(wsUriAnnotation, logger),
+ xInit: 0,
+ yInit: 0,
+ width: 1024 - 200 - 200,
+ height: 768-200,
+ timeBegin: this.timeBegin,
+ timeEnd: this.timeEnd,
+ circleX: timeLineDay2.circleX,
+ circleY: timeLineDay2.circleY,
+ intervalWidth: (timeLineDay2.radius*2/3)* timeLineDay2.intervalWidth / timeLineDay2.radius,
+ intervalHeight: (timeLineDay2.intervalHeight * (timeLineDay2.radius - timeLineDay2.radius*2/3))/ timeLineDay2.maxCellHeight,
+ maxCellHeight: (timeLineDay2.radius - timeLineDay2.radius*2/3)/4,
+ radius: timeLineDay2.radius*2/3,
+ annotCategories: this.annotCategories,
+ showClockGraphics:false
+ });
+
+ var currentTimeText = new PIXI.Text("-- : -- : --", { font: '18pt Gothic Standard', fill: '#646464' });
+ currentTimeText.x = timeLineDay2.circleX - currentTimeText.width/2;
+ currentTimeText.y = timeLineDay2.circleY - currentTimeText.height/2;
+ this.container.addChild(currentTimeText);
+ var timeLineDay3 = new PIXI.Graphics();
+ timeLineDay3.lineStyle(1, 0x646464)
+ .drawCircle(timeLineDay2.circleX, timeLineDay2.circleY, timeLineDay2.radius/3)
+ .endFill()
+ this.container.addChild(timeLineDay3);
+
var doubleRollH = new DoubleRoll.DoubleRoll({
stageView : stageView,
logger: logger,
@@ -140,10 +155,24 @@
// var doubleRollV = new DoubleRoll.DoubleRoll({});
this.init = function(){
+ };
- }
+ this.updateTime = function(){
+ currentTime = Date.now() + 3600*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() {