Documentation for tablets updated
authorbastiena
Mon, 27 Aug 2012 14:40:10 +0200
changeset 83 6070a596014e
parent 82 d1ddacf71b9e
child 84 246fa369cc9a
Documentation for tablets updated reload if no user reenabled
front_idill/doc/Documentation - Front IDILL.html
front_idill/src/mosaic/js/mosaic.js
--- a/front_idill/doc/Documentation - Front IDILL.html	Sat Aug 18 02:52:01 2012 +0200
+++ b/front_idill/doc/Documentation - Front IDILL.html	Mon Aug 27 14:40:10 2012 +0200
@@ -218,15 +218,81 @@
             </ol>
         </ol>
         
+        <u><h3><p>Mode d'interaction pour Tablettes :</p></h3></u>
+        
+        <p>Il n'y a plus de pointeurs ni de zone de recherche dans la mesure où seul le doigt de l'utilisateur permet d'effectuer les actions de contrôle de l'interface ou les courbes de recherche.</p>
+        
+        <ol type="1" start="1">
+            <h3><li>Actions de contrôle de l'interface.</li></h3>
+            
+            <ol type="A" start="1">
+                <h4><li>Affichage du panneau d'aide.</li></h4>
+                
+                <p>A tout moment, il est possible de faire apparaître le panneau d'aide en appuyant sur l'icone ayant la forme d'un i en haut à droite de la fenêtre. Pour faire disparaître le panneau, il suffit d'appuyer sur celui-ci.</p>
+            </ol>
+            
+            <ol type="A" start="2">
+                <h4><li>Sélection de la vidéo dans la mosaïque.</li></h4>
+                
+                <p>Lorsque vous vous trouvez dans la mosaïque, vous pouvez appuyer sur une image afin d'accéder à la vidéo.</p>
+            </ol>
+            
+            <ol type="A" start="3">
+                <h4><li>Revenir à la mosaïque.</li></h4>
+                
+                <p>Il faut appuyer sur l'icone représentant une maison situé en haut à gauche de l'écran.</p>
+            </ol>
+            
+            <ol type="A" start="4">
+                <h4><li>Aller d'une vidéo à une autre.</li></h4>
+                
+                <p>Dans une vidéo, vous pourrez voir 4 bordures, respectivement en haut, en bas, à droite et à gauche de la vidéo centrale. Il y en a 4, sauf si vous vous trouvez sur une extrémité de la mosaïque.
+                Pour passer à une vidéo voisine, il faut appuyer sur la bordure de la vidéo à atteindre.</p>
+            </ol>
+        </ol>
+        
+        <ol type="1" start="2">
+            <h3><li>Recherche par courbes.</li></h3>
+            
+            <p>La recherche dans le mode d'interaction pour Tablettes ressemble à celle du mode d'interaction souris. En restant appuyé avec le doigt, on le déplace et la courbe se trace. La courbe disparaît lorsqu'on relève le doigt.</p>
+            
+            <ol type="A" start="1">
+                <h4><li>Tracé de courbes.</li></h4>
+            </ol>
+            
+            <ol type="A" start="2">
+                <h4><li>Reconnaissance de courbes.</li></h4>
+                
+                <p>Durant le tracé, il peut arriver 4 choses :</p>
+                <ul>
+                    <li>Le tracé correspond à plusieurs courbes : Leurs macarons sont affichés en haut de la fenêtre.</li>
+                    <li>Le tracé correspond à une seule courbe : Le macaron de la courbe est affiché en haut de la fenêtre et on effectue une recherche sur les marqueurs correspondants à cette courbe.</li>
+                    <li>Le tracé correspond à plusieurs courbes, mais le tracé actuel permet de définir une courbe : Si on enlève les mains de la zone de recherche, on valide la courbe qu'on a tracé et on entre dans une recherche.</li>
+                    <li>Le tracé ne correspond à aucune courbe répertoriée. Un macaron de geste inconnu s'affiche.</li>
+                </ul>
+                <p>Une recherche par courbes dans la mosaïque résulte en un filtrage. Plus les vidéos sont opaques et plus le nombre de marqueurs trouvés dans celles-ci sont importants.<br />Une recherche dans une vidéo mettra en surbrillance les marqueurs correspondant au type de marqueur recherché.</p>
+                <p>Une nouvelle requête de recherche écrase la précédente.</p>
+                <p>Si une recherche est effectuée dans la mosaïque, la recherche s'étend à toutes les vidéos contenues.</p>
+                <p>A l'inverse, une recherche dans une vidéo n'affecte pas la mosaïque.</p>
+            </ol>
+            
+            <ol type="A" start="4">
+                <h4><li>Quitter la recherche.</li></h4>
+                
+                <p>Pour quitter une recherche en cours, il suffit d'appuyer sur le macaron de recherche, qui aura pour effet d'enlever la notification et la recherche.</p>
+            </ol>
+        </ol>
+        
         <hr />
         
         <ol type="I" start="4">
             <h3><a name="#IV"><li>Configuration</li></a></h3>
             
