--- a/client/annotviz/app/annotstimeline.html Thu Jan 22 16:16:54 2015 +0100
+++ b/client/annotviz/app/annotstimeline.html Fri Jan 23 00:02:20 2015 +0100
@@ -14,7 +14,7 @@
</head>
<body>
- <h1>Piano Roll vertical</h1>
+ <h1>annotation timeline</h1>
<noscript>You must enable JavaScript</noscript>
<div id="canvasContainer"></div>
<p>
@@ -26,6 +26,7 @@
<script src="/js/libs-annotviz.js"></script>
<script src="/js/annotviz.js"></script>
<script>
+
var annotationChannel = 'ANNOT';
var eventCode = 'test_1';
var wsUri;
@@ -38,11 +39,32 @@
wsUriAnnotation = wsUri + '?channel=' + annotationChannel + '&event_code=' + eventCode;
var logger = new annotviz.ConsoleLogger(true);
-
+
var stageView = new annotviz.StageView({
logger: logger
});
+ annotCategories = [{
+ ts: 0,
+ colors: {
+ 'ntm': '#CDC83F',
+ 'iam': '#CDC83F',
+ 'hip': '#CDC83F',
+ 'hop': '#CDC83F',
+ 'rock': '#DE8B53',
+ 'rap': '#DE8B53',
+ 'classic': '#DE8B53',
+ 'drums': '#C5A3CA',
+ 'guitar': '#C5A3CA',
+ 'bass': '#79BB92',
+ 'default': '#808080'
+ },
+ order: ['ntm', 'iam', 'hip', 'hop', 'rock', 'rap', 'classic', 'drums', 'guitar', 'bass', 'default']
+ }];
+
+ annotviz.getAnnotCategories("http://localhost:8080/p/api/v1/event/"+eventCode, annotCategories);
+ console.log("ANNOTS CAT",annotCategories);
+
var annotstimeline = new annotviz.AnnotsTimeLine({
stageView : stageView,
logger: logger,
@@ -51,31 +73,17 @@
yInit: 0,
width: 1024 - 435 - 300,
height: 768,
- timeBegin: Date.now(),
+ timeBegin: Date.now() - 300000,
timeEnd: Date.now() + 300000,
intervalWidth: 6,
intervalHeight: 10,
maxCellHeight: 100,
- radius: 400,
+ radius: 300,
circleX:500,
- circleY:500,
- annotCategories: [{
- ts: 0,
- colors: {
- 'ntm': '#CDC83F',
- 'iam': '#CDC83F',
- 'hip': '#CDC83F',
- 'hop': '#CDC83F',
- 'rock': '#DE8B53',
- 'rap': '#DE8B53',
- 'classic': '#DE8B53',
- 'drums': '#C5A3CA',
- 'guitar': '#C5A3CA',
- 'bass': '#79BB92',
- 'default': '#808080'
- },
- order: ['ntm', 'iam', 'hip', 'hop', 'rock', 'rap', 'classic', 'drums', 'guitar', 'bass', 'default']
- }]
+ circleY:450,
+ eventCode: eventCode,
+ channel: annotationChannel,
+ annotCategories: annotCategories
});
function stop() {
--- a/client/annotviz/app/js/annotstimeline.js Thu Jan 22 16:16:54 2015 +0100
+++ b/client/annotviz/app/js/annotstimeline.js Fri Jan 23 00:02:20 2015 +0100
@@ -16,7 +16,11 @@
intervalWidth: 10,
intervalHeight: 5,
maxCellHeight: 200,
- radius: 300
+ radius: 300,
+ serverUrl: 'http://127.0.0.1:8080',
+ channel: 'ANNOT',
+ maxPages: 1000,
+ //eventCode:
};
@@ -39,17 +43,23 @@
this.intervalWidth = opts.intervalWidth;
this.maxCellHeight = opts.maxCellHeight;
this.annotCategories = opts.annotCategories;
-
+
+ this.startTs = options.startTs || Date.now();
+
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 channel = opts.channel;
+ var eventCode = opts.eventCode;
+ var serverUrl = opts.serverUrl;
+ var maxPages = opts.maxPages;
+
var totalIndex = Math.floor(this.perimeter/this.intervalWidth);
- this.cells = []
+ this.cells = [];
for (var i=0; i<(this.perimeter/this.intervalWidth) ; i++){
this.cells[i] = [];
this.cells[i].i = i;
@@ -63,28 +73,72 @@
//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)
- .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()
+ .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' });
+ 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);
+ var loadArchives = function() {
+ //start timeBegin end startTime
+ //query -> need channel + eventCode
+ //iterate over data fill cells
+ var startTs = _this.timeBegin;
+ var endTs = _this.startTs;
+
+ var url = serverUrl + '/p/api/v1/annotation';
+ var filters = [
+ { name: 'ts', op: '>', val: new Date(startTs).toISOString()}, //start
+ { name: 'ts', op: '<=', val: new Date(endTs).toISOString()}, //end
+ { name: 'channel', op: '==', val: channel}, //channel
+ { name: 'event_code', op: '==', val: eventCode} //eventcode
+ ];
+
+ console.log(JSON.stringify({filters:filters}));
+
+ url = url + '?q=' + JSON.stringify({filters:filters});
+
+ var totalPage = 1;
+ var currentPage = 1;
+
+ var processResFunction = function(res) {
+
+ if(res) {
+ var data = res.target.json;
+ /*jshint -W069 */
+ totalPage = Math.min(maxPages,parseInt(data['total_pages']));
+ console.log('DATA', data);
+ data.objects.forEach(function(annotation) {
+ _this.addAnnot(annotation);
+ });
+ }
+ if(currentPage <= totalPage) {
+ var jsonLoader = new PIXI.JsonLoader(url+'&page='+currentPage, true);
+ jsonLoader.on('loaded', processResFunction);
+ jsonLoader.load();
+ currentPage++;
+ }
+ };
+ processResFunction();
+
+ };
+
//Add Annotation to the TimeLine
this.addAnnot = function(data){
-
+
var ts = Date.parse(data.ts);
var colorsDef;
_(this.annotCategories).eachRight(function(cdef) {
@@ -93,20 +147,20 @@
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);
}
-
+
if (typeof(colorsDef.colors[data.content.category.code]) !== 'undefined'){
var annotCode = data.content.category.code;
} else {
var annotCode = 'default';
}
-
+
this.cells[i].categories[annotCode].count += 1;
this.cells[i].totalAnnots +=1;
this.redrawCell(this.cells[i], colorsDef);
@@ -114,45 +168,46 @@
};
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 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 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, colorsDef){
-
+
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;
- }
+ //Check if total height is higher than Max Cell Height
+ var heightStep;
+ if ((cell.totalAnnots*this.intervalHeight) > this.maxCellHeight){
+ heightStep = this.maxCellHeight/cell.totalAnnots;
+ } else {
+ heightStep = this.intervalHeight;
+ }
//Draw the rect depending on the height step calculated
for (var i=0; i< colorsDef.order.length; i++){
@@ -163,14 +218,14 @@
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);
-
+
for (var category in colorsDef.colors){
cell.categories[category] = {
"count": 0,
@@ -184,15 +239,16 @@
}
this.init = function() {
- ws.message(function(data) {
+ ws.message(function(data) {
_this.addAnnot(data);
});
- this.initTimeTexts();
+ this.initTimeTexts();
};
+ //TODO use moment.js
this.updateTime = function(){
- currentTime = Date.now() + 3600*1000;
+ var currentTime = Date.now() + 3600*1000;
var nbSec = currentTime / 1000;
var hours = Math.floor( nbSec / 3600 ) % 24;
@@ -206,7 +262,9 @@
var refreshTimeInterval;
this.start = function() {
- refreshTimeInterval = setInterval(function() {_this.updateTime();}, 1000);
+ this.startTs = Date.now();
+ refreshTimeInterval = setInterval(function() {_this.updateTime();}, 1000);
+ loadArchives();
};
this.refresh = function() {
@@ -214,12 +272,12 @@
};
this.stop = function(){
- console.log(this.cells);
+ console.log(this.cells);
};
return this;
}
module.exports = {
- AnnotsTimeLine: AnnotsTimeLine
+ AnnotsTimeLine: AnnotsTimeLine
};
--- a/client/annotviz/app/js/utils.js Thu Jan 22 16:16:54 2015 +0100
+++ b/client/annotviz/app/js/utils.js Fri Jan 23 00:02:20 2015 +0100
@@ -7,6 +7,9 @@
'use strict';
+var PIXI = require('pixi');
+var _ = require('lodash');
+
function formatTime (ts) {
var hours = Math.floor( (ts/1000) / 3600 ) % 24;
var minutes = Math.floor( (ts/1000) / 60 ) % 60;
@@ -22,7 +25,7 @@
function getAnnotCategories(urlCategories, annotCategories) {
var jsonLoader = new PIXI.JsonLoader(urlCategories, true);
-
+
jsonLoader.on('loaded', function(res) {
var data = res.target.json;
@@ -37,8 +40,20 @@
}
var categoriesJson = session.categories_json;
annotCat.order = categoriesJson.order;
+ var catList = _.clone(categoriesJson.categories);
+ while(catList.length > 0) {
+ var cat = catList.pop();
+ if(cat.code) {
+ annotCat.colors[cat.code] = colorToHex(cat.color);
+ }
+ if(cat.subcategories) {
+ catList = catList.concat(cat.subcategories);
+ }
+ }
categoriesJson.categories.forEach(function(cat) {
- annotCat.colors[cat.code] = colorToHex(cat.color);
+ if(cat.code) {
+ annotCat.colors[cat.code] = colorToHex(cat.color);
+ }
});
annotCat.defaultColor = categoriesJson.defaultColor || "#536991";
annotCategories.push(annotCat);
@@ -46,9 +61,9 @@
console.log(annotCategories);
annotCategories[0].order.push("default");
});
-
+
jsonLoader.load();
-
+
}
module.exports = {