37 this.height = opts.height; |
38 this.height = opts.height; |
38 this.intervalHeight = opts.intervalHeight; |
39 this.intervalHeight = opts.intervalHeight; |
39 this.intervalWidth = opts.intervalWidth; |
40 this.intervalWidth = opts.intervalWidth; |
40 this.maxCellHeight = opts.maxCellHeight; |
41 this.maxCellHeight = opts.maxCellHeight; |
41 this.annotCategories = opts.annotCategories; |
42 this.annotCategories = opts.annotCategories; |
|
43 this.showClockGraphics = opts.showClockGraphics; |
42 |
44 |
43 this.circleX = opts.circleX || (this.width/2); |
45 this.circleX = opts.circleX || (this.width/2); |
44 this.circleY = opts.circleY || (this.height/2); |
46 this.circleY = opts.circleY || (this.height/2); |
45 this.radius = opts.radius; |
47 this.radius = opts.radius; |
46 this.perimeter = 2*Math.PI* this.radius; |
48 var perimeter = 2*Math.PI* this.radius; |
47 this.intervalDuration = (this.intervalWidth * this.duration / this.perimeter); |
49 this.intervalDuration = (this.intervalWidth * this.duration / perimeter); |
48 |
50 |
49 var currentTime = Date.now() + 3600*1000; |
51 var totalIndex = Math.floor( perimeter/this.intervalWidth); |
50 var totalIndex = Math.floor(this.perimeter/this.intervalWidth); |
|
51 |
52 |
52 this.cells = [] |
53 this.cells = [] |
53 for (var i=0; i<(this.perimeter/this.intervalWidth) ; i++){ |
54 for (var i=0; i<(perimeter/this.intervalWidth) ; i++){ |
54 this.cells[i] = []; |
55 this.cells[i] = []; |
55 this.cells[i].i = i; |
56 this.cells[i].i = i; |
56 this.cells[i].totalAnnots = 0; |
57 this.cells[i].totalAnnots = 0; |
57 this.cells[i].categories = {}; |
58 this.cells[i].categories = {}; |
58 } |
59 } |
62 |
63 |
63 //draw the base - circle and line to locate the scene |
64 //draw the base - circle and line to locate the scene |
64 var graphics = new PIXI.Graphics(); |
65 var graphics = new PIXI.Graphics(); |
65 graphics.lineStyle(2, 0x646464) |
66 graphics.lineStyle(2, 0x646464) |
66 .drawCircle(this.circleX, this.circleY, this.radius - 3) |
67 .drawCircle(this.circleX, this.circleY, this.radius - 3) |
67 .lineStyle(1, 0xD7D7D7) |
|
68 .drawCircle(this.circleX, this.circleY, this.radius*2/3) |
|
69 .drawCircle(this.circleX, this.circleY, this.radius/3) |
|
70 .lineStyle(1, 0x646464) |
|
71 .moveTo(this.circleX, this.circleY - (this.radius/3)/2) |
|
72 .lineTo(this.circleX, this.circleY - this.radius - this.maxCellHeight - 10) |
|
73 .endFill() |
68 .endFill() |
74 this.container.addChild(graphics); |
69 this.container.addChild(graphics); |
75 |
70 |
76 //set time text |
|
77 //TODO : move this to annotsvizview |
|
78 var currentTimeText = new PIXI.Text("-- : -- : --", { font: '18pt Gothic Standard', fill: '#646464' }); |
|
79 currentTimeText.x = this.circleX - currentTimeText.width/2; |
|
80 currentTimeText.y = this.circleY - currentTimeText.height/2; |
|
81 this.container.addChild(currentTimeText); |
|
82 |
|
83 stageView.registerComponent(this); |
71 stageView.registerComponent(this); |
84 |
72 |
85 //Add Annotation to the TimeLine |
73 //Add Annotation to the TimeLine |
86 this.addAnnot = function(data){ |
74 this.addAnnot = function(data){ |
87 |
|
88 var ts = Date.parse(data.ts); |
75 var ts = Date.parse(data.ts); |
89 var colorsDef; |
76 var colorsDef; |
90 _(this.annotCategories).eachRight(function(cdef) { |
77 _(this.annotCategories).eachRight(function(cdef) { |
91 if(cdef.ts < ts) { |
78 if(cdef.ts < ts) { |
92 colorsDef = cdef; |
79 colorsDef = cdef; |
93 return false; |
80 return false; |
94 } |
81 } |
95 }); |
82 }); |
96 |
83 if (this.timeEnd > ts){ |
97 if (this.timeEnd > Date.parse(data.ts)){ |
84 var i = Math.floor((ts - this.timeBegin)/(1000*this.intervalDuration)); |
98 var i = Math.floor(((Date.parse(data.ts) + 3600*1000) - this.timeBegin)/(1000*this.intervalDuration)); |
|
99 |
|
100 if (typeof(this.cells[i].graphics) === 'undefined'){ |
85 if (typeof(this.cells[i].graphics) === 'undefined'){ |
101 this.initCell(this.cells[i], colorsDef); |
86 this.initCell(this.cells[i], colorsDef); |
102 } |
87 } |
103 |
88 |
104 if (typeof(colorsDef.colors[data.content.category.code]) !== 'undefined'){ |
89 if (typeof(colorsDef.colors[data.content.category.code]) !== 'undefined'){ |
111 this.cells[i].totalAnnots +=1; |
96 this.cells[i].totalAnnots +=1; |
112 this.redrawCell(this.cells[i], colorsDef); |
97 this.redrawCell(this.cells[i], colorsDef); |
113 } |
98 } |
114 }; |
99 }; |
115 |
100 |
116 this.initTimeTexts = function() { |
101 this.initClockGraphics = function() { |
117 var tBeg = new PIXI.Text(Utils.formatTime(this.timeBegin), { font: '12pt Gothic Standard', fill: '#646464' }); |
102 var tBeg = new PIXI.Text(Utils.formatTime(this.timeBegin), { font: '12pt Gothic Standard', fill: '#646464' }); |
118 tBeg.x = this.circleX + 15; |
103 tBeg.x = this.circleX + 15; |
119 tBeg.y = this.circleY - this.radius - this.maxCellHeight - 10; |
104 tBeg.y = this.circleY - this.radius - this.maxCellHeight - 10; |
120 this.container.addChild(tBeg); |
105 this.container.addChild(tBeg); |
121 |
106 |
138 var t45 = new PIXI.Text(Utils.formatTime(((this.timeEnd - this.timeBegin)*3/4) + this.timeBegin), { font: '12pt Gothic Standard', fill: '#646464' }); |
123 var t45 = new PIXI.Text(Utils.formatTime(((this.timeEnd - this.timeBegin)*3/4) + this.timeBegin), { font: '12pt Gothic Standard', fill: '#646464' }); |
139 t45.x = this.circleX - this.radius - this.maxCellHeight - 10 ; |
124 t45.x = this.circleX - this.radius - this.maxCellHeight - 10 ; |
140 t45.y = this.circleY + t15.height; |
125 t45.y = this.circleY + t15.height; |
141 t45.rotation = -Math.PI/2; |
126 t45.rotation = -Math.PI/2; |
142 this.container.addChild(t45); |
127 this.container.addChild(t45); |
|
128 |
|
129 var lineV = new PIXI.Graphics(); |
|
130 lineV.lineStyle(1, 0x646464) |
|
131 .moveTo(this.circleX, this.circleY - (this.radius/3)/2) |
|
132 .lineTo(this.circleX, this.circleY - this.radius - this.maxCellHeight - 10) |
|
133 .endFill(); |
|
134 this.container.addChild(lineV); |
143 } |
135 } |
144 |
136 |
145 //Draw the cellule |
137 //Draw the cellule |
146 this.redrawCell = function(cell, colorsDef){ |
138 this.redrawCell = function(cell, colorsDef){ |
147 |
|
148 var y = 0; |
139 var y = 0; |
149 |
140 |
150 //Check if total height is higher than Max Cell Height |
141 //Check if total height is higher than Max Cell Height |
151 if ((cell.totalAnnots*this.intervalHeight) > this.maxCellHeight){ |
142 if ((cell.totalAnnots*this.intervalHeight) > this.maxCellHeight){ |
152 var heightStep = this.maxCellHeight/cell.totalAnnots; |
143 var heightStep = this.maxCellHeight/cell.totalAnnots; |
175 cell.categories[category] = { |
166 cell.categories[category] = { |
176 "count": 0, |
167 "count": 0, |
177 "color": colorsDef.colors[category] |
168 "color": colorsDef.colors[category] |
178 }; |
169 }; |
179 } |
170 } |
180 cell.categories['default'] = { |
171 if (typeof(cell.categories['default']) === 'undefined'){ |
181 "count": 0, |
172 cell.categories['default'] = { |
182 "color": colorsDef.defaultColor |
173 "count": 0, |
|
174 "color": colorsDef.defaultColor |
|
175 } |
183 } |
176 } |
184 } |
177 } |
185 |
178 |
186 this.init = function() { |
179 this.init = function() { |
187 ws.message(function(data) { |
180 ws.message(function(data) { |
188 _this.addAnnot(data); |
181 _this.addAnnot(data); |
189 }); |
182 }); |
190 |
183 |
191 this.initTimeTexts(); |
184 if (this.showClockGraphics){this.initClockGraphics();} |
192 }; |
185 }; |
193 |
186 |
194 this.updateTime = function(){ |
|
195 currentTime = Date.now() + 3600*1000; |
|
196 |
|
197 var nbSec = currentTime / 1000; |
|
198 var hours = Math.floor( nbSec / 3600 ) % 24; |
|
199 var minutes = Math.floor( nbSec / 60 ) % 60; |
|
200 var seconds = Math.floor(nbSec % 60); |
|
201 var timeStr = (hours < 10 ? '0' + hours : hours) + ':' + (minutes < 10 ? '0' + minutes : minutes) + ':' + (seconds < 10 ? '0' + seconds : seconds); |
|
202 |
|
203 currentTimeText.setText(timeStr); |
|
204 }; |
|
205 |
|
206 var refreshTimeInterval; |
|
207 |
187 |
208 this.start = function() { |
188 this.start = function() { |
209 refreshTimeInterval = setInterval(function() {_this.updateTime();}, 1000); |
|
210 }; |
189 }; |
211 |
190 |
212 this.refresh = function() { |
191 this.refresh = function() { |
213 |
192 |
214 }; |
193 }; |