-            <p>Le Front IDILL possède deux configurations :</p>
+            <p>Le Front IDILL possède trois configurations :</p>
             <ul>
                 <li>Une configuration par défaut.<br />Elle est placée dans un fichier javascript et qu'il ne vaut mieux pas modifier sous peine d'engendrer des erreurs s'il y a une erreur de saisie.</li>
-                <li>Une configuration personnalisable.<br />Elle se situe dans le fichier config.json et est dans le dossier principal du Front IDILL. Il s'agit des paramètres étant chargés au démarrage du Front (ou au redémarrage s'il y a un raffraîchissement de la fenêtre du navigateur). Si un paramètre a une valeur incorrecte, celui-ci prend sa valeur par défaut.</li>
+                <li>Deux configurations personnalisables.<br />Elles se situent dans les fichiers config_kinect.json et config_souris.json et sont dans le dossier principal du Front IDILL. Il s'agit des paramètres étant chargés au démarrage du Front (ou au redémarrage s'il y a un raffraîchissement de la fenêtre du navigateur). Si un paramètre a une valeur incorrecte, celui-ci prend sa valeur par défaut.</li>
+                <li>Ces deux fichiers sont chargés respectivement dans le mode d'interaction Kinect et dans le mode d'interaction souris, afin de pouvoir personnaliser indépendamment les deux modes. Ils contiennent les mêmes paramètres.</li>
                 <p>Voici la liste des différents paramètres du Front IDILL :</p>
                 <table border="1">
                     <tr><th>Nom du paramètre</th><th>Type</th><th>Valeur par défaut</th><th>Description</th></tr>
@@ -276,9 +342,10 @@
                     <tr><td>port</td><td>int</td><td>8090</td><td>Port sur lequel on peut se connecter au serveur du Middleware (Kinect).</td></tr>
                     <tr><td>mouseUpDownDeltaTreshold</td><td>int (px)</td><td>15</td><td>Distance à partir de laquelle le déplacement du pointeur de la souris lorsqu'on a appuyé sur le bouton gauche est considéré non plus comme le début d'un click mais le début d'un tracé de courbe de recherche.</td></tr>
                     <tr><td>kinectUpDownDeltaTreshold</td><td>int (px)</td><td>20</td><td>Distance à partir de laquelle le tracé d'un début de courbe est considéré comme un segment dans le mode d'interaction Kinect.</td></tr>
-                    <tr><td>curveDictionary</td><td>string (path)</td><td>"./dico.json"</td><td>Chemin du dictionnaire de courbes de recherche.</td></tr>
+                    <tr><td>curveDictionaryKI</td><td>string (path)</td><td>"./dicoKI.json"</td><td>Chemin du dictionnaire de courbes de recherche. (Kinect)</td></tr>
+                    <tr><td>curveDictionaryMI</td><td>string (path)</td><td>"./dicoMI.json"</td><td>Chemin du dictionnaire de courbes de recherche. (souris & tablettes)</td></tr>
                     <tr><td>lang</td><td>string (abréviation)</td><td>""</td><td>Langue utilisée dans le Front (en, fr...). Si elle est vide alors la langue du navigateur est prise.</td></tr>
-                    <tr><td>helpBorderSize</td><td>int (px)</td><td>5</td><td>Taille de la bordure affichant l'aide dans le mode d'interaction souris.</td></tr>
+                    <tr><td>langs</td><td>tableau de string</td><td>["fr", "en"]</td><td>Identifiant des langues actuellement disponibles pour l'interface.</td></tr>
                 </table>
             </ul>
         </ol>
--- a/front_idill/src/mosaic/js/mosaic.js	Sat Aug 18 02:52:01 2012 +0200
+++ b/front_idill/src/mosaic/js/mosaic.js	Mon Aug 27 14:40:10 2012 +0200
@@ -46,48 +46,48 @@
     
     //Dictionnaire pour les courbes de recherche.
     this.dictionary = [];
