진동 시뮬레이션(예: 에서)웹페이지에서 마우스로 파킨슨병)을 앓고 있습니까?

진동 시뮬레이션(예: 에서)웹페이지에서 마우스로 파킨슨병)을 앓고 있습니까?

저는 인터넷 접근성에 대한 인식을 높이는 재단에서 일하고 있습니다.프레젠테이션을 위해 사람들에게 다양한 장애/부상을 시뮬레이션하는 소규모 워크샵을 제공하고 싶습니다.이 작업은 이 프레젠테이션용으로 특별히 작성된 웹 사이트를 통해 수행됩니다.

입증된 장애 중 하나는 떨림인데, 이는 손의 떨림이 있고 통제하기 어려운 움직임을 경험하는 것을 의미합니다.이 장애는 마우스 커서를 정확하게 움직이기가 어려우며 마우스를 링크 위에 올려놓은 상태에서 마우스 버튼을 누르는 것이 매우 어렵습니다.일부 노인과 파킨슨병 같은 질병을 앓고 있는 사람 모두 떨림을 겪을 수 있습니다.

이제 마우스 커서를 예측할 수 없는 방법으로 움직여 작은 버튼을 클릭하는 것이 매우 힘들도록 하겠습니다.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를 기반으로 하는 솔루션을 좋아합니다.그것들은 웹 관련성이 높고 OS에 의존하지 않을 가능성이 높기 때문입니다.다만, 이 경우 Javascript 솔루션은 모든 브라우저에 대해 조정하기 어렵기 때문에, 어떻게 하면 모든 브라우저에 대해 당신의 문제를 해결할 수 있을까 생각하고 있었습니다(가능할지 전혀 모르겠습니다).

말씀하신 것처럼 OS 레벨에서의 동작을 에뮬레이트하는 다른 방법이 있습니다.이것에도 또 다른 이점이 있습니다.브라우저에서는, 100% 인간처럼 보입니다(신호를 송신하는 것은 드라이버이기 때문입니다).따라서 어떤 브라우저에서도 드라이버/디바이스 기반 솔루션을 사용할 수 있습니다(또는 Javascript가 비활성화되어 있는 경우에도 마찬가지).

리눅스

유감스럽게도 드라이버/디바이스에 관여하면 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;
}

이 문제에 대한 내 전체 코드는 여기에 있습니다.프로그램은 "tremor"의 진폭과 주파수(따라서 "tremor" 사이의 마이크로초 단위 시간)를 요구합니다.상황을 에뮬레이트하기 위해 마우스가 다음 시간 동안 랜덤하게 이동하도록 강제합니다.0..X 방향의 및 random(대기)0..Y 후 "", "인쇄자", "인쇄자",X이 '과 '반복'인 '반복'은 '반복'입니다.Y의 입니다.

또, 사용의 시스템에 맞추어 프로그램을 조정하는 것도 가능합니다.이기 때문에 마우스 수 없기 에 "dummy"라고 합니다."/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 소스 C 소스 코드라는 의 실행됩니다.그러면 실행 파일이 생성됩니다.m를 참조해 주세요.의 경우 에 직접, 「」를 사용할 수 .sudo:

user@host:/path$ sudo ./m

기타 OS

논리는 그대로 유지됩니다.

• 마우스 장치에 액세스하는 방법 찾기
• 마우스 이동 이벤트 쓰기
• 이벤트에 랜덤화 적용

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

결론적으로

자바스크립트나 디바이스 지향 솔루션 등 더 나은 것은 사용자에게 달려 있습니다.이 경우 크로스 브라우저나 크로스 OS 등의 특정 조건이 모든 것을 결정할 수 있기 때문입니다.그 때문에, OS레벨로 실장하는 방법에 관한 가이드 라인과 몇개의 작업 예에 대해 설명했습니다.이 솔루션의 장점은 크로스 브라우저이지만 비용 면에서 OS 바인딩 프로그램을 사용할 수 있다는 것입니다.

Puppy Linux Forum에서 장난삼아 한 번 해본 적이 있는데 다음과 같은 코멘트를 받았습니다.

파킨슨병을 앓고 있는 사람들은 그것이 재미있다고 생각하지 않을 것이다!!!

여기서 치료제는 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_seconds_in_seconds]# 기본값은 0.1 입니다.

명령줄에서 실행하지 않고 직접 클릭하는 실수를 해서 얼마나 답답한지 금방 알게 되었습니다.그걸 죽이기 위해 터미널 창문을 열려고 몇 번이나 시도했어요.

두 번째 아이디어(커서를 숨김)는 당신에게 도움이 될 것 같은 아이디어의 절반입니다.

• CSS는 CSS를 사용합니다cursor:noneIIRC)
• 흔들리는 커서 GIF 대신 일부 이미지 + CSS 절대 위치 설정 + JS를 사용하여 마우스 포인터를 에뮬레이트합니다. 즉, 마우스를 페이지 주위로 따라 마우스 커서가 원래 위치하는 위치에 커서 이미지를 심습니다.

그런 다음 커서 코드에 진동 산수를 추가하여 커서를 "흔들" 수 있습니다.진동 입력을 적절히 시뮬레이션하기 위한 올바른 곡선은 사용자에게 달려 있습니다.

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

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

