Webページ上でマウスを使って振戦（パーキンソン病など）をシミュレートしますか？

私はインターネットのアクセシビリティに対する意識を高める財団のために働いています。プレゼンテーションのために、人々にさまざまな障害/障害をシミュレートする小さなワークショップを提供したいと思います。これは、このプレゼンテーションのために特別に作成されたWebサイトを介して行われます。

示されている障害の1つは、震えです。つまり、揺れがあり、制御が難しい手の動きを経験します。この障害により、マウスカーソルを正確に移動し、マウスがリンク上にあるときにマウスボタンを押すことは非常に困難です。一部の高齢者とパーキンソン病などの病気の人の両方が振戦に苦しむ可能性があります。

では、どういうわけか、マウスカーソルを予測できない方法で動かして、小さなボタンをクリックするのが非常に難しいようにしたいと思います。JavaScriptではマウスカーソルを直接移動できないため、これを実現する他の方法を探しています。私は次のアイデアを思いつきました：

• マウスの揺れをシミュレートするマウスドライバー/ユーティリティの使用。
• CSSを介してマウスカーソルを非表示にし、シェイクマウスカーソルのGIFアニメーションを（JavaScriptを使用して）元のカーソルの場所に配置してから、ターゲットリンクを数秒おきにのみクリック可能にします。これは、少なくとも間違った瞬間にクリックするような感覚を少なくとも与えます。

最初のアイデアはかなりクールですが、Mac用でもWindows用でも、このようなツールは見つかりませんでした。そして、私はそのようなものを自分でプログラミングするスキルがありません。

2番目のアイデアは少し不格好に見えますが、望ましい効果が得られると思います。

誰か他のアイデアがありますか？

Pointer Lock APIを使用して、コードの基礎となることができるはずの簡単なデモを行いました。

このpointer-lock-demoリポジトリをフォークして、ランダムな移動要素を追加するように変更しました。

これが私のGitHubページへのリンクです：https : //aristocrates.github.io/pointer-lock-demo
そして、これが私のリポジトリへのリンクです：https : //github.com/aristocrates/pointer-lock-demo

重要なJavaScriptコードはapp.js、canvasLoop(e)メソッドのに含まれています。

私が元のデモから変更した唯一のことは、ラインの後

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

ランダムな動きを表す2つの行を追加しました。

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

改善できることはまだたくさんありますが、うまくいけば、これがあなたが始めるのに役立つでしょう。

JavaScript以外の方法

実際、私はJavaScriptに基づくソリューションが好きです。なぜなら、それらはWeb関連であり、OSに依存しない可能性が高いからです。ただし、私は考えていました。すべてのブラウザーで問題を解決する方法です。この場合、JavaScriptソリューションは、すべての可能なブラウザーに調整するのが難しいためです（それが可能かどうかはわかりません）。

だから、あなたが言ったように、別の方法があります-つまり、OSレベルで動作をエミュレートすることです。これにはもう1つの利点もあります。ブラウザーの場合、人間と同じように100％に見えるはずです（信号を送信しているのはドライバーだからです）。そのため、任意のブラウザーで（または状況によっては、JavaScriptが無効になっている場合でも）ドライバー/デバイスベースのソリューションを使用できます。

Linux

残念ながら、ドライバー/デバイスを使用すると、すぐにOSに依存します。したがって、OSごとに独自のソリューションが必要になります。この投稿では、Linuxベースのソリューション（したがって、Linuxで動作します）とMac OSに少し焦点を当てています。Linuxでは、デバイスにイベントを明示的に書き込むことができるため、以下はメインループを使用した関数のサンプルです。

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

問題の私の完全なコードはここにあります。プログラムは、「微動」の振幅とその周波数を求めます（したがって、「微動」の間隔はマイクロ秒で何回か）。状況をエミュレートするために0..X、ランダムな方向（上から左下）にポイントをランダムに移動させ0..Y、次の「振戦」までランダムにマイクロ秒待機します。「振戦」のX振幅があり、「振戦」のY頻度です。 」

もう1つは、プログラムをシステムに適合させることです。プログラムは「ダミー」であり、それ自体で"/dev/input/event4"はマウスを検出できないため、ハードコーディングされています。システムの識別子となるものを理解するには、次のことを試してください。

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

