|
52
|
1 |
<!DOCTYPE html> |
|
|
2 |
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" class="has_sidebar fixed-header earthrise"> |
|
|
3 |
<head> |
|
|
4 |
<meta content="text/html; charset=UTF-8" http-equiv="content-type" /> |
|
|
5 |
<meta name="description" content="Tutoriel sur le développement et l'utilisation de code Processing utilisant le Middleware TraKERS."/> |
|
|
6 |
<meta name="keywords" content="TraKERS, TraKERS Processing, TraKERS Front Processing, TraKERS Front, Kinect Processing"/> |
|
|
7 |
<title>BROWSE BY MOTION - Documentation Front IDILL</title> |
|
|
8 |
</head> |
|
|
9 |
|
|
|
10 |
<body> |
|
|
11 |
<h2>Sommaire</h2> |
|
|
12 |
|
|
|
13 |
<ol type="I"> |
|
|
14 |
<a href="#I"><li>Introduction</li></a> |
|
|
15 |
<a href="#II"><li>Lancement</li></a> |
|
|
16 |
<a href="#III"><li>Fonctionnalités</li></a> |
|
|
17 |
<a href="#IV"><li>Configuration</li></a> |
|
|
18 |
<a href="#V"><li>Notices à prendre en compte</li></a> |
|
|
19 |
</ol> |
|
|
20 |
|
|
|
21 |
<hr /> |
|
|
22 |
|
|
|
23 |
<ol type="I" start="1"> |
|
|
24 |
<h3><a name="#I"><li>Introduction</li></a></h3> |
|
|
25 |
</ol> |
|
|
26 |
|
|
|
27 |
<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> |
|
|
28 |
|
|
|
29 |
<p>Elements requis : |
|
|
30 |
<ul> |
|
|
31 |
<li>Google Chrome 20 ou supérieur est nécessaire pour lancer ce prototype.</li> |
|
|
32 |
<li>WampServer 2 doit être installé.</li> |
|
|
33 |
<li>Le dossier Front IDILL doit être copié à la racine du dossier www de Wamp (par défaut dans C:\wamp\www).</li> |
|
|
34 |
</ul> |
|
|
35 |
</p> |
|
|
36 |
|
|
|
37 |
<p>Si vous souhaitez utiliser le prototype en mode d'interaction Kinect : |
|
|
38 |
<ul> |
|
|
39 |
<li>Kinect for Xbox 360.</li> |
|
|
40 |
<li>Kinect SDK 1.5 de Microsoft.</li> |
|
|
41 |
<li>.NET Framework 4.0.</li> |
|
|
42 |
</ul> |
|
|
43 |
</p> |
|
|
44 |
|
|
|
45 |
<hr /> |
|
|
46 |
|
|
|
47 |
<ol type="I" start="2"> |
|
|
48 |
<h3><a name="#II"><li>Lancement</li></a></h3> |
|
|
49 |
</ol> |
|
|
50 |
|
|
|
51 |
<p> |
|
|
52 |
<ol type="1" start="1"> |
|
|
53 |
<li>Lancer wamp.</li> |
|
|
54 |
<li>Aller sur Google Chrome à l'adresse : http://localhost/Front%20IDILL</li> |
|
|
55 |
<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> |
|
|
56 |
</ol> |
|
|
57 |
</p> |
|
|
58 |
|
|
|
59 |
<p>Lancement en mode Kinect (après avoir réglé le paramètre dans la configuration).</p> |
|
|
60 |
|
|
|
61 |
<p> |
|
|
62 |
<ol type="1" start="4"> |
|
|
63 |
<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> |
|
|
64 |
<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> |
|
|
65 |
<li>Relancez le Front en cliquant dessus et en appuyant sur F5 afin de raffraichir la fenêtre du navigateur.</li> |
|
|
66 |
</ol> |
|
|
67 |
</p> |
|
|
68 |
|
|
|
69 |
<hr /> |
|
|
70 |
|
|
|
71 |
<ol type="I" start="3"> |
|
|
72 |
<h3><a name="#III"><li>Fonctionnalités</li></a></h3> |
|
|
73 |
</ol> |
|
|
74 |
|
|
|
75 |
<p>Dans cette partie, on déclinera les fonctionnalités selon le mode d'interaction utilisé (Souris/Kinect).</p> |
|
|
76 |
|
|
|
77 |
<u><h3><p>Mode d'interaction souris :</p></h3></u> |
|
|
78 |
|
|
|
79 |
<ol type="1" start="1"> |
|
|
80 |
<h3><li>Actions de contrôle de l'interface.</li></h3> |
|
|
81 |
|
|
|
82 |
<ol type="A" start="1"> |
|
|
83 |
<h4><li>Sélection de la vidéo dans la mosaïque.</li></h4> |
|
|
84 |
|
|
|
85 |
<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> |
|
|
86 |
</ol> |
|
|
87 |
|
|
|
88 |
<ol type="A" start="2"> |
|
|
89 |
<h4><li>Revenir à la mosaïque.</li></h4> |
|
|
90 |
|
|
|
91 |
<p>Il y a deux interactions possibles pour revenir à la mosaïque.</p> |
|
|
92 |
<ul> |
|
|
93 |
<li>Le fait de cliquer en dehors de la vidéo centrale.</li> |
|
|
94 |
<li>Le fait de tirer la molette de la souris vers vous.</li> |
|
|
95 |
</ul> |
|
|
96 |
</ol> |
|
|
97 |
|
|
|
98 |
<ol type="A" start="3"> |
|
|
99 |
<h4><li>Aller d'une vidéo à une autre.</li></h4> |
|
|
100 |
|
|
|
101 |
<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. |
|
|
102 |
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> |
|
|
103 |
|
|
|
104 |
<ul> |
|
|
105 |
<li>Cliquer sur cette vidéo.</li> |
|
|
106 |
<li>Déplacer rapidement le curseur vers la bordure opposée.</li> |
|
|
107 |
</ul> |
|
|
108 |
</ol> |
|
|
109 |
</ol> |
|
|
110 |
|
|
|
111 |
<ol type="1" start="2"> |
|
|
112 |
<h3><li>Recherche par courbes.</li></h3> |
|
|
113 |
|
|
|
114 |
<ol type="A" start="1"> |
|
|
115 |
<h4><li>Tracé de courbes.</li></h4> |
|
|
116 |
|
|
|
117 |
<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> |
|
|
118 |
</ol> |
|
|
119 |
|
|
|
120 |
<ol type="A" start="2"> |
|
|
121 |
<h4><li>Reconnaissance de courbes.</li></h4> |
|
|
122 |
|
|
|
123 |
<p>Durant le tracé, il peut arriver 4 choses :</p> |
|
|
124 |
<ul> |
|
|
125 |
<li>Le tracé correspond à plusieurs courbes : Leurs macarons sont affichés en haut de la fenêtre.</li> |
|
|
126 |
<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> |
|
|
127 |
<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> |
|
|
128 |
<li>Le tracé ne correspond à aucune courbe répertoriée. Un macaron de geste inconnu s'affiche et le panneau d'aide apparaît. Il est possible de cliquer ou de tracer une nouvelle courbe pour faire disparaître le panneau d'aide.</li> |
|
|
129 |
</ul> |
|
|
130 |
<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> |
|
|
131 |
<p>Une nouvelle requête de recherche écrase la précédente.</p> |
|
|
132 |
<p>Si une recherche est effectuée dans la mosaïque, la recherche s'étend à toutes les vidéos contenues.</p> |
|
|
133 |
<p>A l'inverse, une recherche dans une vidéo n'affecte pas la mosaïque.</p> |
|
|
134 |
</ol> |
|
|
135 |
|
|
|
136 |
<ol type="A" start="2"> |
|
|
137 |
<h4><li>Quitter la recherche.</li></h4> |
|
|
138 |
|
|
|
139 |
<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> |
|
|
140 |
</ol> |
|
|
141 |
</ol> |
|
|
142 |
|
|
|
143 |
<u><h3><p>Mode d'interaction Kinect :</p></h3></u> |
|
|
144 |
|
|
|
145 |
<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> |
|
|
146 |
|
|
|
147 |
<ol type="1" start="1"> |
|
|
148 |
<h3><li>Actions de contrôle de l'interface.</li></h3> |
|
|
149 |
|
|
|
150 |
<ol type="A" start="1"> |
|
|
151 |
<h4><li>Sélection de la vidéo dans la mosaïque.</li></h4> |
|
|
152 |
|
|
|
153 |
<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> |
|
|
154 |
</ol> |
|
|
155 |
|
|
|
156 |
<ol type="A" start="2"> |
|
|
157 |
<h4><li>Revenir à la mosaïque.</li></h4> |
|
|
158 |
|
|
|
159 |
<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> |
|
|
160 |
</ol> |
|
|
161 |
|
|
|
162 |
<ol type="A" start="3"> |
|
|
163 |
<h4><li>Aller d'une vidéo à une autre.</li></h4> |
|
|
164 |
|
|
|
165 |
<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. |
|
|
166 |
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> |
|
|
167 |
</ol> |
|
|
168 |
</ol> |
|
|
169 |
|
|
|
170 |
<ol type="1" start="2"> |
|
|
171 |
<h3><li>Recherche par courbes.</li></h3> |
|
|
172 |
|
|
|
173 |
<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> |
|
|
174 |
|
|
|
175 |
<ol type="A" start="1"> |
|
|
176 |
<h4><li>Tracé de courbes.</li></h4> |
|
|
177 |
|
|
|
178 |
<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 au moins une main de la zone de recherche, la courbe disparaît.</p> |
|
|
179 |
<p>Chaque pointeur génère une courbe. L'analyse de courbes est donc double.</p> |
|
|
180 |
</ol> |
|
|
181 |
|
|
|
182 |
<ol type="A" start="2"> |
|
|
183 |
<h4><li>Reconnaissance de courbes.</li></h4> |
|
|
184 |
|
|
|
185 |
<p>Durant le tracé, il peut arriver 4 choses :</p> |
|
|
186 |
<ul> |
|
|
187 |
<li>Le tracé correspond à plusieurs courbes : Leurs macarons sont affichés en haut de la fenêtre.</li> |
|
|
188 |
<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> |
|
|
189 |
<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> |
|
|
190 |
<li>Le tracé ne correspond à aucune courbe répertoriée. Un macaron de geste inconnu s'affiche et le panneau d'aide apparaît. 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.</li> |
|
|
191 |
</ul> |
|
|
192 |
<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.</p> |
|
|
193 |
<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> |
|
|
194 |
<p>Une nouvelle requête de recherche écrase la précédente.</p> |
|
|
195 |
<p>Si une recherche est effectuée dans la mosaïque, la recherche s'étend à toutes les vidéos contenues.</p> |
|
|
196 |
<p>A l'inverse, une recherche dans une vidéo n'affecte pas la mosaïque.</p> |
|
|
197 |
</ol> |
|
|
198 |
|
|
|
199 |
<ol type="A" start="2"> |
|
|
200 |
<h4><li>Quitter la recherche.</li></h4> |
|
|
201 |
|
|
|
202 |
<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> |
|
|
203 |
</ol> |
|
|
204 |
</ol> |
|
|
205 |
|
|
|
206 |
<hr /> |
|
|
207 |
|
|
|
208 |
<ol type="I" start="4"> |
|
|
209 |
<h3><a name="#IV"><li>Configuration</li></a></h3> |
|
|
210 |
</ol> |
|
|
211 |
|
|
|
212 |
<hr /> |
|
|
213 |
|
|
|
214 |
<ol type="I" start="5"> |
|
|
215 |
<h3><a name="#V"><li>Notices à prendre en compte</li></a></h3> |
|
|
216 |
</ol> |
|
|
217 |
|
|
|
218 |
<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> |
|
|
219 |
</body> |
|
|
220 |
</html> |