## Sommaire

1. Introduction
2. Lancement
3. Fonctionnalités
4. Configuration
5. Notices à prendre en compte

###
1. Introduction

Ce front est un prototype sous forme d'application web développée en javascript permettant de naviguer au sein d'une mosaïque de vidéos indexées.

Elements requis :

- Google Chrome 20 ou supérieur est nécessaire pour lancer ce prototype.
- WampServer 2 doit être installé.
- Les dossiers Front IDILL et lib doivent être copiés à la racine du dossier www de Wamp (par défaut dans C:\wamp\www).

Si vous souhaitez utiliser le prototype en mode d'interaction Kinect :

- Kinect for Xbox 360.
- Kinect SDK 1.5 de Microsoft.
- .NET Framework 4.0.

###
2. Lancement

1. Lancer wamp.
2. Aller sur Google Chrome à l'adresse : http://localhost/Front%20IDILL
3. Par défaut, le prototype est réglé pour les interactions à la souris. Vous pouvez néanmoins le configurer (voir Configuration) pour qu'il puisse se connecter à un Middleware utilisant Kinect.

Lancement en mode Kinect (après avoir réglé le paramètre dans la configuration).

4. Lorsque vous vous trouvez dans ce Front, vous pouvez voir deux boutons, chacun mène à un mode d'interaction particulier. Le premier vous envoie sur le Front IDILL en mode d'interaction souris et le second en mode d'interaction Kinect (le middleware est requis pour ce mode d'interaction).
5. Après avoir lancé le Front, il faut cliquer sur le raccourci l'exécutable "BBM - Middleware.exe". Si vous l'avez supprimé, vous pouvez le retrouvé ainsi : dossier d'installation de BBM\Browse by Motion\Middleware\MainModule.exe.
6. La fenêtre s'ouvre. Dès que vous voyez la sortie vidéo de la Kinect apparaître à l'écran, vous avez connecté le Middleware.
7. Relancez le Front en cliquant dessus et en appuyant sur F5 afin de raffraichir la fenêtre du navigateur.

###
3. Fonctionnalités

Dans cette partie, on déclinera les fonctionnalités selon le mode d'interaction utilisé (Souris/Kinect).

###

Mode d'interaction souris :

###
1. Actions de contrôle de l'interface.

####
1. Sélection de la vidéo dans la mosaïque.

Lorsque vous vous trouvez dans la mosaïque, vous pouvez survoler les images, qui zoomeront légèrement. Un clic sur une image zoomée vous permettra d'accéder à sa vidéo.

####
2. Revenir à la mosaïque.

Il y a deux interactions possibles pour revenir à la mosaïque.

- Le fait de cliquer en dehors de la vidéo centrale.
- Le fait de tirer la molette de la souris vers vous.

####
3. Aller d'une vidéo à une autre.

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 mettre la souris sur la vidéo voulue, attendre qu'elle bleuisse et que la notification de changement de vidéo apparaisse en haut de la fenêtre. Ensuite, vous pouvez :

- Cliquer sur cette vidéo.
- Déplacer rapidement le curseur vers la bordure opposée.

###
2. Recherche par courbes.

Dans le mode d'intéraction souris, une icone d'aide apparaît en haut à droite de la fenêtre. Lorsque la souris passe dessus, il grandit. Un clic sur la grande icone fait apparaître le panneau d'aide. Il est possible de cliquer ou de tracer une nouvelle courbe de recherche pour faire disparaître le panneau d'aide.

####
1. Tracé de courbes.

Lorsque vous vous trouvez dans la mosaïque, ou sur le lecteur vidéo (au dessus de la timeline), il vous est possible d'effectuer une recherche par courbe en maintenant le bouton gauche de la souris et en la déplaçant. La courbe sera alors tracée par le mouvement du curseur.
Dès que l'utilisateur lâche le bouton, la courbe disparaît.

####
2. Reconnaissance de courbes.

Durant le tracé, il peut arriver 4 choses :

- Le tracé correspond à plusieurs courbes : Leurs macarons sont affichés en haut de la fenêtre.
- 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.
- Le tracé correspond à plusieurs courbes, mais le tracé actuel permet de définir une courbe : Si on relâche le bouton de la souris, on valide la courbe qu'on a tracé et on entre dans une recherche.
- Le tracé ne correspond à aucune courbe répertoriée. Un macaron de geste inconnu s'affiche.

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.
Une recherche dans une vidéo mettra en surbrillance les marqueurs correspondant au type de marqueur recherché.

Une nouvelle requête de recherche écrase la précédente.

Si une recherche est effectuée dans la mosaïque, la recherche s'étend à toutes les vidéos contenues.

A l'inverse, une recherche dans une vidéo n'affecte pas la mosaïque.

