M2 Informatique - Réalité Virtuelle et Augmentée - Université de Lille
2023-2024 
IHMA


TP : GyroTouch Mouse

Vous trouverez une version de ce document au format PDF ici.

Objectifs

Les sources nécessaires au TP sont disponibles ici.

L’objectif de ce TP est d’utiliser votre smarphone pour pointer sur un autre écran. Pour cela vous allez mettre en place plusieurs techniques de pointage. La première technique utilise l’orientation de votre smartphone pour contrôler la position absolue du pointeur à l’écran. La seconde technique utilise l’écran du smartphone pour contrôler le pointeur à l’écran de manière relative, de façon similaire à un touchpad. Enfin la troisième technique combine des deux premières.


Figure 1: l’interface du client sur le mobile à gauche et interface de l’ordinateur de bureau à droite.

1 Pré-requis

  1. Suivez les instructions disponibles sur l’intranet https://intranet.fil.univ-lille.fr/2020/04/09/nodejs-et-npm/ pour installer la dernière version de node et npm sous Linux.
  2. Configurez le VPN ULille sur votre smartphone en suivant ces instructions https://infotuto.univ-lille.fr/fiche/VPN

2 Matériel à disposition

Après avoir décompressé les sources du TP, allez dans le répertoire code/server et installez les packages node nécessaires avec la commande npm install puis lancer le serveur avec la commande npm run start.
Faites la même chose avec les clients dans le répertoire code/clients : utilisez la commande npm install puis npm run watch.
Si tout s’est bien passé, vous pouvez vous connecter depuis votre smartphone à l’adresse https://b02pXX.fil.univ-lille.fr:3000/mobile.html où vous remplacerez XX par votre numéro de machine. Bien sûr, pas besoin de VPN si vous êtes chez vous (remplacez simplement b02pXX.fil.univ-lille.fr par l’IP de votre machine avec le serveur). Sur la machine de bureau, ouvrez également l’url https://localhost:3000/desktop.html.
Pour la suite du TP les modifications de code sont à réaliser dans le fichier desktop.js

3 Pointage absolu

Q 1. Les événements d’orientation sont reçus dans la méthode socket.on("orientation".... Déplacer le curseur avec les mouvements d’orientation du smartphone et ajustez la valeur de gain pour atteindre tout l’écran avec des rotations confortables du poignet. Quelle valeur avez-vous choisi ?

Q 2. Suivant le modèle de votre téléphone, la position du pointeur peut être plus ou moins bruitée. Si votre pointeur est particulièrement stable, ajouter du bruit en utilisant la méthode gaussianRandom. En utilisant les sliders disponibles sur l’interface, ajustez les paramètres du 1€ filter pour réduire ce bruit sans ajouter trop de latence. Quel est le modèle de votre smartphone ? Comment avez-vous procédé pour régler les paramètres ? Quelles valeurs obtenez-vous ? Note : xnoisy et ynoisy peuvent être utilisés pour montrer la différence entre avant et après le filtrage.

Q 3. En utilisant la librairie javascript-state-machine, créez une machine à états qui permet de déclencher une sélection (click()) après un touch up. Note : vous pouvez exporter la visualisation de votre machine à états avec la librairie. Concrètement, vous pouvez remplacer visualize(fsm) par console.log(visualize(fsm)) pour afficher le code du graphe en syntaxe dot dans la console. Faites ensuite un copier-coller dans un fichier. Graphviz vous permet ensuite de convertir le fichier dot en SVG (par exemple) avec la commande dot -Tsvg test.dot > test.svg.

4 Pointage relatif

Q 4. Modifiez votre machine à états pour réaliser un pointage relatif avec l’écran du smartphone et mettez à jour les fonctions touchstart, touchmove, touchend et orientation.

Q 5. Vous allez maintenant mettre en place une fonction de transfert pour minimiser le débrayage du doigt lors du parcours de longues distances sur l’écran. Modifiez la fonction touchmove pour utiliser la fonction sigmoid et ajustez ses paramètres avec l’interface. Quelles valeurs de Gmin, Gmax, V1 et V2 avez-vous obtenu pour parcourir facilement la largeur de l’écran et rester précis ?

5 Combinaison des pointages absolu et relatif

Q 6. Modifiez une dernière fois votre machine à états pour combiner les pointages absolu et relatif : le pointage relatif est utilisé quand l’utilisateur déplace son doigt sur l’écran du smartphone et le pointage absolu est utilisé sinon. Le passage de pointage absolu à pointage relatif est immédiat quand l’utilisateur touche l’écran. Par contre, le passage pointage de relatif à absolu se fait au bout de 1000 ms par défaut, afin de permettre à l’utilisateur de débrayer en relatif. Cette technique de pointage est inspirée de la technique Laser+Track de Nancel et al., page 19, figure 10.

6 Compensation d’une partie de la latence avec le TurboTouch predictor

Q 7. Après avoir installé la librairie turbotouchpredictor, testez-le en affichant le curseur prédit en plus des autres. Testez également différentes valeurs de compensation. Quelle valeur de compensation fonctionne le mieux ? Pour plus d’informations sur le TurboTouch predictor, consultez la page du projet.


Ce document a été traduit de LATEX par HEVEA