38 this.height = opts.height; |
41 this.height = opts.height; |
39 this.intervalHeight = opts.intervalHeight; |
42 this.intervalHeight = opts.intervalHeight; |
40 this.intervalWidth = opts.intervalWidth; |
43 this.intervalWidth = opts.intervalWidth; |
41 this.maxCellHeight = opts.maxCellHeight; |
44 this.maxCellHeight = opts.maxCellHeight; |
42 this.annotCategories = opts.annotCategories; |
45 this.annotCategories = opts.annotCategories; |
|
46 this.startTs = options.startTs || Date.now(); |
43 this.showClockGraphics = opts.showClockGraphics; |
47 this.showClockGraphics = opts.showClockGraphics; |
44 |
48 |
45 this.circleX = opts.circleX || (this.width/2); |
49 this.circleX = opts.circleX || (this.width/2); |
46 this.circleY = opts.circleY || (this.height/2); |
50 this.circleY = opts.circleY || (this.height/2); |
47 this.radius = opts.radius; |
51 this.radius = opts.radius; |
48 var perimeter = 2*Math.PI* this.radius; |
52 var perimeter = 2*Math.PI* this.radius; |
49 this.intervalDuration = (this.intervalWidth * this.duration / perimeter); |
53 this.intervalDuration = (this.intervalWidth * this.duration / perimeter); |
50 |
54 |
|
55 var channel = opts.channel; |
|
56 var eventCode = opts.eventCode; |
|
57 var serverUrl = opts.serverUrl; |
|
58 var maxPages = opts.maxPages; |
|
59 |
51 var totalIndex = Math.floor( perimeter/this.intervalWidth); |
60 var totalIndex = Math.floor( perimeter/this.intervalWidth); |
52 |
61 |
53 this.cells = [] |
62 this.cells = [] |
54 for (var i=0; i<(perimeter/this.intervalWidth) ; i++){ |
63 for (var i=0; i<(perimeter/this.intervalWidth) ; i++){ |
55 this.cells[i] = []; |
64 this.cells[i] = []; |
68 .endFill() |
77 .endFill() |
69 this.container.addChild(graphics); |
78 this.container.addChild(graphics); |
70 |
79 |
71 stageView.registerComponent(this); |
80 stageView.registerComponent(this); |
72 |
81 |
|
82 var loadArchives = function() { |
|
83 //start timeBegin end startTime |
|
84 //query -> need channel + eventCode |
|
85 //iterate over data fill cells |
|
86 var startTs = _this.timeBegin; |
|
87 var endTs = _this.startTs; |
|
88 |
|
89 var url = serverUrl + '/p/api/v1/annotation'; |
|
90 var filters = [ |
|
91 { name: 'ts', op: '>', val: new Date(startTs).toISOString()}, //start |
|
92 { name: 'ts', op: '<=', val: new Date(endTs).toISOString()}, //end |
|
93 { name: 'channel', op: '==', val: channel}, //channel |
|
94 { name: 'event_code', op: '==', val: eventCode} //eventcode |
|
95 ]; |
|
96 |
|
97 console.log(JSON.stringify({filters:filters})); |
|
98 |
|
99 url = url + '?q=' + JSON.stringify({filters:filters}); |
|
100 |
|
101 var totalPage = 1; |
|
102 var currentPage = 1; |
|
103 |
|
104 var processResFunction = function(res) { |
|
105 |
|
106 if(res) { |
|
107 var data = res.target.json; |
|
108 /*jshint -W069 */ |
|
109 totalPage = Math.min(maxPages,parseInt(data['total_pages'])); |
|
110 console.log('DATA', data); |
|
111 data.objects.forEach(function(annotation) { |
|
112 _this.addAnnot(annotation); |
|
113 }); |
|
114 } |
|
115 if(currentPage <= totalPage) { |
|
116 var jsonLoader = new PIXI.JsonLoader(url+'&page='+currentPage, true); |
|
117 jsonLoader.on('loaded', processResFunction); |
|
118 jsonLoader.load(); |
|
119 currentPage++; |
|
120 } |
|
121 }; |
|
122 processResFunction(); |
|
123 |
|
124 }; |
|
125 |
73 //Add Annotation to the TimeLine |
126 //Add Annotation to the TimeLine |
74 this.addAnnot = function(data){ |
127 this.addAnnot = function(data){ |
|
128 |
75 var ts = Date.parse(data.ts); |
129 var ts = Date.parse(data.ts); |
76 var colorsDef; |
130 var colorsDef; |
77 _(this.annotCategories).eachRight(function(cdef) { |
131 _(this.annotCategories).eachRight(function(cdef) { |
78 if(cdef.ts < ts) { |
132 if(cdef.ts < ts) { |
79 colorsDef = cdef; |
133 colorsDef = cdef; |
80 return false; |
134 return false; |
81 } |
135 } |
82 }); |
136 }); |
|
137 |
83 if (this.timeEnd > ts){ |
138 if (this.timeEnd > ts){ |
84 var i = Math.floor((ts - this.timeBegin)/(1000*this.intervalDuration)); |
139 var i = Math.floor((ts - this.timeBegin)/(1000*this.intervalDuration)); |
|
140 |
85 if (typeof(this.cells[i].graphics) === 'undefined'){ |
141 if (typeof(this.cells[i].graphics) === 'undefined'){ |
86 this.initCell(this.cells[i], colorsDef); |
142 this.initCell(this.cells[i], colorsDef); |
87 } |
143 } |
88 |
144 |
89 if (typeof(colorsDef.colors[data.content.category.code]) !== 'undefined'){ |
145 if (typeof(colorsDef.colors[data.content.category.code]) !== 'undefined'){ |
90 var annotCode = data.content.category.code; |
146 var annotCode = data.content.category.code; |
91 } else { |
147 } else { |
92 var annotCode = 'default'; |
148 var annotCode = 'default'; |
93 } |
149 } |
94 |
150 |
95 this.cells[i].categories[annotCode].count += 1; |
151 this.cells[i].categories[annotCode].count += 1; |
96 this.cells[i].totalAnnots +=1; |
152 this.cells[i].totalAnnots +=1; |
97 this.redrawCell(this.cells[i], colorsDef); |
153 this.redrawCell(this.cells[i], colorsDef); |
98 } |
154 } |
99 }; |
155 }; |
136 |
192 |
137 //Draw the cellule |
193 //Draw the cellule |
138 this.redrawCell = function(cell, colorsDef){ |
194 this.redrawCell = function(cell, colorsDef){ |
139 var y = 0; |
195 var y = 0; |
140 |
196 |
141 //Check if total height is higher than Max Cell Height |
197 //Check if total height is higher than Max Cell Height |
142 if ((cell.totalAnnots*this.intervalHeight) > this.maxCellHeight){ |
198 var heightStep; |
143 var heightStep = this.maxCellHeight/cell.totalAnnots; |
199 if ((cell.totalAnnots*this.intervalHeight) > this.maxCellHeight){ |
144 } else { |
200 heightStep = this.maxCellHeight/cell.totalAnnots; |
145 var heightStep = this.intervalHeight; |
201 } else { |
146 } |
202 heightStep = this.intervalHeight; |
|
203 } |
147 |
204 |
148 //Draw the rect depending on the height step calculated |
205 //Draw the rect depending on the height step calculated |
149 for (var i=0; i< colorsDef.order.length; i++){ |
206 for (var i=0; i< colorsDef.order.length; i++){ |
150 var currentCode = colorsDef.order[i]; |
207 var currentCode = colorsDef.order[i]; |
151 cell.graphics.beginFill(cell.categories[currentCode].color.replace("#", "0x")) |
208 cell.graphics.beginFill(cell.categories[currentCode].color.replace("#", "0x")) |
152 .drawRect(0, y, this.intervalWidth-1, -cell.categories[currentCode].count * heightStep) |
209 .drawRect(0, y, this.intervalWidth-1, -cell.categories[currentCode].count * heightStep) |
153 .endFill(); |
210 .endFill(); |
154 y -= cell.categories[currentCode].count*heightStep; |
211 y -= cell.categories[currentCode].count*heightStep; |
155 } |
212 } |
156 } |
213 } |
157 |
214 |
158 this.initCell = function(cell, colorsDef){ |
215 this.initCell = function(cell, colorsDef){ |
159 cell.graphics = new PIXI.Graphics(); |
216 cell.graphics = new PIXI.Graphics(); |
160 cell.graphics.position.x = this.circleX + this.radius * Math.sin(cell.i*(360/totalIndex)*(Math.PI/180)); |
217 cell.graphics.position.x = this.circleX + this.radius * Math.sin(cell.i*(360/totalIndex)*(Math.PI/180)); |
161 cell.graphics.position.y = this.circleY - this.radius * Math.cos(cell.i*(360/totalIndex)*(Math.PI/180)); |
218 cell.graphics.position.y = this.circleY - this.radius * Math.cos(cell.i*(360/totalIndex)*(Math.PI/180)); |
162 cell.graphics.rotation = (cell.i)*(360/totalIndex)*(Math.PI/180) + (360/(totalIndex*2))*(Math.PI/180); |
219 cell.graphics.rotation = (cell.i)*(360/totalIndex)*(Math.PI/180) + (360/(totalIndex*2))*(Math.PI/180); |
163 this.container.addChild(cell.graphics); |
220 this.container.addChild(cell.graphics); |
164 |
221 |
165 for (var category in colorsDef.colors){ |
222 for (var category in colorsDef.colors){ |
166 cell.categories[category] = { |
223 cell.categories[category] = { |
167 "count": 0, |
224 "count": 0, |
168 "color": colorsDef.colors[category] |
225 "color": colorsDef.colors[category] |
169 }; |
226 }; |