####
3. Quitter la recherche.

Pour quitter une recherche en cours, il suffit de placer le curseur sur le macaron de recherche, qui apparaîtra alors barré. Ensuite, un clic le fait disparaître et quitte la recherche.

###

Mode d'interaction Kinect :

Deux pointeurs sont affichées lorsque les mains se situent à un certain intervalle de profondeur par rapport à la Kinect. Cet intervalle peut être modifié dans la configuration. Il s'agit de la zone de recherche.

###
1. Actions de contrôle de l'interface.

####
1. Sélection de la vidéo dans la mosaïque.

Lorsque vous vous trouvez dans la mosaïque, vous pouvez pointer les images avec un bras, l'image sur laquelle le pointeur correspondant à une de vos mains se trouve zoomera légèrement. Lorsque vous maintenez le pointeur sur une image, une mire se remplira progressivement. Lorsqu'elle sera entièrement remplie, un zoom s'effectuera sur l'image afin de donner l'accès à sa vidéo.

####
2. Revenir à la mosaïque.

Il faut placer les deux pointeurs correspondants aux mains sur les bordures des voisins de la vidéo centrale pour revenir à la mosaïque. Il est possible de le faire horizontalement ou verticalement.

####
3. Aller d'une vidéo à une autre.

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 mettre le pointeur sur la vidéo voulue, attendre qu'elle bleuisse et que la notification de changement de vidéo apparaisse en haut de la fenêtre. Ensuite, vous pouvez déplacer rapidement le pointeur vers la bordure opposée

###
2. Recherche par courbes.

La recherche dans le mode d'interaction Kinect diffère de celle du mode d'interaction souris dans la mesure où il faut effectuer une demande de recherche. Celle-ci se fait en placant les deux mains dans la zone de recherche et en ne les bougeant plus jusqu'à ce qu'une notification de recherche apparaisse. Dans la mosaïque, les mains peuvent se placer à n'importe quel endroit, alors que dans une vidéo, il faut les placer sur la vidéo centrale.

####
1. Tracé de courbes.

Lorsque vous vous trouvez dans la mosaïque, ou sur le lecteur vidéo (au dessus de la timeline), il vous est possible d'effectuer une recherche par courbe en demandant une recherche, puis en déplacant les deux mains dans la zone de recherche. Seul les débuts de courbes valides seront pris en compte (afin d'éviter que le positionnement des mains ne génère trop d'erreurs de reconnaissance). La courbe sera alors tracée par le mouvement du curseur.
Dès que l'utilisateur enlève les deux mains de la zone de recherche, la courbe disparaît.

Chaque pointeur génère une courbe. L'analyse de courbes est donc double.

####
2. Reconnaissance de courbes.

Durant le tracé, il peut arriver 4 choses :

- Le tracé correspond à plusieurs courbes : Leurs macarons sont affichés en haut de la fenêtre.
- 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.
- 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.
- Le tracé ne correspond à aucune courbe répertoriée. Un macaron de geste inconnu s'affiche.

Il est possible aussi d'afficher l'aide en effectuant le geste wave (secouer la main droite horizontalement, le coude formant un angle droit). Au préalable il faut avoir effectué une demande de recherche. Il est possible d'effectuer une recherche gestuelle (voir plus bas) ou de tracer une nouvelle courbe pour faire disparaître le panneau d'aide.

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.
Une recherche dans une vidéo mettra en surbrillance les marqueurs correspondant au type de marqueur recherché.

Une nouvelle requête de recherche écrase la précédente.

Si une recherche est effectuée dans la mosaïque, la recherche s'étend à toutes les vidéos contenues.

A l'inverse, une recherche dans une vidéo n'affecte pas la mosaïque.

####
3. Reconnaissance de gestures.

Une fois une demande de recherche effectuée, vous pouvez lancer une recherche en effectuant 4 gestures (correspondantes aux 4 marqueurs représentés par ces gestures) :

- FALL (chute) : S'accroupir les genoux en avant.
- JUMP (saut) : Sauter verticalement sans élan.
- KNEE-UP (levé de genou) : Lever l'un des genoux en l'avancant par rapport au reste du corps.
- BEND (penché) : Se pencher vers l'avant sans plier les jambes.

####
4. Quitter la recherche.

Pour quitter une recherche en cours, il suffit de placer un pointeur sur le macaron de recherche, qui apparaîtra alors barré. Ensuite, une mire se remplit au fur et à mesure. Lorsque la mire est pleine, la notification et la recherche sont enlevées.

###

Mode d'interaction pour Tablettes :

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.

###
1. Actions de contrôle de l'interface.

####
1. Affichage du panneau d'aide.

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.

####
2. Sélection de la vidéo dans la mosaïque.

