웹 페이지에서 마우스로 진전 (예 : 파킨슨 병)을 시뮬레이트합니까?

인터넷의 접근성에 대한 인식을 높이는 재단을 위해 일하고 있습니다. 프레젠테이션을 위해 사람들에게 다른 장애 / 손상을 시뮬레이트하는 소규모 워크샵을 제공하려고합니다. 이 프리젠 테이션을 위해 특별히 제작 된 웹 사이트를 통해 이루어집니다.

입증 된 장애 중 하나는 떨림으로 인해 흔들리고 제어하기 어려운 손 움직임이 발생합니다. 이 장애로 인해 마우스가 링크 위에있는 동안 마우스 커서를 정확하게 이동하고 마우스 버튼을 누르는 것은 매우 어렵습니다. 일부 노인과 파킨슨 병과 같은 질병을 가진 사람들은 모두 진전으로 고통받을 수 있습니다.

이제 어떻게 든 마우스 커서를 예측할 수없는 방식으로 움직여서 사람들이 작은 버튼을 클릭하기가 매우 어렵습니다. JavaScript에서는 마우스 커서를 직접 이동할 수 없으므로 다른 방법으로 찾고 있습니다. 나는 다음 아이디어를 생각해 냈습니다.

• 마우스 흔들림을 시뮬레이션하는 마우스 드라이버 / 유틸리티 사용
• CSS를 통해 마우스 커서를 숨기고 흔들리는 마우스 커서의 GIF 애니메이션을 JavaScript와 함께 원래 커서 위치에 놓은 다음 대상 링크를 몇 초마다 클릭 할 수있게합니다. 이것은 적어도 누군가가 항상 잘못된 순간에 클릭하는 것처럼 느낌을 줄 것입니다.

첫 번째 아이디어는 꽤 멋지지만 Mac과 Windows 모두 이와 같은 도구를 찾을 수 없었습니다. 그리고 나는 그런 것을 스스로 프로그래밍하는 기술이 없습니다.

두 번째 아이디어는 약간 어색해 보이지만 원하는 효과를 얻을 수 있다고 생각합니다.

다른 아이디어가 있습니까?

Pointer Lock API를 사용하여 코드를 기반으로 할 수있는 무언가에 대한 간단한 데모를 만들었습니다 .

이 포인터 잠금 데모 저장소를 포크 하고 임의의 이동 요소를 추가하도록 수정했습니다.

여기 내 GitHub 페이지에 대한 링크가 있습니다 : https://aristocrates.github.io/pointer-lock-demo
여기 내 리포지토리에 대한 링크가 있습니다 : https://github.com/aristocrates/pointer-lock-demo

중요한 자바 스크립트 코드 app.js는 canvasLoop(e)메소드 에 포함되어 있습니다.

내가 원래 데모에서 변경 한 것은

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

임의의 움직임을 나타내는 두 줄을 추가했습니다.

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

여전히 개선 할 수있는 것이 많이 있지만, 이것이 시작하는 데 도움이되기를 바랍니다.

자바 스크립트 이외의 방법

사실, 나는 웹과 관련이 있고 OS와 무관 한 좋은 기회이기 때문에 자바 스크립트를 기반으로하는 솔루션을 좋아합니다. 그러나 자바 스크립트 솔루션은 가능한 모든 브라우저에 맞게 조정하기가 어려우므로 모든 브라우저에서 문제를 해결하는 방법에 대해 생각했습니다.

앞에서 언급했듯이 OS 수준에서 동작을 에뮬레이션하는 다른 방법이 있습니다. 이것은 또 다른 이점이 있습니다. 브라우저의 경우 사람처럼 100 % 보인다는 것을 확신 할 수 있습니다 (신호를 보내는 드라이버이기 때문에). 따라서 모든 브라우저에서 (또는 자바 스크립트가 비활성화 된 경우에도) 드라이버 / 장치 기반 솔루션을 사용할 수 있습니다.

리눅스

불행하게도, 드라이버 / 장치를 관련 시키면 즉시 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빈도"입니다 "

또 다른 것은 시스템에 맞게 프로그램을 조정하는 것입니다. 이 프로그램은 "더미"이며 마우스 자체를 감지 할 수 없으므로 "/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

다른 OS

논리는 동일하게 유지됩니다.

• 마우스 장치에 액세스하는 방법을 찾으십시오
• 마우스 이동 이벤트 쓰기
• 이벤트에 무작위 적용

그게 다야. 예를 들어, Mac OS에는 Linux와 달리 마우스를 사용하는 고유 한 방법이 있습니다 (Mac은 그렇지 않습니다 procfs) . 여기에 잘 설명되어 있습니다 .

결론으로

특정 상황 (예 : 크로스 브라우저 또는 크로스 OS)이이 경우 모든 것을 결정할 수 있기 때문에 더 나은 것 (자바 스크립트 또는 장치 지향 솔루션)은 사용자에게 달려 있습니다. 따라서 OS 수준에서 구현하는 방법에 대한 특정 실례와 함께 지침을 제공했습니다. 여기서 이점은 솔루션이 크로스 브라우저이지만 비용에 따라 OS 바인딩 프로그램이 있다는 것입니다.

나는 강아지 리눅스 포럼 에서 한 번의 농담으로 이것을하고 다음과 같은 의견을 얻었습니다.

Parkinson 's를 가진 사람들은 그것이 재미 있다고 생각하지 않을 것입니다!

운 좋게도 여기서는 단순히 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] #default는 0.1입니다

커맨드 라인에서 실행하는 대신 직접 클릭하는 실수를 저지르고 얼마나 실망 스럽습니까? 터미널 창을 열어서 죽이려고 여러 번 시도했습니다.

