web/res/metadataplayer.polemic/src/js/polemic.js
author Yves-Marie Haussonne <1218002+ymph@users.noreply.github.com>
Mon, 25 Jul 2011 18:50:20 +0200
changeset 229 74c9ddc3640b
parent 202 2bf0fd3432bf
child 259 bc17d1af15ab
permissions -rwxr-xr-x
a lot of changes in the web file organization. add folder, archive...

/* 
 * 	
 *	Copyright 2010 Institut de recherche et d'innovation 
 *	contributor(s) : Samuel Huron 
 *	 
 *	contact@iri.centrepompidou.fr
 *	http://www.iri.centrepompidou.fr 
 *	 
 *	This software is a computer program whose purpose is to show and add annotations on a video .
 *	This software is governed by the CeCILL-C license under French law and
 *	abiding by the rules of distribution of free software. You can  use, 
 *	modify and/ or redistribute the software under the terms of the CeCILL-C
 *	license as circulated by CEA, CNRS and INRIA at the following URL
 *	"http://www.cecill.info". 
 *	
 *	The fact that you are presently reading this means that you have had
 *	knowledge of the CeCILL-C license and that you accept its terms.
*/
// CHART TIMELINE / VERSION PROTOTYPE  ::


	var yMax	  		= config.height; 
	var PaperSlider;
	var  heightOfChart;
	// Make and define the Raphael area
	//var paper = Raphael(document.getElementById(config.target),config.width, config.height);
		
	function ChartTimeLine (){
	
		// variable 
		// yMax
		var yCoef	  		= 2; 						// coef for height of 1 tweet 
		var frameSize 		= 5; 						// frame size 
		var margin 	  		= 1;						// marge between frame
		var lineSize  		= config.width;				// timeline pixel width 
		var nbrframes 		= lineSize/frameSize; 		// frame numbers
		var numberOfTweet 	= 0;						// number of tweet overide later 
		var duration  		= config.duration;			// 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;
			__IriSP.jQuery("<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 
		__IriSP.jQuery.ajax({
		  dataType: "jsonp",
		  url:config.metadata,
		  success : function(json){
			trace("load","");
		    // get current view (the first ???)
		    view = json.views[0];
		    
		    // the tweets are by definition of the second annotation type
		    tweet_annot_type = null;
		    if(typeof(view.annotation_types) !== "undefined" && view.annotation_types.length > 1) {
		    	tweet_annot_type = view.annotation_types[1];
		    }
			
			
			__IriSP.jQuery.each(json.annotations, function(i,item) {
				
				var MyTime  = Math.floor(item.begin/duration*lineSize);
				var Myframe = Math.floor(MyTime/lineSize*frameLenght);

				if (typeof(item.meta) !== "undefined" && typeof(item.meta["id-ref"]) !== "undefined" && item.meta["id-ref"] === tweet_annot_type) {
					if (item.content['polemics'] != undefined && 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){
									var y=config.heightmax-addEheight;
									if(yMax>y){yMax=y;}
									e = paper.rect( i*frameSize, 					// x
													y,								// 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);
									});
									__IriSP.jQuery(e.node).attr('id', 't'+k+'');
									__IriSP.jQuery(e.node).attr('title', frames[i].mytweetsID[k].title);
									__IriSP.jQuery(e.node).attr('begin',  frames[i].mytweetsID[k].timeframe);
									var tempPosition = {x:i*frameSize,y:config.heightmax-addEheight};
									addTip(e.node, frames[i].mytweetsID[k].title,colors[j],tempPosition);
									//frames[i].mytweetsID.pop();
								}
							}
						}
					}
				}

			}		
			// DRAW UI :: resize border and bgd
			heightOfChart 	= (yMax-(config.height-yMax));
			PaperBackground = paper.rect(0,yMax,config.width,heightOfChart).attr({fill:"#fff","stroke-width":0.1,opacity: 0.1});	
			PaperBorder 	= paper.rect(0,yMax,config.width,1).attr({fill:"#fff",stroke: "none",opacity: 1});	
			PaperSlider 	= paper.rect(0,20,1,heightOfChart).attr({fill:"#fff",stroke: "none",opacity: 1});	
			
			// decalage 
			tweetSelection = paper.rect(-100,-100,5,5).attr({fill:"#fff",stroke: "none",opacity: 1});	
				
			PaperSlider.toFront();
			PaperBackground.toBack();
		}
		
		if(typeof(PaperSlider) !== 'undefined' ) {
			PaperSlider.toFront();
		}
	}

	
	jQuery(document).mousemove(function(e){
		if (over){
			__IriSP.jQuery("#tip").css("left", e.pageX-106).css("top", e.pageY-160);
			__IriSP.jQuery("#tipcolor").css("background-color", tipColor);
			__IriSP.jQuery("#tiptext").text(tipText);
			__IriSP.jQuery("#tip").show();
		}else{
			if (typeof(__IriSP) !== 'undefined' && typeof(__IriSP.jQuery) === 'function') {
				__IriSP.jQuery("#tip").css("left", -10000).css("top", -100000);
			     //tweetSelection.attr({x:-100,y:-100});
			}
		}
	});
	
	var over 	 = false;
	var tipText  = "";
	var tipColor = "#efefef";
	var tweetSelection;
	var PaperSlider;
	
	// AddTip  ******************************************************************************
	function addTip(node, txt,color,tempPosition){
			__IriSP.jQuery(node).mouseover(function(){
			   tipText = txt;
			   //tip.hide();//fadeIn(0);
			   tipColor = color;
			   over = true;
			   //tweetSelection.attr(tempPosition);
			   //tweetSelection.toFront();
			}).mouseout(function(){
			   //tip.show()//tip.fadeOut(0);
			   over = false;
			});
			

	}
	
		jQuery(document).ready(function() {
			if (typeof(__IriSP) !== 'undefined' && typeof(__IriSP.jQuery) === 'function') {
				__IriSP.jQuery("#tip").hide();
			}
		});