Mensimulasikan getaran (dari misalnya Penyakit Parkinson) dengan mouse pada halaman web?

Saya bekerja untuk sebuah yayasan yang meningkatkan kesadaran akan aksesibilitas di internet. Untuk presentasi, kami ingin menawarkan lokakarya kecil yang mensimulasikan berbagai kecacatan / gangguan pada orang-orang. Ini dilakukan melalui situs web yang dibuat khusus untuk presentasi ini.

Salah satu gangguan yang ditunjukkan adalah mengalami tremor, yang berarti mengalami gerakan tangan yang goyah dan sulit dikendalikan. Dengan gangguan ini, sangat sulit untuk menggerakkan kursor mouse dengan tepat dan menekan tombol mouse saat mouse berada di atas tautan. Baik orang tua maupun orang yang menderita penyakit, misalnya Parkinson, dapat menderita tremor.

Sekarang saya ingin memindahkan kursor mouse dengan cara yang tidak terduga, sehingga sangat sulit bagi orang untuk mengklik tombol kecil. Karena JavaScript tidak memungkinkan untuk memindahkan kursor mouse secara langsung, saya mencari cara lain untuk mencapai ini. Saya datang dengan ide-ide berikut:

• Menggunakan driver / utilitas mouse yang mensimulasikan goncangan mouse.
• Sembunyikan kursor mouse melalui CSS, letakkan animasi GIF dari kursor mouse yang goyang di tempat kursor asli (dengan JavaScript), lalu buat tautan target hanya dapat diklik setiap beberapa detik selama satu detik atau lebih. Setidaknya ini akan memberikan perasaan seolah-olah seseorang selalu mengklik pada saat yang salah.

Walaupun ide pertama akan sangat keren, saya tidak dapat menemukan alat seperti ini, baik untuk Mac maupun untuk Windows. Dan saya sendiri tidak memiliki keterampilan dalam pemrograman hal seperti itu.

Gagasan kedua tampaknya agak canggung, tetapi itu akan mencapai efek yang diinginkan, saya pikir.

Adakah yang punya ide lain?

Saya membuat demo cepat tentang sesuatu yang semoga Anda dapat mendasarkan kode Anda, menggunakan Pointer Lock API .

Saya memotong repo pointer-lock-demo ini dan memodifikasinya untuk menambahkan elemen gerakan acak.

Berikut ini tautan ke halaman GitHub saya: https://aristocrates.github.io/pointer-lock-demo
Dan inilah tautan ke repo saya: https://github.com/aristocrates/pointer-lock-demo

Kode javascript penting terkandung dalam app.js, dicanvasLoop(e) metode ini.

Satu-satunya hal yang saya ubah dari demo asli adalah setelah dialog

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

Saya menambahkan dua baris untuk mewakili gerakan acak:

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

Masih ada banyak hal yang dapat Anda tingkatkan, tetapi mudah-mudahan ini dapat membantu Anda memulai.

Cara non-javascript

Sebenarnya, saya suka solusi, yang mungkin didasarkan pada javascript, karena mereka lebih cenderung terkait web, dan peluang bagus adalah - OS-independent. Namun, saya sedang memikirkan - bagaimana menyelesaikan masalah Anda untuk semua browser, karena solusi javascript, dalam hal ini, akan sulit untuk disesuaikan untuk semua browser yang mungkin (saya tidak yakin apakah itu mungkin sama sekali).

Jadi, seperti yang telah Anda sebutkan, ada cara lain - yaitu meniru perilaku pada tingkat OS. Ini memiliki keuntungan lain juga - Anda mungkin yakin bahwa untuk peramban itu terlihat 100% seperti manusia (karena, baik itu driver yang mengirimkan sinyal). Jadi, Anda dapat menggunakan solusi berbasis driver / perangkat dengan browser apa pun (atau bahkan dalam situasi, ketika javascript dinonaktifkan).

Linux

