Имитировать тремор (например, от болезни Паркинсона) с помощью мыши на веб-странице?

Я работаю на фонд, который повышает осведомленность о доступности в Интернете. Для презентации мы хотим предложить небольшой семинар, который имитирует различные виды инвалидности / нарушений для людей. Это делается через веб-сайт, созданный специально для этой презентации.

Одним из выявленных нарушений является тремор, который означает дрожащие, трудно контролируемые движения рук. При таком ухудшении очень трудно точно перемещать курсор мыши и нажимать кнопку мыши, когда мышь находится над ссылкой. Как некоторые пожилые люди, так и люди с заболеваниями, например, болезнь Паркинсона, могут страдать от тремора.

Теперь я хотел бы как-то непредсказуемо переместить курсор мыши, чтобы людям было очень сложно нажать на маленькую кнопку. Поскольку JavaScript не позволяет перемещать курсор мыши напрямую, я ищу другие способы достижения этого. Я придумал следующие идеи:

• Использование драйвера / утилиты мыши, которая имитирует дрожание мыши.
• Скройте курсор мыши с помощью CSS, поместите GIF-анимацию дрожащего курсора мыши на место исходного курсора (с JavaScript), а затем сделайте целевую ссылку кликабельной только каждые несколько секунд в течение секунды или около того. Это, по крайней мере, дало бы ощущение, будто каждый раз щелкает не в тот момент.

Хотя первая идея была бы довольно крутой, я не смог найти такой инструмент, как для Mac, так и для Windows. И у меня нет никаких навыков в программировании подобных вещей.

Вторая идея кажется немного неуклюжей, но, думаю, она дала бы желаемый эффект.

У кого-нибудь есть другая идея?

Я сделал небольшую демонстрацию чего-то, что, как мы надеемся, вы сможете использовать для своего кода, используя API-интерфейс Pointer Lock .

Я раздвоил этот репозиторий указателя-блокировки-демо и изменил его, добавив элемент случайного движения.

Вот ссылка на мою страницу 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;

Я добавил две строки для представления случайного движения:

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

Есть еще много вещей, которые вы могли бы улучшить, но, надеюсь, это поможет вам начать.

Не-JavaScript-способ

На самом деле, мне нравятся решения, которые могут быть основаны на javascript, поскольку они, скорее всего, связаны с сетью, и хорошие шансы - независимость от ОС. Однако я думал о том, как решить вашу проблему для всех браузеров, поскольку решения javascript в этом случае будет трудно настроить для всех возможных браузеров (я не уверен, возможно ли это вообще).

Итак, как вы упомянули, есть другой способ - т.е. эмулировать поведение на уровне ОС. Это также имеет еще одно преимущество - вы можете быть уверены, что для браузера он выглядит на 100% так, как это было с человеком (потому что, ну, это драйвер, который посылает сигнал). Таким образом, вы можете использовать решения на основе драйверов / устройств с любыми браузерами (или даже в ситуации, когда JavaScript отключен).

Linux

К сожалению, привлечение драйвера / устройства немедленно вызывает зависимость ОС. Поэтому для каждой ОС вам понадобится собственное решение. В этом посте я сосредоточен на 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частота «тремора» "

Другая вещь может быть, чтобы адаптировать программу для вашей системы. Программа "пустышка" и не может самостоятельно определять мышь, поэтому "/dev/input/event4"она жестко запрограммирована. Чтобы понять, что может быть идентификатором для вашей системы, вы можете попробовать:

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

И поэтому возможности "event3"и "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

Другие ОС

Логика останется такой же:

• Найдите способ получить доступ к вашему устройству мыши
• Напишите событие перемещения мыши
• Применить рандомизацию к вашему событию

Вот и все. Например, у Mac OS есть свой собственный способ работы с мышью (не так, как у Linux, а у Mac нет procfs), это хорошо описано здесь .

В заключение

Что лучше - JavaScript или ориентированные на устройства решения - решать только вам, потому что определенное условие (например, кросс-браузер или кросс-ОС) может решить все в этом случае. Поэтому я предоставил рекомендации вместе с определенным рабочим примером того, как реализовать это на уровне ОС. Преимущество здесь в том, что решение является кросс-браузерным, но в качестве стоимости у нас есть ОС-связанная программа.

Однажды я сделал это в шутку на форуме Puppy Linux и получил комментарий:

Люди с болезнью Паркинсона не будут думать, что это смешно !!!

К счастью, это просто 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 и запустите с необязательным аргументом для промежутка времени между колебаниями, который может быть от 0,001 до 999,0.

parkinson_sim [time_between_tremors_in_seconds] # по умолчанию 0,1

Я сделал ошибку, щелкнув по нему самому вместо запуска из командной строки, и быстро обнаружил, насколько это должно быть неприятно. Мне потребовалось несколько попыток открыть окно терминала, чтобы убить его.

Ваша вторая идея (скрыть курсор) на полпути к той, которая, я думаю, может хорошо сработать для вас:

