diff -r d8ef840eaf68 -r b5697bcdbaff client/annotviz/app/js/annotstimeline.js --- 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 };