--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/web/res/metadataplayer/test/raphael_timeline.html Wed Apr 06 16:26:16 2011 +0200
@@ -0,0 +1,265 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+<title>Example raphael</title>
+<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+
+</head>
+<body>
+
+<div id="Ldt-output" name="Ldt-output" style="position:absolute;left:600px;" ></div>
+<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js'></script>
+<script type="text/javascript" src="raphael-min.js"></script>
+
+<div>
+<!--
+<script type='text/javascript' src='http://www.cybunk.com/irinumberOfTweet/FC/src/js/LdtPlayer.js'></script>
+ <div id="player_project_13b0aa52-336b-11e0-b233-00145ea49a02_embed" class="iri_player_embed"/>
+ <script type="text/javascript">
+ var config = {
+ metadata:{
+ format:'cinelab',
+ src:'http://www.iri.centrepompidou.fr//dev/ldt/ldtplatform/ldt/cljson/id/13b0aa52-336b-11e0-b233-00145ea49a02',
+ load:'jsonp'},
+ gui:{
+ width:650,
+ height:480,
+ mode:'video',
+ container:'player_project_13b0aa52-336b-11e0-b233-00145ea49a02_embed',
+ debug:false,
+ css:'http://www.iri.centrepompidou.fr//dev/ldt/static/ldt/css/LdtPlayer.css'},
+ player:{
+ type:'jwplayer',
+ src:'http://www.iri.centrepompidou.fr//dev/ldt/static/ldt/swf/player.swf'}
+ };
+ __IriSP.init(config);
+</script>
+</div>
+-->
+
+<div id="charttimeline">ici</div>
+
+<script type="text/javascript">
+
+// v1 ::
+// - config
+// - organisation classe
+// - zoom
+// - rollover !!
+// - legend !!
+// - seek !!
+//
+
+
+ /*
+ 1 | 1D973D > vert > ++ > OK
+ 2 | C5A62D > orange > ?? > Q
+ 3 | CE0A15 > rouge > -- > KO
+ 4 | 036AAE > bleu > == > REF
+ 5 | 585858 > gris > NQ > ""
+ */
+
+
+cinelabToChart= function (){
+}
+
+chartTimeline = function (){
+
+}
+
+chartTimeline = function (config){
+ this.config = config;
+
+}
+chartTimeline.prototype.create function(){
+}
+
+ // configuration
+ var config = {
+ target:"charttimeline",
+ x:8,
+ y:438,
+ width:650,
+ height:200,
+ heightmax:50
+ }
+ // Make and define the Raphael area
+ var paper = Raphael(document.getElementById(config.target),config.width, config.height);
+
+ // variable
+ var yCoef = 2; // coef for height of 1 tweet
+ var frameSize = 5; // frame size
+ var lineSize = 650; // timeline width
+ var nbrframes = lineSize/frameSize; // frame numbers
+ var numberOfTweet = 400;
+ var duration = 4299820 ;
+
+ frameLenght = lineSize/frameSize;
+ var timeline;
+ var tweets = new Array();
+ var element = new Array();
+ var cluster = new Array();
+ var frames = new Array(frameLenght);
+ var slices = new Array();
+ var colors = new Array("","#1D973D","#C5A62D","#CE0A15","#036AAE","#585858");
+
+ var traceNum = 0;
+ function trace(msg,value){
+ traceNum += 1;
+ $("<div>"+traceNum+" - "+msg+" : "+value+"</div>").appendTo("#Ldt-output");
+ }
+
+ function qualificationTrans(value){
+ if(value == "Q"){
+ return 2;
+ }else if(value =="REF"){
+ return 4;
+ }else if(value =="OK"){
+ return 1;
+ }else if(value =="KO"){
+ return 3;
+ }else if(value ==""){
+ return 5;
+ }
+ }
+
+ var k=0;
+
+ $.ajax({
+ dataType: "json",
+ url:"metadata.json",
+ success : function(json){
+ trace("load","");
+ $.each(json.annotations, function(i,item) {
+
+ var MyTime = Math.floor(item.begin/duration*lineSize);
+ var Myframe = Math.floor(MyTime/lineSize*frameLenght);
+
+ if (item.content['polemics'] != undefined) {
+
+ if (item.content['polemics'][0] != null) {
+
+ for(var j=0; j<item.content['polemics'].length; j++){
+
+
+
+ tweets[k] = {
+ id:i,
+ qualification:qualificationTrans(item.content['polemics'][j]),
+ yIndicator:MyTime,
+ yframe:Myframe
+ }
+ trace("t","y = "+tweets[k].yIndicator+" | yf = "+tweets[k].yframe+" | q = "+tweets[k].qualification);
+ k+=1;
+ }
+ }else{
+ //trace("k = ",i);
+ tweets[k] = {
+ id:i,
+ qualification:qualificationTrans(""),
+ yIndicator:MyTime,
+ yframe:Myframe
+ }
+ k+=1;
+ }
+
+ } else {
+ //trace("tweet qualification = ","null");
+ }
+ });
+ trace("======= ",k);
+ DrawTweets ();
+
+ }
+ });
+
+ slice = function(){
+ var id;
+ var values;
+ var elements;
+ }
+
+ slice = function(id,values){
+
+ }
+
+
+ // Random value for tweet simulations
+ /*
+ for(var i=0; i<numberOfTweet; i++) {
+ var MyTime = Math.floor(Math.random()*500);
+ var Myframe = Math.floor(MyTime/lineSize*frameLenght);
+
+ tweets[i] = {
+ id:i,
+ qualification:Math.floor(Math.random()*6),
+ yIndicator:MyTime,
+ yframe:Myframe
+ }
+ //trace("t","y = "+tweets[i].yIndicator+" | f = "+tweets[i].yframe+" | q = "+tweets[i].qualification);
+ // ajout dans cluster
+ }*/
+
+ // tweet classement
+ function DrawTweets (){
+ numberOfTweet = tweets.length;
+ //alert(numberOfTweet);
+ for(var i=0; i<nbrframes; i++) {
+ for(var j=0; j<numberOfTweet; j++) {
+ if (i==tweets[j].yframe){
+
+ var k = tweets[j].qualification;
+ //trace("add in "+i,k);
+ // créer un tableau pour les cluster
+ if(frames[i]==undefined){
+ frames[i] = new Array();
+ }
+ // asigné le comptage au cluster
+ if(frames[i][k]==undefined){
+ frames[i][k]=1;
+ }else{
+ frames[i][k]+=1;
+ }
+ }
+ }
+
+ }
+
+ var max = 0;
+ var padding = 50;
+ var height = 50;
+
+ for(var i=0; i<nbrframes; i++) {
+ var moy = 0;
+ for (var j=1; j<6; j++){
+ if (frames[i]!=undefined){
+ if (frames[i][j]!=undefined){
+ moy += frames[i][j]
+ }
+ }
+ }
+ //trace("frame "+i,moy);
+ if (moy>max){max=moy;}
+ }
+ trace("frame max =",max);
+ trace("===================","=====================");
+
+ for(var i=0; i<nbrframes; i++) {
+ var addEheight = 0;
+ for (var j=6; j>0; j--){
+ if (frames[i]!=undefined){
+ if (frames[i][j]!=undefined){
+ var Eheight = frames[i][j]*5;
+ paper.rect(i*frameSize, padding-Eheight-addEheight, 4, Eheight).attr({stroke:"#00","stroke-width":0.1, fill: colors[j]});
+ addEheight +=Eheight;
+ }
+ }
+
+ }
+ }
+
+ }
+
+</script>
+</body>
+</html>