--- a/annot-server/webapp/templates/annotviz.html Fri Jan 23 01:08:34 2015 +0100
+++ b/annot-server/webapp/templates/annotviz.html Fri Jan 23 02:00:19 2015 +0100
@@ -18,63 +18,9 @@
<script src="{{ config['STATIC_URL'] }}/js/annotviz.min.js"></script>
<script>
- var PIXI = require('pixi');
- var annotCategories = [
- {
- "ts": 1421928213000,
- "colors": {
- "transgressions": "#b90000",
- "rythmique": "#af931e",
- "narration": "#4bdd71",
- "relation": "#1c28ba"
- },
- "order": [
- "transgressions",
- "rythmique",
- "narration",
- "relation"
- ],
- "defaultColor": "#536991"
- }
- ];
-
- 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] = annotviz.colorToHex(cat.color);
- });
- annotCat.defaultColor = categoriesJson.defaultColor || "#536991";
- annotCategories.push(annotCat);
- });
- console.log(JSON.stringify(annotCategories, null, ' '));
- });
-
- jsonLoader.load();
- }
-
-
-
var pianorollChannel = 'PIANOROLL';
var annotationChannel = 'ANNOT';
var eventCode = '{{event.code}}';
- getAnnotCategories(eventCode, 'http://' + window.location.hostname + ':8080');
var wsUri = 'ws://' + window.location.hostname + ':8090/broadcast';
wsUriPianoroll = wsUri + '?channel=' + pianorollChannel + '&event_code=' + eventCode;
@@ -88,13 +34,15 @@
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),
- annotCategories: annotCategories,
- 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/annotsvizview.html Fri Jan 23 01:08:34 2015 +0100
+++ b/client/annotviz/app/annotsvizview.html Fri Jan 23 02:00:19 2015 +0100
@@ -21,50 +21,50 @@
<script src="/js/libs-annotviz.js"></script>
<script src="/js/annotviz.js"></script>
<script>
-
- var pianorollChannel = 'PIANOROLL';
- var annotationChannel = 'ANNOT';
- var eventCode = 'test_1';
- var serverUrl = "http://localhost:8080";
- var wsUri;
-
- if (window.location.protocol === 'file:') {
- wsUri = 'ws://172.16.0.20:8090/broadcast';
- }
- else {
- wsUri = 'ws://' + window.location.hostname + ':8090/broadcast';
- }
- wsUriPianoroll = wsUri + '?channel=' + pianorollChannel + '&event_code=' + eventCode;
- wsUriAnnotation = wsUri + '?channel=' + annotationChannel + '&event_code=' + eventCode;
+
+ var pianorollChannel = 'PIANOROLL';
+ var annotationChannel = 'ANNOT';
+ var eventCode = 'test_1';
+ var serverUrl = "http://localhost:8080";
+ var wsUri;
- var logger = new annotviz.ConsoleLogger(true);
+ if (window.location.protocol === 'file:') {
+ wsUri = 'ws://172.16.0.20:8090/broadcast';
+ }
+ else {
+ wsUri = 'ws://' + window.location.hostname + ':8090/broadcast';
+ }
+ wsUriPianoroll = wsUri + '?channel=' + pianorollChannel + '&event_code=' + eventCode;
+ wsUriAnnotation = wsUri + '?channel=' + annotationChannel + '&event_code=' + eventCode;
- var stageView = new annotviz.StageView({
- logger: logger
- });
+ var logger = new annotviz.ConsoleLogger(true);
+
+ var stageView = new annotviz.StageView({
+ 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: Date.parse("2015-01-23T09:30:00+01:00"),
- timeEnd: Date.parse("2015-01-23T18:30:00+01:00"),
- eventCode: eventCode,
+ urlCategories: serverUrl + "/p/api/v1/event/" + eventCode,
+ logger: logger,
+ stageView: stageView,
+ wsPianoroll: new annotviz.WsWrapper(wsUriPianoroll, logger),
+ wsAnnot: new annotviz.WsWrapper(wsUriAnnotation, logger),
+ timeBegin: Date.parse("2015-01-23T09:30:00+01:00"),
+ timeEnd: Date.parse("2015-01-23T18:30:00+01:00"),
+ eventCode: eventCode,
channel: annotationChannel
});
function stop() {
- stageView.stop();
+ stageView.stop();
}
function start() {
- stageView.start();
+ stageView.start();
}
window.onload = function() {
- stageView.init();
+ stageView.init();
start();
}
</script>
--- a/client/annotviz/app/js/annotsroll.js Fri Jan 23 01:08:34 2015 +0100
+++ b/client/annotviz/app/js/annotsroll.js Fri Jan 23 02:00:19 2015 +0100
@@ -50,7 +50,7 @@
var marginX = 15;
for(var style in annotStyles) {
if (annotStyles[style].wordWrap === true){
- annotStyles[style].wordWrapWidth = this.widthRoll - marginX;
+ annotStyles[style].wordWrapWidth = this.widthRoll - marginX;
}
}
var started = false;
@@ -59,7 +59,7 @@
var stageView = opts.stageView;
var waitInterval;
var wait = 0;
-
+
stageView.registerComponent(this);
var isHidden = function(child) {
@@ -99,7 +99,7 @@
resColor = colorsDef.defaultColor || DEFAULT_ANNOT_COLOR;
}
return resColor;
- }
+ };
this.addAnnot = function(category, text, user, color, ts){
@@ -113,9 +113,9 @@
.beginFill(colorHex)
.drawRect(x, y, 10, 3)
.endFill();
-
+
this.container.addChild(graphics);
-
+
var textHeight = 0;
var catLabel = new PIXI.Text(
category,
@@ -125,7 +125,7 @@
catLabel.y = y - 23;
this.container.addChild(catLabel);
textHeight += (catLabel.height - 23 + 2);
-
+
if(text) {
var catText = new PIXI.Text(text, annotStyles.text);
catText.x = x + marginX;
@@ -133,13 +133,13 @@
this.container.addChild(catText);
textHeight += (catText.height + 2);
}
-
+
var catUser = new PIXI.Text(user, annotStyles.user);
catUser.x = x + marginX;
catUser.y = y + textHeight;
this.container.addChild(catUser);
textHeight += (catUser.height + 8);
-
+
if (this.ignoreAnnots === true){
wait = textHeight / this.pixelsPerSecond;
waitInterval = setInterval(function() {_this.refreshWait();}, 1000);
@@ -169,7 +169,7 @@
var diff = (this.startTs - Date.now())/1000;
this.moveTo(diff);
};
-
+
this.refreshWait = function(){
wait -= 1;
if (wait < 0){
@@ -196,7 +196,7 @@
});
};
-
+
this.start = function() {
if(!started) {
--- a/client/annotviz/app/js/annotstimeline.js Fri Jan 23 01:08:34 2015 +0100
+++ b/client/annotviz/app/js/annotstimeline.js Fri Jan 23 02:00:19 2015 +0100
@@ -44,29 +44,29 @@
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;
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 = []
+ this.cells = [];
for (var i=0; i<(perimeter/this.intervalWidth) ; i++){
- this.cells[i] = [];
- this.cells[i].i = i;
- this.cells[i].totalAnnots = 0;
- this.cells[i].categories = {};
+ this.cells[i] = [];
+ this.cells[i].i = i;
+ this.cells[i].totalAnnots = 0;
+ this.cells[i].categories = {};
}
var ws = opts.ws;
@@ -75,13 +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)
- .endFill()
+ .drawCircle(this.circleX, this.circleY, this.radius - 3)
+ .endFill();
this.container.addChild(graphics);
stageView.registerComponent(this);
- var loadArchives = function() {
+ var loadArchives = function() {
//start timeBegin end startTime
//query -> need channel + eventCode
//iterate over data fill cells
@@ -125,73 +125,74 @@
//Add Annotation to the TimeLine
this.addAnnot = function(data){
- var ts = Date.parse(data.ts);
- var colorsDef;
- _(this.annotCategories).eachRight(function(cdef) {
+ var ts = Date.parse(data.ts);
+ var colorsDef;
+ _(this.annotCategories).eachRight(function(cdef) {
if(cdef.ts < ts) {
colorsDef = cdef;
return false;
}
});
- if (this.timeEnd > ts){
- var i = Math.floor((ts - 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(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';
- }
+ var annotCode;
+ if (typeof(colorsDef.colors[data.content.category.code]) !== 'undefined'){
+ annotCode = data.content.category.code;
+ } else {
+ annotCode = 'default';
+ }
- this.cells[i].categories[annotCode].count += 1;
- this.cells[i].totalAnnots +=1;
- this.redrawCell(this.cells[i], colorsDef);
- }
+ this.cells[i].categories[annotCode].count += 1;
+ this.cells[i].totalAnnots +=1;
+ this.redrawCell(this.cells[i], colorsDef);
+ }
};
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 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 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);
- }
+ 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;
+ var y = 0;
//Check if total height is higher than Max Cell Height
var heightStep;
@@ -201,50 +202,50 @@
heightStep = this.intervalHeight;
}
- //Draw the rect depending on the height step calculated
- for (var i=0; i< colorsDef.order.length; i++){
- var currentCode = colorsDef.order[i];
- cell.graphics.beginFill(cell.categories[currentCode].color.replace("#", "0x"))
- .drawRect(0, y, this.intervalWidth-1, -cell.categories[currentCode].count * heightStep)
- .endFill();
- y -= cell.categories[currentCode].count*heightStep;
- }
- }
+ //Draw the rect depending on the height step calculated
+ for (var i=0; i< colorsDef.order.length; i++){
+ var currentCode = colorsDef.order[i];
+ cell.graphics.beginFill(cell.categories[currentCode].color.replace('#', '0x'))
+ .drawRect(0, y, this.intervalWidth-1, -cell.categories[currentCode].count * heightStep)
+ .endFill();
+ 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);
+ 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,
- "color": colorsDef.colors[category]
- };
- }
- if (typeof(cell.categories['default']) === 'undefined'){
- cell.categories['default'] = {
- "count": 0,
- "color": colorsDef.defaultColor
- }
- }
- }
+ for (var category in colorsDef.colors){
+ cell.categories[category] = {
+ 'count': 0,
+ 'color': colorsDef.colors[category]
+ };
+ }
+ if (typeof(cell.categories['default']) === 'undefined'){
+ cell.categories['default'] = {
+ 'count': 0,
+ 'color': colorsDef.defaultColor
+ };
+ }
+ };
this.init = function() {
- if (!this.archive){
- ws.message(function(data) {
- _this.addAnnot(data);
- });
- }
+ if (!this.archive){
+ ws.message(function(data) {
+ _this.addAnnot(data);
+ });
+ }
- if (this.showClockGraphics){this.initClockGraphics();}
+ if (this.showClockGraphics){this.initClockGraphics();}
};
this.start = function() {
- this.startTs = Date.now();
+ this.startTs = Date.now();
loadArchives();
};
@@ -259,5 +260,5 @@
}
module.exports = {
- AnnotsTimeLine: AnnotsTimeLine
+ AnnotsTimeLine: AnnotsTimeLine
};
--- a/client/annotviz/app/js/annotsvizview.js Fri Jan 23 01:08:34 2015 +0100
+++ b/client/annotviz/app/js/annotsvizview.js Fri Jan 23 02:00:19 2015 +0100
@@ -4,15 +4,16 @@
* This is the starting point for your application.
* Take a look at http://browserify.org/ for more info
*/
+/*jshint unused:false */
'use strict';
var PIXI = require('pixi');
var _ = require('lodash');
-var DoubleRoll = require('./doubleroll.js');
-var AnnotsTimeLine = require('./annotstimeline.js');
-var AnnotsRoll = require('./annotsroll.js');
-var Utils = require('./utils.js');
+var DoubleRoll = require('./doubleroll');
+var AnnotsTimeLine = require('./annotstimeline');
+var AnnotsRoll = require('./annotsroll');
+var Utils = require('./utils');
var defaultOptions = {
xInit: 0,
@@ -22,33 +23,33 @@
};
function AnnotsVizView(options){
- var _this = this;
+ var _this = this;
var opts = _(options).defaults(defaultOptions).value();
this.container = new PIXI.DisplayObjectContainer();
this.container.x = opts.xInit;
this.container.y = opts.yInit;
- this.width = opts.width;
- this.height= opts.height;
+ this.width = opts.width;
+ this.height= opts.height;
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;
- var eventCode = opts.eventCode;
+
+ var wsPianoroll = opts.wsPianoroll;
+ var wsAnnot = opts.wsAnnot;
+ var stageView = opts.stageView;
+ var eventCode = opts.eventCode;
var channel = opts.channel;
+ var logger = opts.logger;
- stageView.registerComponent(this);
+ stageView.registerComponent(this);
- var timeLineDay2 = new AnnotsTimeLine.AnnotsTimeLine({
- stageView : stageView,
+ var timeLineDay2 = new AnnotsTimeLine.AnnotsTimeLine({
+ stageView : stageView,
logger: logger,
- ws: new annotviz.WsWrapper(wsUriAnnotation, logger),
+ ws: wsAnnot,
xInit: 0,
yInit: 0,
width: 1024 - 200 - 200,
@@ -63,17 +64,18 @@
channel: channel,
annotCategories: this.annotCategories
});
-
+
//Archive day 1
+ /*jshint -W098 */
var timeLineDay1 = new AnnotsTimeLine.AnnotsTimeLine({
- stageView : stageView,
+ 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"),
+ 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,
@@ -85,21 +87,22 @@
channel: channel,
showClockGraphics:false
});
-
- var currentTimeText = new PIXI.Text("-- : -- : --", { font: '18pt Gothic Standard', fill: '#646464' });
+
+ 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()
+ .drawCircle(timeLineDay2.circleX, timeLineDay2.circleY, timeLineDay2.radius/3)
+ .endFill();
this.container.addChild(timeLineDay3);
-
- var doubleRollH = new DoubleRoll.DoubleRoll({
+
+ /*jshint -W098 */
+ var doubleRollH = new DoubleRoll.DoubleRoll({
stageView : stageView,
- logger: logger,
+ logger: logger,
ws: wsPianoroll,
yInit: (this.height - 200),
sceneHeight: 200,
@@ -113,9 +116,9 @@
]
});
- var doubleRollV = new DoubleRoll.DoubleRoll({
+ var doubleRollV = new DoubleRoll.DoubleRoll({
stageView : stageView,
- logger: logger,
+ logger: logger,
ws: wsPianoroll,
orientation: 'vertical',
sceneHeight: 768-200,
@@ -129,8 +132,8 @@
]
});
- var annotsRoll = new AnnotsRoll.AnnotsRoll({
- stageView : stageView,
+ var annotsRoll = new AnnotsRoll.AnnotsRoll({
+ stageView : stageView,
logger: logger,
ws: wsAnnot,
parentContainer: doubleRollV.stage,
@@ -144,31 +147,31 @@
annotColors: this.annotCategories
});
- var limiters = new PIXI.Graphics()
- .lineStyle(1, 0x646464)
- .moveTo(annotsRoll.container.x, annotsRoll.container.y)
- .lineTo(annotsRoll.container.x, annotsRoll.container.y - annotsRoll.height)
- .moveTo(annotsRoll.container.x + annotsRoll.widthRoll, annotsRoll.container.y)
- .lineTo(annotsRoll.container.x + annotsRoll.widthRoll, annotsRoll.container.y - annotsRoll.height)
- .moveTo(0, this.height - 200)
- .lineTo(this.width, this.height - 200)
- .drawRect(0, 0, this.width -1, this.height -1)
- .beginFill(0xECECEC)
- .drawRect(1024 - 200, 0, 200, 768-200)
- .endFill();
- this.container.addChild(limiters);
+ var limiters = new PIXI.Graphics()
+ .lineStyle(1, 0x646464)
+ .moveTo(annotsRoll.container.x, annotsRoll.container.y)
+ .lineTo(annotsRoll.container.x, annotsRoll.container.y - annotsRoll.height)
+ .moveTo(annotsRoll.container.x + annotsRoll.widthRoll, annotsRoll.container.y)
+ .lineTo(annotsRoll.container.x + annotsRoll.widthRoll, annotsRoll.container.y - annotsRoll.height)
+ .moveTo(0, this.height - 200)
+ .lineTo(this.width, this.height - 200)
+ .drawRect(0, 0, this.width -1, this.height -1)
+ .beginFill(0xECECEC)
+ .drawRect(1024 - 200, 0, 200, 768-200)
+ .endFill();
+ this.container.addChild(limiters);
- this.init = function(){
- };
+ this.init = function(){
+ };
- this.updateTime = function(){
+ this.updateTime = function(){
currentTimeText.setText(Utils.formatTime(Date.now()));
};
var refreshTimeInterval;
-
- this.start = function() {
- refreshTimeInterval = setInterval(function() {_this.updateTime();}, 1000);
+
+ this.start = function() {
+ refreshTimeInterval = setInterval(function() {_this.updateTime();}, 1000);
};
this.refresh = function() {
@@ -182,5 +185,5 @@
}
module.exports = {
- AnnotsVizView: AnnotsVizView
+ AnnotsVizView: AnnotsVizView
};
--- a/client/annotviz/app/js/doubleroll.js Fri Jan 23 01:08:34 2015 +0100
+++ b/client/annotviz/app/js/doubleroll.js Fri Jan 23 02:00:19 2015 +0100
@@ -5,14 +5,12 @@
* Take a look at http://browserify.org/ for more info
*/
-/* global document: false */
-
'use strict';
var PIXI = require('pixi');
var _ = require('lodash');
-var PianoRoll = require('./pianoroll.js');
+var PianoRoll = require('./pianoroll');
var defaultConfig = {
orientation: 'horizontal',
@@ -63,7 +61,6 @@
this.noteColors = opts.noteColors;
var noteHeight = opts.noteHeight;
- var sceneBgColor = opts.sceneBgColor;
var sceneHeight = opts.sceneHeight || _(opts.pianorolls).reduce(function(s,p) { return s + p.height; }, 0);
var timeWidth = opts.timeWidth;
var lineInterval = opts.lineInterval;
@@ -81,7 +78,7 @@
this.container = new PIXI.DisplayObjectContainer();
this.container.x = Math.floor(sceneWidth*zeroShift);
this.container.y = 0;
-
+
stageView.registerComponent(this);
var pianorollList = [];
@@ -166,7 +163,7 @@
};
this.stop = function() {
-
+
pianorollList.forEach(function(c) {
c.stop();
});
--- a/client/annotviz/app/js/logger.js Fri Jan 23 01:08:34 2015 +0100
+++ b/client/annotviz/app/js/logger.js Fri Jan 23 02:00:19 2015 +0100
@@ -35,7 +35,7 @@
if(doLog) {
console.log(msg);
}
- }
+ };
}
--- a/client/annotviz/app/js/stageview.js Fri Jan 23 01:08:34 2015 +0100
+++ b/client/annotviz/app/js/stageview.js Fri Jan 23 02:00:19 2015 +0100
@@ -37,13 +37,13 @@
var sceneHeight = opts.sceneHeight;
var canvasContainer = opts.canvasContainer;
var timeContainer = [];
- var components = [];
-
+ var components = [];
+
//create an new instance of a pixi stage
this.stage = new PIXI.Stage(sceneBgColor);
//create a renderer instance.
var renderer = PIXI.autoDetectRenderer(sceneWidth, sceneHeight);
-
+
this.init = function() {
if(typeof(canvasContainer) === 'string') {
@@ -54,16 +54,16 @@
}
canvasContainer.appendChild(renderer.view);
-
+
components.forEach(function(c){
c.init();
});
};
-
+
this.registerTimeContainer = function(container) {
timeContainer.push(container);
};
-
+
this.registerComponent = function(component) {
components.push(component);
this.stage.addChild(component.container);
@@ -84,7 +84,7 @@
if(!externalRefresh) {
refreshInterval = setInterval(function() {_this.refresh();}, 1000/this.framerate);
}
-
+
components.forEach(function(c){
c.start();
});
@@ -94,7 +94,6 @@
if(!externalRefresh) {
clearInterval(refreshInterval);
}
- clearInterval(refreshTimeInterval);
components.forEach(function(c){
c.stop();
--- a/client/annotviz/app/js/utils.js Fri Jan 23 01:08:34 2015 +0100
+++ b/client/annotviz/app/js/utils.js Fri Jan 23 02:00:19 2015 +0100
@@ -4,6 +4,8 @@
* basic tools
*
*/
+/*jshint bitwise: false*/
+/*jshint camelcase: false */
'use strict';
@@ -12,12 +14,12 @@
var moment = require('moment');
function formatTime (ts) {
- return moment(ts).format("HH:mm:ss");
+ return moment(ts).format('HH:mm:ss');
}
function colorToHex(c) {
- var m = /rgba?\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)/.exec(c);
- return m ? '#' + (1 << 24 | m[1] << 16 | m[2] << 8 | m[3]).toString(16).substr(1) : c;
+ var m = /rgba?\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)/.exec(c);
+ return m ? '#' + (1 << 24 | m[1] << 16 | m[2] << 8 | m[3]).toString(16).substr(1) : c;
}
function getAnnotCategories(urlCategories, annotCategories) {
@@ -28,35 +30,35 @@
var data = res.target.json;
while(annotCategories.length > 0) {
- annotCategories.pop();
+ 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;
if (typeof(annotCat.order['default']) === 'undefined'){
- annotCat.order.push('default');
+ annotCat.order.push('default');
}
- 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);
- }
- }
+ 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) {
- if(cat.code) {
- annotCat.colors[cat.code] = colorToHex(cat.color);
- }
+ if(cat.code) {
+ annotCat.colors[cat.code] = colorToHex(cat.color);
+ }
});
- annotCat.defaultColor = categoriesJson.defaultColor || "#536991";
+ annotCat.defaultColor = categoriesJson.defaultColor || '#536991';
annotCategories.push(annotCat);
});
});
@@ -66,7 +68,7 @@
}
module.exports = {
- formatTime: formatTime,
- getAnnotCategories: getAnnotCategories,
- colorToHex: colorToHex
+ formatTime: formatTime,
+ getAnnotCategories: getAnnotCategories,
+ colorToHex: colorToHex
};