Lorsque vous vous trouvez dans la mosaïque, vous pouvez appuyer sur une image afin d'accéder à la vidéo.

####
3. Revenir à la mosaïque.

Il faut appuyer sur l'icone représentant une maison situé en haut à gauche de l'écran.

####
4. Aller d'une vidéo à une autre.

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.

###
2. Recherche par courbes.

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.

####
1. Tracé de courbes.

####
2. Reconnaissance de courbes.

Durant le tracé, il peut arriver 4 choses :

- Le tracé correspond à plusieurs courbes : Leurs macarons sont affichés en haut de la fenêtre.
- 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.
- 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.
- Le tracé ne correspond à aucune courbe répertoriée. Un macaron de geste inconnu s'affiche.

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.
Une recherche dans une vidéo mettra en surbrillance les marqueurs correspondant au type de marqueur recherché.

Une nouvelle requête de recherche écrase la précédente.

Si une recherche est effectuée dans la mosaïque, la recherche s'étend à toutes les vidéos contenues.

A l'inverse, une recherche dans une vidéo n'affecte pas la mosaïque.

####
4. Quitter la recherche.

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.

###
4. Configuration

Le Front IDILL possède trois configurations :

- Une configuration par défaut.
  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.
- Deux configurations personnalisables.
  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.
- 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.

Voici la liste des différents paramètres du Front IDILL :

