author | rougeronj |
Tue, 20 Jan 2015 18:37:51 +0100 | |
changeset 100 | 0d7dac03c1a0 |
parent 99 | client/annotviz/app/js/generalView.js@9d968fbcaa2a |
parent 98 | client/annotviz/app/js/generalView.js@72d767c5142d |
child 102 | cc7b06bfd574 |
permissions | -rw-r--r-- |
91 | 1 |
/** |
100 | 2 |
* js/annotstimeline |
91 | 3 |
* |
100 | 4 |
* annotstimeline basic component |
91 | 5 |
* |
6 |
*/ |
|
7 |
||
8 |
'use strict'; |
|
9 |
||
10 |
var PIXI = require('pixi'); |
|
100 | 11 |
var _ = require('lodash'); |
99
9d968fbcaa2a
Add General Time Line + minor change in annotsRoll
rougeronj
parents:
92
diff
changeset
|
12 |
var rgb2hex = require('./utils'); |
97 | 13 |
|
100 | 14 |
var defaultOptions = { |
15 |
logger: undefined, |
|
16 |
intervalWidth: 10, |
|
17 |
intervalHeight: 5, |
|
18 |
maxCellHeight: 20, |
|
19 |
}; |
|
97 | 20 |
|
21 |
||
100 | 22 |
function AnnotsTimeLine(options){ |
91 | 23 |
var _this = this; |
100 | 24 |
var opts = _(options).defaults(defaultOptions).value(); |
91 | 25 |
|
100 | 26 |
this.container = new PIXI.DisplayObjectContainer(); |
27 |
this.container.x = opts.xInit; |
|
28 |
this.container.y = opts.yInit; |
|
29 |
this.container.width = opts.width; |
|
30 |
this.container.height = opts.height; |
|
91 | 31 |
|
100 | 32 |
this.timeBegin = opts.timeBegin; |
33 |
this.timeEnd = opts.timeEnd; |
|
34 |
this.duration = (this.timeEnd - this.timeBegin)/1000; |
|
35 |
this.width = opts.width; |
|
36 |
this.height = opts.height; |
|
37 |
this.intervalHeight = opts.intervalHeight; |
|
38 |
this.intervalWidth = opts.intervalWidth; |
|
39 |
this.maxCellHeight = opts.maxCellHeight; |
|
40 |
this.intervalDuration = (this.intervalWidth * this.duration / this.width); |
|
41 |
this.annotCategories = opts.annotCategories; |
|
99
9d968fbcaa2a
Add General Time Line + minor change in annotsRoll
rougeronj
parents:
92
diff
changeset
|
42 |
|
91 | 43 |
this.cells = [] |
100 | 44 |
for (var i=0; i<(this.width/this.intervalWidth) ; i++){ |
99
9d968fbcaa2a
Add General Time Line + minor change in annotsRoll
rougeronj
parents:
92
diff
changeset
|
45 |
this.cells[i] = []; |
9d968fbcaa2a
Add General Time Line + minor change in annotsRoll
rougeronj
parents:
92
diff
changeset
|
46 |
this.cells[i].x = i * this.intervalWidth; |
9d968fbcaa2a
Add General Time Line + minor change in annotsRoll
rougeronj
parents:
92
diff
changeset
|
47 |
this.cells[i].totalAnnots = 0; |
9d968fbcaa2a
Add General Time Line + minor change in annotsRoll
rougeronj
parents:
92
diff
changeset
|
48 |
this.cells[i].graphics = new PIXI.Graphics(); |
9d968fbcaa2a
Add General Time Line + minor change in annotsRoll
rougeronj
parents:
92
diff
changeset
|
49 |
this.container.addChild(this.cells[i].graphics); |
9d968fbcaa2a
Add General Time Line + minor change in annotsRoll
rougeronj
parents:
92
diff
changeset
|
50 |
this.cells[i].categories = {}; |
9d968fbcaa2a
Add General Time Line + minor change in annotsRoll
rougeronj
parents:
92
diff
changeset
|
51 |
|
100 | 52 |
for (var category in this.annotCategories[0].colors){ |
99
9d968fbcaa2a
Add General Time Line + minor change in annotsRoll
rougeronj
parents:
92
diff
changeset
|
53 |
this.cells[i].categories[category] = { |
9d968fbcaa2a
Add General Time Line + minor change in annotsRoll
rougeronj
parents:
92
diff
changeset
|
54 |
"count": 0, |
100 | 55 |
"color": this.annotCategories[0].colors[category] |
99
9d968fbcaa2a
Add General Time Line + minor change in annotsRoll
rougeronj
parents:
92
diff
changeset
|
56 |
}; |
9d968fbcaa2a
Add General Time Line + minor change in annotsRoll
rougeronj
parents:
92
diff
changeset
|
57 |
} |
9d968fbcaa2a
Add General Time Line + minor change in annotsRoll
rougeronj
parents:
92
diff
changeset
|
58 |
} |
100 | 59 |
|
60 |
var ws = opts.ws; |
|
61 |
var stageView = opts.stageView; |
|
91 | 62 |
// draw temp line to locate the middle of the container |
63 |
var graphics = new PIXI.Graphics(); |
|
99
9d968fbcaa2a
Add General Time Line + minor change in annotsRoll
rougeronj
parents:
92
diff
changeset
|
64 |
graphics.beginFill(0x000000) |
9d968fbcaa2a
Add General Time Line + minor change in annotsRoll
rougeronj
parents:
92
diff
changeset
|
65 |
.lineStyle(1, 0x000000) |
100 | 66 |
.moveTo(this.container.x, (this.height/2)) |
67 |
.lineTo(this.width, (this.height/2)) |
|
99
9d968fbcaa2a
Add General Time Line + minor change in annotsRoll
rougeronj
parents:
92
diff
changeset
|
68 |
.endFill(); |
91 | 69 |
this.container.addChild(graphics); |
100 | 70 |
|
71 |
stageView.registerComponent(this); |
|
97 | 72 |
|
99
9d968fbcaa2a
Add General Time Line + minor change in annotsRoll
rougeronj
parents:
92
diff
changeset
|
73 |
//Add Annotation to the TimeLine |
100 | 74 |
this.addAnnot = function(data){ |
75 |
if (typeof(this.annotCategories[0].colors[data.content.category.code]) !== 'undefined'){ |
|
76 |
var annotCode = data.content.category.code; |
|
77 |
} else { |
|
78 |
var annotCode = this.annotCategories[0].order[this.annotCategories[0].order.length -1]; |
|
99
9d968fbcaa2a
Add General Time Line + minor change in annotsRoll
rougeronj
parents:
92
diff
changeset
|
79 |
} |
100 | 80 |
var annotTime = Date.parse(data.ts); |
81 |
|
|
82 |
if (this.timeEnd > Date.parse(data.ts)){ |
|
83 |
var i = Math.floor((Date.parse(data.ts)-this.timeBegin)/(1000*this.intervalDuration)); |
|
84 |
this.cells[i].categories[annotCode].count += 1; |
|
85 |
this.cells[i].totalAnnots +=1; |
|
86 |
this.redrawCell(this.cells[i]); |
|
87 |
} |
|
99
9d968fbcaa2a
Add General Time Line + minor change in annotsRoll
rougeronj
parents:
92
diff
changeset
|
88 |
}; |
9d968fbcaa2a
Add General Time Line + minor change in annotsRoll
rougeronj
parents:
92
diff
changeset
|
89 |
|
9d968fbcaa2a
Add General Time Line + minor change in annotsRoll
rougeronj
parents:
92
diff
changeset
|
90 |
//Draw the cellule |
9d968fbcaa2a
Add General Time Line + minor change in annotsRoll
rougeronj
parents:
92
diff
changeset
|
91 |
this.redrawCell = function(cell){ |
9d968fbcaa2a
Add General Time Line + minor change in annotsRoll
rougeronj
parents:
92
diff
changeset
|
92 |
var x = cell.x; |
100 | 93 |
var y = this.height/2; |
99
9d968fbcaa2a
Add General Time Line + minor change in annotsRoll
rougeronj
parents:
92
diff
changeset
|
94 |
cell.graphics.clear(); |
91 | 95 |
|
99
9d968fbcaa2a
Add General Time Line + minor change in annotsRoll
rougeronj
parents:
92
diff
changeset
|
96 |
//Check if total height is higher than Max Cell Height |
9d968fbcaa2a
Add General Time Line + minor change in annotsRoll
rougeronj
parents:
92
diff
changeset
|
97 |
if ((cell.totalAnnots*this.intervalHeight) > this.maxCellHeight){ |
9d968fbcaa2a
Add General Time Line + minor change in annotsRoll
rougeronj
parents:
92
diff
changeset
|
98 |
var heightStep = this.maxCellHeight/cell.totalAnnots; |
9d968fbcaa2a
Add General Time Line + minor change in annotsRoll
rougeronj
parents:
92
diff
changeset
|
99 |
} else { |
9d968fbcaa2a
Add General Time Line + minor change in annotsRoll
rougeronj
parents:
92
diff
changeset
|
100 |
var heightStep = this.intervalHeight; |
9d968fbcaa2a
Add General Time Line + minor change in annotsRoll
rougeronj
parents:
92
diff
changeset
|
101 |
} |
9d968fbcaa2a
Add General Time Line + minor change in annotsRoll
rougeronj
parents:
92
diff
changeset
|
102 |
//Draw the rect depending on the height step calculated |
100 | 103 |
for (var i=0; i< this.annotCategories[0].order.length; i++){ |
104 |
var currentCode = this.annotCategories[0].order[i]; |
|
105 |
cell.graphics.beginFill(cell.categories[currentCode].color.replace("#", "0x")) |
|
106 |
.drawRect(x, y, this.intervalWidth, -cell.categories[currentCode].count * heightStep) |
|
99
9d968fbcaa2a
Add General Time Line + minor change in annotsRoll
rougeronj
parents:
92
diff
changeset
|
107 |
.endFill(); |
100 | 108 |
y -= cell.categories[currentCode].count*heightStep; |
99
9d968fbcaa2a
Add General Time Line + minor change in annotsRoll
rougeronj
parents:
92
diff
changeset
|
109 |
} |
9d968fbcaa2a
Add General Time Line + minor change in annotsRoll
rougeronj
parents:
92
diff
changeset
|
110 |
} |
100 | 111 |
|
112 |
this.init = function() { |
|
97 | 113 |
|
100 | 114 |
ws.message(function(data) { |
115 |
_this.addAnnot(data); |
|
116 |
}); |
|
97 | 117 |
|
100 | 118 |
}; |
119 |
|
|
120 |
this.start = function() { |
|
91 | 121 |
}; |
100 | 122 |
|
123 |
this.refresh = function() { |
|
124 |
}; |
|
125 |
|
|
126 |
this.stop = function(){ |
|
127 |
}; |
|
128 |
|
|
129 |
return this; |
|
91 | 130 |
} |
131 |
||
98 | 132 |
module.exports = { |
100 | 133 |
AnnotsTimeLine: AnnotsTimeLine |
98 | 134 |
}; |