在网页上用鼠标模拟震颤（例如帕金森氏病）？

我正在为一个提高人们对互联网可访问性意识的基金会工作。对于演示，我们希望提供一个小型研讨会，模拟不同的残疾人士/残障人士。这是通过专门为此演示文稿创建的网站完成的。

表现出的一种障碍是震颤，这意味着手部动作难以控制。由于存在这种缺陷，很难精确地移动鼠标光标并在鼠标悬停在链接上时按鼠标按钮。一些老年人和帕金森氏症等疾病患者都可能患有震颤。

现在，我想以某种无法预测的方式移动鼠标光标，这样人们很难点击一个小按钮。由于JavaScript不允许直接移动鼠标光标，因此我正在寻找实现此目的的其他方法。我提出了以下想法：

• 使用模拟鼠标晃动的鼠标驱动程序/实用程序。
• 通过CSS隐藏鼠标光标，将摇动的鼠标光标的GIF动画放置在原始光标的位置（使用JavaScript），然后使目标链接每隔几秒钟单击一次。这至少会给人一种好像总是在错误的时刻点击的感觉。

尽管第一个想法很酷，但无论是Mac还是Windows，我都找不到这样的工具。而且我自己没有编程任何这类技能。

第二个想法似乎有些笨拙，但我认为它将达到预期的效果。

有人有其他想法吗？

我使用Pointer Lock API对您希望可以将代码作为基础的内容进行了快速演示。

我分叉了这个指针锁定演示存储库，并对其进行了修改以添加一个随机移动元素。

这是我的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的解决方案，因为它们更可能与Web相关，并且很可能与OS无关。但是，我当时正在考虑-如何解决所有浏览器的问题，因为在这种情况下，很难针对所有可能的浏览器调整javascript解决方案（我不确定是否可能）。

因此，正如您所提到的，还有另一种方法-即在OS级别上模拟行为。这也有另一个优势-您可以确定，对于浏览器，它看起来像是人类的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.cC源代码文件的名称在哪里，那么您将获得可执行文件，m该文件在目录中被调用。您很可能需要权限才能直接写入鼠标设备，因此您可以使用sudo：

user@host:/path$ sudo ./m

其他作业系统

逻辑将保持不变：

• 找到一种访问鼠标设备的方法
• 写动鼠标事件
• 将随机化应用于您的活动

而已。例如，Mac OS有自己的鼠标处理方式（与Linux不同，Mac也不procfs一样），在此处对此进行了详细说明。

作为结论

更好的方法（JavaScript或面向设备的解决方案）由您决定，因为在这种情况下，某些条件（例如跨浏览器或跨OS）可能会决定一切。因此，我提供了指导方针以及如何在OS级别上实现该目标的某些工作示例。这样做的好处是解决方案是跨浏览器的，但是作为代价，我们有OS绑定程序。

我曾经在Puppy Linux论坛上开过一个玩笑，得到的评论是：

患有帕金森氏症的人不会觉得这很有趣！

幸运的是，这里的治愈方法只是cntrl-C。

这是需要xdotool的shell脚本

#!/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）
• 可以使用一些图像+ CSS绝对定位+ JS来模拟鼠标指针，而不是摇晃的GIF。即，跟随鼠标在页面周围，将光标图像植入鼠标光标本应放置的位置。

然后，将一些震颤数学添加到光标代码中，以“摇动”光标。由您决定正确的曲线是什么，以正确模拟震颤输入。

最后：对于您正在编程的任何控件（链接等）：

• 捕获点击事件，根据震颤曲线的状态将其微移到当前的“震颤”位置，然后对元素进行边界检查，以查看用户是否已经摆脱了预期的元素，或者是否陷入了预期之外的元素。

该实现的一个主要好处是：“摇晃的光标”将显示在没有光标的触摸设备上。

编辑：

基于Michael Theriot（非常干净而且很有帮助！）基于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。不用增加重量，而要使用小型振动马达，这会使鼠标稍微摇动。这也更多地模拟了实际的疾病：不仅是光标在晃动，而且是整个手和鼠标。这也意味着您可以显示网站以外的其他软件。

除了使用带配重槽的鼠标，您还可以将一些东西粘在鼠标上，但这更引人注意。

当您考虑使用自定义鼠标驱动程序进行操作时，我想在PC上运行一个小程序就能做到吗？如果是这种情况，这是C＃的一小段代码，它可无限随机地将光标移动到当前光标位置周围的正负5px范围内。每次位移后，程序将等待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（运行脚本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光标图像，并在jQ上将其移动（left，top）mousemove
• 随机化.png margin-left并margin-top使用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>”，显示了一些有趣的手迹数据表示形式。