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 33	2d9b15f99b4e
parent 32	4003f84cd349
child 35	4267d6d27a7d

equal deleted inserted replaced

-:4003f84cd349
+:2d9b15f99b4e
 /*
 * Classe définissant la mosaïque.
 * Elle contient sa longueur, le nombre d'images total, une liste d'urls pour les vidéos, leurs snapshots principaux et leur position.
 * Contient également les dimensions en px de la mosaïque.
 */
-function mosaic(len, imgToShow, zoomPercentage, prezoomPercentage, zoomedMargin)
+function mosaic(len, imgToShow, imgTotal, zoomPercentage, prezoomPercentage, zoomedMargin)
 {
 //S'il s'agit d'un rectangle.
 if(imgToShow % len == 0)
 {
 //Longueur horizontale.
 this.length = len;
 //Nombre d'images dans la mosaïque.
 this.imagesToShow = imgToShow;
+		this.imagesTotal = imgTotal;
 //Tableaux des urls des vidéos, des snapshots et de leur position dans la mosaïque.
 this.videos = [];
 this.urls = [];
 this.imgs = [];
 this.ids = [];
+		//On remplit le tableau d'ids.
+		for(var i = 0 ; i < this.imagesTotal ; i++)
+			this.ids.push(i);
+		//On les mélange.
+		this.ids.sort(function()
+		{
+			return 0.5 - Math.random()
+		});
+		console.log(this.ids);
 //Dimensions de la mosaïque en pixels.
 this.width;
 this.height;
 //Dimensions d'un snapshot en pixels.
 this.snapshotWidth;
 this.zoomTime;
 this.unzoomTime;
 this.timeNeighbourGlowing;
 this.timeNeighbourUnglowing;
 this.timeMovingToNeighbour;
+		this.timeSearchFade;
+		this.timeNotifyFade;
 //Booléens permettant ou non certaines intéractions selon le contexte.
 this.zoomed;
 this.fullscreen;
 this.canMoveToNeighbour;
+		this.helpDisplayed;
 //Mode actuel.
 this.currentMode;
 //Snapshot sur lequel on a zoomé.
 this.previousZoomedSN;
 //Position des voisins lors d'un zoom.
 this.neighboursIds = [];
 //ID du snapshot du milieu lors d'un zoom.
 this.centerId;
+		//Lecteur.
 		this.player;
+		//Coordonnées et dimensions d'un snapshot zoomé.
+		this.snTop = 0;
+		this.snLeft = 0;
+		this.snWidth = 0;
+		this.snHeight = 0;
+		this.searchCanvas;
 		this.loadFromJson('./player/json/videos.json');
 }
 else
 {
 {
 this.previousZoomedSN = '';
 this.previousPrezoomDiv = '';
 this.fullscreen = false;
 this.canMoveToNeighbour = false;
+	this.helpDisplayed = false;
 var str = '';
 if(this.imgs.length >= this.imagesToShow)
 {
 for(var i = 0 ; i < this.imagesToShow ; i++)
 this.height = $('#mainPanel').innerHeight();
 //On centre verticalement la mosaïque.
 this.MPTop_margin = ($(document).height() - $('#mainPanel').height())/2;
 $('#mainPanel').css('margin-top', this.MPTop_margin).css('margin-bottom', this.MPTop_margin);
+	//On affiche les notifications.
+	this.notifySelectionSearchMosaicFull();
 	$('.snapshotDivs').mouseenter(function ()
 	{
 		//On effectue un prézoom dès qu'on va sur une image.
 		_this.preZoom($(this));
 	});
 {
 if(this.fullscreen)
 	{
 return;
 	}
+	//On enlève les notifications initiales si elles existent.
+	this.removeSelectionSearchMosaicFull();
 //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.
 {
 width: finalDivWidth + margin*2,
 height: finalDivHeight - margin,
 top: finalDivTop + margin,
 left: finalDivLeft
-}, this.preZoomTime);
+}, this.preZoomTime, function()
+		{
+			mosaic.notifyPointMosaicPrezoom();
+		});
 });
 //Si on clique sur le snapshot prézoomé, on enclenche un zoom total sur ce snapshot.
 $('#prezoomContainer-' + currentId).click(function ()
 {
 //Si on n'a pas zoomé, on quitte la fonction.
 if(!this.zoomed)
 	{
 return;
 	}
+	this.removePointMosaicPrezoom();
 //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;
 //Si la mosaïque est en pleine écran, pas la peine de zoomer.
 if(this.fullscreen)
 	{
 return;
 	}
+	this.removePointMosaicPrezoom();
 //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));
 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.snTop = (zoomedImg.position().top + newZoomTop + mos.MPTop_margin), mos.snLeft = (zoomedImg.position().left + newZoomLeft);
+		mos.snWidth = newSnWidth + 1, mos.snHeight = newSnHeight + 1;
+		mos.loadPlayer(mos.snTop, mos.snLeft, mos.snWidth, mos.snHeight, newZoomTop, newZoomLeft);
 /*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)
+mosaic.prototype.loadPlayer = function(newZoomTop, newZoomLeft, newSnWidth, newSnHeight, zoomTop, zoomLeft)
 {
 	//On configure les options de lancement.
 	IriSP.libFiles.defaultDir = "../lib/";
 	IriSP.widgetsDir = "./player/metadataplayer/"
 	var videoToPlay = this.videos[this.centerId];
 	var currentMetadata = this.urls[this.centerId];
 	console.log('VIDEO[' + this.centerId + '] : ' + videoToPlay);
 	console.log('MD[' + this.centerId + '] : ' + currentMetadata);
-	console.log(newZoomTop + " " + newZoomLeft);
 	var _metadata = {
 		url: currentMetadata,
 		format: 'ldt'
 	};
+	console.log(zoomTop + " m" + this.marginWidth);
 	var _config = {
 		gui: {
+			zoomTop: zoomTop - this.marginWidth*2,
+			zoomLeft: zoomLeft,
 			width: newSnWidth,
 			height: newSnHeight,
 			container: 'LdtPlayer',
 			default_options: {
 				metadata: _metadata
 //Si on n'est pas en plein écran, on quitte.
 if(!this.fullscreen)
 	{
 return;
 	}
+	this.snTop = 0;
+	this.snLeft = 0;
+	this.Width = 0;
+	this.snHeight = 0;
 //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 SD.
 var zoomedImg = $('img', this.previousZoomedSN);
 var src = zoomedImg.attr('src');
 zoomedImg.attr('src', src.replace('snapshots/', 'snapshots-little/'));
-	$('div').remove('.LdtPlayer');
+	mos.player.widgets[0].freePlayer();
+	$('.LdtPlayer').remove();
 	$('body').append('<div class="LdtPlayer" id="LdtPlayer"></div>');
 //On rend leur opacité aux snapshots. Qui ne sont alors plus grisés.
 $('.snapshotDivs').animate(
 {
 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.selectNeighbour);
+		//On remet les notifications initiales.
+		mos.notifySelectionSearchMosaicFull();
 });
 }
 /*
 * Affecte les listeners mouseenter aux voisins lors d'une vue en plein écran.
 var tab = neighbourFrame.attr('id').split('-');
 mos.centerId = tab[1];
 $(this).css('opacity', '0');
 neighbourFrame.remove();
-	$('div').remove('.LdtPlayer');
+	mos.player.widgets[0].freePlayer();
+	$('.LdtPlayer').remove();
 	$('body').append('<div class="LdtPlayer" id="LdtPlayer"></div>');
 //On grise le snapshot qu'on vient de quitter.
 mos.previousZoomedSN.animate(
 {
 //On recharge les voisins.
 $('.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());
+			mos.loadPlayer((destinationImg.position().top + MPCurrentTop + mos.MPTop_margin), (destinationImg.position().left + MPCurrentLeft), destinationImg.width(), destinationImg.height(), MPCurrentTop, MPCurrentLeft);
 });
 });
 }
 /*
 * Charge les vidéos, les snapshots et les annotations depuis un fichier json.
 */
 mosaic.prototype.loadFromJson = function(path)
 {
 	var _this = this;
+	var i = 0;
 	$.getJSON(path, function(data)
 	{
 		$.each(data, function(key, val)
 		{
 			// console.log(val);
 			$.each(val, function(key_video, val_video)
 			{
 				$.getJSON(val_video.metadata, function(meta)
 				{
-					_this.affectVideoById(val_video.metadata, meta.medias[0].url.replace('rtmp://', 'http://').replace('/ddc_player/', '/'));
+					_this.affectVideoById(val_video.metadata, meta.medias[0].url.replace('rtmp://', 'http://').replace('/ddc_player/', '/').replace('mp4:', '').replace('.m4v', '.mp4'));
 					//console.log(meta.medias[0].url.replace('rtmp://', 'http://').replace('/ddc_player/', '/'));
 				});
-				_this.imgs.push(val_video.snapshot);
+				// _this.imgs.push(val_video.snapshot);
-				_this.urls.push(val_video.metadata);
+				// _this.urls.push(val_video.metadata);
+				_this.imgs[_this.ids[i]] = val_video.snapshot;
+				_this.urls[_this.ids[i]] = val_video.metadata;
+				i++;
 			});
 		});
 		console.log('rdy');
 		_this.loadMosaic();
 	});
 			this.videos[i] = video;
 			break;
 		}
 	}
 }
