Simulação de tremor (por exemplo, doença de Parkinson) com o mouse em uma página da web?

Estou trabalhando para uma fundação que aumenta a conscientização sobre a acessibilidade na internet. Para uma apresentação, queremos oferecer um pequeno workshop que simule diferentes deficiências / deficiências para as pessoas. Isso é feito através de um site criado especialmente para esta apresentação.

Uma das deficiências demonstradas é ter um tremor, o que significa experimentar movimentos trêmulos e difíceis de controlar as mãos. Com esse comprometimento, é muito difícil mover o cursor do mouse exatamente e pressionar o botão do mouse enquanto o mouse está sobre um link. Alguns idosos e pessoas com doenças, como Parkinson, podem sofrer tremores.

Agora, de alguma forma, gostaria de mover o cursor do mouse de uma maneira imprevisível, para que seja muito difícil para as pessoas clicarem em um pequeno botão. Como o JavaScript não permite mover o cursor do mouse diretamente, estou procurando outras maneiras de conseguir isso. Tive as seguintes idéias:

• Usando um driver / utilitário do mouse que simula o movimento do mouse.
• Oculte o cursor do mouse via CSS, coloque uma animação GIF de um cursor trêmulo no local do cursor original (com JavaScript) e, em seguida, torne o link de destino clicável apenas a cada poucos segundos por um segundo. Isso daria pelo menos a sensação de que alguém sempre clica no momento errado.

Embora a primeira ideia fosse bem legal, não consegui encontrar uma ferramenta como essa, seja para Mac nem para Windows. E eu não tenho nenhuma habilidade em programar uma coisa dessas.

A segunda ideia parece um pouco desajeitada, mas atingiria o efeito desejado, eu acho.

Alguém tem outra ideia?

Fiz uma rápida demonstração de algo em que você esperançosamente deveria basear seu código, usando a API do Pointer Lock .

Eu peguei esse repositório de ponteiro-lock-demo e o modifiquei para adicionar um elemento de movimento aleatório.

Aqui está o link para minha página do GitHub: https://aristocrates.github.io/pointer-lock-demo
E aqui está o link para o meu repo: https://github.com/aristocrates/pointer-lock-demo

O código javascript de importância está contido app.js, no canvasLoop(e)método.

A única coisa que mudei da demo original foi depois das falas

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

Eu adicionei duas linhas para representar movimento aleatório:

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

Ainda há muitas coisas que você pode melhorar, mas espero que isso possa ajudá-lo a começar.

Maneira não-javascript

Na verdade, eu gosto de soluções, que podem ser baseadas em javascript, pois são mais prováveis ​​relacionadas à Web, e boas chances são independentes de SO. No entanto, eu estava pensando em - como resolver seu problema em todos os navegadores, já que as soluções javascript, neste caso, serão difíceis de ajustar para todos os navegadores possíveis (não tenho certeza se é possível).

Então, como você mencionou, existe outra maneira - ie imitar o comportamento no nível do SO. Isso também tem outra vantagem - você pode ter certeza de que, para o navegador, parece 100% humano (porque, bem, é o driver que está enviando o sinal). Portanto, você pode usar soluções baseadas em driver / dispositivo com qualquer navegador (ou mesmo quando o javascript estiver desativado).

Linux

Infelizmente, envolver driver / dispositivo imediatamente causa dependência do sistema operacional. Portanto, para cada sistema operacional, você precisará de uma solução própria. Neste post, estou focado na solução baseada em Linux (portanto, funcionará com Linux) - e no Mac OS um pouco. Com o Linux, é possível gravar eventos no dispositivo explicitamente; portanto, abaixo está um exemplo de função com o loop 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;
}

Meu código completo para o problema pode ser encontrado aqui . O programa pedirá amplitude de "tremor" e sua frequência (assim, quanto tempo em microssegundos há entre "tremores"). Para emular a situação, forçará o mouse a mover-se aleatoriamente para obter 0..Xpontos na direção aleatória (de cima para baixo, à esquerda, em baixo) e espere aleatoriamente 0..Ymicrossegundos até o próximo "tremor", há Xamplitude de "tremor" eY frequência de "tremor "

Outra coisa pode ser adaptar o programa ao seu sistema. O programa é "fictício" e não pode detectar o mouse por si só, por isso "/dev/input/event4"é codificado. Para perceber o que pode ser um identificador para o seu sistema, você pode tentar:

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

