在网页上用鼠标模拟震颤(例如帕金森氏病)?

2020/10/16 12:01 · javascript ·  · 0评论

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

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

现在,我想以某种无法预测的方式移动鼠标光标,这样人们很难单击一个小按钮。由于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上将其移动(lefttopmousemove
  • 随机化.pngmargin-leftmargin-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>”,显示了一些有趣的手迹
数据表示形式

本文地址:http://javascript.askforanswer.com/zaiwangyeshangyongshubiaomonizhenchanlirupajinsenshibing.html
文章标签: ,   ,   ,   ,  
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!