¿Simulando temblor (de, por ejemplo, la enfermedad de Parkinson) con el mouse en una página web?

Estoy trabajando para una fundación que crea conciencia sobre la accesibilidad en Internet. Para una presentación, queremos ofrecer un pequeño taller que simule diferentes discapacidades / impedimentos para las personas. Esto se realiza a través de un sitio web creado especialmente para esta presentación.

Una de las deficiencias demostradas es tener un temblor, lo que significa experimentar movimientos de manos temblorosos y difíciles de controlar. Con este impedimento, es muy difícil mover el cursor del mouse exactamente y presionar el botón del mouse mientras el mouse está sobre un enlace. Tanto algunas personas mayores como personas con enfermedades, como el Parkinson, pueden sufrir temblores.

Ahora me gustaría mover de alguna manera el cursor del mouse de una manera impredecible, para que sea muy difícil para las personas hacer clic en un botón pequeño. Debido a que JavaScript no permite mover el cursor del mouse directamente, estoy buscando otras formas de lograrlo. Se me ocurrieron las siguientes ideas:

• Usar un controlador / utilidad de mouse que simula el movimiento del mouse.
• Oculte el cursor del mouse a través de CSS, coloque una animación GIF de un cursor de mouse tembloroso en el lugar del cursor original (con JavaScript) y luego haga clic en el enlace de destino cada pocos segundos durante un segundo más o menos. Esto al menos daría la sensación de que uno siempre hace clic en el momento equivocado.

Si bien la primera idea sería genial, no pude encontrar una herramienta como esta, ya sea para Mac ni para Windows. Y no tengo ninguna habilidad para programar tal cosa yo mismo.

La segunda idea parece un poco torpe, pero creo que lograría el efecto deseado.

¿Alguien tiene otra idea?

Hice una demostración rápida de algo en lo que esperemos que pueda basar su código, utilizando la API de bloqueo de puntero .

Bifurqué este repositorio pointer-lock-demo y lo modifiqué para agregar un elemento de movimiento aleatorio.

Aquí está el enlace a mi página de GitHub: https://aristocrates.github.io/pointer-lock-demo
Y aquí está el enlace a mi repositorio: https://github.com/aristocrates/pointer-lock-demo

El código javascript de importancia está contenido app.jsen el canvasLoop(e)método.

Lo único que cambié de la demostración original fue después de las líneas

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

Agregué dos líneas para representar un movimiento aleatorio:

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

Todavía hay muchas cosas que podría mejorar, pero espero que esto pueda ayudarlo a comenzar.

Manera no javascript

En realidad, me gustan las soluciones, que pueden estar basadas en javascript, ya que es más probable que estén relacionadas con la web, y es muy probable que sean independientes del sistema operativo. Sin embargo, estaba pensando en cómo resolver su problema para todos los navegadores, ya que las soluciones de JavaScript, en este caso, serán difíciles de ajustar para todos los navegadores posibles (no estoy seguro de si es posible).

Entonces, como mencionó, hay otra forma, es decir, emular el comportamiento a nivel del sistema operativo. Esto también tiene otra ventaja: puede estar seguro de que para el navegador se ve 100% como si fuera humano (porque, bueno, es el controlador el que está enviando la señal). Por lo tanto, puede usar soluciones basadas en controladores / dispositivos con cualquier navegador (o incluso en una situación en la que JavaScript esté deshabilitado).

Linux

Desafortunadamente, la participación del controlador / dispositivo causa inmediatamente la dependencia del sistema operativo. Entonces, para cada sistema operativo, necesitará su propia solución. En esta publicación, estoy centrado en la solución basada en Linux (por lo tanto, funcionará con Linux) y Mac OS un poco. Con Linux, es posible escribir eventos en el dispositivo explícitamente, por lo que a continuación se muestra una muestra de la función con el bucle principal:

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;
}

Mi código completo para el problema se encuentra aquí . El programa solicitará la amplitud del "temblor" y su frecuencia (por lo tanto, cuánto tiempo en microsegundos hay entre "temblores"). Para emular la situación, obligará al mouse a moverse aleatoriamente por 0..Xpuntos en dirección aleatoria (arriba-abajo-izquierda-abajo) y esperará 0..Ymicrosegundos al azar hasta el próximo "temblor", hay Xuna amplitud de "temblor" yY es frecuencia de "temblor". "

Otra cosa puede ser adaptar el programa a su sistema. El programa es "ficticio" y no puede detectar el mouse por sí mismo, por lo que "/dev/input/event4"está codificado. Para darse cuenta de lo que puede ser un identificador para su sistema, puede intentar:

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

