From 639e0075b5fcdb862eab35a412b4f8e5efca49b7 Mon Sep 17 00:00:00 2001 From: Raida Karim Date: Wed, 26 Apr 2023 08:48:24 -0700 Subject: [PATCH 01/27] add icons --- .../src/Pages/Home/MealStates/BiteDone.jsx | 16 ++++++------ .../Pages/Home/MealStates/BiteInitiation.jsx | 25 +++++++++---------- feedingwebapp/src/mouth.svg | 1 + feedingwebapp/src/plate.svg | 1 + feedingwebapp/src/staging.svg | 1 + 5 files changed, 22 insertions(+), 22 deletions(-) create mode 100644 feedingwebapp/src/mouth.svg create mode 100644 feedingwebapp/src/plate.svg create mode 100644 feedingwebapp/src/staging.svg diff --git a/feedingwebapp/src/Pages/Home/MealStates/BiteDone.jsx b/feedingwebapp/src/Pages/Home/MealStates/BiteDone.jsx index 64efea76..67d35e2f 100644 --- a/feedingwebapp/src/Pages/Home/MealStates/BiteDone.jsx +++ b/feedingwebapp/src/Pages/Home/MealStates/BiteDone.jsx @@ -6,6 +6,7 @@ import Row from 'react-bootstrap/Row' // Local Imports import '../Home.css' import { useGlobalState, MEAL_STATE } from '../../GlobalState' +import staging from '../../../staging.svg' /** * The BiteDone component appears after the robot has moved to the user's mouth, @@ -38,24 +39,21 @@ const BiteDone = () => { // Render the component return (
- {/* Give the user the option to cancel this bite */} -
- -
+ {/* Ask the user whether they're ready for the bite */} -

- Click the below button to indicate the completion of your bite. -

diff --git a/feedingwebapp/src/Pages/Home/MealStates/BiteInitiation.jsx b/feedingwebapp/src/Pages/Home/MealStates/BiteInitiation.jsx index 0ae6f406..bb6915b6 100644 --- a/feedingwebapp/src/Pages/Home/MealStates/BiteInitiation.jsx +++ b/feedingwebapp/src/Pages/Home/MealStates/BiteInitiation.jsx @@ -6,6 +6,8 @@ import Row from 'react-bootstrap/Row' // Local Imports import '../Home.css' import { useGlobalState, MEAL_STATE } from '../../GlobalState' +import plate from '../../../plate.svg' +import mouth from '../../../mouth.svg' /** * The BiteInitiation component appears after the robot has moved to the staging @@ -37,26 +39,23 @@ const BiteInitiation = () => { // Render the component return (
- {/* Give the user the option to cancel this bite */} -
- -
- {/* Ask the user whether they're ready for the bite */} -

- Click the below button when you are ready for the bite. -

+ + + {/* Give the user the option to move robot over plate*/} + +
diff --git a/feedingwebapp/src/mouth.svg b/feedingwebapp/src/mouth.svg new file mode 100644 index 00000000..34e9b957 --- /dev/null +++ b/feedingwebapp/src/mouth.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/feedingwebapp/src/plate.svg b/feedingwebapp/src/plate.svg new file mode 100644 index 00000000..078a4b7f --- /dev/null +++ b/feedingwebapp/src/plate.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/feedingwebapp/src/staging.svg b/feedingwebapp/src/staging.svg new file mode 100644 index 00000000..c08b1b72 --- /dev/null +++ b/feedingwebapp/src/staging.svg @@ -0,0 +1 @@ + \ No newline at end of file From 6f71caa71f801900b55675d0e791b0d4dfce1581 Mon Sep 17 00:00:00 2001 From: Raida Karim Date: Wed, 26 Apr 2023 11:09:53 -0700 Subject: [PATCH 02/27] add distinct pause modals --- .../src/Pages/Footer/AbovePlateFooter.jsx | 48 +++++++++++ .../src/Pages/Footer/AbovePlatePause.jsx | 84 +++++++++++++++++++ .../Pages/Footer/BiteAcquisitionFooter.jsx | 48 +++++++++++ .../src/Pages/Footer/BiteAcquisitionPause.jsx | 84 +++++++++++++++++++ .../src/Pages/Footer/MouthFooter.jsx | 48 +++++++++++ feedingwebapp/src/Pages/Footer/MouthPause.jsx | 84 +++++++++++++++++++ .../src/Pages/Footer/StagingFooter.jsx | 48 +++++++++++ .../src/Pages/Footer/StagingPause.jsx | 84 +++++++++++++++++++ .../src/Pages/Footer/StowArmFooter.jsx | 48 +++++++++++ .../src/Pages/Footer/StowArmPause.jsx | 84 +++++++++++++++++++ .../Pages/Home/MealStates/BiteAcquisition.jsx | 2 +- .../src/Pages/Home/MealStates/BiteDone.jsx | 14 ++-- .../Home/MealStates/MovingAbovePlate.jsx | 2 +- .../Pages/Home/MealStates/MovingToMouth.jsx | 2 +- .../MealStates/MovingToStagingLocation.jsx | 2 +- .../src/Pages/Home/MealStates/StowingArm.jsx | 2 +- 16 files changed, 672 insertions(+), 12 deletions(-) create mode 100644 feedingwebapp/src/Pages/Footer/AbovePlateFooter.jsx create mode 100644 feedingwebapp/src/Pages/Footer/AbovePlatePause.jsx create mode 100644 feedingwebapp/src/Pages/Footer/BiteAcquisitionFooter.jsx create mode 100644 feedingwebapp/src/Pages/Footer/BiteAcquisitionPause.jsx create mode 100644 feedingwebapp/src/Pages/Footer/MouthFooter.jsx create mode 100644 feedingwebapp/src/Pages/Footer/MouthPause.jsx create mode 100644 feedingwebapp/src/Pages/Footer/StagingFooter.jsx create mode 100644 feedingwebapp/src/Pages/Footer/StagingPause.jsx create mode 100644 feedingwebapp/src/Pages/Footer/StowArmFooter.jsx create mode 100644 feedingwebapp/src/Pages/Footer/StowArmPause.jsx diff --git a/feedingwebapp/src/Pages/Footer/AbovePlateFooter.jsx b/feedingwebapp/src/Pages/Footer/AbovePlateFooter.jsx new file mode 100644 index 00000000..b63dc3b3 --- /dev/null +++ b/feedingwebapp/src/Pages/Footer/AbovePlateFooter.jsx @@ -0,0 +1,48 @@ +// React imports +import React, { useState } from 'react' +import { MDBFooter } from 'mdb-react-ui-kit' +import Button from 'react-bootstrap/Button' + +// Local imports +import PauseModal from './AbovePlatePause' + +/** + * The Footer shows a pause button. When users click it, the app tells the robot + * to immediately pause and displays a model that gives them the option to resume. + */ +const Footer = () => { + // Create a local state variable for whether the robot is paused + const [pause, setPause] = useState(false) + + /** + * When the resume button is clicked, close the modal and resume robot motion. + */ + function resumeClicked() { + setPause(false) + } + + return ( + <> + {/** + * The footer has a big pause button, which shows the PauseModal when clicked. + */} + +
+ { + + } +
+ + + {/** + * The PauseModal toggles on and off with the Pause button and shows a + * screen where the user can resume the robot. + */} + + + ) +} + +export default Footer diff --git a/feedingwebapp/src/Pages/Footer/AbovePlatePause.jsx b/feedingwebapp/src/Pages/Footer/AbovePlatePause.jsx new file mode 100644 index 00000000..599c19e6 --- /dev/null +++ b/feedingwebapp/src/Pages/Footer/AbovePlatePause.jsx @@ -0,0 +1,84 @@ +// React imports +import React, { useRef } from 'react' +import Button from 'react-bootstrap/Button' +// The Modal is a screen that appears on top of the main app, and can be toggled +// on and off. +import Modal from 'react-bootstrap/Modal' +// PropTypes is used to validate that the used props are in fact passed to this +// Component +import PropTypes from 'prop-types' + +import { useGlobalState, MEAL_STATE } from '../GlobalState' + +/** + * The PauseModal gives the user the option to resume the robot when they are + * ready. + */ +function PauseModal(props) { + const ref = useRef(null) + const setMealState = useGlobalState((state) => state.setMealState) + + /** + * Callback function for if the user decides to cancel the bite. + * + * TODO: Think more carefully about what cancelBite at this stage should do! + * Maybe replace with a more descriptive button (e.g., "return to staging.") + */ + function priorState() { + console.log('prior state') + setMealState(MEAL_STATE.U_PreMeal) + } + return ( + <> + {/** + * TODO: + * - Center the resume button in the modal so it works for all screen widths. + * - Determine why this Modal doesn't show an x-mark whereas LiveVideoModal + * does (probably has something to do with modal content being too big?) + */} + + + ⏸️ Paused! + + +

+ Resume the feeding session when you are ready. +

+ + + + + + ) +} +PauseModal.propTypes = { + show: PropTypes.bool, + resumeClicked: PropTypes.func +} + +export default PauseModal diff --git a/feedingwebapp/src/Pages/Footer/BiteAcquisitionFooter.jsx b/feedingwebapp/src/Pages/Footer/BiteAcquisitionFooter.jsx new file mode 100644 index 00000000..17c6ba8a --- /dev/null +++ b/feedingwebapp/src/Pages/Footer/BiteAcquisitionFooter.jsx @@ -0,0 +1,48 @@ +// React imports +import React, { useState } from 'react' +import { MDBFooter } from 'mdb-react-ui-kit' +import Button from 'react-bootstrap/Button' + +// Local imports +import PauseModal from './BiteAcquisitionPause' + +/** + * The Footer shows a pause button. When users click it, the app tells the robot + * to immediately pause and displays a model that gives them the option to resume. + */ +const Footer = () => { + // Create a local state variable for whether the robot is paused + const [pause, setPause] = useState(false) + + /** + * When the resume button is clicked, close the modal and resume robot motion. + */ + function resumeClicked() { + setPause(false) + } + + return ( + <> + {/** + * The footer has a big pause button, which shows the PauseModal when clicked. + */} + +
+ { + + } +
+ + + {/** + * The PauseModal toggles on and off with the Pause button and shows a + * screen where the user can resume the robot. + */} + + + ) +} + +export default Footer diff --git a/feedingwebapp/src/Pages/Footer/BiteAcquisitionPause.jsx b/feedingwebapp/src/Pages/Footer/BiteAcquisitionPause.jsx new file mode 100644 index 00000000..a6078516 --- /dev/null +++ b/feedingwebapp/src/Pages/Footer/BiteAcquisitionPause.jsx @@ -0,0 +1,84 @@ +// React imports +import React, { useRef } from 'react' +import Button from 'react-bootstrap/Button' +// The Modal is a screen that appears on top of the main app, and can be toggled +// on and off. +import Modal from 'react-bootstrap/Modal' +// PropTypes is used to validate that the used props are in fact passed to this +// Component +import PropTypes from 'prop-types' + +import { useGlobalState, MEAL_STATE } from '../GlobalState' + +/** + * The PauseModal gives the user the option to resume the robot when they are + * ready. + */ +function PauseModal(props) { + const ref = useRef(null) + const setMealState = useGlobalState((state) => state.setMealState) + + /** + * Callback function for if the user decides to cancel the bite. + * + * TODO: Think more carefully about what cancelBite at this stage should do! + * Maybe replace with a more descriptive button (e.g., "return to staging.") + */ + function priorState() { + console.log('prior state') + setMealState(MEAL_STATE.U_BiteSelection) + } + return ( + <> + {/** + * TODO: + * - Center the resume button in the modal so it works for all screen widths. + * - Determine why this Modal doesn't show an x-mark whereas LiveVideoModal + * does (probably has something to do with modal content being too big?) + */} + + + ⏸️ Paused! + + +

+ Resume the feeding session when you are ready. +

