Make App Responsiveness

feedingwebapp/src/Pages/Footer/Footer.jsx

@@ -1,5 +1,5 @@
 // React imports
-import React from 'react'
+import React, { useCallback } from 'react'
 import { MDBFooter } from 'mdb-react-ui-kit'
 import Button from 'react-bootstrap/Button'
 import { View } from 'react-native'
@@ -39,69 +39,71 @@ const Footer = (props) => {
   // sizes for footer buttons and icons (width, height, fontsize)
   let pauseButtonWidth = '98vw'
   let backResumeButtonWidth = '47vw'
-  let footerHeight = isPortrait ? '11vh' : '11vw'
+  let footerHeight = isPortrait ? '10vh' : '10vw'
   let pauseFontSize = isPortrait ? '7vh' : '7vw'
   let backResumeFontSize = '6vw'
   // Margins around footer buttons
-  let footerLeftRightMargin = isPortrait ? '1.5vh' : '1.5vw'
+  let footerLeftRightMargin = isPortrait ? '1.6vh' : '1.6vw'
   let footerTopBottomMargin = isPortrait ? '0.3vh' : '0.3vw'
-  // Text list for footer buttons
-  const texts = ['Pause', 'Back', 'Resume']
-  // Icon list for footer buttons
-  const icons = [pauseIcon, backIcon, resumeIcon]
-  // Variant list for footer buttons
-  const variants = ['danger', 'warning', 'success']
-  // font sizes for footer button texts
-  const fontSizes = [pauseFontSize, backResumeFontSize, backResumeFontSize]
-  // button widths for footer
-  const buttonWidths = [pauseButtonWidth, backResumeButtonWidth, backResumeButtonWidth]
-  // callback functions for footer button click
-  const callbacks = [props.pauseCallback, props.backCallback, props.resumeCallback]
+  // A single nested object with all footer buttons' properties
+  const buttonConfig = {
+    pause: {
+      text: 'Pause',
+      icon: pauseIcon,
+      disabled: false,
+      variant: 'danger',
+      callback: props.pauseCallback
+    },
+    back: {
+      text: 'Back',
+      icon: backIcon,
+      disabled: false,
+      variant: 'warning',
+      callback: props.backCallback
+    },
+    resume: {
+      text: 'Resume',
+      icon: resumeIcon,
+      disabled: false,
+      variant: 'success',
+      callback: props.resumeCallback
+    },
+    phantom: {
+      text: null,
+      icon: phantomButtonIcon,
+      disabled: true,
+      variant: 'ghost',
+      callback: null
+    }
+  }
 
   /**
    * Get the footer text and button to render in footer.
    *
+   * @param {number} config - a single nested object with properties of
+   *
    * @returns {JSX.Element} the footer text and button
    */
-  function renderFooterButton(index) {
-    if (index === 3) {
-      return (
-        <>
-          <Button
-            variant='ghost'
-            disabled={true}
-            style={{
-              backgroundColor: 'transparent',
-              border: 'none',
-              marginTop: footerTopBottomMargin,
-              marginLeft: footerLeftRightMargin,
-              marginRight: footerLeftRightMargin,
-              marginBottom: footerTopBottomMargin,
-              width: backResumeButtonWidth,
-              height: footerHeight,
-              '--bs-btn-padding-y': '0rem'
-            }}
-          >
-            <img style={{ width: '100%', height: footerHeight }} src={phantomButtonIcon} alt='phantom_button_img' className='center' />
-          </Button>
-        </>
-      )
-    } else {
+  const renderFooterButton = useCallback(
+    (config) => {
       return (
         <>
           <Row className='justify-content-center'>
             <Button
-              variant={variants[index]}
-              onClick={callbacks[index]}
+              variant={config.variant}
+              disabled={config.disabled}
+              onClick={config.callback}
               style={{
-                width: buttonWidths[index],
-                justifyContent: 'center',
-                alignItems: 'center',
-                height: footerHeight,
+                backgroundColor: config.text === null ? 'transparent' : null,
+                border: 'none',
                 marginTop: footerTopBottomMargin,
                 marginLeft: footerLeftRightMargin,
                 marginRight: footerLeftRightMargin,
                 marginBottom: footerTopBottomMargin,
+                width: config.text === 'Pause' ? pauseButtonWidth : backResumeButtonWidth,
+                height: footerHeight,
+                justifyContent: 'center',
+                alignItems: 'center',
                 '--bs-btn-padding-y': '0rem',
                 '--bs-btn-padding-x': '0rem'
               }}
@@ -117,14 +119,14 @@ const Footer = (props) => {
                     className='transitionMessage'
                     style={{
                       marginBottom: '0',
-                      fontSize: fontSizes[index],
+                      fontSize: config.text === 'Pause' ? pauseFontSize : backResumeFontSize,
                       color: 'black',
                       fontWeight: 'bold',
                       padding: '0',
                       textAlign: 'right'
                     }}
                   >
-                    {texts[index]}
+                    {config.text}
                   </p>
                 </View>
                 <View style={{ flex: 1, justifyContent: 'center', alignItems: 'flex-start' }}>
@@ -134,7 +136,7 @@ const Footer = (props) => {
                         width: '100%',
                         height: footerHeight
                       }}
-                      src={icons[index]}
+                      src={config.icon}
                       alt='icon_img'
                     />
                   </div>
@@ -144,8 +146,9 @@ const Footer = (props) => {
           </Row>
         </>
       )
-    }
-  }
+    },
+    [backResumeButtonWidth, pauseButtonWidth, pauseFontSize, backResumeFontSize, footerHeight, footerLeftRightMargin, footerTopBottomMargin]
+  )
 
   // Render the component
   return (
@@ -154,11 +157,11 @@ const Footer = (props) => {
         <div className='text-center' style={{ backgroundColor: 'rgba(0, 0, 0, 0.2)', paddingBottom: '5px', paddingTop: '5px' }}>
           {props.paused ? (
             <View style={{ flexDirection: 'row', justifyContent: 'center' }}>
-              <View>{props.backCallback ? renderFooterButton(1) : renderFooterButton(3)}</View>
-              <View>{props.resumeCallback ? renderFooterButton(2) : renderFooterButton(3)}</View>
+              <View>{props.backCallback ? renderFooterButton(buttonConfig.back) : renderFooterButton(buttonConfig.phantom)}</View>
+              <View>{props.resumeCallback ? renderFooterButton(buttonConfig.resume) : renderFooterButton(buttonConfig.phantom)}</View>
             </View>
           ) : (
-            renderFooterButton(0)
+            renderFooterButton(buttonConfig.pause)
           )}
         </div>
       </MDBFooter>

feedingwebapp/src/Pages/Header/Header.jsx

@@ -22,32 +22,23 @@ import LiveVideoModal from './LiveVideoModal'
 
 /**
  * The Header component consists of the navigation bar (which has buttons Home,
- * Settings, Plate Locator, Done Eating, Lock Icon and Robot Connection Icon and Video).
- * Live video view is toggled on and off by clicking "Video", and the ToastContainer
- * popup that specifies when the user cannot click Settings.
- *
- * In addition to selecting their desired food item, the user has two
- * other options on the header:
- * - 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.
- * */
+ * Settings, Lock and Robot Connection Icon and Video). Live video view is toggled on and off by
+ * clicking "Video", and the ToastContainer popup that specifies when the user
+ * cannot click Settings.
+ */
 const Header = (props) => {
   // Create a local state variable to toggle on/off the video
   // TODO: Since this local state variable is in the header, the LiveVideoModal
   // continues showing even if the state changes. Is this desirable? Perhaps
   // it should close if the state changes?
   const [videoShow, setVideoShow] = useState(false)
-  // Get the relevant global variables
-  const setMealState = useGlobalState((state) => state.setMealState)
   // useROS gives us access to functions to configure and interact with ROS.
   let { ros } = useROS()
   const [isConnected, setIsConncected] = useState(ros.isConnected)
   // Flag to check if the current orientation is portrait
   const isPortrait = useMediaQuery({ query: '(orientation: portrait)' })
   // Sizes of header elements (fontSize, width, height)
-  let textFontSize = isPortrait ? '1.9vh' : '1.9vw'
+  let textFontSize = isPortrait ? '2.5vh' : '2.5vw'
   let lockIconWidth = isPortrait ? '4vh' : '4vw'
   let lockIconHeight = isPortrait ? '5vh' : '5vw'
   let lockImageHeight = isPortrait ? '4vh' : '4vw'
@@ -74,24 +65,6 @@ const Header = (props) => {
     setAppPage(APP_PAGE.Home)
   }, [setAppPage])
 
-  /**
-   * Callback function for when the user indicates that they want to move the
-   * robot to locate the plate.
-   */
-  const locatePlateClicked = useCallback(() => {
-    console.log('locatePlateClicked')
-    setMealState(MEAL_STATE.U_PlateLocator)
-  }, [setMealState])
-
-  /**
-   * Callback function for when the user indicates that they are done with their
-   * meal.
-   */
-  const doneEatingClicked = useCallback(() => {
-    console.log('doneEatingClicked')
-    setMealState(MEAL_STATE.R_StowingArm)
-  }, [setMealState])
-
   /**
    * When the Settings button in the header is clicked, if the meal has not yet
    * started, take the user to the settings menu. Else, ask them to complete
@@ -112,10 +85,12 @@ const Header = (props) => {
        * The ToastContainer is an alert that pops up on the top of the screen
        * and has a timeout.
        */}
-      <ToastContainer style={{ fontSize: '4vh' }} />
+      <ToastContainer style={{ fontSize: textFontSize }} />
       {/**
-       * 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.
+       * The NavBar has two elements, Home and Settings, on the left side and three
+       * elements, Lock, Robot Connection Icon and VideoVideo, on the right side.
+       * An image showing the connection status
+       * of the robot is placed in between Lock and Video.
        */}
       <Navbar
         collapseOnSelect
@@ -131,7 +106,7 @@ const Header = (props) => {
           variant='dark'
           style={{ '--bs-navbar-padding-x': '0rem', '--bs-navbar-padding-y': '0.2rem' }}
         >
-          <Nav className='m-auto'>
+          <Nav className='me-auto'>
             <Nav.Link
               onClick={homeClicked}
               className='text-dark bg-info border border-info rounded mx-1 btn-lg btn-huge p-2'
@@ -146,59 +121,47 @@ const Header = (props) => {
             >
               Settings
             </Nav.Link>
-            <Nav.Link
-              onClick={locatePlateClicked}
-              className='text-dark bg-info border border-info rounded mx-1 btn-lg btn-huge p-2'
-              style={{ fontSize: textFontSize }}
-            >
-              🍽️
-            </Nav.Link>
-            <Nav.Link
-              onClick={doneEatingClicked}
-              className='text-dark bg-info border border-info rounded mx-1 btn-lg btn-huge p-2'
-              style={{ fontSize: textFontSize }}
-            >
-              ✅
-            </Nav.Link>
-            {NON_MOVING_STATES.has(mealState) || paused || (mealState === MEAL_STATE.U_PlateLocator && teleopIsMoving === false) ? (
-              <div>
-                <Button
-                  variant='danger'
-                  disabled={true}
-                  style={{
-                    marginLeft: headerMargin,
-                    marginRight: headerMargin,
-                    width: lockIconWidth,
-                    height: lockIconHeight,
-                    opacity: 1,
-                    '--bs-btn-padding-y': '0rem',
-                    '--bs-btn-padding-x': '0rem'
-                  }}
-                >
-                  <img
-                    style={{ width: lockIconWidth, height: lockImageHeight }}
-                    src='/robot_state_imgs/lock_icon_image.svg'
-                    alt='lock_icon_img'
-                    className='center'
-                  />
-                </Button>
-              </div>
-            ) : (
-              <></>
-            )}
-            {isConnected ? (
-              <div>
-                <p className='connectedDiv' style={{ fontSize: textFontSize, margin: headerMargin }}>
-                  🔌
-                </p>
-              </div>
-            ) : (
-              <div>
-                <p className='notConnectedDiv' style={{ fontSize: textFontSize, marginLeft: headerMargin, marginRight: headerMargin }}>
-                  ⛔
-                </p>
-              </div>
-            )}
+          </Nav>
+          {NON_MOVING_STATES.has(mealState) || paused || (mealState === MEAL_STATE.U_PlateLocator && teleopIsMoving === false) ? (
+            <div>
+              <Button
+                variant='danger'
+                disabled={true}
+                style={{
+                  marginLeft: headerMargin,
+                  marginRight: headerMargin,
+                  width: lockIconWidth,
+                  height: lockIconHeight,
+                  opacity: 1,
+                  '--bs-btn-padding-y': '0rem',
+                  '--bs-btn-padding-x': '0rem'
+                }}
+              >
+                <img
+                  style={{ width: lockIconWidth, height: lockImageHeight }}
+                  src='/robot_state_imgs/lock_icon_image.svg'
+                  alt='lock_icon_img'
+                  className='center'
+                />
+              </Button>
+            </div>
+          ) : (
+            <></>
+          )}
+          {isConnected ? (
+            <div>
+              <p className='connectedDiv' style={{ fontSize: textFontSize, margin: headerMargin }}>
+                🔌
+              </p>
+            </div>
+          ) : (
+            <div>
+              <p className='notConnectedDiv' style={{ fontSize: textFontSize, marginLeft: headerMargin, marginRight: headerMargin }}>
+                ⛔
+              </p>
+            </div>
+          )}
+          <Nav>
             <Nav.Link
               onClick={() => setVideoShow(true)}
               className='text-dark bg-info border border-info rounded mx-1 btn-lg btn-huge p-2'

feedingwebapp/src/Pages/Header/LiveVideoModal.jsx

@@ -1,5 +1,6 @@
 // React imports
 import React, { useEffect, useRef, useState } from 'react'
+import { useMediaQuery } from 'react-responsive'
 // 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'
@@ -34,6 +35,8 @@ function LiveVideoModal(props) {
   // Define variables for width and height of video
   const [width, setWidth] = useState(windowSize.width)
   const [height, setHeight] = useState(windowSize.height)
+  // Flag to check if the current orientation is portrait
+  const isPortrait = useMediaQuery({ query: '(orientation: portrait)' })
 
   // Update the image size when the screen changes size.
   useEffect(() => {
@@ -65,7 +68,9 @@ function LiveVideoModal(props) {
       fullscreen={true}
     >
       <Modal.Header closeButton>
-        <Modal.Title id='contained-modal-title-vcenter'>Live Video</Modal.Title>
+        <Modal.Title id='contained-modal-title-vcenter' style={{ fontSize: isPortrait ? '3vh' : '3vw' }}>
+          Live Video
+        </Modal.Title>
       </Modal.Header>
       <Modal.Body style={{ overflow: 'hidden' }}>
         <center>{showVideo(props.webVideoServerURL, width, height, null)}</center>