author | rougeronj |
Thu, 22 Jan 2015 02:21:15 +0100 | |
changeset 105 | 25ac8802c189 |
parent 103 | 123a611c7903 |
child 109 | 8546e2181a73 |
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'); |
|
105
25ac8802c189
Improve interface + Add horizontal pianoroll to annotsvizview
rougeronj
parents:
103
diff
changeset
|
11 |
var Utils = require('./utils.js'); |
100 | 12 |
var _ = require('lodash'); |
97 | 13 |
|
100 | 14 |
var defaultOptions = { |
15 |
logger: undefined, |
|
16 |
intervalWidth: 10, |
|
17 |
intervalHeight: 5, |
|
102 | 18 |
maxCellHeight: 200, |
103 | 19 |
radius: 300 |
100 | 20 |
}; |
97 | 21 |
|
22 |
||
100 | 23 |
function AnnotsTimeLine(options){ |
91 | 24 |
var _this = this; |
100 | 25 |
var opts = _(options).defaults(defaultOptions).value(); |
91 | 26 |
|
100 | 27 |
this.container = new PIXI.DisplayObjectContainer(); |
28 |
this.container.x = opts.xInit; |
|
29 |
this.container.y = opts.yInit; |
|
30 |
this.container.width = opts.width; |
|
31 |
this.container.height = opts.height; |
|
91 | 32 |
|
100 | 33 |
this.timeBegin = opts.timeBegin; |
34 |
this.timeEnd = opts.timeEnd; |
|
35 |
this.duration = (this.timeEnd - this.timeBegin)/1000; |
|
36 |
this.width = opts.width; |
|
37 |
this.height = opts.height; |
|
38 |
this.intervalHeight = opts.intervalHeight; |
|
39 |
this.intervalWidth = opts.intervalWidth; |
|
40 |
this.maxCellHeight = opts.maxCellHeight; |
|
41 |
this.annotCategories = opts.annotCategories; |
|
99
9d968fbcaa2a
Add General Time Line + minor change in annotsRoll
rougeronj
parents:
92
diff
changeset
|
42 |
|
103 | 43 |
this.circleX = opts.circleX || (this.width/2); |
44 |
this.circleY = opts.circleY || (this.height/2); |
|
102 | 45 |
this.radius = opts.radius; |
46 |
this.perimeter = 2*Math.PI* this.radius; |
|
47 |
this.intervalDuration = (this.intervalWidth * this.duration / this.perimeter); |
|
48 |
|
|
105
25ac8802c189
Improve interface + Add horizontal pianoroll to annotsvizview
rougeronj
parents:
103
diff
changeset
|
49 |
var currentTime = this.timeBegin; |
102 | 50 |
var totalIndex = Math.floor(this.perimeter/this.intervalWidth); |
51 |
|
|
91 | 52 |
this.cells = [] |
102 | 53 |
for (var i=0; i<(this.perimeter/this.intervalWidth) ; i++){ |
99
9d968fbcaa2a
Add General Time Line + minor change in annotsRoll
rougeronj
parents:
92
diff
changeset
|
54 |
this.cells[i] = []; |
103 | 55 |
this.cells[i].i = i; |
99
9d968fbcaa2a
Add General Time Line + minor change in annotsRoll
rougeronj
parents:
92
diff
changeset
|
56 |
this.cells[i].totalAnnots = 0; |
9d968fbcaa2a
Add General Time Line + minor change in annotsRoll
rougeronj
parents:
92
diff
changeset
|
57 |
this.cells[i].categories = {}; |
9d968fbcaa2a
Add General Time Line + minor change in annotsRoll
rougeronj
parents:
92
diff
changeset
|
58 |
|
100 | 59 |
for (var category in this.annotCategories[0].colors){ |
99
9d968fbcaa2a
Add General Time Line + minor change in annotsRoll
rougeronj
parents:
92
diff
changeset
|
60 |
this.cells[i].categories[category] = { |
103 | 61 |
"count": 0, |
100 | 62 |
"color": this.annotCategories[0].colors[category] |
99
9d968fbcaa2a
Add General Time Line + minor change in annotsRoll
rougeronj
parents:
92
diff
changeset
|
63 |
}; |
9d968fbcaa2a
Add General Time Line + minor change in annotsRoll
rougeronj
parents:
92
diff
changeset
|
64 |
} |
9d968fbcaa2a
Add General Time Line + minor change in annotsRoll
rougeronj
parents:
92
diff
changeset
|
65 |
} |
100 | 66 |
|
67 |
var ws = opts.ws; |
|
68 |
var stageView = opts.stageView; |
|
102 | 69 |
|
103 | 70 |
//draw the base - circle and line to locate the scene |
91 | 71 |
var graphics = new PIXI.Graphics(); |
105
25ac8802c189
Improve interface + Add horizontal pianoroll to annotsvizview
rougeronj
parents:
103
diff
changeset
|
72 |
graphics.lineStyle(2, 0x646464) |
103 | 73 |
.drawCircle(this.circleX, this.circleY, this.radius - 3) |
105
25ac8802c189
Improve interface + Add horizontal pianoroll to annotsvizview
rougeronj
parents:
103
diff
changeset
|
74 |
.lineStyle(1, 0xD7D7D7) |
103 | 75 |
.drawCircle(this.circleX, this.circleY, this.radius*2/3) |
76 |
.drawCircle(this.circleX, this.circleY, this.radius/3) |
|
105
25ac8802c189
Improve interface + Add horizontal pianoroll to annotsvizview
rougeronj
parents:
103
diff
changeset
|
77 |
.lineStyle(1, 0x646464) |
25ac8802c189
Improve interface + Add horizontal pianoroll to annotsvizview
rougeronj
parents:
103
diff
changeset
|
78 |
.moveTo(this.circleX, this.circleY - (this.radius/3)/2) |
25ac8802c189
Improve interface + Add horizontal pianoroll to annotsvizview
rougeronj
parents:
103
diff
changeset
|
79 |
.lineTo(this.circleX, this.circleY - this.radius - this.maxCellHeight - 10) |
102 | 80 |
.endFill() |
91 | 81 |
this.container.addChild(graphics); |
100 | 82 |
|
105
25ac8802c189
Improve interface + Add horizontal pianoroll to annotsvizview
rougeronj
parents:
103
diff
changeset
|
83 |
//set time text |
25ac8802c189
Improve interface + Add horizontal pianoroll to annotsvizview
rougeronj
parents:
103
diff
changeset
|
84 |
var currentTimeText = new PIXI.Text("-- : -- : --", { font: '18pt Gothic Standard', fill: '#646464' }); |
25ac8802c189
Improve interface + Add horizontal pianoroll to annotsvizview
rougeronj
parents:
103
diff
changeset
|
85 |
currentTimeText.x = this.circleX - currentTimeText.width/2; |
25ac8802c189
Improve interface + Add horizontal pianoroll to annotsvizview
rougeronj
parents:
103
diff
changeset
|
86 |
currentTimeText.y = this.circleY - currentTimeText.height/2; |
25ac8802c189
Improve interface + Add horizontal pianoroll to annotsvizview
rougeronj
parents:
103
diff
changeset
|
87 |
this.container.addChild(currentTimeText); |
25ac8802c189
Improve interface + Add horizontal pianoroll to annotsvizview
rougeronj
parents:
103
diff
changeset
|
88 |
|
100 | 89 |
stageView.registerComponent(this); |
97 | 90 |
|
99
9d968fbcaa2a
Add General Time Line + minor change in annotsRoll
rougeronj
parents:
92
diff
changeset
|
91 |
//Add Annotation to the TimeLine |
100 | 92 |
this.addAnnot = function(data){ |
93 |
if (typeof(this.annotCategories[0].colors[data.content.category.code]) !== 'undefined'){ |
|
94 |
var annotCode = data.content.category.code; |
|
95 |
} else { |
|
96 |
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
|
97 |
} |
100 | 98 |
var annotTime = Date.parse(data.ts); |
99 |
|
|
100 |
if (this.timeEnd > Date.parse(data.ts)){ |
|
101 |
var i = Math.floor((Date.parse(data.ts)-this.timeBegin)/(1000*this.intervalDuration)); |
|
103 | 102 |
|
100 | 103 |
this.cells[i].categories[annotCode].count += 1; |
104 |
this.cells[i].totalAnnots +=1; |
|
102 | 105 |
this.redrawCell(this.cells[i], i); |
100 | 106 |
} |
99
9d968fbcaa2a
Add General Time Line + minor change in annotsRoll
rougeronj
parents:
92
diff
changeset
|
107 |
}; |
9d968fbcaa2a
Add General Time Line + minor change in annotsRoll
rougeronj
parents:
92
diff
changeset
|
108 |
|
103 | 109 |
this.initGraphics = function(cell){ |
110 |
cell.graphics = new PIXI.Graphics(); |
|
111 |
cell.graphics.position.x = this.circleX + this.radius * Math.sin(cell.i*(360/totalIndex)*(Math.PI/180)); |
|
112 |
cell.graphics.position.y = this.circleY - this.radius * Math.cos(cell.i*(360/totalIndex)*(Math.PI/180)); |
|
113 |
cell.graphics.rotation = (cell.i)*(360/totalIndex)*(Math.PI/180) + (360/(totalIndex*2))*(Math.PI/180); |
|
114 |
this.container.addChild(cell.graphics); |
|
115 |
} |
|
116 |
|
|
105
25ac8802c189
Improve interface + Add horizontal pianoroll to annotsvizview
rougeronj
parents:
103
diff
changeset
|
117 |
this.initTimeTexts = function() { |
25ac8802c189
Improve interface + Add horizontal pianoroll to annotsvizview
rougeronj
parents:
103
diff
changeset
|
118 |
var tBeg = new PIXI.Text(Utils.formatTime(this.timeBegin), { font: '12pt Gothic Standard', fill: '#646464' }); |
25ac8802c189
Improve interface + Add horizontal pianoroll to annotsvizview
rougeronj
parents:
103
diff
changeset
|
119 |
tBeg.x = this.circleX + 15; |
25ac8802c189
Improve interface + Add horizontal pianoroll to annotsvizview
rougeronj
parents:
103
diff
changeset
|
120 |
tBeg.y = this.circleY - this.radius - this.maxCellHeight - 10; |
25ac8802c189
Improve interface + Add horizontal pianoroll to annotsvizview
rougeronj
parents:
103
diff
changeset
|
121 |
this.container.addChild(tBeg); |
25ac8802c189
Improve interface + Add horizontal pianoroll to annotsvizview
rougeronj
parents:
103
diff
changeset
|
122 |
|
25ac8802c189
Improve interface + Add horizontal pianoroll to annotsvizview
rougeronj
parents:
103
diff
changeset
|
123 |
var tEnd = new PIXI.Text(Utils.formatTime(this.timeEnd), { font: '12pt Gothic Standard', fill: '#646464' }); |
25ac8802c189
Improve interface + Add horizontal pianoroll to annotsvizview
rougeronj
parents:
103
diff
changeset
|
124 |
tEnd.x = this.circleX - 15 - tEnd.width; |
25ac8802c189
Improve interface + Add horizontal pianoroll to annotsvizview
rougeronj
parents:
103
diff
changeset
|
125 |
tEnd.y = this.circleY - this.radius - this.maxCellHeight - 10; |
25ac8802c189
Improve interface + Add horizontal pianoroll to annotsvizview
rougeronj
parents:
103
diff
changeset
|
126 |
this.container.addChild(tEnd); |
25ac8802c189
Improve interface + Add horizontal pianoroll to annotsvizview
rougeronj
parents:
103
diff
changeset
|
127 |
|
25ac8802c189
Improve interface + Add horizontal pianoroll to annotsvizview
rougeronj
parents:
103
diff
changeset
|
128 |
var t15 = new PIXI.Text(Utils.formatTime(((this.timeEnd - this.timeBegin)/4) + this.timeBegin), { font: '12pt Gothic Standard', fill: '#646464' }); |
25ac8802c189
Improve interface + Add horizontal pianoroll to annotsvizview
rougeronj
parents:
103
diff
changeset
|
129 |
t15.x = this.circleX + this.radius + this.maxCellHeight + 10 ; |
25ac8802c189
Improve interface + Add horizontal pianoroll to annotsvizview
rougeronj
parents:
103
diff
changeset
|
130 |
t15.y = this.circleY - t15.height; |
25ac8802c189
Improve interface + Add horizontal pianoroll to annotsvizview
rougeronj
parents:
103
diff
changeset
|
131 |
t15.rotation = Math.PI /2; |
25ac8802c189
Improve interface + Add horizontal pianoroll to annotsvizview
rougeronj
parents:
103
diff
changeset
|
132 |
this.container.addChild(t15); |
25ac8802c189
Improve interface + Add horizontal pianoroll to annotsvizview
rougeronj
parents:
103
diff
changeset
|
133 |
|
25ac8802c189
Improve interface + Add horizontal pianoroll to annotsvizview
rougeronj
parents:
103
diff
changeset
|
134 |
var t30 = new PIXI.Text(Utils.formatTime(((this.timeEnd - this.timeBegin)/2) + this.timeBegin), { font: '12pt Gothic Standard', fill: '#646464' }); |
25ac8802c189
Improve interface + Add horizontal pianoroll to annotsvizview
rougeronj
parents:
103
diff
changeset
|
135 |
t30.x = this.circleX - t30.width/2; |
25ac8802c189
Improve interface + Add horizontal pianoroll to annotsvizview
rougeronj
parents:
103
diff
changeset
|
136 |
t30.y = this.circleY + this.radius + this.maxCellHeight - 2; |
25ac8802c189
Improve interface + Add horizontal pianoroll to annotsvizview
rougeronj
parents:
103
diff
changeset
|
137 |
this.container.addChild(t30); |
25ac8802c189
Improve interface + Add horizontal pianoroll to annotsvizview
rougeronj
parents:
103
diff
changeset
|
138 |
|
25ac8802c189
Improve interface + Add horizontal pianoroll to annotsvizview
rougeronj
parents:
103
diff
changeset
|
139 |
var t45 = new PIXI.Text(Utils.formatTime(((this.timeEnd - this.timeBegin)*3/4) + this.timeBegin), { font: '12pt Gothic Standard', fill: '#646464' }); |
25ac8802c189
Improve interface + Add horizontal pianoroll to annotsvizview
rougeronj
parents:
103
diff
changeset
|
140 |
t45.x = this.circleX - this.radius - this.maxCellHeight - 10 ; |
25ac8802c189
Improve interface + Add horizontal pianoroll to annotsvizview
rougeronj
parents:
103
diff
changeset
|
141 |
t45.y = this.circleY + t15.height; |
25ac8802c189
Improve interface + Add horizontal pianoroll to annotsvizview
rougeronj
parents:
103
diff
changeset
|
142 |
t45.rotation = -Math.PI/2; |
25ac8802c189
Improve interface + Add horizontal pianoroll to annotsvizview
rougeronj
parents:
103
diff
changeset
|
143 |
this.container.addChild(t45); |
25ac8802c189
Improve interface + Add horizontal pianoroll to annotsvizview
rougeronj
parents:
103
diff
changeset
|
144 |
} |
25ac8802c189
Improve interface + Add horizontal pianoroll to annotsvizview
rougeronj
parents:
103
diff
changeset
|
145 |
|
99
9d968fbcaa2a
Add General Time Line + minor change in annotsRoll
rougeronj
parents:
92
diff
changeset
|
146 |
//Draw the cellule |
9d968fbcaa2a
Add General Time Line + minor change in annotsRoll
rougeronj
parents:
92
diff
changeset
|
147 |
this.redrawCell = function(cell){ |
103 | 148 |
|
149 |
if (typeof(cell.graphics) === 'undefined'){ |
|
150 |
this.initGraphics(cell); |
|
151 |
} else { |
|
152 |
cell.graphics.clear(); |
|
153 |
} |
|
154 |
|
|
102 | 155 |
var y = 0; |
91 | 156 |
|
99
9d968fbcaa2a
Add General Time Line + minor change in annotsRoll
rougeronj
parents:
92
diff
changeset
|
157 |
//Check if total height is higher than Max Cell Height |
9d968fbcaa2a
Add General Time Line + minor change in annotsRoll
rougeronj
parents:
92
diff
changeset
|
158 |
if ((cell.totalAnnots*this.intervalHeight) > this.maxCellHeight){ |
9d968fbcaa2a
Add General Time Line + minor change in annotsRoll
rougeronj
parents:
92
diff
changeset
|
159 |
var heightStep = this.maxCellHeight/cell.totalAnnots; |
9d968fbcaa2a
Add General Time Line + minor change in annotsRoll
rougeronj
parents:
92
diff
changeset
|
160 |
} else { |
9d968fbcaa2a
Add General Time Line + minor change in annotsRoll
rougeronj
parents:
92
diff
changeset
|
161 |
var heightStep = this.intervalHeight; |
9d968fbcaa2a
Add General Time Line + minor change in annotsRoll
rougeronj
parents:
92
diff
changeset
|
162 |
} |
103 | 163 |
|
99
9d968fbcaa2a
Add General Time Line + minor change in annotsRoll
rougeronj
parents:
92
diff
changeset
|
164 |
//Draw the rect depending on the height step calculated |
100 | 165 |
for (var i=0; i< this.annotCategories[0].order.length; i++){ |
166 |
var currentCode = this.annotCategories[0].order[i]; |
|
167 |
cell.graphics.beginFill(cell.categories[currentCode].color.replace("#", "0x")) |
|
103 | 168 |
.drawRect(0, y, this.intervalWidth-1, -cell.categories[currentCode].count * heightStep) |
99
9d968fbcaa2a
Add General Time Line + minor change in annotsRoll
rougeronj
parents:
92
diff
changeset
|
169 |
.endFill(); |
100 | 170 |
y -= cell.categories[currentCode].count*heightStep; |
99
9d968fbcaa2a
Add General Time Line + minor change in annotsRoll
rougeronj
parents:
92
diff
changeset
|
171 |
} |
9d968fbcaa2a
Add General Time Line + minor change in annotsRoll
rougeronj
parents:
92
diff
changeset
|
172 |
} |
100 | 173 |
|
174 |
this.init = function() { |
|
175 |
ws.message(function(data) { |
|
176 |
_this.addAnnot(data); |
|
177 |
}); |
|
105
25ac8802c189
Improve interface + Add horizontal pianoroll to annotsvizview
rougeronj
parents:
103
diff
changeset
|
178 |
|
25ac8802c189
Improve interface + Add horizontal pianoroll to annotsvizview
rougeronj
parents:
103
diff
changeset
|
179 |
this.initTimeTexts(); |
100 | 180 |
}; |
181 |
|
|
105
25ac8802c189
Improve interface + Add horizontal pianoroll to annotsvizview
rougeronj
parents:
103
diff
changeset
|
182 |
this.updateTime = function(){ |
25ac8802c189
Improve interface + Add horizontal pianoroll to annotsvizview
rougeronj
parents:
103
diff
changeset
|
183 |
currentTime += 1000; |
25ac8802c189
Improve interface + Add horizontal pianoroll to annotsvizview
rougeronj
parents:
103
diff
changeset
|
184 |
|
25ac8802c189
Improve interface + Add horizontal pianoroll to annotsvizview
rougeronj
parents:
103
diff
changeset
|
185 |
var nbSec = currentTime / 1000; |
25ac8802c189
Improve interface + Add horizontal pianoroll to annotsvizview
rougeronj
parents:
103
diff
changeset
|
186 |
var hours = Math.floor( nbSec / 3600 ) % 24; |
25ac8802c189
Improve interface + Add horizontal pianoroll to annotsvizview
rougeronj
parents:
103
diff
changeset
|
187 |
var minutes = Math.floor( nbSec / 60 ) % 60; |
25ac8802c189
Improve interface + Add horizontal pianoroll to annotsvizview
rougeronj
parents:
103
diff
changeset
|
188 |
var seconds = Math.floor(nbSec % 60); |
25ac8802c189
Improve interface + Add horizontal pianoroll to annotsvizview
rougeronj
parents:
103
diff
changeset
|
189 |
var timeStr = (hours < 10 ? '0' + hours : hours) + ':' + (minutes < 10 ? '0' + minutes : minutes) + ':' + (seconds < 10 ? '0' + seconds : seconds); |
25ac8802c189
Improve interface + Add horizontal pianoroll to annotsvizview
rougeronj
parents:
103
diff
changeset
|
190 |
|
25ac8802c189
Improve interface + Add horizontal pianoroll to annotsvizview
rougeronj
parents:
103
diff
changeset
|
191 |
currentTimeText.setText(timeStr); |
25ac8802c189
Improve interface + Add horizontal pianoroll to annotsvizview
rougeronj
parents:
103
diff
changeset
|
192 |
}; |
25ac8802c189
Improve interface + Add horizontal pianoroll to annotsvizview
rougeronj
parents:
103
diff
changeset
|
193 |
|
25ac8802c189
Improve interface + Add horizontal pianoroll to annotsvizview
rougeronj
parents:
103
diff
changeset
|
194 |
var refreshTimeInterval; |
25ac8802c189
Improve interface + Add horizontal pianoroll to annotsvizview
rougeronj
parents:
103
diff
changeset
|
195 |
|
100 | 196 |
this.start = function() { |
105
25ac8802c189
Improve interface + Add horizontal pianoroll to annotsvizview
rougeronj
parents:
103
diff
changeset
|
197 |
refreshTimeInterval = setInterval(function() {_this.updateTime();}, 1000); |
91 | 198 |
}; |
100 | 199 |
|
200 |
this.refresh = function() { |
|
105
25ac8802c189
Improve interface + Add horizontal pianoroll to annotsvizview
rougeronj
parents:
103
diff
changeset
|
201 |
|
100 | 202 |
}; |
203 |
|
|
204 |
this.stop = function(){ |
|
103 | 205 |
console.log(this.cells); |
100 | 206 |
}; |
207 |
|
|
208 |
return this; |
|
91 | 209 |
} |
210 |
||
98 | 211 |
module.exports = { |
103 | 212 |
AnnotsTimeLine: AnnotsTimeLine |
98 | 213 |
}; |