そして可能性は"event3"andです"event4"が、あなたのシステムにとっては他の価値があるかもしれません。したがって、それが現在Cコードで使用されているものと異なる場合は、対応する行を変更するだけです（したがって、のint fd = open("/dev/input/event4", O_RDWR);代わりにデバイスを配置して配置しますevent4）。

このプログラムのgifデモ（フレームレートが低いため、残念ながら画像を大きくしすぎないようにしてください）はこちら。

ちょっとした注意点（Cコードの処理方法がわからない場合）—上記のプログラムをコンパイルするには、次のコードを使用します。

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

ここfile.cで、Cソースコードファイルの名前を指定するとm、ディレクトリで呼び出される実行可能ファイルが取得されます。ほとんどの場合、マウスデバイスに直接書き込むためのアクセス許可が必要になるため、以下を使用できますsudo。

user@host:/path$ sudo ./m

その他のOS

ロジックは同じままです。

• マウスデバイスにアクセスする方法を見つける
• マウス移動イベントの書き込み
• イベントにランダム化を適用する

それでおしまい。たとえば、Mac OSにはマウスを操作する独自の方法があります（Linuxとは異なり、Macにもありませんprocfs）。これについては、こちらで詳しく説明しています。

結論として

特定の条件（ブラウザー間またはOS間など）がこの場合のすべてを決定する可能性があるため、何がより良い（JavaScriptまたはデバイス指向のソリューション）かはあなた次第です。したがって、OSレベルでそれを実装する方法の特定の実用的な例と一緒にガイドラインを提供しました。ここでの利点は、ソリューションがブラウザーに依存しないことですが、コストとしてOSにバインドされたプログラムがあります。

パピーリナックスフォーラムで一度冗談としてこれを行い、次のようなコメントを得ました：

パーキンソン病の人はそれがおかしいとは思わないだろう!!!

幸いなことに、ここでの治療法は単にcntrl-Cです。

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

parkinson_simとして名前を付け、微動の間の時間をオプションの引数で実行します。

parkinson_sim [time_between_tremors_in_seconds]＃デフォルトは0.1

コマンドラインから実行するのではなく、自分でクリックするという間違いを犯しました。ターミナルウィンドウを開いて終了するまでに数回の試行が必要でした。

2番目のアイデア（カーソルを非表示にする）は、あなたに役立つと思うアイデアの半分です。

• 提案どおり、CSSでマウスカーソルを非表示にします。（cursor:noneIIRC）
• 揺れるカーソルGIFの代わりに、画像+ CSS絶対配置+ JSを使用してマウスポインターをエミュレートします。つまり、ページの周りでマウスを追跡し、マウスカーソルが本来ある場所にカーソル画像を配置します。

次に、カーソルコードに振戦計算を追加して、カーソルを「シェイク」します。振戦入力を適切にシミュレートするための正しい曲線を決定するのは、あなた次第です。

最後に、プログラミングしているすべてのコントロール（リンクなど）について：

• クリックイベントをキャプチャし、振戦曲線の状態に基づいて現在の「振戦」の場所に移動し、要素を境界チェックして、ユーザーが意図した要素から、または意図していない要素にシェイクしたかどうかを確認します。

この実装の大きな利点の1つは、「カーソルの揺れ」がタッチデバイスに表示されることです。

編集：

コメントからマイケルTheriotさん（！とてもきれいで親切）ベースJSFiddleに基づき、ここで一つだと常に現在のカーソル位置の周りに正規分布スイープと震え：http://jsfiddle.net/benmosher/0x4mc64v/4/

（normal配列は、rnorm(100)Rコンソールで呼び出した結果です。JSで正規分布のランダムな整数をサンプリングするために考えることができる最も簡単な方法です。）

振戦を「正しく」するためのアイデアであり、実際の患者のマウスの動きを記録することができます。これにより、データの出所を人々に伝えるときに、より確実になります。

猫にマウスカーソルを追従させるためのスクリプトがあります。1つ目を調整して、2番目のカーソルをカーソルに追従させる（ジャンプさせる）ことができます。ページは2番目のカーソルの位置を計算しているので、クリックイベントが成功したかどうかも判断できます。

可能であれば、それをWebベースにしてください。プログラムをインストールしたり、フラッシュをアクティブにしたりすることを依頼するよりも、この方法で多くの人々にリーチできます。

ポインターを移動する代わりに、アプリケーション（Webページ）を移動することができます。いくつかの入力フィールドを持つ単純なhtmlフォームを作成しました。マウスをフォーム上に移動すると、フォームが移動します。