E assim são as possibilidades "event3"e "event4"- mas para o seu sistema que podem ter outros valores. Portanto, se isso for diferente do atualmente usado no código C, basta alterar a linha correspondente (então, alinhe int fd = open("/dev/input/event4", O_RDWR);e coloque o dispositivo em vez deevent4 )

Uma demonstração gif para este programa (baixa taxa de quadros, infelizmente, portanto, mantenha a imagem não muito grande) aqui .

Uma pequena nota lateral (se você não sabe o que fazer com o código C) - para compilar o programa acima, basta usar:

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

onde file.cé o nome do seu arquivo de código-fonte C, você será executável, chamado mem seu diretório. Provavelmente, você precisará de permissões para gravar diretamente no dispositivo do mouse, portanto, você pode usar sudo:

user@host:/path$ sudo ./m

Outro SO

A lógica permanecerá a mesma:

• Encontre uma maneira de acessar o dispositivo do mouse
• Escrever evento de movimento do mouse
• Aplique a randomização ao seu evento

É isso aí. Por exemplo, o Mac OS possui uma maneira própria de trabalhar com o mouse (não como o Linux, o Mac também não procfs), é bem descrito aqui .

Como uma conclusão

O que é melhor - soluções javascript ou orientadas a dispositivos - depende de você, porque determinadas condições (como entre navegadores ou SO) podem decidir tudo nesse caso. Portanto, forneci diretrizes juntamente com um exemplo prático de como implementá-lo no nível do sistema operacional. O benefício aqui é que a solução é entre navegadores, mas como custo, temos um programa vinculado ao sistema operacional.

Fiz isso de brincadeira uma vez, no Fórum do Puppy Linux e recebi o comentário de que:

Pessoas com Parkinson não vão achar graça !!!

Cura aqui é simplesmente cntrl-C, felizmente.

Aqui está o script de shell que requer o 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

Nomeie parkinson_sim e execute com argumento opcional para o tempo entre tremores, que pode ser de 0,001 a 999,0.

parkinson_sim [time_between_tremors_in_seconds] # o padrão é 0.1

Cometi o erro de clicar nele em vez de executá-lo na linha de comando e rapidamente descobri o quão frustrante deve ser. Foram necessárias várias tentativas para abrir uma janela do terminal para matá-la.

Sua segunda ideia (ocultar o cursor) está na metade de uma que eu acho que pode funcionar bem para você:

• Oculte o cursor do mouse via CSS, como você sugere. (cursor:none IIRC)
• Em vez de um GIF com cursor instável, use alguma imagem + posicionamento absoluto CSS + JS para emular o ponteiro do mouse; ou seja, siga o mouse pela página e plante a imagem do cursor onde deveria estar o cursor do mouse.

Em seguida, adicione um pouco de matemática de tremor ao código do cursor, para "agitar" o cursor. Você decide quais são as curvas corretas para simular corretamente a entrada de tremor.

Finalmente: para qualquer controle que você esteja programando (links, etc.):

• capture eventos de clique, mova-os para o local atual do "tremor" com base no estado das suas curvas de tremor e limite - verifique seus elementos para ver se o usuário sacudiu o elemento pretendido ou possivelmente um elemento que não foi pretendido .

Um grande bônus com esta implementação: seu 'cursor instável' será exibido em dispositivos de toque, que não teriam um cursor para começar.

Editar:

Baseado na base de JSFiddle de Michael Theriot (muito limpo e útil!), A partir dos comentários, aqui está um que treme constantemente com uma varredura normalmente distribuída em torno do local atual do cursor: http://jsfiddle.net/benmosher/0x4mc64v/4/

