--- a/client/annotviz/app/annotsvizview.html Fri Jan 23 00:41:35 2015 +0100
+++ b/client/annotviz/app/annotsvizview.html Fri Jan 23 01:00:00 2015 +0100
@@ -21,13 +21,11 @@
<script src="/js/libs-annotviz.js"></script>
<script src="/js/annotviz.js"></script>
<script>
-
- var PIXI = require('pixi');
-
+
var pianorollChannel = 'PIANOROLL';
var annotationChannel = 'ANNOT';
- var eventCode = 'atelier2';
- var serverUrl = "http://172.16.0.20:8080";
+ var eventCode = 'test_1';
+ var serverUrl = "http://localhost:8080";
var wsUri;
if (window.location.protocol === 'file:') {
@@ -45,15 +43,16 @@
logger: logger
});
-
var annotsvizview = new annotviz.AnnotsVizView({
urlCategories: serverUrl + "/p/api/v1/event/" + eventCode,
logger: logger,
stageView: stageView,
wsPianoroll: new annotviz.WsWrapper(wsUriPianoroll, logger),
wsAnnot: new annotviz.WsWrapper(wsUriAnnotation, logger),
- timeBegin: 1421919000000,
- timeEnd: 1421951400000
+ timeBegin: Date.parse("2015-01-23T09:30:00+01:00"),
+ timeEnd: Date.parse("2015-01-23T18:30:00+01:00"),
+ eventCode: eventCode,
+ channel: annotationChannel
});
--- a/client/annotviz/app/js/annotstimeline.js Fri Jan 23 00:41:35 2015 +0100
+++ b/client/annotviz/app/js/annotstimeline.js Fri Jan 23 01:00:00 2015 +0100
@@ -10,7 +10,6 @@
var PIXI = require('pixi');
var Utils = require('./utils.js');
var _ = require('lodash');
-var moment = require('moment');
var defaultOptions = {
logger: undefined,
@@ -21,7 +20,8 @@
serverUrl: 'http://127.0.0.1:8080',
channel: 'ANNOT',
maxPages: 1000,
- //eventCode:
+ showClockGraphics: true,
+ archive: false
};
@@ -44,24 +44,25 @@
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.archive = opts.archive;
+
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;
@@ -74,26 +75,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
@@ -108,8 +96,6 @@
{ name: 'event_code', op: '==', val: eventCode} //eventcode
];
- console.log(JSON.stringify({filters:filters}));
-
url = url + '?q=' + JSON.stringify({filters:filters});
var totalPage = 1;
@@ -121,7 +107,6 @@
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);
});
@@ -168,38 +153,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
@@ -233,33 +224,27 @@
"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
+ }
}
}
this.init = function() {
- ws.message(function(data) {
- _this.addAnnot(data);
- });
+ if (!this.archive){
+ ws.message(function(data) {
+ _this.addAnnot(data);
+ });
+ }
- this.initTimeTexts();
+ if (this.showClockGraphics){this.initClockGraphics();}
};
- //TODO use moment.js
- this.updateTime = function() {
-
- var timeStr = moment().format("HH:mm:ss");
-
- currentTimeText.setText(timeStr);
- };
-
- var refreshTimeInterval;
this.start = function() {
- this.startTs = Date.now();
- refreshTimeInterval = setInterval(function() {_this.updateTime();}, 1000);
+ this.startTs = Date.now();
loadArchives();
};
@@ -268,12 +253,11 @@
};
this.stop = function(){
- console.log(this.cells);
};
return this;
}
module.exports = {
- AnnotsTimeLine: AnnotsTimeLine
+ AnnotsTimeLine: AnnotsTimeLine
};
--- a/client/annotviz/app/js/annotsvizview.js Fri Jan 23 00:41:35 2015 +0100
+++ b/client/annotviz/app/js/annotsvizview.js Fri Jan 23 01:00:00 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){
@@ -49,17 +32,20 @@
this.height= opts.height;
this.timeBegin = opts.timeBegin;
this.timeEnd = opts.timeEnd;
+ this.annotCategories = [];
- 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;
+ var eventCode = opts.eventCode;
+ var channel = opts.channel;
stageView.registerComponent(this);
- var timeLine = new AnnotsTimeLine.AnnotsTimeLine({
+ var timeLineDay2 = new AnnotsTimeLine.AnnotsTimeLine({
stageView : stageView,
logger: logger,
ws: new annotviz.WsWrapper(wsUriAnnotation, logger),
@@ -73,9 +59,44 @@
intervalHeight: 10,
maxCellHeight: 70,
radius: 200,
+ eventCode: eventCode,
+ channel: channel,
annotCategories: this.annotCategories
});
+
+ //Archive day 1
+ var timeLineDay1 = new AnnotsTimeLine.AnnotsTimeLine({
+ stageView : stageView,
+ archive: true,
+ xInit: 0,
+ yInit: 0,
+ width: 1024 - 200 - 200,
+ height: 768-200,
+ timeBegin: Date.parse("2015-01-22T09:30:00+01:00"),
+ timeEnd: Date.parse("2015-01-22T18:30:00+01:00"),
+ 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,
+ eventCode: eventCode,
+ channel: channel,
+ 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,
@@ -137,13 +158,17 @@
.endFill();
this.container.addChild(limiters);
-// var doubleRollV = new DoubleRoll.DoubleRoll({});
-
this.init = function(){
+ };
- }
+ this.updateTime = function(){
+ currentTimeText.setText(Utils.formatTime(Date.now()));
+ };
+ var refreshTimeInterval;
+
this.start = function() {
+ refreshTimeInterval = setInterval(function() {_this.updateTime();}, 1000);
};
this.refresh = function() {
--- a/client/annotviz/app/js/utils.js Fri Jan 23 00:41:35 2015 +0100
+++ b/client/annotviz/app/js/utils.js Fri Jan 23 01:00:00 2015 +0100
@@ -38,6 +38,9 @@
}
var categoriesJson = session.categories_json;
annotCat.order = categoriesJson.order;
+ if (typeof(annotCat.order['default']) === 'undefined'){
+ annotCat.order.push('default');
+ }
var catList = _.clone(categoriesJson.categories);
while(catList.length > 0) {
var cat = catList.pop();
@@ -56,8 +59,6 @@
annotCat.defaultColor = categoriesJson.defaultColor || "#536991";
annotCategories.push(annotCat);
});
- console.log(annotCategories);
- annotCategories[0].order.push("default");
});
jsonLoader.load();