두 번째 아이디어 (커서 숨기기)는 내가 당신에게 잘 맞는 생각의 절반입니다.

• 제안한대로 CSS를 통해 마우스 커서를 숨 깁니다. ( cursor:noneIIRC)
• 흔들리는 커서 GIF 대신 이미지 + CSS 절대 위치 + JS를 사용하여 마우스 포인터를 에뮬레이트합니다. 즉, 페이지 주변의 마우스를 따라 마우스 커서가있는 위치에 커서 이미지를 심습니다.

그런 다음 커서 코드에 진전 수학을 추가하여 커서를 "흔들"수 있습니다. 진전 입력을 올바르게 시뮬레이션하기 위해 올바른 곡선이 무엇인지 결정하는 것은 귀하의 책임입니다.

마지막으로 프로그래밍중인 컨트롤 (링크 등)에 대해 :

• 클릭 이벤트를 캡처하고 떨림 곡선의 상태에 따라 현재 "진동"위치로 이동시키고 요소를 경계 점검하여 사용자가 의도 한 요소에서 벗어나거나 의도하지 않은 요소로 흔들 렸는지 확인합니다. .

이 구현의 한 가지 주요 보너스 : '흔들리는 커서'는 터치 장치에 표시되며 커서는 시작하지 않습니다.

편집하다:

의견에서 Michael Theriot의 (매우 깨끗하고 도움이되는) JSFiddle을 기반으로 현재 커서 위치 주위에서 정상적으로 분산 된 스윕으로 끊임없이 흔들리는 것입니다 : http://jsfiddle.net/benmosher/0x4mc64v/4/

( normal배열은 rnorm(100)R 콘솔에서 호출 한 결과입니다 . JS에서 정상적으로 분산 된 임의의 정수를 샘플링하는 가장 간단한 방법입니다.)

진전을 "올바로"얻는 아이디어는 실제 환자의 마우스 움직임을 기록 할 수 있기 때문에 사람들이 데이터의 출처를 알릴 때 더욱 정통합니다.

고양이가 마우스 커서를 따라 가도록하는 스크립트가 있는데, 두 번째 커서가 커서를 따라 가도록 (점프하도록) 조정할 수 있습니다. 페이지가 두 번째 커서의 위치를 ​​계산하므로 클릭 이벤트의 성공 여부를 결정할 수도 있습니다.

가능하다면 웹 기반으로 만드십시오. 프로그램을 설치하거나 플래시를 활성화하거나 다른 것을 요청하는 것보다 훨씬 많은 사람들에게이 방법을 사용할 수 있습니다.

포인터를 이동하는 대신 응용 프로그램 (웹 페이지)을 이동할 수 있습니다. 입력 필드가있는 간단한 html 양식을 작성했습니다. 폼 위로 마우스를 이동하면 폼이 이동합니다.

jsfiddle에서 움직이는 형태의 데모를 볼 수 있습니다 . 입력 필드 중 하나를 클릭하여 효과를보십시오.

이것을 달성하기 위해 jquery shake 효과를 사용했습니다 . 흔들림 효과에 대한 자바 스크립트는 다음과 같으며 마우스를 움직일 때마다 폼이 위아래로 움직입니다.

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

양식이 위아래로만 이동하지만 원하는 효과가 있다고 생각합니다. 매개 변수 (방향, 시간, 거리 및 이름이없는 "1000")를 사용하여 양식 이동을 조정할 수 있습니다.

왜 하드웨어 솔루션을 사용하지 않습니까? Logitech G500과 같이 무게를 넣을 수있는 특정 마우스가 있습니다. 무게를 넣는 대신 마우스를 약간 흔들리는 작은 진동 모터를 넣으십시오. 이것은 또한 실제 장애를 더 시뮬레이트했습니다. 흔들리는 커서뿐만 아니라 손과 마우스 전체입니다. 또한 웹 사이트 이외의 다른 소프트웨어를 표시 할 수 있다는 의미입니다.

웨이트 슬롯이있는 마우스 대신 마우스로 무언가를 테이프로 붙이는 것이 더 눈에 able니다.

사용자 정의 마우스 드라이버를 사용하여 생각할 때 PC에서 실행되는 작은 프로그램 중 하나가 작동한다고 생각합니까? 이 경우 C #에 대한 작은 스 니펫이 있습니다.이 코드는 현재 커서 위치 주변에서 -5 픽셀의 범위에서 무작위로 커서를 임의로 이동합니다. 각 변위 후 프로그램은 50ms ~ 100ms를 기다립니다 (정확하지 않습니다!). 변위 및 정지 값을 조정하여 흔들림을 구성 할 수 있습니다. 나는 이것을 콘솔 응용 프로그램에서 실행했으며 값에 따라 프로그램을 중지하는 데 어려움을 겪었습니다.

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. 하고있는 일을 사용자에게 설명하고
2. 데모 페이지에서 클릭 가능한 요소를 평소보다 훨씬 작게 만드십시오.
3. 예제 시스템에서 마우스 감도를 최대로 높입니다.

내 추론은 클릭 가능한 요소를 작게 만들어서 (캐비티, UX 또는 의학 전문가가 아님) 파킨슨 병에 걸린 사람이 일상적인 웹 사이트에 직면하는 대부분의 사람들에게 비슷한 문제를 만듭니다.

이 기사 에서 설명하는 것과 같은 노후 시뮬레이션 슈트를 사용할 수 있습니다. 손떨림 부분은 손목 주위에 묶인 진동 모터와 손이 일반적으로 서투른듯한 두꺼운 장갑이라고 생각합니다.

• 당신의에서 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>"라고 표시된 오른쪽 상단의 미리보기에는 다양한 핸드 트레이스 데이터 표현에 대한 흥미로운 플롯이 표시됩니다 .