From a056263bfa77dacd73a67e5e6fef6a8318f8ea3d Mon Sep 17 00:00:00 2001 From: Raida Karim Date: Tue, 30 May 2023 15:49:59 +0000 Subject: [PATCH 01/81] add to PR template --- feedingwebapp/src/Pages/Home/MealStates/PlateLocator.jsx | 1 + 1 file changed, 1 insertion(+) diff --git a/feedingwebapp/src/Pages/Home/MealStates/PlateLocator.jsx b/feedingwebapp/src/Pages/Home/MealStates/PlateLocator.jsx index 49f2b7fb..261cb324 100644 --- a/feedingwebapp/src/Pages/Home/MealStates/PlateLocator.jsx +++ b/feedingwebapp/src/Pages/Home/MealStates/PlateLocator.jsx @@ -68,6 +68,7 @@ const PlateLocator = (props) => { * * TODO: The values for margins should not be hardcoded. Bootstrap's * grid should be able to get alignment without fine-tuning of margins. + * add grid */}
From 6a6b4343f8892ca37c498d36ce92382dc452f504 Mon Sep 17 00:00:00 2001 From: Raida Karim Date: Tue, 30 May 2023 19:22:58 +0000 Subject: [PATCH 02/81] add new .md --- feedingwebapp/ResponsivenessTesting.md | 40 ++++++++++++++++++++++++++ 1 file changed, 40 insertions(+) create mode 100644 feedingwebapp/ResponsivenessTesting.md diff --git a/feedingwebapp/ResponsivenessTesting.md b/feedingwebapp/ResponsivenessTesting.md new file mode 100644 index 00000000..ec796367 --- /dev/null +++ b/feedingwebapp/ResponsivenessTesting.md @@ -0,0 +1,40 @@ +# Methodology for Testing Responsiveness + +After developing an app feature, make sure to test it on the following setups. + +For the smartphone and laptops, test on the 4 browsers specified below. For the tablet and monitor, pick one browser to test it on. + +In total, you will run 18 tests (4 browsers * 1 smartphone + 1 tablet + 4 browsers * 3 laptops + 1 monitor). + +If you don’t have the listed devices available for testing, please “Add custom device” in your browser’s responsive design mode using the width and height of the specific device’s resolution below. Please a link in the Resources section at the bottom for each browser's documentation on how to do this. + +## Devices: +(Total 6 as listed below) +#### 1 Smartphone: iPhone 14 Plus [Tyler]; Width: 428 & Height: 926 +#### 1 Tablet: iPad Pro (6th gen 12.9") [Tyler]; Width: 1024 & Height: 1366 +#### 1 External Monitor: Width: 4096 & Height: 2304 +#### 3 Laptop: Width: 2560 & Height: 1600 +- Full-screen +- Half-screen (vertical split) +- Quarter screen. + +## Browsers: +Chrome, Firefox, Edge, Safari + +## Screen Orientation (for smartphone and tablet only): +Landscape and portrait + +In portrait, pages should have their content appear on one screen and not require scrolling. In landscape, scrolling may be unavoidable for some screens, but try to rearrange the content horizontally in order to minimize required scrolling. + + +## Resources: +1. https://www.ios-resolution.com/ +2. https://support.apple.com/kb/SP748?locale=en_US +3. Adding custom device in Chrome: https://developer.chrome.com/blog/add-a-new-custom-device-as-a-preset/ +4. Adding custom device in Edge: https://learn.microsoft.com/en-us/microsoft-edge/devtools-guide-chromium/device-mode/ +5. Adding custom device in Firefox: +https://firefox-source-docs.mozilla.org/devtools-user/responsive_design_mode/#creating-custom-devices +6. Adding custom device in safari: https://developer.apple.com/forums/thread/650901 + + + From 957ebd3193728d26db692867d7df774befa7c951 Mon Sep 17 00:00:00 2001 From: Raida Karim Date: Tue, 30 May 2023 19:30:13 +0000 Subject: [PATCH 03/81] add md link --- .github/PULL_REQUEST_TEMPLATE.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.github/PULL_REQUEST_TEMPLATE.md b/.github/PULL_REQUEST_TEMPLATE.md index 388a2494..f5bc7284 100644 --- a/.github/PULL_REQUEST_TEMPLATE.md +++ b/.github/PULL_REQUEST_TEMPLATE.md @@ -13,7 +13,7 @@ - [ ] Format React code with `npm run format` - [ ] Format Python code by running `python3 -m black .` in the top-level of this repository - [ ] Thoroughly test your code's functionality, including unintended uses. -- [ ] Thoroughly test your code's responsiveness by rendering it on different devices, browsers, etc. +- [ ] Fully test the responsiveness of the feature as documented in the [Responsiveness Testing Guidelines](https://github.com/personalrobotics/feeding_web_interface/blob/main/feedingwebapp/ResponsivenessTesting.md). If you deviate from those guidelines, document above why you deviated and what you did instead. - [ ] Consider the user flow between states that this feature introduces, consider different situations that might occur for the user, and ensure that there is no way for the user to get stuck in a loop. **Before merging a pull request** From 32a911be1ce1159bcc1181ddeb09192a936059cf Mon Sep 17 00:00:00 2001 From: Raida Karim Date: Tue, 30 May 2023 19:31:54 +0000 Subject: [PATCH 04/81] undo --- feedingwebapp/src/Pages/Home/MealStates/PlateLocator.jsx | 1 - 1 file changed, 1 deletion(-) diff --git a/feedingwebapp/src/Pages/Home/MealStates/PlateLocator.jsx b/feedingwebapp/src/Pages/Home/MealStates/PlateLocator.jsx index 261cb324..49f2b7fb 100644 --- a/feedingwebapp/src/Pages/Home/MealStates/PlateLocator.jsx +++ b/feedingwebapp/src/Pages/Home/MealStates/PlateLocator.jsx @@ -68,7 +68,6 @@ const PlateLocator = (props) => { * * TODO: The values for margins should not be hardcoded. Bootstrap's * grid should be able to get alignment without fine-tuning of margins. - * add grid */}
From 89310b12cd499e8e14665d90b3f7ae8597213eb1 Mon Sep 17 00:00:00 2001 From: Raida Karim <40337145+Raidakarim@users.noreply.github.com> Date: Tue, 30 May 2023 14:42:08 -0700 Subject: [PATCH 05/81] Update ResponsivenessTesting.md --- feedingwebapp/ResponsivenessTesting.md | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/feedingwebapp/ResponsivenessTesting.md b/feedingwebapp/ResponsivenessTesting.md index ec796367..72d1d382 100644 --- a/feedingwebapp/ResponsivenessTesting.md +++ b/feedingwebapp/ResponsivenessTesting.md @@ -10,13 +10,13 @@ If you don’t have the listed devices available for testing, please “Add cust ## Devices: (Total 6 as listed below) -#### 1 Smartphone: iPhone 14 Plus [Tyler]; Width: 428 & Height: 926 -#### 1 Tablet: iPad Pro (6th gen 12.9") [Tyler]; Width: 1024 & Height: 1366 -#### 1 External Monitor: Width: 4096 & Height: 2304 -#### 3 Laptop: Width: 2560 & Height: 1600 -- Full-screen -- Half-screen (vertical split) -- Quarter screen. +- 1 Smartphone: iPhone 14 Plus [Tyler]; Width: 428 & Height: 926 +- 1 Tablet: iPad Pro (6th gen 12.9") [Tyler]; Width: 1024 & Height: 1366 +- 1 External Monitor: Width: 4096 & Height: 2304 +- 3 Laptop: Width: 2560 & Height: 1600 + - Full-screen + - Half-screen (vertical split) + - Quarter screen. ## Browsers: Chrome, Firefox, Edge, Safari From 07b74a66e0751ccad8a3546ef5d21f2fbfe065d8 Mon Sep 17 00:00:00 2001 From: Raida Karim Date: Tue, 30 May 2023 22:48:10 +0000 Subject: [PATCH 06/81] update md file --- feedingwebapp/ResponsivenessTesting.md | 14 ++++++-------- 1 file changed, 6 insertions(+), 8 deletions(-) diff --git a/feedingwebapp/ResponsivenessTesting.md b/feedingwebapp/ResponsivenessTesting.md index 72d1d382..f918f3ac 100644 --- a/feedingwebapp/ResponsivenessTesting.md +++ b/feedingwebapp/ResponsivenessTesting.md @@ -6,14 +6,14 @@ For the smartphone and laptops, test on the 4 browsers specified below. For the In total, you will run 18 tests (4 browsers * 1 smartphone + 1 tablet + 4 browsers * 3 laptops + 1 monitor). -If you don’t have the listed devices available for testing, please “Add custom device” in your browser’s responsive design mode using the width and height of the specific device’s resolution below. Please a link in the Resources section at the bottom for each browser's documentation on how to do this. +If you don’t have the listed devices available for testing, please “Add custom device” in your browser’s responsive design mode using the width and height of the specific device’s resolution below. Please find the appropriate link in the [Resources](#resources) section at the bottom of this page for each browser's documentation on how to do this *except* Safari. ## Devices: -(Total 6 as listed below) -- 1 Smartphone: iPhone 14 Plus [Tyler]; Width: 428 & Height: 926 -- 1 Tablet: iPad Pro (6th gen 12.9") [Tyler]; Width: 1024 & Height: 1366 -- 1 External Monitor: Width: 4096 & Height: 2304 -- 3 Laptop: Width: 2560 & Height: 1600 +(Total 4 as listed below) +- **Smartphone:** iPhone 14 Plus [Tyler]; Width: 428 & Height: 926 +- **Tablet:** iPad Pro (6th gen 12.9") [Tyler]; Width: 1024 & Height: 1366 +- **External Monitor:** Width: 4096 & Height: 2304 +- **Laptop:** Width: 2560 & Height: 1600 - Full-screen - Half-screen (vertical split) - Quarter screen. @@ -26,7 +26,6 @@ Landscape and portrait In portrait, pages should have their content appear on one screen and not require scrolling. In landscape, scrolling may be unavoidable for some screens, but try to rearrange the content horizontally in order to minimize required scrolling. - ## Resources: 1. https://www.ios-resolution.com/ 2. https://support.apple.com/kb/SP748?locale=en_US @@ -34,7 +33,6 @@ In portrait, pages should have their content appear on one screen and not requir 4. Adding custom device in Edge: https://learn.microsoft.com/en-us/microsoft-edge/devtools-guide-chromium/device-mode/ 5. Adding custom device in Firefox: https://firefox-source-docs.mozilla.org/devtools-user/responsive_design_mode/#creating-custom-devices -6. Adding custom device in safari: https://developer.apple.com/forums/thread/650901 From afa504b8767698dba40c6ae4b01bb89b55620ef1 Mon Sep 17 00:00:00 2001 From: Raida Karim Date: Wed, 31 May 2023 23:10:07 +0000 Subject: [PATCH 07/81] initial code for responsiveness --- feedingwebapp/ResponsivenessTesting.md | 4 +- feedingwebapp/package-lock.json | 36 +++++++ feedingwebapp/package.json | 1 + feedingwebapp/src/Pages/Home/Home.jsx | 10 +- .../src/Pages/Home/MealStates/BiteDone.jsx | 102 +++++++++++++++--- 5 files changed, 130 insertions(+), 23 deletions(-) diff --git a/feedingwebapp/ResponsivenessTesting.md b/feedingwebapp/ResponsivenessTesting.md index f918f3ac..ae4016b3 100644 --- a/feedingwebapp/ResponsivenessTesting.md +++ b/feedingwebapp/ResponsivenessTesting.md @@ -9,14 +9,14 @@ In total, you will run 18 tests (4 browsers * 1 smartphone + 1 tablet + 4 brows If you don’t have the listed devices available for testing, please “Add custom device” in your browser’s responsive design mode using the width and height of the specific device’s resolution below. Please find the appropriate link in the [Resources](#resources) section at the bottom of this page for each browser's documentation on how to do this *except* Safari. ## Devices: -(Total 4 as listed below) +Total 4 as listed below - **Smartphone:** iPhone 14 Plus [Tyler]; Width: 428 & Height: 926 - **Tablet:** iPad Pro (6th gen 12.9") [Tyler]; Width: 1024 & Height: 1366 - **External Monitor:** Width: 4096 & Height: 2304 - **Laptop:** Width: 2560 & Height: 1600 - Full-screen - Half-screen (vertical split) - - Quarter screen. + - Quarter screen ## Browsers: Chrome, Firefox, Edge, Safari diff --git a/feedingwebapp/package-lock.json b/feedingwebapp/package-lock.json index 00a47ba5..e24cb7f9 100644 --- a/feedingwebapp/package-lock.json +++ b/feedingwebapp/package-lock.json @@ -19,6 +19,7 @@ "react-dom": "^18.1.0", "react-hook-form": "^7.43.9", "react-native-web": "^0.19.4", + "react-responsive": "^9.0.2", "react-router-dom": "^6.3.0", "react-script-tag": "^1.1.2", "react-scripts": "^5.0.1", @@ -6159,6 +6160,11 @@ "hyphenate-style-name": "^1.0.3" } }, + "node_modules/css-mediaquery": { + "version": "0.1.2", + "resolved": "https://registry.npmjs.org/css-mediaquery/-/css-mediaquery-0.1.2.tgz", + "integrity": "sha512-COtn4EROW5dBGlE/4PiKnh6rZpAPxDeFLaEEwt4i10jpDMFt2EhQGS79QmmrO+iKCHv0PU/HrOWEhijFd1x99Q==" + }, "node_modules/css-minimizer-webpack-plugin": { "version": "3.4.1", "resolved": "https://registry.npmjs.org/css-minimizer-webpack-plugin/-/css-minimizer-webpack-plugin-3.4.1.tgz", @@ -12943,6 +12949,14 @@ "tmpl": "1.0.5" } }, + "node_modules/matchmediaquery": { + "version": "0.3.1", + "resolved": "https://registry.npmjs.org/matchmediaquery/-/matchmediaquery-0.3.1.tgz", + "integrity": "sha512-Hlk20WQHRIm9EE9luN1kjRjYXAQToHOIAHPJn9buxBwuhfTHoKUcX+lXBbxc85DVQfXYbEQ4HcwQdd128E3qHQ==", + "dependencies": { + "css-mediaquery": "^0.1.2" + } + }, "node_modules/mdb-react-ui-kit": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/mdb-react-ui-kit/-/mdb-react-ui-kit-3.0.0.tgz", @@ -14780,6 +14794,23 @@ "react": "^16.8.0 || ^17" } }, + "node_modules/react-responsive": { + "version": "9.0.2", + "resolved": "https://registry.npmjs.org/react-responsive/-/react-responsive-9.0.2.tgz", + "integrity": "sha512-+4CCab7z8G8glgJoRjAwocsgsv6VA2w7JPxFWHRc7kvz8mec1/K5LutNC2MG28Mn8mu6+bu04XZxHv5gyfT7xQ==", + "dependencies": { + "hyphenate-style-name": "^1.0.0", + "matchmediaquery": "^0.3.0", + "prop-types": "^15.6.1", + "shallow-equal": "^1.2.1" + }, + "engines": { + "node": ">=0.10" + }, + "peerDependencies": { + "react": ">=16.8.0" + } + }, "node_modules/react-router": { "version": "6.11.1", "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.11.1.tgz", @@ -16746,6 +16777,11 @@ "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.2.0.tgz", "integrity": "sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw==" }, + "node_modules/shallow-equal": { + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/shallow-equal/-/shallow-equal-1.2.1.tgz", + "integrity": "sha512-S4vJDjHHMBaiZuT9NPb616CSmLf618jawtv3sufLl6ivK8WocjAo58cXwbRV1cgqxH0Qbv+iUt6m05eqEa2IRA==" + }, "node_modules/shallowequal": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/shallowequal/-/shallowequal-1.1.0.tgz", diff --git a/feedingwebapp/package.json b/feedingwebapp/package.json index a037662f..dfadddd3 100644 --- a/feedingwebapp/package.json +++ b/feedingwebapp/package.json @@ -14,6 +14,7 @@ "react-dom": "^18.1.0", "react-hook-form": "^7.43.9", "react-native-web": "^0.19.4", + "react-responsive": "^9.0.2", "react-router-dom": "^6.3.0", "react-script-tag": "^1.1.2", "react-scripts": "^5.0.1", diff --git a/feedingwebapp/src/Pages/Home/Home.jsx b/feedingwebapp/src/Pages/Home/Home.jsx index caabe16d..4e26c805 100644 --- a/feedingwebapp/src/Pages/Home/Home.jsx +++ b/feedingwebapp/src/Pages/Home/Home.jsx @@ -65,7 +65,7 @@ function Home(props) { let currentMealState = MEAL_STATE.R_MovingAbovePlate let nextMealState = MEAL_STATE.U_BiteSelection let actionInput = {} - let waitingText = 'Waiting for the robot to move above the plate...' + let waitingText = 'Waiting to move above the plate...' return ( { let moveAbovePlateImage = MOVING_STATE_ICON_DICT[MEAL_STATE.R_MovingAbovePlate] // Get icon image for move to resting position let moveToRestingPositionImage = MOVING_STATE_ICON_DICT[MEAL_STATE.R_MovingToRestingPosition] + // Get current orientation + const isPortrait = useMediaQuery({ query: '(orientation: portrait)' }) /** * Callback function for when the user wants to move above plate. @@ -35,15 +39,31 @@ const BiteDone = () => { setMealState(MEAL_STATE.R_MovingToRestingPosition) }, [setMealState]) - // Render the component - return ( -
- {/* Ask the user whether they want to move to above plate position */} -

- Bite finished? Move above plate. -

- {/* Icon to move above plate */} - + /** + * Get the bite finished text to render. + * + * @returns {JSX.Element} the bite finished text + */ + let biteFinishedText = function () { + return ( + <> + {/* Ask the user whether they want to move to above plate position */} +

+ Bite finished? Move above plate. +

+ + ) + } + + /** + * Get the bite finished button to render. + * + * @returns {JSX.Element} the bite finished button + */ + let biteFinishedButton = function () { + return ( + <> + {/* Icon to move above plate */} - - {/* Add empty space */} -
 
- + + ) + } + + /** + * Get the take another bite text to render. + * + * @returns {JSX.Element} the take another bite text + */ + let takeAnotherBiteText = function () { + return ( + <> {/* Ask the user whether they want to move to resting position */} -

+

Take another bite? Move to resting position.

+ + ) + } + + /** + * Get the take another bite button to render. + * + * @returns {JSX.Element} the take another bite button + */ + let takeAnotherBiteButton = function () { + return ( + <> {/* Icon to move to resting position */} - -
+ + ) + } + + // Render the component + return ( + <> + {isPortrait ? ( +
+ {biteFinishedText()} + {/* Icon to move above plate */} + {biteFinishedButton()} + {/* Add empty space */} +
 
+ + {takeAnotherBiteText()} + {takeAnotherBiteButton()} + +
+ ) : ( + + + {biteFinishedText()} + {biteFinishedButton()} + + + {takeAnotherBiteText()} + {takeAnotherBiteButton()} + + + )} + ) } From 8f266b785b3021e413b97e52bf992df6eefaf9f8 Mon Sep 17 00:00:00 2001 From: Raida Karim Date: Thu, 1 Jun 2023 07:05:03 +0000 Subject: [PATCH 08/81] landscape views --- feedingwebapp/src/Pages/Footer/Footer.jsx | 224 +++++++++++++----- feedingwebapp/src/Pages/Header/Header.jsx | 22 +- .../Home/MealStates/BiteAcquisitionCheck.jsx | 99 ++++++-- .../src/Pages/Home/MealStates/BiteDone.jsx | 3 +- .../src/Pages/Home/MealStates/RobotMotion.jsx | 36 ++- 5 files changed, 301 insertions(+), 83 deletions(-) diff --git a/feedingwebapp/src/Pages/Footer/Footer.jsx b/feedingwebapp/src/Pages/Footer/Footer.jsx index 7e881a22..d81d1026 100644 --- a/feedingwebapp/src/Pages/Footer/Footer.jsx +++ b/feedingwebapp/src/Pages/Footer/Footer.jsx @@ -4,6 +4,7 @@ import { MDBFooter } from 'mdb-react-ui-kit' import Button from 'react-bootstrap/Button' import { View } from 'react-native' import Row from 'react-bootstrap/Row' +import { useMediaQuery } from 'react-responsive' // PropTypes is used to validate that the used props are in fact passed to this Component import PropTypes from 'prop-types' @@ -39,6 +40,8 @@ const Footer = (props) => { let backResumeButtonWidth = '150px' // Height of all Footer buttons let footerButtonHeight = '100px' + // Flag to check if the current orientation is portrait + const isPortrait = useMediaQuery({ query: '(orientation: portrait)' }) /** * Get the pause text and button to render in footer. @@ -49,23 +52,58 @@ const Footer = (props) => { (callback) => { return ( <> - -

