Bite Selection UI revamp

feedingwebapp/README.md

@@ -28,6 +28,7 @@ The overall user flow for this robot can be seen below.
 4. Source the directory: `source install/setup.bash`
 5. Navigate to the web app folder: `cd feeding_web_interface/feedingwebapp`
 6. Install web app dependencies: `npm install --legacy-peer-deps`
+* Consider checking out the [Troubleshooting](## Troubleshooting) section if there are errors in this process. 
 
 ### Usage (Web App)
 1. Navigate to the web app folder: `cd {path/to/feeding_web_interface}/feedingwebapp`
@@ -103,6 +104,9 @@ Note that we use `npm`, not `yarn`, to manage dependencies for this project.
   - Thoroughly test your feature, including all edge cases, to ensure it works as expected. This includes trying every combination of buttons/actions, even ones we don't expect users to use, to ensure there are no unaccounted for edge cases.
   - Ensure the [console](https://developer.chrome.com/docs/devtools/console/) has no errors.
   - Thoroughly test responsivity by changing browser/device size to ensure it renders as expected.
-- Before creating a Pull Request, run `npm format` and address any warnings or errors.
+- Before creating a Pull Request, run `npm run format` and address any warnings or errors.
 - Create a Pull Request to merge your branch into `main`. You need at least one approving review to merge.
 - Squash all commits on your branch before merging into `main` to ensure a straightforward commit history.
+
+## Troubleshooting
+* While installing, if you run into an error about `PUPPETEER`, the fix is to just follow the instructions provided in console and to actually disable it. 

feedingwebapp/package.json

@@ -26,6 +26,7 @@
     "react-script-tag": "^1.1.2",
     "react-scripts": "5.0.1",
     "react-split-pane": "^0.1.92",
+    "react-svg-path": "^1.14.0",
     "react-toastify": "^9.0.7",
     "roslib": "github:personalrobotics/roslibjs",
     "routes": "^2.1.0",

feedingwebapp/src/App.jsx

@@ -11,6 +11,9 @@ import Header from './Pages/Header/Header'
 import Home from './Pages/Home/Home'
 import Settings from './Pages/Settings/Settings'
 import TestROS from './ros/TestROS'
+import BiteSelectionButtonOverlay from './Pages/Home/BiteSelectionUIStates/BiteSelectionButtonOverlay'
+import BiteSelectionName from './Pages/Home/BiteSelectionUIStates/BiteSelectionName'
+import BiteSelectionPointMask from './Pages/Home/BiteSelectionUIStates/BiteSelectionPointMask'
 
 // Flag for whether to run the app in debug mode or not. When running in debug
 // mode, the app does not connect to ROS. Anytime where it would wait for the
@@ -69,6 +72,36 @@ function App() {
               </ROS>
             }
           />
+          <Route
+            exact
+            path='/test_bite_selection_ui/button_overlay_selection'
+            element={
+              <ROS>
+                <Header />
+                <BiteSelectionButtonOverlay debug={debug} />
+              </ROS>
+            }
+          />
+          <Route
+            exact
+            path='/test_bite_selection_ui/point_mask_selection'
+            element={
+              <ROS>
+                <Header />
+                <BiteSelectionPointMask debug={debug} />
+              </ROS>
+            }
+          />
+          <Route
+            exact
+            path='/test_bite_selection_ui/food_name_selection'
+            element={
+              <ROS>
+                <Header />
+                <BiteSelectionName debug={debug} />
+              </ROS>
+            }
+          />
         </Routes>
       </Router>
     </>

feedingwebapp/src/Pages/Home/BiteSelectionUIStates/BiteSelectionButtonOverlay.jsx

@@ -0,0 +1,78 @@
+// React Imports
+import React from 'react'
+import Button from 'react-bootstrap/Button'
+
+// Local Imports
+import '../Home.css'
+import ImageWithButtonOverlay from './ImageWithButtonOverlay'
+
+/**
+ * The BiteSelection component appears after the robot has moved above the plate,
+ * plate. It enables users to select their desired food item.
+ */
+const BiteSelectionButtonOverlay = () => {
+  /**
+   * TODO: Make sure to add the function for Locate Plate and Done Eating
+   * Make sure to add back the global state related variable as well!
+   */
+
+  // Render the component
+  return (
+    <>
+      {/**
+       * In addition to selecting their desired food item, the user has two
+       * other options on this page:
+       *   - If their desired food item is not visible on the plate, they can
+       *     decide to teleoperate the robot until it is visible.
+       *   - Instead of selecting their next bite, the user can indicate that
+       *     they are done eating.
+       */}
+
+      {/**
+       * TODO: Make sure to add back the callback function calls in onClick
+       * property for these buttons! Make sure to also removed the disabled
+       * property!
+       */}
+      <div style={{ display: 'block' }}>
+        <Button
+          className='doneButton'
+          style={{ fontSize: '24px', marginTop: '0px', marginRight: '10px', marginLeft: 'auto', display: 'block' }}
+          disabled={true}
+        >
+          🍽️ Locate Plate
+        </Button>
+        <Button
+          className='doneButton'
+          style={{ fontSize: '24px', marginTop: '0px', marginRight: '10px', marginLeft: 'auto', display: 'block' }}
+          disabled={true}
+        >
+          ✅ Done Eating
+        </Button>
+      </div>
+      <div>
+        {/**
+         * Make sure to subsititute the hard-coded values of imgWidth and imgHeight with the values from
+         * constants. The width and height are the dimensions of the image coming from realsense.
+         */}
+        <ImageWithButtonOverlay
+          imgSrc={require('./images/food.jpg')}
+          imgWidth={1021}
+          imgHeight={779}
+          buttonCenters={[
+            { name: 'Salad', x: 330, y: 115, rectWidth: 130, rectHeight: 100 },
+            { name: 'Salad', x: 490, y: 210, rectWidth: 180, rectHeight: 100 },
+            { name: 'Salad', x: 540, y: 170, rectWidth: 130, rectHeight: 100 },
+            { name: 'Chicken', x: 250, y: 340, rectWidth: 290, rectHeight: 250 },
+            { name: 'Chicken', x: 360, y: 520, rectWidth: 250, rectHeight: 170 },
+            { name: 'Chicken', x: 450, y: 620, rectWidth: 200, rectHeight: 140 },
+            { name: 'Fries', x: 520, y: 350, rectWidth: 250, rectHeight: 185 },
+            { name: 'Fries', x: 750, y: 330, rectWidth: 120, rectHeight: 170 },
+            { name: 'Fries', x: 650, y: 640, rectWidth: 150, rectHeight: 100 }
+          ]}
+        />
+      </div>
+    </>
+  )
+}
+
+export default BiteSelectionButtonOverlay

feedingwebapp/src/Pages/Home/BiteSelectionUIStates/BiteSelectionName.jsx

@@ -0,0 +1,64 @@
+// React Imports
+import React from 'react'
+import Button from 'react-bootstrap/Button'
+
+// Local Imports
+import '../Home.css'
+import ImageWithButtonName from './ImageWithButtonName'
+
+/**
+ * The BiteSelection component appears after the robot has moved above the plate,
+ * plate. It enables users to select their desired food item.
+ */
+const BiteSelectionName = () => {
+  /**
+   * TODO: Make sure to add the function for Locate Plate and Done Eating
+   * Make sure to add back the global state related variable as well!
+   */
+
+  // Render the component
+  return (
+    <>
+      {/**
+       * In addition to selecting their desired food item, the user has two
+       * other options on this page:
+       *   - If their desired food item is not visible on the plate, they can
+       *     decide to teleoperate the robot until it is visible.
+       *   - Instead of selecting their next bite, the user can indicate that
+       *     they are done eating.
+       */}
+
+      {/**
+       * TODO: Make sure to add back the callback function calls in onClick
+       * property for these buttons! Make sure to also removed the disabled
+       * property!
+       */}
+      <div style={{ display: 'block' }}>
+        <Button
+          className='doneButton'
+          style={{ fontSize: '24px', marginTop: '0px', marginRight: '10px', marginLeft: 'auto', display: 'block' }}
+          disabled={true}
+        >
+          🍽️ Locate Plate
+        </Button>
+        <Button
+          className='doneButton'
+          style={{ fontSize: '24px', marginTop: '0px', marginRight: '10px', marginLeft: 'auto', display: 'block' }}
+          disabled={true}
+        >
+          ✅ Done Eating
+        </Button>
+      </div>
+      <div>
+        <ImageWithButtonName
+          imgSrc={require('./images/food.jpg')}
+          imgWidth={1021}
+          imgHeight={779}
+          foodItems={['Chicken', 'Salad', 'Fries']}
+        />
+      </div>
+    </>
+  )
+}
+
+export default BiteSelectionName

feedingwebapp/src/Pages/Home/BiteSelectionUIStates/BiteSelectionPointMask.jsx

@@ -0,0 +1,59 @@
+// React Imports
+import React from 'react'
+import Button from 'react-bootstrap/Button'
+
+// Local Imports
+import '../Home.css'
+import ImageWithPointMask from './ImageWithPointMask'
+
+/**
+ * The BiteSelection component appears after the robot has moved above the plate,
+ * plate. It enables users to select their desired food item.
+ */
+const BiteSelectionPointMask = () => {
+  /**
+   * TODO: Make sure to add the function for Locate Plate and Done Eating
+   * Make sure to add back the global state related variable as well!
+   */
+
+  // Render the component
+  return (
+    <>
+      {/**
+       * In addition to selecting their desired food item, the user has two
+       * other options on this page:
+       *   - If their desired food item is not visible on the plate, they can
+       *     decide to teleoperate the robot until it is visible.
+       *   - Instead of selecting their next bite, the user can indicate that
+       *     they are done eating.
+       */}
+
+      {/**
+       * TODO: Make sure to add back the callback function calls in onClick
+       * property for these buttons! Make sure to also removed the disabled
+       * property!
+       */}
+      <div style={{ display: 'block' }}>
+        <Button
+          className='doneButton'
+          style={{ fontSize: '24px', marginTop: '0px', marginRight: '10px', marginLeft: 'auto', display: 'block' }}
+          disabled={true}
+        >
+          🍽️ Locate Plate
+        </Button>
+        <Button
+          className='doneButton'
+          style={{ fontSize: '24px', marginTop: '0px', marginRight: '10px', marginLeft: 'auto', display: 'block' }}
+          disabled={true}
+        >
+          ✅ Done Eating
+        </Button>
+      </div>
+      <div>
+        <ImageWithPointMask imgSrc={require('./images/food.jpg')} imgWidth={1021} imgHeight={779} />
+      </div>
+    </>
+  )
+}
+
+export default BiteSelectionPointMask