# HG changeset patch # User rougeronj # Date 1421968209 -3600 # Node ID 0386fb9efe27b377a5a21af805da138f6f2ddc8d # Parent 13d9a532a0a7becd03989f4b9214ccd12da8213e# Parent b5697bcdbaffd1d52ea785e6276bc70422bf1286 Merge with b5697bcdbaffd1d52ea785e6276bc70422bf1286 diff -r b5697bcdbaff -r 0386fb9efe27 client/annotviz/app/js/annotstimeline.js --- a/client/annotviz/app/js/annotstimeline.js Fri Jan 23 00:02:20 2015 +0100 +++ b/client/annotviz/app/js/annotstimeline.js Fri Jan 23 00:10:09 2015 +0100 @@ -20,7 +20,7 @@ serverUrl: 'http://127.0.0.1:8080', channel: 'ANNOT', maxPages: 1000, - //eventCode: + showClockGraphics: true }; @@ -43,24 +43,24 @@ 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.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 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(this.perimeter/this.intervalWidth); + + var totalIndex = Math.floor( perimeter/this.intervalWidth); - this.cells = []; - for (var i=0; i<(this.perimeter/this.intervalWidth) ; i++){ + this.cells = [] + for (var i=0; i<(perimeter/this.intervalWidth) ; i++){ this.cells[i] = []; this.cells[i].i = i; this.cells[i].totalAnnots = 0; @@ -73,26 +73,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) - .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) + .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); - var loadArchives = function() { + var loadArchives = function() { //start timeBegin end startTime //query -> need channel + eventCode //iterate over data fill cells @@ -167,38 +154,44 @@ } }; - 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); + 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 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); + + 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 @@ -232,9 +225,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 + } } } @@ -243,28 +238,11 @@ _this.addAnnot(data); }); - this.initTimeTexts(); + if (this.showClockGraphics){this.initClockGraphics();} }; - //TODO use moment.js - this.updateTime = function(){ - var 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() { - this.startTs = Date.now(); - refreshTimeInterval = setInterval(function() {_this.updateTime();}, 1000); - loadArchives(); }; this.refresh = function() { @@ -272,12 +250,12 @@ }; this.stop = function(){ - console.log(this.cells); + console.log(this.cells); }; return this; } module.exports = { - AnnotsTimeLine: AnnotsTimeLine + AnnotsTimeLine: AnnotsTimeLine }; diff -r b5697bcdbaff -r 0386fb9efe27 client/annotviz/app/js/annotsvizview.js --- a/client/annotviz/app/js/annotsvizview.js Fri Jan 23 00:02:20 2015 +0100 +++ b/client/annotviz/app/js/annotsvizview.js Fri Jan 23 00:10:09 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() {