Symulowanie drżenia (np. Choroby Parkinsona) za pomocą myszy na stronie internetowej?

Pracuję dla fundacji, która podnosi świadomość dostępności w Internecie. Do prezentacji chcemy zaoferować mały warsztat, który symuluje różne niepełnosprawności / upośledzenia dla ludzi. Odbywa się to za pośrednictwem strony internetowej stworzonej specjalnie dla tej prezentacji.

Jednym z wykazanych upośledzeń jest drżenie, co oznacza doświadczanie drżących, trudnych do kontrolowania ruchów dłoni. Z tym upośledzeniem bardzo trudno jest dokładnie przesunąć kursor myszy i nacisnąć przycisk myszy, gdy mysz znajduje się nad linkiem. Zarówno drobne osoby, jak i osoby chore, np. Choroba Parkinsona, mogą cierpieć z powodu drżenia.

Teraz chciałbym w jakiś sposób przesunąć kursor myszy w nieprzewidywalny sposób, aby bardzo trudno było ludziom kliknąć mały przycisk. Ponieważ JavaScript nie pozwala na bezpośrednie przesuwanie kursora myszy, szukam innych sposobów na osiągnięcie tego. Wymyśliłem następujące pomysły:

• Korzystanie ze sterownika myszy / narzędzia symulującego drżenie myszy.
• Ukryj kursor myszy za pomocą CSS, umieść animację GIF potrząsającego kursora myszy w miejscu oryginalnego kursora (z JavaScript), a następnie włącz kliknięcie linku docelowego co kilka sekund na sekundę. To dałoby przynajmniej wrażenie, jakbyś zawsze klikał w niewłaściwym momencie.

Chociaż pierwszy pomysł byłby całkiem fajny, nie mogłem znaleźć takiego narzędzia, zarówno dla komputerów Mac, jak i Windows. I nie mam żadnych umiejętności w programowaniu czegoś takiego.

Drugi pomysł wydaje się nieco niezdarny, ale myślę, że osiągnąłby pożądany efekt.

Czy ktoś ma inny pomysł?

Zrobiłem szybką prezentację czegoś, na czym, mam nadzieję, powinieneś być w stanie oprzeć swój kod, używając interfejsu API Pointer Lock .

Rozwiesiłem to repozytorium demo pointer-lock-demo i zmodyfikowałem je, aby dodać element losowego ruchu.

Oto link do mojej strony GitHub: https://aristocrates.github.io/pointer-lock-demo
A tutaj jest link do mojego repozytorium: https://github.com/aristocrates/pointer-lock-demo

Kod JavaScript znaczenie zawarta jest w app.js, w canvasLoop(e)metodzie.

Jedyną rzeczą, którą zmieniłem z oryginalnego dema, były wiersze

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

Dodałem dwie linie reprezentujące losowy ruch:

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

Jest jeszcze wiele rzeczy, które możesz poprawić, ale mam nadzieję, że to pomoże Ci zacząć.

Sposób bez javascript

Właściwie to lubię rozwiązania, które mogą być oparte na javascript, ponieważ są one bardziej prawdopodobne związane z siecią, a duże szanse są niezależne od systemu operacyjnego. Zastanawiałem się jednak - jak rozwiązać problem ze wszystkimi przeglądarkami, ponieważ rozwiązania javascript w tym przypadku będą trudne do dostosowania dla wszystkich możliwych przeglądarek (nie jestem pewien, czy to w ogóle możliwe).

Jak już wspomniałeś, istnieje inny sposób - tj. Naśladowanie zachowania na poziomie systemu operacyjnego. Ma to również inną zaletę - możesz być pewien, że dla przeglądarki wygląda ona w 100% tak, jak była ludzka (ponieważ cóż, to sterownik wysyła sygnał). Możesz więc używać rozwiązań opartych na sterownikach / urządzeniach z dowolnymi przeglądarkami (lub nawet w sytuacji, gdy javascript jest wyłączony).

Linux

