Add wake locks

feedingwebapp/package.json

@@ -26,6 +26,7 @@
     "styled-components": "^5.3.9",
     "web-vitals": "^2.1.4",
     "webpack": "^5.82.1",
+    "nosleep.js" : "^0.12.0",
     "zustand": "^4.0.0-rc.1"
   },
   "scripts": {

feedingwebapp/src/Pages/Home/MealStates/BiteAcquisitionCheck.jsx

@@ -1,5 +1,5 @@
 // React Imports
-import React, { useCallback } from 'react'
+import React, { useCallback, useMemo } from 'react'
 import Button from 'react-bootstrap/Button'
 import { useMediaQuery } from 'react-responsive'
 import { View } from 'react-native'
@@ -9,6 +9,9 @@ import '../Home.css'
 import { useGlobalState, MEAL_STATE } from '../../GlobalState'
 import { MOVING_STATE_ICON_DICT } from '../../Constants'
 
+// External Library Imports
+import NoSleep from 'nosleep.js'
+
 /**
  * The BiteAcquisitionCheck component appears after the robot has attempted to
  * acquire a bite, and asks the user whether it succeeded at acquiring the bite.
@@ -30,24 +33,30 @@ const BiteAcquisitionCheck = () => {
   let buttonHeight = isPortrait ? '20vh' : '20vw'
   let iconWidth = isPortrait ? '28vh' : '28vw'
   let iconHeight = isPortrait ? '18vh' : '18vw'
+  // NoSleep object creation
+  let noSleep = useMemo(() => new NoSleep(), [])
 
   /**
    * Callback function for when the user indicates that the bite acquisition
    * succeeded.
    */
   const acquisitionSuccess = useCallback(() => {
+    console.log('Wake Lock is enabled')
+    noSleep.enable() // keep the screen on!
     console.log('acquisitionSuccess')
     setMealState(MEAL_STATE.R_MovingToMouth)
-  }, [setMealState])
+  }, [setMealState, noSleep])
 
   /**
    * Callback function for when the user indicates that the bite acquisition
    * failed.
    */
   const acquisitionFailure = useCallback(() => {
+    console.log('Wake Lock is enabled')
+    noSleep.enable() // keep the screen on!
     console.log('acquisitionFailure')
     setMealState(MEAL_STATE.R_MovingAbovePlate)
-  }, [setMealState])
+  }, [setMealState, noSleep])
 
   /**
    * Get the ready for bite text to render.

feedingwebapp/src/Pages/Home/MealStates/BiteDone.jsx

@@ -1,5 +1,5 @@
 // React Imports
-import React, { useCallback } from 'react'
+import React, { useCallback, useMemo } from 'react'
 import Button from 'react-bootstrap/Button'
 import { useMediaQuery } from 'react-responsive'
 import { View } from 'react-native'
@@ -9,6 +9,9 @@ import '../Home.css'
 import { useGlobalState, MEAL_STATE } from '../../GlobalState'
 import { MOVING_STATE_ICON_DICT } from '../../Constants'
 
+// External Library Imports
+import NoSleep from 'nosleep.js'
+
 /**
  * The BiteDone component appears after the robot has moved to the user's mouth,
  * and waits for the user to specify that they have finished the bite before
@@ -31,20 +34,26 @@ const BiteDone = () => {
   let buttonHeight = isPortrait ? '20vh' : '20vw'
   let iconWidth = isPortrait ? '28vh' : '28vw'
   let iconHeight = isPortrait ? '18vh' : '18vw'
+  // NoSleep object creation
+  let noSleep = useMemo(() => new NoSleep(), [])
 
   /**
    * Callback function for when the user wants to move above plate.
    */
   const moveAbovePlate = useCallback(() => {
+    console.log('Wake Lock is enabled')
+    noSleep.enable() // keep the screen on!
     setMealState(MEAL_STATE.R_MovingFromMouthToAbovePlate)
-  }, [setMealState])
+  }, [setMealState, noSleep])
 
   /**
    * Callback function for when the user wants to move to resting position.
    */
   const moveToRestingPosition = useCallback(() => {
+    console.log('Wake Lock is enabled')
+    noSleep.enable() // keep the screen on!
     setMealState(MEAL_STATE.R_MovingFromMouthToRestingPosition)
-  }, [setMealState])
+  }, [setMealState, noSleep])
 
   /**
    * Get the bite finished text to render.

feedingwebapp/src/Pages/Home/MealStates/BiteSelection.jsx

@@ -6,6 +6,8 @@ import { View } from 'react-native'
 // PropTypes is used to validate that the used props are in fact passed to this
 // Component
 import PropTypes from 'prop-types'
+// External Library Imports
+import NoSleep from 'nosleep.js'
 
 // Local Imports
 import '../Home.css'
@@ -55,6 +57,8 @@ const BiteSelection = (props) => {
   let textFontSize = isPortrait ? '2.5vh' : '2vw'
   // Indicator of how to arrange screen elements based on orientation
   let dimension = isPortrait ? 'column' : 'row'
+  // NoSleep object creation
+  let noSleep = useMemo(() => new NoSleep(), [])
 
   /**
    * Create a local state variable to store the detected masks, the
@@ -100,9 +104,11 @@ const BiteSelection = (props) => {
    * meal.
    */
   const doneEatingClicked = useCallback(() => {
+    console.log('Wake Lock is enabled')
+    noSleep.enable() // keep the screen on!
     console.log('doneEatingClicked')
     setMealState(MEAL_STATE.R_StowingArm)
-  }, [setMealState])
+  }, [setMealState, noSleep])
 
   // Get current window size
   let windowSize = useWindowSize()
