--- a/client/annotviz/app/annotstimeline.html Thu Jan 22 23:58:11 2015 +0100
+++ b/client/annotviz/app/annotstimeline.html Fri Jan 23 00:10:09 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 23:58:11 2015 +0100
+++ b/client/annotviz/app/js/annotstimeline.js Fri Jan 23 00:10:09 2015 +0100
@@ -17,6 +17,9 @@
intervalHeight: 5,
maxCellHeight: 200,
radius: 300,
+ serverUrl: 'http://127.0.0.1:8080',
+ channel: 'ANNOT',
+ maxPages: 1000,
showClockGraphics: true
};
@@ -40,6 +43,7 @@
this.intervalWidth = opts.intervalWidth;
this.maxCellHeight = opts.maxCellHeight;
this.annotCategories = opts.annotCategories;
+ this.startTs = options.startTs || Date.now();
this.showClockGraphics = opts.showClockGraphics;
this.circleX = opts.circleX || (this.width/2);
@@ -48,6 +52,11 @@
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 = []
@@ -70,8 +79,53 @@
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){
+ this.addAnnot = function(data){
+
var ts = Date.parse(data.ts);
var colorsDef;
_(this.annotCategories).eachRight(function(cdef) {
@@ -80,18 +134,20 @@
return false;
}
});
+
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);
@@ -138,12 +194,13 @@
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++){
@@ -154,14 +211,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,
@@ -177,7 +234,7 @@
}
this.init = function() {
- ws.message(function(data) {
+ ws.message(function(data) {
_this.addAnnot(data);
});
--- a/client/annotviz/app/js/utils.js Thu Jan 22 23:58:11 2015 +0100
+++ b/client/annotviz/app/js/utils.js Fri Jan 23 00:10:09 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 = {