Skip to content

Commit

Permalink
Allow users to move back from staging configuration (#107)
Browse files Browse the repository at this point in the history 
Added resting and above plate buttons to DetectingFace
  • Loading branch information
@amalnanavati
amalnanavati authored Dec 23, 2023
1 parent 43b00f4 commit b40a684
Showing 1 changed file with 117 additions and 13 deletions.
130 changes: 117 additions & 13 deletions feedingwebapp/src/Pages/Home/MealStates/DetectingFace.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,16 +33,20 @@ const DetectingFace = () => {
const setFaceDetectionAutoContinue = useGlobalState((state) => state.setFaceDetectionAutoContinue)
// Get icon image for move to mouth
let moveToMouthImage = MOVING_STATE_ICON_DICT[MEAL_STATE.R_MovingToMouth]
let moveToRestingImage = MOVING_STATE_ICON_DICT[MEAL_STATE.R_MovingToRestingPosition]
let moveAbovePlateImage = MOVING_STATE_ICON_DICT[MEAL_STATE.R_MovingAbovePlate]
// Flag to check if the current orientation is portrait
const isPortrait = useMediaQuery({ query: '(orientation: portrait)' })
// Indicator of how to arrange screen elements based on orientation
let dimension = isPortrait ? 'column' : 'row'
let otherDimension = isPortrait ? 'row' : 'column'
// Font size for text
let textFontSize = isPortrait ? '3vh' : '3vw'
let buttonWidth = isPortrait ? '30vh' : '30vw'
let buttonHeight = isPortrait ? '20vh' : '20vw'
let iconWidth = isPortrait ? '28vh' : '28vw'
let iconHeight = isPortrait ? '18vh' : '18vw'
let textFontSize = 3
let buttonWidth = 30
let buttonHeight = 20
let iconWidth = 28
let iconHeight = 18
let sizeSuffix = isPortrait ? 'vh' : 'vw'
// The min and max distance from the camera to the face for the face to be
// conidered valid. NOTE: This must match the values in the MoveToMouth tree.
const min_face_distance = 0.4
Expand Down Expand Up @@ -70,6 +74,26 @@ const DetectingFace = () => {
setMouthDetected(false)
}, [setMealState, setMouthDetected])

/**
* Callback function for proceeding to move to the resting position.
*/
const moveToRestingCallback = useCallback(() => {
console.log('Transitioning to R_MovingToRestingPosition')
setMealState(MEAL_STATE.R_MovingToRestingPosition)
// Set mouth detected to false for the next time this screen comes up
setMouthDetected(false)
}, [setMealState, setMouthDetected])

/**
* Callback function for proceeding to move above the plate.
*/
const moveAbovePlateCallback = useCallback(() => {
console.log('Transitioning to R_MovingAbovePlate')
setMealState(MEAL_STATE.R_MovingAbovePlate)
// Set mouth detected to false for the next time this screen comes up
setMouthDetected(false)
}, [setMealState, setMouthDetected])

/**
* Subscribe to the ROS Topic with the face detection result. This is created
* in local state to avoid re-creating it upon every re-render.
Expand Down Expand Up @@ -157,7 +181,7 @@ const DetectingFace = () => {
width: '100%'
}}
>
<p className='transitionMessage' style={{ marginBottom: '0px', fontSize: textFontSize }}>
<p className='transitionMessage' style={{ marginBottom: '0px', fontSize: textFontSize.toString() + sizeSuffix }}>
<input
name='faceDetectionAutoContinue'
type='checkbox'
Expand All @@ -176,7 +200,7 @@ const DetectingFace = () => {
width: '100%'
}}
>
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center', width: '100%', height: '100%' }}>
<View style={{ flex: 5, alignItems: 'center', justifyContent: 'center', width: '100%', height: '100%' }}>
<View
style={{
flex: 1,
Expand All @@ -186,7 +210,7 @@ const DetectingFace = () => {
height: '100%'
}}
>
<p className='transitionMessage' style={{ marginBottom: '0px', fontSize: textFontSize }}>
<p className='transitionMessage' style={{ marginBottom: '0px', fontSize: textFontSize.toString() + sizeSuffix }}>
{mouthDetected ? 'Mouth detected!' : 'Waiting to detect mouth...'}
</p>
</View>
Expand All @@ -209,33 +233,113 @@ const DetectingFace = () => {
/>
</View>
</View>
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center', width: '100%', height: '100%' }}>
<p className='transitionMessage' style={{ marginBottom: '0px', fontSize: textFontSize }}>
{mouthDetected ? 'Continue' : 'Continue without detecting mouth'}
<View style={{ flex: 3, alignItems: 'center', justifyContent: 'center', width: '100%', height: '100%' }}>
<p className='transitionMessage' style={{ marginBottom: '0px', fontSize: textFontSize.toString() + sizeSuffix }}>
{mouthDetected ? 'Continue' : 'Continue without detection'}
</p>
{/* Icon to move to mouth position */}
<Button
variant='success'
className='mx-2 mb-2 btn-huge'
size='lg'
onClick={moveToMouthCallback}
style={{ width: buttonWidth, height: buttonHeight }}
style={{
width: buttonWidth.toString() + sizeSuffix,
height: buttonHeight.toString() + sizeSuffix,
display: 'flex',
justifyContent: 'center',
alignContent: 'center'
}}
>
<img src={moveToMouthImage} alt='move_to_mouth_image' className='center' style={{ width: iconWidth, height: iconHeight }} />
<img
src={moveToMouthImage}
alt='move_to_mouth_image'
className='center'
style={{ width: iconWidth.toString() + sizeSuffix, height: iconHeight.toString() + sizeSuffix }}
/>
</Button>
</View>
<View
style={{
flex: 2,
flexDirection: otherDimension,
alignItems: 'center',
justifyContent: 'center',
width: '100%',
height: '100%'
}}
>
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center', width: '100%', height: '100%' }}>
<p className='transitionMessage' style={{ marginBottom: '0px', fontSize: (textFontSize * 0.66).toString() + sizeSuffix }}>
Move to Resting
</p>
{/* Icon to move to mouth position */}
<Button
variant='warning'
className='mx-2 mb-2 btn-huge'
size='lg'
onClick={moveToRestingCallback}
style={{
width: (buttonWidth / 2).toString() + sizeSuffix,
height: (buttonHeight / 2).toString() + sizeSuffix,
display: 'flex',
justifyContent: 'center',
alignContent: 'center'
}}
>
<img
src={moveToRestingImage}
alt='move_to_resting_image'
className='center'
style={{ width: (iconWidth / 2).toString() + sizeSuffix, height: (iconHeight / 2).toString() + sizeSuffix }}
/>
</Button>
</View>
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center', width: '100%', height: '100%' }}>
<p className='transitionMessage' style={{ marginBottom: '0px', fontSize: (textFontSize * 0.66).toString() + sizeSuffix }}>
Move Above Plate
</p>
{/* Icon to move to mouth position */}
<Button
variant='warning'
className='mx-2 mb-2 btn-huge'
size='lg'
onClick={moveAbovePlateCallback}
style={{
width: (buttonWidth / 2).toString() + sizeSuffix,
height: (buttonHeight / 2).toString() + sizeSuffix,
display: 'flex',
justifyContent: 'center',
alignContent: 'center'
}}
>
<img
src={moveAbovePlateImage}
alt='move_above_plate_image'
className='center'
style={{ width: (iconWidth / 2).toString() + sizeSuffix, height: (iconHeight / 2).toString() + sizeSuffix }}
/>
</Button>
</View>
</View>
</View>
</>
)
}, [
dimension,
otherDimension,
margin,
mouthDetected,
moveToMouthCallback,
moveToRestingCallback,
moveAbovePlateCallback,
moveToMouthImage,
moveToRestingImage,
moveAbovePlateImage,
textFontSize,
buttonHeight,
buttonWidth,
sizeSuffix,
iconHeight,
iconWidth,
faceDetectionAutoContinue,
Expand Down

0 comments on commit b40a684

Please sign in to comment.