# HG changeset patch # User ymh # Date 1421751464 -3600 # Node ID 72d767c5142df7fc6387215096321295fbaaa73d # Parent 545803e685e0c4cb0f507c4ec06515ade36887d8 refactor and make work annotsroll diff -r 545803e685e0 -r 72d767c5142d client/annotviz/app/annotsroll.html --- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/client/annotviz/app/annotsroll.html Tue Jan 20 11:57:44 2015 +0100 @@ -0,0 +1,186 @@ + + + + + + + + + + AnnotsRoll + + + + + + +

Piano Roll vertical

+ +

+ stop intervals - + start intervals - + temps écoulé : +

+ + + + + + diff -r 545803e685e0 -r 72d767c5142d client/annotviz/app/index.html --- a/client/annotviz/app/index.html Mon Jan 19 16:44:59 2015 +0100 +++ b/client/annotviz/app/index.html Tue Jan 20 11:57:44 2015 +0100 @@ -19,6 +19,7 @@

diff -r 545803e685e0 -r 72d767c5142d client/annotviz/app/js/annotsroll.js --- 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 - Piano Roll + Horizontal Piano Roll -

Piano Roll

Horizontal Piano Roll

@@ -26,11 +26,30 @@ diff -r 545803e685e0 -r 72d767c5142d client/annotviz/app/pianoroll_v.html --- a/client/annotviz/app/pianoroll_v.html Mon Jan 19 16:44:59 2015 +0100 +++ b/client/annotviz/app/pianoroll_v.html Tue Jan 20 11:57:44 2015 +0100 @@ -7,14 +7,14 @@ - Piano Roll Vertical + Vertical Piano Roll -

Piano Roll vertical

Vertical Piano Roll

@@ -26,12 +26,31 @@