+ + + + + + ) +} +PauseModal.propTypes = { + show: PropTypes.bool, + resumeClicked: PropTypes.func +} + +export default PauseModal diff --git a/feedingwebapp/src/Pages/Footer/MouthFooter.jsx b/feedingwebapp/src/Pages/Footer/MouthFooter.jsx new file mode 100644 index 00000000..3d4fbb4b --- /dev/null +++ b/feedingwebapp/src/Pages/Footer/MouthFooter.jsx @@ -0,0 +1,48 @@ +// React imports +import React, { useState } from 'react' +import { MDBFooter } from 'mdb-react-ui-kit' +import Button from 'react-bootstrap/Button' + +// Local imports +import PauseModal from './MouthPause' + +/** + * The Footer shows a pause button. When users click it, the app tells the robot + * to immediately pause and displays a model that gives them the option to resume. + */ +const Footer = () => { + // Create a local state variable for whether the robot is paused + const [pause, setPause] = useState(false) + + /** + * When the resume button is clicked, close the modal and resume robot motion. + */ + function resumeClicked() { + setPause(false) + } + + return ( + <> + {/** + * The footer has a big pause button, which shows the PauseModal when clicked. + */} + +
+ { + + } +
+ + + {/** + * The PauseModal toggles on and off with the Pause button and shows a + * screen where the user can resume the robot. + */} + + + ) +} + +export default Footer diff --git a/feedingwebapp/src/Pages/Footer/MouthPause.jsx b/feedingwebapp/src/Pages/Footer/MouthPause.jsx new file mode 100644 index 00000000..d3ca2363 --- /dev/null +++ b/feedingwebapp/src/Pages/Footer/MouthPause.jsx @@ -0,0 +1,84 @@ +// React imports +import React, { useRef } from 'react' +import Button from 'react-bootstrap/Button' +// The Modal is a screen that appears on top of the main app, and can be toggled +// on and off. +import Modal from 'react-bootstrap/Modal' +// PropTypes is used to validate that the used props are in fact passed to this +// Component +import PropTypes from 'prop-types' + +import { useGlobalState, MEAL_STATE } from '../GlobalState' + +/** + * The PauseModal gives the user the option to resume the robot when they are + * ready. + */ +function PauseModal(props) { + const ref = useRef(null) + const setMealState = useGlobalState((state) => state.setMealState) + + /** + * Callback function for if the user decides to cancel the bite. + * + * TODO: Think more carefully about what cancelBite at this stage should do! + * Maybe replace with a more descriptive button (e.g., "return to staging.") + */ + function priorState() { + console.log('prior state') + setMealState(MEAL_STATE.U_BiteInitiation) + } + return ( + <> + {/** + * TODO: + * - Center the resume button in the modal so it works for all screen widths. + * - Determine why this Modal doesn't show an x-mark whereas LiveVideoModal + * does (probably has something to do with modal content being too big?) + */} + + + ⏸️ Paused! + + +

+ Resume the feeding session when you are ready. +

+ + + + + + ) +} +PauseModal.propTypes = { + show: PropTypes.bool, + resumeClicked: PropTypes.func +} + +export default PauseModal diff --git a/feedingwebapp/src/Pages/Footer/StagingFooter.jsx b/feedingwebapp/src/Pages/Footer/StagingFooter.jsx new file mode 100644 index 00000000..612fa5a7 --- /dev/null +++ b/feedingwebapp/src/Pages/Footer/StagingFooter.jsx @@ -0,0 +1,48 @@ +// React imports +import React, { useState } from 'react' +import { MDBFooter } from 'mdb-react-ui-kit' +import Button from 'react-bootstrap/Button' + +// Local imports +import PauseModal from './StagingPause' + +/** + * The Footer shows a pause button. When users click it, the app tells the robot + * to immediately pause and displays a model that gives them the option to resume. + */ +const Footer = () => { + // Create a local state variable for whether the robot is paused + const [pause, setPause] = useState(false) + + /** + * When the resume button is clicked, close the modal and resume robot motion. + */ + function resumeClicked() { + setPause(false) + } + + return ( + <> + {/** + * The footer has a big pause button, which shows the PauseModal when clicked. + */} + +
+ { + + } +
+ + + {/** + * The PauseModal toggles on and off with the Pause button and shows a + * screen where the user can resume the robot. + */} + + + ) +} + +export default Footer diff --git a/feedingwebapp/src/Pages/Footer/StagingPause.jsx b/feedingwebapp/src/Pages/Footer/StagingPause.jsx new file mode 100644 index 00000000..a6913cf9 --- /dev/null +++ b/feedingwebapp/src/Pages/Footer/StagingPause.jsx @@ -0,0 +1,84 @@ +// React imports +import React, { useRef } from 'react' +import Button from 'react-bootstrap/Button' +// The Modal is a screen that appears on top of the main app, and can be toggled +// on and off. +import Modal from 'react-bootstrap/Modal' +// PropTypes is used to validate that the used props are in fact passed to this +// Component +import PropTypes from 'prop-types' + +import { useGlobalState, MEAL_STATE } from '../GlobalState' + +/** + * The PauseModal gives the user the option to resume the robot when they are + * ready. + */ +function PauseModal(props) { + const ref = useRef(null) + const setMealState = useGlobalState((state) => state.setMealState) + + /** + * Callback function for if the user decides to cancel the bite. + * + * TODO: Think more carefully about what cancelBite at this stage should do! + * Maybe replace with a more descriptive button (e.g., "return to staging.") + */ + function priorState() { + console.log('prior state') + setMealState(MEAL_STATE.U_BiteAcquisitionCheck) + } + return ( + <> + {/** + * TODO: + * - Center the resume button in the modal so it works for all screen widths. + * - Determine why this Modal doesn't show an x-mark whereas LiveVideoModal + * does (probably has something to do with modal content being too big?) + */} + + + ⏸️ Paused! + + +

+ Resume the feeding session when you are ready. +

+ + + + + + ) +} +PauseModal.propTypes = { + show: PropTypes.bool, + resumeClicked: PropTypes.func +} + +export default PauseModal diff --git a/feedingwebapp/src/Pages/Footer/StowArmFooter.jsx b/feedingwebapp/src/Pages/Footer/StowArmFooter.jsx new file mode 100644 index 00000000..591d6538 --- /dev/null +++ b/feedingwebapp/src/Pages/Footer/StowArmFooter.jsx @@ -0,0 +1,48 @@ +// React imports +import React, { useState } from 'react' +import { MDBFooter } from 'mdb-react-ui-kit' +import Button from 'react-bootstrap/Button' + +// Local imports +import PauseModal from './StowArmPause' + +/** + * The Footer shows a pause button. When users click it, the app tells the robot + * to immediately pause and displays a model that gives them the option to resume. + */ +const Footer = () => { + // Create a local state variable for whether the robot is paused + const [pause, setPause] = useState(false) + + /** + * When the resume button is clicked, close the modal and resume robot motion. + */ + function resumeClicked() { + setPause(false) + } + + return ( + <> + {/** + * The footer has a big pause button, which shows the PauseModal when clicked. + */} + +
+ { + + } +
+ + + {/** + * The PauseModal toggles on and off with the Pause button and shows a + * screen where the user can resume the robot. + */} + + + ) +} + +export default Footer diff --git a/feedingwebapp/src/Pages/Footer/StowArmPause.jsx b/feedingwebapp/src/Pages/Footer/StowArmPause.jsx new file mode 100644 index 00000000..97275899 --- /dev/null +++ b/feedingwebapp/src/Pages/Footer/StowArmPause.jsx @@ -0,0 +1,84 @@ +// React imports +import React, { useRef } from 'react' +import Button from 'react-bootstrap/Button' +// The Modal is a screen that appears on top of the main app, and can be toggled +// on and off. +import Modal from 'react-bootstrap/Modal' +// PropTypes is used to validate that the used props are in fact passed to this +// Component +import PropTypes from 'prop-types' + +import { useGlobalState, MEAL_STATE } from '../GlobalState' + +/** + * The PauseModal gives the user the option to resume the robot when they are + * ready. + */ +function PauseModal(props) { + const ref = useRef(null) + const setMealState = useGlobalState((state) => state.setMealState) + + /** + * Callback function for if the user decides to cancel the bite. + * + * TODO: Think more carefully about what cancelBite at this stage should do! + * Maybe replace with a more descriptive button (e.g., "return to staging.") + */ + function priorState() { + console.log('prior state') + setMealState(MEAL_STATE.U_BiteDone) + } + return ( + <> + {/** + * TODO: + * - Center the resume button in the modal so it works for all screen widths. + * - Determine why this Modal doesn't show an x-mark whereas LiveVideoModal + * does (probably has something to do with modal content being too big?) + */} + + + ⏸️ Paused! + + +

+ Resume the feeding session when you are ready. +