Niestety, włączenie sterownika / urządzenia natychmiast powoduje zależność systemu operacyjnego. Tak więc dla każdego systemu operacyjnego potrzebujesz własnego rozwiązania. W tym poście koncentruję się na rozwiązaniach opartych na systemie Linux (więc będę działał z Linuksem) - i trochę Mac OS. W systemie Linux możliwe jest jawne zapisywanie zdarzeń na urządzeniu, dlatego poniżej znajduje się przykład funkcji z główną pętlą:

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

Mój pełny kod problemu znajduje się tutaj . Program poprosi o amplitudę „drżenia” i jego częstotliwości (a zatem ile czasu w mikrosekundach przypada na „drżenie”). Aby naśladować sytuację, zmusi mysz do losowego przemieszczania się w poszukiwaniu 0..Xpunktów w losowym kierunku (góra-dół-lewo-dół) i losowo 0..Ymikrosekundy czeka do następnego „drżenia”, występuje Xamplituda „drżenia” i Yczęstotliwość „drżenia” „

Inną rzeczą może być dostosowanie programu do twojego systemu. Program jest „obojętny” i nie może sam wykryć myszy, więc "/dev/input/event4"jest mocno zakodowany. Aby zrozumieć, co może być identyfikatorem twojego systemu, możesz spróbować:

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

Możliwości są "event3"i "event4"- ale dla twojego systemu, który może mieć inne wartości. Jeśli więc różni się od obecnie używanego w kodzie C, po prostu zmień odpowiedni wiersz (więc wstaw int fd = open("/dev/input/event4", O_RDWR);i umieść urządzenie zamiast event4)

Demo gif dla tego programu (niska częstotliwość klatek, niestety, więc nie przechowuj zbyt dużego obrazu) tutaj .

Mała uwaga dodatkowa (jeśli nie wiesz, co zrobić z kodem C) - aby skompilować program powyżej, użyj:

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

gdzie file.cjest nazwa pliku kodu źródłowego C. Otrzymasz plik wykonywalny, wywoływany mw twoim katalogu. Najprawdopodobniej będziesz potrzebować uprawnień do bezpośredniego zapisu na urządzeniu myszy, więc możesz użyć sudo:

user@host:/path$ sudo ./m

Inny system operacyjny

Logika pozostanie taka sama:

• Znajdź sposób na dostęp do urządzenia myszy
• Napisz zdarzenie poruszającej się myszy
• Zastosuj randomizację do swojego wydarzenia

Otóż ​​to. Na przykład Mac OS ma swój własny sposób pracy z myszą (nie tak jak Linux, Mac nie ma procfstak dobrze), jest dobrze opisany tutaj .

Jako podsumowanie

Co jest lepsze - javascript lub rozwiązania zorientowane na urządzenie - zależy od ciebie, ponieważ pewne warunki (takie jak przeglądarka lub system operacyjny) mogą decydować o wszystkim w tym przypadku. Dlatego podałem wytyczne wraz z pewnym działającym przykładem implementacji tego na poziomie systemu operacyjnego. Korzyścią jest to, że rozwiązaniem jest przeglądarka, ale jako koszt mamy program powiązany z systemem operacyjnym.

Zrobiłem to raz jako żart na Puppy Linux Forum i otrzymałem komentarz, że:

Ludzie z chorobą Parkinsona nie będą myśleć, że to zabawne !!!

Na szczęście lekarstwo to po prostu cntrl-C.

Oto skrypt powłoki, który wymaga 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

Nazwij jako parkinson_sim i biegnij z opcjonalnym argumentem czasu między drżeniami, który może wynosić od 0,001 do 999,0.

parkinson_sim [time_between_tremors_in_seconds] #default wynosi 0,1

Popełniłem błąd, klikając go samodzielnie zamiast uruchamiać z wiersza poleceń i szybko odkryłem, jak frustrujące musi być. Kilka razy próbowałem otworzyć okno terminala, aby je zabić.

Twój drugi pomysł (ukryj kursor) znajduje się w połowie drogi do jednego, który moim zdaniem może Ci się przydać:

• Ukryj kursor myszy za pomocą CSS, jak sugerujesz. ( cursor:noneIIRC)
• Zamiast niestabilnego kursora GIF użyj obrazka + absolutnego pozycjonowania CSS + JS, aby emulować wskaźnik myszy; tzn. podążaj za myszą wokół strony i umieść obraz kursora w miejscu, w którym miałby się znajdować kursor myszy.

Następnie dodajesz matematykę drżenia do kodu kursora, aby „potrząsnąć” kursorem. Od Ciebie zależy, jakie właściwe krzywe mają właściwie symulować drgania.

Wreszcie: dla wszystkich programowanych elementów sterujących (łącza itp.):

• przechwytuj zdarzenia kliknięcia, popychaj je do bieżącej lokalizacji „drżenia” w oparciu o stan twoich krzywych drżenia i sprawdzaj granice elementów, aby zobaczyć, czy użytkownik wstrząsnął zamierzonym elementem lub ewentualnie elementem, który nie był zamierzony .

Jedną z głównych zalet tej implementacji: Twój „drżący kursor” będzie wyświetlany na urządzeniach dotykowych, na których początkowo nie ma kursora.

Edytować:

Oparty na JSFiddle (bardzo czysty i pomocny!) Michaela Theriota z komentarzy, oto taki, który drży stale z normalnie rozmieszczonym przeciągnięciem wokół bieżącej lokalizacji kursora: http://jsfiddle.net/benmosher/0x4mc64v/4/

( normalTablica jest wynikiem wywołania rnorm(100)w mojej konsoli R. Najprostszy sposób, w jaki mogłem wymyślić w JS próbkę normalnie dystrybuowanej losowej liczby całkowitej).

Pomysł, aby drżenie było „prawidłowe”, możesz zarejestrować ruch myszy prawdziwego pacjenta, dzięki czemu jest bardziej autentyczny, gdy mówisz ludziom, skąd pochodzą dane.

Istnieją skrypty pozwalające kotowi podążać za kursorem myszy, możesz dostosować jeden, aby drugi kursor podążał (przeskakiwał) kursorem. Strona oblicza pozycję drugiego kursora, więc może również określić, czy zdarzenie kliknięcia zakończyło się powodzeniem, czy nie.

Jeśli możesz, zrób to przez Internet, w ten sposób dotrzesz do znacznie większej liczby osób niż prosząc ich o zainstalowanie programu lub aktywację flasha lub cokolwiek innego.

Zamiast próbować przesunąć wskaźnik, możesz zamiast tego przenieść aplikację (stronę internetową). Napisałem prosty formularz HTML z kilkoma polami wejściowymi. Po przesunięciu myszy na formularz formularz przesuwa się.

Demo ruchomej formy można zobaczyć na jsfiddle . Spróbuj kliknąć jedno z pól wejściowych, aby zobaczyć efekt.

W tym celu wykorzystałem efekt wstrząsu jquery . JavaScript dla efektu wstrząsu wygląda następująco i powoduje, że formularz przesuwa się w górę i w dół za każdym razem, gdy na nim znajdzie się mysz:

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

Chociaż forma porusza się tylko w górę iw dół, myślę, że ma pożądany efekt. Możesz grać z parametrami (kierunek, czas, odległość, a także nienazwany „1000” powyżej), aby dostosować ruch formy.

Dlaczego nie skorzystać z rozwiązania sprzętowego? Istnieją pewne myszy, w których można obciążać, na przykład Logitech G500. Zamiast obciążać, włóż mały silnik oscylacyjny, który powoduje, że mysz lekko się trzęsie. To także bardziej symulowało rzeczywiste zaburzenie: drżą nie tylko kursor, ale cała ręka i mysz. Oznacza to również, że możesz wyświetlać inne oprogramowanie niż strony internetowe.

Zamiast myszy z otworem obciążającym możesz też po prostu przykleić coś do myszy, ale jest to bardziej zauważalne.