(A normalmatriz é o resultado da chamada rnorm(100)no meu console R.

Apenas uma idéia para acertar o tremor, você pode gravar o movimento do mouse de um paciente real, o que o torna mais autêntico quando você diz às pessoas de onde os dados vêm.

Existem scripts para deixar um gato seguir o cursor do mouse, você pode ajustar um para deixar um segundo cursor seguir (pular) o cursor. A página está calculando a posição do segundo cursor, para que também possa determinar se um evento de clique é bem-sucedido ou não.

Se puder, faça com que seja baseado na Web, você alcançará muito mais pessoas dessa maneira do que pedir para instalar um programa ou ativar o flash ou o que houver.

Em vez de tentar mover o ponteiro, você pode mover o aplicativo (página da web). Eu escrevi um formulário html simples que possui alguns campos de entrada. Quando você move o mouse para o formulário, o formulário se move.

Você pode ver uma demonstração do formulário móvel em jsfiddle . Tente clicar em um dos campos de entrada para ver o efeito.

Eu usei o efeito jquery shake para conseguir isso. O javascript para o efeito de agitação se parece com isso e faz com que o formulário se mova para cima e para baixo sempre que o mouse é movido sobre ele:

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

Embora o formulário apenas se mova para cima e para baixo, acho que tem o efeito desejado. Você pode jogar com os parâmetros (direção, horários, distância e também com o nome "1000" acima) para ajustar o movimento do formulário.

Por que não usar uma solução de hardware? Existem alguns mouses por aí que você pode colocar pesos, como o Logitech G500. Em vez de ganhar peso, coloque um pequeno motor oscilante que faça o mouse tremer levemente. Isso também simulou mais a desordem real: não é apenas o cursor que treme, mas toda a mão e o mouse. E isso também significa que você pode mostrar outro software que não seja o site.

Em vez de um mouse com um slot de peso, você também pode simplesmente colar algo no mouse, mas isso é mais perceptível.

Enquanto você pensava em fazê-lo com um driver de mouse personalizado, suponho que um pequeno programa em execução no PC também funcionaria? Se for esse o caso, aqui está um pequeno trecho para C #, que move o cursor infinitamente aleatoriamente, com um intervalo de mais menos 5px ao redor da posição atual do cursor. Após cada deslocamento, o programa espera 50 ms a 100 ms (não é preciso!). A instabilidade pode ser configurada adaptando os valores para o deslocamento e as pausas. Eu executei isso em um aplicativo de console e - dependendo dos valores - me deu muita dificuldade para interromper o 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);
}

Aqui está uma versão do Windows do meu script xdotool que usa o AutoIt . Este foi o meu primeiro script AutoIt e demorou apenas alguns minutos para escrever, por isso tenho certeza de que pode ser melhorado. Apenas salve com a extensão .au3 e execute-a com o 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

Controles

• Home: Inicie a simulação.
• pausa: pausa a simulação.
• Esc: Simulação de saída.

Ou use minha versão compilada daqui .

Você não pode esperar que alguém consiga manter suas mãos perfeitamente firmes; portanto, uma coisa que você pode considerar é:

1. Explique aos usuários o que você está fazendo e,
2. Torne os elementos clicáveis ​​na página de demonstração muito menores que o normal.
3. Aumentando a sensibilidade do mouse no sistema de exemplo ao máximo.

Meu raciocínio é (ressalva, não sou especialista em UX ou em medicina) ao diminuir os elementos que podem ser clicados, criando um problema semelhante para a maioria das pessoas que uma pessoa afetada pela doença de Parkinson enfrentaria com um site diário.

Você pode usar um traje de simulação para a velhice, como o descrito neste artigo ... Suspeito que a parte dos tremores das mãos seja apenas um motor vibratório amarrado ao redor do pulso, além de algumas luvas grossas para deixar as mãos geralmente desajeitadas.

• No seu DIVCSS, oculte o cursor usandocursor:none;
• Crie uma imagem do cursor .png e mova-a ( left, top) com jQ emmousemove
• Randomize o arquivo .png margin-lefte margin-topuse a setTimeout (para facilitar o reposicionamento, use CSS3 transitionou jQ .animate()).

Nota: O script não pode saber se a mão ainda está no 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>

As partes de baixo nível da simulação do tremor estão bem respondidas até agora. Vou adicionar algo focado no tipo de tremor a simular:

A maioria das respostas implementa um cursor do mouse que está se movendo em um caminho aleatório com alguma largura máxima de etapa fixa nas direções X e Y.

Isso deve funcionar bem o suficiente para dificultar o acesso a uma área específica, como um botão.

Para a questão mais geral de simulação de problemas de interface do usuário causados ​​por um tremor da doença de Parkinson, seria pelo menos interessante simular os movimentos das mãos desse tipo de tremor.
Eu suspeito que o passeio aleatório pode não ser uma aproximação muito boa .

Pode ser difícil obter dados reais de rastreamento de mão do movimento de tremores, é claro, mas certamente existem trabalhos sobre a análise desse tipo de tremor:

O artigo Representação Paramétrica do Movimento das Mãos na Doença de Parkinson é sobre como melhor traçar os traços 3D do movimento das mãos.
O papel é de parede de pagamento, mas a visualização no canto superior direito, rotulada "Look Inside>" na imagem do livro, mostra alguns gráficos interessantes de diferentes representações de dados de rastreamento manual .