Front IDILL :
spaces in img names removed
touch interactions finished
can't select timeline before player is reading
--- a/front_idill/doc/Documentation - Front IDILL.html Wed Aug 08 18:42:01 2012 +0200
+++ b/front_idill/doc/Documentation - Front IDILL.html Thu Aug 16 14:32:19 2012 +0200
@@ -1,297 +1,297 @@
-<!DOCTYPE html>
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" class="has_sidebar fixed-header earthrise">
- <head>
- <meta content="text/html; charset=UTF-8" http-equiv="content-type" />
- <meta name="description" content="Tutoriel sur le développement et l'utilisation de code Processing utilisant le Middleware TraKERS."/>
- <meta name="keywords" content="TraKERS, TraKERS Processing, TraKERS Front Processing, TraKERS Front, Kinect Processing"/>
- <title>BROWSE BY MOTION - Documentation Front IDILL</title>
- </head>
-
- <body>
- <h2>Sommaire</h2>
-
- <ol type="I">
- <a href="#I"><li>Introduction</li></a>
- <a href="#II"><li>Lancement</li></a>
- <a href="#III"><li>Fonctionnalités</li></a>
- <a href="#IV"><li>Configuration</li></a>
- <a href="#V"><li>Notices à prendre en compte</li></a>
- </ol>
-
- <hr />
-
- <ol type="I" start="1">
- <h3><a name="#I"><li>Introduction</li></a></h3>
- </ol>
-
- <p>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.</p>
-
- <p>Elements requis :
- <ul>
- <li>Google Chrome 20 ou supérieur est nécessaire pour lancer ce prototype.</li>
- <li>WampServer 2 doit être installé.</li>
- <li>Les dossiers Front IDILL et lib doivent être copiés à la racine du dossier www de Wamp (par défaut dans C:\wamp\www).</li>
- </ul>
- </p>
-
- <p>Si vous souhaitez utiliser le prototype en mode d'interaction Kinect :
- <ul>
- <li>Kinect for Xbox 360.</li>
- <li>Kinect SDK 1.5 de Microsoft.</li>
- <li>.NET Framework 4.0.</li>
- </ul>
- </p>
-
- <hr />
-
- <ol type="I" start="2">
- <h3><a name="#II"><li>Lancement</li></a></h3>
- </ol>
-
- <p>
- <ol type="1" start="1">
- <li>Lancer wamp.</li>
- <li>Aller sur Google Chrome à l'adresse : http://localhost/Front%20IDILL</li>
- <li>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.</li>
- </ol>
- </p>
-
- <p>Lancement en mode Kinect (après avoir réglé le paramètre dans la configuration).</p>
-
- <p>
- <ol type="1" start="4">
- <li>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).
- <li>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.</li>
- <li>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.</li>
- <li>Relancez le Front en cliquant dessus et en appuyant sur F5 afin de raffraichir la fenêtre du navigateur.</li>
- </ol>
- </p>
-
- <hr />
-
- <ol type="I" start="3">
- <h3><a name="#III"><li>Fonctionnalités</li></a></h3>
- </ol>
-
- <p>Dans cette partie, on déclinera les fonctionnalités selon le mode d'interaction utilisé (Souris/Kinect).</p>
-
- <u><h3><p>Mode d'interaction souris :</p></h3></u>
-
- <ol type="1" start="1">
- <h3><li>Actions de contrôle de l'interface.</li></h3>
-
- <ol type="A" start="1">
- <h4><li>Sélection de la vidéo dans la mosaïque.</li></h4>
-
- <p>Lorsque vous vous trouvez dans la mosaïque, vous pouvez survoler les images, qui zoomeront légèrement. Un clic sur une image zoomée vous permettra d'accéder à sa vidéo.</p>
- </ol>
-
- <ol type="A" start="2">
- <h4><li>Revenir à la mosaïque.</li></h4>
-
- <p>Il y a deux interactions possibles pour revenir à la mosaïque.</p>
- <ul>
- <li>Le fait de cliquer en dehors de la vidéo centrale.</li>
- <li>Le fait de tirer la molette de la souris vers vous.</li>
- </ul>
- </ol>
-
- <ol type="A" start="3">
- <h4><li>Aller d'une vidéo à une autre.</li></h4>
-
- <p>Dans une vidéo, vous pourrez voir 4 bordures, respectivement en haut, en bas, à droite et à gauche de la vidéo centrale. Il y en a 4, sauf si vous vous trouvez sur une extrémité de la mosaïque.
- Pour passer à une vidéo voisine, il faut 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 :</p>
-
- <ul>
- <li>Cliquer sur cette vidéo.</li>
- <li>Déplacer rapidement le curseur vers la bordure opposée.</li>
- </ul>
- </ol>
- </ol>
-
- <ol type="1" start="2">
- <h3><li>Recherche par courbes.</li></h3>
-
- <p>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.</p>
-
- <ol type="A" start="1">
- <h4><li>Tracé de courbes.</li></h4>
-
- <p>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.<br />Dès que l'utilisateur lâche le bouton, la courbe disparaît.</p>
- </ol>
-
- <ol type="A" start="2">
- <h4><li>Reconnaissance de courbes.</li></h4>
-
- <p>Durant le tracé, il peut arriver 4 choses :</p>
- <ul>
- <li>Le tracé correspond à plusieurs courbes : Leurs macarons sont affichés en haut de la fenêtre.</li>
- <li>Le tracé correspond à une seule courbe : Le macaron de la courbe est affiché en haut de la fenêtre et on effectue une recherche sur les marqueurs correspondants à cette courbe.</li>
- <li>Le tracé correspond à plusieurs courbes, mais le tracé actuel permet de définir une courbe : Si on relâche le bouton de la souris, on valide la courbe qu'on a tracé et on entre dans une recherche.</li>
- <li>Le tracé ne correspond à aucune courbe répertoriée. Un macaron de geste inconnu s'affiche.</li>
- </ul>
- <p>Une recherche par courbes dans la mosaïque résulte en un filtrage. Plus les vidéos sont opaques et plus le nombre de marqueurs trouvés dans celles-ci sont importants.<br />Une recherche dans une vidéo mettra en surbrillance les marqueurs correspondant au type de marqueur recherché.</p>
- <p>Une nouvelle requête de recherche écrase la précédente.</p>
- <p>Si une recherche est effectuée dans la mosaïque, la recherche s'étend à toutes les vidéos contenues.</p>
- <p>A l'inverse, une recherche dans une vidéo n'affecte pas la mosaïque.</p>
- </ol>
-
- <ol type="A" start="3">
- <h4><li>Quitter la recherche.</li></h4>
-
- <p>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.</p>
- </ol>
- </ol>
-
- <u><h3><p>Mode d'interaction Kinect :</p></h3></u>
-
- <p>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.</p>
-
- <ol type="1" start="1">
- <h3><li>Actions de contrôle de l'interface.</li></h3>
-
- <ol type="A" start="1">
- <h4><li>Sélection de la vidéo dans la mosaïque.</li></h4>
-
- <p>Lorsque vous vous trouvez dans la mosaïque, vous pouvez 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.</p>
- </ol>
-
- <ol type="A" start="2">
- <h4><li>Revenir à la mosaïque.</li></h4>
-
- <p>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.</p>
- </ol>
-
- <ol type="A" start="3">
- <h4><li>Aller d'une vidéo à une autre.</li></h4>
-
- <p>Dans une vidéo, vous pourrez voir 4 bordures, respectivement en haut, en bas, à droite et à gauche de la vidéo centrale. Il y en a 4, sauf si vous vous trouvez sur une extrémité de la mosaïque.
- Pour passer à une vidéo voisine, il faut 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</p>
- </ol>
- </ol>
-
- <ol type="1" start="2">
- <h3><li>Recherche par courbes.</li></h3>
-
- <p>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.</p>
-
- <ol type="A" start="1">
- <h4><li>Tracé de courbes.</li></h4>
-
- <p>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.<br />Dès que l'utilisateur enlève les deux mains de la zone de recherche, la courbe disparaît.</p>
- <p>Chaque pointeur génère une courbe. L'analyse de courbes est donc double.</p>
- </ol>
-
- <ol type="A" start="2">
- <h4><li>Reconnaissance de courbes.</li></h4>
-
- <p>Durant le tracé, il peut arriver 4 choses :</p>
- <ul>
- <li>Le tracé correspond à plusieurs courbes : Leurs macarons sont affichés en haut de la fenêtre.</li>
- <li>Le tracé correspond à une seule courbe : Le macaron de la courbe est affiché en haut de la fenêtre et on effectue une recherche sur les marqueurs correspondants à cette courbe.</li>
- <li>Le tracé correspond à plusieurs courbes, mais le tracé actuel permet de définir une courbe : Si on enlève les mains de la zone de recherche, on valide la courbe qu'on a tracé et on entre dans une recherche.</li>
- <li>Le tracé ne correspond à aucune courbe répertoriée. Un macaron de geste inconnu s'affiche.</li>
- </ul>
- <p>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.</p>
- <p>Une recherche par courbes dans la mosaïque résulte en un filtrage. Plus les vidéos sont opaques et plus le nombre de marqueurs trouvés dans celles-ci sont importants.<br />Une recherche dans une vidéo mettra en surbrillance les marqueurs correspondant au type de marqueur recherché.</p>
- <p>Une nouvelle requête de recherche écrase la précédente.</p>
- <p>Si une recherche est effectuée dans la mosaïque, la recherche s'étend à toutes les vidéos contenues.</p>
- <p>A l'inverse, une recherche dans une vidéo n'affecte pas la mosaïque.</p>
- </ol>
-
- <ol type="A" start="3">
- <h4><li>Reconnaissance de gestures.</li></h4>
-
- <p>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) :</p>
- <ul>
- <li>FALL (chute) : S'accroupir les genoux en avant.</li>
- <li>JUMP (saut) : Sauter verticalement sans élan.</li>
- <li>KNEE-UP (levé de genou) : Lever l'un des genoux en l'avancant par rapport au reste du corps.</li>
- <li>BEND (penché) : Se pencher vers l'avant sans plier les jambes.</li>
- </ul>
- </ol>
-
- <ol type="A" start="4">
- <h4><li>Quitter la recherche.</li></h4>
-
- <p>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.</p>
- </ol>
- </ol>
-
- <hr />
-
- <ol type="I" start="4">
- <h3><a name="#IV"><li>Configuration</li></a></h3>
-
- <p>Le Front IDILL possède deux configurations :</p>
- <ul>
- <li>Une configuration par défaut.<br />Elle est placée dans un fichier javascript et qu'il ne vaut mieux pas modifier sous peine d'engendrer des erreurs s'il y a une erreur de saisie.</li>
- <li>Une configuration personnalisable.<br />Elle se situe dans le fichier config.json et est dans le dossier principal du Front IDILL. Il s'agit des paramètres étant chargés au démarrage du Front (ou au redémarrage s'il y a un raffraîchissement de la fenêtre du navigateur). Si un paramètre a une valeur incorrecte, celui-ci prend sa valeur par défaut.</li>
- <p>Voici la liste des différents paramètres du Front IDILL :</p>
- <table border="1">
- <tr><th>Nom du paramètre</th><th>Type</th><th>Valeur par défaut</th><th>Description</th></tr>
- <tr><td>local</td><td>booléen</td><td>true</td><td>Indique si le chargement des métadonnées se fait localement ou en ligne.</td></tr>
- <tr><td>videoConfigFileLocal</td><td>string (path)</td><td>"./player/json/local_videos.json"</td><td>Chemin vers le fichier de chargement des images, vidéos et métadonnées pour un chargement local.</td></tr>
- <tr><td>videoConfigFileOnline</td><td>string (path)</td><td>"./player/json/online_videos.json"</td><td>Chemin vers le fichier de chargement des images, vidéos et métadonnées pour un chargement en ligne.</td></tr>
- <tr><td>mouseInteractions</td><td>booléen</td><td>true</td><td>Spécifie le mode d'interaction (souris/Kinect).</td></tr>
- <tr><td>noUserModeEnabled</td><td>booléen</td><td>true</td><td>Spécifie si on active la phase d'approche de l'utilisateur (de remplissage de la mosaïque en mode d'interaction Kinect).</td></tr>
- <tr><td>kinectMinCoordX</td><td>int (px)</td><td>40</td><td>Borne inférieure en abscisse du champ de liberté des pointeurs de la kinect sur l'écran du Front.</td></tr>
- <tr><td>kinectMinCoordY</td><td>int (px)</td><td>30</td><td>Borne inférieure en ordonnée du champ de liberté des pointeurs de la kinect sur l'écran du Front.</td></tr>
- <tr><td>kinectMaxCoordX</td><td>int (px)</td><td>520</td><td>Borne supérieure en abscisse du champ de liberté des pointeurs de la kinect sur l'écran du Front.</td></tr>
- <tr><td>kinectMaxCoordY</td><td>int (px)</td><td>260</td><td>Borne supérieure en ordonnée du champ de liberté des pointeurs de la kinect sur l'écran du Front.</td></tr>
- <tr><td>imagesByLine</td><td>int</td><td>5</td><td>Longueur de la mosaïque en images.</td></tr>
- <tr><td>imagesToShow</td><td>int</td><td>20</td><td>Nombre d'images affichées dans la mosaïque.</td></tr>
- <tr><td>totalImages</td><td>int</td><td>22</td><td>Nombre d'images disponibles au total.</td></tr>
- <tr><td>timeReloadAfterResize</td><td>int (msec)</td><td>1000</td><td>Temps d'attente avant de recharger la page lorsqu'elle est redimensionnée.</td></tr>
- <tr><td>timePrezoom</td><td>int (msec)</td><td>500</td><td>Temps qu'il faut à une image pour entrer en phase de prézoom (présélection pour le zoom).</td></tr>
- <tr><td>timePreUnzoom</td><td>int (msec)</td><td>200</td><td>Temps qu'il faut à une image pour quitter une phase de prézoom.</td></tr>
- <tr><td>zoomTime</td><td>int (msec)</td><td>500</td><td>Temps qu'il faut pour zoomer sur une image et passer en mode vidéo.</td></tr>
- <tr><td>timeUnzoom</td><td>int (msec)</td><td>400</td><td>Temps qu'il faut pour dézoomer et revenir à la mosaïque.</td></tr>
- <tr><td>timeNeighbourGlowing</td><td>int (msec)</td><td>1000</td><td>Temps qu'il faut à une vidéo voisine en mode vidéo pour être sélectionnée.</td></tr>
- <tr><td>timeNeighbourUnglowing</td><td>int (msec)</td><td>1000</td><td>Temps qu'il faut à une vidéo voisine en mode vidéo pour être désélectionnée.</td></tr>
- <tr><td>timeMovingToNeighbour</td><td>int (msec)</td><td>1000</td><td>Temps qu'il faut pour bouger vers une vidéo voisine.</td></tr>
- <tr><td>timeSearchFade</td><td>int (msec)</td><td>2000</td><td>Temps qu'il faut pour que le canvas de recherche par courbes disparaisse.</td></tr>
- <tr><td>timeNotifyFade</td><td>int (msec)</td><td>2000</td><td>Temps qu'il faut pour que le panneau d'aide disparaisse.</td></tr>
- <tr><td>timeFilterFade</td><td>int (msec)</td><td>2000</td><td>Temps que le filtrage de la mosaïque s'enlève.</td></tr>
- <tr><td>timeANFade</td><td>int (msec)</td><td>500</td><td>Temps qu'il faut pour qu'un voisin additionnel disparaisse (voisin de bord de mosaïque).</td></tr>
- <tr><td>timeShowBigHelp</td><td>int (msec)</td><td>1000</td><td>Temps qu'il faut pour zoomer/dézoomer l'icone d'aide (souris).</td></tr>
- <tr><td>timeoutZoom</td><td>int (msec)</td><td>2000</td><td>Temps qu'il faut pour valider la sélection d'une image pour zoomer (Kinect).</td></tr>
- <tr><td>timeoutUnzoom</td><td>int (msec)</td><td>1000</td><td>Temps qu'il faut avant de bloquer le dézoom quand les pointeurs quittent les voisins opposés (Kinect).</td></tr>
- <tr><td>timeoutMoveToNeighbour</td><td>int (msec)</td><td>250</td><td>Temps qu'il faut avant de bloquer le passage vers un voisin lorsque le pointeur quitte un voisin (Kinect).</td></tr>
- <tr><td>timeoutPointersIdle</td><td>int (msec)</td><td>2000</td><td>Temps qu'il faut pour valider l'immobilité des deux pointeurs pour faire une demande de recherche (Kinect).</td></tr>
- <tr><td>timeoutAreBothPointersHere</td><td>int (msec)</td><td>500</td><td>Temps qu'il faut pour détecter que les deux pointeurs sont là ou non (Kinect).</td></tr>
- <tr><td>timeoutRemoveNotificationByGesture</td><td>int (msec)</td><td>1500</td><td>Temps qu'il faut pour valider la suppression de recherche quand on est sur le macaron de la recherche (Kinect).</td></tr>
- <tr><td>timeoutNotifySwipe</td><td>int (msec)</td><td>1000</td><td>Temps qu'il faut pour être de nouveau capable de faire un swipe après en avoir fait un (Kinect).</td></tr>
- <tr><td>timeoutSelectTL</td><td>int (msec)</td><td>100</td><td>Temps qu'il faut pour sélectionner la timeline quand on a un pointeur ou la souris dessus.</td></tr>
- <tr><td>timeoutSlideTL</td><td>int (msec)</td><td>1000</td><td>Temps qu'il faut avant de pouvoir déplacer le curseur de lecture quand on vient d'entrer dans la timeline.</td></tr>
- <tr><td>timeoutCanNotifyHelp</td><td>int (msec)</td><td>1000</td><td>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).</td></tr>
- <tr><td>timeoutRemoveSpinner</td><td>int (msec)</td><td>1000</td><td>Temps qu'il faut pour faire disparaître la mire d'un pointeur (généralement en même temps que lui) (Kinect).</td></tr>
- <tr><td>timeoutCanNotifyHelp</td><td>int (msec)</td><td>1000</td><td>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).</td></tr>
- <tr><td>timeoutNouser</td><td>int (msec)</td><td>3000</td><td>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).</td></tr>
- <tr><td>timeoutNextDrawCurve</td><td>int (msec)</td><td>500</td><td>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).</td></tr>
- <tr><td>zoomPercentage</td><td>float (entre 0 et 1)</td><td>0.80</td><td>Pourcentage d'agrandissement de l'image initiale pour un zoom.</td></tr>
- <tr><td>prezoomPercentage</td><td>float (entre 0 et 1)</td><td>0.25</td><td>Pourcentage d'agrandissement de l'image initiale pour un prézoom (une sélection qui précède un zoom).</td></tr>
- <tr><td>zoomedMargin</td><td>int (px)</td><td>42</td><td>Epaisseur de la marge qui sépare les images de la mosaïque lorsqu'elle est zoomée.</td></tr>
- <tr><td>host</td><td>string (adresse ip)</td><td>"127.0.0.1"</td><td>Adresse ip sur lequel le serveur du Middleware est hébergé (Kinect).</td></tr>
- <tr><td>port</td><td>int</td><td>8090</td><td>Port sur lequel on peut se connecter au serveur du Middleware (Kinect).</td></tr>
- <tr><td>mouseUpDownDeltaTreshold</td><td>int (px)</td><td>15</td><td>Distance à partir de laquelle le déplacement du pointeur de la souris lorsqu'on a appuyé sur le bouton gauche est considéré non plus comme le début d'un click mais le début d'un tracé de courbe de recherche.</td></tr>
- <tr><td>kinectUpDownDeltaTreshold</td><td>int (px)</td><td>20</td><td>Distance à partir de laquelle le tracé d'un début de courbe est considéré comme un segment dans le mode d'interaction Kinect.</td></tr>
- <tr><td>curveDictionary</td><td>string (path)</td><td>"./dico.json"</td><td>Chemin du dictionnaire de courbes de recherche.</td></tr>
- <tr><td>lang</td><td>string (abréviation)</td><td>""</td><td>Langue utilisée dans le Front (en, fr...). Si elle est vide alors la langue du navigateur est prise.</td></tr>
- <tr><td>helpBorderSize</td><td>int (px)</td><td>5</td><td>Taille de la bordure affichant l'aide dans le mode d'interaction souris.</td></tr>
- </table>
- </ul>
- </ol>
-
- <hr />
-
- <ol type="I" start="5">
- <h3><a name="#V"><li>Notices à prendre en compte</li></a></h3>
-
- <p>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).</p>
- <p>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.</p>
- </ol>
-
- <p>Si vous expérimentez des difficultés ou souhaitez nous soumettre une requête, veuillez consulter le fichier contact.txt à la racine du projet.</p>
- </body>
+<!DOCTYPE html>
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" class="has_sidebar fixed-header earthrise">
+ <head>
+ <meta content="text/html; charset=UTF-8" http-equiv="content-type" />
+ <meta name="description" content="Tutoriel sur le développement et l'utilisation de code Processing utilisant le Middleware TraKERS."/>
+ <meta name="keywords" content="TraKERS, TraKERS Processing, TraKERS Front Processing, TraKERS Front, Kinect Processing"/>
+ <title>BROWSE BY MOTION - Documentation Front IDILL</title>
+ </head>
+
+ <body>
+ <h2>Sommaire</h2>
+
+ <ol type="I">
+ <a href="#I"><li>Introduction</li></a>
+ <a href="#II"><li>Lancement</li></a>
+ <a href="#III"><li>Fonctionnalités</li></a>
+ <a href="#IV"><li>Configuration</li></a>
+ <a href="#V"><li>Notices à prendre en compte</li></a>
+ </ol>
+
+ <hr />
+
+ <ol type="I" start="1">
+ <h3><a name="#I"><li>Introduction</li></a></h3>
+ </ol>
+
+ <p>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.</p>
+
+ <p>Elements requis :
+ <ul>
+ <li>Google Chrome 20 ou supérieur est nécessaire pour lancer ce prototype.</li>
+ <li>WampServer 2 doit être installé.</li>
+ <li>Les dossiers Front IDILL et lib doivent être copiés à la racine du dossier www de Wamp (par défaut dans C:\wamp\www).</li>
+ </ul>
+ </p>
+
+ <p>Si vous souhaitez utiliser le prototype en mode d'interaction Kinect :
+ <ul>
+ <li>Kinect for Xbox 360.</li>
+ <li>Kinect SDK 1.5 de Microsoft.</li>
+ <li>.NET Framework 4.0.</li>
+ </ul>
+ </p>
+
+ <hr />
+
+ <ol type="I" start="2">
+ <h3><a name="#II"><li>Lancement</li></a></h3>
+ </ol>
+
+ <p>
+ <ol type="1" start="1">
+ <li>Lancer wamp.</li>
+ <li>Aller sur Google Chrome à l'adresse : http://localhost/Front%20IDILL</li>
+ <li>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.</li>
+ </ol>
+ </p>
+
+ <p>Lancement en mode Kinect (après avoir réglé le paramètre dans la configuration).</p>
+
+ <p>
+ <ol type="1" start="4">
+ <li>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).
+ <li>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.</li>
+ <li>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.</li>
+ <li>Relancez le Front en cliquant dessus et en appuyant sur F5 afin de raffraichir la fenêtre du navigateur.</li>
+ </ol>
+ </p>
+
+ <hr />
+
+ <ol type="I" start="3">
+ <h3><a name="#III"><li>Fonctionnalités</li></a></h3>
+ </ol>
+
+ <p>Dans cette partie, on déclinera les fonctionnalités selon le mode d'interaction utilisé (Souris/Kinect).</p>
+
+ <u><h3><p>Mode d'interaction souris :</p></h3></u>
+
+ <ol type="1" start="1">
+ <h3><li>Actions de contrôle de l'interface.</li></h3>
+
+ <ol type="A" start="1">
+ <h4><li>Sélection de la vidéo dans la mosaïque.</li></h4>
+
+ <p>Lorsque vous vous trouvez dans la mosaïque, vous pouvez survoler les images, qui zoomeront légèrement. Un clic sur une image zoomée vous permettra d'accéder à sa vidéo.</p>
+ </ol>
+
+ <ol type="A" start="2">
+ <h4><li>Revenir à la mosaïque.</li></h4>
+
+ <p>Il y a deux interactions possibles pour revenir à la mosaïque.</p>
+ <ul>
+ <li>Le fait de cliquer en dehors de la vidéo centrale.</li>
+ <li>Le fait de tirer la molette de la souris vers vous.</li>
+ </ul>
+ </ol>
+
+ <ol type="A" start="3">
+ <h4><li>Aller d'une vidéo à une autre.</li></h4>
+
+ <p>Dans une vidéo, vous pourrez voir 4 bordures, respectivement en haut, en bas, à droite et à gauche de la vidéo centrale. Il y en a 4, sauf si vous vous trouvez sur une extrémité de la mosaïque.
+ Pour passer à une vidéo voisine, il faut 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 :</p>
+
+ <ul>
+ <li>Cliquer sur cette vidéo.</li>
+ <li>Déplacer rapidement le curseur vers la bordure opposée.</li>
+ </ul>
+ </ol>
+ </ol>
+
+ <ol type="1" start="2">
+ <h3><li>Recherche par courbes.</li></h3>
+
+ <p>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.</p>
+
+ <ol type="A" start="1">
+ <h4><li>Tracé de courbes.</li></h4>
+
+ <p>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.<br />Dès que l'utilisateur lâche le bouton, la courbe disparaît.</p>
+ </ol>
+
+ <ol type="A" start="2">
+ <h4><li>Reconnaissance de courbes.</li></h4>
+
+ <p>Durant le tracé, il peut arriver 4 choses :</p>
+ <ul>
+ <li>Le tracé correspond à plusieurs courbes : Leurs macarons sont affichés en haut de la fenêtre.</li>
+ <li>Le tracé correspond à une seule courbe : Le macaron de la courbe est affiché en haut de la fenêtre et on effectue une recherche sur les marqueurs correspondants à cette courbe.</li>
+ <li>Le tracé correspond à plusieurs courbes, mais le tracé actuel permet de définir une courbe : Si on relâche le bouton de la souris, on valide la courbe qu'on a tracé et on entre dans une recherche.</li>
+ <li>Le tracé ne correspond à aucune courbe répertoriée. Un macaron de geste inconnu s'affiche.</li>
+ </ul>
+ <p>Une recherche par courbes dans la mosaïque résulte en un filtrage. Plus les vidéos sont opaques et plus le nombre de marqueurs trouvés dans celles-ci sont importants.<br />Une recherche dans une vidéo mettra en surbrillance les marqueurs correspondant au type de marqueur recherché.</p>
+ <p>Une nouvelle requête de recherche écrase la précédente.</p>
+ <p>Si une recherche est effectuée dans la mosaïque, la recherche s'étend à toutes les vidéos contenues.</p>
+ <p>A l'inverse, une recherche dans une vidéo n'affecte pas la mosaïque.</p>
+ </ol>
+
+ <ol type="A" start="3">
+ <h4><li>Quitter la recherche.</li></h4>
+
+ <p>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.</p>
+ </ol>
+ </ol>
+
+ <u><h3><p>Mode d'interaction Kinect :</p></h3></u>
+
+ <p>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.</p>
+
+ <ol type="1" start="1">
+ <h3><li>Actions de contrôle de l'interface.</li></h3>
+
+ <ol type="A" start="1">
+ <h4><li>Sélection de la vidéo dans la mosaïque.</li></h4>
+
+ <p>Lorsque vous vous trouvez dans la mosaïque, vous pouvez 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.</p>
+ </ol>
+
+ <ol type="A" start="2">
+ <h4><li>Revenir à la mosaïque.</li></h4>
+
+ <p>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.</p>
+ </ol>
+
+ <ol type="A" start="3">
+ <h4><li>Aller d'une vidéo à une autre.</li></h4>
+
+ <p>Dans une vidéo, vous pourrez voir 4 bordures, respectivement en haut, en bas, à droite et à gauche de la vidéo centrale. Il y en a 4, sauf si vous vous trouvez sur une extrémité de la mosaïque.
+ Pour passer à une vidéo voisine, il faut 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</p>
+ </ol>
+ </ol>
+
+ <ol type="1" start="2">
+ <h3><li>Recherche par courbes.</li></h3>
+
+ <p>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.</p>
+
+ <ol type="A" start="1">
+ <h4><li>Tracé de courbes.</li></h4>
+
+ <p>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.<br />Dès que l'utilisateur enlève les deux mains de la zone de recherche, la courbe disparaît.</p>
+ <p>Chaque pointeur génère une courbe. L'analyse de courbes est donc double.</p>
+ </ol>
+
+ <ol type="A" start="2">
+ <h4><li>Reconnaissance de courbes.</li></h4>
+
+ <p>Durant le tracé, il peut arriver 4 choses :</p>
+ <ul>
+ <li>Le tracé correspond à plusieurs courbes : Leurs macarons sont affichés en haut de la fenêtre.</li>
+ <li>Le tracé correspond à une seule courbe : Le macaron de la courbe est affiché en haut de la fenêtre et on effectue une recherche sur les marqueurs correspondants à cette courbe.</li>
+ <li>Le tracé correspond à plusieurs courbes, mais le tracé actuel permet de définir une courbe : Si on enlève les mains de la zone de recherche, on valide la courbe qu'on a tracé et on entre dans une recherche.</li>
+ <li>Le tracé ne correspond à aucune courbe répertoriée. Un macaron de geste inconnu s'affiche.</li>
+ </ul>
+ <p>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.</p>
+ <p>Une recherche par courbes dans la mosaïque résulte en un filtrage. Plus les vidéos sont opaques et plus le nombre de marqueurs trouvés dans celles-ci sont importants.<br />Une recherche dans une vidéo mettra en surbrillance les marqueurs correspondant au type de marqueur recherché.</p>
+ <p>Une nouvelle requête de recherche écrase la précédente.</p>
+ <p>Si une recherche est effectuée dans la mosaïque, la recherche s'étend à toutes les vidéos contenues.</p>
+ <p>A l'inverse, une recherche dans une vidéo n'affecte pas la mosaïque.</p>
+ </ol>
+
+ <ol type="A" start="3">
+ <h4><li>Reconnaissance de gestures.</li></h4>
+
+ <p>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) :</p>
+ <ul>
+ <li>FALL (chute) : S'accroupir les genoux en avant.</li>
+ <li>JUMP (saut) : Sauter verticalement sans élan.</li>
+ <li>KNEE-UP (levé de genou) : Lever l'un des genoux en l'avancant par rapport au reste du corps.</li>
+ <li>BEND (penché) : Se pencher vers l'avant sans plier les jambes.</li>
+ </ul>
+ </ol>
+
+ <ol type="A" start="4">
+ <h4><li>Quitter la recherche.</li></h4>
+
+ <p>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.</p>
+ </ol>
+ </ol>
+
+ <hr />
+
+ <ol type="I" start="4">
+ <h3><a name="#IV"><li>Configuration</li></a></h3>
+
+ <p>Le Front IDILL possède deux configurations :</p>
+ <ul>
+ <li>Une configuration par défaut.<br />Elle est placée dans un fichier javascript et qu'il ne vaut mieux pas modifier sous peine d'engendrer des erreurs s'il y a une erreur de saisie.</li>
+ <li>Une configuration personnalisable.<br />Elle se situe dans le fichier config.json et est dans le dossier principal du Front IDILL. Il s'agit des paramètres étant chargés au démarrage du Front (ou au redémarrage s'il y a un raffraîchissement de la fenêtre du navigateur). Si un paramètre a une valeur incorrecte, celui-ci prend sa valeur par défaut.</li>
+ <p>Voici la liste des différents paramètres du Front IDILL :</p>
+ <table border="1">
+ <tr><th>Nom du paramètre</th><th>Type</th><th>Valeur par défaut</th><th>Description</th></tr>
+ <tr><td>local</td><td>booléen</td><td>true</td><td>Indique si le chargement des métadonnées se fait localement ou en ligne.</td></tr>
+ <tr><td>videoConfigFileLocal</td><td>string (path)</td><td>"./player/json/local_videos.json"</td><td>Chemin vers le fichier de chargement des images, vidéos et métadonnées pour un chargement local.</td></tr>
+ <tr><td>videoConfigFileOnline</td><td>string (path)</td><td>"./player/json/online_videos.json"</td><td>Chemin vers le fichier de chargement des images, vidéos et métadonnées pour un chargement en ligne.</td></tr>
+ <tr><td>mouseInteractions</td><td>booléen</td><td>true</td><td>Spécifie le mode d'interaction (souris/Kinect).</td></tr>
+ <tr><td>noUserModeEnabled</td><td>booléen</td><td>true</td><td>Spécifie si on active la phase d'approche de l'utilisateur (de remplissage de la mosaïque en mode d'interaction Kinect).</td></tr>
+ <tr><td>kinectMinCoordX</td><td>int (px)</td><td>40</td><td>Borne inférieure en abscisse du champ de liberté des pointeurs de la kinect sur l'écran du Front.</td></tr>
+ <tr><td>kinectMinCoordY</td><td>int (px)</td><td>30</td><td>Borne inférieure en ordonnée du champ de liberté des pointeurs de la kinect sur l'écran du Front.</td></tr>
+ <tr><td>kinectMaxCoordX</td><td>int (px)</td><td>520</td><td>Borne supérieure en abscisse du champ de liberté des pointeurs de la kinect sur l'écran du Front.</td></tr>
+ <tr><td>kinectMaxCoordY</td><td>int (px)</td><td>260</td><td>Borne supérieure en ordonnée du champ de liberté des pointeurs de la kinect sur l'écran du Front.</td></tr>
+ <tr><td>imagesByLine</td><td>int</td><td>5</td><td>Longueur de la mosaïque en images.</td></tr>
+ <tr><td>imagesToShow</td><td>int</td><td>20</td><td>Nombre d'images affichées dans la mosaïque.</td></tr>
+ <tr><td>totalImages</td><td>int</td><td>22</td><td>Nombre d'images disponibles au total.</td></tr>
+ <tr><td>timeReloadAfterResize</td><td>int (msec)</td><td>1000</td><td>Temps d'attente avant de recharger la page lorsqu'elle est redimensionnée.</td></tr>
+ <tr><td>timePrezoom</td><td>int (msec)</td><td>500</td><td>Temps qu'il faut à une image pour entrer en phase de prézoom (présélection pour le zoom).</td></tr>
+ <tr><td>timePreUnzoom</td><td>int (msec)</td><td>200</td><td>Temps qu'il faut à une image pour quitter une phase de prézoom.</td></tr>
+ <tr><td>zoomTime</td><td>int (msec)</td><td>500</td><td>Temps qu'il faut pour zoomer sur une image et passer en mode vidéo.</td></tr>
+ <tr><td>timeUnzoom</td><td>int (msec)</td><td>400</td><td>Temps qu'il faut pour dézoomer et revenir à la mosaïque.</td></tr>
+ <tr><td>timeNeighbourGlowing</td><td>int (msec)</td><td>1000</td><td>Temps qu'il faut à une vidéo voisine en mode vidéo pour être sélectionnée.</td></tr>
+ <tr><td>timeNeighbourUnglowing</td><td>int (msec)</td><td>1000</td><td>Temps qu'il faut à une vidéo voisine en mode vidéo pour être désélectionnée.</td></tr>
+ <tr><td>timeMovingToNeighbour</td><td>int (msec)</td><td>1000</td><td>Temps qu'il faut pour bouger vers une vidéo voisine.</td></tr>
+ <tr><td>timeSearchFade</td><td>int (msec)</td><td>2000</td><td>Temps qu'il faut pour que le canvas de recherche par courbes disparaisse.</td></tr>
+ <tr><td>timeNotifyFade</td><td>int (msec)</td><td>2000</td><td>Temps qu'il faut pour que le panneau d'aide disparaisse.</td></tr>
+ <tr><td>timeFilterFade</td><td>int (msec)</td><td>2000</td><td>Temps que le filtrage de la mosaïque s'enlève.</td></tr>
+ <tr><td>timeANFade</td><td>int (msec)</td><td>500</td><td>Temps qu'il faut pour qu'un voisin additionnel disparaisse (voisin de bord de mosaïque).</td></tr>
+ <tr><td>timeShowBigHelp</td><td>int (msec)</td><td>1000</td><td>Temps qu'il faut pour zoomer/dézoomer l'icone d'aide (souris).</td></tr>
+ <tr><td>timeoutZoom</td><td>int (msec)</td><td>2000</td><td>Temps qu'il faut pour valider la sélection d'une image pour zoomer (Kinect).</td></tr>
+ <tr><td>timeoutUnzoom</td><td>int (msec)</td><td>1000</td><td>Temps qu'il faut avant de bloquer le dézoom quand les pointeurs quittent les voisins opposés (Kinect).</td></tr>
+ <tr><td>timeoutMoveToNeighbour</td><td>int (msec)</td><td>250</td><td>Temps qu'il faut avant de bloquer le passage vers un voisin lorsque le pointeur quitte un voisin (Kinect).</td></tr>
+ <tr><td>timeoutPointersIdle</td><td>int (msec)</td><td>2000</td><td>Temps qu'il faut pour valider l'immobilité des deux pointeurs pour faire une demande de recherche (Kinect).</td></tr>
+ <tr><td>timeoutAreBothPointersHere</td><td>int (msec)</td><td>500</td><td>Temps qu'il faut pour détecter que les deux pointeurs sont là ou non (Kinect).</td></tr>
+ <tr><td>timeoutRemoveNotificationByGesture</td><td>int (msec)</td><td>1500</td><td>Temps qu'il faut pour valider la suppression de recherche quand on est sur le macaron de la recherche (Kinect).</td></tr>
+ <tr><td>timeoutNotifySwipe</td><td>int (msec)</td><td>1000</td><td>Temps qu'il faut pour être de nouveau capable de faire un swipe après en avoir fait un (Kinect).</td></tr>
+ <tr><td>timeoutSelectTL</td><td>int (msec)</td><td>100</td><td>Temps qu'il faut pour sélectionner la timeline quand on a un pointeur ou la souris dessus.</td></tr>
+ <tr><td>timeoutSlideTL</td><td>int (msec)</td><td>1000</td><td>Temps qu'il faut avant de pouvoir déplacer le curseur de lecture quand on vient d'entrer dans la timeline.</td></tr>
+ <tr><td>timeoutCanNotifyHelp</td><td>int (msec)</td><td>1000</td><td>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).</td></tr>
+ <tr><td>timeoutRemoveSpinner</td><td>int (msec)</td><td>1000</td><td>Temps qu'il faut pour faire disparaître la mire d'un pointeur (généralement en même temps que lui) (Kinect).</td></tr>
+ <tr><td>timeoutCanNotifyHelp</td><td>int (msec)</td><td>1000</td><td>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).</td></tr>
+ <tr><td>timeoutNouser</td><td>int (msec)</td><td>3000</td><td>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).</td></tr>
+ <tr><td>timeoutNextDrawCurve</td><td>int (msec)</td><td>500</td><td>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).</td></tr>
+ <tr><td>zoomPercentage</td><td>float (entre 0 et 1)</td><td>0.80</td><td>Pourcentage d'agrandissement de l'image initiale pour un zoom.</td></tr>
+ <tr><td>prezoomPercentage</td><td>float (entre 0 et 1)</td><td>0.25</td><td>Pourcentage d'agrandissement de l'image initiale pour un prézoom (une sélection qui précède un zoom).</td></tr>
+ <tr><td>zoomedMargin</td><td>int (px)</td><td>42</td><td>Epaisseur de la marge qui sépare les images de la mosaïque lorsqu'elle est zoomée.</td></tr>
+ <tr><td>host</td><td>string (adresse ip)</td><td>"127.0.0.1"</td><td>Adresse ip sur lequel le serveur du Middleware est hébergé (Kinect).</td></tr>
+ <tr><td>port</td><td>int</td><td>8090</td><td>Port sur lequel on peut se connecter au serveur du Middleware (Kinect).</td></tr>
+ <tr><td>mouseUpDownDeltaTreshold</td><td>int (px)</td><td>15</td><td>Distance à partir de laquelle le déplacement du pointeur de la souris lorsqu'on a appuyé sur le bouton gauche est considéré non plus comme le début d'un click mais le début d'un tracé de courbe de recherche.</td></tr>
+ <tr><td>kinectUpDownDeltaTreshold</td><td>int (px)</td><td>20</td><td>Distance à partir de laquelle le tracé d'un début de courbe est considéré comme un segment dans le mode d'interaction Kinect.</td></tr>
+ <tr><td>curveDictionary</td><td>string (path)</td><td>"./dico.json"</td><td>Chemin du dictionnaire de courbes de recherche.</td></tr>
+ <tr><td>lang</td><td>string (abréviation)</td><td>""</td><td>Langue utilisée dans le Front (en, fr...). Si elle est vide alors la langue du navigateur est prise.</td></tr>
+ <tr><td>helpBorderSize</td><td>int (px)</td><td>5</td><td>Taille de la bordure affichant l'aide dans le mode d'interaction souris.</td></tr>
+ </table>
+ </ul>
+ </ol>
+
+ <hr />
+
+ <ol type="I" start="5">
+ <h3><a name="#V"><li>Notices à prendre en compte</li></a></h3>
+
+ <p>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).</p>
+ <p>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.</p>
+ </ol>
+
+ <p>Si vous expérimentez des difficultés ou souhaitez nous soumettre une requête, veuillez consulter le fichier contact.txt à la racine du projet.</p>
+ </body>
</html>
\ No newline at end of file
--- 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
--- 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 <http://www.iri.centrepompidou.fr/>
-*
-* For the full copyright and license information, please view the LICENSE
-* file that was distributed with this source code.
-*/
-
-/*
- * Projet : TraKERS
- * Module : Front IDILL
- * Fichier : defaults.js
- *
- * Auteur : alexandre.bastien@iri.centrepompidou.fr
- *
- * Fonctionnalités : Ce fichier contient la configuration par défaut du Front IDILL.
- */
-
- var default_parameters = {
- local : true,
- mouseInteractions : true,
- noUserModeEnabled : true,
- kinectMinCoordX : 40,
- kinectMinCoordY : 30,
- kinectMaxCoordX : 520,
- kinectMaxCoordY : 260,
- videoConfigFileLocal : "./player/json/local_videos.json",
- videoConfigFileOnline : "./player/json/online_videos.json",
- timeReloadAfterResize : 1000,
- imagesByLine : 5,
- imagesToShow : 20,
- totalImages : 23,
- timePrezoom : 500,
- timePreUnzoom : 200,
- zoomTime : 500,
- timeUnzoom : 400,
- timeNeighbourGlowing : 1000,
- timeNeighbourUnglowing : 1000,
- timeMovingToNeighbour : 1000,
- timeSearchFade : 2000,
- timeNotifyFade : 2000,
- timeFilterFade : 2000,
- timeANFade : 500,
- timeFilling : 500,
- timeShowBigHelp : 1000,
- timeoutZoom : 2000,
- timeoutUnzoom : 1000,
- timeoutMoveToNeighbour : 250,
- timeoutPointersIdle : 2000,
- timeoutAreBothPointersHere : 500,
- timeoutRemoveNotificationByGesture : 1500,
- timeoutNotifySwipe : 1000,
- timeoutSelectTL : 100,
- timeoutSlideTL : 1000,
- timeoutCanNotifyHelp : 1000,
- timeoutRemoveSpinner : 1000,
- timeoutNouser : 3000,
- timeoutNexrDrawCurve : 500,
- zoomPercentage : 0.80,
- prezoomPercentage : 0.25,
- zoomedMargin : 42,
- host : '127.0.0.1',
- port : '8080',
- touchUpDownDeltaTreshold : 100,
- mouseUpDownDeltaTreshold : 15,
- kinectUpDownDeltaTreshold : 100,
- curveDictionaryMI : './dicoMI.json',
- curveDictionaryKI : './dicoKI.json',
- lang : navigator.language,
- langs : ["en", "fr"]
+/*
+* This file is part of the TraKERS\Front IDILL package.
+*
+* (c) IRI <http://www.iri.centrepompidou.fr/>
+*
+* For the full copyright and license information, please view the LICENSE
+* file that was distributed with this source code.
+*/
+
+/*
+ * Projet : TraKERS
+ * Module : Front IDILL
+ * Fichier : defaults.js
+ *
+ * Auteur : alexandre.bastien@iri.centrepompidou.fr
+ *
+ * Fonctionnalités : Ce fichier contient la configuration par défaut du Front IDILL.
+ */
+
+ var default_parameters = {
+ local : true,
+ mouseInteractions : true,
+ noUserModeEnabled : true,
+ kinectMinCoordX : 40,
+ kinectMinCoordY : 30,
+ kinectMaxCoordX : 520,
+ kinectMaxCoordY : 260,
+ videoConfigFileLocal : "./player/json/local_videos.json",
+ videoConfigFileOnline : "./player/json/online_videos.json",
+ timeReloadAfterResize : 1000,
+ imagesByLine : 5,
+ imagesToShow : 20,
+ totalImages : 23,
+ timePrezoom : 500,
+ timePreUnzoom : 200,
+ zoomTime : 500,
+ timeUnzoom : 400,
+ timeNeighbourGlowing : 1000,
+ timeNeighbourUnglowing : 1000,
+ timeMovingToNeighbour : 1000,
+ timeSearchFade : 2000,
+ timeNotifyFade : 2000,
+ timeFilterFade : 2000,
+ timeANFade : 500,
+ timeFilling : 500,
+ timeShowBigHelp : 1000,
+ timeoutZoom : 2000,
+ timeoutUnzoom : 1000,
+ timeoutMoveToNeighbour : 250,
+ timeoutPointersIdle : 2000,
+ timeoutAreBothPointersHere : 500,
+ timeoutRemoveNotificationByGesture : 1500,
+ timeoutNotifySwipe : 1000,
+ timeoutSelectTL : 100,
+ timeoutSlideTL : 1000,
+ timeoutCanNotifyHelp : 1000,
+ timeoutRemoveSpinner : 1000,
+ timeoutNouser : 3000,
+ timeoutNexrDrawCurve : 500,
+ zoomPercentage : 0.80,
+ prezoomPercentage : 0.25,
+ zoomedMargin : 42,
+ host : '127.0.0.1',
+ port : '8080',
+ touchUpDownDeltaTreshold : 100,
+ mouseUpDownDeltaTreshold : 15,
+ kinectUpDownDeltaTreshold : 100,
+ curveDictionaryMI : './dicoMI.json',
+ curveDictionaryKI : './dicoKI.json',
+ lang : navigator.language,
+ langs : ["en", "fr"]
}
\ No newline at end of file
--- a/front_idill/src/dicoKI.json Wed Aug 08 18:42:01 2012 +0200
+++ b/front_idill/src/dicoKI.json Thu Aug 16 14:32:19 2012 +0200
@@ -34,9 +34,9 @@
"name":"screw",
"codes":["D1D0D5D4D3:D4D5D0D1D2"]
},
- {
- "name":"arc",
- "codes":["D4D5D0:D1D0D5", "D5D0D1:D0D5D4"]
- }
- ]
+ {
+ "name":"arc",
+ "codes":["D4D5D0:D1D0D5", "D5D0D1:D0D5D4"]
+ }
+ ]
}
\ No newline at end of file
--- a/front_idill/src/dicoMI.json Wed Aug 08 18:42:01 2012 +0200
+++ b/front_idill/src/dicoMI.json Thu Aug 16 14:32:19 2012 +0200
@@ -50,9 +50,9 @@
"name":"screw",
"codes":["D4D5D0D1D2D3D4D1D2", "D4D5D0D1D2D0D1D2"]
},
- {
- "name":"arc",
- "codes":["D0"]
- }
+ {
+ "name":"arc",
+ "codes":["D0"]
+ }
]
}
\ No newline at end of file
Binary file front_idill/src/img/play_button.png has changed
--- a/front_idill/src/index.html Wed Aug 08 18:42:01 2012 +0200
+++ b/front_idill/src/index.html Thu Aug 16 14:32:19 2012 +0200
@@ -35,80 +35,80 @@
<!-- Scripts principaux. -->
<script type="text/javascript">
function loadMenu(textElements)
- {
- //Si on est sur une tablette, on passe directement dans le mode d'interaction tablette.
- if('ontouchstart' in document.documentElement)
- {
- window.location.replace('./index_souris.html');
- }
-
- var form = "<div id='choice'><p id='caution'>" + textElements.caution + "</p><input id='MI' type='button' /><br ><input id='KI' type='button' /></div>";
-
- $('body').css({
- 'background-image': 'url("./img/background.png")',
- 'background-repeat': 'repeat'
- });
- $('body').append(form);
-
- $('#caution').css(
- {
- color: '#FFF',
- 'font-size': '20px'
- });
- $('#MI').attr('value', textElements.mouse);
- $('#MI').css(
- {
- 'padding': '30px',
- 'font-size': '20px'
-
- }).click(function()
- {
- window.location.replace('./index_souris.html');
- });
- $('#KI').attr('value', textElements.kinect);
- $('#KI').css(
- {
- 'padding': '30px',
- 'font-size': '20px'
- }).click(function()
- {
- window.location.replace('./index_kinect.html');
- });
-
- $('#choice').css(
- {
- position: 'absolute',
- width: '60%'
- });
- $('#choice').css(
- {
- left: ($(window).width() - $('#choice').width()) / 2,
- 'text-align': 'center',
- top: ($(window).height() - $('#choice').height()) / 2
- });
- }
-
+ {
+ //Si on est sur une tablette, on passe directement dans le mode d'interaction tablette.
+ if('ontouchstart' in document.documentElement)
+ {
+ window.location.replace('./index_souris.html');
+ }
+
+ var form = "<div id='choice'><p id='caution'>" + textElements.caution + "</p><input id='MI' type='button' /><br ><input id='KI' type='button' /></div>";
+
+ $('body').css({
+ 'background-image': 'url("./img/background.png")',
+ 'background-repeat': 'repeat'
+ });
+ $('body').append(form);
+
+ $('#caution').css(
+ {
+ color: '#FFF',
+ 'font-size': '20px'
+ });
+ $('#MI').attr('value', textElements.mouse);
+ $('#MI').css(
+ {
+ 'padding': '30px',
+ 'font-size': '20px'
+
+ }).click(function()
+ {
+ window.location.replace('./index_souris.html');
+ });
+ $('#KI').attr('value', textElements.kinect);
+ $('#KI').css(
+ {
+ 'padding': '30px',
+ 'font-size': '20px'
+ }).click(function()
+ {
+ window.location.replace('./index_kinect.html');
+ });
+
+ $('#choice').css(
+ {
+ position: 'absolute',
+ width: '60%'
+ });
+ $('#choice').css(
+ {
+ left: ($(window).width() - $('#choice').width()) / 2,
+ 'text-align': 'center',
+ top: ($(window).height() - $('#choice').height()) / 2
+ });
+ }
+
//Si la page a chargé, on charge le menu de sélection de mode.
$(document).ready(function ()
{
- //Langues gérées.
- var langs = ["fr", "en"];
- var lang = navigator.language;
-
- //Si la langue n'est pas gérée, on met l'anglais pas défaut.
- if(langs.indexOf(lang) == -1)
- {
- lang = "en";
- }
-
- var path = 'lang/' + lang + '.json';
- var textElements;
- $.getJSON(path, function(data)
- {
- textElements = data.choice;
- console.log(textElements);
- loadMenu(textElements);
- });
+ //Langues gérées.
+ var langs = ["fr", "en"];
+ var lang = navigator.language;
+
+ //Si la langue n'est pas gérée, on met l'anglais pas défaut.
+ if(langs.indexOf(lang) == -1)
+ {
+ lang = "en";
+ }
+
+ var path = 'lang/' + lang + '.json';
+ var textElements;
+ $.getJSON(path, function(data)
+ {
+ textElements = data.choice;
+ console.log(textElements);
+ loadMenu(textElements);
+ });
});
</script>
</body>
--- a/front_idill/src/index_kinect.html Wed Aug 08 18:42:01 2012 +0200
+++ b/front_idill/src/index_kinect.html Thu Aug 16 14:32:19 2012 +0200
@@ -50,14 +50,11 @@
</head>
<body>
- <!-- /!\ ATTENTION : Si vous souhaitez modifier la configuration, veuillez modifier les valeurs de config_kinect.json situé à la racine du dossier Front IDILL. /!\ -->
-
+ <!-- /!\ ATTENTION : Si vous souhaitez modifier la configuration, veuillez modifier les valeurs de config_kinect.json situé à la racine du dossier Front IDILL. /!\ -->
+
<!-- Ce div stocke la mosaïque. -->
<div id="mainPanel"></div>
- <!-- SET AN EMPTY DIV TO BE POPULATED WITH CONTENT VIA JQUERY -->
- <div class="test" style="color: #FFFFFF"></div>
-
<!-- Scripts principaux. -->
<script type="text/javascript">
var mos;
--- a/front_idill/src/index_souris.html Wed Aug 08 18:42:01 2012 +0200
+++ b/front_idill/src/index_souris.html Thu Aug 16 14:32:19 2012 +0200
@@ -25,7 +25,7 @@
<!-- On inclut les styles et les scripts utilisés. -->
<title>IDILL - Mode d'interaction souris</title>
<meta charset="UTF-8" />
- <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<link rel="stylesheet" type="text/css" href="./mosaic/css/reset.css" />
<link rel="stylesheet/less" type="text/css" href="./mosaic/css/mosaic.less" />
<script type="text/javascript" src="../lib/less-1.3.0.min.js"></script>
@@ -33,7 +33,7 @@
<script type="text/javascript" src="../lib/jquery.min.js"></script>
<script type="text/javascript" src="../lib/jquery-ui.min.js"></script>
<script type="text/javascript" src="../lib/jquery.mousewheel-2.0.0.min.js"></script>
- <script type="text/javascript" src="../lib/cordova-2.0.0.js"></script>
+ <script type="text/javascript" src="../lib/cordova-2.0.0.js"></script>
<script type="text/javascript" src="./defaults.js"></script>
<script type="text/javascript" src="./mosaic/js/mosaic.js"></script>
<script type="text/javascript" src="./mosaic/js/mouseInteractions.js"></script>
@@ -53,35 +53,13 @@
</head>
<body>
- <!-- /!\ ATTENTION : Si vous souhaitez modifier la configuration, veuillez modifier les valeurs de config_souris.json situé à la racine du dossier Front IDILL. /!\ -->
-
+ <!-- /!\ ATTENTION : Si vous souhaitez modifier la configuration, veuillez modifier les valeurs de config_souris.json situé à la racine du dossier Front IDILL. /!\ -->
+
<!-- Ce div stocke la mosaïque. -->
<div id="mainPanel"></div>
- <!-- SET AN EMPTY DIV TO BE POPULATED WITH CONTENT VIA JQUERY -->
- <div class="test" style="color: #FFFFFF"></div>
-
<!-- Scripts principaux. -->
<script type="text/javascript">
- function aa(w, h, l, t)
- {
- if($('#a').length == 0)
- {
- var a = '<div id="a"></div>';
- $('body').append(a);
- $('#a').css(
- {
- position: 'absolute',
- 'background-color': '#00F',
- width: w,
- height: h,
- left: l,
- top: t,
- 'z-index': 10000
- });
- }
- }
-
var mos;
//Si la page a chargé, on raffraichit la mosaïque.
$(document).ready(function ()
--- a/front_idill/src/mosaic/css/mosaic.less Wed Aug 08 18:42:01 2012 +0200
+++ b/front_idill/src/mosaic/css/mosaic.less Thu Aug 16 14:32:19 2012 +0200
@@ -194,7 +194,7 @@
background-size: 200px 200px;
opacity: 0;
margin: 15px;
- z-index: 400;
+ z-index: 600;
text-align: center;
font-family: "DINMedium";
font-weight:10;
@@ -217,7 +217,7 @@
background-size: 200px 200px;
opacity: 0;
margin: 15px;
- z-index: 400;
+ z-index: 600;
text-align: center;
font-family: "DINMedium";
font-weight:10;
@@ -240,7 +240,7 @@
background-size: 100px 100px;
opacity: 0;
margin: 15px;
- z-index: 400;
+ z-index: 600;
}
/*
--- a/front_idill/src/mosaic/js/mosaic.js Wed Aug 08 18:42:01 2012 +0200
+++ b/front_idill/src/mosaic/js/mosaic.js Thu Aug 16 14:32:19 2012 +0200
@@ -203,6 +203,8 @@
this.isHelpIconZooming = false;
//Indique à l'utilisateur s'il doit retirer ses mains pour refaire une recherche par courbes.
this.mustTakeOutHands = false;
+ //Indique qu'une vidéo est en lecture.
+ this.isVideoReading = false;
//Indique si on est sur une tablette.
this.isTablet = ('ontouchstart' in document.documentElement);
@@ -981,12 +983,6 @@
{
var _this = this;
- //Si on est sur une tablette, on affiche les controls.
- if(this.isTablet)
- {
- $('video').attr('controls', 'controls');
- }
-
if(this.currentMode == 'NO-USER')
{
//On peut s'approcher de la kinect.
@@ -996,7 +992,8 @@
//Lorsque le player est en pause (par exemple lorsque le curseur arrive à la fin de la timeline).
if(this.player.popcorn)
{
- this.player.popcorn.listen('pause', function()
+ // this.player.popcorn.listen('pause', function()
+ this.player.popcorn.listen('ended', function()
{
//Si la pause est naturelle (fin de la timeline, dézoom, déplacement vers un voisin).
if(!_this.userPaused)
@@ -1024,6 +1021,12 @@
{
_this.onMarkersReady();
});
+
+ //On indique à la mosaïque qu'on est en train de lire.
+ this.player.popcorn.on("timeupdate", function()
+ {
+ _this.isVideoReading = true;
+ })
}
}
@@ -1108,6 +1111,30 @@
format: 'ldt'
};
+ var loadedWidgets;
+
+ if(this.isTablet)
+ {
+ loadedWidgets =
+ [
+ {
+ type: "Timeline"
+ },
+ {
+ type: "TabletPlayButton"
+ }
+ ];
+ }
+ else
+ {
+ loadedWidgets =
+ [
+ {
+ type: "Timeline"
+ }
+ ];
+ }
+
var _config = {
gui: {
zoomTop: zoomTop - this.marginWidth*2,
@@ -1119,11 +1146,7 @@
metadata: _metadata
},
css:'./player/metadataplayer/LdtPlayer-core.css',
- widgets: [
- {
- type: "Timeline"
- }
- ]
+ widgets: loadedWidgets
},
player:{
type: 'html5', // player type
@@ -1133,7 +1156,8 @@
height: newSnHeight,
width: newSnWidth,
autostart: true
- }
+ },
+ isTablet: this.isTablet
};
//On positionne le player.
--- a/front_idill/src/mosaic/js/mouseInteractions.js Wed Aug 08 18:42:01 2012 +0200
+++ b/front_idill/src/mosaic/js/mouseInteractions.js Thu Aug 16 14:32:19 2012 +0200
@@ -85,7 +85,8 @@
//Si on est en mode de tracé de courbes, on met à jour la courbe.
if(this.isSearchByCurvesOn)
{
- this.searchCanvas.onPointerMove(this.mousePosX, this.mousePosY - this.MPTop_margin, null, null);
+ // this.searchCanvas.onPointerMove(this.mousePosX, this.mousePosY - this.MPTop_margin, null, null);
+ this.searchCanvas.onPointerMove(this.mousePosX, this.mousePosY, null, null);
}
//On met à jour l'ancienne position de la souris si elle est nulle.
--- a/front_idill/src/mosaic/js/neighbours.js Wed Aug 08 18:42:01 2012 +0200
+++ b/front_idill/src/mosaic/js/neighbours.js Thu Aug 16 14:32:19 2012 +0200
@@ -172,11 +172,16 @@
Mosaic.prototype.selectNeighbour = function(neighbour, pointer)
{
//Si on est en train de se déplacer vers un voisin ou dézoomer ou si l'aide est affichée, on part.
- if(this.currentlyMoving || this.currentlyUnzooming || this.helpDisplayed)
+ if(this.currentlyMoving || this.currentlyUnzooming || this.helpDisplayed || this.isSearchByCurvesOn)
{
return;
}
+ if(this.config.mouseInteractions)
+ {
+ this.canMoveToNeighbour = true;
+ }
+
//Si on est sur une notification de gesture de recherche.
if(this.gestureDelRequested)
{
@@ -352,7 +357,14 @@
var _this = this;
//On ne peut plus se déplacer vers les voisins.
- this.canMoveToNeighbour = true;
+ if(this.config.mouseInteractions)
+ {
+ this.canMoveToNeighbour = false;
+ }
+ else
+ {
+ this.canMoveToNeighbour = true;
+ }
//On récupère le voisin.
var neighbourFrame = $('#neighbourFrame-' + neighbourId);
@@ -428,7 +440,7 @@
this.moveToNeighbour($('#snapshotDiv-' + this.neighboursIds[idx]));
}
}
- else
+ else if(this.config.mouseInteractions)
{
if(idx == 0 && x > centerWidth || idx == 2 && y > centerHeight || idx == 1 && x < centerWidth || idx == 3 && y < centerHeight)
{
@@ -502,7 +514,7 @@
$('#snapshotDiv-' + destinationId).css('opacity', '1');
//Si le player est prêt.
- if(_this.player && _this.player.widgets[0] && _this.playerIsReady)
+ if(_this.player && _this.player.widgets && _this.player.widgets[0] && _this.playerIsReady)
{
//Si on est en mode timeline on la quitte.
if(_this.currentMode == 'TIMELINE')
@@ -525,6 +537,7 @@
//On libère le player.
_this.player.widgets[0].freePlayer();
_this.playerIsReady = false;
+ _this.isVideoReading = false;
$('.LdtPlayer').remove();
}
--- a/front_idill/src/mosaic/js/notifications.js Wed Aug 08 18:42:01 2012 +0200
+++ b/front_idill/src/mosaic/js/notifications.js Thu Aug 16 14:32:19 2012 +0200
@@ -271,7 +271,14 @@
//Le texte de recherche et les images changent en fonction du mode d'intéraction (souris/Kinect).
if(this.config.mouseInteractions)
{
- $('#search_2hands_text').html(this.helpText.search_2hands_text);
+ if(this.isTablet)
+ {
+ $('#search_2hands_text').html(this.helpText.search_touch_text);
+ }
+ else
+ {
+ $('#search_2hands_text').html(this.helpText.search_mouse_text);
+ }
MI = 'MI/';
}
else
@@ -300,7 +307,22 @@
//Actions de contrôle de l'interface.
$('#controls_title').html(this.helpText.controls_title);
- $('#controls_1hand_text').html(this.helpText.controls_1hand_text);
+
+ if(this.config.mouseInteractions)
+ {
+ if(this.isTablet)
+ {
+ $('#controls_1hand_text').html(this.helpText.controls_touch_text);
+ }
+ else
+ {
+ $('#controls_1hand_text').html(this.helpText.controls_mouse_text);
+ }
+ }
+ else
+ {
+ $('#controls_1hand_text').html(this.helpText.controls_1hand_text);
+ }
//On affecte les images des actions de contrôle de l'interface.
for(var i = 0 ; i < controls_1hand_tab.length ; i++)
@@ -382,7 +404,14 @@
//On calcule leurs coordonnées.
search_left = ($(window).width() / 2 - notify_width / 2 - notify_margin);
var img = $('#notify_search').css('background-image');
- $('#notify_search').css('background-image', img.replace('notifications/', 'notifications/MI/'));
+ if(this.isTablet)
+ {
+ $('#notify_search').css('background-image', img.replace('notifications/', 'notifications/TI/'));
+ }
+ else
+ {
+ $('#notify_search').css('background-image', img.replace('notifications/', 'notifications/MI/'));
+ }
}
else
{
@@ -491,7 +520,15 @@
if(this.config.mouseInteractions)
{
var img = $('#notify_search').css('background-image');
- $('#notify_search').css('background-image', img.replace('notifications/', 'notifications/MI/'));
+
+ if(this.isTablet)
+ {
+ $('#notify_search').css('background-image', img.replace('notifications/', 'notifications/TI/'));
+ }
+ else
+ {
+ $('#notify_search').css('background-image', img.replace('notifications/', 'notifications/MI/'));
+ }
}
this.putText($('#notify_search'), this.notificationStrings.search);
@@ -541,7 +578,15 @@
$('#notify_selection').css('background-image', imgSel.replace('notifications/', 'notifications/MI/'));
var imgSearch = $('#notify_search').css('background-image');
- $('#notify_search').css('background-image', imgSearch.replace('notifications/', 'notifications/MI/'));
+
+ if(this.isTablet)
+ {
+ $('#notify_search').css('background-image', imgSearch.replace('notifications/', 'notifications/TI/'));
+ }
+ else
+ {
+ $('#notify_search').css('background-image', imgSearch.replace('notifications/', 'notifications/MI/'));
+ }
}
this.putText($('#notify_selection'), this.notificationStrings.confirm);
@@ -1648,8 +1693,10 @@
//Nombre de notifications dans une ligne.
var notify_in_a_row = Math.floor($(window).width() / (+notify_width + 2 * notify_margin));
+ //Notifications sur la première ligne.
+ var notify_in_first_row = (gestures_tab.length > notify_in_a_row) ? notify_in_a_row : gestures_tab.length;
//Espace libre restant sur la ligne.
- var free_space = $(window).width() - notify_in_a_row * (+notify_width + 2 * notify_margin);
+ var free_space = $(window).width() - notify_in_first_row * (+notify_width + 2 * notify_margin);
//On met à jour le container.
$('#notify_curves_container').css(
@@ -1659,24 +1706,12 @@
'margin-right': free_space / 2
});
- // var curves_gestures_left = [];
-
//On calcule leurs dimensions et leur backgrounds.
- // curves_gestures_left[0] = $(window).width() / 2 - (notify_width * (gestures_tab.length) + notify_margin * (gestures_tab.length + 2)) / 2;
-
- for(var i = 0 ; i < gestures_tab.length ; i++)
+ for(var i = 0 ; i < gestures_tab.length ; i++)
{
//On va chercher leurs backgrounds.
$('#notify_curves_' + gestures_tab[i]).css('background-image', 'url("./pictos/big/' + (this.config.mouseInteractions ? 'MI/' : '') + 'normal/' + gestures_tab[i] + '.png")');
- //On calcule leurs coordonnées.
- if(i+1 < gestures_tab.length)
- {
- // curves_gestures_left[i+1] = curves_gestures_left[i] + notify_width + notify_margin * 2;
- }
-
- //On les place.
- // $('#notify_curves_' + gestures_tab[i]).css('left', curves_gestures_left[i]);
this.putText($('#notify_curves_' + gestures_tab[i]), this.notificationStrings[gestures_tab[i]]);
}
--- a/front_idill/src/mosaic/js/playerControl.js Wed Aug 08 18:42:01 2012 +0200
+++ b/front_idill/src/mosaic/js/playerControl.js Thu Aug 16 14:32:19 2012 +0200
@@ -60,7 +60,7 @@
Mosaic.prototype.isTLSelected = function(entering, mainPointer)
{
//Si les deux pointeurs ne sont pas là ou qu'on n'est pas en lecture d'une vidéo.
- if(this.isMainPointerDisplayed && this.isSecondPointerDisplayed || this.currentMode != 'VIDEO' && this.currentMode != 'SEARCH' && this.currentMode != 'TIMELINE' || !this.playerIsReady)
+ if(this.isMainPointerDisplayed && this.isSecondPointerDisplayed || this.currentMode != 'VIDEO' && this.currentMode != 'SEARCH' && this.currentMode != 'TIMELINE' || !this.playerIsReady || this.isSearchByCurvesOn)
{
return false;
}
--- a/front_idill/src/mosaic/js/pointers.js Wed Aug 08 18:42:01 2012 +0200
+++ b/front_idill/src/mosaic/js/pointers.js Thu Aug 16 14:32:19 2012 +0200
@@ -325,19 +325,27 @@
{
//On le sélectionne.
this.selectNeighbour(snapshot, pointer);
- clearTimeout(this.moveToNeighbourTimeout);
- if(isMainPointer)
+ if(!this.config.mouseInteractions)
{
- clearTimeout(this.mainPointerExitBorderTimeout);
- this.mainPointerExitBorder = true;
- this.mainPointerNeighbourSelectedId = intValueOfId;
+ clearTimeout(this.moveToNeighbourTimeout);
+ if(isMainPointer)
+ {
+ clearTimeout(this.mainPointerExitBorderTimeout);
+ this.mainPointerExitBorder = true;
+ this.mainPointerNeighbourSelectedId = intValueOfId;
+ }
+ else
+ {
+ clearTimeout(this.secondPointerExitBorderTimeout);
+ this.secondPointerExitBorder = true;
+ this.secondPointerNeighbourSelectedId = intValueOfId;
+ }
}
else
{
- clearTimeout(this.secondPointerExitBorderTimeout);
- this.secondPointerExitBorder = true;
- this.secondPointerNeighbourSelectedId = intValueOfId;
+ this.mainPointerNeighbourSelectedId = intValueOfId;
}
+
}
else
{
@@ -346,36 +354,39 @@
{
this.deselectNeighbour(thisPointerNeighbourSelectedId);
- //Si le pointeur quitte le voisin sans que l'autre pointeur ne fasse de même ailleurs.
- if(thisPointerExitBorder && !otherPointerExitBorder)
- {
- //On va vers le voisin.
- this.correctMoveToNeighbour(thisPointerNeighbourSelectedId, zoomX, zoomY);
- }
-
- //Il n'est possible de se déplacer vers un voisin que dans un certain laps de temps lorsqu'on quitte la sélection d'un voisin.
- this.moveToNeighbourTimeout = setTimeout(function()
- {
- _this.canMoveToNeighbour = false;
- }, this.config.timeoutMoveToNeighbour);
-
- if(isMainPointer)
+ if(!this.config.mouseInteractions)
{
- this.mainPointerExitBorderTimeout = setTimeout(function()
+ //Si le pointeur quitte le voisin sans que l'autre pointeur ne fasse de même ailleurs.
+ if(thisPointerExitBorder && !otherPointerExitBorder)
+ {
+ //On va vers le voisin.
+ this.correctMoveToNeighbour(thisPointerNeighbourSelectedId, zoomX, zoomY);
+ }
+
+ //Il n'est possible de se déplacer vers un voisin que dans un certain laps de temps lorsqu'on quitte la sélection d'un voisin.
+ this.moveToNeighbourTimeout = setTimeout(function()
+ {
+ _this.canMoveToNeighbour = false;
+ }, this.config.timeoutMoveToNeighbour);
+
+ if(isMainPointer)
{
- _this.mainPointerExitBorder = false;
- }, this.config.timeoutUnzoom);
+ this.mainPointerExitBorderTimeout = setTimeout(function()
+ {
+ _this.mainPointerExitBorder = false;
+ }, this.config.timeoutUnzoom);
+ }
+ else
+ {
+ this.secondPointerExitBorderTimeout = setTimeout(function()
+ {
+ _this.secondPointerExitBorder = false;
+ }, this.config.timeoutUnzoom);
+ }
+
+ //On regarde si on a voulu faire de dézoom.
+ this.checkForDezoom();
}
- else
- {
- this.secondPointerExitBorderTimeout = setTimeout(function()
- {
- _this.secondPointerExitBorder = false;
- }, this.config.timeoutUnzoom);
- }
-
- //On regarde si on a voulu faire de dézoom.
- this.checkForDezoom();
}
}
}
@@ -409,7 +420,7 @@
if((this.currentMode != 'TIMELINE' || this.isTLRequested) && this.playerIsReady && !isTLSelectedByOtherPointer && !this.helpDisplayed)
{
//Si la timeline est sélectionnée.
- if(this.isTLSelected(true, true) && !this.isTLRequested)
+ if(this.isTLSelected(true, true) && !this.isTLRequested && this.isVideoReading)
{
//On a demandé à aller dans la TL.
this.isTLRequested = true;
@@ -457,7 +468,7 @@
}, this.config.timeoutSlideTL);
}
//Sinon si on était sur la timeline sans qu'elle soit sélectionnée encore et qu'on l'a quitté avant la sélection.
- else if(!this.isTLSelected(true, true) && this.isTLRequested)
+ else if(!this.isTLSelected(true, true) && this.isTLRequested || !this.isVideoReading)
{
this.isTLRequested = false;
clearTimeout(this.selectTLTimeout);
@@ -495,6 +506,7 @@
}
this.player.popcorn.currentTime(time);
+ this.player.popcorn.play();
}
}
@@ -1064,6 +1076,27 @@
}
/*
+ * Retourne vrai si le doigt est sur le bouton de lecture de video dans le mode d'interaction tablettes.
+*/
+Mosaic.prototype.isOnPlayButton = function(x, y)
+{
+ var playButton = $('#tabletPlayButton');
+ //S'il n'y a pas d'icone d'aide, on quitte.
+ if(playButton.length <= 0)
+ {
+ return;
+ }
+
+ //Si la souris est sur l'icone, on retourne true.
+ if(x > playButton.position().left && x < +playButton.position().left + playButton.width() + 2 * parseInt(playButton.css('margin-left')) && y > playButton.position().top && y < +playButton.position().top + playButton.height() + 2 * parseInt(playButton.css('margin-left')))
+ {
+ return true;
+ }
+
+ return false;
+}
+
+/*
* Change la couleur des pointeurs pendant le tracé d'une courbe.
*/
Mosaic.prototype.pointersGreen = function()
--- a/front_idill/src/mosaic/js/search.js Wed Aug 08 18:42:01 2012 +0200
+++ b/front_idill/src/mosaic/js/search.js Thu Aug 16 14:32:19 2012 +0200
@@ -30,27 +30,28 @@
//Si on est dans le cas d'un filtrage de mosaïque.
if(this.currentMode == "FILTER")
{
- var mainPanel = $('#mainPanel');
+ /*var mainPanel = $('#mainPanel');
top = mainPanel.position().top;
left = mainPanel.position().left;
width = mainPanel.width();
- height = mainPanel.height();
- margin_top = this.MPTop_margin;
+ height = mainPanel.height();*/
+ // margin_top = this.MPTop_margin;
inMosaic = true;
}
//Sinon si c'est une recherche dans la vidéo.
else if(this.currentMode == "SEARCH")
{
- top = this.snTop;
+ /*top = this.snTop;
left = this.snLeft;
width = this.snWidth;
- height = this.snHeight;
- margin_top = '0px';
+ height = this.snHeight;*/
+ // margin_top = '0px';
inMosaic = false;
}
//On crée le canvas et on récupère le dictionnaire des courbes.
- this.searchCanvas = new SearchCanvas(top, left, width, height, margin_top, this.timeSearchFade, inMosaic, this);
+ // this.searchCanvas = new SearchCanvas(top, left, width, height, margin_top, this.timeSearchFade, inMosaic, this);
+ this.searchCanvas = new SearchCanvas(0, 0, $(window).width(), $(window).height(), 0, this.timeSearchFade, inMosaic, this);
this.searchCanvas.create(this.dictionary);
}
@@ -354,7 +355,7 @@
for(var j = 0 ; j < this.dictionary[i].codes.length ; j++)
{
//Si le code en entrée est une partie début d'un des codes.
- if(this.dictionary[i].codes[j] === code)
+ if(this.dictionary[i].codes[j] === code || this.dictionary[i].codes[j].indexOf(code) == 0)
{
//On retourne le nom de la gesture.
return this.dictionary[i].name;
--- a/front_idill/src/mosaic/js/touchInteractions.js Wed Aug 08 18:42:01 2012 +0200
+++ b/front_idill/src/mosaic/js/touchInteractions.js Thu Aug 16 14:32:19 2012 +0200
@@ -56,51 +56,10 @@
}
}
- //Si on est dans une vidéo.
- if(this.currentMode == 'VIDEO' || this.currentMode == 'SEARCH')
- {
- //On regarde si on a touché un snapshot.
- var snapshot = this.positionToSN(e.pageX - this.notifyLeftVideo, e.pageY - this.notifyTopVideo);
-
- if(snapshot && !this.isOnSearchNotification(e.pageX, e.pageY) && !this.isOnSearchExitIcon(e.pageX, e.pageY))
- {
- this.canMoveToNeighbour = true;
- var id = snapshot.attr('id').replace('snapshotDiv-', '');
- this.correctMoveToNeighbour(id, e.pageX - this.notifyLeftVideo, e.pageY - this.notifyTopVideo);
- this.canMoveToNeighbour = false;
- }
- }
-
- //Si on est sur l'icone de sortie de recherche.
- if(this.isOnSearchExitIcon(e.pageX, e.pageY) && !this.helpDisplayed)
+ //Si on est sur le bouton de lecture de vidéo.
+ if(this.isOnPlayButton(e.pageX, e.pageY) && this.player && this.player.widgets && this.player.widgets[1])
{
- //On ferme l'aide.
- this.removeSearchExitIcon();
-
- this.removeNotifications();
- if(this.currentMode == 'SEARCH')
- {
- this.player.widgets[0].removeSearchByGesture();
- this.currentMode = 'VIDEO';
- this.currentSearchGesture[this.centerId] = '';
- }
- else if(this.currentMode == 'TIMELINE')
- {
- this.player.widgets[0].removeSearchByGesture();
- this.currentMode = 'TIMELINE';
- this.currentSearchGesture[this.centerId] = '';
- }
- else if(this.currentMode == 'FILTER')
- {
- this.removeFilter();
- }
-
- this.alreadyOnNotification = false;
- this.isCurrentlyInASearchByGesture = false;
- this.curvesGesturesFound = false;
- this.canDrawNextCurve = false;
- this.isSearchByCurvesOn = false;
- this.canNotifyHelp = false;
+ this.player.widgets[1].onPlayButtonTouchStart();
}
//On met à jour les coordonnées de la souris au dernier mouse down.
@@ -136,7 +95,8 @@
//Si on est en mode de tracé de courbes, on met à jour la courbe.
if(this.isSearchByCurvesOn)
{
- this.searchCanvas.onPointerMove(this.mousePosX, this.mousePosY - this.MPTop_margin, null, null);
+ // this.searchCanvas.onPointerMove(this.mousePosX, this.mousePosY - this.MPTop_margin, null, null);
+ this.searchCanvas.onPointerMove(this.mousePosX, this.mousePosY, null, null);
}
//On met à jour l'ancienne position du doigt si elle est nulle.
@@ -163,7 +123,7 @@
}
//Si le doigt a parcouru une trop grande distance, on entre en recherche.
- if(this.touchUpDownDelta > this.config.touchUpDownDeltaTreshold)
+ if(this.touchUpDownDelta > this.config.touchUpDownDeltaTreshold && !this.isTLSelected(true, null))
{
this.isTouchMove = true;
//Si on est en mosaique, on entre en filtrage.
@@ -182,7 +142,14 @@
{
this.isSearchByCurvesOn = true;
this.startSearch();
- this.searchCanvas.onPointerIn(this.mousePosX, this.mousePosY - this.MPTop_margin, null, null);
+ // this.searchCanvas.onPointerIn(this.mousePosX, this.mousePosY - this.MPTop_margin, null, null);
+ this.searchCanvas.onPointerIn(this.mousePosX, this.mousePosY, null, null);
+ }
+
+ //Si on est dans une vidéo et qu'on glisse le doigt sur la timeline, ça place le curseur à cet endroit.
+ if(this.playerIsReady && (this.currentMode == 'VIDEO' || this.currentMode == 'SEARCH' || this.currentMode == 'TIMELINE') && this.isTLSelected(true, null))
+ {
+ this.goToTimeline();
}
}
}
@@ -194,12 +161,15 @@
*/
Mosaic.prototype.onTouchEnd = function(e)
{
+ //Coordonnées du doigt.
+ var posX = this.mousePosX, posY = this.mousePosY;
+
// alert(this.mousePosX + ' ' + this.mousePosY);
//Si on est dans la mosaïque.
if(this.currentMode == 'MOSAIC' || this.currentMode == 'FILTER')
{
//On regarde si on a touché un snapshot.
- var snapshot = this.positionToSN(this.mousePosX, this.mousePosY);
+ var snapshot = this.positionToSN(posX, posY);
// alert(snapshot);
// alert(this.isTouchMove);
if(snapshot && !this.isTouchMove)
@@ -209,10 +179,61 @@
this.zoom();
}
}
- //Sinon si on est dans une video.
+ //Sinon si on est dans une vidéo.
else if(this.currentMode == 'VIDEO' || this.currentMode == 'SEARCH' || this.currentMode == 'TIMELINE')
{
- // console.log(this.isTLSelected(true, null));
+ //Si on relache le doigt sur la timeline, ça place le curseur à cet endroit.
+ if(this.playerIsReady && this.isTLSelected(true, null))
+ {
+ this.goToTimeline();
+ }
+ this.exitTimeline('');
+
+ posX = this.mousePosX - this.notifyLeftVideo;
+ posY = this.mousePosY - this.notifyTopVideo;
+
+ //On regarde si on a touché un snapshot.
+ var snapshot = this.positionToSN(posX, posY);
+
+ if(snapshot && !this.isOnSearchNotification(this.mousePosX, this.mousePosY) && !this.isOnSearchExitIcon(this.mousePosX, this.mousePosY))
+ {
+ this.canMoveToNeighbour = true;
+ var id = snapshot.attr('id').replace('snapshotDiv-', '');
+ this.correctMoveToNeighbour(id, posX, posY);
+ this.canMoveToNeighbour = false;
+ }
+ }
+
+ //Si on est sur l'icone de sortie de recherche.
+ if(this.isOnSearchExitIcon(this.mousePosX, this.mousePosY) && !this.helpDisplayed)
+ {
+ //On ferme l'aide.
+ this.removeSearchExitIcon();
+
+ this.removeNotifications();
+ if(this.currentMode == 'SEARCH')
+ {
+ this.player.widgets[0].removeSearchByGesture();
+ this.currentMode = 'VIDEO';
+ this.currentSearchGesture[this.centerId] = '';
+ }
+ else if(this.currentMode == 'TIMELINE')
+ {
+ this.player.widgets[0].removeSearchByGesture();
+ this.currentMode = 'TIMELINE';
+ this.currentSearchGesture[this.centerId] = '';
+ }
+ else if(this.currentMode == 'FILTER')
+ {
+ this.removeFilter();
+ }
+
+ this.alreadyOnNotification = false;
+ this.isCurrentlyInASearchByGesture = false;
+ this.curvesGesturesFound = false;
+ this.canDrawNextCurve = false;
+ this.isSearchByCurvesOn = false;
+ this.canNotifyHelp = false;
}
this.isTouchStart = false;
@@ -313,4 +334,31 @@
//Si on est arrivé là, c'est que le pointeur n'est pas dans la mosaïque.
return null;
+}
+
+/*
+ * Se déplace dans la timeline lorsque le doigt est dessus.
+*/
+Mosaic.prototype.goToTimeline = function()
+{
+ var time, TL = $('.Ldt-Timeline'), P = $('.LdtPlayer');
+
+ //Si le pointeur est trop à gauche, on met le curseur de lecture à 0.
+ if(this.mousePosX < P.position().left)
+ {
+ time = 0;
+ }
+ //S'il est trop à droite, on le place à la fin.
+ else if(this.mousePosX > (+P.position().left + TL.width()))
+ {
+ time = this.player.widgets[0].source.getDuration().getSeconds();
+ }
+ //Sinon, on le met à la position du pointeur.
+ else
+ {
+ time = this.player.widgets[0].scaleIntervals(P.position().left, (+P.position().left + TL.width()), 0, this.player.widgets[0].source.getDuration().getSeconds(), this.mousePosX);
+ }
+
+ this.player.popcorn.currentTime(time);
+ this.player.popcorn.play();
}
\ No newline at end of file
--- a/front_idill/src/mosaic/js/zoomInteractions.js Wed Aug 08 18:42:01 2012 +0200
+++ b/front_idill/src/mosaic/js/zoomInteractions.js Thu Aug 16 14:32:19 2012 +0200
@@ -457,6 +457,7 @@
_this.timeToGoAt[_this.centerId] = Math.floor(_this.player.popcorn.currentTime());
_this.player.widgets[0].freePlayer();
_this.player = null;
+ _this.isVideoReading = false;
}
//On indique que le player n'est pas prêt et on le supprime.
Binary file front_idill/src/pictos/notifications/TI/rechercher.png has changed
--- a/front_idill/src/player/json/local_videos.json Wed Aug 08 18:42:01 2012 +0200
+++ b/front_idill/src/player/json/local_videos.json Thu Aug 16 14:32:19 2012 +0200
@@ -1,268 +1,268 @@
{
- "videos" : [
- {
- "metadata": "./player/json/metadata/ba4d888c-66b7-11e1-91ba-00145ea4a2be",
- "snapshot": "50 shots.jpg",
- "gestures": [
- {
- "gesture_name": "bend",
- "snapshot": ""
- },
- {
- "gesture_name": "circle",
- "snapshot": ""
- }
- ]
- },
- {
- "metadata": "./player/json/metadata/076230fe-66b9-11e1-80f6-00145ea4a2be",
- "snapshot": "deep end dance.jpg",
- "gestures": [
- {
- "gesture_name": "circle",
- "snapshot": ""
- },
- {
- "gesture_name": "jump",
- "snapshot": ""
- },
- {
- "gesture_name": "contact",
- "snapshot": ""
- },
- {
- "gesture_name": "bend",
- "snapshot": ""
- },
- {
- "gesture_name": "wave",
- "snapshot": ""
- }
- ]
- },
- {
- "metadata": "./player/json/metadata/f1cee904-66b7-11e1-80f6-00145ea4a2be",
- "snapshot": "fenella.jpg",
- "gestures": [
- {
- "gesture_name": "knee-up",
- "snapshot": ""
- },
- {
- "gesture_name": "circle",
- "snapshot": ""
- }
- ]
- },
- {
- "metadata": "./player/json/metadata/98517ca6-66b8-11e1-80f6-00145ea4a2be",
- "snapshot": "i am my mother.jpg",
- "gestures": [
- {
- "gesture_name": "",
- "snapshot": ""
- }
- ]
- },
- {
- "metadata": "./player/json/metadata/d610e47e-66b7-11e1-80f6-00145ea4a2be",
- "snapshot": "instrument.jpg",
- "gestures": [
- {
- "gesture_name": "",
- "snapshot": ""
- }
- ]
- },
- {
- "metadata": "./player/json/metadata/e2b5b9e8-562c-11e1-b3c3-00145ea49a02",
- "snapshot": "joudance 2 in asakusa_stage1.jpg",
- "gestures": [
- {
- "gesture_name": "",
- "snapshot": ""
- }
- ]
- },
- {
- "metadata": "./player/json/metadata/23256da6-66b9-11e1-80f6-00145ea4a2be",
- "snapshot": "mue.jpg",
- "gestures": [
- {
- "gesture_name": "",
- "snapshot": ""
- }
- ]
- },
- {
- "metadata": "./player/json/metadata/c66bfa64-66b6-11e1-91ba-00145ea4a2be",
- "snapshot": "new under the sun.jpg",
- "gestures": [
- {
- "gesture_name": "",
- "snapshot": ""
- }
- ]
- },
- {
- "metadata": "./player/json/metadata/cfd63004-66b8-11e1-80f6-00145ea4a2be",
- "snapshot": "nid de lune.jpg",
- "gestures": [
- {
- "gesture_name": "",
- "snapshot": ""
- }
- ]
- },
- {
- "metadata": "./player/json/metadata/2f8b92b6-66b7-11e1-91ba-00145ea4a2be",
- "snapshot": "patria.jpg",
- "gestures": [
- {
- "gesture_name": "circle",
- "snapshot": ""
- },
- {
- "gesture_name": "updown",
- "snapshot": ""
- },
- {
- "gesture_name": "slow",
- "snapshot": ""
- }
- ]
- },
- {
- "metadata": "./player/json/metadata/294f727c-66b8-11e1-91ba-00145ea4a2be",
- "snapshot": "sliced.jpg",
- "gestures": [
- {
- "gesture_name": "",
- "snapshot": ""
- }
- ]
- },
- {
- "metadata": "./player/json/metadata/3f1f08e6-66b9-11e1-80f6-00145ea4a2be",
- "snapshot": "stronger.jpg",
- "gestures": [
- {
- "gesture_name": "jump",
- "snapshot": ""
- },
- {
- "gesture_name": "circle",
- "snapshot": ""
- },
- {
- "gesture_name": "contact",
- "snapshot": ""
- },
- {
- "gesture_name": "beat",
- "snapshot": ""
- }
- ]
- },
- {
- "metadata": "./player/json/metadata/82cd7e30-66b7-11e1-80f6-00145ea4a2be",
- "snapshot": "vrtti.jpg",
- "gestures": [
- {
- "gesture_name": "",
- "snapshot": ""
- }
- ]
- },
- {
- "metadata": "./player/json/metadata/60d03074-66b8-11e1-80f6-00145ea4a2be",
- "snapshot": "you are you.jpg",
- "gestures": [
- {
- "gesture_name": "",
- "snapshot": ""
- }
- ]
- },
- {
- "metadata": "./player/json/metadata/15a75eea-8870-11e1-9bba-00145ea4a2be",
- "snapshot": "alger.jpg",
- "gestures": [
- {
- "gesture_name": "",
- "snapshot": ""
- }
- ]
- },
- {
- "metadata": "./player/json/metadata/ffbe189a-886e-11e1-9ee2-00145ea4a2be",
- "snapshot": "animalz.jpg",
- "gestures": [
- {
- "gesture_name": "",
- "snapshot": ""
- }
- ]
- },
- {
- "metadata": "./player/json/metadata/a52dc4c4-886f-11e1-9bba-00145ea4a2be",
- "snapshot": "exotica.jpg",
- "gestures": [
- {
- "gesture_name": "",
- "snapshot": ""
- }
- ]
- },
- {
- "metadata": "./player/json/metadata/8a29e4f0-886f-11e1-9ee2-00145ea4a2be",
- "snapshot": "respire.jpg",
- "gestures": [
- {
- "gesture_name": "",
- "snapshot": ""
- }
- ]
- },
- {
- "metadata": "./player/json/metadata/2377411e-9f74-11e1-9f9f-00145ea4a2be",
- "snapshot": "flying lesson.jpg",
- "gestures": [
- {
- "gesture_name": "",
- "snapshot": ""
- }
- ]
- },
- {
- "metadata": "./player/json/metadata/e3d42dc4-9f73-11e1-9f9f-00145ea4a2be",
- "snapshot": "aside.jpg",
- "gestures": [
- {
- "gesture_name": "",
- "snapshot": ""
- }
- ]
- },
- {
- "metadata": "./player/json/metadata/a98a7bc4-8870-11e1-9ee2-00145ea4a2be",
- "snapshot": "the rat.jpg",
- "gestures": [
- {
- "gesture_name": "",
- "snapshot": ""
- }
- ]
- },
- {
- "metadata": "./player/json/metadata/f47e1578-8870-11e1-9ee2-00145ea4a2be",
- "snapshot": "tank man tango a tiananmen memorial.jpg",
- "gestures": [
- {
- "gesture_name": "",
- "snapshot": ""
- }
- ]
- }
- ]
+ "videos" : [
+ {
+ "metadata": "./player/json/metadata/ba4d888c-66b7-11e1-91ba-00145ea4a2be",
+ "snapshot": "50_shots.jpg",
+ "gestures": [
+ {
+ "gesture_name": "bend",
+ "snapshot": ""
+ },
+ {
+ "gesture_name": "circle",
+ "snapshot": ""
+ }
+ ]
+ },
+ {
+ "metadata": "./player/json/metadata/076230fe-66b9-11e1-80f6-00145ea4a2be",
+ "snapshot": "deep_end_dance.jpg",
+ "gestures": [
+ {
+ "gesture_name": "circle",
+ "snapshot": ""
+ },
+ {
+ "gesture_name": "jump",
+ "snapshot": ""
+ },
+ {
+ "gesture_name": "contact",
+ "snapshot": ""
+ },
+ {
+ "gesture_name": "bend",
+ "snapshot": ""
+ },
+ {
+ "gesture_name": "wave",
+ "snapshot": ""
+ }
+ ]
+ },
+ {
+ "metadata": "./player/json/metadata/f1cee904-66b7-11e1-80f6-00145ea4a2be",
+ "snapshot": "fenella.jpg",
+ "gestures": [
+ {
+ "gesture_name": "knee-up",
+ "snapshot": ""
+ },
+ {
+ "gesture_name": "circle",
+ "snapshot": ""
+ }
+ ]
+ },
+ {
+ "metadata": "./player/json/metadata/98517ca6-66b8-11e1-80f6-00145ea4a2be",
+ "snapshot": "i_am_my_mother.jpg",
+ "gestures": [
+ {
+ "gesture_name": "",
+ "snapshot": ""
+ }
+ ]
+ },
+ {
+ "metadata": "./player/json/metadata/d610e47e-66b7-11e1-80f6-00145ea4a2be",
+ "snapshot": "instrument.jpg",
+ "gestures": [
+ {
+ "gesture_name": "",
+ "snapshot": ""
+ }
+ ]
+ },
+ {
+ "metadata": "./player/json/metadata/e2b5b9e8-562c-11e1-b3c3-00145ea49a02",
+ "snapshot": "joudance_2_in_asakusa_stage1.jpg",
+ "gestures": [
+ {
+ "gesture_name": "",
+ "snapshot": ""
+ }
+ ]
+ },
+ {
+ "metadata": "./player/json/metadata/23256da6-66b9-11e1-80f6-00145ea4a2be",
+ "snapshot": "mue.jpg",
+ "gestures": [
+ {
+ "gesture_name": "",
+ "snapshot": ""
+ }
+ ]
+ },
+ {
+ "metadata": "./player/json/metadata/c66bfa64-66b6-11e1-91ba-00145ea4a2be",
+ "snapshot": "new_under_the_sun.jpg",
+ "gestures": [
+ {
+ "gesture_name": "",
+ "snapshot": ""
+ }
+ ]
+ },
+ {
+ "metadata": "./player/json/metadata/cfd63004-66b8-11e1-80f6-00145ea4a2be",
+ "snapshot": "nid_de_lune.jpg",
+ "gestures": [
+ {
+ "gesture_name": "",
+ "snapshot": ""
+ }
+ ]
+ },
+ {
+ "metadata": "./player/json/metadata/2f8b92b6-66b7-11e1-91ba-00145ea4a2be",
+ "snapshot": "patria.jpg",
+ "gestures": [
+ {
+ "gesture_name": "circle",
+ "snapshot": ""
+ },
+ {
+ "gesture_name": "updown",
+ "snapshot": ""
+ },
+ {
+ "gesture_name": "slow",
+ "snapshot": ""
+ }
+ ]
+ },
+ {
+ "metadata": "./player/json/metadata/294f727c-66b8-11e1-91ba-00145ea4a2be",
+ "snapshot": "sliced.jpg",
+ "gestures": [
+ {
+ "gesture_name": "",
+ "snapshot": ""
+ }
+ ]
+ },
+ {
+ "metadata": "./player/json/metadata/3f1f08e6-66b9-11e1-80f6-00145ea4a2be",
+ "snapshot": "stronger.jpg",
+ "gestures": [
+ {
+ "gesture_name": "jump",
+ "snapshot": ""
+ },
+ {
+ "gesture_name": "circle",
+ "snapshot": ""
+ },
+ {
+ "gesture_name": "contact",
+ "snapshot": ""
+ },
+ {
+ "gesture_name": "beat",
+ "snapshot": ""
+ }
+ ]
+ },
+ {
+ "metadata": "./player/json/metadata/82cd7e30-66b7-11e1-80f6-00145ea4a2be",
+ "snapshot": "vrtti.jpg",
+ "gestures": [
+ {
+ "gesture_name": "",
+ "snapshot": ""
+ }
+ ]
+ },
+ {
+ "metadata": "./player/json/metadata/60d03074-66b8-11e1-80f6-00145ea4a2be",
+ "snapshot": "you_are_you.jpg",
+ "gestures": [
+ {
+ "gesture_name": "",
+ "snapshot": ""
+ }
+ ]
+ },
+ {
+ "metadata": "./player/json/metadata/15a75eea-8870-11e1-9bba-00145ea4a2be",
+ "snapshot": "alger.jpg",
+ "gestures": [
+ {
+ "gesture_name": "",
+ "snapshot": ""
+ }
+ ]
+ },
+ {
+ "metadata": "./player/json/metadata/ffbe189a-886e-11e1-9ee2-00145ea4a2be",
+ "snapshot": "animalz.jpg",
+ "gestures": [
+ {
+ "gesture_name": "",
+ "snapshot": ""
+ }
+ ]
+ },
+ {
+ "metadata": "./player/json/metadata/a52dc4c4-886f-11e1-9bba-00145ea4a2be",
+ "snapshot": "exotica.jpg",
+ "gestures": [
+ {
+ "gesture_name": "",
+ "snapshot": ""
+ }
+ ]
+ },
+ {
+ "metadata": "./player/json/metadata/8a29e4f0-886f-11e1-9ee2-00145ea4a2be",
+ "snapshot": "respire.jpg",
+ "gestures": [
+ {
+ "gesture_name": "",
+ "snapshot": ""
+ }
+ ]
+ },
+ {
+ "metadata": "./player/json/metadata/2377411e-9f74-11e1-9f9f-00145ea4a2be",
+ "snapshot": "flying_lesson.jpg",
+ "gestures": [
+ {
+ "gesture_name": "",
+ "snapshot": ""
+ }
+ ]
+ },
+ {
+ "metadata": "./player/json/metadata/e3d42dc4-9f73-11e1-9f9f-00145ea4a2be",
+ "snapshot": "aside.jpg",
+ "gestures": [
+ {
+ "gesture_name": "",
+ "snapshot": ""
+ }
+ ]
+ },
+ {
+ "metadata": "./player/json/metadata/a98a7bc4-8870-11e1-9ee2-00145ea4a2be",
+ "snapshot": "the_rat.jpg",
+ "gestures": [
+ {
+ "gesture_name": "",
+ "snapshot": ""
+ }
+ ]
+ },
+ {
+ "metadata": "./player/json/metadata/f47e1578-8870-11e1-9ee2-00145ea4a2be",
+ "snapshot": "tank_man_tango_a_tiananmen_memorial.jpg",
+ "gestures": [
+ {
+ "gesture_name": "",
+ "snapshot": ""
+ }
+ ]
+ }
+ ]
}
\ No newline at end of file
--- a/front_idill/src/player/json/online_videos.json Wed Aug 08 18:42:01 2012 +0200
+++ b/front_idill/src/player/json/online_videos.json Thu Aug 16 14:32:19 2012 +0200
@@ -1,290 +1,268 @@
{
- "videos" : [
- {
- "metadata": "http://ldt.iri.centrepompidou.fr//ldtplatform/ldt/cljson/id/ba4d888c-66b7-11e1-91ba-00145ea4a2be?callback=?",
- "snapshot": "50 shots.jpg",
- "gestures": [
- {
- "gesture_name": "bend",
- "snapshot": ""
- },
- {
- "gesture_name": "circle",
- "snapshot": ""
- }
- ]
- },
- {
- "metadata": "http://ldt.iri.centrepompidou.fr//ldtplatform/ldt/cljson/id/076230fe-66b9-11e1-80f6-00145ea4a2be?callback=?",
- "snapshot": "deep end dance.jpg",
- "gestures": [
- {
- "gesture_name": "circle",
- "snapshot": ""
- },
- {
- "gesture_name": "jump",
- "snapshot": ""
- },
- {
- "gesture_name": "contact",
- "snapshot": ""
- },
- {
- "gesture_name": "bend",
- "snapshot": ""
- },
- {
- "gesture_name": "wave",
- "snapshot": ""
- }
- ]
- },
- {
- "metadata": "http://ldt.iri.centrepompidou.fr//ldtplatform/ldt/cljson/id/f80bd9fe-66b6-11e1-91ba-00145ea4a2be?callback=?",
- "snapshot": "encontro cotidianos.jpg",
- "gestures": [
- {
- "gesture_name": "contact",
- "snapshot": ""
- },
- {
- "gesture_name": "circle",
- "snapshot": ""
- },
- {
- "gesture_name": "screw",
- "snapshot": ""
- },
- {
- "gesture_name": "run",
- "snapshot": ""
- }
- ]
- },
- {
- "metadata": "http://ldt.iri.centrepompidou.fr//ldtplatform/ldt/cljson/id/f1cee904-66b7-11e1-80f6-00145ea4a2be?callback=?",
- "snapshot": "fenella.jpg",
- "gestures": [
- {
- "gesture_name": "knee-up",
- "snapshot": ""
- },
- {
- "gesture_name": "circle",
- "snapshot": ""
- }
- ]
- },
- {
- "metadata": "http://ldt.iri.centrepompidou.fr//ldtplatform/ldt/cljson/id/98517ca6-66b8-11e1-80f6-00145ea4a2be?callback=?",
- "snapshot": "i am my mother.jpg",
- "gestures": [
- {
- "gesture_name": "",
- "snapshot": ""
- }
- ]
- },
- {
- "metadata": "http://ldt.iri.centrepompidou.fr//ldtplatform/ldt/cljson/id/d610e47e-66b7-11e1-80f6-00145ea4a2be?callback=?",
- "snapshot": "instrument.jpg",
- "gestures": [
- {
- "gesture_name": "",
- "snapshot": ""
- }
- ]
- },
- {
- "metadata": "http://ldt.iri.centrepompidou.fr//ldtplatform/ldt/cljson/id/e2b5b9e8-562c-11e1-b3c3-00145ea49a02?callback=?",
- "snapshot": "joudance 2 in asakusa_stage1.jpg",
- "gestures": [
- {
- "gesture_name": "",
- "snapshot": ""
- }
- ]
- },
- {
- "metadata": "http://ldt.iri.centrepompidou.fr//ldtplatform/ldt/cljson/id/23256da6-66b9-11e1-80f6-00145ea4a2be?callback=?",
- "snapshot": "mue.jpg",
- "gestures": [
- {
- "gesture_name": "",
- "snapshot": ""
- }
- ]
- },
- {
- "metadata": "http://ldt.iri.centrepompidou.fr//ldtplatform/ldt/cljson/id/c66bfa64-66b6-11e1-91ba-00145ea4a2be?callback=?",
- "snapshot": "new under the sun.jpg",
- "gestures": [
- {
- "gesture_name": "",
- "snapshot": ""
- }
- ]
- },
- {
- "metadata": "http://ldt.iri.centrepompidou.fr//ldtplatform/ldt/cljson/id/cfd63004-66b8-11e1-80f6-00145ea4a2be?callback=?",
- "snapshot": "nid de lune.jpg",
- "gestures": [
- {
- "gesture_name": "",
- "snapshot": ""
- }
- ]
- },
- {
- "metadata": "http://ldt.iri.centrepompidou.fr//ldtplatform/ldt/cljson/id/2f8b92b6-66b7-11e1-91ba-00145ea4a2be?callback=?",
- "snapshot": "patria.jpg",
- "gestures": [
- {
- "gesture_name": "circle",
- "snapshot": ""
- },
- {
- "gesture_name": "updown",
- "snapshot": ""
- },
- {
- "gesture_name": "slow",
- "snapshot": ""
- }
- ]
- },
- {
- "metadata": "http://ldt.iri.centrepompidou.fr//ldtplatform/ldt/cljson/id/294f727c-66b8-11e1-91ba-00145ea4a2be?callback=?",
- "snapshot": "sliced.jpg",
- "gestures": [
- {
- "gesture_name": "",
- "snapshot": ""
- }
- ]
- },
- {
- "metadata": "http://ldt.iri.centrepompidou.fr//ldtplatform/ldt/cljson/id/3f1f08e6-66b9-11e1-80f6-00145ea4a2be?callback=?",
- "snapshot": "stronger.jpg",
- "gestures": [
- {
- "gesture_name": "jump",
- "snapshot": ""
- },
- {
- "gesture_name": "circle",
- "snapshot": ""
- },
- {
- "gesture_name": "contact",
- "snapshot": ""
- },
- {
- "gesture_name": "beat",
- "snapshot": ""
- }
- ]
- },
- {
- "metadata": "http://ldt.iri.centrepompidou.fr//ldtplatform/ldt/cljson/id/82cd7e30-66b7-11e1-80f6-00145ea4a2be?callback=?",
- "snapshot": "vrtti.jpg",
- "gestures": [
- {
- "gesture_name": "",
- "snapshot": ""
- }
- ]
- },
- {
- "metadata": "http://ldt.iri.centrepompidou.fr//ldtplatform/ldt/cljson/id/60d03074-66b8-11e1-80f6-00145ea4a2be?callback=?",
- "snapshot": "you are you.jpg",
- "gestures": [
- {
- "gesture_name": "",
- "snapshot": ""
- }
- ]
- },
- {
- "metadata": "http://ldt.iri.centrepompidou.fr//ldtplatform/ldt/cljson/id/15a75eea-8870-11e1-9bba-00145ea4a2be?callback=?",
- "snapshot": "alger.jpg",
- "gestures": [
- {
- "gesture_name": "",
- "snapshot": ""
- }
- ]
- },
- {
- "metadata": "http://ldt.iri.centrepompidou.fr//ldtplatform/ldt/cljson/id/ffbe189a-886e-11e1-9ee2-00145ea4a2be?callback=?",
- "snapshot": "animalz.jpg",
- "gestures": [
- {
- "gesture_name": "",
- "snapshot": ""
- }
- ]
- },
- {
- "metadata": "http://ldt.iri.centrepompidou.fr//ldtplatform/ldt/cljson/id/a52dc4c4-886f-11e1-9bba-00145ea4a2be?callback=?",
- "snapshot": "exotica.jpg",
- "gestures": [
- {
- "gesture_name": "",
- "snapshot": ""
- }
- ]
- },
- {
- "metadata": "http://ldt.iri.centrepompidou.fr//ldtplatform/ldt/cljson/id/8a29e4f0-886f-11e1-9ee2-00145ea4a2be?callback=?",
- "snapshot": "respire.jpg",
- "gestures": [
- {
- "gesture_name": "",
- "snapshot": ""
- }
- ]
- },
- {
- "metadata": "http://ldt.iri.centrepompidou.fr//ldtplatform/ldt/cljson/id/2377411e-9f74-11e1-9f9f-00145ea4a2be?callback=?",
- "snapshot": "flying lesson.jpg",
- "gestures": [
- {
- "gesture_name": "",
- "snapshot": ""
- }
- ]
- },
- {
- "metadata": "http://ldt.iri.centrepompidou.fr//ldtplatform/ldt/cljson/id/e3d42dc4-9f73-11e1-9f9f-00145ea4a2be?callback=?",
- "snapshot": "aside.jpg",
- "gestures": [
- {
- "gesture_name": "",
- "snapshot": ""
- }
- ]
- },
- {
- "metadata": "http://ldt.iri.centrepompidou.fr//ldtplatform/ldt/cljson/id/a98a7bc4-8870-11e1-9ee2-00145ea4a2be?callback=?",
- "snapshot": "the rat.jpg",
- "gestures": [
- {
- "gesture_name": "",
- "snapshot": ""
- }
- ]
- },
- {
- "metadata": "http://ldt.iri.centrepompidou.fr//ldtplatform/ldt/cljson/id/f47e1578-8870-11e1-9ee2-00145ea4a2be?callback=?",
- "snapshot": "tank man tango a tianmen memorial.jpg",
- "gestures": [
- {
- "gesture_name": "",
- "snapshot": ""
- }
- ]
- }
- ]
+ "videos" : [
+ {
+ "metadata": "http://ldt.iri.centrepompidou.fr//ldtplatform/ldt/cljson/id/ba4d888c-66b7-11e1-91ba-00145ea4a2be?callback=?",
+ "snapshot": "50_shots.jpg",
+ "gestures": [
+ {
+ "gesture_name": "bend",
+ "snapshot": ""
+ },
+ {
+ "gesture_name": "circle",
+ "snapshot": ""
+ }
+ ]
+ },
+ {
+ "metadata": "http://ldt.iri.centrepompidou.fr//ldtplatform/ldt/cljson/id/076230fe-66b9-11e1-80f6-00145ea4a2be?callback=?",
+ "snapshot": "deep_end_dance.jpg",
+ "gestures": [
+ {
+ "gesture_name": "circle",
+ "snapshot": ""
+ },
+ {
+ "gesture_name": "jump",
+ "snapshot": ""
+ },
+ {
+ "gesture_name": "contact",
+ "snapshot": ""
+ },
+ {
+ "gesture_name": "bend",
+ "snapshot": ""
+ },
+ {
+ "gesture_name": "wave",
+ "snapshot": ""
+ }
+ ]
+ },
+ {
+ "metadata": "http://ldt.iri.centrepompidou.fr//ldtplatform/ldt/cljson/id/f1cee904-66b7-11e1-80f6-00145ea4a2be?callback=?",
+ "snapshot": "fenella.jpg",
+ "gestures": [
+ {
+ "gesture_name": "knee-up",
+ "snapshot": ""
+ },
+ {
+ "gesture_name": "circle",
+ "snapshot": ""
+ }
+ ]
+ },
+ {
+ "metadata": "http://ldt.iri.centrepompidou.fr//ldtplatform/ldt/cljson/id/98517ca6-66b8-11e1-80f6-00145ea4a2be?callback=?",
+ "snapshot": "i_am_my_mother.jpg",
+ "gestures": [
+ {
+ "gesture_name": "",
+ "snapshot": ""
+ }
+ ]
+ },
+ {
+ "metadata": "http://ldt.iri.centrepompidou.fr//ldtplatform/ldt/cljson/id/d610e47e-66b7-11e1-80f6-00145ea4a2be?callback=?",
+ "snapshot": "instrument.jpg",
+ "gestures": [
+ {
+ "gesture_name": "",
+ "snapshot": ""
+ }
+ ]
+ },
+ {
+ "metadata": "http://ldt.iri.centrepompidou.fr//ldtplatform/ldt/cljson/id/e2b5b9e8-562c-11e1-b3c3-00145ea49a02?callback=?",
+ "snapshot": "joudance_2_in_asakusa_stage1.jpg",
+ "gestures": [
+ {
+ "gesture_name": "",
+ "snapshot": ""
+ }
+ ]
+ },
+ {
+ "metadata": "http://ldt.iri.centrepompidou.fr//ldtplatform/ldt/cljson/id/23256da6-66b9-11e1-80f6-00145ea4a2be?callback=?",
+ "snapshot": "mue.jpg",
+ "gestures": [
+ {
+ "gesture_name": "",
+ "snapshot": ""
+ }
+ ]
+ },
+ {
+ "metadata": "http://ldt.iri.centrepompidou.fr//ldtplatform/ldt/cljson/id/c66bfa64-66b6-11e1-91ba-00145ea4a2be?callback=?",
+ "snapshot": "new_under_the_sun.jpg",
+ "gestures": [
+ {
+ "gesture_name": "",
+ "snapshot": ""
+ }
+ ]
+ },
+ {
+ "metadata": "http://ldt.iri.centrepompidou.fr//ldtplatform/ldt/cljson/id/cfd63004-66b8-11e1-80f6-00145ea4a2be?callback=?",
+ "snapshot": "nid_de_lune.jpg",
+ "gestures": [
+ {
+ "gesture_name": "",
+ "snapshot": ""
+ }
+ ]
+ },
+ {
+ "metadata": "http://ldt.iri.centrepompidou.fr//ldtplatform/ldt/cljson/id/2f8b92b6-66b7-11e1-91ba-00145ea4a2be?callback=?",
+ "snapshot": "patria.jpg",
+ "gestures": [
+ {
+ "gesture_name": "circle",
+ "snapshot": ""
+ },
+ {
+ "gesture_name": "updown",
+ "snapshot": ""
+ },
+ {
+ "gesture_name": "slow",
+ "snapshot": ""
+ }
+ ]
+ },
+ {
+ "metadata": "http://ldt.iri.centrepompidou.fr//ldtplatform/ldt/cljson/id/294f727c-66b8-11e1-91ba-00145ea4a2be?callback=?",
+ "snapshot": "sliced.jpg",
+ "gestures": [
+ {
+ "gesture_name": "",
+ "snapshot": ""
+ }
+ ]
+ },
+ {
+ "metadata": "http://ldt.iri.centrepompidou.fr//ldtplatform/ldt/cljson/id/3f1f08e6-66b9-11e1-80f6-00145ea4a2be?callback=?",
+ "snapshot": "stronger.jpg",
+ "gestures": [
+ {
+ "gesture_name": "jump",
+ "snapshot": ""
+ },
+ {
+ "gesture_name": "circle",
+ "snapshot": ""
+ },
+ {
+ "gesture_name": "contact",
+ "snapshot": ""
+ },
+ {
+ "gesture_name": "beat",
+ "snapshot": ""
+ }
+ ]
+ },
+ {
+ "metadata": "http://ldt.iri.centrepompidou.fr//ldtplatform/ldt/cljson/id/82cd7e30-66b7-11e1-80f6-00145ea4a2be?callback=?",
+ "snapshot": "vrtti.jpg",
+ "gestures": [
+ {
+ "gesture_name": "",
+ "snapshot": ""
+ }
+ ]
+ },
+ {
+ "metadata": "http://ldt.iri.centrepompidou.fr//ldtplatform/ldt/cljson/id/60d03074-66b8-11e1-80f6-00145ea4a2be?callback=?",
+ "snapshot": "you_are_you.jpg",
+ "gestures": [
+ {
+ "gesture_name": "",
+ "snapshot": ""
+ }
+ ]
+ },
+ {
+ "metadata": "http://ldt.iri.centrepompidou.fr//ldtplatform/ldt/cljson/id/15a75eea-8870-11e1-9bba-00145ea4a2be?callback=?",
+ "snapshot": "alger.jpg",
+ "gestures": [
+ {
+ "gesture_name": "",
+ "snapshot": ""
+ }
+ ]
+ },
+ {
+ "metadata": "http://ldt.iri.centrepompidou.fr//ldtplatform/ldt/cljson/id/ffbe189a-886e-11e1-9ee2-00145ea4a2be?callback=?",
+ "snapshot": "animalz.jpg",
+ "gestures": [
+ {
+ "gesture_name": "",
+ "snapshot": ""
+ }
+ ]
+ },
+ {
+ "metadata": "http://ldt.iri.centrepompidou.fr//ldtplatform/ldt/cljson/id/a52dc4c4-886f-11e1-9bba-00145ea4a2be?callback=?",
+ "snapshot": "exotica.jpg",
+ "gestures": [
+ {
+ "gesture_name": "",
+ "snapshot": ""
+ }
+ ]
+ },
+ {
+ "metadata": "http://ldt.iri.centrepompidou.fr//ldtplatform/ldt/cljson/id/8a29e4f0-886f-11e1-9ee2-00145ea4a2be?callback=?",
+ "snapshot": "respire.jpg",
+ "gestures": [
+ {
+ "gesture_name": "",
+ "snapshot": ""
+ }
+ ]
+ },
+ {
+ "metadata": "http://ldt.iri.centrepompidou.fr//ldtplatform/ldt/cljson/id/2377411e-9f74-11e1-9f9f-00145ea4a2be?callback=?",
+ "snapshot": "flying_lesson.jpg",
+ "gestures": [
+ {
+ "gesture_name": "",
+ "snapshot": ""
+ }
+ ]
+ },
+ {
+ "metadata": "http://ldt.iri.centrepompidou.fr//ldtplatform/ldt/cljson/id/e3d42dc4-9f73-11e1-9f9f-00145ea4a2be?callback=?",
+ "snapshot": "aside.jpg",
+ "gestures": [
+ {
+ "gesture_name": "",
+ "snapshot": ""
+ }
+ ]
+ },
+ {
+ "metadata": "http://ldt.iri.centrepompidou.fr//ldtplatform/ldt/cljson/id/a98a7bc4-8870-11e1-9ee2-00145ea4a2be?callback=?",
+ "snapshot": "the_rat.jpg",
+ "gestures": [
+ {
+ "gesture_name": "",
+ "snapshot": ""
+ }
+ ]
+ },
+ {
+ "metadata": "http://ldt.iri.centrepompidou.fr//ldtplatform/ldt/cljson/id/f47e1578-8870-11e1-9ee2-00145ea4a2be?callback=?",
+ "snapshot": "tank_man_tango_a_tiananmen_memorial.jpg",
+ "gestures": [
+ {
+ "gesture_name": "",
+ "snapshot": ""
+ }
+ ]
+ }
+ ]
}
\ No newline at end of file
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/front_idill/src/player/metadataplayer/TabletPlayButton.css Thu Aug 16 14:32:19 2012 +0200
@@ -0,0 +1,30 @@
+/*
+* This file is part of the TraKERS\Front IDILL package.
+*
+* (c) IRI <http://www.iri.centrepompidou.fr/>
+*
+* For the full copyright and license information, please view the LICENSE
+* file that was distributed with this source code.
+*/
+
+/*
+ * Projet : TraKERS
+ * Module : Front IDILL
+ * Fichier : TabletPlayButton.css
+ *
+ * Auteur : alexandre.bastien@iri.centrepompidou.fr
+ *
+ * Fonctionnalités : Style associé au Widget PlayButton chargé dans le metadataplayer.
+ */
+
+/* PlayButton Widget */
+
+/*
+ * Style du bouton.
+*/
+#tabletPlayButton
+{
+ background: transparent;
+ background-image: url("../../../img/play_button.png");
+ background-repeat: no-repeat;
+}
\ No newline at end of file
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/front_idill/src/player/metadataplayer/TabletPlayButton.js Thu Aug 16 14:32:19 2012 +0200
@@ -0,0 +1,70 @@
+/*
+* This file is part of the TraKERS\Front IDILL package.
+*
+* (c) IRI <http://www.iri.centrepompidou.fr/>
+*
+* For the full copyright and license information, please view the LICENSE
+* file that was distributed with this source code.
+*/
+
+/*
+ * Projet : TraKERS
+ * Module : Front IDILL
+ * Fichier : TabletPlayButton.js
+ *
+ * Auteur : alexandre.bastien@iri.centrepompidou.fr
+ *
+ * Fonctionnalités : Widget du bouton de lecture du player incorporé dans le Front pour le mode d'interaction pour tablettes.
+ */
+
+/*
+ Ce Widget se superpose à la vidéo.
+ * Est appelé dans les fichiers créant les widgets du metadataplayer.
+ */
+IriSP.Widgets.TabletPlayButton = function(player, config)
+{
+ IriSP.Widgets.Widget.call(this, player, config);
+ // this.bindPopcorn("loadedmetadata","ready");
+ this.paused = true;
+ this.player = player;
+ this.buttonWidth = 85;
+ this.buttonHeight = 69;
+};
+
+/*
+ * Constructeur du Widget.
+*/
+IriSP.Widgets.TabletPlayButton.prototype = new IriSP.Widgets.Widget();
+
+/*
+ * Fonction appelée pour dessiner le bouton.
+*/
+IriSP.Widgets.TabletPlayButton.prototype.draw = function()
+{
+ this.$playButton = IriSP.jQuery('<div>').attr("id", "tabletPlayButton");
+
+ //On l'ajoute au widget.
+ this.$.append(this.$playButton);
+ this.$playButton.css(
+ {
+ position: 'absolute',
+ width: this.player.config.gui.width,
+ height: this.player.config.gui.height,
+ 'margin-top': -this.player.config.gui.height,
+ 'background-position': ((this.player.config.gui.width - this.buttonWidth)/2) + 'px ' + ((this.player.config.gui.height - this.buttonHeight)/2) + 'px'
+ });
+};
+
+/*
+ * Fonction appelée pour dessiner le bouton.
+*/
+IriSP.Widgets.TabletPlayButton.prototype.onPlayButtonTouchStart = function()
+{
+ if(this.paused)
+ {
+ this.paused = false;
+
+ this.$playButton.css('opacity', '0');
+ this.player.popcorn.play();
+ }
+}
\ No newline at end of file
--- a/front_idill/src/player/metadataplayer/Timeline.css Wed Aug 08 18:42:01 2012 +0200
+++ b/front_idill/src/player/metadataplayer/Timeline.css Thu Aug 16 14:32:19 2012 +0200
@@ -37,128 +37,128 @@
* Style de la Timeline.
*/
.Ldt-Timeline {
- border: none;
- border-radius: 0;
- padding: 0;
- margin-top: 0;
- background: transparent;
- background-image: url("../../img/timeline.png");
- background-position: 0px 0px;
- background-repeat: repeat;
+ border: none;
+ border-radius: 0;
+ padding: 0;
+ margin-top: 0;
+ background: transparent;
+ background-image: url("../../img/timeline.png");
+ background-position: 0px 0px;
+ background-repeat: repeat;
}
/*
* Style de la barre centrale de la Timeline.
*/
.Ldt-TimelineMiddle {
- border: none;
- border-radius: 0;
- padding: 0;
- margin-top: 0;
- background: transparent;
- background-image: url("../../img/middle_timeline.png");
- background-position: 0px 0px;
- background-repeat: repeat;
- z-index:100;
+ border: none;
+ border-radius: 0;
+ padding: 0;
+ margin-top: 0;
+ background: transparent;
+ background-image: url("../../img/middle_timeline.png");
+ background-position: 0px 0px;
+ background-repeat: repeat;
+ z-index:100;
}
/*
* Style du slider de la Timeline.
*/
.Ldt-Timeline .ui-slider-handle {
- display: none;
+ display: none;
}
/*
* Style du slider lu de la Timeline.
*/
.Ldt-Timeline .ui-slider-range {
- border: none;
- border-radius: 0;
- padding: 0;
- margin-top: 0;
- background: transparent;
+ border: none;
+ border-radius: 0;
+ padding: 0;
+ margin-top: 0;
+ background: transparent;
background-image: url("../../img/selected_timeline.png");
- background-position: 0px 0px;
- background-repeat: repeat;
- z-index: 50;
+ background-position: 0px 0px;
+ background-repeat: repeat;
+ z-index: 50;
}
/*
* Style des marqueurs et des marqueurs recherchés.
*/
.Ldt-Marker, .search_Marker {
- position: absolute;
- width: 10px;
- height: 10px;
- background: transparent;
- background-image: url("../../img/marker.png");
- background-position: 0px 0px;
- background-repeat: no-repeat;
- z-index: 200;
+ position: absolute;
+ width: 10px;
+ height: 10px;
+ background: transparent;
+ background-image: url("../../img/marker.png");
+ background-position: 0px 0px;
+ background-repeat: no-repeat;
+ z-index: 200;
}
/*
* Style des bordures d'une Timeline sélectionnée.
*/
.TL_Borders {
- position: absolute;
- background-image: url("../../img/selected_timeline.png");
- background-position: 0px 0px;
- background-repeat: repeat;
- z-index: 150;
+ position: absolute;
+ background-image: url("../../img/selected_timeline.png");
+ background-position: 0px 0px;
+ background-repeat: repeat;
+ z-index: 150;
}
/*
* Style des flèches d'une Timeline sélectionnée.
*/
.TL_Arrows {
- position: absolute;
- display: none;
- width: 24px;
- height: 20px;
- background-position: 0px 0px;
- background-repeat: no-repeat;
- z-index: 150;
+ position: absolute;
+ display: none;
+ width: 24px;
+ height: 20px;
+ background-position: 0px 0px;
+ background-repeat: no-repeat;
+ z-index: 150;
}
/*
* Style des détails des marqueurs lorsque le curseur passe dessus.
*/
.TL_MarkersBig {
- position: absolute;
- display: none;
- z-index: 200;
+ position: absolute;
+ display: none;
+ z-index: 200;
}
/*
* Style des textes des détails des marqueurs.
*/
#MB_Text {
- background-color: rgba(34, 34, 34, 1);
- padding: 8px 18px 8px 18px;
- color: #FFFFFF;
- //font-family: DIN-Medium, Fallback, sans-serif;
- font-size: 22px;
+ background-color: rgba(34, 34, 34, 1);
+ padding: 8px 18px 8px 18px;
+ color: #FFFFFF;
+ //font-family: DIN-Medium, Fallback, sans-serif;
+ font-size: 22px;
}
/*
* Style des pics associés aux textes des détails des marqueurs.
*/
#MB_Spike {
- width: 10px;
- height: 5px;
- background-image: url("../../img/spike.png");
- background-position: 0px 0px;
- background-repeat: no-repeat;
+ width: 10px;
+ height: 5px;
+ background-image: url("../../img/spike.png");
+ background-position: 0px 0px;
+ background-repeat: no-repeat;
}
/*
* Style des images associées aux détails des marqueurs.
*/
#MB_Pic, .search_MBPic {
- width: 38px;
- height: 45px;
- background-position: 0px 0px;
- background-repeat: no-repeat;
+ width: 38px;
+ height: 45px;
+ background-position: 0px 0px;
+ background-repeat: no-repeat;
}
\ No newline at end of file
--- a/front_idill/src/player/metadataplayer/Timeline.js Wed Aug 08 18:42:01 2012 +0200
+++ b/front_idill/src/player/metadataplayer/Timeline.js Thu Aug 16 14:32:19 2012 +0200
@@ -51,11 +51,11 @@
this.gestures = ["fall", "jump", "circle", "screw", "bend", "arc", "knee-up", "right-angle", "wave", "no-motion", "contact", "up-down"];
this.gesturesText = ["chute", "saut", "rotation", "rotation de groupe", "inclinaison", "port de bras", "levé de genou", "angle droit", "ondulation", "immobilité", "contact", "de haut en bas", "grand-jeté"];
- var _this = this;
+ var _this = this;
this.annotations = this.source.getAnnotations().filter(function(annotation)
- {
- return _this.isGesture(annotation, null, _this.gestures);
- });
+ {
+ return _this.isGesture(annotation, null, _this.gestures);
+ });
};
/*
@@ -128,7 +128,6 @@
//On l'ajoute au widget.
this.$.append(this.$timeline);
this.$.append(this.$timelineMiddle);
-
var _this = this;
//On définit le slider.
@@ -164,16 +163,17 @@
this.maximized = false;
this.timeoutId = false;
+
+ this.processMarkers();
};
/*
* Starts playing the video when it's ready.
*/
IriSP.Widgets.Timeline.prototype.ready = function() {
- // alert('rdy');
this.player.popcorn.play();
this.player.popcorn.mute();
- this.processMarkers();
+ // this.processMarkers();
}
/*
@@ -185,13 +185,13 @@
*/
IriSP.Widgets.Timeline.prototype.scaleIntervals = function(A, B, C, D, val) {
if(A == B)
- {
- return (D - C) / 2;
- }
- else
- {
- return (D - C) * (val - A) / (B - A) + C;
- }
+ {
+ return (D - C) / 2;
+ }
+ else
+ {
+ return (D - C) * (val - A) / (B - A) + C;
+ }
}
/*
@@ -205,12 +205,13 @@
//On calcule la position en Y de la timeline.
var timelineMiddleTop = this.$timelineMiddle.position().top;
+ var TLHeight = this.$timeline.height()/2;
+
//Pour toutes les annotations, on crée les marqueurs.
for(var i = 0 ; i < this.annotations.length ; i++)
{
markers += "<div class='Ldt-Marker' id='" + this.annotations[i].id.replace(":", "_") + "'></div>";
}
-
//On les ajoute.
this.$.append(markers);
var markerHeight = IriSP.jQuery(".Ldt-Marker").height();
@@ -224,7 +225,7 @@
{
top: timelineMiddleTop + "px",
left: Math.floor(+this.scaleIntervals(0, this.source.getDuration().getSeconds(), 0, this.$timeline.width(), this.annotations[i].begin/1000) + this.$timeline.position().left) + "px",
- "margin-top": (-_this.$timeline.height()/2 - markerHeight/2) - this.top_epsilon + "px"
+ "margin-top": (-TLHeight - markerHeight/2) - this.top_epsilon + "px"
});
}
@@ -479,6 +480,7 @@
if(nearestMarkerIdx != this.previousMarkerIdx)
{
var currentMarker = IriSP.jQuery("#" + this.annotations[nearestMarkerIdx].id.replace(":", "_"));
+
//S'il existe un marqueur précédent, on le cache.
if(this.previousMarkerIdx > -1)
{
@@ -537,13 +539,15 @@
IriSP.Widgets.Timeline.prototype.calculateTimelineCss = function(_size) {
//Longueur du player.
var middleWidth = this.player.config.gui.width;
+ var TLHeight = _size;
+
//On met à jour la marge, les coordonnées et positions de la timeline.
return {
position: "absolute",
top: "0px",
left: "0px",
width: middleWidth + "px",
- height: _size + "px",
+ height: TLHeight + "px",
"margin-top": (-this.minimized_height - this.top_epsilon) + "px",
"z-align": "50"
};
@@ -631,12 +635,13 @@
var markerBigTextWidth = markerBigText.outerWidth(), markerBigTextHeight = markerBigText.outerHeight();
var markerBigSpikeWidth = markerBigSpike.width(), markerBigSpikeHeight = markerBigSpike.height();
var markerBigPicWidth = markerBigPic.width(), markerBigPicHeight = markerBigPic.height();
- var markerBigPicTop = +parseFloat(marker.css("margin-top")) + markerHeight, markerBigPicLeft = (markerLeft - markerBigPicWidth/2 + markerWidth/2);
- var markerBigTextTop = (parseFloat(marker.css("margin-top")) - markerBigTextHeight - markerBigSpikeHeight), markerBigTextLeft = (markerLeft - (markerBigTextWidth - markerBigSpikeWidth)/2);
+ var markerBigPicTop = +parseInt(marker.css("margin-top")) + markerHeight, markerBigPicLeft = (markerLeft - markerBigPicWidth/2 + markerWidth/2);
+ var markerBigTextTop = (parseInt(marker.css("margin-top")) - markerBigTextHeight - markerBigSpikeHeight), markerBigTextLeft = (markerLeft - (markerBigTextWidth - markerBigSpikeWidth)/2);
var markerBigSpikeLeft = ((markerBigTextWidth - markerBigSpikeWidth)/2);
//On va chercher les images correspondantes.
marker.css("background-image", "url(" + this.imgDir + "selected_marker.png)");
//On met à jour leur apparence.
+
IriSP.jQuery("#MB_Text").css(
{
top: markerBigTextTop,
@@ -724,7 +729,7 @@
//On calcule les coordonnées et dimensions du marqueur.
var markerId = this.annotations[i].id.replace(":", "_"), marker = IriSP.jQuery("#" + markerId);
var markerTop = marker.position().top, markerLeft = marker.position().left, markerWidth = marker.width(), markerHeight = marker.height();
- var markerBigPicWidth = parseFloat(IriSP.jQuery(".search_MBPic").css("width")), markerBigPicHeight = parseFloat(IriSP.jQuery(".search_MBPic").css("height")), markerBigPicTop = +parseFloat(marker.css("margin-top")) + markerHeight, markerBigPicLeft = (markerLeft - markerBigPicWidth/2 + markerWidth/2);
+ var markerBigPicWidth = parseInt(IriSP.jQuery(".search_MBPic").css("width")), markerBigPicHeight = parseInt(IriSP.jQuery(".search_MBPic").css("height")), markerBigPicTop = +parseInt(marker.css("margin-top")) + markerHeight, markerBigPicLeft = (markerLeft - markerBigPicWidth/2 + markerWidth/2);
//On calcule son apparence et on le fait apparaître.
IriSP.jQuery("#search_Pic_" + markerId).css(
{
@@ -817,35 +822,35 @@
var targetCursorPosition = currentCursorPosition;
//Distance minimum de l'annotation par rapport au curseur et son index, ainsi que l'index - 1 pour le cas du swipe right.
var minDistance = this.source.getDuration().milliseconds, minIdx = 0, mindIdx_1 = 0;
-
- //Condition de sélection du marqueur selon le type de swipe.
- var swipeCondition;
-
+
+ //Condition de sélection du marqueur selon le type de swipe.
+ var swipeCondition;
+
//Si il y a au moins 1 annotation.
if(this.annotations && this.annotations.length > 0)
{
- //Pour toutes les annotations, on prend celle qui est la plus proche et supérieure à la position.
- for(var i = 0 ; i < this.annotations.length ; i++)
- {
- swipeCondition = (isSwipeLeft ? (currentCursorPosition < this.annotations[i].begin && minDistance > Math.abs(currentCursorPosition - this.annotations[i].begin)) : (currentCursorPosition > this.annotations[i].begin && minDistance > Math.abs(currentCursorPosition - this.annotations[i].begin)));
-
- if(swipeCondition)
- {
- //Si on recherche une gesture.
- if(searchedGesture != '')
- {
- //Si l'annotation actuelle ne correspond pas à la gesture recherchée, on passe.
- if(this.annotations[i].annotationType.contents.title != searchedGesture)
- {
- continue;
- }
- }
-
- //On calcule la plus petite distance entre le marqueur marqueur actuel et les autres.
- minDistance = (currentCursorPosition - this.annotations[i].begin);
- minIdx = i;
- }
- }
+ //Pour toutes les annotations, on prend celle qui est la plus proche et supérieure à la position.
+ for(var i = 0 ; i < this.annotations.length ; i++)
+ {
+ swipeCondition = (isSwipeLeft ? (currentCursorPosition < this.annotations[i].begin && minDistance > Math.abs(currentCursorPosition - this.annotations[i].begin)) : (currentCursorPosition > this.annotations[i].begin && minDistance > Math.abs(currentCursorPosition - this.annotations[i].begin)));
+
+ if(swipeCondition)
+ {
+ //Si on recherche une gesture.
+ if(searchedGesture != '')
+ {
+ //Si l'annotation actuelle ne correspond pas à la gesture recherchée, on passe.
+ if(this.annotations[i].annotationType.contents.title != searchedGesture)
+ {
+ continue;
+ }
+ }
+
+ //On calcule la plus petite distance entre le marqueur marqueur actuel et les autres.
+ minDistance = (currentCursorPosition - this.annotations[i].begin);
+ minIdx = i;
+ }
+ }
//On obtient la position du plus proche marqueur.
targetCursorPosition = this.annotations[minIdx].begin;
--- a/front_idill/src/search/css/searchCanvas.css Wed Aug 08 18:42:01 2012 +0200
+++ b/front_idill/src/search/css/searchCanvas.css Thu Aug 16 14:32:19 2012 +0200
@@ -22,8 +22,8 @@
*/
.canvas
{
- position: absolute;
- background-color: #fff;
- background: transparent;
- z-index: 500;
+ position: absolute;
+ background-color: #fff;
+ background: transparent;
+ z-index: 500;
}
\ No newline at end of file
--- a/front_idill/src/search/js/curvesDetector.js Wed Aug 08 18:42:01 2012 +0200
+++ b/front_idill/src/search/js/curvesDetector.js Thu Aug 16 14:32:19 2012 +0200
@@ -35,7 +35,7 @@
//Code actuel généré. Il représente la structure de la courbe de recherche.
this.actualCode = '';
- //Les éléments composant le code (correspondant aux courbes.
+ //Les éléments composant le code (correspondant aux courbes.
this.MPCode = '';
this.SPCode = '';
@@ -90,8 +90,8 @@
{
this.MPrepX = 0;
this.MPrepY = 0;
- this.SPrepX = 0;
- this.SPrepY = 0;
+ this.SPrepX = 0;
+ this.SPrepY = 0;
this.MPpx = 0;
this.MPpy = 0;
this.SPpx = 0;
@@ -152,14 +152,14 @@
{
this.SPpy = spy;
}
- if(!this.SPrepX)
- {
- this.SPrepX = spx;
- }
- if(!this.SPrepY)
- {
- this.SPrepY = spy;
- }
+ if(!this.SPrepX)
+ {
+ this.SPrepX = spx;
+ }
+ if(!this.SPrepY)
+ {
+ this.SPrepY = spy;
+ }
}
//On met à jour la distance des segments courants et on regarde les correspondances dans le dictionnaire.
@@ -173,12 +173,12 @@
*/
CurvesDetector.prototype.updateDists = function()
{
- //Si on n'est pas en recherche pas courbes, on part.
- if(!this.mosaic.isSearchByCurvesOn)
- {
- return;
- }
-
+ //Si on n'est pas en recherche pas courbes, on part.
+ if(!this.mosaic.isSearchByCurvesOn)
+ {
+ return;
+ }
+
var foundGestures;
//Si on a de quoi calculer les distances.
@@ -194,9 +194,9 @@
//Angle courant initialisé à -1.
var MPCurrentA = -1;
- //Seuil de considération d'un segment.
- var treshold = (this.mosaic.config.mouseInteractions ? this.mosaic.config.mouseUpDownDeltaTreshold : this.mosaic.config.kinectUpDownDeltaTreshold);
-
+ //Seuil de considération d'un segment.
+ var treshold = (this.mosaic.config.mouseInteractions ? this.mosaic.config.mouseUpDownDeltaTreshold : this.mosaic.config.kinectUpDownDeltaTreshold);
+
//Si la distance actuelle du segment existe.
if(MPDist > treshold)
{
@@ -214,18 +214,18 @@
this.MPActualAngle = MPCurrentA;
//On construit le code correspondant à ce segment.
this.MPCode += 'D' + MPCurrentA;
-
- if(this.mosaic.config.mouseInteractions)
- {
- this.actualCode = this.MPCode;
- //On affecte le code dans la mosaique.
- this.mosaic.actualCode = this.actualCode;
- //On recherche les gestures commencant par ce code.
- foundGestures = this.codeToGestures(this.actualCode);
- // console.log(this.actualCode);
- this.foundGesturesManagement(foundGestures);
- }
-
+
+ if(this.mosaic.config.mouseInteractions)
+ {
+ this.actualCode = this.MPCode;
+ //On affecte le code dans la mosaique.
+ this.mosaic.actualCode = this.actualCode;
+ //On recherche les gestures commencant par ce code.
+ foundGestures = this.codeToGestures(this.actualCode);
+ // console.log(this.actualCode);
+ this.foundGesturesManagement(foundGestures);
+ }
+
//On réinitialise la distance entre les deux derniers points.
this.MPActualDist = 0;
}
@@ -255,7 +255,7 @@
this.MPpy = this.MPy;
}
}
-
+
//Idem au cas où on aurait un deuxième pointeur.
if(this.SPx && this.SPy && this.SPpx && this.SPpy && this.SPrepX && this.SPrepY)
{
@@ -266,20 +266,20 @@
//Et aussi la distance du segment en cours.
this.SPActualDist += SPDist;
- //Angle courant initialisé à -1.
+ //Angle courant initialisé à -1.
var SPCurrentA = -1;
-
- //Seuil de considération d'un segment.
- var treshold = (this.mosaic.config.mouseInteractions ? this.mosaic.config.mouseUpDownDeltaTreshold : this.mosaic.config.kinectUpDownDeltaTreshold);
-
+
+ //Seuil de considération d'un segment.
+ var treshold = (this.mosaic.config.mouseInteractions ? this.mosaic.config.mouseUpDownDeltaTreshold : this.mosaic.config.kinectUpDownDeltaTreshold);
+
//Si la distance actuelle du segment est plus grande que le treshold.
if(SPDist > treshold)
{
//On calcule l'angle courant entre ce segment en divisions horaires.
SPCurrentA = this.currentAngle(this.SPrepX, this.SPrepY, this.SPx, this.SPy, this.divisions);
}
-
- //Si la distance du segment actuel excède le seuil de la config et qu'il y a un angle.
+
+ //Si la distance du segment actuel excède le seuil de la config et qu'il y a un angle.
if(this.SPActualDist > this.sizeTreshold && SPCurrentA != -1)
{
//Si l'angle affecté n'a pas encore de valeur ou si l'angle affecté est différent de l'angle calculé.
@@ -289,7 +289,7 @@
this.SPActualAngle = SPCurrentA;
//On construit le code correspondant à ce segment.
this.SPCode += 'D' + SPCurrentA;
-
+
//On réinitialise la distance entre les deux derniers points.
this.SPActualDist = 0;
}
@@ -319,16 +319,16 @@
this.SPpy = this.SPy;
}
}
-
- if(!this.mosaic.config.mouseInteractions && (this.SPCode || this.MPCode))
- {
- this.actualCode = this.SPCode + ':' + this.MPCode;
- // console.log(this.actualCode);
- this.mosaic.actualCode = this.actualCode;
- //On recherche les gestures commencant par ce code.
- foundGestures = this.codeToGestures(this.actualCode);
- this.foundGesturesManagement(foundGestures);
- }
+
+ if(!this.mosaic.config.mouseInteractions && (this.SPCode || this.MPCode))
+ {
+ this.actualCode = this.SPCode + ':' + this.MPCode;
+ // console.log(this.actualCode);
+ this.mosaic.actualCode = this.actualCode;
+ //On recherche les gestures commencant par ce code.
+ foundGestures = this.codeToGestures(this.actualCode);
+ this.foundGesturesManagement(foundGestures);
+ }
}
/*
@@ -347,27 +347,27 @@
//Pour touts les codes de chaque gesture du dictionnaire.
for(var j = 0 ; j < this.dictionary[i].codes.length ; j++)
{
- if(this.mosaic.config.mouseInteractions)
- {
- //Si le code en entrée est une partie début d'un des codes.
- if(this.dictionary[i].codes[j].indexOf(code) == 0)
- {
- //On ajoute le nom de la gesture et on passe à la gesture suivante.
- retNames += this.dictionary[i].name + ';';
- break;
- }
- }
- else
- {
- //On décompose le code dynamique et du dictionnaire en deux parties.
- var partsCode = code.split(':'), partsDicoCode = this.dictionary[i].codes[j].split(':');
- //Si les débuts des deux parties correspondent aux deux parties du code dynamique.
- if(partsDicoCode[0].indexOf(partsCode[0]) == 0 && partsDicoCode[1].indexOf(partsCode[1]) == 0)
- {
- retNames += this.dictionary[i].name + ';';
- break;
- }
- }
+ if(this.mosaic.config.mouseInteractions)
+ {
+ //Si le code en entrée est une partie début d'un des codes.
+ if(this.dictionary[i].codes[j].indexOf(code) == 0)
+ {
+ //On ajoute le nom de la gesture et on passe à la gesture suivante.
+ retNames += this.dictionary[i].name + ';';
+ break;
+ }
+ }
+ else
+ {
+ //On décompose le code dynamique et du dictionnaire en deux parties.
+ var partsCode = code.split(':'), partsDicoCode = this.dictionary[i].codes[j].split(':');
+ //Si les débuts des deux parties correspondent aux deux parties du code dynamique.
+ if(partsDicoCode[0].indexOf(partsCode[0]) == 0 && partsDicoCode[1].indexOf(partsCode[1]) == 0)
+ {
+ retNames += this.dictionary[i].name + ';';
+ break;
+ }
+ }
}
}
//Comme on sépare chaque nom par un ;, il faut supprimer le dernier si au moins un nom a été trouvé.
@@ -406,108 +406,108 @@
*/
CurvesDetector.prototype.foundGesturesManagement = function(foundGestures)
{
- //S'il n'y a pas de gestures trouvées ou s'il y en a plus d'une.
- if(foundGestures.length == 0 || foundGestures.split(';').length != 1)
- {
- //On a trouvé quelque chose, même si ce qu'on a trouvé est vide ('').
- this.mosaic.curvesGesturesFound = true;
- //On notifie ce qu'on a trouvé. Dans le cas où c'est '', on affiche geste inconnu.
- this.mosaic.removeNotifications();
- this.mosaic.curvesGestures(foundGestures);
-
- //Si ce qu'on a trouvé est vide en mode d'interaction Kinect.
- if(foundGestures.length == 0 && !this.mosaic.config.mouseInteractions)
- {
- //Si on est en mode d'interaction Kinect, on désactive les courbes jusqu'à ce que l'utilisateur n'a plus les deux mains dans la zone (pour éviter les erreurs de manipulation).
- this.mosaic.mustTakeOutHands = true;
-
- /*//On affiche différentes aides en fonction de si on se trouve dans une vidéo ou non.
- if(this.mosaic.currentMode == 'SEARCH')
- {
- // this.mosaic.notifyHelp(false);
- }
- else if(this.mosaic.currentMode == 'FILTER')
- {
- // this.mosaic.notifyHelp(true);
- }*/
- foundGestures = '';
-
- //On enlève la recherche.
- this.mosaic.curvesGesturesFound = false;
- this.mosaic.isSearchByCurvesOn = false;
- this.mosaic.leaveSearch();
-
- //Si on était en mode filtrage de la mosaïque et qu'aucune gesture de filtrage n'avait été détectée avant ca, on revient en mode mosaïque.
- if(this.mosaic.currentMode == "FILTER" && this.mosaic.filterSearchedType == "")
- {
- this.mosaic.currentMode = "MOSAIC";
- this.mosaic.isMosaicFiltered = false;
- }
- //Sinon si on était en mode recherche dans une video et qu'aucune gesture n'avait été détectée avant ca, on revient en mode video.
- if(this.mosaic.currentMode == "SEARCH" && this.mosaic.currentSearchGesture[this.mosaic.centerId] == "")
- {
- this.mosaic.currentMode = "VIDEO";
- }
- }
- /*//Si l'aide est déjà affichée, on l'enlève.
- else if(foundGestures.split(';').length != 1 && this.mosaic.helpDisplayed && !this.mosaic.mustTakeOutHands)
- {
- // this.mosaic.removeHelp();
- }*/
- }
- //Si on a un seul résultat.
- else
- {
- //Si on est en mode d'interaction Kinect, on désactive les courbes jusqu'à ce que l'utilisateur n'a plus les deux mains dans la zone (pour éviter les erreurs de manipulation).
- this.mosaic.mustTakeOutHands = true;
-
- // On affecte la recherche.
- this.mosaic.currentSearchGesture[this.mosaic.centerId] = foundGestures;
- this.mosaic.isUserInSearchZone = false;
-
- //Si on est en mode recherche et que le player est prêt.
- if(this.mosaic.currentMode == "SEARCH" && this.mosaic.playerIsReady)
- {
- //On effectue la recherche.
- this.mosaic.player.widgets[0].searchByGesture(foundGestures);
- this.mosaic.isCurrentlyInASearchByGesture = this.mosaic.player.widgets[0].isCurrentlyInASearchByGesture;
-
- //On notifie.
- this.mosaic.removeNotifications();
- this.mosaic.searchGesture(foundGestures, 'valid');
-
- //S'il y a un marqueur trouvé au moins, on place le curseur sur le premier résultat.
- if(this.mosaic.player && this.mosaic.player.widgets[0] && this.mosaic.timeToGoAt[this.mosaic.centerId] === 0 && this.mosaic.player.widgets[0].atLeastOneSearchMarker(this.mosaic.currentSearchGesture[this.mosaic.centerId]))
- {
- this.mosaic.player.widgets[0].goToFirstSearchedMarker(this.mosaic.currentSearchGesture[this.mosaic.centerId]);
- }
-
- //On enlève a recherche par courbes.
- foundGestures = '';
- this.mosaic.curvesGesturesFound = false;
-
- this.mosaic.isSearchByCurvesOn = false;
- this.mosaic.leaveSearch();
- }
- //Si on est en filtrage.
- else if(this.mosaic.currentMode == "FILTER")
- {
- if(this.mosaic.isMosaicFiltered)
- {
- //On met à jour la gesture de filtrage.
- this.mosaic.filterSearchedType = foundGestures;
- //On filtre la mosaique.
- this.mosaic.searchFilter(foundGestures);
- this.mosaic.curvesGesturesFound = false;
- //On notifie.
- this.mosaic.removeNotifications();
- this.mosaic.filterGesture(foundGestures, 'valid');
-
- foundGestures = '';
- //On enlève la recherche par courbes.
- this.mosaic.isSearchByCurvesOn = false;
- this.mosaic.leaveSearch();
- }
- }
- }
+ //S'il n'y a pas de gestures trouvées ou s'il y en a plus d'une.
+ if(foundGestures.length > -1)
+ {
+ //On a trouvé quelque chose, même si ce qu'on a trouvé est vide ('').
+ this.mosaic.curvesGesturesFound = true;
+ //On notifie ce qu'on a trouvé. Dans le cas où c'est '', on affiche geste inconnu.
+ this.mosaic.removeNotifications();
+ this.mosaic.curvesGestures(foundGestures);
+
+ //Si ce qu'on a trouvé est vide en mode d'interaction Kinect.
+ if(foundGestures.length == 0 && !this.mosaic.config.mouseInteractions)
+ {
+ //Si on est en mode d'interaction Kinect, on désactive les courbes jusqu'à ce que l'utilisateur n'a plus les deux mains dans la zone (pour éviter les erreurs de manipulation).
+ this.mosaic.mustTakeOutHands = true;
+
+ /*//On affiche différentes aides en fonction de si on se trouve dans une vidéo ou non.
+ if(this.mosaic.currentMode == 'SEARCH')
+ {
+ // this.mosaic.notifyHelp(false);
+ }
+ else if(this.mosaic.currentMode == 'FILTER')
+ {
+ // this.mosaic.notifyHelp(true);
+ }*/
+ foundGestures = '';
+
+ //On enlève la recherche.
+ this.mosaic.curvesGesturesFound = false;
+ this.mosaic.isSearchByCurvesOn = false;
+ this.mosaic.leaveSearch();
+
+ //Si on était en mode filtrage de la mosaïque et qu'aucune gesture de filtrage n'avait été détectée avant ca, on revient en mode mosaïque.
+ if(this.mosaic.currentMode == "FILTER" && this.mosaic.filterSearchedType == "")
+ {
+ this.mosaic.currentMode = "MOSAIC";
+ this.mosaic.isMosaicFiltered = false;
+ }
+ //Sinon si on était en mode recherche dans une video et qu'aucune gesture n'avait été détectée avant ca, on revient en mode video.
+ if(this.mosaic.currentMode == "SEARCH" && this.mosaic.currentSearchGesture[this.mosaic.centerId] == "")
+ {
+ this.mosaic.currentMode = "VIDEO";
+ }
+ }
+ /*//Si l'aide est déjà affichée, on l'enlève.
+ else if(foundGestures.split(';').length != 1 && this.mosaic.helpDisplayed && !this.mosaic.mustTakeOutHands)
+ {
+ // this.mosaic.removeHelp();
+ }*/
+ }
+ //Si on a un seul résultat.
+ /*else
+ {
+ //Si on est en mode d'interaction Kinect, on désactive les courbes jusqu'à ce que l'utilisateur n'a plus les deux mains dans la zone (pour éviter les erreurs de manipulation).
+ this.mosaic.mustTakeOutHands = true;
+
+ // On affecte la recherche.
+ this.mosaic.currentSearchGesture[this.mosaic.centerId] = foundGestures;
+ this.mosaic.isUserInSearchZone = false;
+
+ //Si on est en mode recherche et que le player est prêt.
+ if(this.mosaic.currentMode == "SEARCH" && this.mosaic.playerIsReady)
+ {
+ //On effectue la recherche.
+ this.mosaic.player.widgets[0].searchByGesture(foundGestures);
+ this.mosaic.isCurrentlyInASearchByGesture = this.mosaic.player.widgets[0].isCurrentlyInASearchByGesture;
+
+ //On notifie.
+ this.mosaic.removeNotifications();
+ this.mosaic.searchGesture(foundGestures, 'valid');
+
+ //S'il y a un marqueur trouvé au moins, on place le curseur sur le premier résultat.
+ if(this.mosaic.player && this.mosaic.player.widgets[0] && this.mosaic.timeToGoAt[this.mosaic.centerId] === 0 && this.mosaic.player.widgets[0].atLeastOneSearchMarker(this.mosaic.currentSearchGesture[this.mosaic.centerId]))
+ {
+ this.mosaic.player.widgets[0].goToFirstSearchedMarker(this.mosaic.currentSearchGesture[this.mosaic.centerId]);
+ }
+
+ //On enlève a recherche par courbes.
+ foundGestures = '';
+ this.mosaic.curvesGesturesFound = false;
+
+ this.mosaic.isSearchByCurvesOn = false;
+ this.mosaic.leaveSearch();
+ }
+ //Si on est en filtrage.
+ else if(this.mosaic.currentMode == "FILTER")
+ {
+ if(this.mosaic.isMosaicFiltered)
+ {
+ //On met à jour la gesture de filtrage.
+ this.mosaic.filterSearchedType = foundGestures;
+ //On filtre la mosaique.
+ this.mosaic.searchFilter(foundGestures);
+ this.mosaic.curvesGesturesFound = false;
+ //On notifie.
+ this.mosaic.removeNotifications();
+ this.mosaic.filterGesture(foundGestures, 'valid');
+
+ foundGestures = '';
+ //On enlève la recherche par courbes.
+ this.mosaic.isSearchByCurvesOn = false;
+ this.mosaic.leaveSearch();
+ }
+ }
+ }*/
}
\ No newline at end of file
--- a/front_idill/src/search/js/searchCanvas.js Wed Aug 08 18:42:01 2012 +0200
+++ b/front_idill/src/search/js/searchCanvas.js Thu Aug 16 14:32:19 2012 +0200
@@ -107,11 +107,11 @@
{
$('.canvas').remove();
});
-
- if(this.mosaic.isTablet)
- {
- this.mosaic.isTouchStart = false;
- }
+
+ if(this.mosaic.isTablet)
+ {
+ this.mosaic.isTouchStart = false;
+ }
};
/*
@@ -122,18 +122,18 @@
*/
SearchCanvas.prototype.onPointerIn = function(mainPointerX, mainPointerY, secondPointerX, secondPointerY)
{
- // console.log('IN');
-
+ // console.log('IN');
+
if(this.mosaic.currentMode != 'MOSAIC' && this.mosaic.currentMode != 'FILTER')
{
mainPointerX -= 130;
mainPointerY -= 60;
-
- if(secondPointerX && secondPointerY)
- {
- secondPointerX -= 130;
- secondPointerY -= 60;
- }
+
+ if(secondPointerX && secondPointerY)
+ {
+ secondPointerX -= 130;
+ secondPointerY -= 60;
+ }
}
//On obtient les coordonnées du pointeur principal en px.
@@ -188,19 +188,19 @@
*/
SearchCanvas.prototype.onPointerMove = function(mainPointerX, mainPointerY, secondPointerX, secondPointerY)
{
- // console.log('MOVE');
-
+ // console.log('MOVE');
+
//Si on est dans une video, on réhausse
if(this.mosaic.currentMode != 'MOSAIC' && this.mosaic.currentMode != 'FILTER' && this.mosaic.config.mouseInteractions)
{
- mainPointerX -= 130;
- mainPointerY -= 60;
-
- if(secondPointerX && secondPointerY)
- {
- secondPointerX -= 130;
- secondPointerY -= 60;
- }
+ // mainPointerX -= 130;
+ // mainPointerY -= 60;
+
+ if(secondPointerX && secondPointerY)
+ {
+ secondPointerX -= 130;
+ secondPointerY -= 60;
+ }
}
//On obtient les coordonnées du pointeur principal en px.
@@ -288,83 +288,83 @@
*/
SearchCanvas.prototype.onPointerOut = function()
{
- // console.log('OUT');
- // console.trace();
-
- //On quitte la zone de recherche.
- this.isUserInSearchZone = false;
-
- //On regarde si ce qu'on a tracé correspond à une courbe en particulier.
- var gesture_match = this.mosaic.gestureWithSameCode(this.mosaic.actualCode);
- this.mosaic.actualCode = '';
-
- //Si oui.
- if(gesture_match.length > 0)
- {
- //Si on est en mode recherche dans une vidéo et que le player est prêt.
- if(this.mosaic.currentMode == "SEARCH" && this.mosaic.playerIsReady)
- {
- //On effectue une recherche dans cette vidéo.
- this.mosaic.player.widgets[0].searchByGesture(gesture_match);
- this.mosaic.isCurrentlyInASearchByGesture = this.mosaic.player.widgets[0].isCurrentlyInASearchByGesture;
-
- //On va au premier marqueur trouvé.
- if(this.mosaic.player && this.mosaic.player.widgets[0] && this.mosaic.timeToGoAt[this.mosaic.centerId] === 0 && this.mosaic.player.widgets[0].atLeastOneSearchMarker(this.mosaic.currentSearchGesture[this.mosaic.centerId]))
- {
- this.mosaic.player.widgets[0].goToFirstSearchedMarker(this.mosaic.currentSearchGesture[this.mosaic.centerId]);
- }
-
- //On affiche la notification de gesture de recherche.
- this.mosaic.removeNotifications();
- this.mosaic.currentSearchGesture[this.mosaic.centerId] = gesture_match;
- this.mosaic.searchGesture(gesture_match, 'valid');
- this.mosaic.curvesGesturesFound = false;
- }
- //Si on est en mode de filtrage de mosaique.
- else if(this.mosaic.currentMode == "FILTER")
- {
- if(this.mosaic.isMosaicFiltered)
- {
- //On notifie la recherche par filtrage.
- this.mosaic.removeNotifications();
- this.mosaic.filterSearchedType = gesture_match;
- this.mosaic.filterGesture(gesture_match, 'valid');
- //On filtre la mosaique.
- this.mosaic.searchFilter(gesture_match);
- this.mosaic.curvesGesturesFound = false;
- }
- }
- }
- //Si aucune gesture ne matche dans le dictionnaire.
- else if(!this.mosaic.mustTakeOutHands && this.mosaic.mouseInteractions)
- {
- //Si on était en mode filtrage de la mosaïque et qu'aucune gesture de filtrage n'avait été détectée avant ca, on revient en mode mosaïque.
- if(this.mosaic.currentMode == "FILTER" && this.mosaic.filterSearchedType == "")
- {
- this.mosaic.currentMode = "MOSAIC";
- this.mosaic.isMosaicFiltered = false;
- }
- //Sinon si on était en mode recherche dans une video et qu'aucune gesture n'avait été détectée avant ca, on revient en mode video.
- if(this.mosaic.currentMode == "SEARCH" && this.mosaic.currentSearchGesture[this.mosaic.centerId] == "")
- {
- this.mosaic.currentMode = "VIDEO";
- }
- }
-
+ // console.log('OUT');
+ // console.trace();
+
+ //On quitte la zone de recherche.
+ this.isUserInSearchZone = false;
+
+ //On regarde si ce qu'on a tracé correspond à une courbe en particulier.
+ var gesture_match = this.mosaic.gestureWithSameCode(this.mosaic.actualCode);
+ this.mosaic.actualCode = '';
+
+ //Si oui.
+ if(gesture_match.length > 0)
+ {
+ //Si on est en mode recherche dans une vidéo et que le player est prêt.
+ if(this.mosaic.currentMode == "SEARCH" && this.mosaic.playerIsReady)
+ {
+ //On effectue une recherche dans cette vidéo.
+ this.mosaic.player.widgets[0].searchByGesture(gesture_match);
+ this.mosaic.isCurrentlyInASearchByGesture = this.mosaic.player.widgets[0].isCurrentlyInASearchByGesture;
+
+ //On va au premier marqueur trouvé.
+ if(this.mosaic.player && this.mosaic.player.widgets[0] && this.mosaic.timeToGoAt[this.mosaic.centerId] === 0 && this.mosaic.player.widgets[0].atLeastOneSearchMarker(this.mosaic.currentSearchGesture[this.mosaic.centerId]))
+ {
+ this.mosaic.player.widgets[0].goToFirstSearchedMarker(this.mosaic.currentSearchGesture[this.mosaic.centerId]);
+ }
+
+ //On affiche la notification de gesture de recherche.
+ this.mosaic.removeNotifications();
+ this.mosaic.currentSearchGesture[this.mosaic.centerId] = gesture_match;
+ this.mosaic.searchGesture(gesture_match, 'valid');
+ this.mosaic.curvesGesturesFound = false;
+ }
+ //Si on est en mode de filtrage de mosaique.
+ else if(this.mosaic.currentMode == "FILTER")
+ {
+ if(this.mosaic.isMosaicFiltered)
+ {
+ //On notifie la recherche par filtrage.
+ this.mosaic.removeNotifications();
+ this.mosaic.filterSearchedType = gesture_match;
+ this.mosaic.filterGesture(gesture_match, 'valid');
+ //On filtre la mosaique.
+ this.mosaic.searchFilter(gesture_match);
+ this.mosaic.curvesGesturesFound = false;
+ }
+ }
+ }
+ //Si aucune gesture ne matche dans le dictionnaire.
+ else if(!this.mosaic.mustTakeOutHands && this.mosaic.mouseInteractions)
+ {
+ //Si on était en mode filtrage de la mosaïque et qu'aucune gesture de filtrage n'avait été détectée avant ca, on revient en mode mosaïque.
+ if(this.mosaic.currentMode == "FILTER" && this.mosaic.filterSearchedType == "")
+ {
+ this.mosaic.currentMode = "MOSAIC";
+ this.mosaic.isMosaicFiltered = false;
+ }
+ //Sinon si on était en mode recherche dans une video et qu'aucune gesture n'avait été détectée avant ca, on revient en mode video.
+ if(this.mosaic.currentMode == "SEARCH" && this.mosaic.currentSearchGesture[this.mosaic.centerId] == "")
+ {
+ this.mosaic.currentMode = "VIDEO";
+ }
+ }
+
//On réinitialise la courbe principale.
- if(this.mainPathStroke)
- {
- this.mainPathStroke.remove();
- }
- if(this.mainPath)
- {
- this.mainPath.remove();
- }
+ if(this.mainPathStroke)
+ {
+ this.mainPathStroke.remove();
+ }
+ if(this.mainPath)
+ {
+ this.mainPath.remove();
+ }
this.mainPointerLastX = 0;
this.mainPointerLastY = 0;
- this.mainPointerX = 0;
- this.mainPointerY = 0;
+ this.mainPointerX = 0;
+ this.mainPointerY = 0;
//On réinitialise le détecteur.
this.detector.reinit();
Binary file front_idill/src/snapshots-little/50 shots.jpg has changed
Binary file front_idill/src/snapshots-little/deep end dance.jpg has changed
Binary file front_idill/src/snapshots-little/encontro cotidianos.jpg has changed
Binary file front_idill/src/snapshots-little/flying lesson.jpg has changed
Binary file front_idill/src/snapshots-little/i am my mother.jpg has changed
Binary file front_idill/src/snapshots-little/joudance 2 in asakusa_stage1.jpg has changed
Binary file front_idill/src/snapshots-little/new under the sun.jpg has changed
Binary file front_idill/src/snapshots-little/nid de lune.jpg has changed
Binary file front_idill/src/snapshots-little/tank man tango a tiananmen memorial.jpg has changed
Binary file front_idill/src/snapshots-little/the rat.jpg has changed
Binary file front_idill/src/snapshots-little/you are you.jpg has changed
Binary file front_idill/src/snapshots/50 shots.jpg has changed
Binary file front_idill/src/snapshots/deep end dance.jpg has changed
Binary file front_idill/src/snapshots/encontro cotidianos.jpg has changed
Binary file front_idill/src/snapshots/flying lesson.jpg has changed
Binary file front_idill/src/snapshots/i am my mother.jpg has changed
Binary file front_idill/src/snapshots/joudance 2 in asakusa_stage1.jpg has changed
Binary file front_idill/src/snapshots/new under the sun.jpg has changed
Binary file front_idill/src/snapshots/nid de lune.jpg has changed
Binary file front_idill/src/snapshots/tank man tango a tiananmen memorial.jpg has changed
Binary file front_idill/src/snapshots/the rat.jpg has changed
Binary file front_idill/src/snapshots/you are you.jpg has changed
