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