+ + + + + + ) +} +PauseModal.propTypes = { + show: PropTypes.bool, + resumeClicked: PropTypes.func +} + +export default PauseModal diff --git a/feedingwebapp/src/Pages/Home/MealStates/BiteAcquisition.jsx b/feedingwebapp/src/Pages/Home/MealStates/BiteAcquisition.jsx index 61f15b8c..4b4d183c 100644 --- a/feedingwebapp/src/Pages/Home/MealStates/BiteAcquisition.jsx +++ b/feedingwebapp/src/Pages/Home/MealStates/BiteAcquisition.jsx @@ -7,7 +7,7 @@ import PropTypes from 'prop-types' import Row from 'react-bootstrap/Row' // Local Imports -import Footer from '../../Footer/Footer' +import Footer from '../../Footer/BiteAcquisitionFooter' import '../Home.css' import { useGlobalState, MEAL_STATE } from '../../GlobalState' diff --git a/feedingwebapp/src/Pages/Home/MealStates/BiteDone.jsx b/feedingwebapp/src/Pages/Home/MealStates/BiteDone.jsx index 67d35e2f..92a5b25e 100644 --- a/feedingwebapp/src/Pages/Home/MealStates/BiteDone.jsx +++ b/feedingwebapp/src/Pages/Home/MealStates/BiteDone.jsx @@ -39,13 +39,6 @@ const BiteDone = () => { // Render the component return (
- {/* Give the user the option to retrun to staging position */} - - - - {/* Ask the user whether they're ready for the bite */} + + {/* Give the user the option to retrun to staging position */} + + +
) } diff --git a/feedingwebapp/src/Pages/Home/MealStates/MovingAbovePlate.jsx b/feedingwebapp/src/Pages/Home/MealStates/MovingAbovePlate.jsx index 3455914d..debb24e0 100644 --- a/feedingwebapp/src/Pages/Home/MealStates/MovingAbovePlate.jsx +++ b/feedingwebapp/src/Pages/Home/MealStates/MovingAbovePlate.jsx @@ -7,7 +7,7 @@ import PropTypes from 'prop-types' import Row from 'react-bootstrap/Row' // Local Imports -import Footer from '../../Footer/Footer' +import Footer from '../../Footer/AbovePlateFooter' import '../Home.css' import { useGlobalState, MEAL_STATE } from '../../GlobalState' diff --git a/feedingwebapp/src/Pages/Home/MealStates/MovingToMouth.jsx b/feedingwebapp/src/Pages/Home/MealStates/MovingToMouth.jsx index 871b6e16..37778d4a 100644 --- a/feedingwebapp/src/Pages/Home/MealStates/MovingToMouth.jsx +++ b/feedingwebapp/src/Pages/Home/MealStates/MovingToMouth.jsx @@ -7,7 +7,7 @@ import PropTypes from 'prop-types' import Row from 'react-bootstrap/Row' // Local Imports -import Footer from '../../Footer/Footer' +import Footer from '../../Footer/MouthFooter' import '../Home.css' import { useGlobalState, MEAL_STATE } from '../../GlobalState' diff --git a/feedingwebapp/src/Pages/Home/MealStates/MovingToStagingLocation.jsx b/feedingwebapp/src/Pages/Home/MealStates/MovingToStagingLocation.jsx index 9b7bd4c1..d3cd5b2a 100644 --- a/feedingwebapp/src/Pages/Home/MealStates/MovingToStagingLocation.jsx +++ b/feedingwebapp/src/Pages/Home/MealStates/MovingToStagingLocation.jsx @@ -7,7 +7,7 @@ import PropTypes from 'prop-types' import Row from 'react-bootstrap/Row' // Local Imports -import Footer from '../../Footer/Footer' +import Footer from '../../Footer/StagingFooter' import '../Home.css' import { useGlobalState, MEAL_STATE } from '../../GlobalState' diff --git a/feedingwebapp/src/Pages/Home/MealStates/StowingArm.jsx b/feedingwebapp/src/Pages/Home/MealStates/StowingArm.jsx index 40383b23..2393e355 100644 --- a/feedingwebapp/src/Pages/Home/MealStates/StowingArm.jsx +++ b/feedingwebapp/src/Pages/Home/MealStates/StowingArm.jsx @@ -7,7 +7,7 @@ import PropTypes from 'prop-types' import Row from 'react-bootstrap/Row' // Local Imports -import Footer from '../../Footer/Footer' +import Footer from '../../Footer/StowArmFooter' import '../Home.css' import { useGlobalState, MEAL_STATE } from '../../GlobalState' From a776f743e98ce4fec347105fa8960b697948cb0c Mon Sep 17 00:00:00 2001 From: Raida Karim Date: Sun, 30 Apr 2023 08:03:49 -0700 Subject: [PATCH 03/27] new colors --- feedingwebapp/src/Pages/Home/MealStates/BiteDone.jsx | 2 +- .../src/Pages/Home/MealStates/BiteInitiation.jsx | 10 ++-------- 2 files changed, 3 insertions(+), 9 deletions(-) diff --git a/feedingwebapp/src/Pages/Home/MealStates/BiteDone.jsx b/feedingwebapp/src/Pages/Home/MealStates/BiteDone.jsx index 92a5b25e..00e801b9 100644 --- a/feedingwebapp/src/Pages/Home/MealStates/BiteDone.jsx +++ b/feedingwebapp/src/Pages/Home/MealStates/BiteDone.jsx @@ -54,7 +54,7 @@ const BiteDone = () => { {/* Give the user the option to retrun to staging position */} - diff --git a/feedingwebapp/src/Pages/Home/MealStates/BiteInitiation.jsx b/feedingwebapp/src/Pages/Home/MealStates/BiteInitiation.jsx index bb6915b6..afa6e75a 100644 --- a/feedingwebapp/src/Pages/Home/MealStates/BiteInitiation.jsx +++ b/feedingwebapp/src/Pages/Home/MealStates/BiteInitiation.jsx @@ -41,20 +41,14 @@ const BiteInitiation = () => {
{/* Ask the user whether they're ready for the bite */} - {/* Give the user the option to move robot over plate*/} - From 2ae352f6d8fe01937295d24096f34c86d044c06a Mon Sep 17 00:00:00 2001 From: Raida Karim Date: Sun, 30 Apr 2023 11:29:45 -0700 Subject: [PATCH 04/27] use pause modals from const dictionary --- feedingwebapp/src/Pages/Constants.js | 33 ++++++++ .../src/Pages/Footer/AbovePlateFooter.jsx | 48 ----------- .../src/Pages/Footer/AbovePlatePause.jsx | 84 ------------------- .../Pages/Footer/BiteAcquisitionFooter.jsx | 48 ----------- .../src/Pages/Footer/BiteAcquisitionPause.jsx | 84 ------------------- .../src/Pages/Footer/MouthFooter.jsx | 48 ----------- feedingwebapp/src/Pages/Footer/MouthPause.jsx | 84 ------------------- feedingwebapp/src/Pages/Footer/PauseModal.jsx | 63 +++++++++++++- .../src/Pages/Footer/StagingFooter.jsx | 48 ----------- .../src/Pages/Footer/StagingPause.jsx | 84 ------------------- .../src/Pages/Footer/StowArmFooter.jsx | 48 ----------- .../src/Pages/Footer/StowArmPause.jsx | 84 ------------------- .../Pages/Home/MealStates/BiteAcquisition.jsx | 21 +++-- .../Home/MealStates/MovingAbovePlate.jsx | 2 +- .../Pages/Home/MealStates/MovingToMouth.jsx | 2 +- .../MealStates/MovingToStagingLocation.jsx | 2 +- .../src/Pages/Home/MealStates/StowingArm.jsx | 2 +- 17 files changed, 112 insertions(+), 673 deletions(-) delete mode 100644 feedingwebapp/src/Pages/Footer/AbovePlateFooter.jsx delete mode 100644 feedingwebapp/src/Pages/Footer/AbovePlatePause.jsx delete mode 100644 feedingwebapp/src/Pages/Footer/BiteAcquisitionFooter.jsx delete mode 100644 feedingwebapp/src/Pages/Footer/BiteAcquisitionPause.jsx delete mode 100644 feedingwebapp/src/Pages/Footer/MouthFooter.jsx delete mode 100644 feedingwebapp/src/Pages/Footer/MouthPause.jsx delete mode 100644 feedingwebapp/src/Pages/Footer/StagingFooter.jsx delete mode 100644 feedingwebapp/src/Pages/Footer/StagingPause.jsx delete mode 100644 feedingwebapp/src/Pages/Footer/StowArmFooter.jsx delete mode 100644 feedingwebapp/src/Pages/Footer/StowArmPause.jsx diff --git a/feedingwebapp/src/Pages/Constants.js b/feedingwebapp/src/Pages/Constants.js index 8f078ba3..2992ea69 100644 --- a/feedingwebapp/src/Pages/Constants.js +++ b/feedingwebapp/src/Pages/Constants.js @@ -1,3 +1,36 @@ // The RealSense's default video stream is 640x480 +import { MEAL_STATE } from './GlobalState' +//import MovingAbovePlate from './MealStates/MovingAbovePlate' + export const REALSENSE_WIDTH = 640 export const REALSENSE_HEIGHT = 480 + +export const move_above_plate_dict = { + prev_text: 'Pre Meal', + next_text: 'Bite Selection', + prev_state: MEAL_STATE.U_PreMeal +} + +export const bite_acquistion_dict = { + prev_text: 'Bite Selection', + next_text: 'Bite Acquisition Check', + prev_state: MEAL_STATE.U_BiteSelection +} + +export const move_to_staging_dict = { + prev_text: 'Bite Acquisition Check', + next_text: 'Bite Initiation', + prev_state: MEAL_STATE.U_BiteAcquisitionCheck +} + +export const move_to_mouth_dict = { + prev_text: 'Bite Initiation', + next_text: 'Bite Done', + prev_state: MEAL_STATE.U_BiteInitiation +} + +export const stow_arm_dict = { + prev_text: 'Bite Done', + next_text: 'Post Meal', + prev_state: MEAL_STATE.U_BiteDone +} diff --git a/feedingwebapp/src/Pages/Footer/AbovePlateFooter.jsx b/feedingwebapp/src/Pages/Footer/AbovePlateFooter.jsx deleted file mode 100644 index b63dc3b3..00000000 --- a/feedingwebapp/src/Pages/Footer/AbovePlateFooter.jsx +++ /dev/null @@ -1,48 +0,0 @@ -// React imports -import React, { useState } from 'react' -import { MDBFooter } from 'mdb-react-ui-kit' -import Button from 'react-bootstrap/Button' - -// Local imports -import PauseModal from './AbovePlatePause' - -/** - * The Footer shows a pause button. When users click it, the app tells the robot - * to immediately pause and displays a model that gives them the option to resume. - */ -const Footer = () => { - // Create a local state variable for whether the robot is paused - const [pause, setPause] = useState(false) - - /** - * When the resume button is clicked, close the modal and resume robot motion. - */ - function resumeClicked() { - setPause(false) - } - - return ( - <> - {/** - * The footer has a big pause button, which shows the PauseModal when clicked. - */} - -
- { - - } -
- - - {/** - * The PauseModal toggles on and off with the Pause button and shows a - * screen where the user can resume the robot. - */} - - - ) -} - -export default Footer diff --git a/feedingwebapp/src/Pages/Footer/AbovePlatePause.jsx b/feedingwebapp/src/Pages/Footer/AbovePlatePause.jsx deleted file mode 100644 index 599c19e6..00000000 --- a/feedingwebapp/src/Pages/Footer/AbovePlatePause.jsx +++ /dev/null @@ -1,84 +0,0 @@ -// React imports -import React, { useRef } from 'react' -import Button from 'react-bootstrap/Button' -// The Modal is a screen that appears on top of the main app, and can be toggled -// on and off. -import Modal from 'react-bootstrap/Modal' -// PropTypes is used to validate that the used props are in fact passed to this -// Component -import PropTypes from 'prop-types' - -import { useGlobalState, MEAL_STATE } from '../GlobalState' - -/** - * The PauseModal gives the user the option to resume the robot when they are - * ready. - */ -function PauseModal(props) { - const ref = useRef(null) - const setMealState = useGlobalState((state) => state.setMealState) - - /** - * Callback function for if the user decides to cancel the bite. - * - * TODO: Think more carefully about what cancelBite at this stage should do! - * Maybe replace with a more descriptive button (e.g., "return to staging.") - */ - function priorState() { - console.log('prior state') - setMealState(MEAL_STATE.U_PreMeal) - } - return ( - <> - {/** - * TODO: - * - Center the resume button in the modal so it works for all screen widths. - * - Determine why this Modal doesn't show an x-mark whereas LiveVideoModal - * does (probably has something to do with modal content being too big?) - */} - - - ⏸️ Paused! - - -

- Resume the feeding session when you are ready. -

- - - - - - ) -} -PauseModal.propTypes = { - show: PropTypes.bool, - resumeClicked: PropTypes.func -} - -export default PauseModal diff --git a/feedingwebapp/src/Pages/Footer/BiteAcquisitionFooter.jsx b/feedingwebapp/src/Pages/Footer/BiteAcquisitionFooter.jsx deleted file mode 100644 index 17c6ba8a..00000000 --- a/feedingwebapp/src/Pages/Footer/BiteAcquisitionFooter.jsx +++ /dev/null @@ -1,48 +0,0 @@ -// React imports -import React, { useState } from 'react' -import { MDBFooter } from 'mdb-react-ui-kit' -import Button from 'react-bootstrap/Button' - -// Local imports -import PauseModal from './BiteAcquisitionPause' - -/** - * The Footer shows a pause button. When users click it, the app tells the robot - * to immediately pause and displays a model that gives them the option to resume. - */ -const Footer = () => { - // Create a local state variable for whether the robot is paused - const [pause, setPause] = useState(false) - - /** - * When the resume button is clicked, close the modal and resume robot motion. - */ - function resumeClicked() { - setPause(false) - } - - return ( - <> - {/** - * The footer has a big pause button, which shows the PauseModal when clicked. - */} - -
- { - - } -
- - - {/** - * The PauseModal toggles on and off with the Pause button and shows a - * screen where the user can resume the robot. - */} - - - ) -} - -export default Footer diff --git a/feedingwebapp/src/Pages/Footer/BiteAcquisitionPause.jsx b/feedingwebapp/src/Pages/Footer/BiteAcquisitionPause.jsx deleted file mode 100644 index a6078516..00000000 --- a/feedingwebapp/src/Pages/Footer/BiteAcquisitionPause.jsx +++ /dev/null @@ -1,84 +0,0 @@ -// React imports -import React, { useRef } from 'react' -import Button from 'react-bootstrap/Button' -// The Modal is a screen that appears on top of the main app, and can be toggled -// on and off. -import Modal from 'react-bootstrap/Modal' -// PropTypes is used to validate that the used props are in fact passed to this -// Component -import PropTypes from 'prop-types' - -import { useGlobalState, MEAL_STATE } from '../GlobalState' - -/** - * The PauseModal gives the user the option to resume the robot when they are - * ready. - */ -function PauseModal(props) { - const ref = useRef(null) - const setMealState = useGlobalState((state) => state.setMealState) - - /** - * Callback function for if the user decides to cancel the bite. - * - * TODO: Think more carefully about what cancelBite at this stage should do! - * Maybe replace with a more descriptive button (e.g., "return to staging.") - */ - function priorState() { - console.log('prior state') - setMealState(MEAL_STATE.U_BiteSelection) - } - return ( - <> - {/** - * TODO: - * - Center the resume button in the modal so it works for all screen widths. - * - Determine why this Modal doesn't show an x-mark whereas LiveVideoModal - * does (probably has something to do with modal content being too big?) - */} - - - ⏸️ Paused! - - -

