|
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 var tweettemp = $(this).html(); |
|
186 if (tweettemp.search(/\x3F\x3F/)!=-1){ |
|
187 $(this).css({'background-color': '#ecedc1','color':"#000"}); |
|
188 } |
|
189 if (tweettemp.search(/\x2B\x2B/)!=-1){ |
|
190 $(this).css({'background-color': '#c5e7cd','color':"#fff"}); |
|
191 } |
|
192 if (tweettemp.search(/\x2D\x2D/)!=-1){ |
|
193 $(this).css({'background-color': '#f6ced0','color':"#fff"}); |
|
194 } |
|
195 if (tweettemp.search(/\x3D\x3D/)!=-1){ |
|
196 $(this).css({'background-color': '#bfdbec','color':"#000"}); |
|
197 } |
|
198 }; |
|
199 |
|
200 |
|
201 |
|
202 function doTimer() |
|
203 { |
|
204 if (!timer_is_on) |
|
205 { |
|
206 timer_is_on=1; |
|
207 timedCount(); |
|
208 } |
|
209 } |
|
210 |
|
211 function stopCount() |
|
212 { |
|
213 clearTimeout(t); |
|
214 timer_is_on=0; |
|
215 } |
|
216 // |
|
217 |
|
218 //--> |
|
219 |
|
220 |
|
221 </script> |
|
222 |
|
223 |
|
224 </head> |
|
225 <body> |
|
226 |
|
227 <div id="tip"> |
|
228 <div id="tipcolor" style="height:10px;width:10px"></div> |
|
229 <div id="tiptext"></div> |
|
230 </div> |
|
231 <script type="text/javascript"> |
|
232 $(document).mousemove(function(e){ |
|
233 if (over){ |
|
234 tip.css("left", e.pageX-106).css("top", e.pageY-160); |
|
235 $("#tipcolor").css("background-color", tipColor) |
|
236 $("#tiptext").text(tipText); |
|
237 $("#tip").show(); |
|
238 }else{ |
|
239 tip.css("left", -10000).css("top", -100000); |
|
240 tweetSelection.attr({x:-100,y:-100}); |
|
241 } |
|
242 }); |
|
243 var over = false; |
|
244 var tip = $("#tip").hide(); |
|
245 var tipText = ""; |
|
246 var tipColor = "#efefef"; |
|
247 var tweetSelection; |
|
248 |
|
249 // AddTip ****************************************************************************** |
|
250 function addTip(node, txt,color,tempPosition){ |
|
251 $(node).mouseover(function(){ |
|
252 tipText = txt; |
|
253 //tip.hide();//fadeIn(0); |
|
254 tipColor = color; |
|
255 over = true; |
|
256 //tweetSelection.attr(tempPosition); |
|
257 //tweetSelection.toFront(); |
|
258 }).mouseout(function(){ |
|
259 //tip.show()//tip.fadeOut(0); |
|
260 over = false; |
|
261 }); |
|
262 |
|
263 |
|
264 } |
|
265 </script> |
|
266 |
|
267 |
|
268 <div class="container"> |
|
269 <img src="images/ENMI_2010_logo.gif" class="logo"> |
|
270 <ul class="menu"> |
|
271 <li class="menuUnderline"><a href="index.php" class="menuLink" id="About"> À propos</a></li> |
|
272 <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> |
|
273 <li ><a href="polemicaltimeline.php" class="menuLink">Lecteur polémique</a></li> |
|
274 |
|
275 </ul> |
|
276 |
|
277 |
|
278 <div class="tweetExplain" > |
|
279 <h3 class="tweetWriterTitle">Annotations polémique : </h3><br/> |
|
280 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. |
|
281 Cette qualification de vos tweets nous a permis de créer une timeline polemique représentant les positions de |
|
282 l'auditoire durant la conférence. |
|
283 <br/><br/> |
|
284 |
|
285 Cette syntaxe polémique vous a premis de prendre position relativement à l’intervenant ou aux autres participants au débat : |
|
286 <table> |
|
287 <tr> |
|
288 <td> |
|
289 <a |
|
290 |
|
291 id="positive" |
|
292 title="accord" |
|
293 class="tweetButton">++</a> </td><td>correspond à un tweet d’assentiment</td> |
|
294 </tr> |
|
295 <tr> |
|
296 <td> |
|
297 |
|
298 <a |
|
299 |
|
300 id="negative" |
|
301 title="désaccord" |
|
302 class="tweetButton">--</a></td><td> à un tweet de désaccord,</td> |
|
303 </tr> |
|
304 <tr> |
|
305 <td> |
|
306 <a |
|
307 |
|
308 id="reference" |
|
309 title="reference" |
|
310 class="tweetButton">==</a></td><td> à un tweet de complément</td> |
|
311 </tr> |
|
312 <tr> |
|
313 <td> |
|
314 <a |
|
315 |
|
316 id="question" |
|
317 title="question" |
|
318 class="tweetButton"> ??</a></td><td> Ã une question</td> |
|
319 </tr> |
|
320 </table> |
|
321 |
|
322 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. |
|
323 |
|
324 <br/><br/> |
|
325 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 |
|
326 <br/> |
|
327 <br/>Merci a RSLN pour cette expérimentation ! |
|
328 </div> |
|
329 |
|
330 <div class="videoLive" > |
|
331 <div class="videoLivePlayer"> |
|
332 |
|
333 <div id="chartTimeline"> </div> |
|
334 <script type='text/javascript' src='res/metadataplayer/src/js/LdtPlayer.js'></script> |
|
335 <div id="player_project_13b0aa52-336b-11e0-b233-00145ea49a02_embed" class="iri_player_embed"> </div> |
|
336 |
|
337 <script type="text/javascript"> |
|
338 var configMP = { |
|
339 /*metadata:{ |
|
340 format:'cinelab', |
|
341 src:'metadata.json', |
|
342 load:'json'},*/ |
|
343 metadata:{ |
|
344 format:'cinelab', |
|
345 src:'http://www.iri.centrepompidou.fr/dev/ldt/ldtplatform/ldt/cljson/id/13b0aa52-336b-11e0-b233-00145ea49a02', |
|
346 load:'jsonp'}, |
|
347 gui:{ |
|
348 width:650, |
|
349 height:480, |
|
350 mode:'video', |
|
351 container:'player_project_13b0aa52-336b-11e0-b233-00145ea49a02_embed', |
|
352 debug:true, |
|
353 css:'http://amateur.iri.centrepompidou.fr/live/rsln/res/css/LdtPlayer.css'}, |
|
354 |
|
355 player:{ |
|
356 type:'jwplayer', |
|
357 src:'http://www.iri.centrepompidou.fr//dev/ldt/static/ldt/swf/player.swf'} |
|
358 }; |
|
359 __IriSP.init(configMP); |
|
360 </script> |
|
361 |
|
362 </div> |
|
363 |
|
364 </div> |
|
365 |
|
366 <div class="footer"> |
|
367 <hr> |
|
368 <a href="http://www.iri.centrepompidou.fr/" class="footerLink" target="_blank"> |
|
369 IRI </a> |
|
370 | <a href="http://www.rslnmag.fr/" class="footerLink" target="_blank" > RSLN </a> |
|
371 | <a href="http://www.slate.fr/" class="footerLink" target="_blank"> SLATE.fr </a> |
|
372 | <a href="http://www.microsoft.fr/" class="footerLink" target="_blank"> MICROSOFT.fr </a> |
|
373 <?php |
|
374 if (isset($_SESSION['TWITTER_ACCESS_TOKEN'])){ |
|
375 echo("| <a href='clear.php' class='footerLink'>Déconnexion</a>"); |
|
376 } |
|
377 ?> |
|
378 <input type="text" id="txt" size="3"/> |
|
379 </div> |
|
380 |
|
381 </div> |
|
382 |
|
383 <!-- LIGHTBOX --> |
|
384 <div style="display:none;"> |
|
385 <div id="Aboutbox" > |
|
386 <div class="lightBorder"> |
|
387 <div class="lightTitle" style="height:45px;"> </div> |
|
388 <div class="lightSubTitle">Annotation polémique par tweet </div> |
|
389 <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. |
|
390 </div> |
|
391 <br/> |
|
392 <div> |
|
393 <!-- |
|
394 <br/> |
|
395 <a class="button_b" href="#" id="IDENTIFIER"><span>S'identifier</span></a> <br/><br/> |
|
396 --> |
|
397 <a class="button_w" href="#" id="ACCES"><span>voir la vidéo</span></a> |
|
398 |
|
399 </div> |
|
400 </div> |
|
401 </div> |
|
402 </div> |
|
403 |
|
404 |
|
405 <script type="text/javascript" src="res/raphael/raphael-min.js"></script> |
|
406 <script type="text/javascript"> |
|
407 |
|
408 // CHART TIMELINE / VERSION PROTOTYPE :: |
|
409 |
|
410 // configuration |
|
411 var config = { |
|
412 target:"chartTimeline", |
|
413 x:8, |
|
414 y:418, |
|
415 width:650, |
|
416 height:70, |
|
417 heightmax:70 |
|
418 } |
|
419 // Make and define the Raphael area |
|
420 //var paper = Raphael(document.getElementById(config.target),config.width, config.height); |
|
421 |
|
422 |
|
423 function ChartTimeLine (){ |
|
424 |
|
425 //var paper = Raphael(config.x, config.y,config.width, config.height); |
|
426 var paper = Raphael(document.getElementById("chartTimeline"),config.width, config.height); |
|
427 paper.rect(0,20,config.width,config.heightmax-20).attr({fill:"#fff","stroke-width":0.1,opacity: 0.1}); |
|
428 //paper.rect(0,20,1,1).attr({fill:"#fff",stroke: "none"}); |
|
429 |
|
430 // variable |
|
431 |
|
432 var yCoef = 2; // coef for height of 1 tweet |
|
433 var frameSize = 5; // frame size |
|
434 var margin = 1; // marge between frame |
|
435 var lineSize = 650; // timeline pixel width |
|
436 var nbrframes = lineSize/frameSize; // frame numbers |
|
437 var numberOfTweet = 0; // number of tweet overide later |
|
438 var duration = 4299820 ; // timescale width |
|
439 var frameLenght = lineSize/frameSize;// frame timescale |
|
440 var timeline; |
|
441 var colors = new Array("","#1D973D","#C5A62D","#CE0A15","#036AAE","#585858"); |
|
442 |
|
443 // array |
|
444 var tweets = new Array(); |
|
445 var element = new Array(); |
|
446 var cluster = new Array(); |
|
447 var frames = new Array(frameLenght); |
|
448 var slices = new Array(); |
|
449 |
|
450 |
|
451 // Classes ======================================================================= |
|
452 var Frames = function(){ |
|
453 |
|
454 var Myclusters; |
|
455 var x; |
|
456 var y; |
|
457 var width; |
|
458 var height; |
|
459 }; |
|
460 Frames = function(json){ |
|
461 // make my clusters |
|
462 // ou Frame vide |
|
463 }; |
|
464 Frames.prototype.draw = function(){ |
|
465 } |
|
466 Frames.prototype.zoom = function(){ |
|
467 } |
|
468 Frames.prototype.inside = function(){ |
|
469 } |
|
470 var Clusters = function(){ |
|
471 var Object; |
|
472 var yDist; |
|
473 var x; |
|
474 var y; |
|
475 var width; |
|
476 var height; |
|
477 }; |
|
478 Clusters = function(json){ |
|
479 // make my object |
|
480 }; |
|
481 var Tweet = function(){ |
|
482 } |
|
483 // Classes ======================================================================= |
|
484 |
|
485 // trace function |
|
486 var traceNum = 0; |
|
487 function trace(msg,value){ |
|
488 traceNum += 1; |
|
489 $("<div>"+traceNum+" - "+msg+" : "+value+"</div>").appendTo("#output"); |
|
490 } |
|
491 |
|
492 // Refactoring (parametere) ************************************************************ |
|
493 // color translastion |
|
494 function colorTranslation(value){ |
|
495 if(value == "Q"){ |
|
496 return 2; |
|
497 }else if(value =="REF"){ |
|
498 return 4; |
|
499 }else if(value =="OK"){ |
|
500 return 1; |
|
501 }else if(value =="KO"){ |
|
502 return 3; |
|
503 }else if(value ==""){ |
|
504 return 5; |
|
505 } |
|
506 } |
|
507 |
|
508 |
|
509 // Refactoring (parametere) ************************************************************ |
|
510 // load tweets send in parameters |
|
511 $.ajax({ |
|
512 dataType: "jsonp", |
|
513 url:"http://www.iri.centrepompidou.fr/dev/ldt/ldtplatform/ldt/cljson/id/13b0aa52-336b-11e0-b233-00145ea49a02", |
|
514 success : function(json){ |
|
515 trace("load",""); |
|
516 $.each(json.annotations, function(i,item) { |
|
517 |
|
518 var MyTime = Math.floor(item.begin/duration*lineSize); |
|
519 var Myframe = Math.floor(MyTime/lineSize*frameLenght); |
|
520 |
|
521 if (item.content['polemics'] != undefined) { |
|
522 if (item.content['polemics'][0] != null) { |
|
523 |
|
524 for(var j=0; j<item.content['polemics'].length; j++){ |
|
525 |
|
526 tweets[numberOfTweet] = { |
|
527 id:i, |
|
528 qualification:colorTranslation(item.content['polemics'][j]), |
|
529 yIndicator:MyTime, |
|
530 yframe:Myframe, |
|
531 title:item.content['title'], |
|
532 timeframe:item.begin |
|
533 } |
|
534 numberOfTweet+=1; |
|
535 } |
|
536 }else{ |
|
537 //trace("k = ",i); |
|
538 tweets[numberOfTweet] = { |
|
539 id:i, |
|
540 qualification:colorTranslation(""), |
|
541 yIndicator:MyTime, |
|
542 yframe:Myframe, |
|
543 title:item.content['title'], |
|
544 timeframe:item.begin |
|
545 } |
|
546 numberOfTweet+=1; |
|
547 } |
|
548 |
|
549 } else { |
|
550 //trace("tweet qualification = ","null"); |
|
551 } |
|
552 }); |
|
553 trace("======= ",numberOfTweet); |
|
554 DrawTweets (); |
|
555 |
|
556 } |
|
557 }); |
|
558 |
|
559 |
|
560 // tweet Drawing (in raphael) |
|
561 function DrawTweets (){ |
|
562 // GROUPES TWEET ============================================ |
|
563 // Count nbr of cluster and tweet in a frame an save int in "frames" |
|
564 numberOfTweet = tweets.length; |
|
565 for(var i=0; i<nbrframes; i++) { |
|
566 for(var j=0; j<numberOfTweet; j++) { |
|
567 |
|
568 if (i==tweets[j].yframe){ |
|
569 |
|
570 var k = tweets[j].qualification; |
|
571 |
|
572 // make array for frame cluster |
|
573 if(frames[i]==undefined){ |
|
574 frames[i] = {id:i, |
|
575 qualifVol:new Array(), |
|
576 mytweetsID:new Array() |
|
577 }; |
|
578 } |
|
579 // add my tweet to frame |
|
580 frames[i].mytweetsID.push(tweets[j]); |
|
581 |
|
582 // count opinion by frame |
|
583 if( frames[i].qualifVol[k] == undefined){ |
|
584 frames[i].qualifVol[k] = 1; |
|
585 }else{ |
|
586 frames[i].qualifVol[k] += 1; |
|
587 } |
|
588 |
|
589 } |
|
590 } |
|
591 } |
|
592 |
|
593 // GROUPES TWEET ============================================ |
|
594 // max of tweet by Frame |
|
595 var max = 0; |
|
596 for(var i=0; i<nbrframes; i++) { |
|
597 var moy = 0; |
|
598 for (var j=0; j<6; j++){ |
|
599 if (frames[i]!=undefined){ |
|
600 if (frames[i].qualifVol[j]!=undefined){ |
|
601 moy += frames[i].qualifVol[j] |
|
602 } |
|
603 } |
|
604 } |
|
605 //trace("frame "+i,moy); |
|
606 if (moy>max){max=moy;} |
|
607 } |
|
608 |
|
609 var tweetDrawed = new Array(); |
|
610 var TweetHeight = 5; |
|
611 // DRAW TWEETS ============================================ |
|
612 for(var i=0; i<nbrframes;i++) { |
|
613 var addEheight = 5; |
|
614 if (frames[i]!=undefined){ |
|
615 trace (i+" k=",frames[i].mytweetsID.length); |
|
616 // by type |
|
617 for (var j=6; j>-1; j--){ |
|
618 if (frames[i].qualifVol[j]!=undefined){ |
|
619 // show tweet by type |
|
620 for (var k=0; k<frames[i].mytweetsID.length; k++){ |
|
621 if (frames[i].mytweetsID[k].qualification==j){ |
|
622 e = paper.rect( i*frameSize, // x |
|
623 config.heightmax-addEheight, // y |
|
624 frameSize-margin, // width |
|
625 TweetHeight // height |
|
626 ).attr({stroke:"#00","stroke-width":0.1, fill: colors[j]}); |
|
627 addEheight +=TweetHeight; |
|
628 e.time= frames[i].mytweetsID[k].timeframe; |
|
629 e.title= frames[i].mytweetsID[k].title; |
|
630 e.mouseover(function () { |
|
631 //this.attr({stroke:"#fff","stroke-width":5}); |
|
632 //this.toFront(); |
|
633 }).mouseout(function () { |
|
634 //this.attr({stroke:"#00","stroke-width":0.1}); |
|
635 }).mousedown(function () { |
|
636 __IriSP.MyApiPlayer.seek(this.time/1000) |
|
637 }); |
|
638 $(e.node).attr('id', 't'+k+''); |
|
639 $(e.node).attr('title', frames[i].mytweetsID[k].title); |
|
640 $(e.node).attr('begin', frames[i].mytweetsID[k].timeframe); |
|
641 var tempPosition = {x:i*frameSize,y:config.heightmax-addEheight} |
|
642 addTip(e.node, frames[i].mytweetsID[k].title,colors[j],tempPosition); |
|
643 //frames[i].mytweetsID.pop(); |
|
644 } |
|
645 } |
|
646 } |
|
647 } |
|
648 } |
|
649 } |
|
650 |
|
651 } |
|
652 // |
|
653 paper.rect(0,20,config.width,2).attr({fill:"#fff",stroke: "none",opacity: 1}); |
|
654 PaperSlider = paper.rect(0,20,2,40).attr({fill:"#d232d4",stroke: "none",opacity: 1}); |
|
655 |
|
656 // decalage |
|
657 tweetSelection = paper.rect(-100,-100,5,5).attr({fill:"#fff",stroke: "none",opacity: 1}); |
|
658 } |
|
659 |
|
660 //ChartTimeLine(); |
|
661 |
|
662 </script> |
|
663 |
|
664 |
|
665 |
|
666 </body> |
|
667 </html> |