Simuler des tremblements (par exemple de la maladie de Parkinson) avec la souris sur une page Web?

Je travaille pour une fondation qui sensibilise à l'accessibilité sur Internet. Pour une présentation, nous voulons offrir un petit atelier qui simule différents handicaps / déficiences aux gens. Cela se fait via un site internet créé spécialement pour cette présentation.

L'une des déficiences démontrées est d'avoir un tremblement, ce qui signifie ressentir des mouvements de la main tremblants et difficiles à contrôler. Avec cette déficience, il est très difficile de déplacer exactement le curseur de la souris et d'appuyer sur le bouton de la souris pendant que la souris se trouve sur un lien. Certaines personnes âgées et certaines personnes atteintes de maladie, par exemple la maladie de Parkinson, peuvent souffrir de tremblements.

Maintenant, j'aimerais déplacer le curseur de la souris d'une manière imprévisible, de sorte qu'il est très difficile pour les gens de cliquer sur un petit bouton. Parce que JavaScript ne permet pas de déplacer directement le curseur de la souris, je cherche d'autres moyens d'y parvenir. Je suis venu avec les idées suivantes:

• Utilisation d'un pilote / utilitaire de souris qui simule le tremblement de la souris.
• Masquez le curseur de la souris via CSS, placez une animation GIF d'un curseur de souris tremblant à l'emplacement du curseur d'origine (avec JavaScript), puis rendez le lien cible cliquable uniquement toutes les quelques secondes pendant une seconde environ. Cela donnerait au moins l'impression que l'on clique toujours au mauvais moment.

Alors que la première idée serait plutôt cool, je n'ai pas pu trouver un outil comme celui-ci, que ce soit pour Mac ou pour Windows. Et je n'ai aucune compétence pour programmer une telle chose moi-même.

La deuxième idée semble un peu maladroite, mais elle donnerait l'effet souhaité, je pense.

Quelqu'un a-t-il une autre idée?

J'ai fait une démonstration rapide de quelque chose sur lequel vous devriez pouvoir espérer baser votre code, en utilisant l' API Pointer Lock .

J'ai fourré ce dépôt de démonstration de verrouillage de pointeur et l' ai modifié pour ajouter un élément de mouvement aléatoire.

Voici le lien vers ma page GitHub: https://aristocrates.github.io/pointer-lock-demo
Et voici le lien vers mon repo: https://github.com/aristocrates/pointer-lock-demo

Le code javascript d'importance est contenu dans app.js, dans la canvasLoop(e)méthode.

La seule chose que j'ai changé par rapport à la démo originale était après les lignes

x += movementX * 2;
y += movementY * 2;

J'ai ajouté deux lignes pour représenter un mouvement aléatoire:

x += Math.floor(Math.random()*3 - 1);
y += Math.floor(Math.random()*3 - 1);

Il y a encore beaucoup de choses que vous pourriez améliorer, mais j'espère que cela peut vous aider à démarrer.

Manière non javascript

En fait, j'aime les solutions, qui peuvent être basées sur javascript, car elles sont plus probablement liées au Web, et les bonnes chances sont - indépendantes du système d'exploitation. Cependant, je réfléchissais à - comment résoudre votre problème pour tous les navigateurs, car les solutions javascript, dans ce cas, seront difficiles à ajuster pour tous les navigateurs possibles (je ne suis pas sûr que ce soit possible).