+/*
+* Lance une recherche par courbes.
+*/
+mosaic.prototype.startSearch = function()
+{
+	var top, left, width, height, margin_top, inMosaic;
+	//Si on est dans le cas d'un filtrage de mosaïque.
+	if(this.currentMode == "FILTER")
+	{
+		var mainPanel = $('#mainPanel');
+		top = mainPanel.position().top;
+		left = mainPanel.position().left;
+		width = mainPanel.width();
+		height = mainPanel.height();
+		margin_top = this.MPTop_margin;
+		inMosaic = true;
+	}
+	//Sinon si c'est une recherche dans la vidéo.
+	else if(this.currentMode == "SEARCH")
+	{
+		top = this.snTop;
+		left = this.snLeft;
+		width = this.snWidth;
+		height = this.snHeight;
+		margin_top = '0px';
+		inMosaic = false;
+	}
+	this.searchCanvas = new searchCanvas(top, left, width, height, margin_top, this.timeSearchFade, inMosaic);
+	this.searchCanvas.create();
+}
+/*
+* Quitte une recherche par courbes.
+*/
+mosaic.prototype.leaveSearch = function()
+{
+	this.searchCanvas.leaveSearch();
+}
+/* ===============================================
+*												   *
+*		      ZONE DES NOTIFICATIONS			   *
+*												   *
+=============================================== */
+/*
+* Affiche la notification de sélection/recherche lorsque la mosaique est complète.
+*/
+mosaic.prototype.notifySelectionSearchMosaicFull = function()
+{
+	//On spécifie les notifications en div.
+	var notification_selection = "<div id='notify_selection' class='notifications'></div>";
+	var notification_search = "<div id='notify_search' class='notifications'></div>";
+	//On les ajoute à la mosaïque.
+	$('#mainPanel').append(notification_selection + notification_search);
+	//On calcule leurs coordonnées et dimensions.
+	var notify_width = $('.notifications').width(), notify_height = $('.notifications').height();
+	var notify_margin = parseInt($('.notifications').css('margin'));
+	var selection_left = $(window).width() / 2 - (notify_width * 2 + notify_margin * 3) / 2;
+	var search_left = selection_left + notify_width + notify_margin;
+	//On les positionne.
+	$('#notify_selection').css(
+	{
+		left: selection_left
+	});
+	$('#notify_search').css(
+	{
+		left: search_left
+	});
+	//On les fait apparaître.
+	$('.notifications').css(
+	{
+		opacity: "0.9"
+	});
+}
+/*
+* Supprime la notification de sélection/recherche lorsque la mosaique est complète.
+*/
+mosaic.prototype.removeSelectionSearchMosaicFull = function()
+{
+	$('#notify_selection, #notify_search').remove();
+}
+/*
+* Affiche la notification de maintient du pointage lors d'une phase de prézoom.
+*/
+mosaic.prototype.notifyPointMosaicPrezoom = function()
+{
+	if($('#notify_point').length > 0)
+	{
+		return;
+	}
+	//On spécifie les notifications en div.
+	var notification_point = "<div id='notify_point' class='notifications'></div>";
+	//On les ajoute à la mosaïque.
+	$('#mainPanel').append(notification_point);
+	console.log('Append');
+	//On calcule leurs coordonnées et dimensions.
+	var notify_width = $('.notifications').width(), notify_height = $('.notifications').height();
+	var notify_margin = parseInt($('.notifications').css('margin'));
+	var point_left = $(window).width() / 2 - (notify_width) / 2 - notify_margin;
+	//On les positionne.
+	$('#notify_point').css(
+	{
+		left: point_left
+	});
+	//On les fait apparaître.
+	$('.notifications').css(
+	{
+		opacity: "0.9"
+	});
+}
+/*
+* Supprime la notification de maintient du pointage.
+*/
+mosaic.prototype.removePointMosaicPrezoom = function()
+{
+	$('#notify_point').remove();
+}
+/*
+* Affiche l'aide.
+*/
+mosaic.prototype.notifyHelp = function()
+{
+	if(this.helpDisplayed)
+	{
+		return;
+	}
+	this.removeSelectionSearchMosaicFull();
+	this.removePointMosaicPrezoom();
+	this.helpDisplayed = true;
+	var search_2hands_tab = ['no_motion', 'right_angle', 'contact', 'grand_jete', 'circle', 'screw', 'arc', 'rythme', 'slow', 'up_down', 'wave', 'wheel'];
+	var search_body_tab = ['bend', 'fall', 'jump', 'hello', 'knee_up'];
+	var controls_1hand_tab = ['selection'];
+	//On spécifie les notifications en div.
+	var search_title = "<div id='search_title'></div>";
+	var search_img = "<div id='search_img' class='notify_imgs'></div>";
+	var search_2hands_text = "<div id='search_2hands_text'></div>";
+	var search_2hands_imgs = "<div id='search_2hands_imgs' class='notify_imgs_big'>";
+	for(var i = 0 ; i < search_2hands_tab.length ; i++)
+	{
+		search_2hands_imgs += "<div id='2hands_" + search_2hands_tab[i] + "' class='notify_imgs_small'></div>";
+	}
+	search_2hands_imgs += "</div>";
+	var search_body_text = "<div id='search_body_text'></div>";
+	var search_body_imgs = "<div id='search_2hands_imgs' class='notify_imgs'>"
+	for(var i = 0 ; i < search_body_tab.length ; i++)
+	{
+		search_body_imgs += "<div id='body_" + search_body_tab[i] + "' class='notify_imgs_small'></div>";
+	}
+	search_body_imgs += "</div>";
+	var controls_title = "<div id='controls_title'></div>";
+	var controls_img = "<div id='controls_img' class='notify_imgs'></div>";
+	var controls_1hand_text = "<div id='controls_1hand_text'></div>";
+	var controls_1hand_imgs = "<div id='controls_1hand_imgs' class='notify_imgs'>";
+	for(var i = 0 ; i < controls_1hand_tab.length ; i++)
+	{
+		controls_1hand_imgs += "<div id='1hand_" + controls_1hand_tab[i] + "' class='notify_imgs_small'></div>";
+	}
+	controls_1hand_imgs += "</div>";
+	var help_search = "<div id='help_search'>" + search_title + search_img + search_2hands_text + search_2hands_imgs + search_body_text + search_body_imgs + "</div>";
+	var help_controls = "<div id='help_controls'>" + controls_title + controls_img + controls_1hand_text + controls_1hand_imgs + "</div>";
+	var notification_help = "<div id='notify_help'>" + help_search + "<div id='help_sep'></div>" + help_controls + "</div>";
+	//On les ajoute à la mosaïque.
+	$('body').append(notification_help);
+	//On calcule leurs coordonnées et dimensions.
+	var notify_width = $(window).width(), notify_height = $(window).height();
+	var notify_margin = parseInt($('#notify_help').css('margin'));
+	var notify_ = 10;
+	//On les positionne.
+	$('#notify_help').css(
+	{
+		left: "0px",
+		top: "0px",
+		width: notify_width - notify_margin * 2,
+		height: notify_height - notify_margin * 2,
+		"margin-top": notify_margin_top
+	});
+	var search_width = $('#help_search').width();
+	$('#search_title').html('Recherche');
+	$('#search_2hands_text').html('Gestes à effectuer avec les deux mains');
+	$('#search_body_text').html('Gestes à effectuer avec le corps entier');
+	for(var i = 0 ; i < search_2hands_tab.length ; i++)
+	{
+		$("#2hands_" + search_2hands_tab[i]).css("background-image", "url('./pictos/help/" + search_2hands_tab[i] + ".png')");
+		//console.log("url('../../pictos/help/" + search_2hands_tab[i] + ".png')");
+	}
+	for(var i = 0 ; i < search_body_tab.length ; i++)
+	{
+		$("#body_" + search_body_tab[i]).css("background-image", "url('./pictos/help/" + search_body_tab[i] + ".png')");
+		//console.log("url('../../pictos/help/" + search_2hands_tab[i] + ".png')");
+	}
+	$('#controls_title').html('Contrôles');
+	$('#controls_1hand_text').html('Gestes à effectuer avec une seule main');
+	for(var i = 0 ; i < controls_1hand_tab.length ; i++)
+	{
+		$("#1hand_" + controls_1hand_tab[i]).css("background-image", "url('./pictos/help/" + controls_1hand_tab[i] + ".png')");
+		//console.log("url('../../pictos/help/" + search_2hands_tab[i] + ".png')");
+	}
+	//On les fait apparaître.
+	$('#notify_help').css(
+	{
+		opacity: "1"
+	});
+	$('.notify_imgs_big').css(
+	{
+		opacity: "1"
+	});
+}
+/*
+* Supprime l'aide.
+*/
+mosaic.prototype.removeHelp = function()
+{
+	if(!this.helpDisplayed)
+	{
+		return;
+	}
+	var _this = this;
+	$('#notify_help').fadeOut(this.timeNotifyFade, function()
+	{
+		_this.helpDisplayed = false;
+		$('#notify_help').remove();
+	});
+}

trakers