Add getAnnotCategories to utils and propagate the modification to annotsvizview and annotstimeline
--- a/client/annotviz/app/annotsvizview.html Thu Jan 22 15:02:54 2015 +0100
+++ b/client/annotviz/app/annotsvizview.html Thu Jan 22 15:03:58 2015 +0100
@@ -23,7 +23,6 @@
<script>
var PIXI = require('pixi');
- var annotCategories = [];
function colorToHex(input) {
if (input.substring(0, 1) === '#') {
@@ -36,44 +35,12 @@
}
}
- function getAnnotCategories(ecode, serverUrl) {
-
- var url = serverUrl+"/p/api/v1/event/" + ecode;
-
- var jsonLoader = new PIXI.JsonLoader(url, true);
- jsonLoader.on('loaded', function(res) {
- var data = res.target.json;
-
- while(annotCategories.length > 0) {
- annotCategories.pop();
- }
-
- data.sessions.forEach(function(session) {
- var annotCat = {
- ts: session.start_ts === null ? new Date(0) : Date.parse(session.start_ts),
- colors: {}
- }
- var categoriesJson = session.categories_json;
- annotCat.order = categoriesJson.order;
- categoriesJson.categories.forEach(function(cat) {
- annotCat.colors[cat.code] = colorToHex(cat.color);
- });
- annotCat.defaultColor = categoriesJson.defaultColor || "#536991";
- annotCategories.push(annotCat);
- });
- console.log(annotCategories);
- });
-
- jsonLoader.load();
- }
-
-
-
var pianorollChannel = 'PIANOROLL';
var annotationChannel = 'ANNOT';
- var eventCode = 'test_1';
- getAnnotCategories(eventCode, "http://127.0.0.1:8080");
+ var eventCode = 'atelier2';
+ var serverUrl = "http://172.16.0.20:8080";
var wsUri;
+
if (window.location.protocol === 'file:') {
wsUri = 'ws://172.16.0.20:8090/broadcast';
}
@@ -91,6 +58,7 @@
var annotsvizview = new annotviz.AnnotsVizView({
+ urlCategories: serverUrl + "/p/api/v1/event/" + eventCode,
logger: logger,
stageView: stageView,
wsPianoroll: new annotviz.WsWrapper(wsUriPianoroll, logger),
--- a/client/annotviz/app/js/annotstimeline.js Thu Jan 22 15:02:54 2015 +0100
+++ b/client/annotviz/app/js/annotstimeline.js Thu Jan 22 15:03:58 2015 +0100
@@ -39,7 +39,7 @@
this.intervalWidth = opts.intervalWidth;
this.maxCellHeight = opts.maxCellHeight;
this.annotCategories = opts.annotCategories;
-
+
this.circleX = opts.circleX || (this.width/2);
this.circleY = opts.circleY || (this.height/2);
this.radius = opts.radius;
@@ -55,13 +55,6 @@
this.cells[i].i = i;
this.cells[i].totalAnnots = 0;
this.cells[i].categories = {};
-
- for (var category in this.annotCategories[0].colors){
- this.cells[i].categories[category] = {
- "count": 0,
- "color": this.annotCategories[0].colors[category]
- };
- }
}
var ws = opts.ws;
@@ -91,34 +84,26 @@
//Add Annotation to the TimeLine
this.addAnnot = function(data){
- if (typeof(this.annotCategories[0].colors[data.content.category.code]) !== 'undefined'){
- var annotCode = data.content.category.code;
- } else {
- var annotCode = this.annotCategories[0].order[this.annotCategories[0].order.length -1];
- }
- var annotTime = Date.parse(data.ts);
+
+ 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 > Date.parse(data.ts)){
- console.log(this.timeBegin);
- console.log(data.ts);
- console.log(Date.parse(data.ts));
- console.log(Date.now());
- var i = Math.floor(((Date.parse(data.ts) + 3600*1000) - this.timeBegin)/(1000*this.intervalDuration));
- console.log(i);
+ if (typeof(this.cells[i].graphics) === 'undefined'){
+ this.initCell(this.cells[i]);
+ }
+
+ if (typeof(this.annotCategories[0].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], i);
}
};
- this.initCell = function(cell){
- 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);
- }
-
this.initTimeTexts = function() {
var tBeg = new PIXI.Text(Utils.formatTime(this.timeBegin), { font: '12pt Gothic Standard', fill: '#646464' });
tBeg.x = this.circleX + 15;
@@ -150,13 +135,7 @@
//Draw the cellule
this.redrawCell = function(cell){
-
- if (typeof(cell.graphics) === 'undefined'){
- this.initCell(cell);
- } else {
- cell.graphics.clear();
- }
-
+
var y = 0;
//Check if total height is higher than Max Cell Height
@@ -175,6 +154,25 @@
y -= cell.categories[currentCode].count*heightStep;
}
}
+
+ this.initCell = function(cell){
+ 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 this.annotCategories[0].colors){
+ cell.categories[category] = {
+ "count": 0,
+ "color": this.annotCategories[0].colors[category]
+ };
+ }
+ cell.categories['default'] = {
+ "count": 0,
+ "color": this.annotCategories[0].defaultColor
+ }
+ }
this.init = function() {
ws.message(function(data) {
--- a/client/annotviz/app/js/annotsvizview.js Thu Jan 22 15:02:54 2015 +0100
+++ b/client/annotviz/app/js/annotsvizview.js Thu Jan 22 15:03:58 2015 +0100
@@ -12,29 +12,30 @@
var DoubleRoll = require('./doubleroll.js');
var AnnotsTimeLine = require('./annotstimeline.js');
var AnnotsRoll = require('./annotsroll.js');
+var Utils = require('./utils.js');
var defaultOptions = {
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"
- }]
+// annotCategories: [
+// {
+// "ts": 1421928213000,
+// "colors": {
+// "transgressions": "#b90000",
+// "rythmique": "#af931e",
+// "narration": "#4bdd71",
+// "relation": "#1c28ba"
+// },
+// "order": [
+// "transgressions",
+// "rythmique",
+// "narration",
+// "relation"
+// ],
+// "defaultColor": "#536991"
+// }]
};
function AnnotsVizView(options){
@@ -46,10 +47,12 @@
this.container.y = opts.yInit;
this.width = opts.width;
this.height= opts.height;
- this.annotCategories = opts.annotCategories;
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;
--- a/client/annotviz/app/js/utils.js Thu Jan 22 15:02:54 2015 +0100
+++ b/client/annotviz/app/js/utils.js Thu Jan 22 15:03:58 2015 +0100
@@ -14,7 +14,39 @@
return ((hours < 10 ? '0' + hours : hours) + ':' + (minutes < 10 ? '0' + minutes : minutes) + ':' + (seconds < 10 ? '0' + seconds : seconds));
}
+function getAnnotCategories(urlCategories, annotCategories) {
+
+ var jsonLoader = new PIXI.JsonLoader(urlCategories, true);
+
+ jsonLoader.on('loaded', function(res) {
+ var data = res.target.json;
+
+ while(annotCategories.length > 0) {
+ annotCategories.pop();
+ }
+
+ data.sessions.forEach(function(session) {
+ var annotCat = {
+ ts: session.start_ts === null ? new Date(0) : Date.parse(session.start_ts),
+ colors: {}
+ }
+ var categoriesJson = session.categories_json;
+ annotCat.order = categoriesJson.order;
+ categoriesJson.categories.forEach(function(cat) {
+ annotCat.colors[cat.code] = colorToHex(cat.color);
+ });
+ annotCat.defaultColor = categoriesJson.defaultColor || "#536991";
+ annotCategories.push(annotCat);
+ });
+ console.log(annotCategories);
+ annotCategories[0].order.push("default");
+ });
+
+ jsonLoader.load();
+
+}
module.exports = {
- formatTime: formatTime
+ formatTime: formatTime,
+ getAnnotCategories: getAnnotCategories
};