Tremor (zB Parkinson) mit der Maus auf einer Webseite simulieren?

Ich arbeite für eine Stiftung, die das Bewusstsein für Barrierefreiheit im Internet schärft. Für eine Präsentation möchten wir einen kleinen Workshop anbieten, der verschiedene Behinderungen / Beeinträchtigungen für Menschen simuliert. Dies erfolgt über eine speziell für diese Präsentation erstellte Website.

Eine der nachgewiesenen Beeinträchtigungen ist ein Zittern, was bedeutet, dass wackelige, schwer zu kontrollierende Handbewegungen auftreten. Bei dieser Beeinträchtigung ist es sehr schwierig, den Mauszeiger genau zu bewegen und die Maustaste zu drücken, während sich die Maus über einem Link befindet. Sowohl einige alte Menschen als auch Menschen mit Krankheiten, z. B. Parkinson, können unter Zittern leiden.

Jetzt möchte ich den Mauszeiger auf unvorhersehbare Weise bewegen, so dass es für die Leute sehr schwierig ist, auf eine kleine Schaltfläche zu klicken. Da JavaScript das direkte Bewegen des Mauszeigers nicht zulässt, suche ich nach anderen Möglichkeiten, um dies zu erreichen. Ich hatte folgende Ideen:

• Verwenden eines Maustreibers / Dienstprogramms, das das Schütteln der Maus simuliert.
• Blenden Sie den Mauszeiger über CSS aus, platzieren Sie eine GIF-Animation eines zitternden Mauszeigers an der Stelle des ursprünglichen Cursors (mit JavaScript) und machen Sie den Ziellink dann etwa alle paar Sekunden für eine Sekunde anklickbar. Dies würde zumindest das Gefühl vermitteln, als würde man immer im falschen Moment klicken.

Die erste Idee wäre zwar ziemlich cool, aber ich konnte kein solches Tool finden, weder für Mac noch für Windows. Und ich habe selbst keine Fähigkeiten, so etwas zu programmieren.

Die zweite Idee scheint etwas ungeschickt zu sein, aber ich denke, sie würde den gewünschten Effekt erzielen.

Hat jemand eine andere Idee?

Ich habe eine kurze Demo von etwas gemacht, auf dem Sie hoffentlich Ihren Code mithilfe der Zeigersperr-API aufbauen können sollten .

Ich habe dieses Pointer-Lock-Demo-Repo gegabelt und modifiziert, um ein zufälliges Bewegungselement hinzuzufügen.

Hier ist der Link zu meiner GitHub-Seite: https://aristocrates.github.io/pointer-lock-demo
Und hier ist der Link zu meinem Repo: https://github.com/aristocrates/pointer-lock-demo

Der wichtige Javascript-Code ist app.jsin der canvasLoop(e)Methode enthalten.

Das einzige, was ich gegenüber der ursprünglichen Demo geändert habe, war nach den Zeilen

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

Ich habe zwei Zeilen hinzugefügt, um zufällige Bewegungen darzustellen:

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

Es gibt noch viele Dinge, die Sie verbessern könnten, aber hoffentlich kann dies Ihnen den Einstieg erleichtern.

Nicht-Javascript-Methode

Eigentlich mag ich Lösungen, die möglicherweise auf Javascript basieren, da sie eher webbezogen sind und gute Chancen bestehen - OS-unabhängig. Ich habe jedoch darüber nachgedacht, wie Sie Ihr Problem für alle Browser beheben können, da es in diesem Fall schwierig ist, Javascript-Lösungen für alle möglichen Browser anzupassen (ich bin mir nicht sicher, ob dies überhaupt möglich ist).

Wie Sie bereits erwähnt haben, gibt es eine andere Möglichkeit: das Verhalten auf Betriebssystemebene zu emulieren. Dies hat noch einen weiteren Vorteil: Sie können sicher sein, dass der Browser zu 100% menschlich aussieht (weil der Treiber das Signal sendet). Sie können also treiber- / gerätebasierte Lösungen mit jedem Browser verwenden (oder sogar in Situationen, in denen Javascript deaktiviert ist).

Linux

Leider führt die Einbeziehung von Treiber / Gerät sofort zu einer Abhängigkeit vom Betriebssystem. Für jedes Betriebssystem benötigen Sie eine eigene Lösung. In diesem Beitrag konzentriere ich mich auf Linux-basierte Lösungen (wird also mit Linux funktionieren) - und Mac OS ein wenig. Unter Linux ist es möglich, Ereignisse explizit auf das Gerät zu schreiben. Im Folgenden finden Sie ein Funktionsbeispiel mit Hauptschleife:

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