이 구현의 주요 장점 중 하나는 '흔들리는 커서'가 터치 장치에 표시된다는 것입니다. 터치 장치에는 커서가 없습니다.

---

편집:

Michael Theriot(매우 깨끗하고 도움이 되는!)의 코멘트 베이스 JSFiddle에 근거해, 현재 커서의 위치를 정규 분포로 스윕하면, 항상 떨리는 코멘트가 있습니다.

(the)normal 는, 「어레이」를 입니다.rnorm(100)아아아아아아아아아아아아아아아아아아아아아아아아아아.JS에서 생각할 수 있는 가장 간단한 방법은 정규 분포 랜덤 정수를 샘플링하는 것입니다.)

진동을 제대로 하기 위한 아이디어로 실제 환자의 마우스 움직임을 기록할 수 있습니다. 이렇게 하면 데이터가 어디서 왔는지 사람들에게 알려줄 때 더 진위 있게 됩니다.

고양이가 마우스 커서를 따라갈 수 있도록 하는 스크립트가 있습니다. 두 번째 커서가 커서를 따라(점프)하도록 스크립트를 조정할 수 있습니다.이 페이지는 두 번째 커서의 위치를 계산하고 있기 때문에 클릭 이벤트가 성공했는지 여부도 판단할 수 있습니다.

만약 가능하다면 웹기반으로 만들어 주세요.이렇게 하면 프로그램 설치나 플래시 활성화 등을 요구하는 것보다 훨씬 더 많은 사람에게 연락할 수 있습니다.

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

jsfiddle에서 이동 폼 데모를 볼 수 있습니다.입력 필드 중 하나를 클릭하여 효과를 확인하십시오.

나는 이것을 이루기 위해 jquery shake effect를 사용했다.흔들림 효과를 위한 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과 같이 무게를 달 수 있는 마우스가 있습니다.추를 넣는 대신 마우스를 약간 흔들리게 하는 작은 진동 모터를 넣습니다.이것은 또한 실제 장애를 더 시뮬레이션 했습니다: 단지 흔들리는 커서가 아니라 손과 마우스 전체가 흔들리는 것입니다.또, Web 사이트 이외의 소프트웨어를 표시할 수도 있습니다.

무게 슬롯이 있는 마우스 대신 마우스에 테이프만 붙일 수도 있지만 더 눈에 띕니다.

커스텀 마우스 드라이버를 사용하고 싶다고 생각하고 있었기 때문에, PC상에서 실행되고 있는 작은 프로그램도, 어느 쪽인가?이 경우 C#의 작은 스니펫을 나타냅니다.C#은 현재 커서 위치를 중심으로 플러스 마이너스 5px의 범위로 커서를 무한히 랜덤으로 이동합니다.각 변위 후 프로그램은 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(스크립트 실행 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

컨트롤

• Home : 시뮬레이션을 시작합니다.
• pause : 시뮬레이션을 일시 정지합니다.
• Esc : 시뮬레이션을 종료합니다.

또는 여기서 컴파일한 버전을 사용합니다.

누구도 손을 흔들지 않을 거라고 기대할 순 없어 그러니 한 가지 생각해 볼 수 있는 건

1. 사용자에게 작업 내용을 설명합니다.
2. 데모 페이지의 클릭 가능한 요소를 통상보다 훨씬 작게 합니다.
3. 예제 시스템에서 마우스 감도를 최대값으로 증가시킵니다.

내 추론은 (동창, 나는 ux나 의학의 전문가가 아니다) 클릭 가능한 요소를 작게 함으로써, 당신은 파킨슨병을 앓고 있는 사람들이 매일 웹사이트를 통해 직면하는 것과 같은 문제를 대부분의 사람들에게 야기한다는 것이다.

이 기사에서 설명한 것과 같은 노후 시뮬레이션 슈트를 사용할 수 있습니다.핸드트레머 부분은 손목에 감긴 진동 모터와 손을 거칠게 하기 위한 두꺼운 장갑일 뿐입니다.

• 고객님의 고객명DIV, CSS 를 사용하여 커서를 숨깁니다.cursor:none;
• .png 커서 이미지를 생성하여 이동합니다(left,topjQ가 켜져 있는 경우)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 문제를 시뮬레이션하는 일반적인 문제에 대해서는 적어도 이러한 떨림의 손동작을 실제로 시뮬레이션하는 것이 흥미로울 것입니다.
무작위로 걷는 건 별로 좋은 근사치가 아닌 것 같아요

물론 떨림 움직임의 실제 핸드 트레이스 데이터를 입수하는 것은 어려울 수 있지만, 이러한 떨림을 분석하는 것에 관한 논문은 분명히 있습니다.

Parametric Representation of Hand Movement in Parkinson's Disease는 3D 손 움직임 흔적을 가장 잘 그리는 방법에 대한 논문입니다.
종이는 유료이지만, 오른쪽 상단의 "내부 보기 >"라는 라벨이 붙은 미리보기에는 핸드 트레이스 데이터의 다양한 표현에 대한 흥미로운 플롯이 표시됩니다.

언급URL : https://stackoverflow.com/questions/25258921/simulating-tremor-from-e-g-parkinsons-disease-with-the-mouse-on-a-webpage