--- a/client/annotviz/app/js/annotsroll.js Mon Jan 19 16:44:59 2015 +0100
+++ b/client/annotviz/app/js/annotsroll.js Tue Jan 20 11:57:44 2015 +0100
@@ -8,56 +8,162 @@
'use strict';
var PIXI = require('pixi');
-var randomColor = require('randomColor');
+var _ = require('lodash');
-function AnnotsRoll(parentContainer, xInit, yInit, width, height, widthRoll, pixelsPerSecond, annotColors, lineInterval){
+//
+//
+//
+// options = {
+// parentContainer:,
+// externalRefresh: true/false
+// ws:,
+// xInit:,
+// yInit:,
+// width:,
+// height:,
+// widthRoll:,
+// pixelsPerSecond:,
+// framerate:,
+// annotColors: [{ts: , colors: {code1 : '#dshdsj', code2: 'sdasd', 'default': 'dsadas'}}],
+// defaultColor: default,
+// annotStyles: {
+// 'label': {font:, fill:},
+// 'text':{font:, fill:},
+// 'user':{font:, fill:},
+// }
+// }
+var DEFAULT_ANNOT_COLOR = '#bababa';
+
+var defaultAnnotStyles = {
+ 'label': { font: '26pt Arial Bold', fill: '#65A954' },
+ 'text' : { font: '20pt Arial Regular', fill: '#444444' },
+ 'user' : { font: '22pt Arial regular', fill: '#444444' },
+};
+
+var defaultOptions = {
+ externalRefresh: false,
+ defaultColor: DEFAULT_ANNOT_COLOR,
+ annotStyles: defaultAnnotStyles
+};
+
+function AnnotsRoll(options) {
+
+//parentContainer, xInit, yInit, width, height, widthRoll, pixelsPerSecond, annotColors
var _this = this;
+ var opts = _(options).defaults(defaultOptions).value();
+
+
this.container = new PIXI.DisplayObjectContainer();
- this.container.position.x = xInit;
- this.container.position.y = yInit;
- this.container.width = width;
- parentContainer.addChild(this.container);
+ this.container.x = opts.xInit;
+ this.container.y = opts.yInit;
+ this.container.width = opts.width;
+ opts.parentContainer.addChild(this.container);
+
+ this.height = opts.height;
+ this.width = opts.width;
+ this.widthRoll = opts.widthRoll;
+ this.pixelsPerSecond = opts.pixelsPerSecond;
+ this.annotColors = opts.annotColors;
+ this.startTs = options.startTs || Date.now();
- this.height = height;
- this.width = width;
- this.widthRoll = widthRoll;
- this.pixelsPerSecond = pixelsPerSecond;
- this.lineInterval = lineInterval;
+ var yInit = opts.yInit;
+ var annotStyles = _(opts.annotStyles).defaults(defaultAnnotStyles).value();
+ var started = false;
+ var ws = opts.ws;
+ var externalRefresh = opts.externalRefresh;
+
+
+ var isHidden = function(child) {
+ // TODO: the origin point is an approximation. Should refine this
+ var globalPos = child.toGlobal(new PIXI.Point(0,0));
+ return ((globalPos.x + child.width) < 0) || ((globalPos.y + child.height) < 0) ;
+ };
+
+ this.addAnnots = function(data) {
+
+ //var title = data.content.category.label;
+ //var user = data.content.user;
+ //Test cat and color
+ //var colorAnnot = 0x65A954;
+ var category = data.content.category.label,
+ text = data.content.text,
+ user = data.content.user,
+ ts = Date.parse(data.ts),
+ color = this.getColor(ts, data.content.category.code);
+
+ this.addAnnot(category, text, user, color, ts);
+ };
- this.addAnnot = function(category, user, catColor){
- var graphics = new PIXI.Graphics();
- var color = catColor;
- var x = 0;
- var y = -this.container.y;
- graphics.beginFill(color);
- graphics.drawRect(x, y, 10, 3);
- graphics.endFill();
-
+ this.getColor = function(ts, code) {
+ var colorsDef;
+ _(this.annotColors).eachRight(function(cdef) {
+ console.log("cDef", cdef);
+ console.log("cDef ts", cdef.ts, ts);
+ if(cdef.ts < ts) {
+ colorsDef = cdef.colors;
+ return false;
+ }
+ });
+ var resColor;
+ console.log("colorsDef", colorsDef);
+ if(colorsDef) {
+ resColor = colorsDef[code];
+ }
+ if(!resColor) {
+ resColor = DEFAULT_ANNOT_COLOR;
+ }
+ return resColor;
+ }
+
+ this.addAnnot = function(category, text, user, catColor, ts){
+
+ var color = catColor ? catColor : DEFAULT_ANNOT_COLOR;
+ var x = 0;
+ var y = (ts-this.startTs) * this.pixelsPerSecond / 1000 + yInit;
+
+ var colorHex = parseInt(color.replace(/^#/, ''), 16);
+
+ var graphics = new PIXI.Graphics()
+ .beginFill(colorHex)
+ .drawRect(x, y, 10, 3)
+ .endFill();
+
this.container.addChild(graphics);
- var catText = new PIXI.Text(category, { font: '16pt Arial', fill: '#65A954' });
- catText.x = x + 20;
- catText.y = y - 23;
- this.container.addChild(catText);
-
- var userText = new PIXI.Text(user, { font: '10pt Arial', fill: '#444444' });
- userText.x = x + 20;
- userText.y = y + 2;
- this.container.addChild(userText);
-
- this.addAnnotLine(color)
+ var catLabel = new PIXI.Text(
+ category,
+ _(annotStyles.label).extend({fill: color}).value()
+ );
+ catLabel.x = x + 20;
+ catLabel.y = y - 23;
+ this.container.addChild(catLabel);
+
+ var textHeight = 0;
+ if(text) {
+ var catText = new PIXI.Text(text, annotStyles.text);
+ catText.x = x + 20;
+ catText.y = y + 2;
+ this.container.addChild(catText);
+ textHeight += (catText.height + 2);
+ }
+
+ var catUser = new PIXI.Text(user, annotStyles.user);
+ catUser.x = x + 20;
+ catUser.y = y + 2 + textHeight;
+ this.container.addChild(catUser);
+
+ this.addAnnotLine(colorHex, y);
};
- this.addAnnotLine = function(color){
- var x = this.widthRoll;
- var y = -this.container.y;
-
- var graphics = new PIXI.Graphics();
-
- graphics.beginFill(color);
- graphics.drawRect(x, y, this.width - x, 3);
- graphics.endFill();
-
+ this.addAnnotLine = function(color, y) {
+ var x = this.widthRoll;
+
+
+ var graphics = new PIXI.Graphics()
+ .beginFill(color)
+ .drawRect(x, y, this.width - x, 3)
+ .endFill();
+
this.container.addChild(graphics);
};
@@ -65,29 +171,51 @@
this.container.y = Math.floor(diffTime*this.pixelsPerSecond);
};
+ this.move = this.refresh = function() {
+ var diff = (this.startTs - Date.now())/1000;
+ this.moveTo(diff);
+ };
+
this.removePassedObjets = function(){
- var nbChilds = _this.container.children.length;
- var i = 0, childIsNowDisplayed = false, childrenToRemove = [];
- while(i<nbChilds && !childIsNowDisplayed){
- var child = _this.container.children[i++];
-
- if(typeof(child) == 'undefined') {
- continue;
- }
- if((child.y + child.height) < (Math.abs(_this.container.y) - _this.height)){
- childrenToRemove.push(child);
- }
- else {
- childIsNowDisplayed = true;
- }
- }
+ var childrenToRemove = [];
+ _(_this.container.children).forEach(function(child) {
+ return typeof(child) === 'undefined' ||
+ (isHidden(child) && childrenToRemove.push(child));
+ });
childrenToRemove.forEach(function(child) {
_this.container.removeChild(child);
});
};
- window.setInterval(this.removePassedObjets, 1000 * this.height / this.pixelsPerSecond );
+ this.init = function() {
+
+ ws.message(function(data) {
+ _this.addAnnots(data);
+ });
+
+ };
+
+
+ this.start = function() {
+ if(!started) {
+ this.startTs = Date.now();
+ started = true;
+ }
+ this.cleanInterval = setInterval(function () { _this.removePassedObjets(); }, 1000 * this.height / this.pixelsPerSecond );
+ if(!externalRefresh) {
+ this.refreshInterval = setInterval(function() {_this.move();}, 1000/this.framerate);
+ }
+ };
+
+ this.stop = function() {
+ clearInterval(this.cleanInterval);
+ if(!externalRefresh) {
+ clearInterval(this.refreshInterval);
+ }
+ };
}
-module.exports = AnnotsRoll;
+module.exports = {
+ AnnotsRoll: AnnotsRoll,
+};