Gdy zastanawiałeś się nad zrobieniem tego za pomocą niestandardowego sterownika myszy, przypuszczam, że zrobiłby to również mały program działający na komputerze? Jeśli tak jest, tutaj jest mały fragment kodu C #, który nieskończenie przesuwa kursor losowo z zakresem plus minus 5px wokół bieżącej pozycji kursora. Po każdym przesunięciu program czeka od 50 ms do 100 ms (niedokładnie!). Drżenie można skonfigurować, dostosowując wartości przesunięcia i przerw. Uruchomiłem to w aplikacji konsolowej i - w zależności od wartości - bardzo trudno było mi zatrzymać program.

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

Oto wersja systemu Windows mojego skryptu xdotool, który korzysta z AutoIt . To był mój pierwszy skrypt AutoIt i napisanie go zajęło tylko kilka minut, więc jestem pewien, że można go poprawić. Po prostu zapisz z rozszerzeniem .au3 i uruchom go z 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

Sterownica

• Strona główna: Rozpocznij symulację.
• pauza: wstrzymaj symulację.
• Esc: Wyjdź z symulacji.

Lub użyj mojej skompilowanej wersji stąd .

Nie możesz oczekiwać, że ktokolwiek będzie w stanie trzymać ręce idealnie równo, więc jedną rzeczą, którą możesz wziąć pod uwagę, jest:

1. Wyjaśnij użytkownikom, co robisz, i
2. Spraw, aby klikalne elementy na stronie demonstracyjnej były znacznie mniejsze niż zwykle.
3. Zwiększenie do maksimum czułości myszy w przykładowym systemie.

Moje rozumowanie jest takie (zastrzeżenie, że nie jestem ekspertem w dziedzinie ux ani medycyny), zmniejszając elementy z możliwością kliknięcia, stwarzasz podobny problem dla większości osób, z którymi osoba dotknięta chorobą Parkinsona miałaby do czynienia na codziennej stronie internetowej.

Możesz użyć kombinezonu do symulacji starości, takiego jak ten opisany w tym artykule ... Podejrzewam, że część drżenia rąk to tylko wibrujący silnik owinięty wokół nadgarstka, a także grube rękawiczki, które sprawiają, że dłonie są ogólnie niezdarne.

• W swoim DIVCSS ukryj kursor za pomocącursor:none;
• Utwórz obraz kursora .png i przenieś go ( left, top) przy włączonym jQmousemove
• Losuj .png margin-lefti margin-topużywając a setTimeout (aby płynnie zmienić pozycję, użyj CSS3 transitionlub z jQ .animate()).

Uwaga: skrypt nie może wiedzieć, czy dłoń jest nadal na myszy;)

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>

Odpowiedzi na niskopoziomowe części symulowania drżenia są teraz dobrze odbierane. Dodam coś koncentrującego się na rodzaju drżenia, aby zasymulować:

Większość odpowiedzi implementuje kursor myszy poruszający się po losowej ścieżce z pewną stałą maksymalną szerokością kroku w kierunku X i Y.

Powinno to działać wystarczająco dobrze w przypadku użycia utrudniającego trafienie w określony obszar, jak przycisk.

W przypadku bardziej ogólnego problemu symulowania problemów z interfejsem użytkownika spowodowanych drżeniem spowodowanym chorobą Parkinsona, przynajmniej interesująca byłaby symulacja ruchów ręki tego rodzaju drżenia.
Podejrzewam, że losowy spacer może nie być zbyt dobrym przybliżeniem .

Oczywiście może być trudno uzyskać rzeczywiste dane śladu ręki dotyczące ruchu drżenia, ale z pewnością są artykuły na temat analizy tego rodzaju drżenia:

Artykuł Parametryczna reprezentacja ruchu ręki w chorobie Parkinsona mówi o tym, jak najlepiej wykreślić ślady ruchu ręki w 3D.
Papier jest płatny, ale podgląd w prawym górnym rogu, z etykietą „Look Inside>” na obrazku książki, pokazuje kilka interesujących wykresów różnych reprezentacji danych śledzenia dłoni .