--- a/web/res/metadataplayer/test/chartTimeline.html Wed Apr 27 15:40:01 2011 +0200
+++ b/web/res/metadataplayer/test/chartTimeline.html Wed Apr 27 18:54:31 2011 +0200
@@ -1,319 +1,319 @@
-<!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>
-
-
-<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>
-
-
-
-
-
-
-<script type="text/javascript">
-
- // configuration
- var config = {
- target:"charttimeline",
- x:8,
- y:438,
- width:650,
- height:400,
- heightmax:400
- }
- // Make and define the Raphael area
- var paper = Raphael(config.x,config.y,config.width, config.height);
-
- // variable
- var yCoef = 2; // coef for height of 1 tweet
- var frameSize = 5; // frame size
- var margin = 1; // marge between frame
- var lineSize = 650; // timeline pixel width
- var nbrframes = lineSize/frameSize; // frame numbers
- var numberOfTweet=0; // number of tweet overide later
- var duration = 4299820 ; // timescale width
- var frameLenght =lineSize/frameSize;// frame timescale
-
- var timeline;
-
- // array
- var tweets = new Array();
- var element = new Array();
- var cluster = new Array();
- var frames = new Array(frameLenght);
- var slices = new Array();
-
- // Refactoring (parametere) ************************************************************
- var colors = new Array("","#1D973D","#C5A62D","#CE0A15","#036AAE","#585858");
-
- // trace function
- var traceNum = 0;
- function trace(msg,value){
- traceNum += 1;
- $("<div>"+traceNum+" - "+msg+" : "+value+"</div>").appendTo("#Ldt-output");
- }
-
- // Refactoring (parametere) ************************************************************
- // color translastion
- function colorTranslation(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;
- }
- }
-
-
- // Refactoring (parametere) ************************************************************
- // load tweets send in parameters
- $.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[numberOfTweet] = {
- id:i,
- qualification:colorTranslation(item.content['polemics'][j]),
- yIndicator:MyTime,
- yframe:Myframe
- }
- //trace("t","y = "+tweets[numberOfTweet].yIndicator+" | yf = "+tweets[numberOfTweet].yframe+" | q = "+tweets[numberOfTweet].qualification);
- numberOfTweet+=1;
- }
- }else{
- //trace("k = ",i);
- tweets[numberOfTweet] = {
- id:i,
- qualification:colorTranslation(""),
- yIndicator:MyTime,
- yframe:Myframe
- }
- numberOfTweet+=1;
- }
-
- } else {
- //trace("tweet qualification = ","null");
- }
- });
- trace("======= ",numberOfTweet);
- DrawTweets ();
-
- }
- });
-
-
- // FishEye Effect
- var zoomCoef = 2;
-
- function fisheye(id,sens){
-
- if(sens!=0){
- // ZOOM IN -----------------
- //replaceAll(id,sens);
- ZoomIt(id,1,1);
- //ZoomIt(id-1,2);
- //ZoomIt(id+1,2);
- } else {
- trace("ici1","");
- // ZOOM OUT -----------------
- ZoomIt(id,1,0);
- trace("ici3","");
- }
-
- }
-
- function replaceAll(id){
- // move every body
- for (var i=0; i<slices.length; i++) {
- if (slices[i] != undefined || i==id || i==id+1 || i==id-1 ){
- for (var j=0; j<slices[i].length; j++) {
- if (slices[i][j] != undefined){
- //trace("anim== ",i+" "+slices[i].length);
- slices[i][j].animate({//x:slices[i][j].attr("x")+(zoomCoef*3*frameSize),
- height:slices[i][j].heightStart,
- width:frameSize-margin,
- y:slices[i][j].yStart
- },180);
- }
- }
-
- }
- }
- }
-
- // elem.currentWidth = fisheyemenu.easeInOut(startWidth,endWidth,steps,actStep,powr);
- // easeInOut(startWidth,endWidth,steps,actStep,powr);
-
- //http://raphaeljs.com/reference.html#plugins-elements
- /*
- Raphael.el.red = function () {
- this.attr({fill: "#f00"});
- };*/
-
- function ZoomIt(id,coef,sens){
- if (slices[id][0].state==0 && sens!=0){
- slices[id][0].state=1;
- var addEheight = 0;
- for (var j=0; j<slices[id].length; j++) {
- //trace("",j);
- object = slices[id][j];
- if (j!=slices[id].length){
- Eheight = object.attr("height")*zoomCoef/coef;
- addEheight += Eheight;
- MyWidth = object.attr("width")*zoomCoef*4;
- object.animate({
- height:Eheight,
- width:MyWidth,
- y:config.heightmax-addEheight
- //x:object.attr("x")-(MyWidth/4)
- },200);
- }
- }
- } else if (slices[id][0].state==1 && sens!=1){
- slices[id][0].state=0;
- slices[id][0].state=1;
- var addEheight = 0;
- for (var j=0; j<slices[id].length; j++) {
- //trace("",j);
- object = slices[id][j];
- if (j!=slices[id].length){
- object.animate({ height:object.heightStart,
- width:frameSize-margin,
- y:object.yStart
- },180);
-
- }
- }
- }
- }
-
- // tweet Drawing (in raphael)
- function DrawTweets (){
-
- //=====================================
- // count nbr of cluster and tweet in a frame an save int in "frames"
- numberOfTweet = tweets.length;
- for(var i=0; i<nbrframes; i++) {
- for(var j=0; j<numberOfTweet; j++) {
- if (i==tweets[j].yframe){
-
- var k = tweets[j].qualification;
- // make array for frame cluster
- if(frames[i]==undefined){
- frames[i] = new Array();
- }
- // count clusters
- if(frames[i][k]==undefined){
- frames[i][k]=1;
- }else{
- frames[i][k]+=1;
- }
- }
- }
- }
-
- //=====================================
- var max = 0; // max of tweet by Frame
- 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);
-
- //=====================================
- // draw cluster of tweet by frame ...
- for(var i=0; i<nbrframes; i++) {
- var addEheight = 0;
- slices[i] = new Array();
- if (frames[i]!=undefined){
- for (var j=6; j>0; j--){
- if (frames[i][j]!=undefined){
- //trace(" x ",i+" "+j);
- var Eheight = frames[i][j]*5;
- // x y w h
- e = paper.rect(i*frameSize, config.heightmax-Eheight-addEheight, frameSize-margin, Eheight).attr({stroke:"#00","stroke-width":0.1, fill: colors[j]});
- e.id = i;
- e.state = 0; // 0 petit // 1 grand
- e.heightStart = Eheight;
- e.yStart = config.heightmax-Eheight-addEheight;
- addEheight +=Eheight;
- e.mouseover(function () {
- fisheye(this.id,1);
- }).mouseout(function () {
- fisheye(this.id,0);
- });;
- slices[i].push(e);
- }
- // ajouter cette objet
-
- }
- }
- }
- }
-
-
-
-
-
-</script>
-
-<div>
-
-<script type='text/javascript' src='http://www.iri.centrepompidou.fr/dev/ldt/static/ldt/js/LdtPlayer.min.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>
-
-</body>
-</html>
+<!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>
+
+
+<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>
+
+
+
+
+
+
+<script type="text/javascript">
+
+ // configuration
+ var config = {
+ target:"charttimeline",
+ x:8,
+ y:438,
+ width:650,
+ height:400,
+ heightmax:400
+ }
+ // Make and define the Raphael area
+ var paper = Raphael(config.x,config.y,config.width, config.height);
+
+ // variable
+ var yCoef = 2; // coef for height of 1 tweet
+ var frameSize = 5; // frame size
+ var margin = 1; // marge between frame
+ var lineSize = 650; // timeline pixel width
+ var nbrframes = lineSize/frameSize; // frame numbers
+ var numberOfTweet=0; // number of tweet overide later
+ var duration = 4299820 ; // timescale width
+ var frameLenght =lineSize/frameSize;// frame timescale
+
+ var timeline;
+
+ // array
+ var tweets = new Array();
+ var element = new Array();
+ var cluster = new Array();
+ var frames = new Array(frameLenght);
+ var slices = new Array();
+
+ // Refactoring (parametere) ************************************************************
+ var colors = new Array("","#1D973D","#C5A62D","#CE0A15","#036AAE","#585858");
+
+ // trace function
+ var traceNum = 0;
+ function trace(msg,value){
+ traceNum += 1;
+ $("<div>"+traceNum+" - "+msg+" : "+value+"</div>").appendTo("#Ldt-output");
+ }
+
+ // Refactoring (parametere) ************************************************************
+ // color translastion
+ function colorTranslation(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;
+ }
+ }
+
+
+ // Refactoring (parametere) ************************************************************
+ // load tweets send in parameters
+ $.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[numberOfTweet] = {
+ id:i,
+ qualification:colorTranslation(item.content['polemics'][j]),
+ yIndicator:MyTime,
+ yframe:Myframe
+ }
+ //trace("t","y = "+tweets[numberOfTweet].yIndicator+" | yf = "+tweets[numberOfTweet].yframe+" | q = "+tweets[numberOfTweet].qualification);
+ numberOfTweet+=1;
+ }
+ }else{
+ //trace("k = ",i);
+ tweets[numberOfTweet] = {
+ id:i,
+ qualification:colorTranslation(""),
+ yIndicator:MyTime,
+ yframe:Myframe
+ }
+ numberOfTweet+=1;
+ }
+
+ } else {
+ //trace("tweet qualification = ","null");
+ }
+ });
+ trace("======= ",numberOfTweet);
+ DrawTweets ();
+
+ }
+ });
+
+
+ // FishEye Effect
+ var zoomCoef = 2;
+
+ function fisheye(id,sens){
+
+ if(sens!=0){
+ // ZOOM IN -----------------
+ //replaceAll(id,sens);
+ ZoomIt(id,1,1);
+ //ZoomIt(id-1,2);
+ //ZoomIt(id+1,2);
+ } else {
+ trace("ici1","");
+ // ZOOM OUT -----------------
+ ZoomIt(id,1,0);
+ trace("ici3","");
+ }
+
+ }
+
+ function replaceAll(id){
+ // move every body
+ for (var i=0; i<slices.length; i++) {
+ if (slices[i] != undefined || i==id || i==id+1 || i==id-1 ){
+ for (var j=0; j<slices[i].length; j++) {
+ if (slices[i][j] != undefined){
+ //trace("anim== ",i+" "+slices[i].length);
+ slices[i][j].animate({//x:slices[i][j].attr("x")+(zoomCoef*3*frameSize),
+ height:slices[i][j].heightStart,
+ width:frameSize-margin,
+ y:slices[i][j].yStart
+ },180);
+ }
+ }
+
+ }
+ }
+ }
+
+ // elem.currentWidth = fisheyemenu.easeInOut(startWidth,endWidth,steps,actStep,powr);
+ // easeInOut(startWidth,endWidth,steps,actStep,powr);
+
+ //http://raphaeljs.com/reference.html#plugins-elements
+ /*
+ Raphael.el.red = function () {
+ this.attr({fill: "#f00"});
+ };*/
+
+ function ZoomIt(id,coef,sens){
+ if (slices[id][0].state==0 && sens!=0){
+ slices[id][0].state=1;
+ var addEheight = 0;
+ for (var j=0; j<slices[id].length; j++) {
+ //trace("",j);
+ object = slices[id][j];
+ if (j!=slices[id].length){
+ Eheight = object.attr("height")*zoomCoef/coef;
+ addEheight += Eheight;
+ MyWidth = object.attr("width")*zoomCoef*4;
+ object.animate({
+ height:Eheight,
+ width:MyWidth,
+ y:config.heightmax-addEheight
+ //x:object.attr("x")-(MyWidth/4)
+ },200);
+ }
+ }
+ } else if (slices[id][0].state==1 && sens!=1){
+ slices[id][0].state=0;
+ slices[id][0].state=1;
+ var addEheight = 0;
+ for (var j=0; j<slices[id].length; j++) {
+ //trace("",j);
+ object = slices[id][j];
+ if (j!=slices[id].length){
+ object.animate({ height:object.heightStart,
+ width:frameSize-margin,
+ y:object.yStart
+ },180);
+
+ }
+ }
+ }
+ }
+
+ // tweet Drawing (in raphael)
+ function DrawTweets (){
+
+ //=====================================
+ // count nbr of cluster and tweet in a frame an save int in "frames"
+ numberOfTweet = tweets.length;
+ for(var i=0; i<nbrframes; i++) {
+ for(var j=0; j<numberOfTweet; j++) {
+ if (i==tweets[j].yframe){
+
+ var k = tweets[j].qualification;
+ // make array for frame cluster
+ if(frames[i]==undefined){
+ frames[i] = new Array();
+ }
+ // count clusters
+ if(frames[i][k]==undefined){
+ frames[i][k]=1;
+ }else{
+ frames[i][k]+=1;
+ }
+ }
+ }
+ }
+
+ //=====================================
+ var max = 0; // max of tweet by Frame
+ 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);
+
+ //=====================================
+ // draw cluster of tweet by frame ...
+ for(var i=0; i<nbrframes; i++) {
+ var addEheight = 0;
+ slices[i] = new Array();
+ if (frames[i]!=undefined){
+ for (var j=6; j>0; j--){
+ if (frames[i][j]!=undefined){
+ //trace(" x ",i+" "+j);
+ var Eheight = frames[i][j]*5;
+ // x y w h
+ e = paper.rect(i*frameSize, config.heightmax-Eheight-addEheight, frameSize-margin, Eheight).attr({stroke:"#00","stroke-width":0.1, fill: colors[j]});
+ e.id = i;
+ e.state = 0; // 0 petit // 1 grand
+ e.heightStart = Eheight;
+ e.yStart = config.heightmax-Eheight-addEheight;
+ addEheight +=Eheight;
+ e.mouseover(function () {
+ fisheye(this.id,1);
+ }).mouseout(function () {
+ fisheye(this.id,0);
+ });;
+ slices[i].push(e);
+ }
+ // ajouter cette objet
+
+ }
+ }
+ }
+ }
+
+
+
+
+
+</script>
+
+<div>
+
+<script type='text/javascript' src='http://www.iri.centrepompidou.fr/dev/ldt/static/ldt/js/LdtPlayer.min.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>
+
+</body>
+</html>