Sayangnya, melibatkan driver / perangkat segera menyebabkan ketergantungan OS. Jadi untuk setiap OS Anda membutuhkan solusi sendiri. Dalam posting ini saya fokus pada solusi berbasis Linux (jadi, akan bekerja dengan Linux) - dan Mac OS sedikit. Dengan Linux, dimungkinkan untuk menulis acara ke perangkat secara eksplisit, jadi di bawah ini adalah contoh fungsi dengan loop utama:

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

Kode lengkap saya untuk masalah ini dapat ditemukan di sini . Program akan meminta amplitudo "tremor" dan frekuensinya (dengan demikian, berapa banyak waktu dalam mikro-detik antara "tremor"). Untuk meniru situasi, itu akan memaksa mouse untuk bergerak secara acak untuk 0..Xtitik - titik dalam arah acak (atas-bawah-kiri-bawah) dan menunggu secara acak 0..Ymikro-detik sampai "tremor" berikutnya, ada Xamplitudo "tremor" danY frekuensi "tremor" "

Hal lain mungkin untuk mengadaptasi program untuk sistem Anda. Program ini "dummy" dan tidak dapat mendeteksi mouse dengan sendirinya, jadi "/dev/input/event4"ini adalah kode-keras. Untuk menyadari apa yang mungkin menjadi pengidentifikasi untuk sistem Anda, Anda dapat mencoba:

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

Dan kemungkinannya adalah "event3"dan "event4"- tetapi untuk sistem Anda yang mungkin memiliki nilai lain. Jadi, jika itu berbeda dari yang saat ini digunakan dalam kode C, ubah saja baris yang sesuai (jadi, baris dengan int fd = open("/dev/input/event4", O_RDWR);dan tempatkan perangkat Anda, bukanevent4 )

Demo gif untuk program ini (frame rate rendah, sayangnya, jadi jaga agar gambar tidak terlalu besar) di sini .

Sedikit catatan (jika Anda tidak tahu apa yang harus dilakukan dengan kode C) - untuk mengkompilasi program di atas, cukup gunakan:

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

di mana file.cnama file kode sumber C Anda, maka Anda akan dapat dieksekusi, dipanggil mdalam direktori Anda. Kemungkinan besar Anda akan memerlukan izin untuk menulis ke perangkat mouse secara langsung, sehingga Anda dapat menggunakan sudo:

user@host:/path$ sudo ./m

OS lainnya

Logikanya akan tetap sama:

• Temukan cara untuk mengakses perangkat mouse Anda
• Tulis acara menggerakkan mouse
• Terapkan pengacakan untuk acara Anda

Itu dia. Sebagai contoh, Mac OS memiliki caranya sendiri untuk bekerja dengan mouse (tidak seperti Linux, Mac belum procfsjuga), itu dijelaskan dengan baik di sini .

Sebagai sebuah kesimpulan

Apa yang lebih baik - solusi javascript atau berorientasi perangkat - terserah Anda, karena kondisi tertentu (seperti cross-browser atau cross-OS) dapat memutuskan segalanya dalam hal ini. Oleh karena itu, saya telah memberikan panduan bersama dengan contoh kerja tertentu tentang bagaimana mengimplementasikannya pada level OS. Manfaatnya di sini adalah bahwa solusinya adalah lintas-browser, tetapi sebagai biaya kami memiliki program yang diikat dengan OS.

Saya pernah melakukan ini sebagai lelucon, di Puppy Linux Forum dan mendapat komentar bahwa:

Orang dengan Parkinson tidak akan berpikir itu lucu !!!

Cure di sini hanya cntrl-C, untungnya.

Berikut ini skrip shell yang memerlukan 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

Beri nama sebagai parkinson_sim dan jalankan dengan argumen opsional untuk waktu antara tremor yang bisa 0,001 hingga 999,0.

parkinson_sim [time_between_tremors_in_seconds] #default adalah 0,1

Saya membuat kesalahan dengan mengkliknya sendiri daripada menjalankannya dari baris perintah dan dengan cepat menemukan betapa frustrasinya itu. Saya perlu beberapa kali mencoba membuka jendela terminal untuk membunuhnya.

Gagasan kedua Anda (sembunyikan kursor) setengah dari yang saya pikir mungkin bekerja dengan baik untuk Anda:

• Sembunyikan kursor mouse melalui CSS, seperti yang Anda sarankan. ( cursor:noneIIRC)
• Alih-alih GIF kursor yang goyah, gunakan beberapa gambar + posisi absolut CSS + JS untuk meniru penunjuk tetikus; yaitu, ikuti mouse di sekitar halaman dan tanam gambar kursor di mana kursor mouse akan berada secara asli.

Kemudian, Anda menambahkan beberapa tremor matematika ke kode kursor Anda, untuk "mengguncang" kursor. Terserah Anda untuk menentukan apa kurva yang tepat untuk mensimulasikan input tremor dengan benar.

Terakhir: untuk kontrol apa pun yang Anda pemrograman (tautan, dll.):

• tangkap kejadian klik, dorong mereka ke lokasi "tremor" saat ini berdasarkan pada keadaan kurva tremor Anda, dan bound-periksa elemen Anda untuk melihat apakah pengguna telah terguncang dari elemen yang dimaksudkan, atau mungkin ke dalam elemen yang tidak dimaksudkan .

Satu bonus utama dengan implementasi ini: 'kursor goyah' Anda akan ditampilkan pada perangkat sentuh, yang tidak akan memiliki kursor untuk memulai.

Edit:

Berdasarkan basis JSFiddle dari Michael Theriot (sangat bersih dan membantu!) Dari komentar, inilah getaran yang terus-menerus dengan sapuan yang terdistribusi normal di sekitar lokasi kursor saat ini: http://jsfiddle.net/benmosher/0x4mc64v/4/

( normalArray adalah hasil dari memanggil rnorm(100)di konsol R. Cara paling sederhana yang bisa saya pikirkan di JS untuk sampel integer acak yang terdistribusi normal.)

Hanya sebuah ide untuk membuat tremor "benar", Anda dapat merekam gerakan mouse pasien yang sebenarnya, ini membuatnya lebih otentik ketika Anda memberi tahu orang-orang dari mana data berasal.

Ada skrip untuk membiarkan kucing mengikuti kursor mouse Anda, Anda bisa menyesuaikan satu untuk membiarkan kursor kedua mengikuti (melompat-lompat) kursor Anda. Halaman ini menghitung posisi kursor kedua, sehingga ia juga dapat menentukan apakah acara klik berhasil atau tidak.

Jika Anda bisa, silakan membuatnya berbasis web, Anda akan menjangkau lebih banyak orang dengan cara ini daripada meminta mereka untuk menginstal program atau mengaktifkan flash atau apa pun yang ada.

Alih-alih mencoba untuk memindahkan pointer, Anda dapat memindahkan aplikasi (halaman web) sebagai gantinya. Saya menulis formulir html sederhana yang memiliki beberapa bidang entri di dalamnya. Saat Anda memindahkan mouse ke formulir, formulir bergerak.

Anda dapat melihat demo formulir bergerak di jsfiddle . Coba klik pada salah satu bidang input untuk melihat efeknya.

Saya menggunakan efek jquery shake untuk mencapai ini. Javascript untuk efek guncangan terlihat seperti ini, dan hanya menyebabkan formulir bergerak naik dan turun setiap kali mouse dipindahkan:

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

Meskipun bentuknya hanya bergerak ke atas dan ke bawah, saya pikir itu memiliki efek yang diinginkan. Anda dapat bermain dengan parameter (arah, waktu, jarak, serta "1000" yang tidak bernama di atas) untuk mengubah gerakan bentuk.

Mengapa tidak menggunakan solusi perangkat keras? Ada tikus tertentu di luar sana yang bisa Anda beri bobot, seperti Logitech G500. Alih-alih menambah bobot, masukkan motor berosilasi kecil yang membuat mouse sedikit goyang. Ini juga mensimulasikan gangguan yang sebenarnya lebih: bukan hanya kursor yang bergetar, tetapi seluruh tangan dan mouse. Dan itu juga berarti Anda dapat menampilkan perangkat lunak selain situs web.

Alih-alih mouse dengan slot berat, Anda juga bisa menempelkan sesuatu ke mouse, tapi itu lebih terlihat.