Nom du paramètre | Type | Valeur par défaut | Description
--- | --- | --- | ---
local | booléen | true | Indique si le chargement des métadonnées se fait localement ou en ligne.
videoConfigFileLocal | string (path) | "./player/json/local_videos.json" | Chemin vers le fichier de chargement des images, vidéos et métadonnées pour un chargement local.
videoConfigFileOnline | string (path) | "./player/json/online_videos.json" | Chemin vers le fichier de chargement des images, vidéos et métadonnées pour un chargement en ligne.
mouseInteractions | booléen | true | Spécifie le mode d'interaction (souris/Kinect).
noUserModeEnabled | booléen | true | Spécifie si on active la phase d'approche de l'utilisateur (de remplissage de la mosaïque en mode d'interaction Kinect).
kinectMinCoordX | int (px) | 40 | Borne inférieure en abscisse du champ de liberté des pointeurs de la kinect sur l'écran du Front.
kinectMinCoordY | int (px) | 30 | Borne inférieure en ordonnée du champ de liberté des pointeurs de la kinect sur l'écran du Front.
kinectMaxCoordX | int (px) | 520 | Borne supérieure en abscisse du champ de liberté des pointeurs de la kinect sur l'écran du Front.
kinectMaxCoordY | int (px) | 260 | Borne supérieure en ordonnée du champ de liberté des pointeurs de la kinect sur l'écran du Front.
imagesByLine | int | 5 | Longueur de la mosaïque en images.
imagesToShow | int | 20 | Nombre d'images affichées dans la mosaïque.
totalImages | int | 22 | Nombre d'images disponibles au total.
timeReloadAfterResize | int (msec) | 1000 | Temps d'attente avant de recharger la page lorsqu'elle est redimensionnée.
timePrezoom | int (msec) | 500 | Temps qu'il faut à une image pour entrer en phase de prézoom (présélection pour le zoom).
timePreUnzoom | int (msec) | 200 | Temps qu'il faut à une image pour quitter une phase de prézoom.
zoomTime | int (msec) | 500 | Temps qu'il faut pour zoomer sur une image et passer en mode vidéo.
timeUnzoom | int (msec) | 400 | Temps qu'il faut pour dézoomer et revenir à la mosaïque.
timeNeighbourGlowing | int (msec) | 1000 | Temps qu'il faut à une vidéo voisine en mode vidéo pour être sélectionnée.
timeNeighbourUnglowing | int (msec) | 1000 | Temps qu'il faut à une vidéo voisine en mode vidéo pour être désélectionnée.
timeMovingToNeighbour | int (msec) | 1000 | Temps qu'il faut pour bouger vers une vidéo voisine.
timeSearchFade | int (msec) | 2000 | Temps qu'il faut pour que le canvas de recherche par courbes disparaisse.
timeNotifyFade | int (msec) | 2000 | Temps qu'il faut pour que le panneau d'aide disparaisse.
timeFilterFade | int (msec) | 2000 | Temps que le filtrage de la mosaïque s'enlève.
timeANFade | int (msec) | 500 | Temps qu'il faut pour qu'un voisin additionnel disparaisse (voisin de bord de mosaïque).
timeShowBigHelp | int (msec) | 1000 | Temps qu'il faut pour zoomer/dézoomer l'icone d'aide (souris).
timeoutZoom | int (msec) | 2000 | Temps qu'il faut pour valider la sélection d'une image pour zoomer (Kinect).
timeoutUnzoom | int (msec) | 1000 | Temps qu'il faut avant de bloquer le dézoom quand les pointeurs quittent les voisins opposés (Kinect).
timeoutMoveToNeighbour | int (msec) | 250 | Temps qu'il faut avant de bloquer le passage vers un voisin lorsque le pointeur quitte un voisin (Kinect).
timeoutPointersIdle | int (msec) | 2000 | Temps qu'il faut pour valider l'immobilité des deux pointeurs pour faire une demande de recherche (Kinect).
timeoutAreBothPointersHere | int (msec) | 500 | Temps qu'il faut pour détecter que les deux pointeurs sont là ou non (Kinect).
timeoutRemoveNotificationByGesture | int (msec) | 1500 | Temps qu'il faut pour valider la suppression de recherche quand on est sur le macaron de la recherche (Kinect).
timeoutNotifySwipe | int (msec) | 1000 | Temps qu'il faut pour être de nouveau capable de faire un swipe après en avoir fait un (Kinect).
timeoutSelectTL | int (msec) | 100 | Temps qu'il faut pour sélectionner la timeline quand on a un pointeur ou la souris dessus.
timeoutSlideTL | int (msec) | 1000 | Temps qu'il faut avant de pouvoir déplacer le curseur de lecture quand on vient d'entrer dans la timeline.
timeoutCanNotifyHelp | int (msec) | 1000 | Temps qu'il faut avant de pouvoir afficher le panneau d'aide lorsqu'il a déjà été affiché ou après une demande de recherche (Kinect).
timeoutRemoveSpinner | int (msec) | 1000 | Temps qu'il faut pour faire disparaître la mire d'un pointeur (généralement en même temps que lui) (Kinect).
timeoutCanNotifyHelp | int (msec) | 1000 | Temps qu'il faut avant de pouvoir afficher le panneau d'aide lorsqu'il a déjà été affiché ou après une demande de recherche (Kinect).
timeoutNouser | int (msec) | 3000 | Temps de latence séparant la sortie de l'utilisateur du champ de détection de Kinect de la réinitialisation de l'interface (Kinect).
timeoutNextDrawCurve | int (msec) | 500 | Temps qu'il faut avant de pouvoir dessiner une courbe de recherche quand on vient d'entrer en mode de recherche par courbes ou bien après en avoir tracé une (Kinect).
zoomPercentage | float (entre 0 et 1) | 0.80 | Pourcentage d'agrandissement de l'image initiale pour un zoom.
prezoomPercentage | float (entre 0 et 1) | 0.25 | Pourcentage d'agrandissement de l'image initiale pour un prézoom (une sélection qui précède un zoom).
zoomedMargin | int (px) | 42 | Epaisseur de la marge qui sépare les images de la mosaïque lorsqu'elle est zoomée.
host | string (adresse ip) | "127.0.0.1" | Adresse ip sur lequel le serveur du Middleware est hébergé (Kinect).
port | int | 8090 | Port sur lequel on peut se connecter au serveur du Middleware (Kinect).
mouseUpDownDeltaTreshold | int (px) | 15 | 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.
kinectUpDownDeltaTreshold | int (px) | 20 | Distance à partir de laquelle le tracé d'un début de courbe est considéré comme un segment dans le mode d'interaction Kinect.
curveDictionaryKI | string (path) | "./dicoKI.json" | Chemin du dictionnaire de courbes de recherche. (Kinect)
curveDictionaryMI | string (path) | "./dicoMI.json" | Chemin du dictionnaire de courbes de recherche. (souris & tablettes)
lang | string (abréviation) | "" | Langue utilisée dans le Front (en, fr...). Si elle est vide alors la langue du navigateur est prise.
langs | tableau de string | ["fr", "en"] | Identifiant des langues actuellement disponibles pour l'interface.

###
5. Notices à prendre en compte

Ce projet étant un prototype, il est possible que certains bugs surviennent. Si vous expérimentez ce genre de désagrément, vous pouvez nous en faire part (actions menant au problème + description du problème + capture d'écran).

Si vous voulez évaluer convenablement le champ de liberté des pointeurs dans la fenêtre du Front, en fonction de la position de la Kinect, vous pouvez bouger les pointeurs jusqu'à ce que vos bras ne puissent plus aller plus loin. Ensuite, allez dans la console de Google Chrome (F12), et entrez les variables : mos.minX, mos.minY, mos.maxX, mos.maxY pour obtenir respectivement les valeurs de kinectMinCoordX, kinectMinCoordY, kinectMaxCoordX et kinectMaxCoordY.

Si vous expérimentez des difficultés ou souhaitez nous soumettre une requête, veuillez consulter le fichier contact.txt à la racine du projet.