Selected UX visuals for the feature

nodes/move_to_pregrasp.py

@@ -500,7 +500,7 @@ def distance_callback(err: npt.NDArray[np.float32]) -> None:
                     # TODO: This sometimes ends up a few degrees off. The object is
                     # still in the gripper camera view, so users can resolve this,
                     # but we should look into why (odom -> base_link TF delay?
-                    # issue with termination thresholds? etc.)
+                    # issue with termination thresholds? robot's center of rotation? etc.)
                     joints_for_velocity_control += [Joint.BASE_ROTATION]
                     joint_position_overrides.update(
                         {

src/pages/operator/css/CameraView.css

@@ -6,7 +6,7 @@
   padding: 0.4rem;
   height: 100%;
   grid-template-columns: auto;
-  grid-template-rows: 1fr auto minmax(9rem, 1fr);
+  grid-template-rows: 1fr auto minmax(9rem, 2fr);
   object-fit: cover;
   justify-content: center;
   /* align-items: center;
@@ -239,7 +239,7 @@
 
 @media screen and (orientation: portrait) and (max-device-width: 900px) {
   .video-container {
-    grid-template-rows: 1fr auto minmax(3rem, 1fr);
+    grid-template-rows: 1fr auto minmax(3rem, 2fr);
   }
 }
 

src/pages/operator/css/basic_components.css

@@ -290,7 +290,7 @@ input[type="checkbox"] {
 /* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
 .accordion:hover,
 .active {
-  background-color: #ccc;
+  background-image: linear-gradient(rgba(0, 0, 0, 0.05) 0 0);
 }
 
 /* Style the accordion content title */
@@ -322,5 +322,5 @@ input[type="checkbox"] {
 }
 
 .accordion-item:hover {
-  background-color: #ccc;
+  background-image: linear-gradient(rgba(0, 0, 0, 0.15) 0 0);
 }

src/pages/operator/tsx/basic_components/AccordionSelect.tsx

@@ -5,6 +5,7 @@ import { className } from "shared/util";
 export const AccordionSelect = <T extends string | JSX.Element>(props: {
   title: string;
   possibleOptions: T[];
+  backgroundColor?: string;
   onChange: (selectedIndex: number) => void;
 }) => {
   const [active, setActiveState] = useState<boolean>(false);
@@ -38,13 +39,17 @@ export const AccordionSelect = <T extends string | JSX.Element>(props: {
       <button
         className={className("accordion", { active })}
         onClick={toggleAccordion}
+        style={{ backgroundColor: props.backgroundColor }}
       >
         {props.title}
         <span className="material-icons">expand_more</span>
       </button>
       <div
         ref={content}
-        style={{ maxHeight: `${height}` }}
+        style={{
+          maxHeight: `${height}`,
+          backgroundColor: props.backgroundColor,
+        }}
         className="accordion_content"
       >
         <div>{props.possibleOptions.map(mapFunc)}</div>

src/pages/operator/tsx/function_providers/UnderVideoFunctionProvider.tsx

@@ -21,6 +21,8 @@ export enum UnderVideoButton {
   CancelMoveToPregrasp = "Cancel Goal",
   CenterWrist = "Center Wrist",
   StowWrist = "Stow Wrist",
+  StartMoveToPregraspHorizontal = "Gripper Horizontal",
+  StartMoveToPregraspVertical = "Gripper Vertical",
 }
 
 /** Array of different perspectives for the overhead camera */
@@ -37,6 +39,12 @@ export const realsenseButtons: UnderVideoButton[] = [
   UnderVideoButton.LookAtGripper,
 ];
 
+/** Array of different options for the MoveToPregrasp feature on the realsense camera */
+export const realsenseMoveToPregraspButtons: UnderVideoButton[] = [
+  UnderVideoButton.StartMoveToPregraspHorizontal,
+  UnderVideoButton.StartMoveToPregraspVertical,
+];
+
 /** Array of different actions for the wrist */
 export const wristButtons: UnderVideoButton[] = [
   UnderVideoButton.CenterWrist,

src/pages/operator/tsx/layout_components/CameraView.tsx

@@ -37,6 +37,7 @@ import {
 import {
   OverheadButtons,
   realsenseButtons,
+  realsenseMoveToPregraspButtons,
   RealsenseButtons,
   UnderVideoButton,
   wristButtons,
@@ -180,14 +181,17 @@ export const CameraView = (props: CustomizableComponentProps) => {
     const resizeObserver = new ResizeObserver((entries) => {
       // height and width of area around the video stream
       const { height, width } = entries[0].contentRect;
+      const areaAspectRatio = width / height;
 
       // height and width of video stream
       if (!videoRef?.current) return;
       const videoRect = videoRef.current.getBoundingClientRect();
+      const videoAspectRatio = videoRect.width / videoRect.height;
 
-      if (Math.abs(videoRect.height - height) > 1.0) {
+      // Set whether the height or width is the constraining factor
+      if (areaAspectRatio > videoAspectRatio) {
         setConstrainedHeight(true);
-      } else if (Math.abs(videoRect.width - width) > 1.0) {
+      } else if (areaAspectRatio < videoAspectRatio) {
         setConstrainedHeight(false);
       }
     });
@@ -808,6 +812,38 @@ const UnderRealsenseButtons = (props: {
         }}
         label="Depth Sensing"
       />
+      <CheckToggleButton
+        checked={props.definition.depthSensing || false}
+        onClick={() => {
+          props.definition.depthSensing = !props.definition.depthSensing;
+          setRerender(!rerender);
+          underVideoFunctionProvider.provideFunctions(
+            UnderVideoButton.DepthSensing,
+          ).onCheck!(props.definition.depthSensing);
+        }}
+        label="Select Object"
+      />
+      <AccordionSelect
+        title="Align Gripper to Object"
+        possibleOptions={Object.values(realsenseMoveToPregraspButtons)}
+        backgroundColor="var(--selected-color"
+        onChange={(idx: number) => {
+          underVideoFunctionProvider.provideFunctions(
+            realsenseMoveToPregraspButtons[idx],
+          ).onClick!();
+        }}
+      />
+      <button className="map-cancel-btn" onPointerDown={() => {}}>
+        <span>Cancel</span>
+        <span className="material-icons">cancel</span>
+      </button>
+      {/* <button
+        className="map-play-btn"
+        onPointerDown={() => {}}
+      >
+        <span>Start</span>
+        <span className="material-icons">play_circle</span>
+      </button> */}
       {/* <CheckToggleButton
                 checked={props.definition.arucoMarkers || false}
                 onClick={() => {