-	
-	//Strings des notifications.
-	this.notificationStrings = {
-	"select":"Select", 
-	"confirm":"Confirm", 
-	"timeline":"Timeline move", 
-	"move":"Move", 
-	"search":"Search", 
-	"next":"Next", 
-	"previous":"Previous", 
-	"unzoom":"Unzoom", 
-	"unknown":"Unknown gesture", 
-	"fall":"Fall", 
-	"jump":"Jump", 
-	"spin":"Spin", 
-	"screw":"Screw", 
-	"bend":"Bend", 
-	"arc":"Arc", 
-	"knee_up":"Knee up", 
-	"breakdance":"Breakdance", 
-	"wave":"Wave", 
-	"no_motion":"No motion", 
-	"contact":"Contact"};
-	
-	this.helpText = {
-	"search_title":"Search", 
-	"search_2hands_text":"Curves to be drawn with both hands",  
-	"search_mouse_text":"Curves to be mouse-drawn",  
-	"search_body_text":"Gestures to be performed with your body", 
-	"controls_title":"Controls", 
-	"controls_1hand_text":"Gestures to be performed with your hand", 
-	"controls_timeline":"Move in timeline", 
-	"controls_mos_horizontal":"Unzoom", 
-	"controls_mos_vertical":"Unzoom", 
-	"controls_move_down":"Move", 
-	"controls_move_left":"Move", 
-	"controls_move_right":"Move", 
-	"controls_move_up":"Move", 
-	"controls_next":"Next", 
-	"controls_previous":"Previous", 
-	"controls_selection":"Selection"
-	}
+    
+    //Strings des notifications.
+    this.notificationStrings = {
+    "select":"Select", 
+    "confirm":"Confirm", 
+    "timeline":"Timeline move", 
+    "move":"Move", 
+    "search":"Search", 
+    "next":"Next", 
+    "previous":"Previous", 
+    "unzoom":"Unzoom", 
+    "unknown":"Unknown gesture", 
+    "fall":"Fall", 
+    "jump":"Jump", 
+    "spin":"Spin", 
+    "screw":"Screw", 
+    "bend":"Bend", 
+    "arc":"Arc", 
+    "knee_up":"Knee up", 
+    "breakdance":"Breakdance", 
+    "wave":"Wave", 
+    "no_motion":"No motion", 
+    "contact":"Contact"};
+    
+    this.helpText = {
+    "search_title":"Search", 
+    "search_2hands_text":"Curves to be drawn with both hands",  
+    "search_mouse_text":"Curves to be mouse-drawn",  
+    "search_body_text":"Gestures to be performed with your body", 
+    "controls_title":"Controls", 
+    "controls_1hand_text":"Gestures to be performed with your hand", 
+    "controls_timeline":"Move in timeline", 
+    "controls_mos_horizontal":"Unzoom", 
+    "controls_mos_vertical":"Unzoom", 
+    "controls_move_down":"Move", 
+    "controls_move_left":"Move", 
+    "controls_move_right":"Move", 
+    "controls_move_up":"Move", 
+    "controls_next":"Next", 
+    "controls_previous":"Previous", 
+    "controls_selection":"Selection"
+    }
     
     //Dernières positions des pointeurs.
     this.mainPointerLastX = null;
@@ -110,9 +110,9 @@
     this.mouseUpDownDelta = 0;
     //Valeur du déplacement entre un touch start et un touch end.
     this.touchUpDownDelta = 0;
-	//Coordonnées de la souris au dernier mouse down.
-	this.mouseDownPosX = null;
-	this.mouseDownPosY = null;
+    //Coordonnées de la souris au dernier mouse down.
+    this.mouseDownPosX = null;
+    this.mouseDownPosY = null;
     
     //Dimensions de la mosaïque en pixels.
     this.width = null;
@@ -189,25 +189,25 @@
     this.actualCode = '';
     //Indique si l'utilisateur est entré dans la zone de recherche.
     this.isUserInSearchZone = false;