Ketika Anda berpikir untuk melakukannya dengan driver mouse kustom saya kira sebuah program kecil yang berjalan pada PC akan melakukan keduanya? Jika demikian, berikut adalah cuplikan kecil untuk C #, yang memindahkan kursor secara tak terhingga secara acak dengan kisaran plus minus 5px di sekitar posisi kursor saat ini. Setelah setiap perpindahan program menunggu 50 ms hingga 100 ms (tidak akurat!). Goyangan dapat dikonfigurasikan dengan mengadaptasi nilai untuk perpindahan dan jeda. Saya menjalankan ini di aplikasi konsol dan - tergantung pada nilainya - itu memberi saya cukup sulit menghentikan 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);
}

Ini adalah versi windows dari skrip xdotool saya yang menggunakan AutoIt . Ini adalah skrip AutoIt pertama saya, dan hanya butuh beberapa menit untuk menulis, jadi saya yakin ini bisa diperbaiki. Cukup simpan dengan ekstensi .au3 dan jalankan dengan 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

Kontrol

• Rumah: Mulai simulasi.
• jeda: Jeda simulasi.
• Esc: Keluar dari simulasi.

Atau gunakan versi kompilasi saya dari sini .

Anda tidak dapat mengharapkan siapa pun untuk dapat memegang tangan mereka dengan mantap, jadi satu hal yang dapat Anda pertimbangkan adalah,

1. Jelaskan kepada pengguna apa yang Anda lakukan dan,
2. Jadikan elemen yang dapat diklik pada halaman demo jauh lebih kecil dari biasanya.
3. Meningkatkan sensitivitas mouse pada sistem contoh menjadi maksimal.

Alasan saya adalah (peringatan, saya bukan ahli ux atau obat-obatan) dengan membuat elemen-elemen yang dapat diklik lebih kecil, Anda menciptakan masalah serupa bagi kebanyakan orang yang akan dihadapi seseorang yang menderita penyakit Parkinson dengan situs web sehari-hari.

Anda dapat menggunakan baju simulasi zaman tua, seperti yang dijelaskan dalam artikel ini ... Saya menduga bagian tremor tangan hanyalah motor bergetar yang diikatkan di pergelangan tangan, ditambah beberapa sarung tangan tebal yang membuat tangan umumnya canggung.

• Di Anda DIV , gunakan CSS-hide kursorcursor:none;
• Buat gambar kursor .png dan pindahkan ( left,top ) dengan jQ aktifmousemove
• Acak .png margin-leftdan margin-topgunakan a setTimeout (untuk membuat pemosisian ulang mulus menggunakan CSS3 transitionatau melakukannya dengan jQ .animate()).

Catatan: Skrip tidak dapat mengetahui apakah tangan masih di 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>

Bagian level rendah dari simulasi tremor sudah dijawab dengan baik sekarang. Saya akan menambahkan sesuatu yang berfokus pada jenis getaran untuk disimulasikan:

Sebagian besar jawaban menerapkan kursor mouse yang bergerak di jalur acak dengan beberapa lebar langkah maksimal tetap dalam arah X dan Y.

Ini harus bekerja cukup baik untuk kasus penggunaan membuatnya sulit untuk menekan area tertentu seperti tombol.

Untuk masalah yang lebih umum tentang simulasi masalah UI yang disebabkan oleh tremor dari penyakit Parkinson, setidaknya menarik untuk benar-benar mensimulasikan gerakan tangan tremor jenis ini.
Saya menduga jalan acak mungkin bukan perkiraan yang sangat baik .

Mungkin sulit untuk mendapatkan data jejak tangan sebenarnya dari gerakan tremor, tetapi tentu saja ada makalah tentang menganalisis tremor semacam ini:

Makalah Representasi Parametrik Gerakan Tangan dalam Penyakit Parkinson adalah tentang cara terbaik merencanakan jejak gerakan tangan 3D.
Makalah ini paywalled, tetapi pratinjau di kanan atas, berlabel "Lihat Di Dalam>" pada gambar buku, menunjukkan beberapa plot menarik dari berbagai representasi data jejak tangan .