|
1 <?php |
|
2 |
|
3 /** |
|
4 * include some common code (like we did in the 90s) |
|
5 * People still do this? ;) |
|
6 */ |
|
7 include_once './common.php'; |
|
8 |
|
9 /** |
|
10 * Do we already have a valid Access Token or need to go get one? |
|
11 */ |
|
12 if (!isset($_SESSION['TWITTER_ACCESS_TOKEN']) && isset($_GET['CONNECT']) ) { |
|
13 /** |
|
14 * Guess we need to go get one! |
|
15 */ |
|
16 $token = $consumer->getRequestToken(); |
|
17 $_SESSION['TWITTER_REQUEST_TOKEN'] = serialize($token); |
|
18 |
|
19 /** |
|
20 * Now redirect user to Twitter site so they can log in and |
|
21 * approve our access |
|
22 */ |
|
23 $consumer->redirect(); |
|
24 } |
|
25 |
|
26 ?> |
|
27 |
|
28 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" |
|
29 "http://www.w3.org/TR/html4/strict.dtd"> |
|
30 |
|
31 <html lang="en"> |
|
32 <head> |
|
33 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> |
|
34 <title>RSLN - Live Video and Annotation</title> |
|
35 <meta http-equiv="X-UA-Compatible" content="IE=8" /> |
|
36 |
|
37 <!-- Framework CSS --> |
|
38 <link rel="stylesheet" href="res/blueprint/screen.css" type="text/css" media="screen, projection"> |
|
39 <link rel="stylesheet" href="res/blueprint/print.css" type="text/css" media="print"> |
|
40 <!--[if lt IE 8]><link rel="stylesheet" href="blueprint/ie.css" type="text/css" media="screen, projection"><![endif]--> |
|
41 |
|
42 <!-- Import fancy-type plugin for the sample page. --> |
|
43 |
|
44 <link rel="stylesheet" href="res/blueprint/plugins/fancy-type/screen.css" type="text/css" media="screen, projection"> |
|
45 <link rel="stylesheet" href="custom.css" type="text/css" media="screen, projection"> |
|
46 <link rel="stylesheet" type="text/css" href="res/jquery.fancybox/fancybox/jquery.fancybox-1.3.4.css" media="screen"> |
|
47 <link rel="stylesheet" type="text/css" href="res/niceforms/niceforms-custom.css" media="screen" > |
|
48 |
|
49 <!-- JAVASCRIPT --> |
|
50 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> |
|
51 <script type="text/javascript" src="http://cdn.jquerytools.org/1.2.5/jquery.tools.min.js"></script> |
|
52 <script type="text/javascript" src="res/jquery.fancybox/fancybox/jquery.mousewheel-3.0.4.pack.js"></script> |
|
53 <script type="text/javascript" src="res/jquery.fancybox/fancybox/jquery.fancybox-1.3.4.pack.js"></script> |
|
54 <script type="text/javascript" src="res/niceforms/niceforms.js"></script> |
|
55 <script src="http://widgets.twimg.com/j/2/widget.js"></script> |
|
56 |
|
57 <!-- FONT --> |
|
58 <link href='http://fonts.googleapis.com/css?family=PT+Sans+Narrow&subset=latin' rel='stylesheet' type='text/css'> |
|
59 <link href='http://fonts.googleapis.com/css?family=PT+Sans&subset=latin' rel='stylesheet' type='text/css'> |
|
60 <link href='http://fonts.googleapis.com/css?family=Geo&subset=latin' rel='stylesheet' type='text/css'> |
|
61 <style type="text/css"> |
|
62 .tweetButton{float:left;margin-right:5px;} |
|
63 .videoLivePlayer{border:1px solid #c3c3c3;width:650px;height:638px;} |
|
64 .videoLive{width:650px;height:640px;background:#fff;float:right;margin-top:20px;padding:5px;} |
|
65 |
|
66 .tweetExplain{background-image:url(images/tweetExplainBgd.gif);width:250px;height:640px;padding:10px;position:absolute; margin-top:70px;} |
|
67 .footer{margin-top:740px;width:960px;height:20px;position:absolute;text-align:center;} |
|
68 |
|
69 #tip{ |
|
70 position : absolute; |
|
71 padding : 3px; |
|
72 z-index: 1000000; |
|
73 max-width: 200px; |
|
74 } |
|
75 #tip { |
|
76 display: none; |
|
77 background: transparent url("images/white_arrow_long.png"); |
|
78 font-size: 12px; |
|
79 height: 125px; |
|
80 width: 180px; |
|
81 padding: 10px; |
|
82 padding-left: 15px; |
|
83 padding-top: 15px; |
|
84 padding-right: 15px; |
|
85 color: black; |
|
86 z-index: 1000000; |
|
87 font-family: "Trebuchet MS", "Helvetica", "Arial", "Verdana", "sans-serif"; |
|
88 overflow:hidden; |
|
89 } |
|
90 #chartTimeline{ |
|
91 padding-top: 410px; |
|
92 z-index: 100000; |
|
93 position : absolute; |
|
94 } |
|
95 |
|
96 </style> |
|
97 <script type="text/javascript"> |
|
98 $(document).ready(function() { |
|
99 |
|
100 doTimer(); |
|
101 //$("txt").hide(); |
|
102 $(".loginbutton").click(function() { |
|
103 document.location.href="<?php URL_ROOT ?>?CONNECT=true"; |
|
104 }); |
|
105 $("#IDENTIFIER").click(function() { |
|
106 document.location.href="<?php URL_ROOT ?>?CONNECT=true"; |
|
107 }); |
|
108 |
|
109 $("#messageSuccess").hide(); |
|
110 $("#messageFailed").hide(); |
|
111 $("#txt").hide(); |
|
112 |
|
113 // BUTTONS |
|
114 $("#positive").click(function(){ |
|
115 var MyValue = $('#status').attr("value"); |
|
116 $('#status').attr("value",MyValue+"++ "); |
|
117 }); |
|
118 $("#negative").click(function(){ |
|
119 var MyValue = $('#status').attr("value"); |
|
120 $('#status').attr("value",MyValue+"-- "); |
|
121 }); |
|
122 $("#reference").click(function(){ |
|
123 var MyValue = $('#status').attr("value"); |
|
124 $('#status').attr("value",MyValue+"== "); |
|
125 }); |
|
126 $("#question").click(function(){ |
|
127 var MyValue = $('#status').attr("value"); |
|
128 $('#status').attr("value",MyValue+"?? "); |
|
129 }); |
|
130 |
|
131 // SEND TWEETS |
|
132 $("#sendTweet").click(function(){ |
|
133 var MyStatus = $('#status').attr("value"); |
|
134 $.post('tweet_ajax.php', {status:MyStatus} |
|
135 ,function(data) { |
|
136 |
|
137 if(data=="true"){ |
|
138 $("#messageSuccess").show('fast'); |
|
139 $("#messageSuccess").delay(800).hide('slow'); |
|
140 $('#status').attr("value","#rsln"); |
|
141 //$('#status').css("background-image","images/greenTweet.png"); |
|
142 //$('#status').delay(800).css("background-image","images/tweetWriterBgdTxtArea.gif"); |
|
143 }else{ |
|
144 $("#error").text(data); |
|
145 $("#messageFailed").show('fast'); |
|
146 $("#messageFailed").delay(800).hide('slow'); |
|
147 //$('#status').css("background-image","images/redTweet.png"); |
|
148 //$('#status').delay(800).css("background-image","images/tweetWriterBgdTxtArea.gif"); |
|
149 } |
|
150 |
|
151 }); |
|
152 |
|
153 }); |
|
154 |
|
155 |
|
156 }); |
|
157 |
|
158 |
|
159 <!-- LIMIT TEXTAREA: |
|
160 function imposemax(Object) |
|
161 { |
|
162 return (Object.value.length <= 140); |
|
163 } |
|
164 // End --> |
|
165 |
|
166 <!-- TIMER |
|
167 var c=0; |
|
168 var t; |
|
169 var timer_is_on=0; |
|
170 |
|
171 function timedCount() |
|
172 { |
|
173 document.getElementById('txt').value=c; |
|
174 c = c+1; |
|
175 t = window.setTimeout("timedCount()",1000); |
|
176 $(".twtr-ft").hide(); |
|
177 $(".twtr-hd").hide(); |
|
178 |
|
179 //twtr-tweet |
|
180 $(".twtr-tweet").each(colorTweetings); |
|
181 |
|
182 } |
|
183 |
|
184 function colorTweetings (){ |
|
185 /* |
|
186 efc1f0 > violet |
|
187 c5e7cd > vert |
|
188 f6ced0 > rouge |
|
189 bfdbec > blue |
|
190 ecedc1 > yellow |
|
191 */ |
|
192 var tweettemp = $(this).html(); |
|
193 //alert(tweettemp); |
|
194 //$(".videoLiveProgramDescription").text(tweettemp); |
|
195 //$(".videoLiveProgramTitle").text(tweettemp.search(/\x2D\x2D/)); |
|
196 |
|
197 /* |
|
198 <a target="_blank" class="twtr-reply" href="http://twitter.com/?status=@LaurentChic%20&in_reply_to_status_id=12411225795198976&in_reply_to=LaurentChic">reply</a> |
|
199 */ //alert("tweettemp"); |
|
200 |
|
201 if (tweettemp.search(/\x3F\x3F/)!=-1){ |
|
202 |
|
203 $(this).css({'background-color': '#ecedc1','color':"#000"}); |
|
204 } |
|
205 |
|
206 if (tweettemp.search(/\x2B\x2B/)!=-1){ |
|
207 $(this).css({'background-color': '#c5e7cd','color':"#fff"}); |
|
208 } |
|
209 |
|
210 if (tweettemp.search(/\x2D\x2D/)!=-1){ |
|
211 $(this).css({'background-color': '#f6ced0','color':"#fff"}); |
|
212 } |
|
213 |
|
214 if (tweettemp.search(/\x3D\x3D/)!=-1){ |
|
215 $(this).css({'background-color': '#bfdbec','color':"#000"}); |
|
216 } |
|
217 }; |
|
218 |
|
219 |
|
220 |
|
221 function doTimer() |
|
222 { |
|
223 if (!timer_is_on) |
|
224 { |
|
225 timer_is_on=1; |
|
226 timedCount(); |
|
227 } |
|
228 } |
|
229 |
|
230 function stopCount() |
|
231 { |
|
232 clearTimeout(t); |
|
233 timer_is_on=0; |
|
234 } |
|
235 // |
|
236 |
|
237 //--> |
|
238 |
|
239 |
|
240 </script> |
|
241 |
|
242 |
|
243 </head> |
|
244 <body> |
|
245 |
|
246 <div id="tip"></div> |
|
247 <script type="text/javascript"> |
|
248 $(document).mousemove(function(e){ |
|
249 if (over){ |
|
250 tip.css("left", e.pageX-106).css("top", e.pageY-160); |
|
251 tip.css("color", tipColor) |
|
252 tip.text(tipText); |
|
253 } |
|
254 }); |
|
255 var over = false; |
|
256 var tip = $("#tip").hide(); |
|
257 var tipText = ""; |
|
258 var tipColor = "#efefef"; |
|
259 |
|
260 function addTip(node, txt,color){ |
|
261 $(node).mouseenter(function(){ |
|
262 tipText = txt; |
|
263 tip.fadeIn(0); |
|
264 tipColor = color; |
|
265 over = true; |
|
266 }).mouseleave(function(){ |
|
267 tip.fadeOut(0); |
|
268 over = false; |
|
269 }); |
|
270 } |
|
271 </script> |
|
272 |
|
273 |
|
274 <div class="container"> |
|
275 <img src="images/ENMI_2010_logo.gif" class="logo"> |
|
276 <ul class="menu"> |
|
277 <li class="menuUnderline"><a href="index.php" class="menuLink" id="About"> À propos</a></li> |
|
278 <li class="menuUnderline" ><a href="http://www.rslnmag.fr/blog/2011/1/17/clay-shirky_-personne-n-est-titulaire-du-code-source-de-la-democratie_/" class="menuLink" target="_blank"> Programme</a></li> |
|
279 <li ><a href="polemicaltimeline.php" class="menuLink">Lecteur polémique</a></li> |
|
280 |
|
281 </ul> |
|
282 |
|
283 |
|
284 <div class="tweetExplain" > |
|
285 <h3 class="tweetWriterTitle">Annotations polémique : </h3><br/> |
|
286 l’Institut de recherche et d’innovation (Iri) vous a proposer une expérimentation et une démonstration d’un dispositif d’annotation polémique basé sur twitter. |
|
287 Cette qualification de vos tweets nous a permis de créer une timeline polemique représentant les positions de |
|
288 l'auditoire durant la conférence. |
|
289 <br/><br/> |
|
290 |
|
291 Cette syntaxe polémique vous a premis de prendre position relativement à l’intervenant ou aux autres participants au débat : |
|
292 <table> |
|
293 <tr> |
|
294 <td> |
|
295 <a |
|
296 |
|
297 id="positive" |
|
298 title="accord" |
|
299 class="tweetButton">++</a> </td><td>correspond à un tweet d’assentiment</td> |
|
300 </tr> |
|
301 <tr> |
|
302 <td> |
|
303 |
|
304 <a |
|
305 |
|
306 id="negative" |
|
307 title="désaccord" |
|
308 class="tweetButton">--</a></td><td> à un tweet de désaccord,</td> |
|
309 </tr> |
|
310 <tr> |
|
311 <td> |
|
312 <a |
|
313 |
|
314 id="reference" |
|
315 title="reference" |
|
316 class="tweetButton">==</a></td><td> à un tweet de complément</td> |
|
317 </tr> |
|
318 <tr> |
|
319 <td> |
|
320 <a |
|
321 |
|
322 id="question" |
|
323 title="question" |
|
324 class="tweetButton"> ??</a></td><td> Ã une question</td> |
|
325 </tr> |
|
326 </table> |
|
327 |
|
328 Suite a cette phase d’annotation, vous trouverez à droite de ce texte <b>la version alpha</b> de l'interface de navigation et de représentation de la polémique durant la conférence. |
|
329 |
|
330 <br/><br/> |
|
331 Ce dispositif, outre qu’il approfondit la dimension critique de la discussion avec la salle et les auditeurs présents ou distants, permet ainsi également de pérenniser et de valoriser les commentaires produits en les rendant accessibles en temps différé lors de tout visionnage ultérieur de la vidéo |
|
332 <br/> |
|
333 <br/>Merci a RSLN pour cette expérimentation ! |
|
334 </div> |
|
335 |
|
336 <div class="videoLive" > |
|
337 <div class="videoLivePlayer"> |
|
338 |
|
339 <div id="chartTimeline"> </div> |
|
340 <script type='text/javascript' src='res/metadataplayer/src/js/LdtPlayer.js'></script> |
|
341 <div id="player_project_13b0aa52-336b-11e0-b233-00145ea49a02_embed" class="iri_player_embed"> </div> |
|
342 |
|
343 <script type="text/javascript"> |
|
344 var configMP = { |
|
345 /*metadata:{ |
|
346 format:'cinelab', |
|
347 src:'metadata.json', |
|
348 load:'json'},*/ |
|
349 metadata:{ |
|
350 format:'cinelab', |
|
351 src:'http://www.iri.centrepompidou.fr/dev/ldt/ldtplatform/ldt/cljson/id/13b0aa52-336b-11e0-b233-00145ea49a02', |
|
352 load:'jsonp'}, |
|
353 gui:{ |
|
354 width:650, |
|
355 height:480, |
|
356 mode:'video', |
|
357 container:'player_project_13b0aa52-336b-11e0-b233-00145ea49a02_embed', |
|
358 debug:false, |
|
359 css:'http://amateur.iri.centrepompidou.fr/live/rsln/res/css/LdtPlayer.css'}, |
|
360 |
|
361 player:{ |
|
362 type:'jwplayer', |
|
363 src:'http://www.iri.centrepompidou.fr//dev/ldt/static/ldt/swf/player.swf'} |
|
364 }; |
|
365 __IriSP.init(configMP); |
|
366 </script> |
|
367 |
|
368 </div> |
|
369 |
|
370 </div> |
|
371 |
|
372 <div class="footer"> |
|
373 <hr> |
|
374 <a href="http://www.iri.centrepompidou.fr/" class="footerLink" target="_blank"> |
|
375 IRI </a> |
|
376 | <a href="http://www.rslnmag.fr/" class="footerLink" target="_blank" > RSLN </a> |
|
377 | <a href="http://www.slate.fr/" class="footerLink" target="_blank"> SLATE.fr </a> |
|
378 | <a href="http://www.microsoft.fr/" class="footerLink" target="_blank"> MICROSOFT.fr </a> |
|
379 <?php |
|
380 if (isset($_SESSION['TWITTER_ACCESS_TOKEN'])){ |
|
381 echo("| <a href='clear.php' class='footerLink'>Déconnexion</a>"); |
|
382 } |
|
383 ?> |
|
384 <input type="text" id="txt" size="3"/> |
|
385 </div> |
|
386 |
|
387 </div> |
|
388 |
|
389 <!-- LIGHTBOX --> |
|
390 <div style="display:none;"> |
|
391 <div id="Aboutbox" > |
|
392 <div class="lightBorder"> |
|
393 <div class="lightTitle" style="height:45px;"> </div> |
|
394 <div class="lightSubTitle">Annotation polémique par tweet </div> |
|
395 <div class="lightDescription">Lors de la conférence du 31 janvier 2011 organiser par RSLN vous avez expérimenté une syntaxe polémique pour "tweeter". Cette qualification de vos tweets nous a permis de créer une timeline polemique. Cette timeline vous permet de naviguer dans la vidéo <br/>tout en représentant les positions de <br/>l'auditoire durant la conférence. |
|
396 </div> |
|
397 <br/> |
|
398 <div> |
|
399 <!-- |
|
400 <br/> |
|
401 <a class="button_b" href="#" id="IDENTIFIER"><span>S'identifier</span></a> <br/><br/> |
|
402 --> |
|
403 <a class="button_w" href="#" id="ACCES"><span>voir la vidéo</span></a> |
|
404 |
|
405 </div> |
|
406 </div> |
|
407 </div> |
|
408 </div> |
|
409 |
|
410 |
|
411 <script type="text/javascript" src="res/raphael/raphael-min.js"></script> |
|
412 <script type="text/javascript"> |
|
413 |
|
414 // CHART TIMELINE / VERSION PROTOTYPE :: |
|
415 // - config |
|
416 // - organisation classe |
|
417 // !!!- rollover !! |
|
418 // !!!!- legend !! |
|
419 // - time cursor |
|
420 // - seek !! |
|
421 |
|
422 /* |
|
423 1 | 1D973D > vert > ++ > OK |
|
424 2 | C5A62D > orange > ?? > Q |
|
425 3 | CE0A15 > rouge > -- > KO |
|
426 4 | 036AAE > bleu > == > REF |
|
427 5 | 585858 > gris > NQ > "" |
|
428 */ |
|
429 |
|
430 |
|
431 // configuration |
|
432 var config = { |
|
433 target:"chartTimeline", |
|
434 x:8, |
|
435 y:418, |
|
436 width:650, |
|
437 height:70, |
|
438 heightmax:70 |
|
439 } |
|
440 // Make and define the Raphael area |
|
441 //var paper = Raphael(document.getElementById(config.target),config.width, config.height); |
|
442 |
|
443 |
|
444 function ChartTimeLine (){ |
|
445 |
|
446 //var paper = Raphael(config.x, config.y,config.width, config.height); |
|
447 var paper = Raphael(document.getElementById("chartTimeline"),config.width, config.height); |
|
448 paper.rect(0,20,config.width,config.heightmax-20).attr({fill:"#fff","stroke-width":0.1,opacity: 0.1}); |
|
449 paper.rect(0,20,config.width,1).attr({fill:"#fff",stroke: "none"}); |
|
450 paper.rect(0,20,config.width,1).attr({fill:"#fff",stroke: "none"}); |
|
451 paper.rect(0,20,1,1).attr({fill:"#fff",stroke: "none"}); |
|
452 |
|
453 // variable |
|
454 |
|
455 var yCoef = 2; // coef for height of 1 tweet |
|
456 var frameSize = 5; // frame size |
|
457 var margin = 1; // marge between frame |
|
458 var lineSize = 650; // timeline pixel width |
|
459 var nbrframes = lineSize/frameSize; // frame numbers |
|
460 var numberOfTweet = 0; // number of tweet overide later |
|
461 var duration = 4299820 ; // timescale width |
|
462 var frameLenght =lineSize/frameSize;// frame timescale |
|
463 var timeline; |
|
464 var colors = new Array("","#1D973D","#C5A62D","#CE0A15","#036AAE","#585858"); |
|
465 |
|
466 // array |
|
467 var tweets = new Array(); |
|
468 var element = new Array(); |
|
469 var cluster = new Array(); |
|
470 var frames = new Array(frameLenght); |
|
471 var slices = new Array(); |
|
472 |
|
473 |
|
474 // Classes ======================================================================= |
|
475 var Frames = function(){ |
|
476 |
|
477 var Myclusters; |
|
478 var x; |
|
479 var y; |
|
480 var width; |
|
481 var height; |
|
482 }; |
|
483 Frames = function(json){ |
|
484 // make my clusters |
|
485 // ou Frame vide |
|
486 }; |
|
487 Frames.prototype.draw = function(){ |
|
488 } |
|
489 Frames.prototype.zoom = function(){ |
|
490 } |
|
491 Frames.prototype.inside = function(){ |
|
492 } |
|
493 var Clusters = function(){ |
|
494 var Object; |
|
495 var yDist; |
|
496 var x; |
|
497 var y; |
|
498 var width; |
|
499 var height; |
|
500 }; |
|
501 Clusters = function(json){ |
|
502 // make my object |
|
503 }; |
|
504 var Tweet = function(){ |
|
505 } |
|
506 // Classes ======================================================================= |
|
507 |
|
508 |
|
509 |
|
510 |
|
511 // trace function |
|
512 var traceNum = 0; |
|
513 function trace(msg,value){ |
|
514 traceNum += 1; |
|
515 $("<div>"+traceNum+" - "+msg+" : "+value+"</div>").appendTo("#output"); |
|
516 } |
|
517 |
|
518 // Refactoring (parametere) ************************************************************ |
|
519 // color translastion |
|
520 function colorTranslation(value){ |
|
521 if(value == "Q"){ |
|
522 return 2; |
|
523 }else if(value =="REF"){ |
|
524 return 4; |
|
525 }else if(value =="OK"){ |
|
526 return 1; |
|
527 }else if(value =="KO"){ |
|
528 return 3; |
|
529 }else if(value ==""){ |
|
530 return 5; |
|
531 } |
|
532 } |
|
533 |
|
534 |
|
535 // Refactoring (parametere) ************************************************************ |
|
536 // load tweets send in parameters |
|
537 $.ajax({ |
|
538 dataType: "jsonp", |
|
539 url:"http://www.iri.centrepompidou.fr/dev/ldt/ldtplatform/ldt/cljson/id/13b0aa52-336b-11e0-b233-00145ea49a02", |
|
540 success : function(json){ |
|
541 trace("load",""); |
|
542 $.each(json.annotations, function(i,item) { |
|
543 |
|
544 var MyTime = Math.floor(item.begin/duration*lineSize); |
|
545 var Myframe = Math.floor(MyTime/lineSize*frameLenght); |
|
546 |
|
547 if (item.content['polemics'] != undefined) { |
|
548 if (item.content['polemics'][0] != null) { |
|
549 |
|
550 for(var j=0; j<item.content['polemics'].length; j++){ |
|
551 |
|
552 tweets[numberOfTweet] = { |
|
553 id:i, |
|
554 qualification:colorTranslation(item.content['polemics'][j]), |
|
555 yIndicator:MyTime, |
|
556 yframe:Myframe, |
|
557 title:item.content['title'], |
|
558 timeframe:item.begin |
|
559 } |
|
560 numberOfTweet+=1; |
|
561 } |
|
562 }else{ |
|
563 //trace("k = ",i); |
|
564 tweets[numberOfTweet] = { |
|
565 id:i, |
|
566 qualification:colorTranslation(""), |
|
567 yIndicator:MyTime, |
|
568 yframe:Myframe, |
|
569 title:item.content['title'], |
|
570 timeframe:item.begin |
|
571 } |
|
572 numberOfTweet+=1; |
|
573 } |
|
574 |
|
575 } else { |
|
576 //trace("tweet qualification = ","null"); |
|
577 } |
|
578 }); |
|
579 trace("======= ",numberOfTweet); |
|
580 DrawTweets (); |
|
581 |
|
582 } |
|
583 }); |
|
584 |
|
585 |
|
586 |
|
587 // tweet Drawing (in raphael) |
|
588 function DrawTweets (){ |
|
589 // GROUPES TWEET ============================================ |
|
590 // Count nbr of cluster and tweet in a frame an save int in "frames" |
|
591 numberOfTweet = tweets.length; |
|
592 for(var i=0; i<nbrframes; i++) { |
|
593 for(var j=0; j<numberOfTweet; j++) { |
|
594 |
|
595 if (i==tweets[j].yframe){ |
|
596 |
|
597 var k = tweets[j].qualification; |
|
598 |
|
599 // make array for frame cluster |
|
600 if(frames[i]==undefined){ |
|
601 frames[i] = {id:i, |
|
602 qualifVol:new Array(), |
|
603 mytweetsID:new Array() |
|
604 }; |
|
605 } |
|
606 // add my tweet to frame |
|
607 frames[i].mytweetsID.push(tweets[j]); |
|
608 |
|
609 // count opinion by frame |
|
610 if( frames[i].qualifVol[k] == undefined){ |
|
611 frames[i].qualifVol[k] = 1; |
|
612 }else{ |
|
613 frames[i].qualifVol[k] += 1; |
|
614 } |
|
615 |
|
616 } |
|
617 } |
|
618 } |
|
619 |
|
620 // GROUPES TWEET ============================================ |
|
621 // max of tweet by Frame |
|
622 var max = 0; |
|
623 for(var i=0; i<nbrframes; i++) { |
|
624 var moy = 0; |
|
625 for (var j=0; j<6; j++){ |
|
626 if (frames[i]!=undefined){ |
|
627 if (frames[i].qualifVol[j]!=undefined){ |
|
628 moy += frames[i].qualifVol[j] |
|
629 } |
|
630 } |
|
631 } |
|
632 //trace("frame "+i,moy); |
|
633 if (moy>max){max=moy;} |
|
634 } |
|
635 |
|
636 var tweetDrawed = new Array(); |
|
637 var TweetHeight = 5; |
|
638 // DRAW TWEETS ============================================ |
|
639 for(var i=0; i<nbrframes;i++) { |
|
640 var addEheight = 5; |
|
641 if (frames[i]!=undefined){ |
|
642 trace (i+" k=",frames[i].mytweetsID.length); |
|
643 // by type |
|
644 for (var j=6; j>-1; j--){ |
|
645 if (frames[i].qualifVol[j]!=undefined){ |
|
646 // show tweet by type |
|
647 for (var k=0; k<frames[i].mytweetsID.length; k++){ |
|
648 if (frames[i].mytweetsID[k].qualification==j){ |
|
649 e = paper.rect( i*frameSize, // x |
|
650 config.heightmax-addEheight, // y |
|
651 frameSize-margin, // width |
|
652 TweetHeight // height |
|
653 ).attr({stroke:"#00","stroke-width":0.1, fill: colors[j]}); |
|
654 addEheight +=TweetHeight; |
|
655 e.time= frames[i].mytweetsID[k].timeframe; |
|
656 e.title= frames[i].mytweetsID[k].title; |
|
657 e.mouseover(function () { |
|
658 this.attr({stroke:"#fff","stroke-width":5}); |
|
659 this.toFront(); |
|
660 }).mouseout(function () { |
|
661 this.attr({stroke:"#00","stroke-width":0.1}); |
|
662 }).mousedown(function () { |
|
663 __IriSP.MyApiPlayer.seek(this.time/1000) |
|
664 }); |
|
665 $(e.node).attr('id', 't'+k+''); |
|
666 $(e.node).attr('title', frames[i].mytweetsID[k].title); |
|
667 $(e.node).attr('begin', frames[i].mytweetsID[k].timeframe); |
|
668 addTip(e.node, frames[i].mytweetsID[k].title,colors[j]); |
|
669 //frames[i].mytweetsID.pop(); |
|
670 } |
|
671 } |
|
672 } |
|
673 } |
|
674 } |
|
675 } |
|
676 |
|
677 |
|
678 } |
|
679 |
|
680 // AddTip ****************************************************************************** |
|
681 |
|
682 } |
|
683 |
|
684 ChartTimeLine(); |
|
685 |
|
686 </script> |
|
687 |
|
688 |
|
689 |
|
690 </body> |
|
691 </html> |