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

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

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

이제 어떻게 든 마우스 커서를 예측할 수없는 방식으로 움직여서 사람들이 작은 버튼을 클릭하기가 매우 어렵습니다. 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.jscanvasLoop(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니다.