trakers: comparison front_idill/src/mosaic/js/mosaic.js

Mercurial Mercurial > trakers / comparison

summary | shortlog | changelog | graph | tags | bookmarks | branches | files | changeset | file | latest | revisions | annotate | diff | comparison | raw | help

front_idill/src/mosaic/js/mosaic.js

changeset 31	2c7fc855eba8
parent 30	45c889eae324
child 32	4003f84cd349

equal deleted inserted replaced

-:45c889eae324
+:2c7fc855eba8
 * Après ce laps de temps, l'image zoom complétement et il n'est plus possible de sélectionner une autre image par pointage.
 */
 mosaic.prototype.preZoom = function(snapshot)
 {
 if(this.fullscreen)
+	{
 return;
+	}
 //Mosaïque.
 var mosaic = this;
 //Dimensions de la mosaïque.
 var h = this.height, w = this.width;
 //Longueur en images, nombre d'images et taille de bordure de la mosaïque.
 //ID de l'image actuelle.
 var currentId = $('img', snapshot).attr('id');
 //Si un zoom est déjà en cours, on ne zoom sur rien d'autre en attendant que ce snapshot ai dézoomé en cas de mouseleave.
 if(this.zoomed)
+	{
 if($('#preZoomContainer-' + currentId) != $(this) && this.previousZoomedSN != '' && this.previousId != '')
+		{
 this.preUnzoom();
+		}
 else
+		{
 return;
+		}
+	}
 //On indique qu'on a zoomé et on spécifie le snapshot sur lequel on a zoomé.
 this.zoomed = true;
 this.previousZoomedSN = snapshot;
 this.previousId = currentId;
 var finalDivWidth = initialDivWidth * (prezoomPercentage+1), diffWidth = finalDivWidth - initialDivWidth, finalDivHeight = initialDivHeight + diffWidth;
 var finalDivTop = (initialDivTop - (finalDivHeight - snHeight)/2), finalDivLeft = (initialDivLeft - (finalDivWidth - snWidth)/2);
 //CAS PARTICULIER pour la position du snapshot zoomé : les bordures.
 if(finalDivTop < 0)
+		{
 finalDivTop = -margin;
+		}
 if(finalDivTop + finalDivHeight > h)
+		{
 finalDivTop = h - finalDivHeight;
+		}
 if(finalDivLeft < 0)
+		{
 finalDivLeft = 0;
+		}
 if(finalDivLeft + finalDivWidth + margin*2 > w)
+		{
 finalDivLeft = w - finalDivWidth - margin*2;
+		}
 ////Code de debug.
 ////CAUTION////
 /*var red = '<div id="red"></div>';
 if($('#red') != null || $('#red') != undefined)
 //Si on clique sur le snapshot prézoomé, on enclenche un zoom total sur ce snapshot.
 $('#prezoomContainer-' + currentId).click(function ()
 {
 if(this.previousZoomedSN != '')
+		{
 mosaic.zoom();
+		}
 });
 }
 /*
 * Dézoome sur la position de l'image. Il est à noter que ce dézoome diffère du dézoom global dans la mesure où celui-ci ne concerne que l'image sur laquelle on a zoomé.
 */
 mosaic.prototype.preUnzoom = function()
 {
 //Si on n'a pas zoomé, on quitte la fonction.
 if(!this.zoomed)
+	{
 return;
+	}
 //On spécifie la marge afin de centrer le prédézoom.
 var margin = this.marginWidth;
 //ID du snapshot précédemment pointé.
 var id = this.previousId;
 {
 var mos = this;
 //Si la mosaïque est en pleine écran, pas la peine de zoomer.
 if(this.fullscreen)
+	{
 return;
+	}
 //On prend les attributs nécessaires au calculs.
 var margin = this.marginWidth, len = this.length, imgs = this.imagesToShow;
 var initMPWidth = this.previousZoomedSN.width() * len + margin*len, initMPHeight = this.previousZoomedSN.height() * (imgs / len) + margin*(imgs / len);
 var newMPWidth = initMPWidth * len + this.zoomedMargin * (len), newMPHeight = initMPHeight * (imgs / len) + this.zoomedMargin * ((imgs / len));
 //Dimensions et coordonnées initiales du div sur lequel on zoom.
 var initialDivWidth = this.previousZoomedSN.width(), initialDivHeight = this.previousZoomedSN.height();
 var initialDivTop = this.previousZoomedSN.position().top, initialDivLeft = this.previousZoomedSN.position().left;
 //Dimensions et coordonnées finales du div.
 var finalDivWidth = initialDivWidth * (this.zoomPercentage+1), finalDivHeight = initialDivHeight * (this.zoomPercentage+1);
-var newZoomTop = -this.previousZoomedSN.position().top*(newPreMPHeight/initMPHeight) - this.zoomedMargin/2 + (initMPHeight - initMPHeight * this.zoomPercentage)/2 + 'px', newZoomLeft = -this.previousZoomedSN.position().left*(newPreMPWidth/initMPWidth) - this.zoomedMargin/2 + (initMPWidth - initMPWidth * this.zoomPercentage)/2 + 'px';
+var newZoomTop = -this.previousZoomedSN.position().top*(newPreMPHeight/initMPHeight) - this.zoomedMargin/2 + (initMPHeight - initMPHeight * this.zoomPercentage)/2, newZoomLeft = -this.previousZoomedSN.position().left*(newPreMPWidth/initMPWidth) - this.zoomedMargin/2 + (initMPWidth - initMPWidth * this.zoomPercentage)/2;
 var newSnWidth = initMPWidth * this.zoomPercentage, newSnHeight = initMPHeight * this.zoomPercentage;
 this.preUnzoom(this);
 /*SINGULARITE*/
 this.fullscreen = true;
 {
 //On charge les interactions avec les voisins.
 mos.centerId = zoomedImgId;
 mos.listenToNeighbours();
 mos.currentMode = 'VIDEO';
+		console.log('h : ' + -newZoomLeft + " " + zoomedImg.position().left);
+		mos.loadPlayer((zoomedImg.position().top + newZoomTop + mos.MPTop_margin), (zoomedImg.position().left + newZoomLeft), newSnWidth + 1, newSnHeight + 1);
 /*mos.unload();
 mos.localMos.loadLocalMosaic(newZoomTop, newZoomLeft, newSnWidth, newSnHeight, mos.imgs, tab[1]);*/
 });
 }
 /*
+* Chargement du player basé sur le metadataplayer.
+*/
+mosaic.prototype.loadPlayer = function(newZoomTop, newZoomLeft, newSnWidth, newSnHeight)
+{
+	//On configure les options de lancement.
+	IriSP.libFiles.defaultDir = "../lib/";
+	IriSP.widgetsDir = "./player/metadataplayer/"
+	console.log(newZoomTop + " " + newZoomLeft);
+	var _metadata = {
+		url: 'http://ldt.iri.centrepompidou.fr/ldtplatform/ldt/cljson/id/7c912bce-66b8-11e1-80f6-00145ea4a2be?callback=?',
+		format: 'ldt'
+	};
+	var _config = {
+		gui: {
+			width: newSnWidth,
+			height: newSnHeight,
+			container: 'LdtPlayer',
+			default_options: {
+				metadata: _metadata
+			},
+			css:'./player/metadataplayer/LdtPlayer-core.css',
+			widgets: [
+				{
+					type: "Timeline"
+				}
+			]
+		},
+		player:{
+			type: 'html5', // player type
+			video: 'http://media.iri.centrepompidou.fr/video/ldtplatform/body_trail_cctv.mp4',
+			live: true,
+			height: newSnHeight,
+			width: newSnWidth,
+			autostart: true
+		}
+	};
+	//On positionne le player.
+	$('.LdtPlayer').css(
+	{
+		//display: 'none',
+		position: 'absolute',
+		'background-color': '#000000',
+		top: newZoomTop,
+		left: newZoomLeft
+	});
+	//On démarre le player.
+	var _myPlayer = new IriSP.Metadataplayer(_config, _metadata);
+	console.log(_myPlayer);
+}
+/*
 * Retour à la taille normale de la mosaïque.
 */
 mosaic.prototype.unzoom = function()
 {
 //Si on n'est pas en plein écran, on quitte.
 if(!this.fullscreen)
+	{
 return;
+	}
 //On charge les attributs nécessaires aux calculs.
 var sWidth = this.snapshotWidth, sHeight = this.snapshotHeight;
 var mpWidth = this.width, mpHeight = this.height;
 var mos = this;
-//On passe le snapshot sur lequel on a zoomé en LD.
+//On passe le snapshot sur lequel on a zoomé en SD.
 var zoomedImg = $('img', this.previousZoomedSN);
 var src = zoomedImg.attr('src');
 zoomedImg.attr('src', src.replace('snapshots/', 'snapshots-little/'));
+	$('div').remove('.LdtPlayer');
+	$('body').append('<div class="LdtPlayer" id="LdtPlayer"></div>');
 //On rend leur opacité aux snapshots. Qui ne sont alors plus grisés.
 $('.snapshotDivs').animate(
 {
 width: sWidth,
 mos.fullscreen = false;
 mos.canMoveToNeighbour = false;
 //On revient en mode MOSAIC.
 mos.currentMode = 'MOSAIC';
 //On ne permet plus le déplacement vers les voisins.
-$('.snapshotDivs').unbind('mouseenter', mos.changeNeighbourColor);
+$('.snapshotDivs').unbind('mouseenter', mos.selectNeighbour);
 });
 }
 /*
 * Affecte les listeners mouseenter aux voisins lors d'une vue en plein écran.
 //Si le voisin du haut est sur la même colonne, on n'est pas sur la bordure du haut.
 this.neighboursIds[2] = (currentLine > 0) ? (this.centerId - this.length) : -1;
 //Si le voisin du bas est sur la même colonne, on n'est pas sur la bordure du bas.
 this.neighboursIds[3] = (currentLine < (this.imagesToShow / this.length)) ? (+this.centerId + this.length) : -1;
+	//ID du cadre voisin.
+	var preId;
 for(var i = 0 ; i < this.neighboursIds.length ; i++)
 {
 if(this.neighboursIds[i] != -1)
 {
+			preId = '#neighbourFrameBorder-' + this.neighboursIds[i];
 //On permet le déplacement vers les voisins.
-$('#snapshotDiv-' + this.neighboursIds[i]).mouseenter(mos.changeNeighbourColor);
+// $('#snapshotDiv-' + this.neighboursIds[i] + ', ' + preId + '-left,' + preId + '-right,' + preId + '-up,' + preId + '-down').mouseenter(mos.selectNeighbour);
+$('#snapshotDiv-' + this.neighboursIds[i]).mouseenter(mos.selectNeighbour);
 }
 }
 }
 /*
 * Change la coloration d'une bordure où on se positionne lors d'une vue en plein écran.
 */
-mosaic.prototype.changeNeighbourColor = function()
+mosaic.prototype.selectNeighbour = function()
 {
 ////TEST
 //$('.test').append(mos.currentMode + " " + $(this).attr('id') + " " + 'snapshotDiv-' + mos.centerId + ',');
 //Si on est en mode VIDEO (plein écran) ET si le snapshot pointé est un voisin.
 if((mos.currentMode == 'VIDEO') && ($(this).attr('id') != 'snapshotDiv-' + mos.centerId))
 {
-//On crée le div cyan qui va être superposé au voisin.
+//On crée le cadre qui va être superposé au voisin.
-var cyanDiv = '<div class="cyan" id="cyan-' + $(this).attr('id') + '"></div>';
 //On le colle au voisin.
-$('#mainPanel').append(cyanDiv);
+		var tab = $(this).attr('id').split('-');
-$('#cyan-' + $(this).attr('id')).css('top', $(this).position().top).css('left', $(this).position().left).css('width', $(this).width()).css('height', $(this).height()).css('margin', $(this).css('margin')).animate(
+		var snapshotId = tab[1];
+var neighbourFrame = '';
+		var marginValue = parseFloat($(this).css('margin'));
+		neighbourFrame += '<div class="neighbourFrame" id="neighbourFrame-' + snapshotId + '"><div class="neighbourImgBg" id="neighbourImgBg-' + snapshotId + '"><div class="neighbourImg" id="neighbourImg-' + snapshotId + '"></div></div></div>';
+$('#mainPanel').append(neighbourFrame);
+		//On positionne le div de background juste au niveau du voisin.
+$('#neighbourFrame-' + snapshotId).css(
+		{
+			'top': (+$(this).position().top + marginValue),
+			'left': (+$(this).position().left + marginValue),
+			'width': $(this).width(),
+			'height': $(this).height()
+		});
+		//On positionne le div de background noir juste au niveau de l'image du voisin.
+$('#neighbourImgBg-' + snapshotId).css(
+		{
+			'top': marginValue,
+			'left': marginValue,
+			'width': $(this).width() - marginValue*2,
+			'height': $(this).height() - marginValue*2,
+		});
+		//On met par dessus le div de l'image clonée du voisin.
+		$('#neighbourImg-' + snapshotId).css(
+		{
+			'top': 0,
+			'left': 0,
+			'width': $(this).width() - marginValue*2,
+			'height': $(this).height() - marginValue*2,
+			'background-image': 'url(' + $('img', $(this)).attr('src') + ')',
+			'background-size': $(this).width() + 'px ' + $(this).height() + 'px',
+			'background-position': -marginValue + 'px ' + -marginValue + 'px',
+			'opacity': '0.4'
+		});
+		var fId = '#neighbourFrame-' + snapshotId;
+		$(fId).animate(
 {
 //On le fait apparaître.
-opacity: '0.4'
+opacity: '1'
-}, timeNeighbourUnglowing, function()
+}, timeNeighbourGlowing, function()
 {
 //On peut désormais se déplacer vers ce voisin.
 mos.canMoveToNeighbour = true;
-}).mouseleave(mos.unchangeNeighbourColor).click(mos.moveToNeighbour);
+});
+		//Lorsqu'on quitte un des snapshots (bien entendu le voisin en question), on retire le cadre.
+		$(fId).mouseleave(mos.deselectNeighbour)
+		//Si on clique sur le voisin ou son cadre, on passe au voisin suivant.
+		$(fId).click(mos.moveToNeighbour);
 }
 }
 /*
 * Change la coloration d'une bordure quittée lors d'une vue en plein écran.
 */
