16 * The fact that you are presently reading this means that you have had |
16 * The fact that you are presently reading this means that you have had |
17 * knowledge of the CeCILL-C license and that you accept its terms. |
17 * knowledge of the CeCILL-C license and that you accept its terms. |
18 */ |
18 */ |
19 // CHART TIMELINE / VERSION PROTOTYPE :: |
19 // CHART TIMELINE / VERSION PROTOTYPE :: |
20 |
20 |
21 IriSP.PolemicWidget = function(Popcorn, config, Serializer) { |
21 define(["IriSP", "widgets", "util", "tooltipWidget"], function() { |
22 IriSP.Widget.call(this, Popcorn, config, Serializer); |
22 |
23 |
23 IriSP.PolemicWidget = function(Popcorn, config, Serializer) { |
24 this.userPol = new Array(); |
24 IriSP.Widget.call(this, Popcorn, config, Serializer); |
25 this.userNoPol = new Array(); |
25 |
26 this.userst = new Array(); |
26 this.userPol = new Array(); |
27 this.numberOfTweet = 0; |
27 this.userNoPol = new Array(); |
28 this.Users; |
28 this.userst = new Array(); |
29 this.TweetPolemic; |
29 this.numberOfTweet = 0; |
30 this.yMax = this.height; |
30 this.Users; |
31 this.PaperSlider; |
31 this.TweetPolemic; |
32 this.heightOfChart; |
32 this.yMax = this.height; |
33 this.tweets = new Array(); |
33 this.PaperSlider; |
34 this.svgElements = new Array(); |
34 this.heightOfChart; |
35 |
35 this.tweets = new Array(); |
36 // Make and define the Raphael area |
36 this.svgElements = new Array(); |
37 this.paper = Raphael(document.getElementById(this._id), config.width, config.height); |
|
38 |
|
39 }; |
|
40 |
|
41 IriSP.PolemicWidget.prototype = new IriSP.Widget(); |
|
42 |
|
43 IriSP.PolemicWidget.prototype.draw = function() { |
|
44 |
|
45 // variable |
|
46 // yMax |
|
47 |
37 |
48 var self = this; |
38 // Make and define the Raphael area |
49 var yCoef = 2; // coef for height of 1 tweet |
39 this.paper = Raphael(document.getElementById(this._id), config.width, config.height); |
50 var frameSize = 5; // frame size |
|
51 var margin = 1; // marge between frame |
|
52 var lineSize = this.width; // timeline pixel width |
|
53 var nbrframes = lineSize/frameSize; // frame numbers |
|
54 var numberOfTweet = 0; // number of tweet overide later |
|
55 var duration = +this._serializer.currentMedia().meta["dc:duration"]; // timescale width |
|
56 var frameLength = lineSize / frameSize; // frame timescale |
|
57 var timeline; |
|
58 var colors = new Array("","#1D973D","#C5A62D","#CE0A15","#036AAE","#585858"); |
|
59 |
40 |
60 // array |
41 }; |
61 //var tweets = new Array(); |
42 |
62 var element = new Array(); |
43 IriSP.PolemicWidget.prototype = new IriSP.Widget(); |
63 var cluster = new Array(); |
|
64 var frames = new Array(frameLength); |
|
65 var slices = new Array(); |
|
66 |
44 |
|
45 IriSP.PolemicWidget.prototype.draw = function() { |
67 |
46 |
68 // Classes ======================================================================= |
47 // variable |
69 var Frames = function(){ |
48 // yMax |
70 |
49 |
71 var Myclusters; |
50 var self = this; |
72 var x; |
51 var yCoef = 2; // coef for height of 1 tweet |
73 var y; |
52 var frameSize = 5; // frame size |
74 var width; |
53 var margin = 1; // marge between frame |
75 var height; |
54 var lineSize = this.width; // timeline pixel width |
76 }; |
55 var nbrframes = lineSize/frameSize; // frame numbers |
77 Frames = function(json){ |
56 var numberOfTweet = 0; // number of tweet overide later |
78 // make my clusters |
57 var duration = +this._serializer.currentMedia().meta["dc:duration"]; // timescale width |
79 // ou Frame vide |
58 var frameLength = lineSize / frameSize; // frame timescale |
80 }; |
59 var timeline; |
81 Frames.prototype.draw = function(){ |
60 var colors = new Array("","#1D973D","#C5A62D","#CE0A15","#036AAE","#585858"); |
82 }; |
61 |
83 Frames.prototype.zoom = function(){ |
62 // array |
84 }; |
63 //var tweets = new Array(); |
85 Frames.prototype.inside = function(){ |
64 var element = new Array(); |
86 }; |
65 var cluster = new Array(); |
87 var Clusters = function(){ |
66 var frames = new Array(frameLength); |
88 var Object; |
67 var slices = new Array(); |
89 var yDist; |
68 |
90 var x; |
69 |
91 var y; |
70 // Classes ======================================================================= |
92 var width; |
71 var Frames = function(){ |
93 var height; |
72 |
94 }; |
73 var Myclusters; |
95 Clusters = function(json){ |
74 var x; |
96 // make my object |
75 var y; |
97 }; |
76 var width; |
98 var Tweet = function(){ |
77 var height; |
99 }; |
78 }; |
100 // Classes ======================================================================= |
79 Frames = function(json){ |
101 |
80 // make my clusters |
102 // Refactoring (parametere) ************************************************************ |
81 // ou Frame vide |
103 // color translastion |
82 }; |
104 var qTweet_0 =0; |
83 Frames.prototype.draw = function(){ |
105 var qTweet_Q =0; |
84 }; |
106 var qTweet_REF=0; |
85 Frames.prototype.zoom = function(){ |
107 var qTweet_OK =0; |
86 }; |
108 var qTweet_KO =0; |
87 Frames.prototype.inside = function(){ |
109 function colorTranslation(value){ |
88 }; |
110 if(value == "Q"){ |
89 var Clusters = function(){ |
111 qTweet_Q+=1; |
90 var Object; |
112 return 2; |
91 var yDist; |
113 }else if(value =="REF"){ |
92 var x; |
114 qTweet_REF+=1; |
93 var y; |
115 return 4; |
94 var width; |
116 }else if(value =="OK"){ |
95 var height; |
117 qTweet_OK+=1; |
96 }; |
118 return 1; |
97 Clusters = function(json){ |
119 }else if(value =="KO"){ |
98 // make my object |
120 qTweet_KO+=1; |
99 }; |
121 return 3; |
100 var Tweet = function(){ |
122 }else if(value ==""){ |
101 }; |
123 qTweet_0+=1; |
102 // Classes ======================================================================= |
124 return 5; |
103 |
125 } |
104 // Refactoring (parametere) ************************************************************ |
126 } |
105 // color translastion |
127 |
106 var qTweet_0 =0; |
128 |
107 var qTweet_Q =0; |
129 this._serializer.sync(function(data) { loaded_callback.call(self, data) }); |
108 var qTweet_REF=0; |
130 |
109 var qTweet_OK =0; |
131 function loaded_callback (json) { |
110 var qTweet_KO =0; |
132 |
111 function colorTranslation(value){ |
133 // get current view (the first ???) |
112 if(value == "Q"){ |
134 view = json.views[0]; |
113 qTweet_Q+=1; |
135 |
114 return 2; |
136 // the tweets are by definition of the second annotation type FIXME ? |
115 }else if(value =="REF"){ |
137 tweet_annot_type = null; |
116 qTweet_REF+=1; |
138 if(typeof(view.annotation_types) !== "undefined" && view.annotation_types.length > 1) { |
117 return 4; |
139 tweet_annot_type = view.annotation_types[1]; |
118 }else if(value =="OK"){ |
140 } |
119 qTweet_OK+=1; |
141 |
120 return 1; |
142 for(var i = 0; i < json.annotations.length; i++) { |
121 }else if(value =="KO"){ |
143 var item = json.annotations[i]; |
122 qTweet_KO+=1; |
144 var MyTime = Math.floor(item.begin/duration*lineSize); |
123 return 3; |
145 var Myframe = Math.floor(MyTime/lineSize*frameLength); |
124 }else if(value ==""){ |
146 |
125 qTweet_0+=1; |
147 if (typeof(item.meta) !== "undefined" |
126 return 5; |
148 && typeof(item.meta["id-ref"]) !== "undefined" |
|
149 && item.meta["id-ref"] === tweet_annot_type) { |
|
150 |
|
151 var MyTJson = JSON.parse(item.meta['dc:source']['content']); |
|
152 |
|
153 if (item.content['polemics'] != undefined |
|
154 && item.content['polemics'][0] != null) { |
|
155 |
|
156 |
|
157 for(var j=0; j<item.content['polemics'].length; j++){ |
|
158 |
|
159 this.tweets[numberOfTweet] = { |
|
160 id:i, |
|
161 qualification:colorTranslation(item.content['polemics'][j]), |
|
162 yIndicator:MyTime, |
|
163 yframe:Myframe, |
|
164 title:item.content['title'], |
|
165 timeframe:item.begin, |
|
166 userId: MyTJson.id, |
|
167 userScreenName: MyTJson.screen_name, |
|
168 tsource:MyTJson |
|
169 }; |
|
170 numberOfTweet+=1; |
|
171 |
|
172 } |
|
173 } |
|
174 else { |
|
175 this.tweets[numberOfTweet] = { |
|
176 id:i, |
|
177 qualification:colorTranslation(""), |
|
178 yIndicator:MyTime, |
|
179 yframe:Myframe, |
|
180 title:item.content['title'], |
|
181 timeframe:item.begin, |
|
182 userId: MyTJson.id, |
|
183 userScreenName: MyTJson.screen_name, |
|
184 tsource:MyTJson |
|
185 |
|
186 }; |
|
187 numberOfTweet+=1; |
|
188 } |
|
189 |
|
190 } |
|
191 }; |
|
192 |
|
193 DrawTweets.call (this); // FIXME: ugly. |
|
194 |
|
195 }; |
|
196 |
|
197 // tweet Drawing (in raphael) |
|
198 function DrawTweets (){ |
|
199 // GROUPES TWEET ============================================ |
|
200 // Count nbr of cluster and tweet in a frame an save int in "frames" |
|
201 numberOfTweet = this.tweets.length; |
|
202 for(var i=0; i<nbrframes; i++) { |
|
203 for(var j=0; j<numberOfTweet; j++) { |
|
204 |
|
205 if (i==this.tweets[j].yframe){ |
|
206 |
|
207 var k = this.tweets[j].qualification; |
|
208 |
|
209 // make array for frame cluster |
|
210 if(frames[i]==undefined){ |
|
211 frames[i] = {id:i, |
|
212 qualifVol:new Array(), |
|
213 mytweetsID:new Array() |
|
214 }; |
|
215 } |
|
216 // add my tweet to frame |
|
217 frames[i].mytweetsID.push(this.tweets[j]); |
|
218 |
|
219 // count opinion by frame |
|
220 if( frames[i].qualifVol[k] == undefined){ |
|
221 frames[i].qualifVol[k] = 1; |
|
222 }else{ |
|
223 frames[i].qualifVol[k] += 1; |
|
224 } |
|
225 |
|
226 } |
|
227 } |
127 } |
228 } |
128 } |
229 |
129 |
230 // GROUPES TWEET ============================================ |
130 |
231 // max of tweet by Frame |
131 this._serializer.sync(function(data) { loaded_callback.call(self, data) }); |
232 var max = 0; |
132 |
233 for(var i = 0; i < nbrframes; i++) { |
133 function loaded_callback (json) { |
234 var moy = 0; |
134 |
235 for (var j = 0; j < 6; j++) { |
135 // get current view (the first ???) |
236 if (frames[i] != undefined) { |
136 view = json.views[0]; |
237 if (frames[i].qualifVol[j] != undefined) { |
137 |
238 moy += frames[i].qualifVol[j]; |
138 // the tweets are by definition of the second annotation type FIXME ? |
|
139 tweet_annot_type = null; |
|
140 if(typeof(view.annotation_types) !== "undefined" && view.annotation_types.length > 1) { |
|
141 tweet_annot_type = view.annotation_types[1]; |
|
142 } |
|
143 |
|
144 for(var i = 0; i < json.annotations.length; i++) { |
|
145 var item = json.annotations[i]; |
|
146 var MyTime = Math.floor(item.begin/duration*lineSize); |
|
147 var Myframe = Math.floor(MyTime/lineSize*frameLength); |
|
148 |
|
149 if (typeof(item.meta) !== "undefined" |
|
150 && typeof(item.meta["id-ref"]) !== "undefined" |
|
151 && item.meta["id-ref"] === tweet_annot_type) { |
|
152 |
|
153 var MyTJson = JSON.parse(item.meta['dc:source']['content']); |
|
154 |
|
155 if (item.content['polemics'] != undefined |
|
156 && item.content['polemics'][0] != null) { |
|
157 |
|
158 |
|
159 for(var j=0; j<item.content['polemics'].length; j++){ |
|
160 |
|
161 this.tweets[numberOfTweet] = { |
|
162 id:i, |
|
163 qualification:colorTranslation(item.content['polemics'][j]), |
|
164 yIndicator:MyTime, |
|
165 yframe:Myframe, |
|
166 title:item.content['title'], |
|
167 timeframe:item.begin, |
|
168 userId: MyTJson.id, |
|
169 userScreenName: MyTJson.screen_name, |
|
170 tsource:MyTJson |
|
171 }; |
|
172 numberOfTweet+=1; |
|
173 |
|
174 } |
|
175 } |
|
176 else { |
|
177 this.tweets[numberOfTweet] = { |
|
178 id:i, |
|
179 qualification:colorTranslation(""), |
|
180 yIndicator:MyTime, |
|
181 yframe:Myframe, |
|
182 title:item.content['title'], |
|
183 timeframe:item.begin, |
|
184 userId: MyTJson.id, |
|
185 userScreenName: MyTJson.screen_name, |
|
186 tsource:MyTJson |
|
187 |
|
188 }; |
|
189 numberOfTweet+=1; |
|
190 } |
|
191 |
|
192 } |
|
193 }; |
|
194 |
|
195 DrawTweets.call (this); // FIXME: ugly. |
|
196 |
|
197 }; |
|
198 |
|
199 // tweet Drawing (in raphael) |
|
200 function DrawTweets (){ |
|
201 // GROUPES TWEET ============================================ |
|
202 // Count nbr of cluster and tweet in a frame an save int in "frames" |
|
203 numberOfTweet = this.tweets.length; |
|
204 for(var i=0; i<nbrframes; i++) { |
|
205 for(var j=0; j<numberOfTweet; j++) { |
|
206 |
|
207 if (i==this.tweets[j].yframe){ |
|
208 |
|
209 var k = this.tweets[j].qualification; |
|
210 |
|
211 // make array for frame cluster |
|
212 if(frames[i]==undefined){ |
|
213 frames[i] = {id:i, |
|
214 qualifVol:new Array(), |
|
215 mytweetsID:new Array() |
|
216 }; |
|
217 } |
|
218 // add my tweet to frame |
|
219 frames[i].mytweetsID.push(this.tweets[j]); |
|
220 |
|
221 // count opinion by frame |
|
222 if( frames[i].qualifVol[k] == undefined){ |
|
223 frames[i].qualifVol[k] = 1; |
|
224 }else{ |
|
225 frames[i].qualifVol[k] += 1; |
|
226 } |
|
227 |
239 } |
228 } |
240 } |
229 } |
241 } |
230 } |
242 |
231 |
243 if (moy > max) { |
232 // GROUPES TWEET ============================================ |
244 max = moy; |
233 // max of tweet by Frame |
|
234 var max = 0; |
|
235 for(var i = 0; i < nbrframes; i++) { |
|
236 var moy = 0; |
|
237 for (var j = 0; j < 6; j++) { |
|
238 if (frames[i] != undefined) { |
|
239 if (frames[i].qualifVol[j] != undefined) { |
|
240 moy += frames[i].qualifVol[j]; |
|
241 } |
|
242 } |
|
243 } |
|
244 |
|
245 if (moy > max) { |
|
246 max = moy; |
|
247 } |
245 } |
248 } |
246 } |
249 |
247 |
250 var tweetDrawed = new Array(); |
248 var tweetDrawed = new Array(); |
251 var TweetHeight = 5; |
249 var TweetHeight = 5; |
252 |
250 |
253 // DRAW TWEETS ============================================ |
251 // DRAW TWEETS ============================================ |
254 for(var i = 0; i < nbrframes; i++) { |
252 for(var i = 0; i < nbrframes; i++) { |
255 var addEheight = 5; |
253 var addEheight = 5; |
256 if (frames[i] != undefined){ |
254 if (frames[i] != undefined){ |
257 // by type |
255 // by type |
258 |
256 |
259 for (var j = 6; j > -1; j--) { |
257 for (var j = 6; j > -1; j--) { |
260 if (frames[i].qualifVol[j] != undefined) { |
258 if (frames[i].qualifVol[j] != undefined) { |
261 // show tweet by type |
259 // show tweet by type |
262 for (var k = 0; k < frames[i].mytweetsID.length; k++) { |
260 for (var k = 0; k < frames[i].mytweetsID.length; k++) { |
263 |
261 |
264 if (frames[i].mytweetsID[k].qualification == j) { |
262 if (frames[i].mytweetsID[k].qualification == j) { |
265 var x = i * frameSize; |
263 var x = i * frameSize; |
266 var y = this.heightmax - addEheight; |
264 var y = this.heightmax - addEheight; |
267 |
265 |
268 if (this.yMax > y) { |
266 if (this.yMax > y) { |
269 this.yMax = y; |
267 this.yMax = y; |
270 } |
|
271 |
|
272 var e = this.paper.rect(x, y, frameSize - margin, TweetHeight /* height */).attr({stroke:"#00","stroke-width":0.1, fill: colors[j]}); |
|
273 this.svgElements.push(e); |
|
274 |
|
275 addEheight += TweetHeight; |
|
276 |
|
277 e.time= frames[i].mytweetsID[k].timeframe; |
|
278 e.title= frames[i].mytweetsID[k].title; |
|
279 |
|
280 e.mouseover(function(element) { return function (event) { |
|
281 // event.clientX and event.clientY are to raphael what event.pageX and pageY are to jquery. |
|
282 self.TooltipWidget.show.call(self.TooltipWidget, element.title, element.attr("fill"), event.clientX - 106, event.clientY - 160); |
|
283 element.displayed = true; |
|
284 debugger; |
|
285 }}(e)).mouseout(function(element) { return function () { |
|
286 self.TooltipWidget.hide.call(self.TooltipWidget); |
|
287 }}(e)).mousedown(function () { |
|
288 self._Popcorn.currentTime(this.time/1000); |
|
289 }); |
|
290 |
|
291 IriSP.jQuery(e.node).attr('id', 't' + k + ''); |
|
292 IriSP.jQuery(e.node).attr('title', frames[i].mytweetsID[k].title); |
|
293 IriSP.jQuery(e.node).attr('begin', frames[i].mytweetsID[k].timeframe); |
268 } |
294 } |
269 |
|
270 var e = this.paper.rect(x, y, frameSize - margin, TweetHeight /* height */).attr({stroke:"#00","stroke-width":0.1, fill: colors[j]}); |
|
271 this.svgElements.push(e); |
|
272 |
|
273 addEheight += TweetHeight; |
|
274 |
|
275 e.time= frames[i].mytweetsID[k].timeframe; |
|
276 e.title= frames[i].mytweetsID[k].title; |
|
277 |
|
278 e.mouseover(function(element) { return function (event) { |
|
279 // event.clientX and event.clientY are to raphael what event.pageX and pageY are to jquery. |
|
280 self.TooltipWidget.show.call(self.TooltipWidget, element.title, element.attr("fill"), event.clientX - 106, event.clientY - 160); |
|
281 element.displayed = true; |
|
282 debugger; |
|
283 }}(e)).mouseout(function(element) { return function () { |
|
284 self.TooltipWidget.hide.call(self.TooltipWidget); |
|
285 }}(e)).mousedown(function () { |
|
286 self._Popcorn.currentTime(this.time/1000); |
|
287 }); |
|
288 |
|
289 IriSP.jQuery(e.node).attr('id', 't' + k + ''); |
|
290 IriSP.jQuery(e.node).attr('title', frames[i].mytweetsID[k].title); |
|
291 IriSP.jQuery(e.node).attr('begin', frames[i].mytweetsID[k].timeframe); |
|
292 } |
295 } |
293 } |
296 } |
294 } |
297 } |
295 } |
298 } |
296 } |
299 |
297 |
300 } |
298 } |
301 // DRAW UI :: resize border and bgd |
299 // DRAW UI :: resize border and bgd |
302 this.paperBackground = this.paper.rect(0, 0, this.width, this.heightmax).attr({fill:"#F8F8F8","stroke-width":0.1,opacity: 1}); |
300 this.paperBackground = this.paper.rect(0, 0, this.width, this.heightmax).attr({fill:"#F8F8F8","stroke-width":0.1,opacity: 1}); |
303 // var PaperBorder = this.paper.rect(0, this.yMax,this.width,1).attr({fill:"#fff",stroke: "none",opacity: 1}); |
301 // var PaperBorder = this.paper.rect(0, this.yMax,this.width,1).attr({fill:"#fff",stroke: "none",opacity: 1}); |
304 |
302 |
305 this.paperSlider = this.paper.rect(0, 0, 0, this.heightmax).attr({fill:"#D4D5D5", stroke: "none", opacity: 1}); |
303 this.paperSlider = this.paper.rect(0, 0, 0, this.heightmax).attr({fill:"#D4D5D5", stroke: "none", opacity: 1}); |
306 |
304 |
307 // the small white line displayed over the slider. |
305 // the small white line displayed over the slider. |
308 this.sliderTip = this.paper.rect(0, 0, 1, this.heightmax).attr({fill:"#fc00ff", stroke: "none", opacity: 1}); |
306 this.sliderTip = this.paper.rect(0, 0, 1, this.heightmax).attr({fill:"#fc00ff", stroke: "none", opacity: 1}); |
309 |
307 |
310 // decalage |
308 // decalage |
311 // tweetSelection = this.paper.rect(-100,-100,5,5).attr({fill:"#fff",stroke: "none",opacity: 1}); |
309 // tweetSelection = this.paper.rect(-100,-100,5,5).attr({fill:"#fff",stroke: "none",opacity: 1}); |
312 |
310 |
313 |
311 |
314 this.paperSlider.toBack(); |
312 this.paperSlider.toBack(); |
315 this.paperBackground.toBack(); |
313 this.paperBackground.toBack(); |
316 this.sliderTip.toFront(); |
314 this.sliderTip.toFront(); |
317 } |
315 } |
318 |
316 |
319 this._Popcorn.listen("timeupdate", IriSP.wrap(this, this.sliderUpdater)); |
317 this._Popcorn.listen("timeupdate", IriSP.wrap(this, this.sliderUpdater)); |
320 } |
318 } |
321 |
319 |
322 IriSP.PolemicWidget.prototype.sliderUpdater = function() { |
320 IriSP.PolemicWidget.prototype.sliderUpdater = function() { |
323 |
321 |
324 var time = +this._Popcorn.currentTime(); |
322 var time = +this._Popcorn.currentTime(); |
325 var duration = +this._serializer.currentMedia().meta["dc:duration"]; |
323 var duration = +this._serializer.currentMedia().meta["dc:duration"]; |
326 |
324 |
327 this.paperSlider.attr("width", time * (this.width / (duration / 1000))); |
325 this.paperSlider.attr("width", time * (this.width / (duration / 1000))); |
328 |
326 |
329 this.sliderTip.attr("x", time * (this.width / (duration / 1000))); |
327 this.sliderTip.attr("x", time * (this.width / (duration / 1000))); |
330 }; |
328 }; |
331 }); |
329 |
332 |
330 |
|