front_idill/src/mosaic/js/mosaic.js
changeset 77 205409da0f32
parent 58 a28488078053
child 79 9eff85166868
equal deleted inserted replaced
76:eae52b187e29 77:205409da0f32
    24  * Est appelé dans :
    24  * Est appelé dans :
    25  * la page d'index, afin de créer la mosaique.
    25  * la page d'index, afin de créer la mosaique.
    26  */
    26  */
    27 function Mosaic(config, default_conf)
    27 function Mosaic(config, default_conf)
    28 {
    28 {
    29     this.gestures = ["fall", "jump", "circle", "screw", "bend", "arc", "knee-up", "right-angle", "wave", "slow", "hello", "no-motion", "contact", "up-down", "grand-jete"];
    29     this.gestures = ["fall", "jump", "circle", "screw", "bend", "arc", "knee-up", "right-angle", "wave", "no-motion", "contact", "up-down", "grand-jete"];
    30 
    30 
    31     //Chemin du fichier de configuration.
    31     //Chemin du fichier de configuration.
    32     this.config_path = config;
    32     this.config_path = config;
    33     //Configuration par défaut en cas de valeur erronnée.
    33     //Configuration par défaut en cas de valeur erronnée.
    34     this.default_config = default_conf;
    34     this.default_config = default_conf;
   106     //Coordonnées précédentes de la souris dans le mode d'interaction souris.
   106     //Coordonnées précédentes de la souris dans le mode d'interaction souris.
   107     this.mousePosLastX = null;
   107     this.mousePosLastX = null;
   108     this.mousePosLastY = null;
   108     this.mousePosLastY = null;
   109     //Valeur du déplacement entre un mouse up et un mouse down.
   109     //Valeur du déplacement entre un mouse up et un mouse down.
   110     this.mouseUpDownDelta = 0;
   110     this.mouseUpDownDelta = 0;
       
   111     //Valeur du déplacement entre un touch start et un touch end.
       
   112     this.touchUpDownDelta = 0;
   111 	//Coordonnées de la souris au dernier mouse down.
   113 	//Coordonnées de la souris au dernier mouse down.
   112 	this.mouseDownPosX = null;
   114 	this.mouseDownPosX = null;
   113 	this.mouseDownPosY = null;
   115 	this.mouseDownPosY = null;
   114     
   116     
   115     //Dimensions de la mosaïque en pixels.
   117     //Dimensions de la mosaïque en pixels.
   185     this.gestureDelRequested = false;
   187     this.gestureDelRequested = false;
   186     //Code de gesture actuellement calculé par les détecteurs de courbes.
   188     //Code de gesture actuellement calculé par les détecteurs de courbes.
   187     this.actualCode = '';
   189     this.actualCode = '';
   188     //Indique si l'utilisateur est entré dans la zone de recherche.
   190     //Indique si l'utilisateur est entré dans la zone de recherche.
   189     this.isUserInSearchZone = false;
   191     this.isUserInSearchZone = false;
       
   192 	//Indique si on a fait un mouse down.
   190 	this.isMouseDown = false;
   193 	this.isMouseDown = false;
       
   194 	//Indique si on a fait un touch start.
       
   195 	this.isTouchStart = false;
       
   196 	//Indique si on a fait un touch move.
       
   197 	this.isTouchMove = false;
   191 	//Indique si on est en train de prézoomer.
   198 	//Indique si on est en train de prézoomer.
   192 	this.isPrezooming = false;
   199 	this.isPrezooming = false;
   193 	//Indique si l'icone d'aide a été agrandie.
   200 	//Indique si l'icone d'aide a été agrandie.
   194 	this.isHelpIconZoomed = false;
   201 	this.isHelpIconZoomed = false;
   195 	//Indique si l'icone d'aide est dans une interaction de zoom/dezoom en cours.
   202 	//Indique si l'icone d'aide est dans une interaction de zoom/dezoom en cours.
   196 	this.isHelpIconZooming = false;
   203 	this.isHelpIconZooming = false;
   197 	//Indique à l'utilisateur s'il doit retirer ses mains pour refaire une recherche par courbes.
   204 	//Indique à l'utilisateur s'il doit retirer ses mains pour refaire une recherche par courbes.
   198 	this.mustTakeOutHands = false;
   205 	this.mustTakeOutHands = false;
       
   206 	
       
   207 	//Indique si on est sur une tablette.
       
   208 	this.isTablet = ('ontouchstart' in document.documentElement);
   199     
   209     
   200     //Timeout (attente) pour le zoom après un préZoom.
   210     //Timeout (attente) pour le zoom après un préZoom.
   201     this.zoomTimeout = null;
   211     this.zoomTimeout = null;
   202     //Timeout (attente) pour le passage vers un voisin.
   212     //Timeout (attente) pour le passage vers un voisin.
   203     this.moveToNeighbourTimeout = null;
   213     this.moveToNeighbourTimeout = null;
   301 	$('body').append('<div class="player" id="video"></div><div class="LdtPlayer" id="LdtPlayer"></div>');
   311 	$('body').append('<div class="player" id="video"></div><div class="LdtPlayer" id="LdtPlayer"></div>');
   302 	
   312 	
   303 	//On recharge la fenêtre si sa taille a changé.
   313 	//On recharge la fenêtre si sa taille a changé.
   304 	$(window).resize(function()
   314 	$(window).resize(function()
   305 	{
   315 	{
   306 		_.debounce(window.location.reload(), _this.config.timeReloadAfterResize);
   316 		// _.debounce(window.location.reload(), _this.config.timeReloadAfterResize);
   307 	});
   317 	});
   308 	
   318 	
   309     var initPanel = '<div id="initPanel"></div>';
   319     var initPanel = '<div id="initPanel"></div>';
   310     var mp = $('#mainPanel');
   320     var mp = $('#mainPanel');
   311     mp.append(initPanel);
   321     mp.append(initPanel);
   337                 //Au départ aucune vidéo n'a de gesture de recherche.
   347                 //Au départ aucune vidéo n'a de gesture de recherche.
   338                 this.currentSearchGesture[i] = '';
   348                 this.currentSearchGesture[i] = '';
   339             }
   349             }
   340         }
   350         }
   341         
   351         
   342         return str + '<div id="ghostPanel"></div>';
   352         return str;
   343     }
   353     }
   344     else
   354     else
   345     {
   355     {
   346         alert("Le nombre d'images a afficher doit être divisible par la longueur de la mosaïque !");
   356         alert("Le nombre d'images a afficher doit être divisible par la longueur de la mosaïque !");
   347     }
   357     }
   348 }
       
   349 
       
   350 /*
       
   351  * Fonction appelée lors d'un mouse down en mode d'interaction souris.
       
   352  * Est appelé dans le fichier :
       
   353  * mosaic > fonction loadMosaic, attachée à l'événement jQuery mousedown.
       
   354 */
       
   355 Mosaic.prototype.onMouseDown = function(e)
       
   356 {
       
   357 	this.isMouseDown = true;
       
   358 	
       
   359 	//Si on se trouve sur l'icone d'aide et qu'elle est zoomée.
       
   360 	if(this.isHelpIconZoomed)
       
   361 	{
       
   362 		//On affiche différentes aides en fonction de si on se trouve dans une vidéo ou non.
       
   363 		if(this.currentMode == 'SEARCH' || this.currentMode == 'VIDEO' || this.currentMode == 'TIMELINE')
       
   364 		{
       
   365 			this.notifyHelp(false);
       
   366 		}
       
   367 		else if(this.currentMode == 'FILTER' || this.currentMode == 'MOSAIC')
       
   368 		{
       
   369 			this.notifyHelp(true);
       
   370 		}
       
   371 	}
       
   372 	
       
   373 	//On met à jour les coordonnées de la souris au dernier mouse down.
       
   374 	this.mouseDownPosX = e.pageX;
       
   375 	this.mouseDownPosY = e.pageY;
       
   376 	
       
   377 	//Si on est sur une notification de gesture de recherche.
       
   378 	this.removeSearchNotificationIfOnIt(e.pageX, e.pageY);
       
   379 	this.isUserInSearchZone = true;
       
   380 	
       
   381 	//Si on est en mode de tracé de courbes, on indique qu'on a commencé à tracer au canvas.
       
   382 	if(this.isSearchByCurvesOn)
       
   383 	{
       
   384 		this.searchCanvas.onPointerIn(this.mousePosX, this.mousePosY, null, null);
       
   385 	}
       
   386 }
       
   387 
       
   388 /*
       
   389  * Fonction appelée lors d'un mouse move en mode d'interaction souris.
       
   390  * Est appelé dans le fichier :
       
   391  * mosaic > fonction loadMosaic, attachée à l'événement jQuery mousemove.
       
   392 */
       
   393 Mosaic.prototype.onMouseMove = function(e)
       
   394 {
       
   395 	//On vérifie si la souris n'est pas sur l'icone d'aide.
       
   396 	if(this.isOnHelpIcon(this.mousePosX, this.mousePosY))
       
   397 	{
       
   398 		//On agrandit l'icone d'aide.
       
   399 		this.showBigHelp();
       
   400 	}
       
   401 	else
       
   402 	{
       
   403 		//On la rétrecit sinon.
       
   404 		this.showSmallHelp();
       
   405 	}
       
   406 	
       
   407 	//Si on n'a pas appuyé sur la souris avant, on part.
       
   408 	if(!this.isMouseDown)
       
   409 	{
       
   410 		return;
       
   411 	}
       
   412 	
       
   413 	var _this = this;
       
   414 	
       
   415 	//Si on est en mode de tracé de courbes, on met à jour la courbe.
       
   416 	if(this.isSearchByCurvesOn)
       
   417 	{
       
   418 		this.searchCanvas.onPointerMove(this.mousePosX, this.mousePosY - this.MPTop_margin, null, null);
       
   419 	}
       
   420 	
       
   421 	//On met à jour l'ancienne position de la souris si elle est nulle.
       
   422 	if(!this.mousePosLastX && this.mousePosLastX != 0)
       
   423 	{
       
   424 		this.mousePosLastX = this.mousePosX;
       
   425 	}
       
   426 	if(!this.mousePosLastY && this.mousePosLastY != 0)
       
   427 	{
       
   428 		this.mousePosLastY = this.mousePosY;
       
   429 	}
       
   430 	
       
   431 	//Le delta s'accroît si la souris bouge.
       
   432 	this.mouseUpDownDelta += Math.floor(Math.sqrt((this.mousePosLastX - e.pageX) * (this.mousePosLastX - e.pageX) + (this.mousePosLastY - e.pageY) * (this.mousePosLastY - e.pageY)));
       
   433 	
       
   434 	//On met à jour l'ancienne position de la souris.
       
   435 	if(this.mousePosLastX != this.mousePosX)
       
   436 	{
       
   437 		this.mousePosLastX = this.mousePosX;
       
   438 	}
       
   439 	if(this.mousePosLastY != this.mousePosY)
       
   440 	{
       
   441 		this.mousePosLastY = this.mousePosY;
       
   442 	}
       
   443 	
       
   444 	//Si la souris a parcouru une trop grande distance, on entre en recherche.
       
   445 	if(this.mouseUpDownDelta > this.config.mouseUpDownDeltaTreshold)
       
   446 	{
       
   447 		//Si on est en mosaique, on entre en filtrage.
       
   448 		if(this.currentMode == "MOSAIC")
       
   449 		{
       
   450 			this.preUnzoom();
       
   451 			this.currentMode = "FILTER";
       
   452 			this.isMosaicFiltered = true;
       
   453 		}
       
   454 		//Si on est en mode de filtrage, mais qu'on n'est pas en tracé de courbes.
       
   455 		else if(this.currentMode == "FILTER" && !this.isSearchByCurvesOn && this.isUserInSearchZone)
       
   456 		{
       
   457 			//On lance une nouvelle recherche pas courbes.
       
   458 			this.preUnzoom();
       
   459 		}
       
   460 		//Si on est dans une vidéo, on entre en recherche.
       
   461 		else if(this.currentMode == "VIDEO" || this.currentMode == "TIMELINE")
       
   462 		{
       
   463 			this.currentMode = "SEARCH";
       
   464 		}
       
   465 		//Si on est en mode recherche dans une vidéo, mais qu'on n'est pas en tracé de courbes.
       
   466 		/*else if(this.currentMode == "SEARCH" && !this.isSearchByCurvesOn)
       
   467 		{
       
   468 			//On lance une nouvelle recherche pas courbes.
       
   469 		}*/
       
   470 		
       
   471 		if(this.currentMode != "NO-USER" && this.currentMode.indexOf("INCOMING") == -1 && !this.isSearchByCurvesOn)
       
   472 		{
       
   473 			this.isSearchByCurvesOn = true;
       
   474 			this.startSearch();
       
   475 			this.searchCanvas.onPointerIn(this.mousePosX, this.mousePosY - this.MPTop_margin, null, null);
       
   476 		}
       
   477 		
       
   478 		//S'il n'est pas possible d'afficher l'aide.
       
   479 		if(!this.canNotifyHelp)
       
   480 		{
       
   481 			//On rend son affichage possible après un certain délai.
       
   482 			this.canNotifyHelpTimeout = setTimeout(function()
       
   483 			{
       
   484 				_this.canNotifyHelp = true;
       
   485 			}, this.config.timeoutCanNotifyHelp);
       
   486 		}
       
   487 	}
       
   488 }
       
   489 
       
   490 /*
       
   491  * Fonction appelée lors d'un mouse up en mode d'interaction souris.
       
   492  * Est appelé dans le fichier :
       
   493  * mosaic > fonction loadMosaic, attachée à l'événement jQuery mousemove.
       
   494 */
       
   495 Mosaic.prototype.onMouseUp = function()
       
   496 {
       
   497 	this.isMouseDown = false;
       
   498 	
       
   499 	//Si on était en train de tracer une courbe.
       
   500 	if(this.isSearchByCurvesOn)
       
   501 	{
       
   502 		//On quitte la zone de recherche.
       
   503 		/*this.isUserInSearchZone = false;
       
   504 		
       
   505 		//On regarde si ce qu'on a tracé correspond à une courbe en particulier.
       
   506 		var gesture_match = this.gestureWithSameCode(this.actualCode);
       
   507 		this.actualCode = '';
       
   508 		
       
   509 		//Si oui.
       
   510 		if(gesture_match.length > 0)
       
   511 		{
       
   512 			//Si on est en mode recherche dans une vidéo et que le player est prêt.
       
   513 			if(this.currentMode == "SEARCH" && this.playerIsReady)
       
   514 			{
       
   515 				//On effectue une recherche dans cette vidéo.
       
   516 				this.player.widgets[0].searchByGesture(gesture_match);
       
   517 				this.isCurrentlyInASearchByGesture = this.player.widgets[0].isCurrentlyInASearchByGesture;
       
   518 				
       
   519 				//On va au premier marqueur trouvé.
       
   520 				if(this.player && this.player.widgets[0] && this.timeToGoAt[this.centerId] === 0 && this.player.widgets[0].atLeastOneSearchMarker(this.currentSearchGesture[this.centerId]))
       
   521 				{
       
   522 					this.player.widgets[0].goToFirstSearchedMarker(this.currentSearchGesture[this.centerId]);
       
   523 				}
       
   524 				
       
   525 				//On affiche la notification de gesture de recherche.
       
   526 				this.removeNotifications();
       
   527 				this.currentSearchGesture[this.centerId] = gesture_match;
       
   528 				this.searchGesture(gesture_match, 'valid');
       
   529 				this.curvesGesturesFound = false;
       
   530 			}
       
   531 			//Si on est en mode de filtrage de mosaique.
       
   532 			else if(this.currentMode == "FILTER")
       
   533 			{
       
   534 				if(this.isMosaicFiltered)
       
   535 				{
       
   536 					//On notifie la recherche par filtrage.
       
   537 					this.removeNotifications();
       
   538 					this.filterSearchedType = gesture_match;
       
   539 					this.filterGesture(gesture_match, 'valid');
       
   540 					//On filtre la mosaique.
       
   541 					this.searchFilter(gesture_match);
       
   542 					this.curvesGesturesFound = false;
       
   543 				}
       
   544 			}
       
   545 		}
       
   546 		//Si aucune gesture ne matche dans le dictionnaire.
       
   547 		else
       
   548 		{
       
   549 			//Si on était en mode filtrage de la mosaïque et qu'aucune gesture de filtrage n'avait été détectée avant ca, on revient en mode mosaïque.
       
   550 			if(this.currentMode == "FILTER" && this.filterSearchedType == "")
       
   551 			{
       
   552 				this.currentMode = "MOSAIC";
       
   553 				this.isMosaicFiltered = false;
       
   554 			}
       
   555 			//Sinon si on était en mode recherche dans une video et qu'aucune gesture n'avait été détectée avant ca, on revient en mode video.
       
   556 			if(this.currentMode == "SEARCH" && this.currentSearchGesture[this.centerId] == "")
       
   557 			{
       
   558 				this.currentMode = "VIDEO";
       
   559 			}
       
   560 		}*/
       
   561 		//On dit au module de recherche qu'on arrête de tracer des courbes.
       
   562 		this.searchCanvas.onPointerOut();
       
   563 	}
       
   564 	
       
   565 	this.mousePosLastX = null;
       
   566 	this.mousePosLastY = null;
       
   567 	
       
   568 	//Si la distance parcourue par la souris entre le mouse down et le mouse up est inférieure ou égale au seuil.
       
   569 	if(this.mouseUpDownDelta <= this.config.mouseUpDownDeltaTreshold)
       
   570 	{
       
   571 		//Si on est sur un snapshot prézoomé.
       
   572 		if(this.isOnAPrezoomSN && this.previousZoomedSN != '' && (this.currentMode == 'MOSAIC' || this.currentMode == 'FILTER') && !this.isPrezooming)
       
   573 		{
       
   574 			this.zoom();
       
   575 		}
       
   576 	}
       
   577 	
       
   578 	//On réinitialise le delta, on quitte la recherche par courbes.
       
   579 	this.mouseUpDownDelta = 0;
       
   580 	this.isSearchByCurvesOn = false;
       
   581 	this.leaveSearch();
       
   582 	
       
   583 	//Si on est en mode de filtrage et qu'on a une gesture de filtrage trouvée.
       
   584 	if(this.currentMode == 'FILTER' && this.filterSearchedType != '')
       
   585 	{
       
   586 		//On notifie.
       
   587 		this.removeNotifications();
       
   588 		this.filterGesture(this.filterSearchedType, 'valid');
       
   589 	}
       
   590 }
       
   591 
       
   592 /*
       
   593  * Fonction appelée lors d'un clic en mode d'interaction souris.
       
   594  * Est appelé dans le fichier :
       
   595  * mosaic > fonction loadMosaic.
       
   596 */
       
   597 Mosaic.prototype.onClick = function(x, y)
       
   598 {
       
   599 	//Si la position de la souris entre le mouse down et le mouse up change de plus de 10px, on part.
       
   600 	if(!this.mouseDownPosX || !this.mouseDownPosY || Math.sqrt((this.mouseDownPosX - x) * (this.mouseDownPosX - x) + (this.mouseDownPosY - y) * (this.mouseDownPosY - y)) > 10)
       
   601 	{
       
   602 		return;
       
   603 	}
       
   604 	
       
   605 	//Si on est dans un mode autre qu'un mode zoomé et qu'on n'affiche pas l'aide, on part.
       
   606 	if(this.currentMode != "VIDEO" && this.currentMode != "SEARCH" && this.currentMode != "TIMELINE" && !this.helpDisplayed)
       
   607 	{
       
   608 		return;
       
   609 	}
       
   610 	
       
   611 	//Si on clique en dehors de la video centrale, alors on dézoome.
       
   612 	var TL = $('.Ldt-Timeline');
       
   613 	var TLwidth = TL.width(), TLheight = TL.height();
       
   614 	var Ptop = $('.LdtPlayer').position().top, Pleft = $('.LdtPlayer').position().left;
       
   615 	var Pheight = $('.LdtPlayer').height();
       
   616 	var MPx = this.mousePosX, MPy = this.mousePosY;
       
   617 	
       
   618 	//On regarde si on a cliqué sur un snapshot.
       
   619 	var SN = this.pointerPositionToSN(MPx - this.notifyLeftVideo, MPy - this.notifyTopVideo, true);
       
   620 	var SNId;
       
   621 	if(SN)
       
   622 	{
       
   623 		SNId = parseInt(SN.attr('id').replace('snapshotDiv-', ''));
       
   624 	}
       
   625 	
       
   626 	//Si on n'a pas demandé à supprimé la notification de gesture.
       
   627 	if(!this.gestureDelRequested && !this.helpDisplayed)
       
   628 	{
       
   629 		//Si non, ou s'il ne fait pas partie des voisins.
       
   630 		if(!SNId || !_.include(this.neighboursIds, SNId))
       
   631 		{
       
   632 			//Si le clic a lieu en dehors du player et que l'aide n'est pas affichée, on dezoom.
       
   633 			if(MPx < Pleft || MPx > (+Pleft + TLwidth) || MPy < Ptop || MPy > (+Ptop + Pheight - TLheight))
       
   634 			{
       
   635 				this.unzoom();
       
   636 			}
       
   637 		}
       
   638 		//Si on se trouve sur un voisin, on bouge.
       
   639 		else if(SNId && _.include(this.neighboursIds, SNId) && this.canMoveToNeighbour)
       
   640 		{
       
   641 			this.moveToNeighbour($('#snapshotDiv-' + SNId));
       
   642 		}
       
   643 	}
       
   644 	//Si on l'a demandé, on enlève la demande de suppression.
       
   645 	else
       
   646 	{
       
   647 		this.gestureDelRequested = false;
       
   648 	}
       
   649 	
       
   650 	//Si l'aide est affichée, un clic la ferme.
       
   651 	if(this.helpDisplayed && !this.isHelpIconZoomed && !this.isHelpIconZooming)
       
   652 	{
       
   653 		this.removeHelp();
       
   654 	}
       
   655 }
   358 }
   656 
   359 
   657 /*
   360 /*
   658  * Permet de raffraichir la mosaïque.
   361  * Permet de raffraichir la mosaïque.
   659  * Est appelé dans le fichier :
   362  * Est appelé dans le fichier :
   673     
   376     
   674     //On affecte les chemins vers les images à la mosaïque.
   377     //On affecte les chemins vers les images à la mosaïque.
   675     this.previousZoomedSN;
   378     this.previousZoomedSN;
   676     //On met à jour la mosaïque.
   379     //On met à jour la mosaïque.
   677     $('#mainPanel').html(createMosaic);
   380     $('#mainPanel').html(createMosaic);
       
   381 	//On ajoute le panneau de protection (principalement pour le mode tablettes).
       
   382 	$('body').append('<div id="ghostPanel"></div>');
   678     //On récupère la taille des bordures.
   383     //On récupère la taille des bordures.
   679     this.marginWidth = $('.snapshotDivs').css('margin-bottom');
   384     this.marginWidth = $('.snapshotDivs').css('margin-bottom');
   680     this.marginWidth = parseFloat(this.marginWidth)*2;
   385     this.marginWidth = parseFloat(this.marginWidth)*2;
   681     //On calcule la taille des divs contenant les snapshots.
   386     //On calcule la taille des divs contenant les snapshots.
   682     this.width = $('#mainPanel').innerWidth();
   387     this.width = $('#mainPanel').innerWidth();
   683     //On ne calculera pas tout de suite la hauteur de la mosaique étant donnée qu'elle est calculée par la suite dynamiquement.
   388     //On ne calculera pas tout de suite la hauteur de la mosaique étant donnée qu'elle est calculée par la suite dynamiquement.
   684     this.snapshotWidth = this.width / this.config.imagesByLine - this.marginWidth;
   389     this.snapshotWidth = this.width / this.config.imagesByLine - this.marginWidth;
   685     this.snapshotHeight = this.snapshotWidth*9/16;
   390     this.snapshotHeight = this.snapshotWidth*9/16;
   686     $('.snapshotDivs').css('width', this.snapshotWidth).css('height', this.snapshotHeight).css('margin', this.marginWidth/2);
   391     $('.snapshotDivs').css('width', this.snapshotWidth).css('height', this.snapshotHeight).css('margin-left', this.marginWidth/2);
   687     
   392     
   688     this.height = $('#mainPanel').innerHeight();
   393     this.height = $('#mainPanel').innerHeight();
   689     //On centre verticalement la mosaïque.
   394     //On centre verticalement la mosaïque.
   690     this.MPTop_margin = ($(document).height() - $('#mainPanel').height())/2;
   395     this.MPTop_margin = ($(document).height() - $('#mainPanel').height())/2;
   691     $('#mainPanel').css('margin-top', this.MPTop_margin).css('margin-bottom', this.MPTop_margin);
   396     $('#mainPanel').css('margin-top', this.MPTop_margin).css('margin-bottom', this.MPTop_margin);
   728                 // console.log(_this.annotations.length + ' annotations loaded from ' + nbFichiers + ' files.');
   433                 // console.log(_this.annotations.length + ' annotations loaded from ' + nbFichiers + ' files.');
   729                 
   434                 
   730                 //Si on gère les interactions à la souris.
   435                 //Si on gère les interactions à la souris.
   731                 if(_this.config.mouseInteractions)
   436                 if(_this.config.mouseInteractions)
   732                 {
   437                 {
   733                     //On met à jour la position estimée de la souris.
   438 					//On bind les événements utiles.
   734                     $(window).mousemove(function(e)
   439 					_this.eventBinder();
   735                     {
       
   736                         // _this.refreshPointers(e.pageX, e.pageY, _this, true);
       
   737                         _this.refreshPointers(e.pageX, e.pageY, true);
       
   738                         _this.mousePosX = e.pageX;
       
   739                         _this.mousePosY = e.pageY;
       
   740                     });
       
   741                 }
   440                 }
   742                 
   441                 
   743                 //Si on a activé la préphase mais qu'on est en mode Kinect.
   442                 //Si on a activé la préphase mais qu'on est en mode Kinect.
   744                 if(_this.config.noUserModeEnabled && !_this.config.mouseInteractions)
   443                 if(_this.config.noUserModeEnabled && !_this.config.mouseInteractions)
   745                 {
   444                 {
   758                 //Le premier snapshot sur lequel on zoom en préphase.
   457                 //Le premier snapshot sur lequel on zoom en préphase.
   759                 _this.previousZoomedSN = $('#snapshotDiv-' + _this.fillingIds[0]);
   458                 _this.previousZoomedSN = $('#snapshotDiv-' + _this.fillingIds[0]);
   760             }
   459             }
   761         });
   460         });
   762     }
   461     }
   763     
   462 }
   764     //Si on est en mode d'intéraction souris.
   463 
   765     if(this.config.mouseInteractions)
   464 /*
   766     {
   465  * Bind les événements souris ou touch dans le mode d'interaction souris.
   767 		//On affiche l'icone d'aide.
   466 */
   768 		this.helpIcon();
   467 Mosaic.prototype.eventBinder = function()
   769 		
   468 {
   770         //Si on fait un mouse down sur le body, on vérifie enregistre le déplacement de la souris jusqu'au prochain mouse up.
   469 	var _this = this;
   771         $(window).mousedown(function (e)
   470 	
   772         {
   471 	//On affiche l'icone d'aide.
       
   472 	this.helpIcon();
       
   473 	
       
   474 	//Si on est sur tablette, on utilise l'événement touch start.
       
   475 	if(this.isTablet)
       
   476 	{
       
   477 		document.addEventListener('touchstart', function(e)
       
   478 		{
       
   479 			if(e.touches.length == 1)
       
   480 			{
       
   481 				var touch = e.touches[0];
       
   482 				_this.onTouchStart(touch);
       
   483 			}
       
   484 			e.preventDefault();
       
   485 		}, false);
       
   486 	}
       
   487 	//Sinon souris.
       
   488 	else
       
   489 	{
       
   490 		//Si on fait un mouse down sur le body, on vérifie enregistre le déplacement de la souris jusqu'au prochain mouse up.
       
   491 		$(window).mousedown(function (e)
       
   492 		{
   773 			_this.onMouseDown(e);
   493 			_this.onMouseDown(e);
   774 			return false;
   494 			return false;
   775         });
   495 		});
   776 		
   496 	}
       
   497 	
       
   498 	//Si on est sur tablette, on utilise l'événement touch start.
       
   499 	if(this.isTablet)
       
   500 	{
       
   501 		document.addEventListener('touchmove', function(e)
       
   502 		{
       
   503 			if(e.touches.length == 1)
       
   504 			{
       
   505 				var touch = e.touches[0];
       
   506 				_this.refreshPointers(touch.pageX, touch.pageY, true);
       
   507 				_this.mousePosX = touch.pageX;
       
   508 				_this.mousePosY = touch.pageY;
       
   509 				_this.onTouchMove(touch);
       
   510 			}
       
   511 			e.preventDefault();
       
   512 		}, false);
       
   513 	}
       
   514 	//Sinon souris.
       
   515 	else
       
   516 	{
   777 		//On écoute le déplacement de la souris.
   517 		//On écoute le déplacement de la souris.
   778 		$(window).mousemove(function(e)
   518 		$(window).mousemove(function(e)
   779 		{
   519 		{
       
   520 			_this.refreshPointers(e.pageX, e.pageY, true);
       
   521 			_this.mousePosX = e.pageX;
       
   522 			_this.mousePosY = e.pageY;
   780 			_this.onMouseMove(e);
   523 			_this.onMouseMove(e);
   781 			return false;
   524 			return false;
   782 		});
   525 		});
   783 		
   526 	}
       
   527 	
       
   528 	//Si on est sur tablette, on utilise l'événement touch start.
       
   529 	if(this.isTablet)
       
   530 	{
       
   531 		document.addEventListener('touchend', function(e)
       
   532 		{
       
   533 			_this.onTouchEnd(e);
       
   534 			e.preventDefault();
       
   535 		}, false);
       
   536 	}
       
   537 	//Sinon souris.
       
   538 	else
       
   539 	{
   784 		//Si on fait un mouse up après ce mouse down.
   540 		//Si on fait un mouse up après ce mouse down.
   785 		$(window).mouseup(function()
   541 		$(window).mouseup(function()
   786 		{
   542 		{
   787 			_this.onMouseUp();
   543 			_this.onMouseUp();
   788 			return false;
   544 			return false;
   789 		});
   545 		});
   790 		
   546 	}
       
   547 	
       
   548 	if(!this.isTablet)
       
   549 	{
   791 		//Si on fait un clic.
   550 		//Si on fait un clic.
   792 		$(window).click(function(e)
   551 		$(window).click(function(e)
   793 		{
   552 		{
   794 			_this.onClick(e.pageX, e.pageY);
   553 			_this.onClick(e.pageX, e.pageY);
   795 			_this.removeSearchNotificationIfOnIt(e.pageX, e.pageY);
   554 			_this.removeSearchNotificationIfOnIt(e.pageX, e.pageY);
   796 			return false;
   555 			return false;
   797 		});
   556 		});
   798 		
   557 		
   799 		$(window).on('mousewheel', function(event, delta, deltaX, deltaY)
   558 		$(window).on('mousewheel', function(event, delta, deltaX, deltaY)
   800         {
   559 		{
   801 			//Si on est dans un mode autre qu'on mode zoomé ou que l'aide est affichée, on part.
   560 			//Si on est dans un mode autre qu'on mode zoomé ou que l'aide est affichée, on part.
   802 			if(_this.currentMode != "VIDEO" && _this.currentMode != "SEARCH" && _this.currentMode != "TIMELINE" || _this.helpDisplayed)
   561 			if(_this.currentMode != "VIDEO" && _this.currentMode != "SEARCH" && _this.currentMode != "TIMELINE" || _this.helpDisplayed)
   803 			{
   562 			{
   804 				return;
   563 				return;
   805 			}
   564 			}
   806 			
   565 			
   807             //Quand on "tire" la molette vers soi, on dezoom.
   566 			//Quand on "tire" la molette vers soi, on dezoom.
   808             if (delta < 0)
   567 			if (delta < 0)
   809             {
   568 			{
   810                 _this.unzoom();
   569 				_this.unzoom();
   811             }
   570 			}
   812         });
   571 		});
   813     }
   572 	}
   814 }
   573 }
   815 
   574 
   816 /*
   575 /*
   817  * Charge les paramètres du Front. Local (true/false) est le mode de chargement des données.
   576  * Charge les paramètres du Front. Local (true/false) est le mode de chargement des données.
   818  * Est appelé dans le fichier :
   577  * Est appelé dans le fichier :
   821 Mosaic.prototype.loadParameters = function(file_path)
   580 Mosaic.prototype.loadParameters = function(file_path)
   822 {
   581 {
   823     var _this = this;
   582     var _this = this;
   824     
   583     
   825     //Variables censées être des ints.
   584     //Variables censées être des ints.
   826     var supposedToBeInt = ['imagesByLine', 'imagesToShow', 'totalImages', 'timeReloadAfterResize', 'timePrezoom', 'timePreUnzoom', 'zoomTime', 'timeUnzoom', 'timeNeighbourGlowing', 'timeNeighbourUnglowing', 'timeMovingToNeighbour', 'timeSearchFade', 'timeNotifyFade', 'timeFilterFade', 'timeANFade', 'timeFilling', 'zoomedMargin', 'timeoutZoom', 'timeoutUnzoom', 'timeoutMoveToNeighbour', 'timeoutPointersIdle', 'timeoutAreBothPointersHere', 'timeoutRemoveNotificationByGesture', 'timeoutNotifySwipe', 'timeoutSelectTL', 'timeoutSlideTL', 'timeoutCanNotifyHelp', 'timeoutRemoveSpinner', 'timeoutNouser', 'timeoutNextDrawCurve', 'mouseUpDownDeltaTreshold', 'kinectUpDownDeltaTreshold', 'helpBorderSize'];
   585     var supposedToBeInt = ['imagesByLine', 'imagesToShow', 'totalImages', 'timeReloadAfterResize', 'timePrezoom', 'timePreUnzoom', 'zoomTime', 'timeUnzoom', 'timeNeighbourGlowing', 'timeNeighbourUnglowing', 'timeMovingToNeighbour', 'timeSearchFade', 'timeNotifyFade', 'timeFilterFade', 'timeANFade', 'timeFilling', 'zoomedMargin', 'timeoutZoom', 'timeoutUnzoom', 'timeoutMoveToNeighbour', 'timeoutPointersIdle', 'timeoutAreBothPointersHere', 'timeoutRemoveNotificationByGesture', 'timeoutNotifySwipe', 'timeoutSelectTL', 'timeoutSlideTL', 'timeoutCanNotifyHelp', 'timeoutRemoveSpinner', 'timeoutNouser', 'timeoutNextDrawCurve', 'touchUpDownDeltaTreshold', 'mouseUpDownDeltaTreshold', 'kinectUpDownDeltaTreshold', 'helpBorderSize'];
   827     //Variables censées êtres des floats.
   586     //Variables censées êtres des floats.
   828     var supposedToBeFloat = ['zoomPercentage', 'prezoomPercentage'];
   587     var supposedToBeFloat = ['zoomPercentage', 'prezoomPercentage'];
   829     
   588     
   830     //On lit le fichier de configuration.
   589     //On lit le fichier de configuration.
   831     $.getJSON(file_path, function(data)
   590     $.getJSON(file_path, function(data)
  1220 */
   979 */
  1221 Mosaic.prototype.onPlayerLoad = function()
   980 Mosaic.prototype.onPlayerLoad = function()
  1222 {
   981 {
  1223 	var _this = this;
   982 	var _this = this;
  1224 	
   983 	
       
   984 	//Si on est sur une tablette, on affiche les controls.
       
   985 	if(this.isTablet)
       
   986 	{
       
   987 		$('video').attr('controls', 'controls');
       
   988 	}
       
   989 	
  1225 	if(this.currentMode == 'NO-USER')
   990 	if(this.currentMode == 'NO-USER')
  1226 	{
   991 	{
  1227 		//On peut s'approcher de la kinect.
   992 		//On peut s'approcher de la kinect.
  1228 		this.canStart = true;
   993 		this.canStart = true;
  1229 	}
   994 	}
  1360                 }
  1125                 }
  1361             ]
  1126             ]
  1362         },
  1127         },
  1363         player:{
  1128         player:{
  1364             type: 'html5', // player type
  1129             type: 'html5', // player type
       
  1130             // type: 'jwplayer', // player type
  1365             video: videoToPlay,
  1131             video: videoToPlay,
  1366             live: true,
  1132             live: true,
  1367             height: newSnHeight,
  1133             height: newSnHeight,
  1368             width: newSnWidth,
  1134             width: newSnWidth,
  1369             autostart: true
  1135             autostart: true
  1374     $('.LdtPlayer').css(
  1140     $('.LdtPlayer').css(
  1375     {
  1141     {
  1376         position: 'absolute',
  1142         position: 'absolute',
  1377         'background-color': '#000000',
  1143         'background-color': '#000000',
  1378         top: newZoomTop,
  1144         top: newZoomTop,
  1379         left: newZoomLeft
  1145         left: newZoomLeft,
       
  1146 		'z-index': 500
  1380     });
  1147     });
  1381     
  1148     
  1382     //On démarre le player.
  1149     //On démarre le player.
  1383     this.player = null;
  1150     this.player = null;
  1384     
  1151