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 : -
Si vous souhaitez utiliser le prototype en mode d'interaction Kinect : -
-
Lancement en mode Kinect (après avoir réglé le paramètre dans la configuration).
- --
Dans cette partie, on déclinera les fonctionnalités selon le mode d'interaction utilisé (Souris/Kinect).
- -Mode d'interaction souris :
- -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.
-Il y a deux interactions possibles pour revenir à la mosaïque.
-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 :
- -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.
- -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.
Durant le tracé, il peut arriver 4 choses :
-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.
-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.
- -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.
-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.
-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
-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.
- -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.
-Durant le tracé, il peut arriver 4 choses :
-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.
-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) :
-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.
-Le Front IDILL possède deux configurations :
-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. |
| curveDictionary | string (path) | "./dico.json" | Chemin du dictionnaire de courbes de recherche. |
| lang | string (abréviation) | "" | Langue utilisée dans le Front (en, fr...). Si elle est vide alors la langue du navigateur est prise. |
| helpBorderSize | int (px) | 5 | Taille de la bordure affichant l'aide dans le mode d'interaction souris. |
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.
- + + + + + + +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 : +
Si vous souhaitez utiliser le prototype en mode d'interaction Kinect : +
+
Lancement en mode Kinect (après avoir réglé le paramètre dans la configuration).
+ ++
Dans cette partie, on déclinera les fonctionnalités selon le mode d'interaction utilisé (Souris/Kinect).
+ +Mode d'interaction souris :
+ +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.
+Il y a deux interactions possibles pour revenir à la mosaïque.
+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 :
+ +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.
+ +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.
Durant le tracé, il peut arriver 4 choses :
+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.
+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.
+ +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.
+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.
+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
+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.
+ +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.
+Durant le tracé, il peut arriver 4 choses :
+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.
+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) :
+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.
+Le Front IDILL possède deux configurations :
+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. |
| curveDictionary | string (path) | "./dico.json" | Chemin du dictionnaire de courbes de recherche. |
| lang | string (abréviation) | "" | Langue utilisée dans le Front (en, fr...). Si elle est vide alors la langue du navigateur est prise. |
| helpBorderSize | int (px) | 5 | Taille de la bordure affichant l'aide dans le mode d'interaction souris. |
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.
+ \ No newline at end of file diff -r 52277fe2279c -r 9eff85166868 front_idill/src/communication/js/client.js --- a/front_idill/src/communication/js/client.js Wed Aug 08 18:42:01 2012 +0200 +++ b/front_idill/src/communication/js/client.js Thu Aug 16 14:32:19 2012 +0200 @@ -25,17 +25,17 @@ */ function Client(host, port, _mosaic) { - this.socket = null; - this.mosaic = _mosaic; - - this.pointerLeft = false; - this.pointerRight = false; - this.timePointers = 100; - this.pointerLeftTimeout = null; - this.pointerRightTimeout = null; - this.isLeftHanded = false; - - this.createWebSocket('ws://' + host + ':' + port + '/'); + this.socket = null; + this.mosaic = _mosaic; + + this.pointerLeft = false; + this.pointerRight = false; + this.timePointers = 100; + this.pointerLeftTimeout = null; + this.pointerRightTimeout = null; + this.isLeftHanded = false; + + this.createWebSocket('ws://' + host + ':' + port + '/'); } /* @@ -45,46 +45,46 @@ */ Client.prototype.createWebSocket = function(host) { - var _this = this; - - //Initialise la fonctionnalité websocket du naviguateur. + var _this = this; + + //Initialise la fonctionnalité websocket du naviguateur. if(window.MozWebSocket) - { + { window.WebSocket = window.MozWebSocket; - } - - //Si le naviguateur ne supporte pas les websockets, on s'arrête là. + } + + //Si le naviguateur ne supporte pas les websockets, on s'arrête là. if(!window.WebSocket) - { + { alert('Votre navigateur ne supporte pas les webSocket!'); return false; } - //Sinon - else - { - //On initialise la socket. - this.socket = new WebSocket(host); - - //Si elle est ouverte, on notifie le Front. - this.socket.onopen = function() - { - console.log('Socket ouverte.'); - } - //Si elle est fermée, on notifie le Front. - this.socket.onclose = function() - { - console.log('Socket fermée.'); - } - //S'il y a un problème dans la connection, on notifie le Front. - this.socket.onerror = function() - { - console.log('Une erreur est survenue dans le module de Communication.'); - } - //Si on reçoit un message. - this.socket.onmessage = function(msg) - { - _this.processMsg(msg); - } + //Sinon + else + { + //On initialise la socket. + this.socket = new WebSocket(host); + + //Si elle est ouverte, on notifie le Front. + this.socket.onopen = function() + { + console.log('Socket ouverte.'); + } + //Si elle est fermée, on notifie le Front. + this.socket.onclose = function() + { + console.log('Socket fermée.'); + } + //S'il y a un problème dans la connection, on notifie le Front. + this.socket.onerror = function() + { + console.log('Une erreur est survenue dans le module de Communication.'); + } + //Si on reçoit un message. + this.socket.onmessage = function(msg) + { + _this.processMsg(msg); + } } } @@ -95,234 +95,234 @@ */ Client.prototype.processMsg = function(msg) { - if(typeof msg === 'undefined' || typeof msg.data === 'undefined') - { - return; - } - - var _this = this; - - - //S'il s'agit d'une string et non d'une instruction pour les pointeurs. - if(msg.data[0] === '2') - { - var instruction = msg.data.substring(2, msg.data.length); - - // if(instruction.indexOf("INCOMING") == -1 && instruction.indexOf('NO-USER') == -1) - // { - this.mosaic.manageControlEvents(instruction); - // } - } - //Sinon si ce sont les coordonnées de la main droite. - // /!\/!\ // - else if(msg.data[0] == '1') - { - var instruction = msg.data.substring(2, msg.data.length); - pt = instruction.split(';'); - var x = Math.abs(parseFloat(pt[0])), y = Math.abs(parseFloat(pt[1])); - // console.log(Math.abs(parseFloat(pt[0])), Math.abs(parseFloat(pt[1]))); - - this.pointerRight = true; - clearTimeout(this.pointerRightTimeout); - - if(!this.mosaic.mouseInteractions && this.mosaic.currentMode != 'NO-USER' && this.mosaic.currentMode.indexOf('INCOMING') == -1) - { - // console.log('pt'); - this.mosaic.refreshPointers(x, y, true); - } - - // /!\ // - if(!this.mosaic.isMainPointerDisplayed) - { - this.mosaic.mainPointerDisplay(true); - this.mosaic.isMainPointerDisplayed = true; - } - - this.pointerRightTimeout = setTimeout(function() - { - // console.log('RELEASE LEFT'); - //Timeout indiquant quand la main gauche part. - _this.pointerRight = false; - - if(_this.mosaic.isMainPointerDisplayed) - { - _this.mosaic.isMainPointerDisplayed = false; - _this.mosaic.mainPointerDisplay(false); - } - - if(_this.mosaic.isSearchByCurvesOn) - { - _this.mosaic.isSearchByCurvesOn = false; - if(_this.mosaic.searchCanvas) - { - _this.mosaic.searchCanvas.onPointerOut(); - - $('#mainPointer').css('background-image', 'url(./img/cursors/pointerC.png)'); - $('#secondPointer').css('background-image', 'url(./img/cursors/pointer2C.png)'); - } - } - //On peut effectuer de nouveau une recherche par courbes. - if(!_this.pointerLeft) - { - _this.mosaic.mustTakeOutHands = false; - } - }, this.timePointers); - } - //Sinon si ce sont les coordonnées de la main gauche. - else if(msg.data[0] == '0') - { - var instruction = msg.data.substring(2, msg.data.length); - pt = instruction.split(';'); - var x = Math.abs(parseFloat(pt[0])), y = Math.abs(parseFloat(pt[1])); - // console.log(Math.abs(parseFloat(pt[0])), Math.abs(parseFloat(pt[1]))); - - this.pointerLeft = true; - clearTimeout(this.pointerLeftTimeout); - - if(!this.mosaic.mouseInteractions && this.mosaic.currentMode != 'NO-USER' && this.mosaic.currentMode.indexOf('INCOMING') == -1) - { - this.mosaic.refreshPointers(x, y, false); - } - - if(!this.mosaic.isSecondPointerDisplayed) - { - this.mosaic.secondPointerDisplay(true); - this.mosaic.isSecondPointerDisplayed = true; - } - - //Timeout indiquant quand la main droite part. - this.pointerLeftTimeout = setTimeout(function() - { - // console.log('RELEASE RIGHT'); - _this.pointerLeft = false; - - if(_this.mosaic.isSecondPointerDisplayed) - { - _this.mosaic.isSecondPointerDisplayed = false; - _this.mosaic.secondPointerDisplay(false); - } - - if(_this.mosaic.isSearchByCurvesOn) - { - _this.mosaic.isSearchByCurvesOn = false; - if(_this.mosaic.searchCanvas) - { - _this.mosaic.searchCanvas.onPointerOut(); - - $('#mainPointer').css('background-image', 'url(./img/cursors/pointerC.png)'); - $('#secondPointer').css('background-image', 'url(./img/cursors/pointer2C.png)'); - } - } - //On peut effectuer de nouveau une recherche par courbes. - if(!_this.pointerRight) - { - _this.mosaic.mustTakeOutHands = false; - } - }, this.timePointers); - } - - if(this.pointerLeft && !this.pointerRight || !this.pointerLeft && this.pointerRight) - { - //On interrompt l'idle des pointeurs. - this.mosaic.pointersIdleAvailable = false; - this.mosaic.removeIdlePointers(); - this.mosaic.areBothPointersHere = false; - } - if(!this.pointerLeft && !this.pointerRight) - { - //On interrompt l'idle des pointeurs. - this.mosaic.pointersIdleAvailable = false; - this.mosaic.removeIdlePointers(); - this.mosaic.areBothPointersHere = false; - - this.mosaic.deselectAllNeighbours(); - this.mosaic.preUnzoom(); - } - - if(this.pointerLeft && this.pointerRight) - { - this.mosaic.areBothPointersHere = true; - this.mosaic.removeCheckForBothPointersHere(); - - //On enlève les requêtes de zoom. - this.mosaic.preUnzoom(); - - if(this.mosaic.currentMode == 'MOSAIC' || this.mosaic.currentMode == 'FILTER' && !this.mosaic.isSearchByCurvesOn) - { - $('#mainPointer').css('background-image', 'url(./img/cursors/pointer.png)'); - $('#secondPointer').css('background-image', 'url(./img/cursors/pointer2.png)'); - } - - //Si on est dans un des modes de recherche et que les mains ont été retirées après la précédente recherche. - if((this.mosaic.currentMode == 'FILTER' || this.mosaic.currentMode == 'SEARCH') && !this.mosaic.mustTakeOutHands) - { - // console.log('ON'); - if(this.mosaic.searchCanvas) - { - var mainPointerX = +$('#mainPointer').position().left + $('#mainPointer').width() / 2; - var mainPointerY = +$('#mainPointer').position().top - this.mosaic.MPTop_margin + $('#mainPointer').height() / 2; - var secondPointerX = +$('#secondPointer').position().left + $('#secondPointer').width() / 2; - var secondPointerY = +$('#secondPointer').position().top - this.mosaic.MPTop_margin + $('#secondPointer').height() / 2; - - if(!this.mosaic.isSearchByCurvesOn) - { - this.mosaic.isSearchByCurvesOn = true; - this.mosaic.searchCanvas.onPointerOut(); - this.mosaic.searchCanvas.onPointerIn(mainPointerX, mainPointerY, secondPointerX, secondPointerY); - this.mosaic.canDrawNextCurve = true; - - this.mosaic.pointersGreen(); - } - else if(this.mosaic.isSearchByCurvesOn) - { - if(this.mosaic.canDrawNextCurve) - { - this.mosaic.canDrawNextCurve = false; - if(Math.abs(mainPointerX - this.mosaic.mainPointerLastX) > 10 || Math.abs(mainPointerY - this.mosaic.mainPointerLastY) > 10 || Math.abs(secondPointerX - this.mosaic.secondPointerLastX) > 10 || Math.abs(secondPointerY - this.mosaic.secondPointerLastY) > 10) - { - this.mosaic.searchCanvas.onPointerMove(mainPointerX, mainPointerY, secondPointerX, secondPointerY); - this.mosaic.pointersGreen(); - } - } - else - { - this.mosaic.nextDrawCurveTimeout = setTimeout(function() - { - _this.mosaic.canDrawNextCurve = true; - }, this.mosaic.config.timeoutNextDrawCurve); - } - } - } - else - { - this.mosaic.startSearch(); - } - } - } - - //Quant on a reçu un message, on vérifie la présence des deux pointeurs. - this.mosaic.checkForBothPointersHere(); - - if(this.mosaic.pointersIdleAvailable) - { - //On effectue une vérification de la position des pointeurs pour l'idle. - this.mosaic.detectIdlePointers(); - } - - //Si le timeout a besoin d'être relancé ou bien que l'affichage de l'aide est disponible. - if(this.mosaic.pointersIdleNeedLaunch || this.mosaic.canNotifyHelp) - { - // console.log('launch idle'); - this.mosaic.launchIdlePointers(); - this.mosaic.pointersIdleNeedLaunch = false; - } - - //Si la détection d'idle n'est pas activée et qu'on est dans un mode permettant l'interaction de l'utilisateur. - if(!this.mosaic.pointersIdleAvailable && this.mosaic.currentMode != "NO-USER" && this.mosaic.currentMode.indexOf("INCOMING") == -1 && this.mosaic.areBothPointersHere) - { - //On enclenche la détection d'idle. - this.mosaic.pointersIdleAvailable = true; - this.mosaic.pointersIdleNeedLaunch = true; - } - // /!\/!\ // + if(typeof msg === 'undefined' || typeof msg.data === 'undefined') + { + return; + } + + var _this = this; + + + //S'il s'agit d'une string et non d'une instruction pour les pointeurs. + if(msg.data[0] === '2') + { + var instruction = msg.data.substring(2, msg.data.length); + + // if(instruction.indexOf("INCOMING") == -1 && instruction.indexOf('NO-USER') == -1) + // { + this.mosaic.manageControlEvents(instruction); + // } + } + //Sinon si ce sont les coordonnées de la main droite. + // /!\/!\ // + else if(msg.data[0] == '1') + { + var instruction = msg.data.substring(2, msg.data.length); + pt = instruction.split(';'); + var x = Math.abs(parseFloat(pt[0])), y = Math.abs(parseFloat(pt[1])); + // console.log(Math.abs(parseFloat(pt[0])), Math.abs(parseFloat(pt[1]))); + + this.pointerRight = true; + clearTimeout(this.pointerRightTimeout); + + if(!this.mosaic.mouseInteractions && this.mosaic.currentMode != 'NO-USER' && this.mosaic.currentMode.indexOf('INCOMING') == -1) + { + // console.log('pt'); + this.mosaic.refreshPointers(x, y, true); + } + + // /!\ // + if(!this.mosaic.isMainPointerDisplayed) + { + this.mosaic.mainPointerDisplay(true); + this.mosaic.isMainPointerDisplayed = true; + } + + this.pointerRightTimeout = setTimeout(function() + { + // console.log('RELEASE LEFT'); + //Timeout indiquant quand la main gauche part. + _this.pointerRight = false; + + if(_this.mosaic.isMainPointerDisplayed) + { + _this.mosaic.isMainPointerDisplayed = false; + _this.mosaic.mainPointerDisplay(false); + } + + if(_this.mosaic.isSearchByCurvesOn) + { + _this.mosaic.isSearchByCurvesOn = false; + if(_this.mosaic.searchCanvas) + { + _this.mosaic.searchCanvas.onPointerOut(); + + $('#mainPointer').css('background-image', 'url(./img/cursors/pointerC.png)'); + $('#secondPointer').css('background-image', 'url(./img/cursors/pointer2C.png)'); + } + } + //On peut effectuer de nouveau une recherche par courbes. + if(!_this.pointerLeft) + { + _this.mosaic.mustTakeOutHands = false; + } + }, this.timePointers); + } + //Sinon si ce sont les coordonnées de la main gauche. + else if(msg.data[0] == '0') + { + var instruction = msg.data.substring(2, msg.data.length); + pt = instruction.split(';'); + var x = Math.abs(parseFloat(pt[0])), y = Math.abs(parseFloat(pt[1])); + // console.log(Math.abs(parseFloat(pt[0])), Math.abs(parseFloat(pt[1]))); + + this.pointerLeft = true; + clearTimeout(this.pointerLeftTimeout); + + if(!this.mosaic.mouseInteractions && this.mosaic.currentMode != 'NO-USER' && this.mosaic.currentMode.indexOf('INCOMING') == -1) + { + this.mosaic.refreshPointers(x, y, false); + } + + if(!this.mosaic.isSecondPointerDisplayed) + { + this.mosaic.secondPointerDisplay(true); + this.mosaic.isSecondPointerDisplayed = true; + } + + //Timeout indiquant quand la main droite part. + this.pointerLeftTimeout = setTimeout(function() + { + // console.log('RELEASE RIGHT'); + _this.pointerLeft = false; + + if(_this.mosaic.isSecondPointerDisplayed) + { + _this.mosaic.isSecondPointerDisplayed = false; + _this.mosaic.secondPointerDisplay(false); + } + + if(_this.mosaic.isSearchByCurvesOn) + { + _this.mosaic.isSearchByCurvesOn = false; + if(_this.mosaic.searchCanvas) + { + _this.mosaic.searchCanvas.onPointerOut(); + + $('#mainPointer').css('background-image', 'url(./img/cursors/pointerC.png)'); + $('#secondPointer').css('background-image', 'url(./img/cursors/pointer2C.png)'); + } + } + //On peut effectuer de nouveau une recherche par courbes. + if(!_this.pointerRight) + { + _this.mosaic.mustTakeOutHands = false; + } + }, this.timePointers); + } + + if(this.pointerLeft && !this.pointerRight || !this.pointerLeft && this.pointerRight) + { + //On interrompt l'idle des pointeurs. + this.mosaic.pointersIdleAvailable = false; + this.mosaic.removeIdlePointers(); + this.mosaic.areBothPointersHere = false; + } + if(!this.pointerLeft && !this.pointerRight) + { + //On interrompt l'idle des pointeurs. + this.mosaic.pointersIdleAvailable = false; + this.mosaic.removeIdlePointers(); + this.mosaic.areBothPointersHere = false; + + this.mosaic.deselectAllNeighbours(); + this.mosaic.preUnzoom(); + } + + if(this.pointerLeft && this.pointerRight) + { + this.mosaic.areBothPointersHere = true; + this.mosaic.removeCheckForBothPointersHere(); + + //On enlève les requêtes de zoom. + this.mosaic.preUnzoom(); + + if(this.mosaic.currentMode == 'MOSAIC' || this.mosaic.currentMode == 'FILTER' && !this.mosaic.isSearchByCurvesOn) + { + $('#mainPointer').css('background-image', 'url(./img/cursors/pointer.png)'); + $('#secondPointer').css('background-image', 'url(./img/cursors/pointer2.png)'); + } + + //Si on est dans un des modes de recherche et que les mains ont été retirées après la précédente recherche. + if((this.mosaic.currentMode == 'FILTER' || this.mosaic.currentMode == 'SEARCH') && !this.mosaic.mustTakeOutHands) + { + // console.log('ON'); + if(this.mosaic.searchCanvas) + { + var mainPointerX = +$('#mainPointer').position().left + $('#mainPointer').width() / 2; + var mainPointerY = +$('#mainPointer').position().top - this.mosaic.MPTop_margin + $('#mainPointer').height() / 2; + var secondPointerX = +$('#secondPointer').position().left + $('#secondPointer').width() / 2; + var secondPointerY = +$('#secondPointer').position().top - this.mosaic.MPTop_margin + $('#secondPointer').height() / 2; + + if(!this.mosaic.isSearchByCurvesOn) + { + this.mosaic.isSearchByCurvesOn = true; + this.mosaic.searchCanvas.onPointerOut(); + this.mosaic.searchCanvas.onPointerIn(mainPointerX, mainPointerY, secondPointerX, secondPointerY); + this.mosaic.canDrawNextCurve = true; + + this.mosaic.pointersGreen(); + } + else if(this.mosaic.isSearchByCurvesOn) + { + if(this.mosaic.canDrawNextCurve) + { + this.mosaic.canDrawNextCurve = false; + if(Math.abs(mainPointerX - this.mosaic.mainPointerLastX) > 10 || Math.abs(mainPointerY - this.mosaic.mainPointerLastY) > 10 || Math.abs(secondPointerX - this.mosaic.secondPointerLastX) > 10 || Math.abs(secondPointerY - this.mosaic.secondPointerLastY) > 10) + { + this.mosaic.searchCanvas.onPointerMove(mainPointerX, mainPointerY, secondPointerX, secondPointerY); + this.mosaic.pointersGreen(); + } + } + else + { + this.mosaic.nextDrawCurveTimeout = setTimeout(function() + { + _this.mosaic.canDrawNextCurve = true; + }, this.mosaic.config.timeoutNextDrawCurve); + } + } + } + else + { + this.mosaic.startSearch(); + } + } + } + + //Quant on a reçu un message, on vérifie la présence des deux pointeurs. + this.mosaic.checkForBothPointersHere(); + + if(this.mosaic.pointersIdleAvailable) + { + //On effectue une vérification de la position des pointeurs pour l'idle. + this.mosaic.detectIdlePointers(); + } + + //Si le timeout a besoin d'être relancé ou bien que l'affichage de l'aide est disponible. + if(this.mosaic.pointersIdleNeedLaunch || this.mosaic.canNotifyHelp) + { + // console.log('launch idle'); + this.mosaic.launchIdlePointers(); + this.mosaic.pointersIdleNeedLaunch = false; + } + + //Si la détection d'idle n'est pas activée et qu'on est dans un mode permettant l'interaction de l'utilisateur. + if(!this.mosaic.pointersIdleAvailable && this.mosaic.currentMode != "NO-USER" && this.mosaic.currentMode.indexOf("INCOMING") == -1 && this.mosaic.areBothPointersHere) + { + //On enclenche la détection d'idle. + this.mosaic.pointersIdleAvailable = true; + this.mosaic.pointersIdleNeedLaunch = true; + } + // /!\/!\ // } \ No newline at end of file diff -r 52277fe2279c -r 9eff85166868 front_idill/src/defaults.js --- a/front_idill/src/defaults.js Wed Aug 08 18:42:01 2012 +0200 +++ b/front_idill/src/defaults.js Thu Aug 16 14:32:19 2012 +0200 @@ -1,72 +1,72 @@ -/* -* This file is part of the TraKERS\Front IDILL package. -* -* (c) IRI