|
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> |
|
2 <html xmlns="http://www.w3.org/1999/xhtml"> |
|
3 <head> |
|
4 <title>Example raphael</title> |
|
5 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> |
|
6 |
|
7 </head> |
|
8 <body> |
|
9 |
|
10 |
|
11 <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js'></script> |
|
12 <script type="text/javascript" src="raphael-min.js"></script> |
|
13 |
|
14 |
|
15 |
|
16 |
|
17 |
|
18 |
|
19 <script type="text/javascript"> |
|
20 |
|
21 // configuration |
|
22 var config = { |
|
23 target:"charttimeline", |
|
24 x:8, |
|
25 y:438, |
|
26 width:650, |
|
27 height:400, |
|
28 heightmax:400 |
|
29 } |
|
30 // Make and define the Raphael area |
|
31 var paper = Raphael(config.x,config.y,config.width, config.height); |
|
32 |
|
33 // variable |
|
34 var yCoef = 2; // coef for height of 1 tweet |
|
35 var frameSize = 5; // frame size |
|
36 var margin = 1; // marge between frame |
|
37 var lineSize = 650; // timeline pixel width |
|
38 var nbrframes = lineSize/frameSize; // frame numbers |
|
39 var numberOfTweet=0; // number of tweet overide later |
|
40 var duration = 4299820 ; // timescale width |
|
41 var frameLenght =lineSize/frameSize;// frame timescale |
|
42 |
|
43 var timeline; |
|
44 |
|
45 // array |
|
46 var tweets = new Array(); |
|
47 var element = new Array(); |
|
48 var cluster = new Array(); |
|
49 var frames = new Array(frameLenght); |
|
50 var slices = new Array(); |
|
51 |
|
52 // Refactoring (parametere) ************************************************************ |
|
53 var colors = new Array("","#1D973D","#C5A62D","#CE0A15","#036AAE","#585858"); |
|
54 |
|
55 // trace function |
|
56 var traceNum = 0; |
|
57 function trace(msg,value){ |
|
58 traceNum += 1; |
|
59 $("<div>"+traceNum+" - "+msg+" : "+value+"</div>").appendTo("#Ldt-output"); |
|
60 } |
|
61 |
|
62 // Refactoring (parametere) ************************************************************ |
|
63 // color translastion |
|
64 function colorTranslation(value){ |
|
65 if(value == "Q"){ |
|
66 return 2; |
|
67 }else if(value =="REF"){ |
|
68 return 4; |
|
69 }else if(value =="OK"){ |
|
70 return 1; |
|
71 }else if(value =="KO"){ |
|
72 return 3; |
|
73 }else if(value ==""){ |
|
74 return 5; |
|
75 } |
|
76 } |
|
77 |
|
78 |
|
79 // Refactoring (parametere) ************************************************************ |
|
80 // load tweets send in parameters |
|
81 $.ajax({ |
|
82 dataType: "json", |
|
83 url:"metadata.json", |
|
84 success : function(json){ |
|
85 trace("load",""); |
|
86 $.each(json.annotations, function(i,item) { |
|
87 |
|
88 var MyTime = Math.floor(item.begin/duration*lineSize); |
|
89 var Myframe = Math.floor(MyTime/lineSize*frameLenght); |
|
90 |
|
91 if (item.content['polemics'] != undefined) { |
|
92 |
|
93 if (item.content['polemics'][0] != null) { |
|
94 |
|
95 for(var j=0; j<item.content['polemics'].length; j++){ |
|
96 |
|
97 |
|
98 |
|
99 tweets[numberOfTweet] = { |
|
100 id:i, |
|
101 qualification:colorTranslation(item.content['polemics'][j]), |
|
102 yIndicator:MyTime, |
|
103 yframe:Myframe |
|
104 } |
|
105 //trace("t","y = "+tweets[numberOfTweet].yIndicator+" | yf = "+tweets[numberOfTweet].yframe+" | q = "+tweets[numberOfTweet].qualification); |
|
106 numberOfTweet+=1; |
|
107 } |
|
108 }else{ |
|
109 //trace("k = ",i); |
|
110 tweets[numberOfTweet] = { |
|
111 id:i, |
|
112 qualification:colorTranslation(""), |
|
113 yIndicator:MyTime, |
|
114 yframe:Myframe |
|
115 } |
|
116 numberOfTweet+=1; |
|
117 } |
|
118 |
|
119 } else { |
|
120 //trace("tweet qualification = ","null"); |
|
121 } |
|
122 }); |
|
123 trace("======= ",numberOfTweet); |
|
124 DrawTweets (); |
|
125 |
|
126 } |
|
127 }); |
|
128 |
|
129 |
|
130 // FishEye Effect |
|
131 var zoomCoef = 2; |
|
132 |
|
133 function fisheye(id,sens){ |
|
134 |
|
135 if(sens!=0){ |
|
136 // ZOOM IN ----------------- |
|
137 //replaceAll(id,sens); |
|
138 ZoomIt(id,1,1); |
|
139 //ZoomIt(id-1,2); |
|
140 //ZoomIt(id+1,2); |
|
141 } else { |
|
142 trace("ici1",""); |
|
143 // ZOOM OUT ----------------- |
|
144 ZoomIt(id,1,0); |
|
145 trace("ici3",""); |
|
146 } |
|
147 |
|
148 } |
|
149 |
|
150 function replaceAll(id){ |
|
151 // move every body |
|
152 for (var i=0; i<slices.length; i++) { |
|
153 if (slices[i] != undefined || i==id || i==id+1 || i==id-1 ){ |
|
154 for (var j=0; j<slices[i].length; j++) { |
|
155 if (slices[i][j] != undefined){ |
|
156 //trace("anim== ",i+" "+slices[i].length); |
|
157 slices[i][j].animate({//x:slices[i][j].attr("x")+(zoomCoef*3*frameSize), |
|
158 height:slices[i][j].heightStart, |
|
159 width:frameSize-margin, |
|
160 y:slices[i][j].yStart |
|
161 },180); |
|
162 } |
|
163 } |
|
164 |
|
165 } |
|
166 } |
|
167 } |
|
168 |
|
169 // elem.currentWidth = fisheyemenu.easeInOut(startWidth,endWidth,steps,actStep,powr); |
|
170 // easeInOut(startWidth,endWidth,steps,actStep,powr); |
|
171 |
|
172 //http://raphaeljs.com/reference.html#plugins-elements |
|
173 /* |
|
174 Raphael.el.red = function () { |
|
175 this.attr({fill: "#f00"}); |
|
176 };*/ |
|
177 |
|
178 function ZoomIt(id,coef,sens){ |
|
179 if (slices[id][0].state==0 && sens!=0){ |
|
180 slices[id][0].state=1; |
|
181 var addEheight = 0; |
|
182 for (var j=0; j<slices[id].length; j++) { |
|
183 //trace("",j); |
|
184 object = slices[id][j]; |
|
185 if (j!=slices[id].length){ |
|
186 Eheight = object.attr("height")*zoomCoef/coef; |
|
187 addEheight += Eheight; |
|
188 MyWidth = object.attr("width")*zoomCoef*4; |
|
189 object.animate({ |
|
190 height:Eheight, |
|
191 width:MyWidth, |
|
192 y:config.heightmax-addEheight |
|
193 //x:object.attr("x")-(MyWidth/4) |
|
194 },200); |
|
195 } |
|
196 } |
|
197 } else if (slices[id][0].state==1 && sens!=1){ |
|
198 slices[id][0].state=0; |
|
199 slices[id][0].state=1; |
|
200 var addEheight = 0; |
|
201 for (var j=0; j<slices[id].length; j++) { |
|
202 //trace("",j); |
|
203 object = slices[id][j]; |
|
204 if (j!=slices[id].length){ |
|
205 object.animate({ height:object.heightStart, |
|
206 width:frameSize-margin, |
|
207 y:object.yStart |
|
208 },180); |
|
209 |
|
210 } |
|
211 } |
|
212 } |
|
213 } |
|
214 |
|
215 // tweet Drawing (in raphael) |
|
216 function DrawTweets (){ |
|
217 |
|
218 //===================================== |
|
219 // count nbr of cluster and tweet in a frame an save int in "frames" |
|
220 numberOfTweet = tweets.length; |
|
221 for(var i=0; i<nbrframes; i++) { |
|
222 for(var j=0; j<numberOfTweet; j++) { |
|
223 if (i==tweets[j].yframe){ |
|
224 |
|
225 var k = tweets[j].qualification; |
|
226 // make array for frame cluster |
|
227 if(frames[i]==undefined){ |
|
228 frames[i] = new Array(); |
|
229 } |
|
230 // count clusters |
|
231 if(frames[i][k]==undefined){ |
|
232 frames[i][k]=1; |
|
233 }else{ |
|
234 frames[i][k]+=1; |
|
235 } |
|
236 } |
|
237 } |
|
238 } |
|
239 |
|
240 //===================================== |
|
241 var max = 0; // max of tweet by Frame |
|
242 for(var i=0; i<nbrframes; i++) { |
|
243 var moy = 0; |
|
244 for (var j=1; j<6; j++){ |
|
245 if (frames[i]!=undefined){ |
|
246 if (frames[i][j]!=undefined){ |
|
247 moy += frames[i][j] |
|
248 } |
|
249 } |
|
250 } |
|
251 //trace("frame "+i,moy); |
|
252 if (moy>max){max=moy;} |
|
253 } |
|
254 //trace("frame max =",max); |
|
255 |
|
256 //===================================== |
|
257 // draw cluster of tweet by frame ... |
|
258 for(var i=0; i<nbrframes; i++) { |
|
259 var addEheight = 0; |
|
260 slices[i] = new Array(); |
|
261 if (frames[i]!=undefined){ |
|
262 for (var j=6; j>0; j--){ |
|
263 if (frames[i][j]!=undefined){ |
|
264 //trace(" x ",i+" "+j); |
|
265 var Eheight = frames[i][j]*5; |
|
266 // x y w h |
|
267 e = paper.rect(i*frameSize, config.heightmax-Eheight-addEheight, frameSize-margin, Eheight).attr({stroke:"#00","stroke-width":0.1, fill: colors[j]}); |
|
268 e.id = i; |
|
269 e.state = 0; // 0 petit // 1 grand |
|
270 e.heightStart = Eheight; |
|
271 e.yStart = config.heightmax-Eheight-addEheight; |
|
272 addEheight +=Eheight; |
|
273 e.mouseover(function () { |
|
274 fisheye(this.id,1); |
|
275 }).mouseout(function () { |
|
276 fisheye(this.id,0); |
|
277 });; |
|
278 slices[i].push(e); |
|
279 } |
|
280 // ajouter cette objet |
|
281 |
|
282 } |
|
283 } |
|
284 } |
|
285 } |
|
286 |
|
287 |
|
288 |
|
289 |
|
290 |
|
291 </script> |
|
292 |
|
293 <div> |
|
294 |
|
295 <script type='text/javascript' src='http://www.iri.centrepompidou.fr/dev/ldt/static/ldt/js/LdtPlayer.min.js'></script> |
|
296 <div id="player_project_13b0aa52-336b-11e0-b233-00145ea49a02_embed" class="iri_player_embed"/> |
|
297 <script type="text/javascript"> |
|
298 var config = { |
|
299 metadata:{ |
|
300 format:'cinelab', |
|
301 src:'http://www.iri.centrepompidou.fr//dev/ldt/ldtplatform/ldt/cljson/id/13b0aa52-336b-11e0-b233-00145ea49a02', |
|
302 load:'jsonp'}, |
|
303 gui:{ |
|
304 width:650, |
|
305 height:480, |
|
306 mode:'video', |
|
307 container:'player_project_13b0aa52-336b-11e0-b233-00145ea49a02_embed', |
|
308 debug:false, |
|
309 css:'http://www.iri.centrepompidou.fr//dev/ldt/static/ldt/css/LdtPlayer.css'}, |
|
310 player:{ |
|
311 type:'jwplayer', |
|
312 src:'http://www.iri.centrepompidou.fr//dev/ldt/static/ldt/swf/player.swf'} |
|
313 }; |
|
314 __IriSP.init(config); |
|
315 </script> |
|
316 </div> |
|
317 |
|
318 </body> |
|
319 </html> |