- Resume the feeding session when you are ready. -

- - - - - - ) -} -PauseModal.propTypes = { - show: PropTypes.bool, - resumeClicked: PropTypes.func -} - -export default PauseModal diff --git a/feedingwebapp/src/Pages/Footer/MouthFooter.jsx b/feedingwebapp/src/Pages/Footer/MouthFooter.jsx deleted file mode 100644 index 3d4fbb4b..00000000 --- a/feedingwebapp/src/Pages/Footer/MouthFooter.jsx +++ /dev/null @@ -1,48 +0,0 @@ -// React imports -import React, { useState } from 'react' -import { MDBFooter } from 'mdb-react-ui-kit' -import Button from 'react-bootstrap/Button' - -// Local imports -import PauseModal from './MouthPause' - -/** - * The Footer shows a pause button. When users click it, the app tells the robot - * to immediately pause and displays a model that gives them the option to resume. - */ -const Footer = () => { - // Create a local state variable for whether the robot is paused - const [pause, setPause] = useState(false) - - /** - * When the resume button is clicked, close the modal and resume robot motion. - */ - function resumeClicked() { - setPause(false) - } - - return ( - <> - {/** - * The footer has a big pause button, which shows the PauseModal when clicked. - */} - -
- { - - } -
- - - {/** - * The PauseModal toggles on and off with the Pause button and shows a - * screen where the user can resume the robot. - */} - - - ) -} - -export default Footer diff --git a/feedingwebapp/src/Pages/Footer/MouthPause.jsx b/feedingwebapp/src/Pages/Footer/MouthPause.jsx deleted file mode 100644 index d3ca2363..00000000 --- a/feedingwebapp/src/Pages/Footer/MouthPause.jsx +++ /dev/null @@ -1,84 +0,0 @@ -// React imports -import React, { useRef } from 'react' -import Button from 'react-bootstrap/Button' -// The Modal is a screen that appears on top of the main app, and can be toggled -// on and off. -import Modal from 'react-bootstrap/Modal' -// PropTypes is used to validate that the used props are in fact passed to this -// Component -import PropTypes from 'prop-types' - -import { useGlobalState, MEAL_STATE } from '../GlobalState' - -/** - * The PauseModal gives the user the option to resume the robot when they are - * ready. - */ -function PauseModal(props) { - const ref = useRef(null) - const setMealState = useGlobalState((state) => state.setMealState) - - /** - * Callback function for if the user decides to cancel the bite. - * - * TODO: Think more carefully about what cancelBite at this stage should do! - * Maybe replace with a more descriptive button (e.g., "return to staging.") - */ - function priorState() { - console.log('prior state') - setMealState(MEAL_STATE.U_BiteInitiation) - } - return ( - <> - {/** - * TODO: - * - Center the resume button in the modal so it works for all screen widths. - * - Determine why this Modal doesn't show an x-mark whereas LiveVideoModal - * does (probably has something to do with modal content being too big?) - */} - - - ⏸️ Paused! - - -

- Resume the feeding session when you are ready. -

- - - - - - ) -} -PauseModal.propTypes = { - show: PropTypes.bool, - resumeClicked: PropTypes.func -} - -export default PauseModal diff --git a/feedingwebapp/src/Pages/Footer/PauseModal.jsx b/feedingwebapp/src/Pages/Footer/PauseModal.jsx index 9ab3a074..78a4b73f 100644 --- a/feedingwebapp/src/Pages/Footer/PauseModal.jsx +++ b/feedingwebapp/src/Pages/Footer/PauseModal.jsx @@ -7,6 +7,9 @@ import Modal from 'react-bootstrap/Modal' // PropTypes is used to validate that the used props are in fact passed to this // Component import PropTypes from 'prop-types' +// local imports +import { move_above_plate_dict, bite_acquistion_dict, move_to_staging_dict, move_to_mouth_dict, stow_arm_dict } from '../Constants' +import { MEAL_STATE, useGlobalState } from '../GlobalState' /** * The PauseModal gives the user the option to resume the robot when they are @@ -14,6 +17,54 @@ import PropTypes from 'prop-types' */ function PauseModal(props) { const ref = useRef(null) + var meal_state = useGlobalState((state) => state.mealState) + console.log(meal_state) + //var current_meal_state_text = feeding_dict[meal_state] + var setMealState = useGlobalState((state) => state.setMealState) + console.log(setMealState) + var prev_text = '' + var next_text = '' + var text1 = '◀️ Return to ' + var text2 = '▢️ Proeed to ' + var prev_state = null + if (meal_state == MEAL_STATE.R_MovingAbovePlate) { + prev_text = move_above_plate_dict.prev_text + next_text = move_above_plate_dict.next_text + prev_state = move_above_plate_dict.prev_state + } else if (meal_state == MEAL_STATE.R_BiteAcquisition) { + prev_text = bite_acquistion_dict.prev_text + next_text = bite_acquistion_dict.next_text + prev_state = bite_acquistion_dict.prev_state + } else if (meal_state == MEAL_STATE.R_MovingToStagingLocation) { + prev_text = move_to_staging_dict.prev_text + next_text = move_to_staging_dict.next_text + prev_state = move_to_staging_dict.prev_state + } else if (meal_state == MEAL_STATE.R_MovingToMouth) { + prev_text = move_to_mouth_dict.prev_text + next_text = move_to_mouth_dict.next_text + prev_state = move_to_mouth_dict.prev_state + } else { + // meal_state == MEAL_STATE.R_Stowing_Arm + prev_text = stow_arm_dict.prev_text + next_text = stow_arm_dict.next_text + prev_state = stow_arm_dict.prev_state + } + text1 = text1 + prev_text + text2 = text2 + next_text + console.log(text1) + console.log(text2) + console.log(prev_state) + + /** + * Callback function for if the user decides to cancel the bite. + * + * TODO: Think more carefully about what cancelBite at this stage should do! + * Maybe replace with a more descriptive button (e.g., "return to staging.") + */ + function priorState() { + console.log('prior state') + setMealState(prev_state) + } return ( <> {/** @@ -43,11 +94,19 @@ function PauseModal(props) {

+ diff --git a/feedingwebapp/src/Pages/Footer/StagingFooter.jsx b/feedingwebapp/src/Pages/Footer/StagingFooter.jsx deleted file mode 100644 index 612fa5a7..00000000 --- a/feedingwebapp/src/Pages/Footer/StagingFooter.jsx +++ /dev/null @@ -1,48 +0,0 @@ -// React imports -import React, { useState } from 'react' -import { MDBFooter } from 'mdb-react-ui-kit' -import Button from 'react-bootstrap/Button' - -// Local imports -import PauseModal from './StagingPause' - -/** - * The Footer shows a pause button. When users click it, the app tells the robot - * to immediately pause and displays a model that gives them the option to resume. - */ -const Footer = () => { - // Create a local state variable for whether the robot is paused - const [pause, setPause] = useState(false) - - /** - * When the resume button is clicked, close the modal and resume robot motion. - */ - function resumeClicked() { - setPause(false) - } - - return ( - <> - {/** - * The footer has a big pause button, which shows the PauseModal when clicked. - */} - -
- { - - } -
- - - {/** - * The PauseModal toggles on and off with the Pause button and shows a - * screen where the user can resume the robot. - */} - - - ) -} - -export default Footer diff --git a/feedingwebapp/src/Pages/Footer/StagingPause.jsx b/feedingwebapp/src/Pages/Footer/StagingPause.jsx deleted file mode 100644 index a6913cf9..00000000 --- a/feedingwebapp/src/Pages/Footer/StagingPause.jsx +++ /dev/null @@ -1,84 +0,0 @@ -// React imports -import React, { useRef } from 'react' -import Button from 'react-bootstrap/Button' -// The Modal is a screen that appears on top of the main app, and can be toggled -// on and off. -import Modal from 'react-bootstrap/Modal' -// PropTypes is used to validate that the used props are in fact passed to this -// Component -import PropTypes from 'prop-types' - -import { useGlobalState, MEAL_STATE } from '../GlobalState' - -/** - * The PauseModal gives the user the option to resume the robot when they are - * ready. - */ -function PauseModal(props) { - const ref = useRef(null) - const setMealState = useGlobalState((state) => state.setMealState) - - /** - * Callback function for if the user decides to cancel the bite. - * - * TODO: Think more carefully about what cancelBite at this stage should do! - * Maybe replace with a more descriptive button (e.g., "return to staging.") - */ - function priorState() { - console.log('prior state') - setMealState(MEAL_STATE.U_BiteAcquisitionCheck) - } - return ( - <> - {/** - * TODO: - * - Center the resume button in the modal so it works for all screen widths. - * - Determine why this Modal doesn't show an x-mark whereas LiveVideoModal - * does (probably has something to do with modal content being too big?) - */} - - - ⏸️ Paused! - - -

- Resume the feeding session when you are ready. -

- - - - - - ) -} -PauseModal.propTypes = { - show: PropTypes.bool, - resumeClicked: PropTypes.func -} - -export default PauseModal diff --git a/feedingwebapp/src/Pages/Footer/StowArmFooter.jsx b/feedingwebapp/src/Pages/Footer/StowArmFooter.jsx deleted file mode 100644 index 591d6538..00000000 --- a/feedingwebapp/src/Pages/Footer/StowArmFooter.jsx +++ /dev/null @@ -1,48 +0,0 @@ -// React imports -import React, { useState } from 'react' -import { MDBFooter } from 'mdb-react-ui-kit' -import Button from 'react-bootstrap/Button' - -// Local imports -import PauseModal from './StowArmPause' - -/** - * The Footer shows a pause button. When users click it, the app tells the robot - * to immediately pause and displays a model that gives them the option to resume. - */ -const Footer = () => { - // Create a local state variable for whether the robot is paused - const [pause, setPause] = useState(false) - - /** - * When the resume button is clicked, close the modal and resume robot motion. - */ - function resumeClicked() { - setPause(false) - } - - return ( - <> - {/** - * The footer has a big pause button, which shows the PauseModal when clicked. - */} - -
- { - - } -
- - - {/** - * The PauseModal toggles on and off with the Pause button and shows a - * screen where the user can resume the robot. - */} - - - ) -} - -export default Footer diff --git a/feedingwebapp/src/Pages/Footer/StowArmPause.jsx b/feedingwebapp/src/Pages/Footer/StowArmPause.jsx deleted file mode 100644 index 97275899..00000000 --- a/feedingwebapp/src/Pages/Footer/StowArmPause.jsx +++ /dev/null @@ -1,84 +0,0 @@ -// React imports -import React, { useRef } from 'react' -import Button from 'react-bootstrap/Button' -// The Modal is a screen that appears on top of the main app, and can be toggled -// on and off. -import Modal from 'react-bootstrap/Modal' -// PropTypes is used to validate that the used props are in fact passed to this -// Component -import PropTypes from 'prop-types' - -import { useGlobalState, MEAL_STATE } from '../GlobalState' - -/** - * The PauseModal gives the user the option to resume the robot when they are - * ready. - */ -function PauseModal(props) { - const ref = useRef(null) - const setMealState = useGlobalState((state) => state.setMealState) - - /** - * Callback function for if the user decides to cancel the bite. - * - * TODO: Think more carefully about what cancelBite at this stage should do! - * Maybe replace with a more descriptive button (e.g., "return to staging.") - */ - function priorState() { - console.log('prior state') - setMealState(MEAL_STATE.U_BiteDone) - } - return ( - <> - {/** - * TODO: - * - Center the resume button in the modal so it works for all screen widths. - * - Determine why this Modal doesn't show an x-mark whereas LiveVideoModal - * does (probably has something to do with modal content being too big?) - */} - - - ⏸️ Paused! - - -