• Скройте курсор мыши через CSS, как вы предлагаете. ( cursor:noneIIRC)
• Вместо неуклюжего GIF-курсора используйте некоторое изображение + абсолютное позиционирование CSS + JS для эмуляции указателя мыши; то есть, следуйте за мышью вокруг страницы и установите изображение курсора там, где изначально находился курсор мыши.

Затем вы добавляете некоторую математику тремора в код вашего курсора, чтобы «встряхнуть» курсор. Вам решать, какие правильные кривые должны правильно имитировать тремор.

Наконец: для любых элементов управления, которые вы программируете (ссылки и т. Д.):

• захватывать события щелчка, подталкивать их к текущему местоположению «тремора», основываясь на состоянии ваших кривых тремора, и проверять границы ваших элементов, чтобы убедиться, что пользователь вытряхнул из-за элемента, или, возможно, в элемент, который не был предназначен ,

Один важный бонус этой реализации: ваш «шаткий курсор» будет отображаться на сенсорных устройствах, у которых не было бы курсора для начала.

Редактировать:

Основанный на комментариях Майкла Териота (очень чистый и полезный!) Из JSFiddle, вот тот, который постоянно дрожит с нормально распределенной разверткой вокруг текущего местоположения курсора: http://jsfiddle.net/benmosher/0x4mc64v/4/

( normalМассив является результатом вызова rnorm(100)в моей консоли R. Самый простой способ, которым я мог бы придумать в JS для выборки нормально распределенного случайного целого числа.)

Просто идея для «правильного» дрожания, вы можете записать движение мыши реального пациента, это делает его более достоверным, когда вы сообщаете людям, откуда поступают данные.

Есть сценарии, позволяющие кошке следовать за курсором мыши, вы можете настроить один так, чтобы второй курсор следовал за вашим курсором. Страница вычисляет позицию второго курсора, поэтому она также может определить, было ли событие нажатия успешным или нет.

Если вы можете, сделайте это через Интернет, таким образом вы достигнете гораздо большего числа людей, чем попросите их установить программу или активировать flash или что-то еще.

Вместо того, чтобы пытаться переместить указатель, вы можете вместо этого переместить приложение (веб-страницу). Я написал простую 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. Вместо того, чтобы набирать вес, вставьте небольшой колебательный мотор, который заставляет мышь слегка дрожать. Это также больше имитировало фактическое расстройство: трясет не только курсор, но и вся рука и мышь. И это также означает, что вы можете показать другое программное обеспечение, чем веб-сайты.

Вместо мыши со слотом для веса, вы можете просто прикрепить что-нибудь к мыши, но это более заметно.

Когда вы думали о том, чтобы сделать это с помощью специального драйвера мыши, я полагаю, подойдет и небольшая программа, запущенная на ПК? Если это так, то вот небольшой фрагмент кода для 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);
}

Вот Windows-версия моего скрипта xdotool, который использует AutoIt . Это был мой первый скрипт 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

управления

• Начало: Начать симуляцию.
• пауза: пауза симуляции.
• Esc: выход из симуляции.

Или используйте мою скомпилированную версию отсюда .

Вы не можете ожидать, что кто-то сможет держать свои руки совершенно устойчиво, поэтому одну вещь, которую вы можете рассмотреть, это,

1. Объясните пользователям, что вы делаете, и,
2. Сделайте кликабельные элементы на демонстрационной странице намного меньше, чем обычно.
3. Увеличение чувствительности мыши на примере системы до максимума.

Мое рассуждение таково (предостережение, я не эксперт в области UX или медицины), уменьшая количество элементов, способных щелкать мышью, вы создаете аналогичную проблему для большинства людей, с которыми человек, страдающий болезнью Паркинсона, сталкивается с обычным веб-сайтом.

Вы можете использовать костюм для пожилых людей, например, описанный в этой статье ... Я подозреваю, что часть дрожания рук - это просто вибрирующий мотор, обвязанный вокруг запястья, плюс несколько толстых перчаток, которые делают руки в целом неуклюжими.

• В вашем DIVCSS-спрятать курсор используяcursor:none;
• Создайте изображение курсора .png и переместите его ( left, top), включив jQmousemove
• Произведите рандомизацию .png margin-leftи margin-topиспользование a setTimeout (чтобы сделать transitionперестановку плавной, используйте CSS3 или сделайте это с 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.

Это должно сработать достаточно хорошо для случая использования, когда вам будет сложно нажать на определенную область, например на кнопку.

Для более общей проблемы симуляции проблем пользовательского интерфейса, вызванных тремором от болезни Паркинсона, было бы по крайней мере интересно фактически смоделировать движения рук этого вида тремора.
Я подозреваю, что случайное блуждание может быть не очень хорошим приближением .

Конечно, может быть трудно получить реальные данные трассировки движения тремора, но, несомненно, есть статьи об анализе этого вида тремора:

В статье « Параметрическое представление движения рук при болезни Паркинсона» рассказывается о том, как лучше всего построить трехмерные следы движения рук.
Бумага расплачена, но предварительный просмотр в правом верхнем углу, помеченный «Look Inside>» на изображении книги, показывает некоторые интересные графики различных представлений данных трассировки руки .