Mercurial Mercurial > trakers / comparison
summary | shortlog | changelog | graph | tags | bookmarks | branches | files | changeset | file | latest | revisions | annotate | diff | comparison | raw | help
Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
front_idill/src/mosaic/js/mosaic.js
changeset 45 0e29ae4568a0
parent 44 8393d3473b98
child 46 9d7a2aa112fb
equal deleted inserted replaced
44:8393d3473b98 45:0e29ae4568a0 
    23  * Contient également les dimensions en px de la mosaïque.
 
    23  * Contient également les dimensions en px de la mosaïque.
 
    24  */
 
    24  */
 
    25 function mosaic(config, default_conf)
 
    25 function mosaic(config, default_conf)
 
    26 {
 
    26 {
 
    27 	//Interactions souris/kinect.
 
    27 	//Interactions souris/kinect.
 
    28 	this.mouseInteractions = false;
 
    28 	this.mouseInteractions = true;
 
    29 	//Interactions avec/sans préphase.
 
    29 	//Interactions avec/sans préphase.
 
    30 	this.prephaseEnabled = true;
 
    30 	this.prephaseEnabled = true;
 
    31 	
    31 	
    32 	this.gestures = ["fall", "jump", "circle", "screw", "bend", "arc", "pendulum", "knee-up", "right-angle", "wave", "slow", "hello", "no-motion", "wheel", "contact", "run"];
 
    32 	this.gestures = ["fall", "jump", "circle", "screw", "bend", "arc", "pendulum", "knee-up", "right-angle", "wave", "slow", "hello", "no-motion", "wheel", "contact", "run", "up-down", "grand-jete"];
 
    33 
    33 
    34 	//Chemin du fichier de configuration.
 
    34 	//Chemin du fichier de configuration.
 
    35 	this.config_path = config;
 
    35 	this.config_path = config;
 
    36 	//Configuration par défaut en cas de valeur erronnée.
 
    36 	//Configuration par défaut en cas de valeur erronnée.
 
    37 	this.default_config = default_conf;
 
    37 	this.default_config = default_conf;
 
    45 	this.timeToGoAt = [];
 
    45 	this.timeToGoAt = [];
 
    46 	this.ids = [];
 
    46 	this.ids = [];
 
    47 	this.fillingIds = [];
 
    47 	this.fillingIds = [];
 
    48 	this.currentRandomVideoIdx = 0;
 
    48 	this.currentRandomVideoIdx = 0;
 
    49 	
    49 	
       
    50 	//Dictionnaire pour les courbes de recherche.
 
       
    51 	this.dictionary = [];
 
       
    52 	
    50 	//Dernières positions des pointeurs.
 
    53 	//Dernières positions des pointeurs.
 
    51 	this.mainPointerLastX;
 
    54 	this.mainPointerLastX;
 
    52 	this.mainPointerLastY;
 
    55 	this.mainPointerLastY;
 
    53 	this.secondPointerLastX;
 
    56 	this.secondPointerLastX;
 
    54 	this.secondPointerLastY;
 
    57 	this.secondPointerLastY;
 
    56 	this.mainPointerIdleStartX;
 
    59 	this.mainPointerIdleStartX;
 
    57 	this.mainPointerIdleStartY;
 
    60 	this.mainPointerIdleStartY;
 
    58 	this.secondPointerIdleStartX;
 
    61 	this.secondPointerIdleStartX;
 
    59 	this.secondPointerIdleStartY;
 
    62 	this.secondPointerIdleStartY;
 
    60 	
    63 	
       
    64 	//Coordonnées de la souris dans le mode d'interaction souris.
 
       
    65 	this.mousePosX;
 
       
    66 	this.mousePosY;
 
       
    67 	//Coordonnées précédentes de la souris dans le mode d'interaction souris.
 
       
    68 	this.mousePosLastX;
 
       
    69 	this.mousePosLastY;
 
       
    70 	//Valeur du déplacement entre un mouse up et un mouse down.
 
       
    71 	this.mouseUpDownDelta = 0;
 
       
    72 	
    61 	//Dimensions de la mosaïque en pixels.
 
    73 	//Dimensions de la mosaïque en pixels.
 
    62 	this.width;
 
    74 	this.width;
 
    63 	this.height;
 
    75 	this.height;
 
    64 	//Dimensions d'un snapshot en pixels.
 
    76 	//Dimensions d'un snapshot en pixels.
 
    65 	this.snapshotWidth;
 
    77 	this.snapshotWidth;
 
    66 	this.snapshotHeight;
 
    78 	this.snapshotHeight;
 
    67 	//Espacement entre les snapshots en pixels.
 
    79 	//Espacement entre les snapshots en pixels.
 
    68 	this.marginWidth;
 
    80 	this.marginWidth;
 
    69 	
    81 	
    70 	//Booléens permettant ou non certaines intéractions selon le contexte.
 
    82 	//Booléens permettant ou non certaines intéractions selon le contexte.
 
    71 	this.zoomed;
 
    83 	this.zoomed = false;
 
    72 	this.fullscreen;
 
    84 	this.fullscreen = false;
 
    73 	this.canMoveToNeighbour;
 
    85 	this.canMoveToNeighbour = false;
 
    74 	this.mainPointerExitBorder;
 
    86 	this.mainPointerExitBorder = false;
 
    75 	this.secondPointerExitBorder;
 
    87 	this.secondPointerExitBorder = false;
 
    76 	this.isMainPointerDisplayed;
 
    88 	this.isMainPointerDisplayed = false;
 
    77 	this.isSecondPointerDisplayed;
 
    89 	this.isSecondPointerDisplayed = false;
 
    78 	this.helpDisplayed;
 
    90 	this.helpDisplayed = false;
 
    79 	//Indique si l'utilisateur a manuellement pausé la vidéo.
 
    91 	//Indique si l'utilisateur a manuellement pausé la vidéo.
 
    80 	this.userPaused;
 
    92 	this.userPaused = false;
 
    81 	//Indique si on est en train de se déplacer vers un voisin.
 
    93 	//Indique si on est en train de se déplacer vers un voisin.
 
    82 	this.currentlyMoving;
 
    94 	this.currentlyMoving = false;
 
    83 	//Indique si on est en train de dézoomer vers la mosaïque.
 
    95 	//Indique si on est en train de dézoomer vers la mosaïque.
 
    84 	this.currentlyUnzooming;
 
    96 	this.currentlyUnzooming = false;
 
    85 	//Indique si on peut s'approcher de kinect.
 
    97 	//Indique si on peut s'approcher de kinect.
 
    86 	this.canStart;
 
    98 	this.canStart = false;
 
    87 	//Indique si on est actuellement sur un snapshot.
 
    99 	//Indique si on est actuellement sur un snapshot.
 
    88 	this.isOnASnapshot;
 
   100 	this.isOnASnapshot = false;
 
    89 	//Indique si l'idle des pointeurs est disponible (deux mains détectées).
 
   101 	//Indique si l'idle des pointeurs est disponible (deux mains détectées).
 
    90 	this.pointersIdleAvailable;
 
   102 	this.pointersIdleAvailable = false;
 
    91 	//Indique si le timeout pour l'idle des pointeurs à besoin d'être lancé.
 
   103 	//Indique si le timeout pour l'idle des pointeurs à besoin d'être lancé.
 
    92 	this.pointersIdleNeedLaunch;
 
   104 	this.pointersIdleNeedLaunch = false;
 
    93 	//Indique si les deux mains sont là.
 
   105 	//Indique si les deux mains sont là.
 
    94 	this.areBothPointersHere;
 
   106 	this.areBothPointersHere = false;
 
    95 	//Indique si le timeout pour la détection de deux pointeurs a été lancé.
 
   107 	//Indique si le timeout pour la détection de deux pointeurs a été lancé.
 
    96 	this.areBothPointersTimeoutLaunched;
 
   108 	this.areBothPointersTimeoutLaunched = false;
 
    97 	//Indique si la mosaïque a été filtrée.
 
   109 	//Indique si la mosaïque a été filtrée.
 
    98 	this.isMosaicFiltered;
 
   110 	this.isMosaicFiltered = false;
 
    99 	//Indique si on est actuellement dans une recherche par gesture.
 
   111 	//Indique si on est actuellement dans une recherche par gesture.
 
   100 	this.isCurrentlyInASearchByGesture;
 
   112 	this.isCurrentlyInASearchByGesture = false;
 
   101 	//Indique si un pointeur est déjà sur une notification de recherche par gesture.
 
   113 	//Indique si un pointeur est déjà sur une notification de recherche par gesture.
 
   102 	this.alreadyOnNotification;
 
   114 	this.alreadyOnNotification = false;
 
   103 	//Si on a fait un swipe.
 
   115 	//Si on a fait un swipe.
 
   104 	this.isSwipe;
 
   116 	this.isSwipe = false;
 
   105 	//On peut swiper.
 
   117 	//On peut swiper.
 
   106 	this.canSwipe;
 
   118 	this.canSwipe = false;
 
   107 	//On passe vers une autre video automatiquement à la fin d'une lecture.
 
   119 	//On passe vers une autre video automatiquement à la fin d'une lecture.
 
   108 	this.autoMove;
 
   120 	this.autoMove = false;
 
   109 	//Si l'utilisateur a demandé à sélectionner la TL.
 
   121 	//Si l'utilisateur a demandé à sélectionner la TL.
 
   110 	this.isTLRequested;
 
   122 	this.isTLRequested = false;
 
   111 	//Le pointeur gauche a sélectionné la TL.
 
   123 	//Le pointeur gauche a sélectionné la TL.
 
   112 	this.isTLSelectedBySecondPointer;
 
   124 	this.isTLSelectedBySecondPointer = false;
 
   113 	//Le pointeur droit a sélectionné la TL.
 
   125 	//Le pointeur droit a sélectionné la TL.
 
   114 	this.isTLSelectedByMainPointer;
 
   126 	this.isTLSelectedByMainPointer = false;
 
   115 	//On peut afficher l'aide.
 
   127 	//On peut afficher l'aide.
 
   116 	this.canNotifyHelp;
 
   128 	this.canNotifyHelp = false;
 
   117 	//Indique si la mosaique est en train d'être filtrée.
 
   129 	//Indique si la mosaique est en train d'être filtrée.
 
   118 	this.isMosaicFiltering;
 
   130 	this.isMosaicFiltering = false;
 
   119 	this.arrowLeftLoading = false;
 
   131 	this.arrowLeftLoading = false;
 
   120 	this.arrowRightLoading = false;
 
   132 	this.arrowRightLoading = false;
 
   121 	this.arrowUpLoading = false;
 
   133 	this.arrowUpLoading = false;
 
   122 	this.arrowDownLoading = false;
 
   134 	this.arrowDownLoading = false;
 
   123 	//On est dans une recherche par courbes.
 
   135 	//On est dans une recherche par courbes.
 
   124 	this.isSearchByCurvesOn;
 
   136 	this.isSearchByCurvesOn = false;
 
   125 	this.canDrawNextCurve = false;
 
   137 	this.canDrawNextCurve = false;
 
       
   138 	//Dans le mode d'interaction souris, indique si on se situe actuellement sur un snapshot entièrement prézoomé.
 
       
   139 	this.isOnAPrezoomSN = false;
 
       
   140 	//Indique si une courbe de recherche donne au moins un résultat.
 
       
   141 	this.curvesGesturesFound = false;
 
       
   142 	//Indique si on souhaite supprimer la recherche en cours.
 
       
   143 	this.gestureDelRequested = false;
 
       
   144 	//Code de gesture actuellement calculé par les détecteurs de courbes.
 
       
   145 	this.actualCode = '';
 
   126 	
   146 	
   127 	//Timeout (attente) pour le zoom après un préZoom.
 
   147 	//Timeout (attente) pour le zoom après un préZoom.
 
   128 	this.zoomTimeout;
 
   148 	this.zoomTimeout = null;
 
   129 	//Timeout (attente) pour le passage vers un voisin.
 
   149 	//Timeout (attente) pour le passage vers un voisin.
 
   130 	this.moveToNeighbourTimeout;
 
   150 	this.moveToNeighbourTimeout = null;
 
   131 	this.mainPointerExitBorderTimeout;
 
   151 	this.mainPointerExitBorderTimeout = null;
 
   132 	this.secondPointerExitBorderTimeout;
 
   152 	this.secondPointerExitBorderTimeout = null;
 
   133 	//Idle time pour les pointeurs afin d'informer le front qu'on souhaite faire une recherche.
 
   153 	//Idle time pour les pointeurs afin d'informer le front qu'on souhaite faire une recherche.
 
   134 	this.pointersSearchIdleTimeout;
 
   154 	this.pointersSearchIdleTimeout = null;
 
   135 	//Vérifie toutes les N ms que les deux pointeurs sont détectés.
 
   155 	//Vérifie toutes les N ms que les deux pointeurs sont détectés.
 
   136 	this.areBothPointersHereTimeout;
 
   156 	this.areBothPointersHereTimeout = null;
 
   137 	//Délai de suppression d'une notification de recherche par gesture.
 
   157 	//Délai de suppression d'une notification de recherche par gesture.
 
   138 	this.removeNotificationByGestureTimeout;
 
   158 	this.removeNotificationByGestureTimeout = null;
 
   139 	//Délai de suppression d'une notification de recherche par gesture infructueuse.
 
   159 	//Délai de suppression d'une notification de recherche par gesture infructueuse.
 
   140 	this.removeFailedNotificationByGestureTimeout;
 
   160 	this.removeFailedNotificationByGestureTimeout = null;
 
   141 	//Délai avant la suppression de notification swipe.
 
   161 	//Délai avant la suppression de notification swipe.
 
   142 	this.notifySwipeTimeout;
 
   162 	this.notifySwipeTimeout = null;
 
   143 	//Délai pour la sélection de la TL.
 
   163 	//Délai pour la sélection de la TL.
 
   144 	this.selectTLTimeout;
 
   164 	this.selectTLTimeout = null;
 
   145 	//Délai pour slider sur la TL.
 
   165 	//Délai pour slider sur la TL.
 
   146 	this.canSlideInTLTimeout;
 
   166 	this.canSlideInTLTimeout = null;
 
   147 	//Délai pour afficher l'aide.
 
   167 	//Délai pour afficher l'aide.
 
   148 	this.canNotifyHelpTimeout;
 
   168 	this.canNotifyHelpTimeout = null;
 
   149 	this.arrowLeftTimeout;
 
   169 	this.arrowLeftTimeout = null;
 
   150 	this.arrowRightTimeout;
 
   170 	this.arrowRightTimeout = null;
 
   151 	this.arrowUpTimeout;
 
   171 	this.arrowUpTimeout = null;
 
   152 	this.arrowDownTimeout;
 
   172 	this.arrowDownTimeout = null;
 
   153 	
   173 	
   154 	this.arrowSpinnerTimeout;
 
   174 	this.arrowSpinnerTimeout = null;
 
   155 	this.nouserTimeout;
 
   175 	this.nouserTimeout = null;
 
   156 	this.nextDrawCurveTimeout;
 
   176 	this.nextDrawCurveTimeout = null;
 
   157 	
   177 	
   158 	//Dernier message INCOMING (pour éviter d'effectuer n fois la même action.
 
   178 	//Dernier message INCOMING (pour éviter d'effectuer n fois la même action.
 
   159 	this.lastIncomingMessage;
 
   179 	this.lastIncomingMessage = '';
 
   160 	
   180 	
   161 	//Type de marqueur recherché dans la mosaïque (en mode filter).
 
   181 	//Type de marqueur recherché dans la mosaïque (en mode filter).
 
   162 	this.filterSearchedType = "";
 
   182 	this.filterSearchedType = "";
 
   163 	
   183 	
   164 	//Mode actuel.
 
   184 	//Mode actuel.
 
   165 	this.currentMode = "NO-USER";
 
   185 	this.currentMode = "NO-USER";
 
   166 	//Snapshot sur lequel on a zoomé.
 
   186 	//Snapshot sur lequel on a zoomé.
 
   167 	this.previousZoomedSN = null;
 
   187 	this.previousZoomedSN = null;
 
       
   188 	//Snapshot sur lequel on a prezoomé.
 
       
   189 	this.previousPrezoomDiv = null;
 
   168 	//Son ID.
 
   190 	//Son ID.
 
   169 	this.previousId;
 
   191 	this.previousId = null;
 
   170 	//Dernier snapshot prézoomé non null.
 
   192 	//Dernier snapshot prézoomé non null.
 
   171 	this.lastNonNullSN = null;
 
   193 	this.lastNonNullSN = null;
 
   172 	//Largeur de la marge pour le centrage vertical de la mosaïque.
 
   194 	//Largeur de la marge pour le centrage vertical de la mosaïque.
 
   173 	this.MPTop_margin;
 
   195 	this.MPTop_margin;
 
   174 	this.top_margin;
 
   196 	this.top_margin;
 
   175 	
   197 	
   176 	//Gesture actuellement cherchée.
 
   198 	//Gesture actuellement cherchée.
 
   177 	this.currentSearchGesture;
 
   199 	this.currentSearchGesture = '';
 
   178 
   200 	
   179 	//Mosaïque locale.
 
   201 	//Mosaïque locale.
 
   180 	this.localMos;
 
   202 	this.localMos;
 
   181 	//Position des voisins lors d'un zoom.
 
   203 	//Position des voisins lors d'un zoom.
 
   182 	this.neighboursIds = [];
 
   204 	this.neighboursIds = [];
 
   183 	//ID du snapshot du milieu lors d'un zoom.
 
   205 	//ID du snapshot du milieu lors d'un zoom.
 
   189 	
   211 	
   190 	//Snapshots a afficher.
 
   212 	//Snapshots a afficher.
 
   191 	this.snapshotsToShow = 1;
 
   213 	this.snapshotsToShow = 1;
 
   192 	
   214 	
   193 	//Lecteur.
 
   215 	//Lecteur.
 
   194 	this.player;
 
   216 	this.player = null;
 
   195 	//Si le lecteur est prêt.
 
   217 	//Si le lecteur est prêt.
 
   196 	this.playerIsReady;
 
   218 	this.playerIsReady = false;
 
   197 	
   219 	
   198 	//Annotations (pour les marqueurs los d'un filtrage).
 
   220 	//Annotations (pour les marqueurs los d'un filtrage).
 
   199 	this.annotations = [];
 
   221 	this.annotations = [];
 
   200 	
   222 	
   201 	//Client websocket pour recevoir les notifications du Middleware.
 
   223 	//Client websocket pour recevoir les notifications du Middleware.
 
   238 	var len = this.config['length'], imgs = this.config['imagesToShow'], imgsTotal = this.config['imagesTotal'];
 
   260 	var len = this.config['length'], imgs = this.config['imagesToShow'], imgsTotal = this.config['imagesTotal'];
 
   239 	
   261 	
   240 	//S'il s'agit d'un rectangle.
 
   262 	//S'il s'agit d'un rectangle.
 
   241     if(imgs % len == 0)
 
   263     if(imgs % len == 0)
 
   242     {
 
   264     {
 
   243 		this.previousZoomedSN = null;
 
       
   244 		this.previousPrezoomDiv = null;
 
       
   245 		this.fullscreen = false;
 
       
   246 		this.canMoveToNeighbour = false;
 
       
   247 		this.currentlyZooming = false;
 
       
   248 		this.currentlyUnzooming = false;
 
       
   249 		this.helpDisplayed = false;
 
       
   250 		this.canStart = false;
 
       
   251 		this.isOnASnapshot = false;
 
       
   252 		this.isMosaicFiltered = false;
 
       
   253 		this.areBothPointersHere = false;
 
       
   254 		this.areBothPointersTimeoutLaunched = false;
 
       
   255 		this.isCurrentlyInASearchByGesture = false;
 
       
   256 		this.alreadyOnNotification = false;
 
       
   257 		this.playerIsReady = false;
 
       
   258 		this.currentSearchGesture = '';
 
       
   259 		this.isMainPointerDisplayed = false;
 
       
   260 		this.isSecondPointerDisplayed = false;
 
       
   261 		this.isSwipe = false;
 
       
   262 		this.canSwipe = false;
 
       
   263 		this.autoMove = false;
 
       
   264 		this.isTLRequested = false;
 
       
   265 		this.isTLSelectedByMainPointer = false;
 
       
   266 		this.isTLSelectedBySecondPointer = false;
 
       
   267 		this.canNotifyHelp = false;
 
       
   268 		this.isMosaicFiltering = false;
 
       
   269 		this.isSearchByCurvesOn = false;
 
       
   270 		
       
   271 		this.lastIncomingMessage = 'INCOMING-0';
 
   265 		this.lastIncomingMessage = 'INCOMING-0';
 
   272 		
   266 		
   273 		var str = '';
 
   267 		var str = '';
 
   274 		
   268 		
   275 		if(this.imgs.length >= imgs)
 
   269 		if(this.imgs.length >= imgs)
 
   279 				//On charge les images de petite taille pour ne pas surcharger la mosaïque lors de l'affichage global.
 
   273 				//On charge les images de petite taille pour ne pas surcharger la mosaïque lors de l'affichage global.
 
   280 				str += '<div id="snapshotDiv-' + i + '" class="snapshotDivs" style="opacity: 0;"><img id="snapshot-' + i + '" class="snapshots" src="snapshots-little/' + this.imgs[i] + '" /></div>';
 
   274 				str += '<div id="snapshotDiv-' + i + '" class="snapshotDivs" style="opacity: 0;"><img id="snapshot-' + i + '" class="snapshots" src="snapshots-little/' + this.imgs[i] + '" /></div>';
 
   281 			}
 
   275 			}
 
   282 		}
 
   276 		}
 
   283 		
   277 		
   284 		return str;
 
   278 		return str + '<div id="ghostPanel"></div>';
 
   285 	}
 
   279 	}
 
   286 	else
 
   280 	else
 
   287 	{
 
   281 	{
 
   288 		alert("Le nombre d'images a afficher doit être divisible par la longueur de la mosaïque !");
 
   282 		alert("Le nombre d'images a afficher doit être divisible par la longueur de la mosaïque !");
 
   289 	}
 
   283 	}
 
   305 	var _this = this;
 
   299 	var _this = this;
 
   306 	
   300 	
   307     //On affecte les chemins vers les images à la mosaïque.
 
   301     //On affecte les chemins vers les images à la mosaïque.
 
   308     this.previousZoomedSN;
 
   302     this.previousZoomedSN;
 
   309     //this.width = 
   303     //this.width = 
       
   304 	// console.log(createMosaic);
 
   310     //On met à jour la mosaïque.
 
   305     //On met à jour la mosaïque.
 
   311     $('#mainPanel').html(createMosaic);
 
   306     $('#mainPanel').html(createMosaic);
 
   312     //On récupère la taille des bordures.
 
   307     //On récupère la taille des bordures.
 
   313     this.marginWidth = $('.snapshotDivs').css('margin-bottom');
 
   308     this.marginWidth = $('.snapshotDivs').css('margin-bottom');
 
   314     this.marginWidth = parseFloat(this.marginWidth)*2;
 
   309     this.marginWidth = parseFloat(this.marginWidth)*2;
 
   324     this.MPTop_margin = ($(document).height() - $('#mainPanel').height())/2;
 
   319     this.MPTop_margin = ($(document).height() - $('#mainPanel').height())/2;
 
   325     $('#mainPanel').css('margin-top', this.MPTop_margin).css('margin-bottom', this.MPTop_margin);
 
   320     $('#mainPanel').css('margin-top', this.MPTop_margin).css('margin-bottom', this.MPTop_margin);
 
   326 	
   321 	
   327 	//On fait coincider le background du body avec celui de la mosaïque.
 
   322 	//On fait coincider le background du body avec celui de la mosaïque.
 
   328 	$('body').css('background-position', '0px ' + this.MPTop_margin + 'px');
 
   323 	$('body').css('background-position', '0px ' + this.MPTop_margin + 'px');
 
   329 	console.log(this.MPTop_margin);
 
       
   330 	
   324 	
   331 	/*$('.snapshotDivs').mouseover(function ()
 
   325 	/*$('.snapshotDivs').mouseover(function ()
 
   332 	{
 
   326 	{
 
   333 		//On effectue un prézoom dès qu'on va sur une image.
 
   327 		//On effectue un prézoom dès qu'on va sur une image.
 
   334 		_this.preZoom($(this));
 
   328 		_this.preZoom($(this));
 
   372 				console.log(_this.annotations.length + ' annotations loaded from ' + nbFichiers + ' files.');
 
   366 				console.log(_this.annotations.length + ' annotations loaded from ' + nbFichiers + ' files.');
 
   373 				
   367 				
   374 				//Si on gère les interactions à la souris.
 
   368 				//Si on gère les interactions à la souris.
 
   375 				if(_this.mouseInteractions)
 
   369 				if(_this.mouseInteractions)
 
   376 				{
 
   370 				{
 
   377 					$('body').mousemove(function(e){_this.refreshMainPointer(e.pageX, e.pageY, _this)});
 
   371 					$('body').mousemove(function(e)
 
   378 				}
 
   372 					{
 
   379 				
   373 						_this.refreshMainPointer(e.pageX, e.pageY, _this);
 
   380 				// if(false)
 
   374 						_this.mousePosX = e.pageX;
 
   381 				// {
 
   375 						_this.mousePosY = e.pageY;
 
   382 				if(_this.prephaseEnabled)
 
   376 					});
 
       
   377 				}
 
       
   378 				
       
   379 				if(_this.prephaseEnabled && !_this.mouseInteractions)
 
   383 				{
 
   380 				{
 
   384 					_this.init();
 
   381 					_this.init();
 
   385 					_this.showNImages(0);
 
   382 					_this.showNImages(0);
 
   386 					_this.currentMode = "NO-USER";
 
   383 					_this.currentMode = "NO-USER";
 
   387 				}
 
   384 				}
 
   388 				else
 
   385 				else
 
   389 				{
 
   386 				{
 
   390 					_this.showNImages(20);
 
   387 					_this.showNImages(20);
 
   391 					_this.currentMode = "MOSAIC";
 
   388 					_this.currentMode = "MOSAIC";
 
   392 				}
 
   389 				}
 
   393 				// }
 
       
   394 				
   390 				
   395 				// /!\ //
 
   391 				// /!\ //
 
   396 				// _this.currentMode = "FILTER";
 
   392 				// _this.currentMode = "FILTER";
 
   397 				// _this.showNImages(20);
 
   393 				// _this.showNImages(20);
 
   398 				//_this.isSearchByCurvesOn = true;
 
   394 				//_this.isSearchByCurvesOn = true;
 
   406 				
   402 				
   407 				_this.previousZoomedSN = $('#snapshotDiv-' + _this.fillingIds[0]);
 
   403 				_this.previousZoomedSN = $('#snapshotDiv-' + _this.fillingIds[0]);
 
   408 			}
 
   404 			}
 
   409 		});
 
   405 		});
 
   410 	}
 
   406 	}
 
       
   407 	
       
   408 	if(this.mouseInteractions)
 
       
   409 	{
 
       
   410 		//On bind le clic pour supprimer une recherche.
 
       
   411 		$('body').click(function(e)
 
       
   412 		{
 
       
   413 			_this.removeSearchNotificationIfOnIt(e.pageX, e.pageY);
 
       
   414 		});
 
       
   415 		
       
   416 		//Si on fait un mouse down sur le body, on vérifie enregistre le déplacement de la souris jusqu'au prochain mouse up.
 
       
   417 		$(window).mousedown(function ()
 
       
   418 		{
 
       
   419 			if(_this.isSearchByCurvesOn)
 
       
   420 			{
 
       
   421 				_this.searchCanvas.onPointerIn(_this.mousePosX, _this.mousePosY, null, null);
 
       
   422 			}
 
       
   423 			
       
   424 			console.log('mdown');
 
       
   425 			//On écoute le déplacement de la souris.
 
       
   426 			$(window).mousemove(function(e)
 
       
   427 			{
 
       
   428 				if(_this.isSearchByCurvesOn)
 
       
   429 				{
 
       
   430 					_this.searchCanvas.onPointerMove(_this.mousePosX, _this.mousePosY - _this.MPTop_margin, null, null);
 
       
   431 				}
 
       
   432 				
       
   433 				//On met à jour l'ancienne position de la souris si elle est nulle.
 
       
   434 				if(!_this.mousePosLastX && _this.mousePosLastX != 0)
 
       
   435 				{
 
       
   436 					_this.mousePosLastX = _this.mousePosX;
 
       
   437 				}
 
       
   438 				if(!_this.mousePosLastY && _this.mousePosLastY != 0)
 
       
   439 				{
 
       
   440 					_this.mousePosLastY = _this.mousePosY;
 
       
   441 				}
 
       
   442 				
       
   443 				//Le delta s'accroît si la souris bouge.
 
       
   444 				_this.mouseUpDownDelta += Math.floor(Math.sqrt((_this.mousePosLastX - e.pageX) * (_this.mousePosLastX - e.pageX) + (_this.mousePosLastY - e.pageY) * (_this.mousePosLastY - e.pageY)));
 
       
   445 				
       
   446 				// console.log(_this.mouseUpDownDelta, _this.mousePosLastX, e.pageX);
 
       
   447 				
       
   448 				if(_this.mousePosLastX != _this.mousePosX)
 
       
   449 				{
 
       
   450 					_this.mousePosLastX = _this.mousePosX;
 
       
   451 				}
 
       
   452 				if(_this.mousePosLastY != _this.mousePosY)
 
       
   453 				{
 
       
   454 					_this.mousePosLastY = _this.mousePosY;
 
       
   455 				}
 
       
   456 				
       
   457 				//Si la souris a parcouru une trop grande distance, on entre en recherche.
 
       
   458 				if(_this.mouseUpDownDelta > _this.config['mouseUpDownDeltaTreshold'])
 
       
   459 				{
 
       
   460 					//Si on est en mosaique, on entre en filtrage.
 
       
   461 					if(_this.currentMode == "MOSAIC")
 
       
   462 					{
 
       
   463 						_this.preUnzoom();
 
       
   464 						_this.currentMode = "FILTER";
 
       
   465 						_this.isMosaicFiltered = true;
 
       
   466 						
       
   467 						console.log(_this.date() + ' - ENTRE EN MODE FILTRAGE');
 
       
   468 						
       
   469 						_this.isSearchByCurvesOn = true;
 
       
   470 						_this.startSearch();
 
       
   471 						
       
   472 						if(!_this.curvesGesturesFound)
 
       
   473 						{
 
       
   474 							$('.notifications').remove();
 
       
   475 							_this.filterSearch();
 
       
   476 						}
 
       
   477 						
       
   478 						_this.searchCanvas.onPointerIn(_this.mousePosX, _this.mousePosY - _this.MPTop_margin, null, null);
 
       
   479 					}
 
       
   480 					else if(_this.currentMode == "FILTER" && !_this.isSearchByCurvesOn)
 
       
   481 					{
 
       
   482 						console.log('after search');
 
       
   483 						_this.preUnzoom();
 
       
   484 						_this.isSearchByCurvesOn = true;
 
       
   485 						_this.startSearch();
 
       
   486 						_this.searchCanvas.onPointerIn(_this.mousePosX, _this.mousePosY - _this.MPTop_margin, null, null);
 
       
   487 					}
 
       
   488 					//Si on est dans une vidéo, on entre en recherche.
 
       
   489 					else if(_this.currentMode == "VIDEO" || _this.currentMode == "TIMELINE")
 
       
   490 					{
 
       
   491 						_this.currentMode = "SEARCH";
 
       
   492 						
       
   493 						console.log(_this.date() + ' - ENTRE EN MODE RECHERCHE');
 
       
   494 						
       
   495 						_this.isSearchByCurvesOn = true;
 
       
   496 						_this.startSearch();
 
       
   497 						
       
   498 						if(!_this.curvesGesturesFound)
 
       
   499 						{
 
       
   500 							$('.notifications').remove();
 
       
   501 							_this.searchSearch();
 
       
   502 						}
 
       
   503 						
       
   504 						_this.searchCanvas.onPointerIn(_this.mousePosX, _this.mousePosY - _this.MPTop_margin, null, null);
 
       
   505 					}
 
       
   506 					else if(_this.currentMode == "SEARCH" && !_this.isSearchByCurvesOn)
 
       
   507 					{
 
       
   508 						_this.isSearchByCurvesOn = true;
 
       
   509 						_this.startSearch();
 
       
   510 						_this.searchCanvas.onPointerIn(_this.mousePosX, _this.mousePosY - _this.MPTop_margin, null, null);
 
       
   511 					}
 
       
   512 					
       
   513 					//Il est possible d'afficher l'aide.
 
       
   514 					if(!_this.canNotifyHelp)
 
       
   515 					{
 
       
   516 						_this.canNotifyHelpTimeout = setTimeout(function()
 
       
   517 						{
 
       
   518 							_this.canNotifyHelp = true;
 
       
   519 						}, _this.config['timeoutCanNotifyHelp']);
 
       
   520 					}
 
       
   521 				}
 
       
   522 			});
 
       
   523 			
       
   524 			//Si on fait un mouse up après ce mouse down.
 
       
   525 			$(window).mouseup(function()
 
       
   526 			{
 
       
   527 				console.log('mup');
 
       
   528 				
       
   529 				if(_this.isSearchByCurvesOn)
 
       
   530 				{
 
       
   531 					var gesture_match = _this.gestureWithSameCode(_this.actualCode);
 
       
   532 					_this.actualCode = '';
 
       
   533 					
       
   534 					if(gesture_match.length > 0)
 
       
   535 					{
 
       
   536 						if(_this.currentMode == "SEARCH" && _this.playerIsReady)
 
       
   537 						{
 
       
   538 							_this.player.widgets[0].searchByGesture(gesture_match);
 
       
   539 							_this.isCurrentlyInASearchByGesture = _this.player.widgets[0].isCurrentlyInASearchByGesture;
 
       
   540 							
       
   541 							$('.notifications').remove();
 
       
   542 							_this.searchGesture(gesture_match, 'valid');
 
       
   543 							_this.curvesGesturesFound = false;
 
       
   544 						}
 
       
   545 						else if(_this.currentMode == "FILTER")
 
       
   546 						{
 
       
   547 							if(_this.isMosaicFiltered)
 
       
   548 							{
 
       
   549 								$('.notifications').remove();
 
       
   550 								_this.filterSearchedType = gesture_match;
 
       
   551 								_this.filterGesture(gesture_match, 'valid');
 
       
   552 								_this.searchFilter(gesture_match);
 
       
   553 								_this.curvesGesturesFound = false;
 
       
   554 							}
 
       
   555 						}
 
       
   556 					}
 
       
   557 					
       
   558 					_this.searchCanvas.onPointerOut();
 
       
   559 				}
 
       
   560 				
       
   561 				//On unbind ce qui a été bindé après le mouse up.
 
       
   562 				$(window).unbind('mousemove');
 
       
   563 				$(window).unbind('mouseup');
 
       
   564 				//On rebind le mousemove principal du body, car ils ont tous été unbindés.
 
       
   565 				$('body').mousemove(function(e)
 
       
   566 				{
 
       
   567 					_this.refreshMainPointer(e.pageX, e.pageY, _this);
 
       
   568 					_this.mousePosX = e.pageX;
 
       
   569 					_this.mousePosY = e.pageY;
 
       
   570 				});
 
       
   571 				
       
   572 				_this.mousePosLastX = null;
 
       
   573 				_this.mousePosLastY = null;
 
       
   574 				
       
   575 				//Si la distance parcourue par la souris entre le mouse down et le mouse up est inférieure ou égale au seuil.
 
       
   576 				if(_this.mouseUpDownDelta <= _this.config['mouseUpDownDeltaTreshold'])
 
       
   577 				{
 
       
   578 					//Si on est sur un snapshot prézoomé.
 
       
   579 					if(_this.isOnAPrezoomSN && _this.previousZoomedSN != '' && (_this.currentMode == 'MOSAIC' || _this.currentMode == 'FILTER'))
 
       
   580 					{
 
       
   581 						_this.zoom();
 
       
   582 					}
 
       
   583 				}
 
       
   584 				
       
   585 				_this.mouseUpDownDelta = 0;
 
       
   586 				_this.isSearchByCurvesOn = false;
 
       
   587 				_this.leaveSearch();
 
       
   588 				
       
   589 				if(_this.currentMode == 'FILTER' && _this.filterSearchedType != '')//if(_this.currentSearchGesture != '')
 
       
   590 				{
 
       
   591 					$('.notifications').remove();
 
       
   592 					_this.filterGesture(_this.currentSearchGesture, 'valid');
 
       
   593 				}
 
       
   594 				
       
   595 			});
 
       
   596 		});
 
       
   597 	}
 
   411 }
 
   598 }
 
   412 
   599 
   413 /*
 
   600 /*
 
   414  * Charge les paramètres du Front. Local (true/false) est le mode de chargement des données.
 
   601  * Charge les paramètres du Front. Local (true/false) est le mode de chargement des données.
 
   415 */
 
   602 */
 
   416 mosaic.prototype.loadParameters = function(file_path)
 
   603 mosaic.prototype.loadParameters = function(file_path)
 
   417 {
 
   604 {
 
   418 	var _this = this;
 
   605 	var _this = this;
 
   419 	
   606 	
   420 	var supposedToBeInt = ['length', 'imagesToShow', 'totalImages', 'timePrezoom', 'timePreUnzoom', 'timeZoom', 'zoomTime', 'timeUnzoom', 'timeNeighbourGlowing', 'timeNeighbourUnglowing', 'timeMovingToNeighbour', 'timeSearchFade', 'timeNotifyFade', 'timeFilterFade', 'timeANFade', 'timeFilling', 'zoomedMargin', 'timeoutZoom', 'timeoutUnzoom', 'timeoutMoveToNeighbour', 'timeoutPointersIdle', 'timeoutAreBothPointersHere', 'timeoutRemoveNotificationByGesture', 'timeoutRemoveFailedNotificationByGesture', 'timeoutNotifySwipe', 'timeoutSelectTL', 'timeoutSlideTL', 'timeoutCanNotifyHelp', 'timeoutRemoveSpinner', 'timeoutNouser', 'timeoutNextDrawCurve'];
 
   607 	var supposedToBeInt = ['length', 'imagesToShow', 'totalImages', 'timePrezoom', 'timePreUnzoom', 'timeZoom', 'zoomTime', 'timeUnzoom', 'timeNeighbourGlowing', 'timeNeighbourUnglowing', 'timeMovingToNeighbour', 'timeSearchFade', 'timeNotifyFade', 'timeFilterFade', 'timeANFade', 'timeFilling', 'zoomedMargin', 'timeoutZoom', 'timeoutUnzoom', 'timeoutMoveToNeighbour', 'timeoutPointersIdle', 'timeoutAreBothPointersHere', 'timeoutRemoveNotificationByGesture', 'timeoutRemoveFailedNotificationByGesture', 'timeoutNotifySwipe', 'timeoutSelectTL', 'timeoutSlideTL', 'timeoutCanNotifyHelp', 'timeoutRemoveSpinner', 'timeoutNouser', 'timeoutNextDrawCurve', 'mouseUpDownDeltaTreshold'];
 
   421 	var supposedToBeFloat = ['zoomPercentage', 'prezoomPercentage'];
 
   608 	var supposedToBeFloat = ['zoomPercentage', 'prezoomPercentage'];
 
   422 	
   609 	
   423 	$.getJSON(file_path, function(data)
 
   610 	$.getJSON(file_path, function(data)
 
   424 	{
 
   611 	{
 
   425 		for(key in data)
 
   612 		for(key in data)
 
   487 			// console.log("Loading online metadata.");
 
   674 			// console.log("Loading online metadata.");
 
   488 			_this.loadFromJson('./player/json/online_videos.json');
 
   675 			_this.loadFromJson('./player/json/online_videos.json');
 
   489 		}
 
   676 		}
 
   490 		
   677 		
   491 		//On initialise le client.
 
   678 		//On initialise le client.
 
   492 		_this.client = new client(_this.config['host'], _this.config['port'], _this);
 
   679 		if(!_this.mouseInteractions)
 
       
   680 		{
 
       
   681 			_this.client = new client(_this.config['host'], _this.config['port'], _this);
 
       
   682 		}
 
       
   683 		
       
   684 		_this.getDictionary();
 
   493 	});
 
   685 	});
 
   494 }
 
   686 }
 
   495 
   687 
   496 /*
 
   688 /*
 
   497  * Phase principale (utilisateur non détecté). Une vidéo se lance aléatoirement.
 
   689  * Phase principale (utilisateur non détecté). Une vidéo se lance aléatoirement.
 
   552 	if(n >= this.config['imagesToShow'])
 
   744 	if(n >= this.config['imagesToShow'])
 
   553 	{
 
   745 	{
 
   554 		// this.unzoom();
 
   746 		// this.unzoom();
 
   555 		if(this.currentMode == "NO-USER" || this.currentMode.indexOf("INCOMING-") > -1)
 
   747 		if(this.currentMode == "NO-USER" || this.currentMode.indexOf("INCOMING-") > -1)
 
   556 		{
 
   748 		{
 
   557 			this.currentMode = "INCOMING-20";
 
   749 			if(!this.mouseInteractions)
 
   558 			this.unzoom();
 
   750 			{
 
       
   751 				this.currentMode = "INCOMING-20";
 
       
   752 				this.unzoom();
 
       
   753 			}
 
       
   754 			
   559 			this.currentMode = "MOSAIC";
 
   755 			this.currentMode = "MOSAIC";
 
   560 			$('.notifications').remove();
 
   756 			$('.notifications').remove();
 
   561 			this.mosaicSelectionAndSearch();
 
   757 			this.mosaicSelectionAndSearch();
 
   562 			clearTimeout(this.nouserTimeout);
 
   758 			clearTimeout(this.nouserTimeout);
 
   563 			console.log('OK');
 
   759 			console.log('OK');
 
   564 		}
 
   760 		}
 
   565 		//On affiche les notifications.
 
   761 		//On affiche les notifications.
 
   566 		// this.notifySelectionSearchMosaicFull();
 
   762 		// this.notifySelectionSearchMosaicFull();
 
   567 	
   763 	
   568 		// $('#mainPointer').fadeTo(this.config['timePrezoom'], 1);
 
   764 		//$('#mainPointer').fadeTo(this.config['timePrezoom'], 1);
 
   569 		// $('#secondPointer').fadeTo(this.config['timePrezoom'], 1);
 
   765 		//$('#secondPointer').fadeTo(this.config['timePrezoom'], 1);
 
   570 	}
 
   766 	}
 
   571 	
   767 	
   572 	//Pour les snapshots à afficher.
 
   768 	//Pour les snapshots à afficher.
 
   573 	for(var i = 0 ; i < n ; i++)
 
   769 	for(var i = 0 ; i < n ; i++)
 
   574 	{
 
   770 	{
 
   937 			_this.canStart = true;
 
  1133 			_this.canStart = true;
 
   938 			console.log('CAN START !');
 
  1134 			console.log('CAN START !');
 
   939 			// console.log(_this.player);
 
  1135 			// console.log(_this.player);
 
   940 			// console.log(_this.player.popcorn);
 
  1136 			// console.log(_this.player.popcorn);
 
   941 		}
 
  1137 		}
 
       
  1138 		
   942 		//Lorsque le player est en pause (par exemple lorsque le curseur arrive à la fin de la timeline).
 
  1139 		//Lorsque le player est en pause (par exemple lorsque le curseur arrive à la fin de la timeline).
 
   943 		if(_this.player.popcorn)
 
  1140 		if(_this.player.popcorn)
 
   944 		{
 
  1141 		{
 
   945 			_this.player.popcorn.listen('pause', function()
 
  1142 			_this.player.popcorn.listen('pause', function()
 
   946 			{
 
  1143 			{
 
   984 			// console.log('mosaic filtered : ' + _this.isMosaicFiltered);
 
  1181 			// console.log('mosaic filtered : ' + _this.isMosaicFiltered);
 
   985 			
  1182 			
   986 			_this.player.popcorn.on("markersready", function()
 
  1183 			_this.player.popcorn.on("markersready", function()
 
   987 			{
 
  1184 			{
 
   988 				_this.playerIsReady = true;
 
  1185 				_this.playerIsReady = true;
 
       
  1186 				
       
  1187 				if(_this.player.widgets[0])
 
       
  1188 				{
 
       
  1189 					_this.player.widgets[0].setMouseInteractions(_this.mouseInteractions);
 
       
  1190 				}
 
   989 				
  1191 				
   990 				if(_this.currentMode == 'VIDEO' || _this.currentMode == 'SEARCH' || _this.currentMode == 'TIMELINE')
 
  1192 				if(_this.currentMode == 'VIDEO' || _this.currentMode == 'SEARCH' || _this.currentMode == 'TIMELINE')
 
   991 				{
 
  1193 				{
 
   992 					_this.canSwipe = true;
 
  1194 					_this.canSwipe = true;
 
   993 				}
 
  1195 				}
trakers