author | rougeronj |
Wed, 21 Jan 2015 20:16:31 +0100 | |
changeset 103 | 123a611c7903 |
parent 100 | 0d7dac03c1a0 |
child 105 | 25ac8802c189 |
permissions | -rw-r--r-- |
89
b4bd49f01837
add annotsRoll class and create it in main. Adapt main and pianoroll to allow horizontal or vertical view
rougeronj
parents:
diff
changeset
|
1 |
/** |
b4bd49f01837
add annotsRoll class and create it in main. Adapt main and pianoroll to allow horizontal or vertical view
rougeronj
parents:
diff
changeset
|
2 |
* js/annotsRoll.js |
b4bd49f01837
add annotsRoll class and create it in main. Adapt main and pianoroll to allow horizontal or vertical view
rougeronj
parents:
diff
changeset
|
3 |
* |
b4bd49f01837
add annotsRoll class and create it in main. Adapt main and pianoroll to allow horizontal or vertical view
rougeronj
parents:
diff
changeset
|
4 |
* annotsRoll basic component |
b4bd49f01837
add annotsRoll class and create it in main. Adapt main and pianoroll to allow horizontal or vertical view
rougeronj
parents:
diff
changeset
|
5 |
* |
b4bd49f01837
add annotsRoll class and create it in main. Adapt main and pianoroll to allow horizontal or vertical view
rougeronj
parents:
diff
changeset
|
6 |
*/ |
b4bd49f01837
add annotsRoll class and create it in main. Adapt main and pianoroll to allow horizontal or vertical view
rougeronj
parents:
diff
changeset
|
7 |
|
b4bd49f01837
add annotsRoll class and create it in main. Adapt main and pianoroll to allow horizontal or vertical view
rougeronj
parents:
diff
changeset
|
8 |
'use strict'; |
b4bd49f01837
add annotsRoll class and create it in main. Adapt main and pianoroll to allow horizontal or vertical view
rougeronj
parents:
diff
changeset
|
9 |
|
b4bd49f01837
add annotsRoll class and create it in main. Adapt main and pianoroll to allow horizontal or vertical view
rougeronj
parents:
diff
changeset
|
10 |
var PIXI = require('pixi'); |
98 | 11 |
var _ = require('lodash'); |
89
b4bd49f01837
add annotsRoll class and create it in main. Adapt main and pianoroll to allow horizontal or vertical view
rougeronj
parents:
diff
changeset
|
12 |
|
98 | 13 |
var DEFAULT_ANNOT_COLOR = '#bababa'; |
14 |
||
15 |
var defaultAnnotStyles = { |
|
103 | 16 |
'label': { font: '20pt Arial Bold', fill: '#65A954' }, |
17 |
'text' : { font: '14pt Arial Regular', fill: '#444444' }, |
|
18 |
'user' : { font: '16pt Arial regular', fill: '#666666' }, |
|
98 | 19 |
}; |
20 |
||
21 |
var defaultOptions = { |
|
22 |
externalRefresh: false, |
|
23 |
defaultColor: DEFAULT_ANNOT_COLOR, |
|
24 |
annotStyles: defaultAnnotStyles |
|
25 |
}; |
|
26 |
||
27 |
function AnnotsRoll(options) { |
|
28 |
||
29 |
//parentContainer, xInit, yInit, width, height, widthRoll, pixelsPerSecond, annotColors |
|
89
b4bd49f01837
add annotsRoll class and create it in main. Adapt main and pianoroll to allow horizontal or vertical view
rougeronj
parents:
diff
changeset
|
30 |
var _this = this; |
98 | 31 |
var opts = _(options).defaults(defaultOptions).value(); |
32 |
||
33 |
||
89
b4bd49f01837
add annotsRoll class and create it in main. Adapt main and pianoroll to allow horizontal or vertical view
rougeronj
parents:
diff
changeset
|
34 |
this.container = new PIXI.DisplayObjectContainer(); |
98 | 35 |
this.container.x = opts.xInit; |
36 |
this.container.y = opts.yInit; |
|
37 |
this.container.width = opts.width; |
|
38 |
||
39 |
this.height = opts.height; |
|
40 |
this.width = opts.width; |
|
41 |
this.widthRoll = opts.widthRoll; |
|
42 |
this.pixelsPerSecond = opts.pixelsPerSecond; |
|
43 |
this.annotColors = opts.annotColors; |
|
44 |
this.startTs = options.startTs || Date.now(); |
|
89
b4bd49f01837
add annotsRoll class and create it in main. Adapt main and pianoroll to allow horizontal or vertical view
rougeronj
parents:
diff
changeset
|
45 |
|
98 | 46 |
var yInit = opts.yInit; |
47 |
var annotStyles = _(opts.annotStyles).defaults(defaultAnnotStyles).value(); |
|
48 |
var started = false; |
|
49 |
var ws = opts.ws; |
|
50 |
var externalRefresh = opts.externalRefresh; |
|
100 | 51 |
var stageView = opts.stageView; |
52 |
|
|
53 |
stageView.registerComponent(this); |
|
98 | 54 |
|
55 |
var isHidden = function(child) { |
|
56 |
// TODO: the origin point is an approximation. Should refine this |
|
57 |
var globalPos = child.toGlobal(new PIXI.Point(0,0)); |
|
58 |
return ((globalPos.x + child.width) < 0) || ((globalPos.y + child.height) < 0) ; |
|
59 |
}; |
|
60 |
||
61 |
this.addAnnots = function(data) { |
|
62 |
||
63 |
//var title = data.content.category.label; |
|
64 |
//var user = data.content.user; |
|
65 |
//Test cat and color |
|
66 |
//var colorAnnot = 0x65A954; |
|
67 |
var category = data.content.category.label, |
|
68 |
text = data.content.text, |
|
69 |
user = data.content.user, |
|
70 |
ts = Date.parse(data.ts), |
|
71 |
color = this.getColor(ts, data.content.category.code); |
|
72 |
||
73 |
this.addAnnot(category, text, user, color, ts); |
|
74 |
}; |
|
89
b4bd49f01837
add annotsRoll class and create it in main. Adapt main and pianoroll to allow horizontal or vertical view
rougeronj
parents:
diff
changeset
|
75 |
|
98 | 76 |
this.getColor = function(ts, code) { |
77 |
var colorsDef; |
|
78 |
_(this.annotColors).eachRight(function(cdef) { |
|
79 |
console.log("cDef", cdef); |
|
80 |
console.log("cDef ts", cdef.ts, ts); |
|
81 |
if(cdef.ts < ts) { |
|
82 |
colorsDef = cdef.colors; |
|
83 |
return false; |
|
84 |
} |
|
85 |
}); |
|
86 |
var resColor; |
|
87 |
console.log("colorsDef", colorsDef); |
|
88 |
if(colorsDef) { |
|
89 |
resColor = colorsDef[code]; |
|
90 |
} |
|
91 |
if(!resColor) { |
|
92 |
resColor = DEFAULT_ANNOT_COLOR; |
|
93 |
} |
|
94 |
return resColor; |
|
95 |
} |
|
96 |
||
97 |
this.addAnnot = function(category, text, user, catColor, ts){ |
|
98 |
||
99 |
var color = catColor ? catColor : DEFAULT_ANNOT_COLOR; |
|
100 |
var x = 0; |
|
101 |
var y = (ts-this.startTs) * this.pixelsPerSecond / 1000 + yInit; |
|
102 |
||
103 |
var colorHex = parseInt(color.replace(/^#/, ''), 16); |
|
104 |
||
105 |
var graphics = new PIXI.Graphics() |
|
106 |
.beginFill(colorHex) |
|
107 |
.drawRect(x, y, 10, 3) |
|
108 |
.endFill(); |
|
109 |
||
89
b4bd49f01837
add annotsRoll class and create it in main. Adapt main and pianoroll to allow horizontal or vertical view
rougeronj
parents:
diff
changeset
|
110 |
this.container.addChild(graphics); |
b4bd49f01837
add annotsRoll class and create it in main. Adapt main and pianoroll to allow horizontal or vertical view
rougeronj
parents:
diff
changeset
|
111 |
|
98 | 112 |
var catLabel = new PIXI.Text( |
113 |
category, |
|
114 |
_(annotStyles.label).extend({fill: color}).value() |
|
115 |
); |
|
116 |
catLabel.x = x + 20; |
|
117 |
catLabel.y = y - 23; |
|
118 |
this.container.addChild(catLabel); |
|
119 |
||
120 |
var textHeight = 0; |
|
121 |
if(text) { |
|
122 |
var catText = new PIXI.Text(text, annotStyles.text); |
|
123 |
catText.x = x + 20; |
|
124 |
catText.y = y + 2; |
|
125 |
this.container.addChild(catText); |
|
126 |
textHeight += (catText.height + 2); |
|
127 |
} |
|
128 |
||
129 |
var catUser = new PIXI.Text(user, annotStyles.user); |
|
130 |
catUser.x = x + 20; |
|
131 |
catUser.y = y + 2 + textHeight; |
|
132 |
this.container.addChild(catUser); |
|
133 |
||
134 |
this.addAnnotLine(colorHex, y); |
|
89
b4bd49f01837
add annotsRoll class and create it in main. Adapt main and pianoroll to allow horizontal or vertical view
rougeronj
parents:
diff
changeset
|
135 |
}; |
b4bd49f01837
add annotsRoll class and create it in main. Adapt main and pianoroll to allow horizontal or vertical view
rougeronj
parents:
diff
changeset
|
136 |
|
98 | 137 |
this.addAnnotLine = function(color, y) { |
138 |
var x = this.widthRoll; |
|
139 |
||
140 |
||
141 |
var graphics = new PIXI.Graphics() |
|
142 |
.beginFill(color) |
|
143 |
.drawRect(x, y, this.width - x, 3) |
|
144 |
.endFill(); |
|
145 |
||
89
b4bd49f01837
add annotsRoll class and create it in main. Adapt main and pianoroll to allow horizontal or vertical view
rougeronj
parents:
diff
changeset
|
146 |
this.container.addChild(graphics); |
b4bd49f01837
add annotsRoll class and create it in main. Adapt main and pianoroll to allow horizontal or vertical view
rougeronj
parents:
diff
changeset
|
147 |
}; |
b4bd49f01837
add annotsRoll class and create it in main. Adapt main and pianoroll to allow horizontal or vertical view
rougeronj
parents:
diff
changeset
|
148 |
|
b4bd49f01837
add annotsRoll class and create it in main. Adapt main and pianoroll to allow horizontal or vertical view
rougeronj
parents:
diff
changeset
|
149 |
this.moveTo = function(diffTime){ |
b4bd49f01837
add annotsRoll class and create it in main. Adapt main and pianoroll to allow horizontal or vertical view
rougeronj
parents:
diff
changeset
|
150 |
this.container.y = Math.floor(diffTime*this.pixelsPerSecond); |
b4bd49f01837
add annotsRoll class and create it in main. Adapt main and pianoroll to allow horizontal or vertical view
rougeronj
parents:
diff
changeset
|
151 |
}; |
b4bd49f01837
add annotsRoll class and create it in main. Adapt main and pianoroll to allow horizontal or vertical view
rougeronj
parents:
diff
changeset
|
152 |
|
98 | 153 |
this.move = this.refresh = function() { |
154 |
var diff = (this.startTs - Date.now())/1000; |
|
155 |
this.moveTo(diff); |
|
156 |
}; |
|
157 |
||
89
b4bd49f01837
add annotsRoll class and create it in main. Adapt main and pianoroll to allow horizontal or vertical view
rougeronj
parents:
diff
changeset
|
158 |
this.removePassedObjets = function(){ |
98 | 159 |
var childrenToRemove = []; |
160 |
_(_this.container.children).forEach(function(child) { |
|
161 |
return typeof(child) === 'undefined' || |
|
162 |
(isHidden(child) && childrenToRemove.push(child)); |
|
163 |
}); |
|
89
b4bd49f01837
add annotsRoll class and create it in main. Adapt main and pianoroll to allow horizontal or vertical view
rougeronj
parents:
diff
changeset
|
164 |
childrenToRemove.forEach(function(child) { |
b4bd49f01837
add annotsRoll class and create it in main. Adapt main and pianoroll to allow horizontal or vertical view
rougeronj
parents:
diff
changeset
|
165 |
_this.container.removeChild(child); |
b4bd49f01837
add annotsRoll class and create it in main. Adapt main and pianoroll to allow horizontal or vertical view
rougeronj
parents:
diff
changeset
|
166 |
}); |
b4bd49f01837
add annotsRoll class and create it in main. Adapt main and pianoroll to allow horizontal or vertical view
rougeronj
parents:
diff
changeset
|
167 |
}; |
b4bd49f01837
add annotsRoll class and create it in main. Adapt main and pianoroll to allow horizontal or vertical view
rougeronj
parents:
diff
changeset
|
168 |
|
98 | 169 |
this.init = function() { |
170 |
||
171 |
ws.message(function(data) { |
|
172 |
_this.addAnnots(data); |
|
173 |
}); |
|
174 |
||
175 |
}; |
|
176 |
||
177 |
this.start = function() { |
|
178 |
if(!started) { |
|
179 |
this.startTs = Date.now(); |
|
180 |
started = true; |
|
181 |
} |
|
182 |
this.cleanInterval = setInterval(function () { _this.removePassedObjets(); }, 1000 * this.height / this.pixelsPerSecond ); |
|
183 |
if(!externalRefresh) { |
|
184 |
this.refreshInterval = setInterval(function() {_this.move();}, 1000/this.framerate); |
|
185 |
} |
|
186 |
}; |
|
187 |
||
188 |
this.stop = function() { |
|
189 |
clearInterval(this.cleanInterval); |
|
190 |
if(!externalRefresh) { |
|
191 |
clearInterval(this.refreshInterval); |
|
192 |
} |
|
193 |
}; |
|
89
b4bd49f01837
add annotsRoll class and create it in main. Adapt main and pianoroll to allow horizontal or vertical view
rougeronj
parents:
diff
changeset
|
194 |
|
b4bd49f01837
add annotsRoll class and create it in main. Adapt main and pianoroll to allow horizontal or vertical view
rougeronj
parents:
diff
changeset
|
195 |
} |
b4bd49f01837
add annotsRoll class and create it in main. Adapt main and pianoroll to allow horizontal or vertical view
rougeronj
parents:
diff
changeset
|
196 |
|
98 | 197 |
module.exports = { |
198 |
AnnotsRoll: AnnotsRoll, |
|
199 |
}; |