-	//Indique si on a fait un mouse down.
-	this.isMouseDown = false;
-	//Indique si on a fait un touch start.
-	this.isTouchStart = false;
-	//Indique si on a fait un touch move.
-	this.isTouchMove = false;
-	//Indique si on est en train de prézoomer.
-	this.isPrezooming = false;
-	//Indique si l'icone d'aide a été agrandie.
-	this.isHelpIconZoomed = false;
-	//Indique si l'icone d'aide est dans une interaction de zoom/dezoom en cours.
-	this.isHelpIconZooming = false;
-	//Indique à l'utilisateur s'il doit retirer ses mains pour refaire une recherche par courbes.
-	this.mustTakeOutHands = false;
-	//Indique qu'une vidéo est en lecture.
-	this.isVideoReading = false;
-	
-	//Indique si on est sur une tablette.
-	this.isTablet = ('ontouchstart' in document.documentElement);
+    //Indique si on a fait un mouse down.
+    this.isMouseDown = false;
+    //Indique si on a fait un touch start.
+    this.isTouchStart = false;
+    //Indique si on a fait un touch move.
+    this.isTouchMove = false;
+    //Indique si on est en train de prézoomer.
+    this.isPrezooming = false;
+    //Indique si l'icone d'aide a été agrandie.
+    this.isHelpIconZoomed = false;
+    //Indique si l'icone d'aide est dans une interaction de zoom/dezoom en cours.
+    this.isHelpIconZooming = false;
+    //Indique à l'utilisateur s'il doit retirer ses mains pour refaire une recherche par courbes.
+    this.mustTakeOutHands = false;
+    //Indique qu'une vidéo est en lecture.
+    this.isVideoReading = false;
+    
+    //Indique si on est sur une tablette.
+    this.isTablet = ('ontouchstart' in document.documentElement);
     
     //Timeout (attente) pour le zoom après un préZoom.
     this.zoomTimeout = null;