- Resume the feeding session when you are ready. -

- - - - - - ) -} -PauseModal.propTypes = { - show: PropTypes.bool, - resumeClicked: PropTypes.func -} - -export default PauseModal diff --git a/feedingwebapp/src/Pages/Home/MealStates/BiteAcquisition.jsx b/feedingwebapp/src/Pages/Home/MealStates/BiteAcquisition.jsx index 4b4d183c..e3440bb3 100644 --- a/feedingwebapp/src/Pages/Home/MealStates/BiteAcquisition.jsx +++ b/feedingwebapp/src/Pages/Home/MealStates/BiteAcquisition.jsx @@ -7,9 +7,10 @@ import PropTypes from 'prop-types' import Row from 'react-bootstrap/Row' // Local Imports -import Footer from '../../Footer/BiteAcquisitionFooter' +import Footer from '../../Footer/Footer' import '../Home.css' import { useGlobalState, MEAL_STATE } from '../../GlobalState' +import plate from '../../../plate.svg' /** * The BiteAcquisition component tells the user that the robot is currently @@ -42,12 +43,6 @@ const BiteAcquisition = (props) => { // Render the component return ( <> - {/* Give the user the option to cancel this bite */} -
- -
{/* TODO: Consider vertically centering this element */}
@@ -63,6 +58,18 @@ const BiteAcquisition = (props) => { )}
+ {/* Give the user the option to move robot over plate*/} + + + {/** * Display the footer with the Pause button. */} diff --git a/feedingwebapp/src/Pages/Home/MealStates/MovingAbovePlate.jsx b/feedingwebapp/src/Pages/Home/MealStates/MovingAbovePlate.jsx index debb24e0..3455914d 100644 --- a/feedingwebapp/src/Pages/Home/MealStates/MovingAbovePlate.jsx +++ b/feedingwebapp/src/Pages/Home/MealStates/MovingAbovePlate.jsx @@ -7,7 +7,7 @@ import PropTypes from 'prop-types' import Row from 'react-bootstrap/Row' // Local Imports -import Footer from '../../Footer/AbovePlateFooter' +import Footer from '../../Footer/Footer' import '../Home.css' import { useGlobalState, MEAL_STATE } from '../../GlobalState' diff --git a/feedingwebapp/src/Pages/Home/MealStates/MovingToMouth.jsx b/feedingwebapp/src/Pages/Home/MealStates/MovingToMouth.jsx index 37778d4a..871b6e16 100644 --- a/feedingwebapp/src/Pages/Home/MealStates/MovingToMouth.jsx +++ b/feedingwebapp/src/Pages/Home/MealStates/MovingToMouth.jsx @@ -7,7 +7,7 @@ import PropTypes from 'prop-types' import Row from 'react-bootstrap/Row' // Local Imports -import Footer from '../../Footer/MouthFooter' +import Footer from '../../Footer/Footer' import '../Home.css' import { useGlobalState, MEAL_STATE } from '../../GlobalState' diff --git a/feedingwebapp/src/Pages/Home/MealStates/MovingToStagingLocation.jsx b/feedingwebapp/src/Pages/Home/MealStates/MovingToStagingLocation.jsx index d3cd5b2a..9b7bd4c1 100644 --- a/feedingwebapp/src/Pages/Home/MealStates/MovingToStagingLocation.jsx +++ b/feedingwebapp/src/Pages/Home/MealStates/MovingToStagingLocation.jsx @@ -7,7 +7,7 @@ import PropTypes from 'prop-types' import Row from 'react-bootstrap/Row' // Local Imports -import Footer from '../../Footer/StagingFooter' +import Footer from '../../Footer/Footer' import '../Home.css' import { useGlobalState, MEAL_STATE } from '../../GlobalState' diff --git a/feedingwebapp/src/Pages/Home/MealStates/StowingArm.jsx b/feedingwebapp/src/Pages/Home/MealStates/StowingArm.jsx index 2393e355..40383b23 100644 --- a/feedingwebapp/src/Pages/Home/MealStates/StowingArm.jsx +++ b/feedingwebapp/src/Pages/Home/MealStates/StowingArm.jsx @@ -7,7 +7,7 @@ import PropTypes from 'prop-types' import Row from 'react-bootstrap/Row' // Local Imports -import Footer from '../../Footer/StowArmFooter' +import Footer from '../../Footer/Footer' import '../Home.css' import { useGlobalState, MEAL_STATE } from '../../GlobalState' From c33318702d9a5bd52c1be7066bbef73dc688bbc2 Mon Sep 17 00:00:00 2001 From: Raida Karim Date: Sun, 30 Apr 2023 11:53:31 -0700 Subject: [PATCH 05/27] make one dictionary --- feedingwebapp/src/Pages/Constants.js | 34 ++++--------------- feedingwebapp/src/Pages/Footer/PauseModal.jsx | 34 +++++-------------- 2 files changed, 15 insertions(+), 53 deletions(-) diff --git a/feedingwebapp/src/Pages/Constants.js b/feedingwebapp/src/Pages/Constants.js index 2992ea69..04911fe3 100644 --- a/feedingwebapp/src/Pages/Constants.js +++ b/feedingwebapp/src/Pages/Constants.js @@ -5,32 +5,10 @@ import { MEAL_STATE } from './GlobalState' export const REALSENSE_WIDTH = 640 export const REALSENSE_HEIGHT = 480 -export const move_above_plate_dict = { - prev_text: 'Pre Meal', - next_text: 'Bite Selection', - prev_state: MEAL_STATE.U_PreMeal -} - -export const bite_acquistion_dict = { - prev_text: 'Bite Selection', - next_text: 'Bite Acquisition Check', - prev_state: MEAL_STATE.U_BiteSelection -} - -export const move_to_staging_dict = { - prev_text: 'Bite Acquisition Check', - next_text: 'Bite Initiation', - prev_state: MEAL_STATE.U_BiteAcquisitionCheck -} - -export const move_to_mouth_dict = { - prev_text: 'Bite Initiation', - next_text: 'Bite Done', - prev_state: MEAL_STATE.U_BiteInitiation -} - -export const stow_arm_dict = { - prev_text: 'Bite Done', - next_text: 'Post Meal', - prev_state: MEAL_STATE.U_BiteDone +export const state_dict = { + R_MovingAbovePlate: ['Pre Meal', 'Bite Selection', MEAL_STATE.U_PreMeal], + R_BiteAcquisition: ['Bite Selection', 'Bite Acquisition Check', MEAL_STATE.U_BiteSelection], + R_MovingToStagingLocation: ['Bite Acquisition Check', 'Bite Initiation', MEAL_STATE.U_BiteAcquisitionCheck], + R_MovingToMouth: ['Bite Initiation', 'Bite Done', MEAL_STATE.U_BiteInitiation], + R_StowingArm: ['Bite Done', 'Post Meal', MEAL_STATE.U_BiteDone] } diff --git a/feedingwebapp/src/Pages/Footer/PauseModal.jsx b/feedingwebapp/src/Pages/Footer/PauseModal.jsx index 78a4b73f..23334cc9 100644 --- a/feedingwebapp/src/Pages/Footer/PauseModal.jsx +++ b/feedingwebapp/src/Pages/Footer/PauseModal.jsx @@ -8,8 +8,8 @@ import Modal from 'react-bootstrap/Modal' // Component import PropTypes from 'prop-types' // local imports -import { move_above_plate_dict, bite_acquistion_dict, move_to_staging_dict, move_to_mouth_dict, stow_arm_dict } from '../Constants' -import { MEAL_STATE, useGlobalState } from '../GlobalState' +import { state_dict } from '../Constants' +import { useGlobalState } from '../GlobalState' /** * The PauseModal gives the user the option to resume the robot when they are @@ -17,9 +17,10 @@ import { MEAL_STATE, useGlobalState } from '../GlobalState' */ function PauseModal(props) { const ref = useRef(null) + // check which meal state we are currently at var meal_state = useGlobalState((state) => state.mealState) console.log(meal_state) - //var current_meal_state_text = feeding_dict[meal_state] + // function to set a meal state var setMealState = useGlobalState((state) => state.setMealState) console.log(setMealState) var prev_text = '' @@ -27,28 +28,11 @@ function PauseModal(props) { var text1 = '◀️ Return to ' var text2 = '▢️ Proeed to ' var prev_state = null - if (meal_state == MEAL_STATE.R_MovingAbovePlate) { - prev_text = move_above_plate_dict.prev_text - next_text = move_above_plate_dict.next_text - prev_state = move_above_plate_dict.prev_state - } else if (meal_state == MEAL_STATE.R_BiteAcquisition) { - prev_text = bite_acquistion_dict.prev_text - next_text = bite_acquistion_dict.next_text - prev_state = bite_acquistion_dict.prev_state - } else if (meal_state == MEAL_STATE.R_MovingToStagingLocation) { - prev_text = move_to_staging_dict.prev_text - next_text = move_to_staging_dict.next_text - prev_state = move_to_staging_dict.prev_state - } else if (meal_state == MEAL_STATE.R_MovingToMouth) { - prev_text = move_to_mouth_dict.prev_text - next_text = move_to_mouth_dict.next_text - prev_state = move_to_mouth_dict.prev_state - } else { - // meal_state == MEAL_STATE.R_Stowing_Arm - prev_text = stow_arm_dict.prev_text - next_text = stow_arm_dict.next_text - prev_state = stow_arm_dict.prev_state - } + // access current meal state info from dictionary in constants.js + var state_info_list = state_dict[meal_state] + prev_text = state_info_list[0] + next_text = state_info_list[1] + prev_state = state_info_list[2] text1 = text1 + prev_text text2 = text2 + next_text console.log(text1) From 67f7092e1fc8188d0d81de0c45b09500879ebb2e Mon Sep 17 00:00:00 2001 From: Raida Karim Date: Sun, 30 Apr 2023 11:57:22 -0700 Subject: [PATCH 06/27] small fixes --- feedingwebapp/src/Pages/Constants.js | 5 +---- feedingwebapp/src/Pages/Footer/PauseModal.jsx | 9 +++------ 2 files changed, 4 insertions(+), 10 deletions(-) diff --git a/feedingwebapp/src/Pages/Constants.js b/feedingwebapp/src/Pages/Constants.js index 04911fe3..8ccda49a 100644 --- a/feedingwebapp/src/Pages/Constants.js +++ b/feedingwebapp/src/Pages/Constants.js @@ -1,10 +1,7 @@ -// The RealSense's default video stream is 640x480 import { MEAL_STATE } from './GlobalState' -//import MovingAbovePlate from './MealStates/MovingAbovePlate' - +// The RealSense's default video stream is 640x480 export const REALSENSE_WIDTH = 640 export const REALSENSE_HEIGHT = 480 - export const state_dict = { R_MovingAbovePlate: ['Pre Meal', 'Bite Selection', MEAL_STATE.U_PreMeal], R_BiteAcquisition: ['Bite Selection', 'Bite Acquisition Check', MEAL_STATE.U_BiteSelection], diff --git a/feedingwebapp/src/Pages/Footer/PauseModal.jsx b/feedingwebapp/src/Pages/Footer/PauseModal.jsx index 23334cc9..2eee985e 100644 --- a/feedingwebapp/src/Pages/Footer/PauseModal.jsx +++ b/feedingwebapp/src/Pages/Footer/PauseModal.jsx @@ -23,16 +23,13 @@ function PauseModal(props) { // function to set a meal state var setMealState = useGlobalState((state) => state.setMealState) console.log(setMealState) - var prev_text = '' - var next_text = '' var text1 = '◀️ Return to ' var text2 = '▢️ Proeed to ' - var prev_state = null // access current meal state info from dictionary in constants.js var state_info_list = state_dict[meal_state] - prev_text = state_info_list[0] - next_text = state_info_list[1] - prev_state = state_info_list[2] + var prev_text = state_info_list[0] + var next_text = state_info_list[1] + var prev_state = state_info_list[2] text1 = text1 + prev_text text2 = text2 + next_text console.log(text1) From bb20469389fa3eabb3a8cfcbe53fc7d3a3d8a13c Mon Sep 17 00:00:00 2001 From: Raida Karim Date: Sun, 30 Apr 2023 12:08:51 -0700 Subject: [PATCH 07/27] squash and merge --- feedingwebapp/src/Pages/Constants.js | 8 ++++ feedingwebapp/src/Pages/Footer/PauseModal.jsx | 44 ++++++++++++++++++- .../Pages/Home/MealStates/BiteAcquisition.jsx | 19 +++++--- .../src/Pages/Home/MealStates/BiteDone.jsx | 20 ++++----- .../Pages/Home/MealStates/BiteInitiation.jsx | 27 +++++------- feedingwebapp/src/mouth.svg | 1 + feedingwebapp/src/plate.svg | 1 + feedingwebapp/src/staging.svg | 1 + 8 files changed, 85 insertions(+), 36 deletions(-) create mode 100644 feedingwebapp/src/mouth.svg create mode 100644 feedingwebapp/src/plate.svg create mode 100644 feedingwebapp/src/staging.svg diff --git a/feedingwebapp/src/Pages/Constants.js b/feedingwebapp/src/Pages/Constants.js index 8f078ba3..8ccda49a 100644 --- a/feedingwebapp/src/Pages/Constants.js +++ b/feedingwebapp/src/Pages/Constants.js @@ -1,3 +1,11 @@ +import { MEAL_STATE } from './GlobalState' // The RealSense's default video stream is 640x480 export const REALSENSE_WIDTH = 640 export const REALSENSE_HEIGHT = 480 +export const state_dict = { + R_MovingAbovePlate: ['Pre Meal', 'Bite Selection', MEAL_STATE.U_PreMeal], + R_BiteAcquisition: ['Bite Selection', 'Bite Acquisition Check', MEAL_STATE.U_BiteSelection], + R_MovingToStagingLocation: ['Bite Acquisition Check', 'Bite Initiation', MEAL_STATE.U_BiteAcquisitionCheck], + R_MovingToMouth: ['Bite Initiation', 'Bite Done', MEAL_STATE.U_BiteInitiation], + R_StowingArm: ['Bite Done', 'Post Meal', MEAL_STATE.U_BiteDone] +} diff --git a/feedingwebapp/src/Pages/Footer/PauseModal.jsx b/feedingwebapp/src/Pages/Footer/PauseModal.jsx index 9ab3a074..2eee985e 100644 --- a/feedingwebapp/src/Pages/Footer/PauseModal.jsx +++ b/feedingwebapp/src/Pages/Footer/PauseModal.jsx @@ -7,6 +7,9 @@ import Modal from 'react-bootstrap/Modal' // PropTypes is used to validate that the used props are in fact passed to this // Component import PropTypes from 'prop-types' +// local imports +import { state_dict } from '../Constants' +import { useGlobalState } from '../GlobalState' /** * The PauseModal gives the user the option to resume the robot when they are @@ -14,6 +17,35 @@ import PropTypes from 'prop-types' */ function PauseModal(props) { const ref = useRef(null) + // check which meal state we are currently at + var meal_state = useGlobalState((state) => state.mealState) + console.log(meal_state) + // function to set a meal state + var setMealState = useGlobalState((state) => state.setMealState) + console.log(setMealState) + var text1 = '◀️ Return to ' + var text2 = '▢️ Proeed to ' + // access current meal state info from dictionary in constants.js + var state_info_list = state_dict[meal_state] + var prev_text = state_info_list[0] + var next_text = state_info_list[1] + var prev_state = state_info_list[2] + text1 = text1 + prev_text + text2 = text2 + next_text + console.log(text1) + console.log(text2) + console.log(prev_state) + + /** + * Callback function for if the user decides to cancel the bite. + * + * TODO: Think more carefully about what cancelBite at this stage should do! + * Maybe replace with a more descriptive button (e.g., "return to staging.") + */ + function priorState() { + console.log('prior state') + setMealState(prev_state) + } return ( <> {/** @@ -43,11 +75,19 @@ function PauseModal(props) {