Y así, las posibilidades son "event3"y "event4", pero para su sistema, eso puede tener otros valores. Entonces, si eso es diferente del que se usa actualmente en el código C, simplemente cambie la línea correspondiente (así, alinee int fd = open("/dev/input/event4", O_RDWR);y coloque su dispositivo en lugar deevent4 )

Una demostración de gif para este programa (baja velocidad de fotogramas, desafortunadamente, así que mantenga la imagen no demasiado grande) aquí .

Una pequeña nota al margen (si no sabe qué hacer con el código C): para compilar el programa anterior, solo use:

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

donde file.cestá el nombre de su archivo de código fuente C, entonces obtendrá el ejecutable, llamado men su directorio. Lo más probable es que necesite permisos para escribir directamente en el dispositivo del mouse, por lo que puede usar sudo:

user@host:/path$ sudo ./m

Otro sistema operativo

La lógica seguirá siendo la misma:

• Encuentre una manera de acceder a su dispositivo de mouse
• Escribir evento de mover el mouse
• Aplicar aleatorización a su evento

Eso es. Por ejemplo, Mac OS tiene su propia forma de trabajar con el mouse (no como Linux, Mac tampoco procfs), está bien descrito aquí .

Como conclusión

Lo que es mejor, javascript o soluciones orientadas a dispositivos, depende de usted, porque ciertas condiciones (como el navegador cruzado o el sistema operativo cruzado) pueden decidir todo en este caso. Por lo tanto, he proporcionado pautas junto con cierto ejemplo de trabajo de cómo implementar eso en el nivel del sistema operativo. El beneficio aquí es que la solución es un navegador cruzado, pero como costo tenemos un programa vinculado al sistema operativo.

Hice esto como una broma una vez, en el Foro Puppy Linux y recibí el comentario de que:

¡Las personas con Parkinson no pensarán que es divertido!

Curar aquí es simplemente cntrl-C, por suerte.

Aquí está el script de shell que requiere 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

Nombre como parkinson_sim y ejecute con argumento opcional para el tiempo entre temblores que puede ser 0.001 a 999.0.

parkinson_sim [time_between_tremors_in_seconds] #default es 0.1

Cometí el error de hacer clic en él en lugar de ejecutarlo desde la línea de comandos y rápidamente descubrí lo frustrante que debe ser. Me llevó varios intentos abrir una ventana de terminal para matarlo.

Su segunda idea (ocultar el cursor) está a medio camino de una que creo que puede funcionar bien para usted:

• Oculta el cursor del mouse a través de CSS, como sugieres. ( cursor:noneIIRC)
• En lugar de un GIF con cursor tembloroso, use una imagen + posicionamiento absoluto CSS + JS para emular el puntero del mouse; es decir, siga el mouse alrededor de la página y coloque la imagen del cursor donde estaría el cursor del mouse de forma nativa.

Luego, agrega algunas matemáticas de temblor al código del cursor, para "sacudir" el cursor. Depende de usted determinar cuáles son las curvas correctas para simular correctamente la entrada del temblor.

Finalmente: para cualquier control que esté programando (enlaces, etc.):

• capturar eventos de clic, empujarlos a la ubicación actual de "temblor" en función del estado de sus curvas de temblor, y verificar los límites para ver si el usuario ha salido del elemento deseado, o posiblemente en un elemento que no fue intencionado .

Una ventaja importante con esta implementación: su 'cursor tembloroso' se mostrará en dispositivos táctiles, que para empezar no tendrían un cursor.

Editar:

Basado en la base JSFiddle de Michael Theriot (¡muy limpio y útil!) De los comentarios, aquí hay uno que tiembla constantemente con un barrido distribuido normalmente alrededor de la ubicación actual del cursor: http://jsfiddle.net/benmosher/0x4mc64v/4/

(La normalmatriz es el resultado de llamar rnorm(100)a mi consola R. De la manera más simple que se me ocurre en JS para muestrear un entero aleatorio normalmente distribuido).

Solo una idea para que el temblor sea "correcto", puede registrar el movimiento del mouse de un paciente real, esto lo hace más auténtico cuando le dice a la gente de dónde provienen los datos.

Hay una secuencia de comandos para permitir que un gato siga el cursor de su mouse, puede ajustar uno para que un segundo cursor siga (salte) su cursor. La página está calculando la posición del segundo cursor, por lo que también puede determinar si un evento de clic es exitoso o no.

Si puede, hágalo en la web, llegará a muchas más personas de esta manera que pidiéndoles que instalen un programa o activen flash o lo que sea que haya.

En lugar de intentar mover el puntero, puede mover la aplicación (página web) en su lugar. Escribí un formulario html simple que tiene algunos campos de entrada. Cuando mueve el mouse sobre el formulario, el formulario se mueve.

