--- a/web/res/metadataplayer/test/chartTimeline6.html Wed Apr 27 15:40:01 2011 +0200
+++ b/web/res/metadataplayer/test/chartTimeline6.html Wed Apr 27 18:54:31 2011 +0200
@@ -1,377 +1,377 @@
-<!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>Polemical tweet timeline</title>
-<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <style type='text/css'>
-#tip{
- position : absolute;
- padding : 3px;
- z-index: 1000000;
- max-width: 200px;
-}
-#tip {
- display: none;
- background: transparent url("../src/css/imgs/white_arrow_long.png");
- font-size: 12px;
- height: 125px;
- width: 180px;
- padding: 10px;
- padding-left: 15px;
- padding-top: 15px;
- padding-right: 15px;
- color: black;
- z-index: 1000000;
- font-family: "Trebuchet MS", "Helvetica", "Arial", "Verdana", "sans-serif";
- overflow:hidden;
-}
-
-</style>
-</head>
-<body>
-
-<div id="output" name="Ldt-output" style="position:absolute;left:800px;" ></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.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:'metadata.json',
- load:'json'},*/
- 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 id="charttimeline" style="position:relative;display:block;"></div>
-<div id="tip"></div>
-<div id="output"></div>
-<script type="text/javascript">
-
-// CHART TIMELINE / VERSION PROTOTYPE ::
-// - config
-// - organisation classe
-// !!!- rollover !!
-// !!!!- legend !!
-// - time cursor
-// - seek !!
-
-/*
- 1 | 1D973D > vert > ++ > OK
- 2 | C5A62D > orange > ?? > Q
- 3 | CE0A15 > rouge > -- > KO
- 4 | 036AAE > bleu > == > REF
- 5 | 585858 > gris > NQ > ""
-*/
-
-
- // configuration
- var config = {
- target:"charttimeline",
- x:8,
- y:418,
- width:650,
- height:70,
- heightmax:70
- }
- // Make and define the Raphael area
- //var paper = Raphael(document.getElementById(config.target),config.width, config.height);
-
- var over = false;
- var tip = $("#tip").hide();
- var tipText = "";
- var tipColor = "#efefef";
-
- function ChartTimeLine (){
-
- var paper = Raphael(config.x,config.y,config.width, config.height);
- paper.rect(0,20,config.width,config.heightmax-20).attr({fill:"#fff","stroke-width":0.1,opacity: 0.1});
- paper.rect(0,20,config.width,1).attr({fill:"#fff",stroke: "none"});
- paper.rect(0,20,config.width,1).attr({fill:"#fff",stroke: "none"});
- paper.rect(0,20,1,1).attr({fill:"#fff",stroke: "none"});
-
- // 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;
- var colors = new Array("","#1D973D","#C5A62D","#CE0A15","#036AAE","#585858");
-
- // array
- var tweets = new Array();
- var element = new Array();
- var cluster = new Array();
- var frames = new Array(frameLenght);
- var slices = new Array();
-
-
- // Classes =======================================================================
- var Frames = function(){
-
- var Myclusters;
- var x;
- var y;
- var width;
- var height;
- };
- Frames = function(json){
- // make my clusters
- // ou Frame vide
- };
- Frames.prototype.draw = function(){
- }
- Frames.prototype.zoom = function(){
- }
- Frames.prototype.inside = function(){
- }
- var Clusters = function(){
- var Object;
- var yDist;
- var x;
- var y;
- var width;
- var height;
- };
- Clusters = function(json){
- // make my object
- };
- var Tweet = function(){
- }
- // Classes =======================================================================
-
-
-
-
- // trace function
- var traceNum = 0;
- function trace(msg,value){
- traceNum += 1;
- $("<div>"+traceNum+" - "+msg+" : "+value+"</div>").appendTo("#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,
- title:item.content['title'],
- timeframe:item.begin
- }
- numberOfTweet+=1;
- }
- }else{
- //trace("k = ",i);
- tweets[numberOfTweet] = {
- id:i,
- qualification:colorTranslation(""),
- yIndicator:MyTime,
- yframe:Myframe,
- title:item.content['title'],
- timeframe:item.begin
- }
- numberOfTweet+=1;
- }
-
- } else {
- //trace("tweet qualification = ","null");
- }
- });
- trace("======= ",numberOfTweet);
- DrawTweets ();
-
- }
- });
-
-
-
- // tweet Drawing (in raphael)
- function DrawTweets (){
- // GROUPES TWEET ============================================
- // 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] = {id:i,
- qualifVol:new Array(),
- mytweetsID:new Array()
- };
- }
- // add my tweet to frame
- frames[i].mytweetsID.push(tweets[j]);
-
- // count opinion by frame
- if( frames[i].qualifVol[k] == undefined){
- frames[i].qualifVol[k] = 1;
- }else{
- frames[i].qualifVol[k] += 1;
- }
-
- }
- }
- }
-
- // GROUPES TWEET ============================================
- // max of tweet by Frame
- var max = 0;
- for(var i=0; i<nbrframes; i++) {
- var moy = 0;
- for (var j=0; j<6; j++){
- if (frames[i]!=undefined){
- if (frames[i].qualifVol[j]!=undefined){
- moy += frames[i].qualifVol[j]
- }
- }
- }
- //trace("frame "+i,moy);
- if (moy>max){max=moy;}
- }
-
- var tweetDrawed = new Array();
- var TweetHeight = 5;
- // DRAW TWEETS ============================================
- for(var i=0; i<nbrframes;i++) {
- var addEheight = 5;
- if (frames[i]!=undefined){
- trace (i+" k=",frames[i].mytweetsID.length);
- // by type
- for (var j=6; j>-1; j--){
- if (frames[i].qualifVol[j]!=undefined){
- // show tweet by type
- for (var k=0; k<frames[i].mytweetsID.length; k++){
- if (frames[i].mytweetsID[k].qualification==j){
- e = paper.rect( i*frameSize, // x
- config.heightmax-addEheight, // y
- frameSize-margin, // width
- TweetHeight // height
- ).attr({stroke:"#00","stroke-width":0.1, fill: colors[j]});
- addEheight +=TweetHeight;
- e.time= frames[i].mytweetsID[k].timeframe;
- e.title= frames[i].mytweetsID[k].title;
- e.mouseover(function () {
- this.attr({stroke:"#fff","stroke-width":5});
- this.toFront();
- }).mouseout(function () {
- this.attr({stroke:"#00","stroke-width":0.1});
- }).mousedown(function () {
- __IriSP.MyApiPlayer.seek(this.time/1000)
- });
- $(e.node).attr('id', 't'+k+'');
- $(e.node).attr('title', frames[i].mytweetsID[k].title);
- $(e.node).attr('begin', frames[i].mytweetsID[k].timeframe);
- addTip(e.node, frames[i].mytweetsID[k].title,colors[j]);
- //frames[i].mytweetsID.pop();
- }
- }
- }
- }
- }
- }
-
-
- }
-
- // AddTip ******************************************************************************
- function addTip(node, txt,color){
- $(node).mouseenter(function(){
- tipText = txt;
- tip.fadeIn(0);
- tipColor = color;
- over = true;
- }).mouseleave(function(){
- tip.fadeOut(0);
- over = false;
- });
- }
-
- }
-
- $(document).mousemove(function(e){
- if (over){
- tip.css("left", e.pageX-106).css("top", e.pageY-160);
- tip.css("color", tipColor)
- tip.text(tipText);
- }
- });
-
-
-
- //ChartTimeLine();
-
-</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>Polemical tweet timeline</title>
+<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+ <style type='text/css'>
+#tip{
+ position : absolute;
+ padding : 3px;
+ z-index: 1000000;
+ max-width: 200px;
+}
+#tip {
+ display: none;
+ background: transparent url("../src/css/imgs/white_arrow_long.png");
+ font-size: 12px;
+ height: 125px;
+ width: 180px;
+ padding: 10px;
+ padding-left: 15px;
+ padding-top: 15px;
+ padding-right: 15px;
+ color: black;
+ z-index: 1000000;
+ font-family: "Trebuchet MS", "Helvetica", "Arial", "Verdana", "sans-serif";
+ overflow:hidden;
+}
+
+</style>
+</head>
+<body>
+
+<div id="output" name="Ldt-output" style="position:absolute;left:800px;" ></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.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:'metadata.json',
+ load:'json'},*/
+ 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 id="charttimeline" style="position:relative;display:block;"></div>
+<div id="tip"></div>
+<div id="output"></div>
+<script type="text/javascript">
+
+// CHART TIMELINE / VERSION PROTOTYPE ::
+// - config
+// - organisation classe
+// !!!- rollover !!
+// !!!!- legend !!
+// - time cursor
+// - seek !!
+
+/*
+ 1 | 1D973D > vert > ++ > OK
+ 2 | C5A62D > orange > ?? > Q
+ 3 | CE0A15 > rouge > -- > KO
+ 4 | 036AAE > bleu > == > REF
+ 5 | 585858 > gris > NQ > ""
+*/
+
+
+ // configuration
+ var config = {
+ target:"charttimeline",
+ x:8,
+ y:418,
+ width:650,
+ height:70,
+ heightmax:70
+ }
+ // Make and define the Raphael area
+ //var paper = Raphael(document.getElementById(config.target),config.width, config.height);
+
+ var over = false;
+ var tip = $("#tip").hide();
+ var tipText = "";
+ var tipColor = "#efefef";
+
+ function ChartTimeLine (){
+
+ var paper = Raphael(config.x,config.y,config.width, config.height);
+ paper.rect(0,20,config.width,config.heightmax-20).attr({fill:"#fff","stroke-width":0.1,opacity: 0.1});
+ paper.rect(0,20,config.width,1).attr({fill:"#fff",stroke: "none"});
+ paper.rect(0,20,config.width,1).attr({fill:"#fff",stroke: "none"});
+ paper.rect(0,20,1,1).attr({fill:"#fff",stroke: "none"});
+
+ // 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;
+ var colors = new Array("","#1D973D","#C5A62D","#CE0A15","#036AAE","#585858");
+
+ // array
+ var tweets = new Array();
+ var element = new Array();
+ var cluster = new Array();
+ var frames = new Array(frameLenght);
+ var slices = new Array();
+
+
+ // Classes =======================================================================
+ var Frames = function(){
+
+ var Myclusters;
+ var x;
+ var y;
+ var width;
+ var height;
+ };
+ Frames = function(json){
+ // make my clusters
+ // ou Frame vide
+ };
+ Frames.prototype.draw = function(){
+ }
+ Frames.prototype.zoom = function(){
+ }
+ Frames.prototype.inside = function(){
+ }
+ var Clusters = function(){
+ var Object;
+ var yDist;
+ var x;
+ var y;
+ var width;
+ var height;
+ };
+ Clusters = function(json){
+ // make my object
+ };
+ var Tweet = function(){
+ }
+ // Classes =======================================================================
+
+
+
+
+ // trace function
+ var traceNum = 0;
+ function trace(msg,value){
+ traceNum += 1;
+ $("<div>"+traceNum+" - "+msg+" : "+value+"</div>").appendTo("#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,
+ title:item.content['title'],
+ timeframe:item.begin
+ }
+ numberOfTweet+=1;
+ }
+ }else{
+ //trace("k = ",i);
+ tweets[numberOfTweet] = {
+ id:i,
+ qualification:colorTranslation(""),
+ yIndicator:MyTime,
+ yframe:Myframe,
+ title:item.content['title'],
+ timeframe:item.begin
+ }
+ numberOfTweet+=1;
+ }
+
+ } else {
+ //trace("tweet qualification = ","null");
+ }
+ });
+ trace("======= ",numberOfTweet);
+ DrawTweets ();
+
+ }
+ });
+
+
+
+ // tweet Drawing (in raphael)
+ function DrawTweets (){
+ // GROUPES TWEET ============================================
+ // 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] = {id:i,
+ qualifVol:new Array(),
+ mytweetsID:new Array()
+ };
+ }
+ // add my tweet to frame
+ frames[i].mytweetsID.push(tweets[j]);
+
+ // count opinion by frame
+ if( frames[i].qualifVol[k] == undefined){
+ frames[i].qualifVol[k] = 1;
+ }else{
+ frames[i].qualifVol[k] += 1;
+ }
+
+ }
+ }
+ }
+
+ // GROUPES TWEET ============================================
+ // max of tweet by Frame
+ var max = 0;
+ for(var i=0; i<nbrframes; i++) {
+ var moy = 0;
+ for (var j=0; j<6; j++){
+ if (frames[i]!=undefined){
+ if (frames[i].qualifVol[j]!=undefined){
+ moy += frames[i].qualifVol[j]
+ }
+ }
+ }
+ //trace("frame "+i,moy);
+ if (moy>max){max=moy;}
+ }
+
+ var tweetDrawed = new Array();
+ var TweetHeight = 5;
+ // DRAW TWEETS ============================================
+ for(var i=0; i<nbrframes;i++) {
+ var addEheight = 5;
+ if (frames[i]!=undefined){
+ trace (i+" k=",frames[i].mytweetsID.length);
+ // by type
+ for (var j=6; j>-1; j--){
+ if (frames[i].qualifVol[j]!=undefined){
+ // show tweet by type
+ for (var k=0; k<frames[i].mytweetsID.length; k++){
+ if (frames[i].mytweetsID[k].qualification==j){
+ e = paper.rect( i*frameSize, // x
+ config.heightmax-addEheight, // y
+ frameSize-margin, // width
+ TweetHeight // height
+ ).attr({stroke:"#00","stroke-width":0.1, fill: colors[j]});
+ addEheight +=TweetHeight;
+ e.time= frames[i].mytweetsID[k].timeframe;
+ e.title= frames[i].mytweetsID[k].title;
+ e.mouseover(function () {
+ this.attr({stroke:"#fff","stroke-width":5});
+ this.toFront();
+ }).mouseout(function () {
+ this.attr({stroke:"#00","stroke-width":0.1});
+ }).mousedown(function () {
+ __IriSP.MyApiPlayer.seek(this.time/1000)
+ });
+ $(e.node).attr('id', 't'+k+'');
+ $(e.node).attr('title', frames[i].mytweetsID[k].title);
+ $(e.node).attr('begin', frames[i].mytweetsID[k].timeframe);
+ addTip(e.node, frames[i].mytweetsID[k].title,colors[j]);
+ //frames[i].mytweetsID.pop();
+ }
+ }
+ }
+ }
+ }
+ }
+
+
+ }
+
+ // AddTip ******************************************************************************
+ function addTip(node, txt,color){
+ $(node).mouseenter(function(){
+ tipText = txt;
+ tip.fadeIn(0);
+ tipColor = color;
+ over = true;
+ }).mouseleave(function(){
+ tip.fadeOut(0);
+ over = false;
+ });
+ }
+
+ }
+
+ $(document).mousemove(function(e){
+ if (over){
+ tip.css("left", e.pageX-106).css("top", e.pageY-160);
+ tip.css("color", tipColor)
+ tip.text(tipText);
+ }
+ });
+
+
+
+ //ChartTimeLine();
+
+</script>
+
+
+</div>
+</body>
+</html>