Mein vollständiger Code für das Problem finden Sie hier . Das Programm fragt nach der Amplitude des "Zitterns" und seiner Frequenz (also wie viel Zeit in Mikrosekunden zwischen "Zittern" liegt). Um die Situation zu emulieren, wird die Maus gezwungen, sich zufällig nach 0..XPunkten in zufälliger Richtung zu bewegen (oben-unten-links-unten) und zufällig 0..YMikrosekunden bis zum nächsten "Tremor" zu warten. Es gibt Xeine Amplitude von "Tremor" und Yeine Frequenz von "Tremor" ""

Eine andere Möglichkeit besteht darin, das Programm an Ihr System anzupassen. Das Programm ist "Dummy" und kann die Maus nicht selbst erkennen, "/dev/input/event4"ist also fest codiert. Um festzustellen, welche Kennung für Ihr System möglicherweise vorhanden ist, können Sie Folgendes versuchen:

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

Und so sind Möglichkeiten "event3"und "event4"- aber für Ihr System, die andere Werte haben können. Wenn sich dies von der derzeit im C-Code verwendeten unterscheidet, ändern Sie einfach die entsprechende Zeile (also Zeile mit int fd = open("/dev/input/event4", O_RDWR);und platzieren Sie Ihr Gerät anstelle von event4).

Eine GIF-Demo für dieses Programm (leider niedrige Bildrate, also Bild nicht zu groß halten) hier .

Eine kleine Randnotiz (wenn Sie nicht wissen, was Sie mit C-Code tun sollen) - um das obige Programm zu kompilieren, verwenden Sie einfach:

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

Wo file.cist der Name Ihrer C-Quellcodedatei, dann erhalten Sie eine ausführbare Datei, die min Ihrem Verzeichnis aufgerufen wird . Höchstwahrscheinlich benötigen Sie Berechtigungen, um direkt in das Mausgerät zu schreiben. Sie können also Folgendes verwenden sudo:

user@host:/path$ sudo ./m

Anderes Betriebssystem

Die Logik bleibt gleich:

• Finden Sie einen Weg, um auf Ihr Mausgerät zuzugreifen
• Schreibe das Ereignis einer sich bewegenden Maus
• Wenden Sie eine Randomisierung auf Ihre Veranstaltung an

Das ist es. Zum Beispiel hat Mac OS seine eigene Art, mit der Maus zu arbeiten (nicht wie Linux, Mac auch nicht procfs), es wird hier gut beschrieben .

Als Schlussfolgerung

Was besser ist - Javascript oder geräteorientierte Lösungen - liegt bei Ihnen, da bestimmte Bedingungen (wie browser- oder betriebssystemübergreifend) in diesem Fall alles entscheiden können. Aus diesem Grund habe ich Richtlinien zusammen mit bestimmten Arbeitsbeispielen zur Implementierung auf Betriebssystemebene bereitgestellt. Der Vorteil hierbei ist, dass die Lösung browserübergreifend ist, aber als Kosten haben wir ein OS-gebundenes Programm.

Ich habe das einmal als Witz im Puppy Linux Forum gemacht und den Kommentar bekommen, dass:

Menschen mit Parkinson werden es nicht lustig finden !!!

Heilung hier ist zum Glück einfach cntrl-C.

Hier ist das Shell-Skript, für das xdotool erforderlich ist

#!/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

Benennen Sie als parkinson_sim und führen Sie ein optionales Argument für die Zeit zwischen Zittern aus, die zwischen 0,001 und 999,0 liegen kann.

parkinson_sim [time_between_tremors_in_seconds] #default ist 0.1

Ich habe den Fehler gemacht, selbst darauf zu klicken, anstatt es über die Befehlszeile auszuführen, und schnell festgestellt, wie frustrierend es sein muss. Ich brauchte mehrere Versuche, um ein Terminalfenster zu öffnen, um es zu töten.

Ihre zweite Idee (verstecken Sie den Cursor) ist auf halbem Weg zu einer, von der ich denke, dass sie für Sie gut funktioniert:

• Verstecken Sie den Mauszeiger über CSS, wie Sie vorschlagen. ( cursor:noneIIRC)
• Verwenden Sie anstelle eines GIF mit wackeligem Cursor ein Bild + absolute CSS-Positionierung + JS, um den Mauszeiger zu emulieren. Folgen Sie also der Maus um die Seite und platzieren Sie das Cursorbild dort, wo sich der Mauszeiger nativ befinden würde.

Anschließend fügen Sie Ihrem Cursor-Code etwas Tremor-Mathematik hinzu, um den Cursor zu "schütteln". Es liegt an Ihnen, die richtigen Kurven zu bestimmen, um die Tremoreingabe richtig zu simulieren.

Schließlich: für alle Steuerelemente, die Sie programmieren (Links usw.):

• Erfassen Sie Klickereignisse, schieben Sie sie basierend auf dem Status Ihrer Tremorkurven an die aktuelle Position "Tremor" und überprüfen Sie Ihre Elemente anhand von Grenzen, um festzustellen, ob der Benutzer das beabsichtigte Element oder möglicherweise ein nicht beabsichtigtes Element ausgeschüttelt hat .

Ein wichtiger Vorteil dieser Implementierung: Ihr "wackeliger Cursor" wird auf Touch-Geräten angezeigt, für die zunächst kein Cursor vorhanden wäre.

Bearbeiten:

Basierend auf Michael Theriots (sehr sauber und hilfreich!) Basis JSFiddle aus den Kommentaren, hier ist eine, die ständig mit einem normalverteilten Sweep um die aktuelle Cursorposition zittert : http://jsfiddle.net/benmosher/0x4mc64v/4/

(Das normalArray ist das Ergebnis eines Aufrufs rnorm(100)in meiner R-Konsole. Die einfachste Art, wie ich mir in JS vorstellen kann, eine normalverteilte zufällige Ganzzahl abzutasten.)

Nur eine Idee, um das Zittern "richtig" zu machen. Sie können die Mausbewegung eines echten Patienten aufzeichnen. Dies macht es authentischer, wenn Sie den Leuten sagen, woher die Daten stammen.

Es gibt ein Skript, mit dem eine Katze Ihrem Mauszeiger folgen kann. Sie können eines anpassen, damit ein zweiter Cursor Ihrem Mauszeiger folgt (herumspringt). Die Seite berechnet die Position des zweiten Cursors, sodass auch festgestellt werden kann, ob ein Klickereignis erfolgreich ist oder nicht.

Wenn Sie können, machen Sie es bitte webbasiert. Auf diese Weise erreichen Sie viel mehr Menschen, als sie zu bitten, ein Programm zu installieren oder Flash oder was auch immer zu aktivieren.

Anstatt zu versuchen, den Zeiger zu verschieben, können Sie stattdessen die Anwendung (Webseite) verschieben. Ich habe ein einfaches HTML-Formular geschrieben, das einige Eingabefelder enthält. Wenn Sie die Maus auf das Formular bewegen, wird das Formular verschoben.

Sie können eine Demo der sich bewegenden Form bei jsfiddle sehen . Versuchen Sie, auf eines der Eingabefelder zu klicken, um den Effekt zu sehen.

Ich habe den JQuery- Shake- Effekt verwendet, um dies zu erreichen. Das Javascript für den Shake-Effekt sieht folgendermaßen aus und bewirkt nur, dass sich das Formular auf und ab bewegt, wenn die Maus darüber bewegt wird:

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

Obwohl sich die Form nur auf und ab bewegt, denke ich, dass sie den gewünschten Effekt hat. Sie können mit den Parametern (Richtung, Zeiten, Entfernung sowie dem oben genannten unbenannten "1000") spielen, um die Formularbewegung zu optimieren.

Warum nicht eine Hardwarelösung verwenden? Es gibt bestimmte Mäuse, in die Sie Gewichte einbauen können, wie den Logitech G500. Setzen Sie statt eines Gewichts einen kleinen oszillierenden Motor ein, der die Maus leicht zittern lässt. Dies simulierte auch die tatsächliche Störung mehr: Es ist nicht nur der Cursor, der zittert, sondern die gesamte Hand und Maus. Außerdem können Sie andere Software als Websites anzeigen.

Anstelle einer Maus mit einem Gewichtsschlitz können Sie auch einfach etwas auf die Maus kleben, aber das fällt besser auf.