@@ -111,8 +117,10 @@ const BiteSelection = (props) => {
    * Callback function for when the user wants to move to mouth position.
    */
   const moveToMouth = useCallback(() => {
+    console.log('Wake Lock is enabled')
+    noSleep.enable() // keep the screen on!
     setMealState(MEAL_STATE.R_MovingToMouth)
-  }, [setMealState])
+  }, [setMealState, noSleep])
 
   /**
    * Callback function for when the user clicks the button for a food item.
@@ -125,9 +133,11 @@ const BiteSelection = (props) => {
         camera_info: actionResult.camera_info,
         detected_food: actionResult.detected_items[food_i]
       })
+      console.log('Wake Lock is enabled')
+      noSleep.enable() // keep the screen on!
       setMealState(MEAL_STATE.R_BiteAcquisition)
     },
-    [actionResult, setDesiredFoodItem, setMealState]
+    [actionResult, setDesiredFoodItem, setMealState, noSleep]
   )
 
   /**
@@ -626,4 +636,4 @@ BiteSelection.propTypes = {
   webVideoServerURL: PropTypes.string.isRequired
 }
 
-export default BiteSelection
+export default BiteSelection

feedingwebapp/src/Pages/Home/MealStates/PreMeal.jsx

@@ -1,12 +1,15 @@
 // React Imports
-import React, { useCallback } from 'react'
+import React, { useCallback, useMemo } from 'react'
 import Button from 'react-bootstrap/Button'
 import Row from 'react-bootstrap/Row'
 
 // Local Imports
 import '../Home.css'
 import { useGlobalState, MEAL_STATE } from '../../GlobalState'
 
+// External Library Imports
+import NoSleep from 'nosleep.js'
+
 /**
  * The PreMeal component appears before the meal starts, and gives the user a
  * Start Feeding button to initiate feeding. Further, PreMeal is the only meal
@@ -23,14 +26,18 @@ const PreMeal = () => {
   let buttonHeight = '10vh'
   // Margin
   let margin = '5vh'
+  // NoSleep object creation
+  let noSleep = useMemo(() => new NoSleep(), [])
 
   /**
    * Callback function for when the user decides to start feeding using the app.
    */
   const startFeedingClicked = useCallback(() => {
+    console.log('Wake Lock is enabled')
+    noSleep.enable() // keep the screen on!
     console.log('startFeedingClicked')
     setMealState(MEAL_STATE.R_MovingAbovePlate)
-  }, [setMealState])
+  }, [setMealState, noSleep])
 
   // Render the component
   return (
@@ -52,4 +59,4 @@ const PreMeal = () => {
   )
 }
 
-export default PreMeal
+export default PreMeal

feedingwebapp/src/Pages/Home/MealStates/RobotMotion.jsx

@@ -5,6 +5,8 @@ import Button from 'react-bootstrap/Button'
 import { View } from 'react-native'
 // PropTypes is used to validate that the used props are in fact passed to this Component
 import PropTypes from 'prop-types'
+// External Library Imports
+import NoSleep from 'nosleep.js'
 // Local Imports
 import { useROS, createROSActionClient, callROSAction, cancelROSAction, destroyActionClient } from '../../../ros/ros_helpers'
 import Footer from '../../Footer/Footer'
@@ -69,6 +71,8 @@ const RobotMotion = (props) => {
   let waitingTextFontSize = isPortrait ? '4.5vh' : '9vh'
   // Motion text font size
   let motionTextFontSize = isPortrait ? '3vh' : '6vh'
+  // NoSleep object creation
+  let noSleep = useMemo(() => new NoSleep(), [])
 
   /**
    * Create the ROS Action Client. This is re-created every time props.mealState
@@ -103,9 +107,11 @@ const RobotMotion = (props) => {
    * location.
    */
   const robotMotionDone = useCallback(() => {
+    console.log('Wake Lock is disabled')
+    noSleep.disable() // let the screen turn off.
     console.log('robotMotionDone')
     setMealState(props.nextMealState)
-  }, [setMealState, props.nextMealState])
+  }, [setMealState, props.nextMealState, noSleep])
 
   /**
    * Callback function for when the action sends a response. It updates the
@@ -189,6 +195,7 @@ const RobotMotion = (props) => {
      */
     return () => {
       destroyActionClient(robotMotionAction)
+      setActionStatus({ actionStatus: ROS_ACTION_STATUS_ABORT })
     }
   }, [callRobotMotionAction, robotMotionAction, feedbackCallback, responseCallback])