-mosaic.prototype.unchangeNeighbourColor = function()
+mosaic.prototype.deselectNeighbour = function()
 {
 ////TEST
 //$('.test').append('un,');
 //On ne peut plus se déplacer vers les voisins.
 mos.canMoveToNeighbour = false;
+	//On récupère le voisin.
+	var neighbourFrame = $(this);
 //Si on est en mode VIDEO.
 if(mos.currentMode == 'VIDEO')
 {
-//On obtient le div de coloration superposé au voisin.
-var cyanDiv = $(this);
 //On le fait disparaître progressivement.
-$(this).animate(
+neighbourFrame.animate(
 {
 opacity: '0'
-}, timeNeighbourGlowing, function()
+}, timeNeighbourUnglowing, function()
 {
 //Une fois invisible, on le supprime.
-cyanDiv.remove();
+neighbourFrame.remove();
 });
 }
 }
 /*
 */
 mosaic.prototype.moveToNeighbour = function()
 {
 //Si on ne peut pas se déplacer vers les voisins, on quitte.
 if(!mos.canMoveToNeighbour)
+	{
 return;
+	}
 //On obtient l'ID de destination.
 var tab = $(this).attr('id').split('-');
-var destinationId = tab[2];
+var destinationId = tab[1];
 //On charge les attributs nécessaires aux calculs.
 var MPCurrentTop = $('#mainPanel').position().top, MPCurrentLeft = $('#mainPanel').position().left;
 var divideCoeffTop = Math.floor(destinationId / mos.length) == 0 ? 1 : Math.floor(destinationId / mos.length);
 var divideCoeffLeft = destinationId % mos.length == 0 ? 1 : destinationId % mos.length;
-var cyanTop = $(this).position().top, cyanLeft = $(this).position().left;
+var neighbourFrameTop = $('#snapshotDiv-' + destinationId).position().top, neighbourFrameLeft = $('#snapshotDiv-' + destinationId).position().left;
 //On définit pour le déplacement vertical s'il est nécessaire de se déplacer en haut ou en bas.
-if(mos.previousZoomedSN.position().top > cyanTop)
+if(mos.previousZoomedSN.position().top > neighbourFrameTop)
-MPCurrentTop += Math.abs(cyanTop - mos.previousZoomedSN.position().top);
+MPCurrentTop += Math.abs(neighbourFrameTop - mos.previousZoomedSN.position().top);
-else if(mos.previousZoomedSN.position().top < cyanTop)
+else if(mos.previousZoomedSN.position().top < neighbourFrameTop)
-MPCurrentTop -= Math.abs(cyanTop - mos.previousZoomedSN.position().top);
+MPCurrentTop -= Math.abs(neighbourFrameTop - mos.previousZoomedSN.position().top);
 //On définit pour le déplacement horizontal s'il est nécessaire de se déplacer à gauche ou à droite.
-if(mos.previousZoomedSN.position().left > cyanLeft)
+if(mos.previousZoomedSN.position().left > neighbourFrameLeft)
-MPCurrentLeft += Math.abs(cyanLeft - mos.previousZoomedSN.position().left);
+MPCurrentLeft += Math.abs(neighbourFrameLeft - mos.previousZoomedSN.position().left);
-else if(mos.previousZoomedSN.position().left < cyanLeft)
+else if(mos.previousZoomedSN.position().left < neighbourFrameLeft)
-MPCurrentLeft -= Math.abs(cyanLeft - mos.previousZoomedSN.position().left);
+MPCurrentLeft -= Math.abs(neighbourFrameLeft - mos.previousZoomedSN.position().left);
 //On passe le snapshot de destination en HD.
 var destinationImg = $('#snapshot-' + destinationId);
 var destinationImgSrc = destinationImg.attr('src');
 destinationImg.attr('src', destinationImgSrc.replace('snapshots-little/', 'snapshots/'));
-//On passe l'ancien snapshot en LD.
+//On passe l'ancien snapshot en SD.
 var currentImgSrc = $('img', mos.previousZoomedSN).attr('src');
 $('img', mos.previousZoomedSN).attr('src', currentImgSrc.replace('snapshots/', 'snapshots-little/'));
 //On obtient l'ID du div de coloration du snapshot vers lequel on se déplace afin de le supprimer.
-var cyan = $(this);
+var neighbourFrame = $(this);
-var tab = cyan.attr('id').split('-');
+var tab = neighbourFrame.attr('id').split('-');
-mos.centerId = tab[2];
+mos.centerId = tab[1];
 $(this).css('opacity', '0');
-cyan.remove();
+neighbourFrame.remove();
+	$('div').remove('.LdtPlayer');
+	$('body').append('<div class="LdtPlayer" id="LdtPlayer"></div>');
 //On grise le snapshot qu'on vient de quitter.
 mos.previousZoomedSN.animate(
 {
 opacity: '0.4'
 });
 {
 opacity: '1'
 }, mos.zoomTime, function()
 {
 //On recharge les voisins.
-$('.snapshotDivs').unbind('mouseenter', mos.changeNeighbourColor);
+$('.snapshotDivs').unbind('mouseenter', mos.selectNeighbour);
 mos.previousZoomedSN = $('#snapshotDiv-' + mos.centerId);
 mos.listenToNeighbours();
+			mos.loadPlayer((destinationImg.position().top + MPCurrentTop + mos.MPTop_margin), (destinationImg.position().left + MPCurrentLeft), destinationImg.width(), destinationImg.height());
 });
 });
 }
 /*

trakers