@@ -307,17 +307,20 @@
  */
 Mosaic.prototype.createMosaic = function()
 {
-	var _this = this;
-	
+    var _this = this;
+    
     //On ajoute le player au body pour le lancer la première fois qu'on zoom.
-	$('body').append('<div class="player" id="video"></div><div class="LdtPlayer" id="LdtPlayer"></div>');
-	
-	//On recharge la fenêtre si sa taille a changé.
-	$(window).resize(function()
-	{
-		// _.debounce(window.location.reload(), _this.config.timeReloadAfterResize);
-	});
-	
+    $('body').append('<div class="player" id="video"></div><div class="LdtPlayer" id="LdtPlayer"></div>');
+    
+    //On recharge la fenêtre si sa taille a changé si on n'est pas sur une tablette (car le resize est désactivé dans le mode d'interaction pour tablettes).
+    if(!this.isTablet)
+    {
+        $(window).resize(function()
+        {
+            _.debounce(window.location.reload(), _this.config.timeReloadAfterResize);
+        });
+    }
+    
     var initPanel = '<div id="initPanel"></div>';
     var mp = $('#mainPanel');
     mp.append(initPanel);
@@ -380,8 +383,8 @@
     this.previousZoomedSN;
     //On met à jour la mosaïque.
     $('#mainPanel').html(createMosaic);
-	//On ajoute le panneau de protection (principalement pour le mode tablettes).
-	$('body').append('<div id="ghostPanel"></div>');
+    //On ajoute le panneau de protection (principalement pour le mode tablettes).
+    $('body').append('<div id="ghostPanel"></div>');
     //On récupère la taille des bordures.
     this.marginWidth = $('.snapshotDivs').css('margin-bottom');
     this.marginWidth = parseFloat(this.marginWidth)*2;
@@ -437,8 +440,8 @@
                 //Si on gère les interactions à la souris.
                 if(_this.config.mouseInteractions)
                 {
-					//On bind les événements utiles.
-					_this.eventBinder();
+                    //On bind les événements utiles.
+                    _this.eventBinder();
                 }
                 
                 //Si on a activé la préphase mais qu'on est en mode Kinect.
@@ -468,110 +471,110 @@
 */
 Mosaic.prototype.eventBinder = function()
 {
-	var _this = this;
-	
-	//On affiche l'icone d'aide.
-	this.helpIcon();
-	
-	//Si on est sur tablette, on utilise l'événement touch start.
-	if(this.isTablet)
-	{
-		document.addEventListener('touchstart', function(e)
-		{
-			if(e.touches.length == 1)
-			{
-				var touch = e.touches[0];
-				_this.onTouchStart(touch);
-			}
-			e.preventDefault();
-		}, false);
-	}
-	//Sinon souris.
-	else
-	{
-		//Si on fait un mouse down sur le body, on vérifie enregistre le déplacement de la souris jusqu'au prochain mouse up.
-		$(window).mousedown(function (e)
-		{
-			_this.onMouseDown(e);
-			return false;
-		});
-	}
-	
-	//Si on est sur tablette, on utilise l'événement touch start.
-	if(this.isTablet)
-	{
-		document.addEventListener('touchmove', function(e)
-		{
-			if(e.touches.length == 1)
-			{
-				var touch = e.touches[0];
-				_this.refreshPointers(touch.pageX, touch.pageY, true);
-				_this.mousePosX = touch.pageX;
-				_this.mousePosY = touch.pageY;
-				_this.onTouchMove(touch);
-			}
-			e.preventDefault();
-		}, false);
-	}
-	//Sinon souris.
-	else
-	{
-		//On écoute le déplacement de la souris.
-		$(window).mousemove(function(e)
-		{
-			_this.refreshPointers(e.pageX, e.pageY, true);
-			_this.mousePosX = e.pageX;
-			_this.mousePosY = e.pageY;
-			_this.onMouseMove(e);
-			return false;
-		});
-	}
-	
-	//Si on est sur tablette, on utilise l'événement touch start.
-	if(this.isTablet)
-	{
-		document.addEventListener('touchend', function(e)
-		{
-			_this.onTouchEnd(e);
-			e.preventDefault();
-		}, false);
-	}
-	//Sinon souris.
-	else
-	{
-		//Si on fait un mouse up après ce mouse down.
-		$(window).mouseup(function()
-		{
-			_this.onMouseUp();
-			return false;
-		});
-	}
-	
-	if(!this.isTablet)
-	{
-		//Si on fait un clic.
-		$(window).click(function(e)
-		{
-			_this.onClick(e.pageX, e.pageY);
-			_this.removeSearchNotificationIfOnIt(e.pageX, e.pageY);
-			return false;
-		});
-		
-		$(window).on('mousewheel', function(event, delta, deltaX, deltaY)
-		{
-			//Si on est dans un mode autre qu'on mode zoomé ou que l'aide est affichée, on part.
-			if(_this.currentMode != "VIDEO" && _this.currentMode != "SEARCH" && _this.currentMode != "TIMELINE" || _this.helpDisplayed)
-			{
-				return;
-			}
-			
-			//Quand on "tire" la molette vers soi, on dezoom.
-			if (delta < 0)
-			{
-				_this.unzoom();
-			}
-		});
-	}
+    var _this = this;
+    
+    //On affiche l'icone d'aide.
+    this.helpIcon();
+    
+    //Si on est sur tablette, on utilise l'événement touch start.
+    if(this.isTablet)
+    {
+        document.addEventListener('touchstart', function(e)
+        {
+            if(e.touches.length == 1)
+            {
+                var touch = e.touches[0];
+                _this.onTouchStart(touch);
+            }
+            e.preventDefault();
+        }, false);
+    }
+    //Sinon souris.
+    else
+    {
+        //Si on fait un mouse down sur le body, on vérifie enregistre le déplacement de la souris jusqu'au prochain mouse up.
+        $(window).mousedown(function (e)
+        {
+            _this.onMouseDown(e);
+            return false;
+        });
+    }
+    
+    //Si on est sur tablette, on utilise l'événement touch start.
+    if(this.isTablet)
+    {
+        document.addEventListener('touchmove', function(e)
+        {
+            if(e.touches.length == 1)
+            {
+                var touch = e.touches[0];
+                _this.refreshPointers(touch.pageX, touch.pageY, true);
+                _this.mousePosX = touch.pageX;
+                _this.mousePosY = touch.pageY;
+                _this.onTouchMove(touch);
+            }
+            e.preventDefault();
+        }, false);
+    }
+    //Sinon souris.
+    else
+    {
+        //On écoute le déplacement de la souris.
+        $(window).mousemove(function(e)
+        {
+            _this.refreshPointers(e.pageX, e.pageY, true);
+            _this.mousePosX = e.pageX;
+            _this.mousePosY = e.pageY;
+            _this.onMouseMove(e);
+            return false;
+        });
+    }
+    
+    //Si on est sur tablette, on utilise l'événement touch start.
+    if(this.isTablet)
+    {
+        document.addEventListener('touchend', function(e)
+        {
+            _this.onTouchEnd(e);
+            e.preventDefault();
+        }, false);
+    }
+    //Sinon souris.
+    else
+    {
+        //Si on fait un mouse up après ce mouse down.
+        $(window).mouseup(function()
+        {
+            _this.onMouseUp();
+            return false;
+        });
+    }
+    
+    if(!this.isTablet)
+    {
+        //Si on fait un clic.
+        $(window).click(function(e)
+        {
+            _this.onClick(e.pageX, e.pageY);
+            _this.removeSearchNotificationIfOnIt(e.pageX, e.pageY);
+            return false;
+        });
+        
+        $(window).on('mousewheel', function(event, delta, deltaX, deltaY)
+        {
+            //Si on est dans un mode autre qu'on mode zoomé ou que l'aide est affichée, on part.
+            if(_this.currentMode != "VIDEO" && _this.currentMode != "SEARCH" && _this.currentMode != "TIMELINE" || _this.helpDisplayed)
+            {
+                return;
+            }
+            
+            //Quand on "tire" la molette vers soi, on dezoom.
+            if (delta < 0)
+            {
+                _this.unzoom();
+            }
+        });
+    }
 }
 
 /*
@@ -630,16 +633,16 @@
             }
             else
             {
-				//S'il s'agit de la langue, on met par défaut si la valeur est nulle.
-				if(key == 'lang' && val == '')
-				{
-					_this.config[key] = _this.default_config[key];
-				}
+                //S'il s'agit de la langue, on met par défaut si la valeur est nulle.
+                if(key == 'lang' && val == '')
+                {
+                    _this.config[key] = _this.default_config[key];
+                }
                 //Sinon si c'est une string, on l'affecte.
-				else
-				{
-					_this.config[key] = val;
-				}
+                else
+                {
+                    _this.config[key] = val;
+                }
             }
         }
         
@@ -847,13 +850,13 @@
         //Après un délai d'absence de l'utilisateur on redémarre.
         this.nouserTimeout = setTimeout(function()
         {
-            // window.location.reload();
+            window.location.reload();
         }, this.config.timeoutNouser);
     }
     //S'il n'y a qu'un snapshot à afficher et qu'on est en préphase, on redémarre.
     else if((event == "NO-USER" || event == "INCOMING-0" || event == "INCOMING-1") && this.config.noUserModeEnabled)
     {
-        // window.location.reload();
+        window.location.reload();
     }
     //Si on a fait un swipe.
     else if(event.indexOf("SWIPE") != -1)
@@ -871,33 +874,33 @@
                 this.playNextVideo();
             }
             
-			//On spécifie s'il s'agit d'un swipe left ou right.
-			var swipeType = ((event.indexOf("LEFT") != -1) ? 'left' : 'right');
-			var isSwipeLeft = ((event.indexOf("LEFT") != -1) ? true : false);
-			
-			//On passe au marqueur suivant/précédent en fonction du type de swipe.
-			this.player.widgets[0].switchToMarker(isSwipeLeft, this.currentSearchGesture[this.centerId]);
-			//Si on est en mode vidéo.
-			if(this.currentMode == 'VIDEO')
-			{
-				//On affiche la notification.
-				this.removeNotifications();
-				this.videoSwipe(swipeType);
-			}
-			//Si on est en mode recherche dans une vidéo et qu'on n'a pas de gesture de recherche.
-			else if(this.currentMode == 'SEARCH' && this.currentSearchGesture[this.centerId] == '')
-			{
-				//On affiche la notification.
-				this.removeNotifications();
-				this.searchSearchAndSwipe(swipeType);
-			}
-			//Si on est en mode recherche dans une vidéo et qu'on a une gesture de recherche.
-			else if(this.currentMode == 'SEARCH' && this.currentSearchGesture[this.centerId] != '')
-			{
-				//On affiche la notification.
-				this.removeNotifications();
-				this.searchGestureAndSwipe(this.currentSearchGesture[this.centerId], 'valid', swipeType);
-			}
+            //On spécifie s'il s'agit d'un swipe left ou right.
+            var swipeType = ((event.indexOf("LEFT") != -1) ? 'left' : 'right');
+            var isSwipeLeft = ((event.indexOf("LEFT") != -1) ? true : false);
+            
+            //On passe au marqueur suivant/précédent en fonction du type de swipe.
+            this.player.widgets[0].switchToMarker(isSwipeLeft, this.currentSearchGesture[this.centerId]);
+            //Si on est en mode vidéo.
+            if(this.currentMode == 'VIDEO')
+            {
+                //On affiche la notification.
+                this.removeNotifications();
+                this.videoSwipe(swipeType);
+            }
+            //Si on est en mode recherche dans une vidéo et qu'on n'a pas de gesture de recherche.
+            else if(this.currentMode == 'SEARCH' && this.currentSearchGesture[this.centerId] == '')
+            {
+                //On affiche la notification.
+                this.removeNotifications();
+                this.searchSearchAndSwipe(swipeType);
+            }
+            //Si on est en mode recherche dans une vidéo et qu'on a une gesture de recherche.
+            else if(this.currentMode == 'SEARCH' && this.currentSearchGesture[this.centerId] != '')
+            {
+                //On affiche la notification.
+                this.removeNotifications();
+                this.searchGestureAndSwipe(this.currentSearchGesture[this.centerId], 'valid', swipeType);
+            }
             
             //On le fait disparaitre au bout d'un certain temps.
             this.notifySwipeTimeout = setTimeout(function()
@@ -981,53 +984,53 @@
 */
 Mosaic.prototype.onPlayerLoad = function()
 {
-	var _this = this;
-	
-	if(this.currentMode == 'NO-USER')
-	{
-		//On peut s'approcher de la kinect.
-		this.canStart = true;
-	}
-	
-	//Lorsque le player est en pause (par exemple lorsque le curseur arrive à la fin de la timeline).
-	if(this.player.popcorn)
-	{
-		// this.player.popcorn.listen('pause', function()
-		this.player.popcorn.listen('ended', function()
-		{
-			//Si la pause est naturelle (fin de la timeline, dézoom, déplacement vers un voisin).
-			if(!_this.userPaused)
-			{
-				//Si c'est en mode sans utilisateur.
-				if(_this.currentMode == 'NO-USER')
-				{
-					//On dézoome.
-					_this.unzoom();
-				}
-				//Sinon, si ce n'est pas causé par un déplacement ou un dézoom.
-				else if(!_this.currentlyMoving && !_this.currentlyUnzooming)
-				{
-					//Si on est en mode timeline et qu'on est en pause, c'est probablement que l'user a placé le curseur à la fin.
-					if(_this.currentMode != 'TIMELINE')
-					{
-						_this.playNextVideo();
-					}
-				}
-			}
-		});
-		
-		//Si les marqueurs ont été chargés.
-		this.player.popcorn.on("markersready", function()
-		{
-			_this.onMarkersReady();
-		});
-		
-		//On indique à la mosaïque qu'on est en train de lire.
-		this.player.popcorn.on("timeupdate", function()
-		{
-			_this.isVideoReading = true;
-		})
-	}
+    var _this = this;
+    
+    if(this.currentMode == 'NO-USER')
+    {
+        //On peut s'approcher de la kinect.
+        this.canStart = true;
+    }
+    
+    //Lorsque le player est en pause (par exemple lorsque le curseur arrive à la fin de la timeline).
+    if(this.player.popcorn)
+    {
+        // this.player.popcorn.listen('pause', function()
+        this.player.popcorn.listen('ended', function()
+        {
+            //Si la pause est naturelle (fin de la timeline, dézoom, déplacement vers un voisin).
+            if(!_this.userPaused)
+            {
+                //Si c'est en mode sans utilisateur.
+                if(_this.currentMode == 'NO-USER')
+                {
+                    //On dézoome.
+                    _this.unzoom();
+                }
+                //Sinon, si ce n'est pas causé par un déplacement ou un dézoom.
+                else if(!_this.currentlyMoving && !_this.currentlyUnzooming)
+                {
+                    //Si on est en mode timeline et qu'on est en pause, c'est probablement que l'user a placé le curseur à la fin.
+                    if(_this.currentMode != 'TIMELINE')
+                    {
+                        _this.playNextVideo();
+                    }
+                }
+            }
+        });
+        
+        //Si les marqueurs ont été chargés.
+        this.player.popcorn.on("markersready", function()
+        {
+            _this.onMarkersReady();
+        });
+        
+        //On indique à la mosaïque qu'on est en train de lire.
+        this.player.popcorn.on("timeupdate", function()
+        {
+            _this.isVideoReading = true;
+        })
+    }
 }
 
 /*
@@ -1037,56 +1040,56 @@
 */
 Mosaic.prototype.onMarkersReady = function()
 {
-	var _this = this;
-	
-	//Le player est prêt.
-	this.playerIsReady = true;
-	
-	if(this.player.widgets[0])
-	{
-		//On spécifie à la timeline dans quel mode d'intéraction on est.
-		this.player.widgets[0].setMouseInteractions(this.config.mouseInteractions);
-		//Idem pour la langue.
-		if(this.gesturesText.length > 0)
-		{
-			this.player.widgets[0].setLang(this.gesturesText);
-		}
-	}
-	
-	//Si on est en mode video ou recherche ou timeline.
-	if(this.currentMode == 'VIDEO' || this.currentMode == 'SEARCH' || this.currentMode == 'TIMELINE')
-	{
-		//On peut faire des swipes.
-		this.canSwipe = true;
-	}
-	
-	//Si aucune recherche par gesture n'est effectuée.
-	if(this.currentSearchGesture[this.centerId] == '')
-	{
-		//On enlève le filtre.
-		this.removeFilter();
-	}
-	//Sinon.
-	else
-	{
-		//On entre en mode recherche dans une vidéo.
-		this.currentMode = 'SEARCH';
-		//On recherche la gesture.
-		this.player.widgets[0].searchByGesture(this.currentSearchGesture[this.centerId]);
-		this.isCurrentlyInASearchByGesture = this.player.widgets[0].isCurrentlyInASearchByGesture;
-		
-		//On va au premier marqueur trouvé.
-		if(this.timeToGoAt[this.centerId] === 0 && this.player.widgets[0].atLeastOneSearchMarker(this.currentSearchGesture[this.centerId]))
-		{
-			this.player.widgets[0].goToFirstSearchedMarker(this.currentSearchGesture[this.centerId]);
-		}
-		//Si aucun marqueur n'est trouvé.
-		else
-		{
-			//On va juste là où on était la dernière fois qu'on a joué la vidéo.
-			this.player.popcorn.currentTime(this.timeToGoAt[this.centerId]);
-		}
-	}
+    var _this = this;
+    
+    //Le player est prêt.
+    this.playerIsReady = true;
+    
+    if(this.player.widgets[0])
+    {
+        //On spécifie à la timeline dans quel mode d'intéraction on est.
+        this.player.widgets[0].setMouseInteractions(this.config.mouseInteractions);
+        //Idem pour la langue.
+        if(this.gesturesText.length > 0)
+        {
+            this.player.widgets[0].setLang(this.gesturesText);
+        }
+    }
+    
+    //Si on est en mode video ou recherche ou timeline.
+    if(this.currentMode == 'VIDEO' || this.currentMode == 'SEARCH' || this.currentMode == 'TIMELINE')
+    {
+        //On peut faire des swipes.
+        this.canSwipe = true;
+    }
+    
+    //Si aucune recherche par gesture n'est effectuée.
+    if(this.currentSearchGesture[this.centerId] == '')
+    {
+        //On enlève le filtre.
+        this.removeFilter();
+    }
+    //Sinon.
+    else
+    {
+        //On entre en mode recherche dans une vidéo.
+        this.currentMode = 'SEARCH';
+        //On recherche la gesture.
+        this.player.widgets[0].searchByGesture(this.currentSearchGesture[this.centerId]);
+        this.isCurrentlyInASearchByGesture = this.player.widgets[0].isCurrentlyInASearchByGesture;
+        
+        //On va au premier marqueur trouvé.
+        if(this.timeToGoAt[this.centerId] === 0 && this.player.widgets[0].atLeastOneSearchMarker(this.currentSearchGesture[this.centerId]))
+        {
+            this.player.widgets[0].goToFirstSearchedMarker(this.currentSearchGesture[this.centerId]);
+        }
+        //Si aucun marqueur n'est trouvé.
+        else
+        {
+            //On va juste là où on était la dernière fois qu'on a joué la vidéo.
+            this.player.popcorn.currentTime(this.timeToGoAt[this.centerId]);
+        }
+    }
 }
 
 /*
@@ -1111,30 +1114,30 @@
         format: 'ldt'
     };
     
-	var loadedWidgets;
-	
-	if(this.isTablet)
-	{
-		loadedWidgets =
-		[
-			{
-				type: "Timeline"
-			},
-			{
-				type: "TabletPlayButton"
-			}
-		];
-	}
-	else
-	{
-		loadedWidgets =
-		[
-			{
-				type: "Timeline"
-			}
-		];
-	}
-	
+    var loadedWidgets;
+    
+    if(this.isTablet)
+    {
+        loadedWidgets =
+        [
+            {
+                type: "Timeline"
+            },
+            {
+                type: "TabletPlayButton"
+            }
+        ];
+    }
+    else
+    {
+        loadedWidgets =
+        [
+            {
+                type: "Timeline"
+            }
+        ];
+    }
+    
     var _config = {
         gui: {
             zoomTop: zoomTop - this.marginWidth*2,
@@ -1157,7 +1160,7 @@
             width: newSnWidth,
             autostart: true
         },
-		isTablet: this.isTablet
+        isTablet: this.isTablet
     };
     
     //On positionne le player.
@@ -1167,7 +1170,7 @@
         'background-color': '#000000',
         top: newZoomTop,
         left: newZoomLeft,
-		'z-index': 500
+        'z-index': 500
     });
     
     //On démarre le player.