+ diff --git a/feedingwebapp/src/Pages/Home/MealStates/BiteAcquisition.jsx b/feedingwebapp/src/Pages/Home/MealStates/BiteAcquisition.jsx index 61f15b8c..e3440bb3 100644 --- a/feedingwebapp/src/Pages/Home/MealStates/BiteAcquisition.jsx +++ b/feedingwebapp/src/Pages/Home/MealStates/BiteAcquisition.jsx @@ -10,6 +10,7 @@ import Row from 'react-bootstrap/Row' import Footer from '../../Footer/Footer' import '../Home.css' import { useGlobalState, MEAL_STATE } from '../../GlobalState' +import plate from '../../../plate.svg' /** * The BiteAcquisition component tells the user that the robot is currently @@ -42,12 +43,6 @@ const BiteAcquisition = (props) => { // Render the component return ( <> - {/* Give the user the option to cancel this bite */} -
- -
{/* TODO: Consider vertically centering this element */}
@@ -63,6 +58,18 @@ const BiteAcquisition = (props) => { )}
+ {/* Give the user the option to move robot over plate*/} + + + {/** * Display the footer with the Pause button. */} diff --git a/feedingwebapp/src/Pages/Home/MealStates/BiteDone.jsx b/feedingwebapp/src/Pages/Home/MealStates/BiteDone.jsx index 64efea76..00e801b9 100644 --- a/feedingwebapp/src/Pages/Home/MealStates/BiteDone.jsx +++ b/feedingwebapp/src/Pages/Home/MealStates/BiteDone.jsx @@ -6,6 +6,7 @@ import Row from 'react-bootstrap/Row' // Local Imports import '../Home.css' import { useGlobalState, MEAL_STATE } from '../../GlobalState' +import staging from '../../../staging.svg' /** * The BiteDone component appears after the robot has moved to the user's mouth, @@ -38,28 +39,25 @@ const BiteDone = () => { // Render the component return (
- {/* Give the user the option to cancel this bite */} -
- -
- {/* Ask the user whether they're ready for the bite */} -

- Click the below button to indicate the completion of your bite. -

+ + {/* Give the user the option to retrun to staging position */} + + +
) } diff --git a/feedingwebapp/src/Pages/Home/MealStates/BiteInitiation.jsx b/feedingwebapp/src/Pages/Home/MealStates/BiteInitiation.jsx index 0ae6f406..afa6e75a 100644 --- a/feedingwebapp/src/Pages/Home/MealStates/BiteInitiation.jsx +++ b/feedingwebapp/src/Pages/Home/MealStates/BiteInitiation.jsx @@ -6,6 +6,8 @@ import Row from 'react-bootstrap/Row' // Local Imports import '../Home.css' import { useGlobalState, MEAL_STATE } from '../../GlobalState' +import plate from '../../../plate.svg' +import mouth from '../../../mouth.svg' /** * The BiteInitiation component appears after the robot has moved to the staging @@ -37,26 +39,17 @@ const BiteInitiation = () => { // Render the component return (
- {/* Give the user the option to cancel this bite */} -
- -
+ - {/* Ask the user whether they're ready for the bite */} -

- Click the below button when you are ready for the bite. -

+ {/* Give the user the option to move robot over plate*/} -
diff --git a/feedingwebapp/src/mouth.svg b/feedingwebapp/src/mouth.svg new file mode 100644 index 00000000..34e9b957 --- /dev/null +++ b/feedingwebapp/src/mouth.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/feedingwebapp/src/plate.svg b/feedingwebapp/src/plate.svg new file mode 100644 index 00000000..078a4b7f --- /dev/null +++ b/feedingwebapp/src/plate.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/feedingwebapp/src/staging.svg b/feedingwebapp/src/staging.svg new file mode 100644 index 00000000..c08b1b72 --- /dev/null +++ b/feedingwebapp/src/staging.svg @@ -0,0 +1 @@ + \ No newline at end of file From 639ebe840a59e4695298f4eba73a1b013d82faa7 Mon Sep 17 00:00:00 2001 From: Raida Karim Date: Sun, 30 Apr 2023 12:14:58 -0700 Subject: [PATCH 08/27] squash --- feedingwebapp/src/Pages/Constants.js | 8 ++++ feedingwebapp/src/Pages/Footer/PauseModal.jsx | 44 ++++++++++++++++++- .../Pages/Home/MealStates/BiteAcquisition.jsx | 19 +++++--- .../src/Pages/Home/MealStates/BiteDone.jsx | 20 ++++----- .../Pages/Home/MealStates/BiteInitiation.jsx | 27 +++++------- feedingwebapp/src/mouth.svg | 1 + feedingwebapp/src/plate.svg | 1 + feedingwebapp/src/staging.svg | 1 + 8 files changed, 85 insertions(+), 36 deletions(-) create mode 100644 feedingwebapp/src/mouth.svg create mode 100644 feedingwebapp/src/plate.svg create mode 100644 feedingwebapp/src/staging.svg diff --git a/feedingwebapp/src/Pages/Constants.js b/feedingwebapp/src/Pages/Constants.js index 8f078ba3..8ccda49a 100644 --- a/feedingwebapp/src/Pages/Constants.js +++ b/feedingwebapp/src/Pages/Constants.js @@ -1,3 +1,11 @@ +import { MEAL_STATE } from './GlobalState' // The RealSense's default video stream is 640x480 export const REALSENSE_WIDTH = 640 export const REALSENSE_HEIGHT = 480 +export const state_dict = { + R_MovingAbovePlate: ['Pre Meal', 'Bite Selection', MEAL_STATE.U_PreMeal], + R_BiteAcquisition: ['Bite Selection', 'Bite Acquisition Check', MEAL_STATE.U_BiteSelection], + R_MovingToStagingLocation: ['Bite Acquisition Check', 'Bite Initiation', MEAL_STATE.U_BiteAcquisitionCheck], + R_MovingToMouth: ['Bite Initiation', 'Bite Done', MEAL_STATE.U_BiteInitiation], + R_StowingArm: ['Bite Done', 'Post Meal', MEAL_STATE.U_BiteDone] +} diff --git a/feedingwebapp/src/Pages/Footer/PauseModal.jsx b/feedingwebapp/src/Pages/Footer/PauseModal.jsx index 9ab3a074..2eee985e 100644 --- a/feedingwebapp/src/Pages/Footer/PauseModal.jsx +++ b/feedingwebapp/src/Pages/Footer/PauseModal.jsx @@ -7,6 +7,9 @@ import Modal from 'react-bootstrap/Modal' // PropTypes is used to validate that the used props are in fact passed to this // Component import PropTypes from 'prop-types' +// local imports +import { state_dict } from '../Constants' +import { useGlobalState } from '../GlobalState' /** * The PauseModal gives the user the option to resume the robot when they are @@ -14,6 +17,35 @@ import PropTypes from 'prop-types' */ function PauseModal(props) { const ref = useRef(null) + // check which meal state we are currently at + var meal_state = useGlobalState((state) => state.mealState) + console.log(meal_state) + // function to set a meal state + var setMealState = useGlobalState((state) => state.setMealState) + console.log(setMealState) + var text1 = '◀️ Return to ' + var text2 = '▢️ Proeed to ' + // access current meal state info from dictionary in constants.js + var state_info_list = state_dict[meal_state] + var prev_text = state_info_list[0] + var next_text = state_info_list[1] + var prev_state = state_info_list[2] + text1 = text1 + prev_text + text2 = text2 + next_text + console.log(text1) + console.log(text2) + console.log(prev_state) + + /** + * Callback function for if the user decides to cancel the bite. + * + * TODO: Think more carefully about what cancelBite at this stage should do! + * Maybe replace with a more descriptive button (e.g., "return to staging.") + */ + function priorState() { + console.log('prior state') + setMealState(prev_state) + } return ( <> {/** @@ -43,11 +75,19 @@ function PauseModal(props) {