Ainsi, comme vous l'avez mentionné, il existe un autre moyen - à savoir émuler le comportement au niveau du système d'exploitation. Cela a aussi un autre avantage - vous pouvez être sûr que pour le navigateur, il semble à 100% comme il était humain (car, bien, c'est le pilote qui envoie le signal). Vous pouvez donc utiliser des solutions basées sur les pilotes / périphériques avec tous les navigateurs (ou même en situation, lorsque javascript est désactivé).

Linux

Malheureusement, l'implication du pilote / périphérique entraîne immédiatement une dépendance au système d'exploitation. Ainsi, pour chaque système d'exploitation, vous aurez besoin de votre propre solution. Dans cet article, je me concentre sur une solution basée sur Linux (donc, cela fonctionnera avec Linux) - et Mac OS un peu. Avec Linux, il est possible d'écrire des événements sur le périphérique de manière explicite, voici donc un exemple de fonction avec boucle principale:

int main()
{
    struct input_event event, event_end;

    int  fd = open("/dev/input/event4", O_RDWR);
    long ma = getInteger("Enter max amplitude [points, 0..50]: ", 0, 50);
    long ta = getInteger("Enter max wait time [usecs , 0..200000]: ", 0, 200000);
    if (fd < 0)
    {
        printf("Mouse access attempt failed:%s\n", strerror(errno));
        return -1;
    }
    memset(&event, 0, sizeof(event));
    memset(&event, 0, sizeof(event_end));
    gettimeofday(&event.time, NULL);
    event.type = EV_REL;
    gettimeofday(&event_end.time, NULL);
    event_end.type = EV_SYN;
    event_end.code = SYN_REPORT;
    event_end.value = 0;
    while(1)
    {
        event.code  = rand() % 2 ? REL_X : REL_Y;
        event.value = (rand() % 2 ? -1 : 1) * randomTill(ma);
        write(fd, &event, sizeof(event));
        write(fd, &event_end, sizeof(event_end));
        usleep(randomTill(ta));
    }
    close(fd);
    return 0;
}

Mon code complet pour le problème se trouve ici . Le programme demandera l'amplitude du "tremblement" et sa fréquence (ainsi, combien de temps en micro-secondes sont entre les "tremblements"). Pour émuler la situation, il forcera la souris à se déplacer aléatoirement pour des 0..Xpoints dans une direction aléatoire (haut-bas-gauche-bas) et attendra aléatoirement des 0..Ymicro-secondes jusqu'au prochain "tremblement", il Xy a une amplitude de "tremblement" et une Yfréquence de "tremblement" "

Une autre chose peut être d'adapter le programme à votre système. Le programme est "factice" et ne peut pas détecter la souris par lui-même, il "/dev/input/event4"est donc codé en dur. Pour réaliser ce qui peut être l'identifiant de votre système, vous pouvez essayer:

user@host:/path$ cat /proc/bus/input/devices | grep mouse
H: Handlers=mouse0 event3 
H: Handlers=mouse1 event4

Et donc les possibilités sont "event3"et "event4"- mais pour votre système qui peut avoir d'autres valeurs. Donc, si cela est différent de celui actuellement utilisé dans le code C, changez simplement la ligne correspondante (donc, ligne avec int fd = open("/dev/input/event4", O_RDWR);et placez votre appareil à la place de event4)

Une démo gif pour ce programme (faible taux de trame, malheureusement, donc gardez l'image pas trop grande) ici .

Une petite note (si vous ne savez pas quoi faire avec le code C) - pour compiler le programme ci-dessus, utilisez simplement:

user@host:/path$ gcc -std=gnu99 file.c -o m

où file.cest le nom de votre fichier de code source C, vous obtiendrez alors l'exécutable, appelé mdans votre répertoire. Vous aurez probablement besoin d'autorisations pour écrire directement sur le périphérique de la souris, vous pouvez donc utiliser sudo:

user@host:/path$ sudo ./m

Autre OS

La logique restera la même:

• Trouvez un moyen d'accéder à votre souris
• Ecrire un événement de déplacement de la souris
• Appliquez la randomisation à votre événement

C'est tout. Par exemple, Mac OS a sa propre façon de travailler avec la souris (pas comme Linux, Mac non procfsplus), c'est bien décrit ici .

Comme conclusion

Ce qui est mieux - javascript ou solutions orientées appareil - dépend de vous, car certaines conditions (comme cross-browser ou cross-OS) peuvent tout décider dans ce cas. Par conséquent, j'ai fourni des directives ainsi qu'un certain exemple de travail sur la façon de l'implémenter au niveau du système d'exploitation. L'avantage ici est que la solution est multi-navigateur, mais en tant que coût, nous avons un programme lié au système d'exploitation.

J'ai fait cela comme une blague une fois, sur le Puppy Linux Forum et j'ai obtenu le commentaire suivant:

Les personnes atteintes de Parkinson ne trouveront pas ça drôle !!!

Le traitement ici est simplement cntrl-C, heureusement.

Voici le script shell qui nécessite xdotool

#!/bin/sh
while :; do
   xdotool mousemove_relative -- -$(($RANDOM % 10)) $(($RANDOM % 10))
   xdotool mousemove_relative -- $(($RANDOM % 10)) -$(($RANDOM % 10))
   sleep ${1:-.1} #adjust this as necessary for effect
done

Nommez parkinson_sim et exécutez avec un argument facultatif pour le temps entre les tremblements qui peut être de 0,001 à 999,0.

parkinson_sim [time_between_tremors_in_seconds] #default is 0.1

J'ai fait l'erreur de cliquer dessus moi-même au lieu de l'exécuter à partir de la ligne de commande et j'ai rapidement découvert à quel point cela devait être frustrant. Il m'a fallu plusieurs tentatives pour ouvrir une fenêtre de terminal pour le tuer.

Votre deuxième idée (cacher le curseur) est à mi-chemin de celle qui, je pense, peut bien fonctionner pour vous:

• Cachez le curseur de la souris via CSS, comme vous le suggérez. ( cursor:noneIIRC)
• Au lieu d'un GIF à curseur tremblant, utilisez une image + un positionnement absolu CSS + JS pour émuler le pointeur de la souris; c'est-à-dire, suivez la souris autour de la page et plantez l'image du curseur là où le curseur de la souris serait nativement.

Ensuite, vous ajoutez des maths tremblements à votre code de curseur, pour "secouer" le curseur. À vous de déterminer quelles sont les bonnes courbes pour simuler correctement l'entrée du tremblement.

Enfin: pour tous les contrôles que vous programmez (liens, etc.):

• capturez les événements de clic, déplacez-les vers l'emplacement actuel de "tremblement" en fonction de l'état de vos courbes de tremblement et vérifiez les limites de vos éléments pour voir si l'utilisateur s'est éloigné de l'élément voulu, ou peut-être dans un élément qui n'était pas prévu .

Un avantage majeur avec cette implémentation: votre «curseur tremblant» sera affiché sur les appareils tactiles, qui n'auraient pas de curseur pour commencer.

Éditer:

Basé sur la base JSFiddle de Michael Theriot (très propre et utile!) Des commentaires, en voici une qui tremble constamment avec un balayage normalement distribué autour de l'emplacement actuel du curseur: http://jsfiddle.net/benmosher/0x4mc64v/4/

(Le normaltableau est le résultat de l'appel rnorm(100)dans ma console R. La manière la plus simple à laquelle je pouvais penser dans JS pour échantillonner un entier aléatoire normalement distribué.)

Juste une idée pour obtenir le "tremblement" droit, vous pouvez enregistrer le mouvement de la souris d'un vrai patient, cela le rend plus authentique lorsque vous dites aux gens d'où viennent les données.

Il y a des scripts pour laisser un chat suivre le curseur de votre souris, vous pouvez en ajuster un pour laisser un second curseur suivre (sauter) votre curseur. La page calcule la position du deuxième curseur, de sorte qu'elle peut également déterminer si un événement de clic a réussi ou non.

Si vous le pouvez, veuillez le faire sur le Web, vous atteindrez beaucoup plus de gens de cette façon que de leur demander d'installer un programme ou d'activer Flash ou quoi que ce soit.

Au lieu d'essayer de déplacer le pointeur, vous pouvez déplacer l'application (page Web) à la place. J'ai écrit un simple formulaire html qui contient des champs de saisie. Lorsque vous déplacez la souris sur le formulaire, le formulaire se déplace.

Vous pouvez voir une démo de la forme en mouvement sur jsfiddle . Essayez de cliquer sur l'un des champs de saisie pour voir l'effet.

J'ai utilisé l' effet jquery shake pour y parvenir. Le javascript de l'effet de secousse ressemble à ceci, et fait simplement bouger le formulaire de haut en bas chaque fois que la souris est déplacée dessus:

<script type="text/javascript">
    $(document).ready(function() {
        $("#toggle").hover(function () {
            $(this).effect("shake", { direction: "up", times: 1, distance: 40}, 1000);
        });
    });
</script>

Bien que le formulaire ne se déplace que de haut en bas, je pense qu'il a l'effet souhaité. Vous pouvez jouer avec les paramètres (direction, temps, distance, ainsi que le "1000" sans nom ci-dessus) pour modifier le mouvement de la forme.

Pourquoi ne pas utiliser une solution matérielle? Il existe certaines souris dans lesquelles vous pouvez mettre des poids, comme le Logitech G500. Au lieu de mettre un poids, installez un petit moteur oscillant qui fait trembler légèrement la souris. Cela simulait également davantage le désordre réel: ce n'est pas seulement le curseur qui tremble, mais toute la main et la souris. Et cela signifie également que vous pouvez afficher d'autres logiciels que des sites Web.

Au lieu d'une souris avec une fente de poids, vous pouvez également coller quelque chose à la souris, mais c'est plus visible.

Comme vous envisagiez de le faire avec un pilote de souris personnalisé, je suppose qu'un petit programme exécuté sur le PC ferait non plus? Si tel est le cas, voici un petit extrait pour C #, qui déplace infiniment le curseur de manière aléatoire avec une plage de plus moins 5 px autour de la position actuelle du curseur. Après chaque déplacement, le programme attend de 50 à 100 ms (pas précis!). Le tremblement peut être configuré en adaptant les valeurs du déplacement et des pauses. J'ai exécuté cela dans une application console et - selon les valeurs - cela m'a donné beaucoup de mal à arrêter le programme.

Random rand = new Random();

while(true)
{
    Cursor.Position = new Point() { X = Cursor.Position.X + rand.Next(11)-5, Y = Cursor.Position.Y + rand.Next(11)-5 };
    Thread.Sleep(rand.Next(50) + 50);
}

Voici une version Windows de mon script xdotool qui utilise AutoIt . C'était mon tout premier script AutoIt, et il n'a fallu que quelques minutes pour l'écrire, donc je suis sûr qu'il peut être amélioré. Enregistrez simplement avec l'extension .au3 et exécutez-le avec AutoIt (Run Script x86).

HotKeySet("{HOME}", "GStart")
HotKeySet("{PAUSE}", "Gpause")
HotKeySet("{ESC}", "Gexit")

While 1
    Sleep(100)
WEnd

Func Gstart()
While 1
    sleep(100)
    $pos = MouseGetPos()
    $x = $pos[0] + 10 - Random(0, 20, 1)
    $y = $pos[1] + 10 - Random(0, 20, 1)
    MouseMove($x,$y)
Wend
Endfunc


Func Gpause()
While 1
   sleep(100)
Wend
Endfunc

Func Gexit()
    MsgBox(0, "exit box", "Script exited")
    Exit 0
EndFunc

Contrôles

• Accueil: lancez la simulation.
• pause: Suspendre la simulation.
• Esc: Quittez la simulation.

Ou utilisez ma version compilée d' ici .

Vous ne pouvez pas vous attendre à ce que quiconque puisse tenir ses mains parfaitement stables, donc une chose que vous pouvez considérer est,

1. Expliquez aux utilisateurs ce que vous faites et,
2. Rendez les éléments cliquables sur la page de démonstration beaucoup plus petits que la normale.
3. Augmenter au maximum la sensibilité de la souris sur le système d'exemple.

Mon raisonnement est (mise en garde, je ne suis pas un expert en ux ou en médecine) en rendant les éléments cliquables plus petits, vous créez un problème similaire pour la plupart des gens qu'une personne atteinte de la maladie de Parkinson ferait face à un site Web de tous les jours.

Vous pouvez utiliser une combinaison de simulation de vieillesse, comme celle décrite dans cet article ... Je soupçonne que la partie des tremblements des mains est juste un moteur vibrant attaché autour du poignet, plus quelques gants épais pour rendre les mains généralement maladroites.

• Dans votre DIV, CSS-cachez le curseur en utilisantcursor:none;
• Créez une image de curseur .png et déplacez-la ( left, top) avec jQ activémousemove
• Randomisez le .png margin-leftet margin-toputilisez un setTimeout (pour rendre le repositionnement fluide, utilisez CSS3 transitionou faites-le avec jQ .animate()).

Remarque: le script ne peut pas savoir si la main est toujours sur la souris;)

function rand(min, max) {return Math.random() * (max - min) + min;}

var $cursor = $('div img');

$('div').mousemove(function(e) {  // Make .png follow the mouse coordinates
  $cursor.css({
    left: e.pageX,
    top:e.pageY
  });
}).hover(function(e){
  $cursor.toggle(); // Show .png cursor as we enter the DIV
});

(function tremor(){ // Add tremor to .png image
  $cursor.css({
      marginLeft: rand(-15,15), // arm tremor
      marginTop:  rand(-30,30)  // hand contractions
  });
  setTimeout(tremor, rand(50,100));
}());

div{
  position:absolute;
  background:#eee;
  height:100%;
  width:100%;
  cursor:none;
}

div img{
  display:none;
  position:absolute;
  transition: margin 0.2s;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div><img src="http://i.stack.imgur.com/KwMGA.png"></div>

Les parties de bas niveau de simulation du tremblement sont maintenant bien répondues. Je vais ajouter quelque chose en se concentrant sur le type de tremblement à simuler:

La plupart des réponses implémentent un curseur de souris qui se déplace sur un chemin aléatoire avec une largeur de pas maximale fixe dans les directions X et Y.

Cela devrait fonctionner assez bien pour le cas d'utilisation où il est difficile de frapper une zone spécifique comme un bouton.

Pour le problème plus général de la simulation de problèmes d'interface utilisateur causés par un tremblement de la maladie de Parkinson, il serait au moins intéressant de simuler réellement les mouvements de la main de ce type de tremblement.
Je soupçonne que la marche aléatoire n'est peut-être pas une très bonne approximation .

Bien sûr, il peut être difficile d'obtenir des données de trace de la main réelle du mouvement de tremblement, mais il existe certainement des documents sur l'analyse de ce type de tremblement:

L'article Représentation paramétrique du mouvement de la main dans la maladie de Parkinson explique comment tracer au mieux les traces de mouvement de la main en 3D.
Le papier est paywalled, mais l'aperçu en haut à droite, intitulé "Look Inside>" sur l'image du livre, montre quelques tracés intéressants de différentes représentations des données de trace de la main .