|
1 /* |
|
2 * |
|
3 * Copyright 2010 Institut de recherche et d'innovation |
|
4 * contributor(s) : Samuel Huron |
|
5 * |
|
6 * contact@iri.centrepompidou.fr |
|
7 * http://www.iri.centrepompidou.fr |
|
8 * |
|
9 * This software is a computer program whose purpose is to show and add annotations on a video . |
|
10 * This software is governed by the CeCILL-C license under French law and |
|
11 * abiding by the rules of distribution of free software. You can use, |
|
12 * modify and/ or redistribute the software under the terms of the CeCILL-C |
|
13 * license as circulated by CEA, CNRS and INRIA at the following URL |
|
14 * "http://www.cecill.info". |
|
15 * |
|
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. |
|
18 */ |
|
19 // CHART TIMELINE / VERSION PROTOTYPE :: |
|
20 |
|
21 |
|
22 var yMax = config.height; |
|
23 var PaperSlider; |
|
24 var heightOfChart; |
|
25 // Make and define the Raphael area |
|
26 //var paper = Raphael(document.getElementById(config.target),config.width, config.height); |
|
27 |
|
28 function ChartTimeLine (){ |
|
29 |
|
30 // variable |
|
31 // yMax |
|
32 var yCoef = 2; // coef for height of 1 tweet |
|
33 var frameSize = 5; // frame size |
|
34 var margin = 1; // marge between frame |
|
35 var lineSize = config.width; // timeline pixel width |
|
36 var nbrframes = lineSize/frameSize; // frame numbers |
|
37 var numberOfTweet = 0; // number of tweet overide later |
|
38 var duration = config.duration; // timescale width |
|
39 var frameLenght = lineSize/frameSize; // frame timescale |
|
40 var timeline; |
|
41 var colors = new Array("","#1D973D","#C5A62D","#CE0A15","#036AAE","#585858"); |
|
42 |
|
43 // array |
|
44 var tweets = new Array(); |
|
45 var element = new Array(); |
|
46 var cluster = new Array(); |
|
47 var frames = new Array(frameLenght); |
|
48 var slices = new Array(); |
|
49 |
|
50 |
|
51 // Classes ======================================================================= |
|
52 var Frames = function(){ |
|
53 |
|
54 var Myclusters; |
|
55 var x; |
|
56 var y; |
|
57 var width; |
|
58 var height; |
|
59 }; |
|
60 Frames = function(json){ |
|
61 // make my clusters |
|
62 // ou Frame vide |
|
63 }; |
|
64 Frames.prototype.draw = function(){ |
|
65 } |
|
66 Frames.prototype.zoom = function(){ |
|
67 } |
|
68 Frames.prototype.inside = function(){ |
|
69 } |
|
70 var Clusters = function(){ |
|
71 var Object; |
|
72 var yDist; |
|
73 var x; |
|
74 var y; |
|
75 var width; |
|
76 var height; |
|
77 }; |
|
78 Clusters = function(json){ |
|
79 // make my object |
|
80 }; |
|
81 var Tweet = function(){ |
|
82 } |
|
83 // Classes ======================================================================= |
|
84 |
|
85 // trace function |
|
86 var traceNum = 0; |
|
87 function trace(msg,value){ |
|
88 traceNum += 1; |
|
89 __IriSP.jQuery("<div>"+traceNum+" - "+msg+" : "+value+"</div>").appendTo("#output"); |
|
90 } |
|
91 |
|
92 // Refactoring (parametere) ************************************************************ |
|
93 // color translastion |
|
94 function colorTranslation(value){ |
|
95 if(value == "Q"){ |
|
96 return 2; |
|
97 }else if(value =="REF"){ |
|
98 return 4; |
|
99 }else if(value =="OK"){ |
|
100 return 1; |
|
101 }else if(value =="KO"){ |
|
102 return 3; |
|
103 }else if(value ==""){ |
|
104 return 5; |
|
105 } |
|
106 } |
|
107 |
|
108 |
|
109 // Refactoring (parametere) ************************************************************ |
|
110 // load tweets send in parameters |
|
111 __IriSP.jQuery.ajax({ |
|
112 dataType: "jsonp", |
|
113 url:config.metadata, |
|
114 success : function(json){ |
|
115 trace("load",""); |
|
116 __IriSP.jQuery.each(json.annotations, function(i,item) { |
|
117 |
|
118 var MyTime = Math.floor(item.begin/duration*lineSize); |
|
119 var Myframe = Math.floor(MyTime/lineSize*frameLenght); |
|
120 |
|
121 if (item.content['polemics'] != undefined) { |
|
122 if (item.content['polemics'][0] != null) { |
|
123 |
|
124 for(var j=0; j<item.content['polemics'].length; j++){ |
|
125 |
|
126 tweets[numberOfTweet] = { |
|
127 id:i, |
|
128 qualification:colorTranslation(item.content['polemics'][j]), |
|
129 yIndicator:MyTime, |
|
130 yframe:Myframe, |
|
131 title:item.content['title'], |
|
132 timeframe:item.begin |
|
133 } |
|
134 numberOfTweet+=1; |
|
135 } |
|
136 }else{ |
|
137 //trace("k = ",i); |
|
138 tweets[numberOfTweet] = { |
|
139 id:i, |
|
140 qualification:colorTranslation(""), |
|
141 yIndicator:MyTime, |
|
142 yframe:Myframe, |
|
143 title:item.content['title'], |
|
144 timeframe:item.begin |
|
145 } |
|
146 numberOfTweet+=1; |
|
147 } |
|
148 |
|
149 } else { |
|
150 //trace("tweet qualification = ","null"); |
|
151 } |
|
152 }); |
|
153 trace("======= ",numberOfTweet); |
|
154 DrawTweets (); |
|
155 |
|
156 } |
|
157 }); |
|
158 |
|
159 |
|
160 // tweet Drawing (in raphael) |
|
161 function DrawTweets (){ |
|
162 // GROUPES TWEET ============================================ |
|
163 // Count nbr of cluster and tweet in a frame an save int in "frames" |
|
164 numberOfTweet = tweets.length; |
|
165 for(var i=0; i<nbrframes; i++) { |
|
166 for(var j=0; j<numberOfTweet; j++) { |
|
167 |
|
168 if (i==tweets[j].yframe){ |
|
169 |
|
170 var k = tweets[j].qualification; |
|
171 |
|
172 // make array for frame cluster |
|
173 if(frames[i]==undefined){ |
|
174 frames[i] = {id:i, |
|
175 qualifVol:new Array(), |
|
176 mytweetsID:new Array() |
|
177 }; |
|
178 } |
|
179 // add my tweet to frame |
|
180 frames[i].mytweetsID.push(tweets[j]); |
|
181 |
|
182 // count opinion by frame |
|
183 if( frames[i].qualifVol[k] == undefined){ |
|
184 frames[i].qualifVol[k] = 1; |
|
185 }else{ |
|
186 frames[i].qualifVol[k] += 1; |
|
187 } |
|
188 |
|
189 } |
|
190 } |
|
191 } |
|
192 |
|
193 // GROUPES TWEET ============================================ |
|
194 // max of tweet by Frame |
|
195 var max = 0; |
|
196 for(var i=0; i<nbrframes; i++) { |
|
197 var moy = 0; |
|
198 for (var j=0; j<6; j++){ |
|
199 if (frames[i]!=undefined){ |
|
200 if (frames[i].qualifVol[j]!=undefined){ |
|
201 moy += frames[i].qualifVol[j] |
|
202 } |
|
203 } |
|
204 } |
|
205 //trace("frame "+i,moy); |
|
206 if (moy>max){max=moy;} |
|
207 } |
|
208 |
|
209 var tweetDrawed = new Array(); |
|
210 var TweetHeight = 5; |
|
211 // DRAW TWEETS ============================================ |
|
212 for(var i=0; i<nbrframes;i++) { |
|
213 var addEheight = 5; |
|
214 if (frames[i]!=undefined){ |
|
215 trace (i+" k=",frames[i].mytweetsID.length); |
|
216 // by type |
|
217 for (var j=6; j>-1; j--){ |
|
218 if (frames[i].qualifVol[j]!=undefined){ |
|
219 // show tweet by type |
|
220 for (var k=0; k<frames[i].mytweetsID.length; k++){ |
|
221 if (frames[i].mytweetsID[k].qualification==j){ |
|
222 var y=config.heightmax-addEheight; |
|
223 if(yMax>y){yMax=y;} |
|
224 e = paper.rect( i*frameSize, // x |
|
225 y, // y |
|
226 frameSize-margin, // width |
|
227 TweetHeight // height |
|
228 ).attr({stroke:"#00","stroke-width":0.1, fill: colors[j]}); |
|
229 addEheight +=TweetHeight; |
|
230 e.time= frames[i].mytweetsID[k].timeframe; |
|
231 e.title= frames[i].mytweetsID[k].title; |
|
232 e.mouseover(function () { |
|
233 //this.attr({stroke:"#fff","stroke-width":5}); |
|
234 //this.toFront(); |
|
235 }).mouseout(function () { |
|
236 //this.attr({stroke:"#00","stroke-width":0.1}); |
|
237 }).mousedown(function () { |
|
238 __IriSP.MyApiPlayer.seek(this.time/1000) |
|
239 }); |
|
240 __IriSP.jQuery(e.node).attr('id', 't'+k+''); |
|
241 __IriSP.jQuery(e.node).attr('title', frames[i].mytweetsID[k].title); |
|
242 __IriSP.jQuery(e.node).attr('begin', frames[i].mytweetsID[k].timeframe); |
|
243 var tempPosition = {x:i*frameSize,y:config.heightmax-addEheight} |
|
244 addTip(e.node, frames[i].mytweetsID[k].title,colors[j],tempPosition); |
|
245 //frames[i].mytweetsID.pop(); |
|
246 } |
|
247 } |
|
248 } |
|
249 } |
|
250 } |
|
251 |
|
252 } |
|
253 // DRAW UI :: resize border and bgd |
|
254 heightOfChart = (yMax-(config.height-yMax)); |
|
255 PaperBackground = paper.rect(0,yMax,config.width,heightOfChart).attr({fill:"#fff","stroke-width":0.1,opacity: 0.1}); |
|
256 PaperBorder = paper.rect(0,yMax,config.width,1).attr({fill:"#fff",stroke: "none",opacity: 1}); |
|
257 PaperSlider = paper.rect(0,20,1,heightOfChart).attr({fill:"#fff",stroke: "none",opacity: 1}); |
|
258 |
|
259 // decalage |
|
260 tweetSelection = paper.rect(-100,-100,5,5).attr({fill:"#fff",stroke: "none",opacity: 1}); |
|
261 |
|
262 PaperSlider.toFront(); |
|
263 PaperBackground.toBack(); |
|
264 } |
|
265 PaperSlider.toFront(); |
|
266 } |
|
267 |
|
268 |
|
269 $(document).mousemove(function(e){ |
|
270 if (over){ |
|
271 __IriSP.jQuery("#tip").css("left", e.pageX-106).css("top", e.pageY-160); |
|
272 __IriSP.jQuery("#tipcolor").css("background-color", tipColor) |
|
273 __IriSP.jQuery("#tiptext").text(tipText); |
|
274 __IriSP.jQuery("#tip").show(); |
|
275 }else{ |
|
276 __IriSP.jQuery("#tip").css("left", -10000).css("top", -100000); |
|
277 //tweetSelection.attr({x:-100,y:-100}); |
|
278 } |
|
279 }); |
|
280 |
|
281 var over = false; |
|
282 var tipText = ""; |
|
283 var tipColor = "#efefef"; |
|
284 var tweetSelection; |
|
285 var PaperSlider; |
|
286 |
|
287 // AddTip ****************************************************************************** |
|
288 function addTip(node, txt,color,tempPosition){ |
|
289 __IriSP.jQuery(node).mouseover(function(){ |
|
290 tipText = txt; |
|
291 //tip.hide();//fadeIn(0); |
|
292 tipColor = color; |
|
293 over = true; |
|
294 //tweetSelection.attr(tempPosition); |
|
295 //tweetSelection.toFront(); |
|
296 }).mouseout(function(){ |
|
297 //tip.show()//tip.fadeOut(0); |
|
298 over = false; |
|
299 }); |
|
300 |
|
301 |
|
302 } |
|
303 |
|
304 $(document).ready(function() { |
|
305 var tip = __IriSP.jQuery("#tip").hide(); |
|
306 }); |