Da Sie darüber nachdachten, es mit einem benutzerdefinierten Maustreiber zu tun, würde ein kleines Programm, das auf dem PC ausgeführt wird, wahrscheinlich auch funktionieren? Wenn dies der Fall ist, finden Sie hier einen kleinen Ausschnitt für C #, der den Cursor unendlich zufällig mit einem Bereich von plus minus 5 Pixel um die aktuelle Cursorposition bewegt. Nach jeder Verschiebung wartet das Programm 50 ms bis 100 ms (nicht genau!). Das Wackeln kann durch Anpassen der Werte für die Verschiebung und die Pausen konfiguriert werden. Ich habe dies in einer Konsolenanwendung ausgeführt und es war - abhängig von den Werten - ziemlich schwierig, das Programm zu stoppen.

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

Hier ist eine Windows-Version meines xdotool-Skripts, das AutoIt verwendet . Dies war mein erstes AutoIt-Skript, und das Schreiben dauerte nur ein paar Minuten. Ich bin sicher, dass es verbessert werden kann. Speichern Sie einfach mit der Erweiterung .au3 und führen Sie sie mit AutoIt (Run Script x86) aus.

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

Kontrollen

• Home: Simulation starten.
• Pause: Simulation anhalten.
• Esc: Simulation beenden.

Oder benutze meine kompilierte Version von hier .

Sie können nicht erwarten, dass jemand seine Hände perfekt ruhig halten kann. Eine Sache, die Sie in Betracht ziehen können, ist:

1. Erklären Sie den Benutzern, was Sie tun, und
2. Machen Sie die anklickbaren Elemente auf der Demoseite viel kleiner als normal.
3. Erhöhen der Mausempfindlichkeit im Beispielsystem auf das Maximum.

Meine Argumentation ist (Vorbehalt, ich bin kein Experte für UX oder Medizin), wenn Sie die klickbaren Elemente verkleinern, entsteht für die meisten Menschen ein ähnliches Problem, mit dem eine Person mit Parkinson-Krankheit auf einer alltäglichen Website konfrontiert wäre.

Sie können einen Alterssimulationsanzug wie den in diesem Artikel beschriebenen verwenden ... Ich vermute, dass der Teil mit dem Zittern der Hand nur ein vibrierender Motor ist, der um das Handgelenk geschnallt ist, sowie einige dicke Handschuhe, um die Hände im Allgemeinen ungeschickt zu machen.

• In Ihrem DIVCSS-Verstecken Sie den Cursor mitcursor:none;
• Erstellen Sie ein PNG-Cursor-Bild und verschieben Sie es ( left, top) mit aktiviertem jQmousemove
• Randomisieren Sie die .png margin-leftund margin-topverwenden Sie a setTimeout (um die transitionNeupositionierung reibungslos zu gestalten, verwenden Sie CSS3 oder machen Sie es mit jQ .animate()).

Hinweis: Das Skript kann nicht wissen, ob sich die Hand noch auf der Maus befindet;)

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>

Die Low-Level-Teile der Simulation des Tremors sind inzwischen gut beantwortet. Ich werde etwas hinzufügen, das sich auf die Art des zu simulierenden Zitterns konzentriert:

Die meisten Antworten implementieren einen Mauszeiger, der sich auf einem zufälligen Pfad mit einer festen maximalen Schrittweite in X- und Y-Richtung bewegt.

Dies sollte gut genug funktionieren, um es schwierig zu machen, einen bestimmten Bereich wie einen Knopf zu treffen.

Für das allgemeinere Problem der Simulation von UI-Problemen, die durch einen Tremor aufgrund der Parkinson-Krankheit verursacht werden, wäre es zumindest interessant, die Handbewegungen dieser Art von Tremor tatsächlich zu simulieren.
Ich vermute, dass der zufällige Spaziergang keine sehr gute Annäherung ist .

Es mag natürlich schwierig sein, echte Handspurdaten der Tremorbewegung zu erhalten, aber es gibt sicherlich Artikel über die Analyse dieser Art von Tremor:

In der Arbeit Parametrische Darstellung der Handbewegung bei Parkinson geht es darum, wie 3D-Handbewegungsspuren am besten dargestellt werden können.
Das Papier ist kostenpflichtig, aber die Vorschau oben rechts mit der Bezeichnung "Look Inside>" auf dem Buchbild zeigt einige interessante Darstellungen verschiedener Darstellungen von Handverfolgungsdaten .