+ diff --git a/feedingwebapp/src/Pages/Home/MealStates/BiteAcquisition.jsx b/feedingwebapp/src/Pages/Home/MealStates/BiteAcquisition.jsx index 61f15b8c..e3440bb3 100644 --- a/feedingwebapp/src/Pages/Home/MealStates/BiteAcquisition.jsx +++ b/feedingwebapp/src/Pages/Home/MealStates/BiteAcquisition.jsx @@ -10,6 +10,7 @@ import Row from 'react-bootstrap/Row' import Footer from '../../Footer/Footer' import '../Home.css' import { useGlobalState, MEAL_STATE } from '../../GlobalState' +import plate from '../../../plate.svg' /** * The BiteAcquisition component tells the user that the robot is currently @@ -42,12 +43,6 @@ const BiteAcquisition = (props) => { // Render the component return ( <> - {/* Give the user the option to cancel this bite */} -
- -
{/* TODO: Consider vertically centering this element */}
@@ -63,6 +58,18 @@ const BiteAcquisition = (props) => { )}
+ {/* Give the user the option to move robot over plate*/} + + + {/** * Display the footer with the Pause button. */} diff --git a/feedingwebapp/src/Pages/Home/MealStates/BiteDone.jsx b/feedingwebapp/src/Pages/Home/MealStates/BiteDone.jsx index 64efea76..00e801b9 100644 --- a/feedingwebapp/src/Pages/Home/MealStates/BiteDone.jsx +++ b/feedingwebapp/src/Pages/Home/MealStates/BiteDone.jsx @@ -6,6 +6,7 @@ import Row from 'react-bootstrap/Row' // Local Imports import '../Home.css' import { useGlobalState, MEAL_STATE } from '../../GlobalState' +import staging from '../../../staging.svg' /** * The BiteDone component appears after the robot has moved to the user's mouth, @@ -38,28 +39,25 @@ const BiteDone = () => { // Render the component return (
- {/* Give the user the option to cancel this bite */} -
- -
- {/* Ask the user whether they're ready for the bite */} -

- Click the below button to indicate the completion of your bite. -

+ + {/* Give the user the option to retrun to staging position */} + + +
) } diff --git a/feedingwebapp/src/Pages/Home/MealStates/BiteInitiation.jsx b/feedingwebapp/src/Pages/Home/MealStates/BiteInitiation.jsx index 0ae6f406..afa6e75a 100644 --- a/feedingwebapp/src/Pages/Home/MealStates/BiteInitiation.jsx +++ b/feedingwebapp/src/Pages/Home/MealStates/BiteInitiation.jsx @@ -6,6 +6,8 @@ import Row from 'react-bootstrap/Row' // Local Imports import '../Home.css' import { useGlobalState, MEAL_STATE } from '../../GlobalState' +import plate from '../../../plate.svg' +import mouth from '../../../mouth.svg' /** * The BiteInitiation component appears after the robot has moved to the staging @@ -37,26 +39,17 @@ const BiteInitiation = () => { // Render the component return (
- {/* Give the user the option to cancel this bite */} -
- -
+ - {/* Ask the user whether they're ready for the bite */} -

- Click the below button when you are ready for the bite. -

+ {/* Give the user the option to move robot over plate*/} -
diff --git a/feedingwebapp/src/mouth.svg b/feedingwebapp/src/mouth.svg new file mode 100644 index 00000000..34e9b957 --- /dev/null +++ b/feedingwebapp/src/mouth.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/feedingwebapp/src/plate.svg b/feedingwebapp/src/plate.svg new file mode 100644 index 00000000..078a4b7f --- /dev/null +++ b/feedingwebapp/src/plate.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/feedingwebapp/src/staging.svg b/feedingwebapp/src/staging.svg new file mode 100644 index 00000000..c08b1b72 --- /dev/null +++ b/feedingwebapp/src/staging.svg @@ -0,0 +1 @@ + \ No newline at end of file From 11e409733f2e5378e2fef4a172e4a2e93822ebb3 Mon Sep 17 00:00:00 2001 From: Raida Karim Date: Mon, 1 May 2023 14:17:33 -0700 Subject: [PATCH 09/27] updated changes for PR comments --- feedingwebapp/src/Pages/Constants.js | 9 +++- feedingwebapp/src/Pages/Footer/PauseModal.jsx | 40 +++++++---------- .../Pages/Home/MealStates/BiteAcquisition.jsx | 19 ++++---- .../src/Pages/Home/MealStates/BiteDone.jsx | 45 ++++++++++++------- .../Pages/Home/MealStates/BiteInitiation.jsx | 43 ++++++++++++------ .../robot_state_imgs/above_plate_position.svg | 1 + .../move_to_mouth_position.svg | 1 + .../move_to_staging_position.svg | 1 + feedingwebapp/src/mouth.svg | 1 - feedingwebapp/src/plate.svg | 1 - feedingwebapp/src/staging.svg | 1 - 11 files changed, 96 insertions(+), 66 deletions(-) create mode 100644 feedingwebapp/src/Pages/Home/robot_state_imgs/above_plate_position.svg create mode 100644 feedingwebapp/src/Pages/Home/robot_state_imgs/move_to_mouth_position.svg create mode 100644 feedingwebapp/src/Pages/Home/robot_state_imgs/move_to_staging_position.svg delete mode 100644 feedingwebapp/src/mouth.svg delete mode 100644 feedingwebapp/src/plate.svg delete mode 100644 feedingwebapp/src/staging.svg diff --git a/feedingwebapp/src/Pages/Constants.js b/feedingwebapp/src/Pages/Constants.js index 8ccda49a..ad82cb76 100644 --- a/feedingwebapp/src/Pages/Constants.js +++ b/feedingwebapp/src/Pages/Constants.js @@ -2,7 +2,14 @@ import { MEAL_STATE } from './GlobalState' // The RealSense's default video stream is 640x480 export const REALSENSE_WIDTH = 640 export const REALSENSE_HEIGHT = 480 -export const state_dict = { +/** + * A dictionary containing information for the meal states where the robot moves. + * The meal states are used as keys. + * Each key is paired with a value of an array that has 3 elements in it. + * First 2 array elements contain the text used in pause modal for previous and next meal state of current meal state. + * The 3rd array element contains the previous meal state of current meal state. + */ +export const pause_modal_state_info_dict = { R_MovingAbovePlate: ['Pre Meal', 'Bite Selection', MEAL_STATE.U_PreMeal], R_BiteAcquisition: ['Bite Selection', 'Bite Acquisition Check', MEAL_STATE.U_BiteSelection], R_MovingToStagingLocation: ['Bite Acquisition Check', 'Bite Initiation', MEAL_STATE.U_BiteAcquisitionCheck], diff --git a/feedingwebapp/src/Pages/Footer/PauseModal.jsx b/feedingwebapp/src/Pages/Footer/PauseModal.jsx index 2eee985e..4b2c329b 100644 --- a/feedingwebapp/src/Pages/Footer/PauseModal.jsx +++ b/feedingwebapp/src/Pages/Footer/PauseModal.jsx @@ -8,7 +8,7 @@ import Modal from 'react-bootstrap/Modal' // Component import PropTypes from 'prop-types' // local imports -import { state_dict } from '../Constants' +import { pause_modal_state_info_dict } from '../Constants' import { useGlobalState } from '../GlobalState' /** @@ -19,32 +19,24 @@ function PauseModal(props) { const ref = useRef(null) // check which meal state we are currently at var meal_state = useGlobalState((state) => state.mealState) - console.log(meal_state) // function to set a meal state var setMealState = useGlobalState((state) => state.setMealState) - console.log(setMealState) - var text1 = '◀️ Return to ' - var text2 = '▢️ Proeed to ' + var return_text = '◀️ Return to ' + var proceed_text = '▢️ Proceed to ' // access current meal state info from dictionary in constants.js - var state_info_list = state_dict[meal_state] - var prev_text = state_info_list[0] - var next_text = state_info_list[1] - var prev_state = state_info_list[2] - text1 = text1 + prev_text - text2 = text2 + next_text - console.log(text1) - console.log(text2) - console.log(prev_state) + var state_info_list = pause_modal_state_info_dict[meal_state] + var prev_text_from_dict = state_info_list[0] + var next_text_from_dict = state_info_list[1] + var prev_state_from_dict = state_info_list[2] + return_text = return_text + prev_text_from_dict + proceed_text = proceed_text + next_text_from_dict /** - * Callback function for if the user decides to cancel the bite. - * - * TODO: Think more carefully about what cancelBite at this stage should do! - * Maybe replace with a more descriptive button (e.g., "return to staging.") + * Function to return to previous meal state from the current + * meal state, if user selects "Return to....." option in the pause modal. */ - function priorState() { - console.log('prior state') - setMealState(prev_state) + function returnButtonCallback() { + setMealState(prev_state_from_dict) } return ( <> @@ -77,9 +69,9 @@ function PauseModal(props) { className='bg-warning rounded btn-hugeE' style={{ fontSize: '35px', marginLeft: '8%', fontWeight: 'bold', marginBottom: '8%' }} size='lg' - onClick={priorState} + onClick={returnButtonCallback} > - {text1} + {return_text} diff --git a/feedingwebapp/src/Pages/Home/MealStates/BiteAcquisition.jsx b/feedingwebapp/src/Pages/Home/MealStates/BiteAcquisition.jsx index e3440bb3..46372470 100644 --- a/feedingwebapp/src/Pages/Home/MealStates/BiteAcquisition.jsx +++ b/feedingwebapp/src/Pages/Home/MealStates/BiteAcquisition.jsx @@ -10,7 +10,7 @@ import Row from 'react-bootstrap/Row' import Footer from '../../Footer/Footer' import '../Home.css' import { useGlobalState, MEAL_STATE } from '../../GlobalState' -import plate from '../../../plate.svg' +import above_plate_position_img from '../robot_state_imgs/above_plate_position.svg' /** * The BiteAcquisition component tells the user that the robot is currently @@ -27,8 +27,7 @@ const BiteAcquisition = (props) => { /** * Callback function for if the user decides to cancel the bite. */ - function cancelBite() { - console.log('cancelBite') + function moveAbovePlate() { setMealState(MEAL_STATE.R_MovingAbovePlate) } @@ -57,17 +56,21 @@ const BiteAcquisition = (props) => { <> )}
+ {/* Ask the user whether they want to move to above plate position */} +

+ Move to above plate position. +