jsfiddleで動くフォームのデモを見ることができます。いずれかの入力フィールドをクリックして、効果を確認してください。

これを実現するために、jquery シェイク効果を使用しました。シェイクエフェクトのJavaScriptは次のようになり、マウスが上に移動するたびにフォームが上下に移動します。

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

フォームは上下にしか移動しませんが、望ましい効果があると思います。パラメーター（方向、時間、距離、および上記の名前のない「1000」）を操作して、フォームの動きを微調整できます。

ハードウェアソリューションを使用しないのはなぜですか？Logitech G500のように、ウェイトを配置できる特定のマウスがあります。重りを置く代わりに、マウスを少し振らせる小さな振動モーターを入れます。これは、実際の障害をさらにシミュレートしました。振るのはカーソルだけではなく、手とマウス全体です。また、ウェブサイト以外のソフトウェアを表示できることも意味します。

ウェイトスロット付きのマウスの代わりに、何かをマウスにテープで留めることもできますが、それはより目立ちます。

カスタムマウスドライバーでそれを行うことを考えていたときに、PCで実行されている小さなプログラムもどちらかと思いますか？この場合、C＃の小さなスニペットを次に示します。これは、現在のカーソル位置の周囲にプラスマイナス5ピクセルの範囲でカーソルをランダムに無限に移動します。各変位の後、プログラムは50ミリ秒から100ミリ秒待機します（正確ではありません！）。揺れは、変位と一時停止の値を調整することで設定できます。これをコンソールアプリケーションで実行したところ、値によっては、プログラムを停止するのにかなり苦労しました。

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

AutoItを使用するxdotoolスクリプトのWindowsバージョンは次のとおりです。これは私の初めてのAutoItスクリプトで、書くのに数分しかかからなかったので、改善できると確信しています。拡張子.au3で保存して、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

コントロール

• ホーム：シミュレーションを開始します。
• pause：シミュレーションを一時停止します。
• Esc：シミュレーションを終了します。

または、ここから私のコンパイル済みバージョンを使用します。

誰かが完全にしっかりと手を握ることができると期待することはできないので、考慮できることの1つは、

1. 何をしているのかをユーザーに説明し、
2. デモページのクリック可能な要素を通常よりもはるかに小さくします。
3. サンプルシステムでのマウスの感度を最大に上げる。

私の推論は（注意、私はUXや医学の専門家ではありません）クリック可能な要素を小さくすることで、パーキンソン病に苦しむ人が日常のWebサイトで直面するのと同じような問題をほとんどの人に引き起こします。

この記事で説明したような古い時代のシミュレーションスーツを使用できます。手ぶれの部分は、手首に巻き付けられた振動モーターと、手が全体的に不器用になるいくつかの厚い手袋だと思われます。

• でDIV、CSS-カーソルを非表示にしますcursor:none;
• .pngカーソル画像を作成し、jQをオンにして移動します（left、top）mousemove
• .png margin-leftをランダム化し、margin-topa を使用しますsetTimeout （再配置をスムーズにするには、CSS3を使用するtransitionか、jQを使用してください.animate()）。

注：スクリプトは、手がまだマウス上にあるかどうかを知ることはできません;）

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>

振戦のシミュレーションの低レベルの部分は、今ではよく答えられています。シミュレートする振戦の種類に焦点を当てたものを追加します。

ほとんどの回答は、XおよびY方向に一定の最大ステップ幅を持つランダムパス上を移動するマウスカーソルを実装しています。

これは、ボタンのような特定の領域をヒットするのを困難にするユースケースでは十分に機能するはずです。

パーキンソン病の振戦によって引き起こされるUIの問題をシミュレートするというより一般的な問題については、この種の振戦の手の動きを実際にシミュレートすることは少なくとも興味深いでしょう。
ランダムウォークはあまり良い近似ではないかもしれません。

もちろん、振戦の動きの実際のトレースデータを取得するのは難しいかもしれませんが、この種の振戦の分析に関する論文は確かにあります。

紙パーキンソン病における手の運動のパラメトリック表現は、最善の方法をプロット3D手の動きをトレースしようとしています。
紙はペイウォールですが、右上のプレビューには、本の画像の「Look Inside>」というラベルが付いており、ハンドトレースデータのさまざまな表現の興味深いプロットが表示されます。