<!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.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'},
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;">ici</div>
<script type="text/javascript">
// v1 ::
// - config
// - organisation classe
// - rollover !!
// - legend !!
// - seek !!
// - time cursor
/*
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:438,
width:650,
height:70,
heightmax:70
}
// Make and define the Raphael area
//var paper = Raphael(document.getElementById(config.target),config.width, config.height);
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.2});
paper.rect(0,20,config.width,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("#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
}
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);
}
}
}
}
}
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>
</body>
</html>