+ {/* Icon to move above plate */} - {/* Give the user the option to move robot over plate*/} {/** diff --git a/feedingwebapp/src/Pages/Home/MealStates/BiteDone.jsx b/feedingwebapp/src/Pages/Home/MealStates/BiteDone.jsx index 00e801b9..5a6b2a46 100644 --- a/feedingwebapp/src/Pages/Home/MealStates/BiteDone.jsx +++ b/feedingwebapp/src/Pages/Home/MealStates/BiteDone.jsx @@ -6,7 +6,8 @@ import Row from 'react-bootstrap/Row' // Local Imports import '../Home.css' import { useGlobalState, MEAL_STATE } from '../../GlobalState' -import staging from '../../../staging.svg' +import move_to_staging_position_img from '../robot_state_imgs/move_to_staging_position.svg' +import above_plate_position_img from '../robot_state_imgs/above_plate_position.svg' /** * The BiteDone component appears after the robot has moved to the user's mouth, @@ -18,44 +19,54 @@ const BiteDone = () => { const setMealState = useGlobalState((state) => state.setMealState) /** - * Callback function for when the user is done with their bite. + * Callback function for when the user wants to move above plate. */ - function doneWithBite() { - console.log('readyForBite') + function moveAbovePlate() { setMealState(MEAL_STATE.R_MovingAbovePlate) } /** - * Callback function for if the user decides to cancel the bite. + * Callback function for if the user decides to move to staging position. * - * TODO: Think more carefully about what cancelBite at this stage should do! - * Maybe replace with a more descriptive button (e.g., "return to staging.") */ - function cancelBite() { - console.log('cancelBite') + function moveToStagingPosition() { setMealState(MEAL_STATE.R_MovingToStagingLocation) } // Render the component return (
- {/* Ask the user whether they're ready for the bite */} + {/* Ask the user whether they want to move to above plate position */} +

+ Move to above plate position. +

+ {/* Icon to move above plate */} - {/* Give the user the option to retrun to staging position */} + {/* Ask the user whether they want to move to staging position */} +

+ Move to staging position. +

+ {/* Icon to move to staging position */} -
diff --git a/feedingwebapp/src/Pages/Home/MealStates/BiteInitiation.jsx b/feedingwebapp/src/Pages/Home/MealStates/BiteInitiation.jsx index afa6e75a..575e893b 100644 --- a/feedingwebapp/src/Pages/Home/MealStates/BiteInitiation.jsx +++ b/feedingwebapp/src/Pages/Home/MealStates/BiteInitiation.jsx @@ -6,8 +6,8 @@ import Row from 'react-bootstrap/Row' // Local Imports import '../Home.css' import { useGlobalState, MEAL_STATE } from '../../GlobalState' -import plate from '../../../plate.svg' -import mouth from '../../../mouth.svg' +import above_plate_position_img from '../robot_state_imgs/above_plate_position.svg' +import move_to_mouth_position_img from '../robot_state_imgs/move_to_mouth_position.svg' /** * The BiteInitiation component appears after the robot has moved to the staging @@ -21,35 +21,52 @@ const BiteInitiation = () => { * Callback function for when the user is ready for their bite. */ function readyForBite() { - console.log('readyForBite') setMealState(MEAL_STATE.R_MovingToMouth) } /** - * Callback function for if the user decides to cancel the bite. - * - * TODO: Think more carefully about what cancelBite at this stage should do! - * Maybe replace with a more descriptive button (e.g., "return above plate.") + * Callback function for when the user wants to move above plate. */ - function cancelBite() { - console.log('cancelBite') + function moveAbovePlate() { setMealState(MEAL_STATE.R_MovingAbovePlate) } // Render the component return (
+ {/* Ask the user whether they want to move to mouth position */} +

+ Move to mouth position. +

+ {/* Icon to move to mouth */} {/* Ask the user whether they're ready for the bite */} - + {/* Ask the user whether they want to move to above plate position */} +

+ Move to above plate position. +

+ {/* Icon to move above plate */} {/* Give the user the option to move robot over plate*/} -
diff --git a/feedingwebapp/src/Pages/Home/robot_state_imgs/above_plate_position.svg b/feedingwebapp/src/Pages/Home/robot_state_imgs/above_plate_position.svg new file mode 100644 index 00000000..52fabc57 --- /dev/null +++ b/feedingwebapp/src/Pages/Home/robot_state_imgs/above_plate_position.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/feedingwebapp/src/Pages/Home/robot_state_imgs/move_to_mouth_position.svg b/feedingwebapp/src/Pages/Home/robot_state_imgs/move_to_mouth_position.svg new file mode 100644 index 00000000..fb8994a5 --- /dev/null +++ b/feedingwebapp/src/Pages/Home/robot_state_imgs/move_to_mouth_position.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/feedingwebapp/src/Pages/Home/robot_state_imgs/move_to_staging_position.svg b/feedingwebapp/src/Pages/Home/robot_state_imgs/move_to_staging_position.svg new file mode 100644 index 00000000..edea1332 --- /dev/null +++ b/feedingwebapp/src/Pages/Home/robot_state_imgs/move_to_staging_position.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/feedingwebapp/src/mouth.svg b/feedingwebapp/src/mouth.svg deleted file mode 100644 index 34e9b957..00000000 --- a/feedingwebapp/src/mouth.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/feedingwebapp/src/plate.svg b/feedingwebapp/src/plate.svg deleted file mode 100644 index 078a4b7f..00000000 --- a/feedingwebapp/src/plate.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/feedingwebapp/src/staging.svg b/feedingwebapp/src/staging.svg deleted file mode 100644 index c08b1b72..00000000 --- a/feedingwebapp/src/staging.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file From aa732a17247f290c216ad6cb2ca860d3d6b0973a Mon Sep 17 00:00:00 2001 From: Raida Karim Date: Tue, 2 May 2023 15:38:57 -0700 Subject: [PATCH 10/27] transparent icons --- .../move_above_plate_position.svg | 1 + .../move_to_mouth_position.svg | 1 + .../move_to_staging_position.svg | 1 + .../Pages/Home/MealStates/BiteAcquisition.jsx | 7 +++--- .../src/Pages/Home/MealStates/BiteDone.jsx | 12 ++++------ .../Pages/Home/MealStates/BiteInitiation.jsx | 12 ++++------ .../Pages/Home/MealStates/BiteSelection.jsx | 24 +++++++++++++++++-- .../Pages/Home/MealStates/MovingToMouth.jsx | 24 +++++++++++++++++++ .../MealStates/MovingToStagingLocation.jsx | 23 ++++++++++++++++++ .../robot_state_imgs/above_plate_position.svg | 1 - .../move_to_mouth_position.svg | 1 - .../move_to_staging_position.svg | 1 - 12 files changed, 85 insertions(+), 23 deletions(-) create mode 100644 feedingwebapp/public/robot_state_imgs/move_above_plate_position.svg create mode 100644 feedingwebapp/public/robot_state_imgs/move_to_mouth_position.svg create mode 100644 feedingwebapp/public/robot_state_imgs/move_to_staging_position.svg delete mode 100644 feedingwebapp/src/Pages/Home/robot_state_imgs/above_plate_position.svg delete mode 100644 feedingwebapp/src/Pages/Home/robot_state_imgs/move_to_mouth_position.svg delete mode 100644 feedingwebapp/src/Pages/Home/robot_state_imgs/move_to_staging_position.svg diff --git a/feedingwebapp/public/robot_state_imgs/move_above_plate_position.svg b/feedingwebapp/public/robot_state_imgs/move_above_plate_position.svg new file mode 100644 index 00000000..c91c371c --- /dev/null +++ b/feedingwebapp/public/robot_state_imgs/move_above_plate_position.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/feedingwebapp/public/robot_state_imgs/move_to_mouth_position.svg b/feedingwebapp/public/robot_state_imgs/move_to_mouth_position.svg new file mode 100644 index 00000000..32955f1b --- /dev/null +++ b/feedingwebapp/public/robot_state_imgs/move_to_mouth_position.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/feedingwebapp/public/robot_state_imgs/move_to_staging_position.svg b/feedingwebapp/public/robot_state_imgs/move_to_staging_position.svg new file mode 100644 index 00000000..34b357ea --- /dev/null +++ b/feedingwebapp/public/robot_state_imgs/move_to_staging_position.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/feedingwebapp/src/Pages/Home/MealStates/BiteAcquisition.jsx b/feedingwebapp/src/Pages/Home/MealStates/BiteAcquisition.jsx index 46372470..2c9fca68 100644 --- a/feedingwebapp/src/Pages/Home/MealStates/BiteAcquisition.jsx +++ b/feedingwebapp/src/Pages/Home/MealStates/BiteAcquisition.jsx @@ -10,7 +10,6 @@ import Row from 'react-bootstrap/Row' import Footer from '../../Footer/Footer' import '../Home.css' import { useGlobalState, MEAL_STATE } from '../../GlobalState' -import above_plate_position_img from '../robot_state_imgs/above_plate_position.svg' /** * The BiteAcquisition component tells the user that the robot is currently @@ -58,19 +57,19 @@ const BiteAcquisition = (props) => {
{/* Ask the user whether they want to move to above plate position */}

- Move to above plate position. + Cancel bite? Move above plate.

{/* Icon to move above plate */} {/** diff --git a/feedingwebapp/src/Pages/Home/MealStates/BiteDone.jsx b/feedingwebapp/src/Pages/Home/MealStates/BiteDone.jsx index 5a6b2a46..e0bbb2aa 100644 --- a/feedingwebapp/src/Pages/Home/MealStates/BiteDone.jsx +++ b/feedingwebapp/src/Pages/Home/MealStates/BiteDone.jsx @@ -6,8 +6,6 @@ import Row from 'react-bootstrap/Row' // Local Imports import '../Home.css' import { useGlobalState, MEAL_STATE } from '../../GlobalState' -import move_to_staging_position_img from '../robot_state_imgs/move_to_staging_position.svg' -import above_plate_position_img from '../robot_state_imgs/above_plate_position.svg' /** * The BiteDone component appears after the robot has moved to the user's mouth, @@ -38,24 +36,24 @@ const BiteDone = () => {
{/* Ask the user whether they want to move to above plate position */}

- Move to above plate position. + Finished bite? Move above plate.

{/* Icon to move above plate */} {/* Ask the user whether they want to move to staging position */}

- Move to staging position. + Cancel bite? Move to staging.

{/* Icon to move to staging position */} @@ -66,7 +64,7 @@ const BiteDone = () => { onClick={moveToStagingPosition} style={{ width: '200px', height: '130px' }} > - + move_to_staging_image
diff --git a/feedingwebapp/src/Pages/Home/MealStates/BiteInitiation.jsx b/feedingwebapp/src/Pages/Home/MealStates/BiteInitiation.jsx index 575e893b..93556d74 100644 --- a/feedingwebapp/src/Pages/Home/MealStates/BiteInitiation.jsx +++ b/feedingwebapp/src/Pages/Home/MealStates/BiteInitiation.jsx @@ -6,8 +6,6 @@ import Row from 'react-bootstrap/Row' // Local Imports import '../Home.css' import { useGlobalState, MEAL_STATE } from '../../GlobalState' -import above_plate_position_img from '../robot_state_imgs/above_plate_position.svg' -import move_to_mouth_position_img from '../robot_state_imgs/move_to_mouth_position.svg' /** * The BiteInitiation component appears after the robot has moved to the staging @@ -36,7 +34,7 @@ const BiteInitiation = () => {
{/* Ask the user whether they want to move to mouth position */}

- Move to mouth position. + Ready for bite? Move to mouth.

{/* Icon to move to mouth */} {/* Ask the user whether they're ready for the bite */} @@ -48,25 +46,25 @@ const BiteInitiation = () => { onClick={readyForBite} style={{ width: '200px', height: '130px' }} > - + move_to_mouth_image {/* Ask the user whether they want to move to above plate position */}

- Move to above plate position. + Cancel bite? Move above plate.

{/* Icon to move above plate */} {/* Give the user the option to move robot over plate*/}
diff --git a/feedingwebapp/src/Pages/Home/MealStates/BiteSelection.jsx b/feedingwebapp/src/Pages/Home/MealStates/BiteSelection.jsx index e3c16ea6..f6c9e45c 100644 --- a/feedingwebapp/src/Pages/Home/MealStates/BiteSelection.jsx +++ b/feedingwebapp/src/Pages/Home/MealStates/BiteSelection.jsx @@ -6,6 +6,8 @@ import Row from 'react-bootstrap/Row' // Local Imports import '../Home.css' import { useGlobalState, MEAL_STATE } from '../../GlobalState' +import { REALSENSE_WIDTH, REALSENSE_HEIGHT } from '../../Constants' +import { convertRemToPixels, scaleWidthHeightToWindow } from '../../../helpers' // TODO: Replace the list of items with a view of the camera feed that the user // can click on. @@ -48,9 +50,27 @@ const BiteSelection = () => { setMealState(MEAL_STATE.R_BiteAcquisition) } + // Get the size of the robot's live video stream. + const margin = convertRemToPixels(1) + let { width, height } = scaleWidthHeightToWindow(REALSENSE_WIDTH, REALSENSE_HEIGHT, margin, margin, margin, margin) + // Render the component return ( - <> +
+ {/** + * Display the live stream from the robot's camera. + */} +
+