Puedes ver una demostración de la forma en movimiento en jsfiddle . Intente hacer clic en uno de los campos de entrada para ver el efecto.

Utilicé el efecto jquery shake para lograr esto. El javascript para el efecto de sacudida se ve así, y solo hace que el formulario se mueva hacia arriba y hacia abajo cada vez que se mueve el mouse sobre él:

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

Aunque la forma solo se mueve hacia arriba y hacia abajo, creo que tiene el efecto deseado. Puedes jugar con los parámetros (dirección, tiempos, distancia, así como con el "1000" sin nombre anterior) para modificar el movimiento del formulario.

¿Por qué no usar una solución de hardware? Hay ciertos ratones en los que puedes poner pesos, como el Logitech G500. En lugar de poner un peso, coloque un pequeño motor oscilante que haga que el mouse se mueva ligeramente. Esto también simuló más el desorden real: no solo se mueve el cursor, sino toda la mano y el mouse. Y también significa que puede mostrar otro software que no sean sitios web.

En lugar de un mouse con una ranura de peso, también puede simplemente pegar algo al mouse, pero eso es más notable.

Como estaba pensando en hacerlo con un controlador de mouse personalizado, ¿supongo que un pequeño programa que se ejecuta en la PC funcionaría? Si este es el caso, aquí hay un pequeño fragmento de C #, que mueve infinitamente el cursor al azar dentro de un rango de más menos 5 píxeles alrededor de la posición actual del cursor. Después de cada desplazamiento, el programa espera de 50 ms a 100 ms (¡no es exacto!). La inestabilidad se puede configurar adaptando los valores para el desplazamiento y las pausas. Ejecuté esto en una aplicación de consola y, dependiendo de los valores, me costó bastante detener el programa.

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);
}

Aquí hay una versión de Windows de mi script xdotool que usa AutoIt . Este fue mi primer script de AutoIt, y me tomó solo un par de minutos escribir, así que estoy seguro de que se puede mejorar. Simplemente guarde con la extensión .au3 y ejecútelo con 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

Control S

• Inicio: Iniciar simulación.
• pausa: pausa de simulación.
• Esc: simulación de salida.

O use mi versión compilada desde aquí .

No puede esperar que nadie pueda mantener sus manos perfectamente firmes, por lo que una cosa que puede considerar es,

1. Explique a los usuarios lo que está haciendo y,
2. Haga que los elementos en los que se puede hacer clic en la página de demostración sean mucho más pequeños de lo normal.
3. Aumentar la sensibilidad del mouse en el sistema de ejemplo al máximo.

Mi razonamiento es (advertencia, no soy un experto en ux o medicina) al hacer que los elementos que se pueden hacer clic sean más pequeños, crea un problema similar para la mayoría de las personas que una persona afectada por la enfermedad de Parkinson enfrentaría con un sitio web cotidiano.

Puede usar un traje de simulación para la vejez, como el que se describe en este artículo ... Sospecho que la parte de los temblores de las manos es solo un motor vibratorio atado a la muñeca, además de unos guantes gruesos para hacer que las manos sean generalmente torpes.

• En tu DIV, CSS-oculta el cursor usandocursor:none;
• Cree una imagen de cursor .png y muévala ( left, top) con jQ enmousemove
• Aleatorice el .png margin-lefty margin-topuse a setTimeout (para que el reposicionamiento sea suave, use CSS3 transitiono hágalo con jQ .animate()).

Nota: El script no puede saber si la mano todavía está en el mouse;)

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>

Las partes de bajo nivel de simulación del temblor ya están bien respondidas. Agregaré algo centrado en el tipo de temblor para simular:

La mayoría de las respuestas implementan un cursor del mouse que se mueve en una ruta aleatoria con un ancho de paso máximo fijo en la dirección X e Y.

Esto debería funcionar lo suficientemente bien para el caso de uso de dificultar golpear un área específica como un botón.

Para la cuestión más general de simular problemas de IU causados ​​por un temblor de la enfermedad de Parkinson, sería al menos interesante simular realmente los movimientos de las manos de este tipo de temblor.
Sospecho que la caminata aleatoria puede no ser una muy buena aproximación .

Puede ser difícil obtener datos de rastreo de mano real supuesto, de del movimiento del temblor, pero ciertamente hay documentos sobre el análisis de este tipo de temblor:

El documento Representación paramétrica del movimiento de la mano en la enfermedad de Parkinson trata sobre cómo trazar mejor los rastros de movimiento de la mano en 3D.
El papel tiene paredes de pago, pero la vista previa en la parte superior derecha, etiquetada "Mirar dentro>" en la imagen del libro, muestra algunas tramas interesantes de diferentes representaciones de datos de rastreo manual .