- Pause -

- {/* Icon to pause */} - - + {isPortrait ? ( + +

+ Pause +

+ {/* Icon to pause */} + + + ) : ( + + {/* Icon to pause */} + + + )} ) }, - [pauseIcon, footerButtonHeight] + [isPortrait, pauseIcon, footerButtonHeight] ) /** @@ -77,21 +115,52 @@ const Footer = (props) => { (callback) => { return ( <> -

- Back -

- {/* Icon to move to previous state */} - + {isPortrait ? ( + +

+ Back +

+ , + + + ) : ( + + )} ) }, - [backIcon, backResumeButtonWidth, footerButtonHeight] + [isPortrait, backIcon, backResumeButtonWidth, footerButtonHeight] ) /** @@ -103,21 +172,52 @@ const Footer = (props) => { (callback) => { return ( <> -

- Resume -

- {/* Icon to resume current state */} - + {isPortrait ? ( + +

+ Resume +

+ , + + + ) : ( + + )} ) }, - [resumeIcon, backResumeButtonWidth, footerButtonHeight] + [isPortrait, resumeIcon, backResumeButtonWidth, footerButtonHeight] ) /** @@ -129,20 +229,38 @@ const Footer = (props) => { let renderPhantomButton = function () { return ( <> - + {isPortrait ? ( + + ) : ( + + )} ) } @@ -151,7 +269,7 @@ const Footer = (props) => { return ( <> -
+
{props.paused ? ( {props.backCallback ? renderBackButton(props.backCallback) : renderPhantomButton()} diff --git a/feedingwebapp/src/Pages/Header/Header.jsx b/feedingwebapp/src/Pages/Header/Header.jsx index 813aee71..0d3b940b 100644 --- a/feedingwebapp/src/Pages/Header/Header.jsx +++ b/feedingwebapp/src/Pages/Header/Header.jsx @@ -81,8 +81,20 @@ const Header = (props) => { * element, Video, on the right side. An image showing the connection status * of the robot is placed in between Settings and Video. */} - - + + - {NON_MOVING_STATES.has(mealState) || paused ? ( + {NON_MOVING_STATES.has(mealState) || paused || (mealState === MEAL_STATE.U_PlateLocator && notLocatingPlate) ? (
) - }, [iconHeight, iconWidth, skipAcquisitionButtonHeight, skipAcquisitionButtonWidth, moveToMouth, moveToMouthImage]) + }, [iconHeight, iconWidth, buttonSizeWidth, buttonSizeHeight, moveToMouth, moveToMouthImage]) /** Get the continue button when debug mode is enabled * From 7a54c03b15a9dbc1299f995543cc0dfb7ced3aea Mon Sep 17 00:00:00 2001 From: Raida Karim Date: Tue, 6 Jun 2023 20:00:47 +0000 Subject: [PATCH 39/81] bite done and seletion --- .../src/Pages/Home/MealStates/BiteDone.jsx | 2 +- .../Pages/Home/MealStates/BiteSelection.jsx | 34 ++++++++++++------- 2 files changed, 22 insertions(+), 14 deletions(-) diff --git a/feedingwebapp/src/Pages/Home/MealStates/BiteDone.jsx b/feedingwebapp/src/Pages/Home/MealStates/BiteDone.jsx index be77cbb5..1818431e 100644 --- a/feedingwebapp/src/Pages/Home/MealStates/BiteDone.jsx +++ b/feedingwebapp/src/Pages/Home/MealStates/BiteDone.jsx @@ -87,7 +87,7 @@ const BiteDone = () => { <> {/* Ask the user whether they want to move to resting position */}

