Implement accurate running detection in Phone.svelte #1

Activity

1. Pjaerr

   self-assigned this

   on Mar 25, 2020
2. Pjaerr commented on Mar 27, 2020

   

   Pjaerr

   on Mar 27, 2020

   OwnerAuthor

   More actions

   Got this to work way better with guidance from: https://github.com/wxforever/stepCounter/blob/master/countstep.js

   Will need tweaking so the threshold is lower cause it is better to assume user is running than to make them have to work incredibly hard for the video not the pause.
3. Pjaerr commented on Mar 28, 2020

   

   Pjaerr

   on Mar 28, 2020

   OwnerAuthor

   More actions

   This is working pretty well for me but could still be improved so I am leaving this open for some potentially smarter people.

   Current Implementation:

   let yGravity = 0;
     let threshold = 0.3;
     let deviceWasLastMovingUpwards = false;
     let deviceWasMoving = true;
     let isDeviceMoving = false;
   
     function handleDeviceMotion(e) {
       yGravity = e.accelerationIncludingGravity.y;
     }
   
     function handleDeviceOrientation(e) {
       if (yGravity - 10 * Math.sin((e.beta * Math.PI) / 180) > threshold) {
         //We are moving the device up
   
         deviceWasLastMovingUpwards = true;
       } else if (
         yGravity - 10 * Math.sin((e.beta * Math.PI) / 180) <
         -threshold
       ) {
         //We are moving the device down
   
         if (deviceWasLastMovingUpwards) {
           //We have taken a "step"
   
           isDeviceMoving = true;
         }
   
         deviceWasLastMovingUpwards = false;
       } else {
         isDeviceMoving = false;
       }
   
       if (isDeviceMoving && !deviceWasMoving) {
         //Send "playvideo" event
         if (socket.readyState === WebSocket.OPEN) {
           socket.send(
             JSON.stringify({
               partnerID: desktopWebSocketID,
               messageType: "playvideo"
             })
           );
         }
       } else if (!isDeviceMoving && deviceWasMoving) {
         //Send "pausevideo" event
         if (socket.readyState === WebSocket.OPEN) {
           socket.send(
             JSON.stringify({
               partnerID: desktopWebSocketID,
               messageType: "pausevideo"
             })
           );
         }
       }
   
       deviceWasMoving = isDeviceMoving;
     }

   Relevant event listeners:

   window.addEventListener("devicemotion", handleDeviceMotion);
   window.addEventListener("deviceorientation", handleDeviceOrientation);

   This all happens in Phone.svelte
4. Pjaerr

   unassigned

   Pjaerr

   on Mar 28, 2020
5. Pjaerr

   added

   help wantedExtra attention is neededExtra attention is needed

   enhancementNew feature or requestNew feature or request

   on Mar 28, 2020
6. Pjaerr commented on Mar 28, 2020

   

   Pjaerr

   on Mar 28, 2020

   OwnerAuthor

   More actions

   Okay, current method works but sometimes will continue running when you set the phone down, as if the last state it detected was running.

   Could have a timeout that checks if an event has been triggered after a certain amount of time and then if not, pause the video. Probably better to implement an actual accurate system instead. 🤷‍♂
7. Pjaerr commented on Apr 1, 2020

   

   Pjaerr

   on Apr 1, 2020

   OwnerAuthor

   More actions

   I re-implemented it and it works much better, almost perfect on my device[s] but testing on an Iphone 7 using Firefox results in stuttering. Unsure whether this is an issue with that specific device/usecase. Will need to do more testing.
8. Pjaerr commented on Apr 1, 2020

   

   Pjaerr

   on Apr 1, 2020

   OwnerAuthor

   More actions

   As a reference, the code for this is in src/accelerometer.js and it is a function that takes a threshold (how much does the user need to move the device) and the timeout (how long do we wait in between detections before checking again) and it finally takes a callback that will be triggered with true/false depending on whether the device is or is not moving.

   Code change: https://github.com/Pjaerr/QuaRUNtine/blob/master/frontend/src/accelerometer.js