50 var margin = 1; // marge between frame |
50 var margin = 1; // marge between frame |
51 var lineSize = this.width; // timeline pixel width |
51 var lineSize = this.width; // timeline pixel width |
52 var nbrframes = lineSize/frameSize; // frame numbers |
52 var nbrframes = lineSize/frameSize; // frame numbers |
53 var numberOfTweet = 0; // number of tweet overide later |
53 var numberOfTweet = 0; // number of tweet overide later |
54 var duration = +this._serializer.currentMedia().meta["dc:duration"]; // timescale width |
54 var duration = +this._serializer.currentMedia().meta["dc:duration"]; // timescale width |
55 var frameLength = lineSize/frameSize; // frame timescale |
55 var frameLength = lineSize / frameSize; // frame timescale |
56 var timeline; |
56 var timeline; |
57 var colors = new Array("","#1D973D","#C5A62D","#CE0A15","#036AAE","#585858"); |
57 var colors = new Array("","#1D973D","#C5A62D","#CE0A15","#036AAE","#585858"); |
58 |
58 |
59 // array |
59 // array |
60 //var tweets = new Array(); |
60 //var tweets = new Array(); |
130 function loaded_callback (json) { |
130 function loaded_callback (json) { |
131 |
131 |
132 // get current view (the first ???) |
132 // get current view (the first ???) |
133 view = json.views[0]; |
133 view = json.views[0]; |
134 |
134 |
135 // the tweets are by definition of the second annotation type |
135 // the tweets are by definition of the second annotation type FIXME ? |
136 tweet_annot_type = null; |
136 tweet_annot_type = null; |
137 if(typeof(view.annotation_types) !== "undefined" && view.annotation_types.length > 1) { |
137 if(typeof(view.annotation_types) !== "undefined" && view.annotation_types.length > 1) { |
138 tweet_annot_type = view.annotation_types[1]; |
138 tweet_annot_type = view.annotation_types[1]; |
139 } |
139 } |
140 |
140 |
246 |
246 |
247 var tweetDrawed = new Array(); |
247 var tweetDrawed = new Array(); |
248 var TweetHeight = 5; |
248 var TweetHeight = 5; |
249 |
249 |
250 // DRAW TWEETS ============================================ |
250 // DRAW TWEETS ============================================ |
251 for(var i=0; i<nbrframes;i++) { |
251 for(var i = 0; i < nbrframes; i++) { |
252 var addEheight = 5; |
252 var addEheight = 5; |
253 if (frames[i] != undefined){ |
253 if (frames[i] != undefined){ |
254 |
|
255 // by type |
254 // by type |
256 for (var j = 6; j>-1; j--){ |
255 |
257 if (frames[i].qualifVol[j]!=undefined){ |
256 for (var j = 6; j > -1; j--) { |
|
257 if (frames[i].qualifVol[j] != undefined) { |
258 // show tweet by type |
258 // show tweet by type |
259 for (var k = 0; k < frames[i].mytweetsID.length; k++) { |
259 for (var k = 0; k < frames[i].mytweetsID.length; k++) { |
|
260 |
260 if (frames[i].mytweetsID[k].qualification == j) { |
261 if (frames[i].mytweetsID[k].qualification == j) { |
261 var x = i*frameSize; |
262 var x = i * frameSize; |
262 var y = this.heightmax - addEheight; |
263 var y = this.heightmax - addEheight; |
|
264 |
263 if (this.yMax > y) { |
265 if (this.yMax > y) { |
264 this.yMax = y; |
266 this.yMax = y; |
265 } |
267 } |
266 |
268 |
267 var e = this.paper.rect(x, y, frameSize - margin, TweetHeight /* height */).attr({stroke:"#00","stroke-width":0.1, fill: colors[j]}); |
269 var e = this.paper.rect(x, y, frameSize - margin, TweetHeight /* height */).attr({stroke:"#00","stroke-width":0.1, fill: colors[j]}); |
268 addEheight += TweetHeight; |
270 addEheight += TweetHeight; |
269 e.time= frames[i].mytweetsID[k].timeframe; |
271 |
|
272 e.time= frames[i].mytweetsID[k].timeframe; |
270 e.title= frames[i].mytweetsID[k].title; |
273 e.title= frames[i].mytweetsID[k].title; |
271 |
274 |
272 e.mouseover(function(element) { return function (event) { |
275 e.mouseover(function(element) { return function (event) { |
|
276 |
273 // event.clientX and event.clientY are to raphael what event.pageX and pageY are to jquery. |
277 // event.clientX and event.clientY are to raphael what event.pageX and pageY are to jquery. |
274 self.TooltipWidget.show.call(self.TooltipWidget, element.title, element.attr("fill"), event.clientX - 106, event.clientY - 160); |
278 self.TooltipWidget.show.call(self.TooltipWidget, element.title, element.attr("fill"), event.clientX - 106, event.clientY - 160); |
275 element.displayed = true; |
279 element.displayed = true; |
276 }}(e)).mouseout(function(element) { return function () { |
280 }}(e)).mouseout(function(element) { return function () { |
277 self.TooltipWidget.hide.call(self); |
281 self.TooltipWidget.hide.call(self); |
278 }}(e)).mousedown(function () { |
282 }}(e)).mousedown(function () { |
279 self._Popcorn.currentTime(this.time/1000); |
283 self._Popcorn.currentTime(this.time/1000); |
280 }); |
284 }); |
281 __IriSP.jQuery(e.node).attr('id', 't'+k+''); |
285 |
282 __IriSP.jQuery(e.node).attr('title', frames[i].mytweetsID[k].title); |
286 IriSP.jQuery(e.node).attr('id', 't' + k + ''); |
283 __IriSP.jQuery(e.node).attr('begin', frames[i].mytweetsID[k].timeframe); |
287 IriSP.jQuery(e.node).attr('title', frames[i].mytweetsID[k].title); |
|
288 IriSP.jQuery(e.node).attr('begin', frames[i].mytweetsID[k].timeframe); |
284 } |
289 } |
285 } |
290 } |
286 } |
291 } |
287 } |
292 } |
288 } |
293 } |
290 } |
295 } |
291 // DRAW UI :: resize border and bgd |
296 // DRAW UI :: resize border and bgd |
292 var heightOfChart = (this.yMax-(this.height- this.yMax)); |
297 var heightOfChart = (this.yMax-(this.height- this.yMax)); |
293 var PaperBackground = this.paper.rect(0, this.yMax, this.width,heightOfChart).attr({fill:"#fff","stroke-width":0.1,opacity: 0.1}); |
298 var PaperBackground = this.paper.rect(0, this.yMax, this.width,heightOfChart).attr({fill:"#fff","stroke-width":0.1,opacity: 0.1}); |
294 var PaperBorder = this.paper.rect(0, this.yMax,this.width,1).attr({fill:"#fff",stroke: "none",opacity: 1}); |
299 var PaperBorder = this.paper.rect(0, this.yMax,this.width,1).attr({fill:"#fff",stroke: "none",opacity: 1}); |
295 var PaperSlider = this.paper.rect(0,20,1,heightOfChart).attr({fill:"#fc00ff",stroke: "none",opacity: 1}); |
300 |
296 |
301 this.paperSlider = this.paper.rect(0, this.yMax, 0, this.height).attr({fill:"#D4D5D5", stroke: "none", opacity: 1}); |
297 // decalage |
302 // decalage |
298 tweetSelection = this.paper.rect(-100,-100,5,5).attr({fill:"#fff",stroke: "none",opacity: 1}); |
303 tweetSelection = this.paper.rect(-100,-100,5,5).attr({fill:"#fff",stroke: "none",opacity: 1}); |
299 |
304 |
300 PaperSlider.toFront(); |
305 this.paperSlider.toBack(); |
301 PaperBackground.toBack(); |
306 PaperBackground.toBack(); |
302 } |
307 } |
303 |
308 |
304 if(typeof(PaperSlider) !== 'undefined' ) { |
309 this._Popcorn.listen("timeupdate", IriSP.wrap(this, this.sliderUpdater)); |
305 PaperSlider.toFront(); |
310 } |
306 } |
311 |
307 } |
312 IriSP.PolemicWidget.prototype.sliderUpdater = function() { |
308 |
313 |
309 |
314 var time = +this._Popcorn.currentTime(); |
310 |
315 var duration = +this._serializer.currentMedia().meta["dc:duration"]; |
|
316 |
|
317 this.paperSlider.attr("width", time * (this.width / (duration / 1000))); |
|
318 }; |
|
319 |
|
320 |