- Take another bite? Move to resting position. + Take another bite? Move back.

) diff --git a/feedingwebapp/src/Pages/Home/MealStates/BiteSelection.jsx b/feedingwebapp/src/Pages/Home/MealStates/BiteSelection.jsx index 9a99627c..ba72acf9 100644 --- a/feedingwebapp/src/Pages/Home/MealStates/BiteSelection.jsx +++ b/feedingwebapp/src/Pages/Home/MealStates/BiteSelection.jsx @@ -45,12 +45,9 @@ const BiteSelection = (props) => { const isPortrait = useMediaQuery({ query: '(orientation: portrait)' }) // Width and height of icon let iconWidth = isPortrait ? '79px' : '100px' - let iconHeight = isPortrait ? '85px' : '77px' + let iconHeight = isPortrait ? '73px' : '70px' // Factor to modify video size in landscape which has less space than portrait let landscapeSizeFactor = 0.65 - // Width and height of buttons - let buttonSizeWidth = isPortrait ? 90 : 110 - let buttonSizeHeight = isPortrait ? 85 : 87 /** * Create a local state variable to store the detected masks, the @@ -103,6 +100,12 @@ const BiteSelection = (props) => { setScaleFactor(scaleFactor) }, [windowSize, margin]) + // Width and height of buttons + let maskButtonWidth = isPortrait ? 90 : 110 + let maskButtonHeight = isPortrait ? 85 : 87 + let skipButtonWidth = width + let skipButtonHeight = isPortrait ? 73 : 70 + /** * Callback function for when the user indicates that they want to move the * robot to locate the plate. @@ -283,12 +286,17 @@ const BiteSelection = (props) => { maxHeight = detected_item.roi.height } } - let maskScaleFactor = Math.min(buttonSizeWidth / maxWidth, buttonSizeHeight / maxHeight) - let imgSize = { width: Math.round(buttonSizeWidth * maxWidth), height: Math.round(buttonSizeHeight * maxHeight) } + console.log('btnSizeWidth: ' + maskButtonWidth) + console.log('maxWidth: ' + maxWidth) + console.log('btnSizeHeight: ' + maskButtonHeight) + console.log('maxHeight: ' + maxHeight) + let maskScaleFactor = Math.min(maskButtonWidth / maxWidth, maskButtonHeight / maxHeight) + console.log('maskScaleFactor: ' + maskScaleFactor) + let imgSize = { width: Math.round(maskButtonWidth * maxWidth), height: Math.round(maskButtonHeight * maxHeight) } // Define a variable for robot's live video stream. let imgSrc = `${props.webVideoServerURL}/stream?topic=${CAMERA_FEED_TOPIC}&width=${Math.round( - buttonSizeWidth - )}&height=${Math.round(buttonSizeHeight)}&quality=20` + maskButtonWidth + )}&height=${Math.round(maskButtonHeight)}&quality=20` return ( <> @@ -298,7 +306,7 @@ const BiteSelection = (props) => { {actionResult.detected_items.map((detected_item, i) => ( { ) } - }, [actionStatus, actionResult, foodItemClicked, buttonSizeWidth, buttonSizeHeight, props.webVideoServerURL]) + }, [actionStatus, actionResult, foodItemClicked, maskButtonWidth, maskButtonHeight, props.webVideoServerURL]) /** Get the button for continue without acquiring bite * @@ -355,14 +363,14 @@ const BiteSelection = (props) => { className='mx-2 btn-huge' size='lg' onClick={moveToMouth} - style={{ width: buttonSizeWidth, height: buttonSizeHeight, '--bs-btn-padding-x': '0rem', '--bs-btn-padding-y': '0rem' }} + style={{ width: skipButtonWidth, height: skipButtonHeight, '--bs-btn-padding-x': '0rem', '--bs-btn-padding-y': '0rem' }} > move_to_mouth_image
) - }, [iconHeight, iconWidth, buttonSizeWidth, buttonSizeHeight, moveToMouth, moveToMouthImage]) + }, [iconHeight, iconWidth, skipButtonWidth, skipButtonHeight, moveToMouth, moveToMouthImage]) /** Get the continue button when debug mode is enabled * @@ -421,7 +429,7 @@ const BiteSelection = (props) => {
Click on image to select food.
{showVideo(props.webVideoServerURL, width * landscapeSizeFactor, height * landscapeSizeFactor, imageClicked)} - + {actionStatusText()}
 
{withoutAcquireButton()} From 378f924f4d63b7c9a6a10d11fa9635645074e516 Mon Sep 17 00:00:00 2001 From: Raida Karim Date: Tue, 6 Jun 2023 20:51:50 +0000 Subject: [PATCH 40/81] skip button resize --- feedingwebapp/src/Pages/Home/MealStates/BiteSelection.jsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/feedingwebapp/src/Pages/Home/MealStates/BiteSelection.jsx b/feedingwebapp/src/Pages/Home/MealStates/BiteSelection.jsx index ba72acf9..35718cb5 100644 --- a/feedingwebapp/src/Pages/Home/MealStates/BiteSelection.jsx +++ b/feedingwebapp/src/Pages/Home/MealStates/BiteSelection.jsx @@ -45,7 +45,7 @@ const BiteSelection = (props) => { const isPortrait = useMediaQuery({ query: '(orientation: portrait)' }) // Width and height of icon let iconWidth = isPortrait ? '79px' : '100px' - let iconHeight = isPortrait ? '73px' : '70px' + let iconHeight = isPortrait ? '73px' : '40px' // Factor to modify video size in landscape which has less space than portrait let landscapeSizeFactor = 0.65 @@ -104,7 +104,7 @@ const BiteSelection = (props) => { let maskButtonWidth = isPortrait ? 90 : 110 let maskButtonHeight = isPortrait ? 85 : 87 let skipButtonWidth = width - let skipButtonHeight = isPortrait ? 73 : 70 + let skipButtonHeight = isPortrait ? 73 : 40 /** * Callback function for when the user indicates that they want to move the From 4d0b652b11722d24cc0f0e6a6dc1dbc57655f274 Mon Sep 17 00:00:00 2001 From: Raida Karim Date: Tue, 6 Jun 2023 21:05:35 +0000 Subject: [PATCH 41/81] skip fix --- feedingwebapp/src/Pages/Home/MealStates/BiteSelection.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/feedingwebapp/src/Pages/Home/MealStates/BiteSelection.jsx b/feedingwebapp/src/Pages/Home/MealStates/BiteSelection.jsx index 35718cb5..001efb43 100644 --- a/feedingwebapp/src/Pages/Home/MealStates/BiteSelection.jsx +++ b/feedingwebapp/src/Pages/Home/MealStates/BiteSelection.jsx @@ -429,7 +429,7 @@ const BiteSelection = (props) => {
Click on image to select food.
{showVideo(props.webVideoServerURL, width * landscapeSizeFactor, height * landscapeSizeFactor, imageClicked)} - + {actionStatusText()}
 
{withoutAcquireButton()} From 782f327f561fb8b7389b531246304d47f832dc4f Mon Sep 17 00:00:00 2001 From: Raida Karim Date: Tue, 6 Jun 2023 21:36:43 +0000 Subject: [PATCH 42/81] skip button space remove --- feedingwebapp/src/Pages/Home/MealStates/BiteSelection.jsx | 1 - 1 file changed, 1 deletion(-) diff --git a/feedingwebapp/src/Pages/Home/MealStates/BiteSelection.jsx b/feedingwebapp/src/Pages/Home/MealStates/BiteSelection.jsx index 001efb43..92a8bf71 100644 --- a/feedingwebapp/src/Pages/Home/MealStates/BiteSelection.jsx +++ b/feedingwebapp/src/Pages/Home/MealStates/BiteSelection.jsx @@ -431,7 +431,6 @@ const BiteSelection = (props) => { {actionStatusText()} -
 
{withoutAcquireButton()} {debugOptions} From 70517b7ed0a1666d5a1989183741ad59b60c72d5 Mon Sep 17 00:00:00 2001 From: Raida Karim Date: Wed, 7 Jun 2023 03:06:53 +0000 Subject: [PATCH 43/81] mask --- .../Pages/Home/MealStates/BiteSelection.jsx | 29 ++++++++++--------- 1 file changed, 16 insertions(+), 13 deletions(-) diff --git a/feedingwebapp/src/Pages/Home/MealStates/BiteSelection.jsx b/feedingwebapp/src/Pages/Home/MealStates/BiteSelection.jsx index 92a8bf71..192ab436 100644 --- a/feedingwebapp/src/Pages/Home/MealStates/BiteSelection.jsx +++ b/feedingwebapp/src/Pages/Home/MealStates/BiteSelection.jsx @@ -101,8 +101,8 @@ const BiteSelection = (props) => { }, [windowSize, margin]) // Width and height of buttons - let maskButtonWidth = isPortrait ? 90 : 110 - let maskButtonHeight = isPortrait ? 85 : 87 + //let maskButtonWidth = isPortrait ? 90 : 110 + //let maskButtonHeight = isPortrait ? 85 : 87 let skipButtonWidth = width let skipButtonHeight = isPortrait ? 73 : 40 @@ -279,6 +279,8 @@ const BiteSelection = (props) => { // Get the parameters to display the mask as buttons let [maxWidth, maxHeight] = [0, 0] for (let detected_item of actionResult.detected_items) { + console.log('detected item: ' + detected_item[0] + detected_item[1]) + console.log('detected item roi' + detected_item.roi[0] + detected_item.roi[1]) if (detected_item.roi.width > maxWidth) { maxWidth = detected_item.roi.width } @@ -286,18 +288,19 @@ const BiteSelection = (props) => { maxHeight = detected_item.roi.height } } - console.log('btnSizeWidth: ' + maskButtonWidth) + let buttonSize = { width: 100, height: 70 } + let maskScaleFactor = Math.min(buttonSize.width / maxWidth, buttonSize.height / maxHeight) + let imgSize = { width: Math.round(maxWidth / maskScaleFactor) * 2, height: Math.round(maxHeight / maskScaleFactor) * 2 } + // Define a variable for robot's live video stream. + console.log('imgSize: width and height ' + imgSize.width + imgSize.height) + let imgSrc = `${props.webVideoServerURL}/stream?topic=${CAMERA_FEED_TOPIC}&width=${imgSize.width}&height=${imgSize.height}&quality=20` + console.log('imgSrc: ' + imgSrc) + console.log('btnSizeWidth: ' + buttonSize.width) console.log('maxWidth: ' + maxWidth) - console.log('btnSizeHeight: ' + maskButtonHeight) + console.log('btnSizeHeight: ' + buttonSize.height) console.log('maxHeight: ' + maxHeight) - let maskScaleFactor = Math.min(maskButtonWidth / maxWidth, maskButtonHeight / maxHeight) console.log('maskScaleFactor: ' + maskScaleFactor) - let imgSize = { width: Math.round(maskButtonWidth * maxWidth), height: Math.round(maskButtonHeight * maxHeight) } - // Define a variable for robot's live video stream. - let imgSrc = `${props.webVideoServerURL}/stream?topic=${CAMERA_FEED_TOPIC}&width=${Math.round( - maskButtonWidth - )}&height=${Math.round(maskButtonHeight)}&quality=20` - + console.log('detectedItems: ' + actionResult.detected_items[0][0] + actionResult.detected_items[0][1]) return ( <>
@@ -306,7 +309,7 @@ const BiteSelection = (props) => { {actionResult.detected_items.map((detected_item, i) => ( { ) } - }, [actionStatus, actionResult, foodItemClicked, maskButtonWidth, maskButtonHeight, props.webVideoServerURL]) + }, [actionStatus, actionResult, foodItemClicked, props.webVideoServerURL]) /** Get the button for continue without acquiring bite * From cc65f0f7a80269fe9d437565b88d7063ba12a20c Mon Sep 17 00:00:00 2001 From: Raida Karim Date: Wed, 7 Jun 2023 03:59:34 +0000 Subject: [PATCH 44/81] mask update --- feedingwebapp/src/Pages/Home/MealStates/BiteSelection.jsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/feedingwebapp/src/Pages/Home/MealStates/BiteSelection.jsx b/feedingwebapp/src/Pages/Home/MealStates/BiteSelection.jsx index 192ab436..08acf502 100644 --- a/feedingwebapp/src/Pages/Home/MealStates/BiteSelection.jsx +++ b/feedingwebapp/src/Pages/Home/MealStates/BiteSelection.jsx @@ -290,7 +290,7 @@ const BiteSelection = (props) => { } let buttonSize = { width: 100, height: 70 } let maskScaleFactor = Math.min(buttonSize.width / maxWidth, buttonSize.height / maxHeight) - let imgSize = { width: Math.round(maxWidth / maskScaleFactor) * 2, height: Math.round(maxHeight / maskScaleFactor) * 2 } + let imgSize = { width: Math.round((maxWidth / maskScaleFactor) * 1.25), height: Math.round((maxHeight / maskScaleFactor) * 1.25) } // Define a variable for robot's live video stream. console.log('imgSize: width and height ' + imgSize.width + imgSize.height) let imgSrc = `${props.webVideoServerURL}/stream?topic=${CAMERA_FEED_TOPIC}&width=${imgSize.width}&height=${imgSize.height}&quality=20` @@ -300,7 +300,6 @@ const BiteSelection = (props) => { console.log('btnSizeHeight: ' + buttonSize.height) console.log('maxHeight: ' + maxHeight) console.log('maskScaleFactor: ' + maskScaleFactor) - console.log('detectedItems: ' + actionResult.detected_items[0][0] + actionResult.detected_items[0][1]) return ( <>
From 3ab00dc83cd845d4e948acd80981f136cd462570 Mon Sep 17 00:00:00 2001 From: Raida Karim Date: Wed, 7 Jun 2023 04:34:42 +0000 Subject: [PATCH 45/81] add --- feedingwebapp/src/Pages/Home/MealStates/BiteSelection.jsx | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/feedingwebapp/src/Pages/Home/MealStates/BiteSelection.jsx b/feedingwebapp/src/Pages/Home/MealStates/BiteSelection.jsx index 08acf502..45a943b4 100644 --- a/feedingwebapp/src/Pages/Home/MealStates/BiteSelection.jsx +++ b/feedingwebapp/src/Pages/Home/MealStates/BiteSelection.jsx @@ -279,8 +279,6 @@ const BiteSelection = (props) => { // Get the parameters to display the mask as buttons let [maxWidth, maxHeight] = [0, 0] for (let detected_item of actionResult.detected_items) { - console.log('detected item: ' + detected_item[0] + detected_item[1]) - console.log('detected item roi' + detected_item.roi[0] + detected_item.roi[1]) if (detected_item.roi.width > maxWidth) { maxWidth = detected_item.roi.width } @@ -290,7 +288,10 @@ const BiteSelection = (props) => { } let buttonSize = { width: 100, height: 70 } let maskScaleFactor = Math.min(buttonSize.width / maxWidth, buttonSize.height / maxHeight) - let imgSize = { width: Math.round((maxWidth / maskScaleFactor) * 1.25), height: Math.round((maxHeight / maskScaleFactor) * 1.25) } + let imgSize = { + width: Math.round((maxWidth / maskScaleFactor) * 1.5 + 10), + height: Math.round((maxHeight / maskScaleFactor) * 1.5 - 25) + } // Define a variable for robot's live video stream. console.log('imgSize: width and height ' + imgSize.width + imgSize.height) let imgSrc = `${props.webVideoServerURL}/stream?topic=${CAMERA_FEED_TOPIC}&width=${imgSize.width}&height=${imgSize.height}&quality=20` From 51d4581d8385265a857d7959cc608adba711ca38 Mon Sep 17 00:00:00 2001 From: Raida Karim Date: Wed, 7 Jun 2023 21:45:29 +0000 Subject: [PATCH 46/81] use percentage of size --- .../Pages/Home/MealStates/BiteSelection.jsx | 46 ++++++++++--------- feedingwebapp/src/buttons/MaskButton.jsx | 5 ++ feedingwebapp/src/helpers.js | 13 +++--- 3 files changed, 36 insertions(+), 28 deletions(-) diff --git a/feedingwebapp/src/Pages/Home/MealStates/BiteSelection.jsx b/feedingwebapp/src/Pages/Home/MealStates/BiteSelection.jsx index 45a943b4..b6466ed8 100644 --- a/feedingwebapp/src/Pages/Home/MealStates/BiteSelection.jsx +++ b/feedingwebapp/src/Pages/Home/MealStates/BiteSelection.jsx @@ -23,10 +23,10 @@ import { ROS_ACTION_STATUS_SUCCEED, ROS_ACTION_STATUS_ABORT, ROS_ACTION_STATUS_CANCELED, - SEGMENTATION_STATUS_SUCCESS + SEGMENTATION_STATUS_SUCCESS, + MOVING_STATE_ICON_DICT } from '../../Constants' import { useGlobalState, MEAL_STATE } from '../../GlobalState' -import { MOVING_STATE_ICON_DICT } from '../../Constants' /** * The BiteSelection component appears after the robot has moved above the plate, @@ -43,9 +43,6 @@ const BiteSelection = (props) => { let moveToMouthImage = MOVING_STATE_ICON_DICT[MEAL_STATE.R_MovingToMouth] // Flag to check if the current orientation is portrait const isPortrait = useMediaQuery({ query: '(orientation: portrait)' }) - // Width and height of icon - let iconWidth = isPortrait ? '79px' : '100px' - let iconHeight = isPortrait ? '73px' : '40px' // Factor to modify video size in landscape which has less space than portrait let landscapeSizeFactor = 0.65 @@ -103,8 +100,8 @@ const BiteSelection = (props) => { // Width and height of buttons //let maskButtonWidth = isPortrait ? 90 : 110 //let maskButtonHeight = isPortrait ? 85 : 87 - let skipButtonWidth = width - let skipButtonHeight = isPortrait ? 73 : 40 + //let skipButtonWidth = width + //let skipButtonHeight = isPortrait ? 73 : 40 /** * Callback function for when the user indicates that they want to move the @@ -286,11 +283,11 @@ const BiteSelection = (props) => { maxHeight = detected_item.roi.height } } - let buttonSize = { width: 100, height: 70 } - let maskScaleFactor = Math.min(buttonSize.width / maxWidth, buttonSize.height / maxHeight) + let buttonSize = { width: width * 0.15, height: height * 0.8 } + let maskScaleFactor = Math.min(buttonSize.width / maxWidth - 0.6, buttonSize.height / maxHeight - 0.6) let imgSize = { - width: Math.round((maxWidth / maskScaleFactor) * 1.5 + 10), - height: Math.round((maxHeight / maskScaleFactor) * 1.5 - 25) + width: Math.round(REALSENSE_WIDTH * maskScaleFactor), + height: Math.round(REALSENSE_HEIGHT * maskScaleFactor) } // Define a variable for robot's live video stream. console.log('imgSize: width and height ' + imgSize.width + imgSize.height) @@ -348,7 +345,7 @@ const BiteSelection = (props) => { ) } - }, [actionStatus, actionResult, foodItemClicked, props.webVideoServerURL]) + }, [actionStatus, actionResult, foodItemClicked, props.webVideoServerURL, width, height]) /** Get the button for continue without acquiring bite * @@ -359,21 +356,26 @@ const BiteSelection = (props) => {
{/* Ask the user whether they want to skip acquisition and move above plate */}
Skip acquisition.
- {/* Icon to move to mouth */} + {/* Icon to move to mouth, button 45% of window width and 7% of window height */}
) - }, [iconHeight, iconWidth, skipButtonWidth, skipButtonHeight, moveToMouth, moveToMouthImage]) + }, [moveToMouth, height, width, moveToMouthImage]) /** Get the continue button when debug mode is enabled * @@ -427,15 +429,15 @@ const BiteSelection = (props) => { {debugOptions()} ) : ( - - + +
Click on image to select food.
{showVideo(props.webVideoServerURL, width * landscapeSizeFactor, height * landscapeSizeFactor, imageClicked)} - - {actionStatusText()} - {withoutAcquireButton()} - {debugOptions} + + {actionStatusText()} + {withoutAcquireButton()} + {debugOptions} )} diff --git a/feedingwebapp/src/buttons/MaskButton.jsx b/feedingwebapp/src/buttons/MaskButton.jsx index 862427b7..623920d5 100644 --- a/feedingwebapp/src/buttons/MaskButton.jsx +++ b/feedingwebapp/src/buttons/MaskButton.jsx @@ -39,6 +39,11 @@ function MaskButton(props) { let onClick = props.onClick let value = props.value + console.log('bounding box x_offset: ' + maskBoundingBox.x_offset) + console.log('bounding box y_offset: ' + maskBoundingBox.y_offset) + console.log('bounding box width: ' + maskBoundingBox.width) + console.log('bounding box height: ' + maskBoundingBox.height) + return ( ) }, - [backIcon, backResumeButtonWidth, footerButtonHeight, footerMargin, footerIconHeight, footerFontSize, backResumeIconWidth] + [backIcon, footerMargin, backResumeButtonWidth, backResumeFontSize, footerButtonHeight, backResumeIconHeight, backResumeIconWidth] ) /** @@ -174,7 +167,8 @@ const Footer = (props) => { style={{ marginLeft: footerMargin, width: backResumeButtonWidth, - height: footerButtonHeight + height: footerButtonHeight, + '--bs-btn-padding-y': '0rem' }} > @@ -183,11 +177,9 @@ const Footer = (props) => { className='transitionMessage' style={{ marginBottom: '0', - marginLeft: '1px', - fontSize: footerFontSize, + fontSize: backResumeFontSize, color: 'black', - fontWeight: 'bold', - padding: '0' + fontWeight: 'bold' }} > Resume @@ -195,7 +187,7 @@ const Footer = (props) => { resume_icon { ) }, - [resumeIcon, backResumeButtonWidth, footerButtonHeight, footerMargin, footerFontSize, backResumeIconWidth, footerIconHeight] + [resumeIcon, footerMargin, backResumeButtonWidth, backResumeFontSize, footerButtonHeight, backResumeIconHeight, backResumeIconWidth] ) /** @@ -232,7 +224,7 @@ const Footer = (props) => { }} > phantom_button_img {

Robot is moving...

-

-     Elapsed Time: {Math.round(moving_elapsed_time * 100) / 100} sec -

+

  Elapsed Time: {Math.round(moving_elapsed_time * 100) / 100} sec

 @@ -264,9 +262,7 @@ const RobotMotion = (props) => {

Robot is moving...

-

-     Elapsed Time: {Math.round(moving_elapsed_time * 100) / 100} sec -

+

  Elapsed Time: {Math.round(moving_elapsed_time * 100) / 100} sec

 @@ -282,9 +278,7 @@ const RobotMotion = (props) => { <>

Robot is thinking...

-

-     Elapsed Time: {Math.round(planning_elapsed_time * 100) / 100} sec -

+

  Elapsed Time: {Math.round(planning_elapsed_time * 100) / 100} sec

) From 0441badbb80b361de2e61dc063556ae8f10ca919 Mon Sep 17 00:00:00 2001 From: Raida Karim Date: Thu, 8 Jun 2023 19:01:12 +0000 Subject: [PATCH 52/81] adjust header sizes in vw vh --- feedingwebapp/src/Pages/Footer/Footer.jsx | 2 +- feedingwebapp/src/Pages/Header/Header.jsx | 105 +++++++++++----------- 2 files changed, 55 insertions(+), 52 deletions(-) diff --git a/feedingwebapp/src/Pages/Footer/Footer.jsx b/feedingwebapp/src/Pages/Footer/Footer.jsx index 2760ee59..53f47215 100644 --- a/feedingwebapp/src/Pages/Footer/Footer.jsx +++ b/feedingwebapp/src/Pages/Footer/Footer.jsx @@ -261,4 +261,4 @@ Footer.propTypes = { backMealState: PropTypes.string } -export default Footer \ No newline at end of file +export default Footer diff --git a/feedingwebapp/src/Pages/Header/Header.jsx b/feedingwebapp/src/Pages/Header/Header.jsx index 65a073d2..4860226d 100644 --- a/feedingwebapp/src/Pages/Header/Header.jsx +++ b/feedingwebapp/src/Pages/Header/Header.jsx @@ -1,8 +1,7 @@ // React imports import React, { useCallback, useEffect, useState } from 'react' // The NavBar is the navigation toolbar at the top -import Navbar from 'react-bootstrap/Navbar' -import Nav from 'react-bootstrap/Nav' +import { Navbar, Nav } from 'react-bootstrap' // The Button is used for stop icon at the top import Button from 'react-bootstrap/Button' // PropTypes is used to validate that the used props are in fact passed to this @@ -76,11 +75,10 @@ const Header = (props) => { * The ToastContainer is an alert that pops up on the top of the screen * and has a timeout. */} - + {/** - * The NavBar has two elements, Home and Settings, on the left side and one - * element, Video, on the right side. An image showing the connection status - * of the robot is placed in between Settings and Video. + * The NavBar has five elements, Home and Settings, on the left side and three + * elements: Lock Icon, Robot Connection Status Icon, and Video; on the right side. */} { bg='dark' variant='dark' sticky='top' - style={{ '--bs-navbar-padding-x': '0rem', '--bs-navbar-padding-y': '0rem' }} + style={{ width: '100vw', '--bs-navbar-padding-x': '0rem', '--bs-navbar-padding-y': '0rem' }} > - {NON_MOVING_STATES.has(mealState) || paused || (mealState === MEAL_STATE.U_PlateLocator && teleopIsMoving === false) ? ( -
- -
- ) : ( - <> - )} - {isConnected ? ( -
-

- 🔌 -

-
- ) : ( -
-

- ⛔ -

-
- )} -
- ) : ( - <> - )} - {isConnected ? ( -
-

- 🔌 -

-
- ) : ( -
-

- ⛔ -

-
- )} + + {NON_MOVING_STATES.has(mealState) || paused || (mealState === MEAL_STATE.U_PlateLocator && teleopIsMoving === false) ? ( +
+ +
+ ) : ( + <> + )} + {isConnected ? ( +
+

+ 🔌 +

+
+ ) : ( +
+

+ ⛔ +

+
+ )} + ) : ( <> )} {isConnected ? ( -
-

+

+ + ) : ( -
-

+

+ + )}