@wandelbots/wandelbots-js-react-components 1.29.1 → 1.30.0

package/src/components/jogging/JoggingCartesianTab.tsx

@@ -1,7 +1,7 @@
 import {
+  Divider,
   Stack,
   ToggleButton,
-  ToggleButtonGroup,
   Typography,
   useTheme,
 } from "@mui/material"
@@ -15,10 +15,10 @@ import RotationIcon from "../../icons/rotation.svg"
 import { useReaction } from "../utils/hooks"
 import { JoggingActivationRequired } from "./JoggingActivationRequired"
 import { JoggingCartesianAxisControl } from "./JoggingCartesianAxisControl"
-import { JoggingCartesianValues } from "./JoggingCartesianValues"
 import { JoggingJointLimitDetector } from "./JoggingJointLimitDetector"
 import { JoggingOptions } from "./JoggingOptions"
 import type { DiscreteIncrementOption, JoggingStore } from "./JoggingStore"
+import { JoggingToggleButtonGroup } from "./JoggingToggleButtonGroup"
 import { JoggingVelocitySlider } from "./JoggingVelocitySlider"
 
 type JoggingCartesianOpts = {
@@ -152,26 +152,26 @@ export const JoggingCartesianTab = observer(
     }
 
     return (
-      <Stack flexGrow={1} gap={4}>
-        <Stack>
-          {/* Show Wandelscript string for the current coords */}
-          <JoggingCartesianValues store={store} />
-
+      <Stack flexGrow={1} gap={2} sx={{ padding: "18px 24px" }}>
+        <Stack gap={2}>
           {/* Jogging options */}
           <JoggingOptions store={store} />
+
+          {/* Velocity slider */}
+          <JoggingVelocitySlider store={store} />
+          <Divider />
         </Stack>
 
         <Stack
-          width="80%"
-          maxWidth="296px"
+          //maxWidth="296px"
           marginLeft="auto"
           marginRight="auto"
-          marginTop="8px"
-          marginBottom="8px"
-          gap="12px"
+          gap="24px"
+          justifyContent="center"
+          sx={{ flexGrow: "1" }}
         >
           {/* Translate or rotate toggle */}
-          <ToggleButtonGroup
+          <JoggingToggleButtonGroup
             value={store.selectedCartesianMotionType}
             onChange={onMotionTypeChange}
             exclusive
@@ -184,105 +184,95 @@ export const JoggingCartesianTab = observer(
             <ToggleButton value="rotate">
               {t("Jogging.Cartesian.Rotation.bt")}
             </ToggleButton>
-          </ToggleButtonGroup>
-        </Stack>
+          </JoggingToggleButtonGroup>
 
-        <JoggingActivationRequired store={store}>
-          <Stack
-            width="80%"
-            maxWidth="296px"
-            marginLeft="auto"
-            marginRight="auto"
-            marginTop="8px"
-            marginBottom="8px"
-            gap="12px"
-          >
-            {/* Cartesian translate jogging */}
-            {store.selectedCartesianMotionType === "translate" &&
-              axisList.map((axis) => (
-                <JoggingCartesianAxisControl
-                  key={axis.id}
-                  colors={axis.colors}
-                  disabled={store.isLocked}
-                  label={
-                    <>
-                      {axis.icon}
-                      <Typography
-                        sx={{
-                          fontSize: "24px",
-                          color: "white",
-                        }}
-                      >
-                        {axis.id.toUpperCase()}
-                      </Typography>
-                    </>
-                  }
-                  getDisplayedValue={() =>
-                    formatMM(
-                      store.jogger.motionStream.rapidlyChangingMotionState
-                        .tcp_pose?.position[axis.id] || 0,
-                    )
-                  }
-                  startJogging={(direction: "-" | "+") =>
-                    startCartesianJogging({
-                      axis: axis.id,
-                      motionType: "translate",
-                      direction,
-                    })
-                  }
-                  stopJogging={stopJogging}
-                />
-              ))}
+          <JoggingActivationRequired store={store}>
+            <Stack alignItems="center" gap="24px" sx={{ flexGrow: 1 }}>
+              {/* Cartesian translate jogging */}
+              {store.selectedCartesianMotionType === "translate" &&
+                axisList.map((axis) => (
+                  <JoggingCartesianAxisControl
+                    key={axis.id}
+                    colors={axis.colors}
+                    disabled={store.isLocked}
+                    label={
+                      <>
+                        {axis.icon}
+                        <Typography
+                          sx={{
+                            fontSize: "24px",
+                            color: theme.palette.text.primary,
+                          }}
+                        >
+                          {axis.id.toUpperCase()}
+                        </Typography>
+                      </>
+                    }
+                    getDisplayedValue={() =>
+                      formatMM(
+                        store.jogger.motionStream.rapidlyChangingMotionState
+                          .tcp_pose?.position[axis.id] || 0,
+                      )
+                    }
+                    startJogging={(direction: "-" | "+") =>
+                      startCartesianJogging({
+                        axis: axis.id,
+                        motionType: "translate",
+                        direction,
+                      })
+                    }
+                    stopJogging={stopJogging}
+                  />
+                ))}
 
-            {/* Cartesian rotate jogging */}
-            {store.selectedCartesianMotionType === "rotate" &&
-              axisList.map((axis) => (
-                <JoggingCartesianAxisControl
-                  key={axis.id}
-                  colors={axis.colors}
-                  disabled={store.isLocked}
-                  label={
-                    <>
-                      <RotationIcon />
-                      <Typography
-                        sx={{
-                          fontSize: "24px",
-                          color: "white",
-                        }}
-                      >
-                        {axis.id.toUpperCase()}
-                      </Typography>
-                    </>
-                  }
-                  getDisplayedValue={() =>
-                    formatDegrees(
-                      store.jogger.motionStream.rapidlyChangingMotionState
-                        .tcp_pose?.orientation?.[axis.id] || 0,
-                    )
-                  }
-                  startJogging={(direction: "-" | "+") =>
-                    startCartesianJogging({
-                      axis: axis.id,
-                      motionType: "rotate",
-                      direction,
-                    })
-                  }
-                  stopJogging={stopJogging}
-                />
-              ))}
-          </Stack>
-        </JoggingActivationRequired>
+              {/* Cartesian rotate jogging */}
+              {store.selectedCartesianMotionType === "rotate" &&
+                axisList.map((axis) => (
+                  <JoggingCartesianAxisControl
+                    key={axis.id}
+                    colors={axis.colors}
+                    disabled={store.isLocked}
+                    label={
+                      <>
+                        <RotationIcon />
+                        <Typography
+                          sx={{
+                            fontSize: "24px",
+                            color: theme.palette.text.primary,
+                          }}
+                        >
+                          {axis.id.toUpperCase()}
+                        </Typography>
+                      </>
+                    }
+                    getDisplayedValue={() =>
+                      formatDegrees(
+                        store.jogger.motionStream.rapidlyChangingMotionState
+                          .tcp_pose?.orientation?.[axis.id] || 0,
+                      )
+                    }
+                    startJogging={(direction: "-" | "+") =>
+                      startCartesianJogging({
+                        axis: axis.id,
+                        motionType: "rotate",
+                        direction,
+                      })
+                    }
+                    stopJogging={stopJogging}
+                  />
+                ))}
+            </Stack>
+          </JoggingActivationRequired>
+        </Stack>
 
-        <Stack>
-          {/* Show message if joint limits reached */}
-          <JoggingJointLimitDetector store={store} />
+        {/* Show message if joint limits reached */}
+        <JoggingJointLimitDetector store={store} />
 
-          {/* Velocity slider */}
-          <JoggingVelocitySlider store={store} />
+        {children && <Divider />}
 
-          {/* Custom content */}
-          {children}
-        </Stack>
+        {/* Custom content */}
+
+        {children}
       </Stack>
     )
   },

package/src/components/jogging/JoggingJointLimitDetector.tsx

@@ -38,13 +38,16 @@ export const JoggingJointLimitDetector = ({
     if (limitReached) jointLimitReachedIndices.push(index)
   }
 
+  if (jointLimitReachedIndices.length === 0) {
+    return null
+  }
   return (
     <Typography
       color="error"
       sx={{
         margin: "0.5rem 1rem",
         textAlign: "center",
-        visibility: jointLimitReachedIndices.length ? "visible" : "hidden",
+        visibility: jointLimitReachedIndices.length ? "visible" : "collapse",
       }}
     >
       {t("Jogging.JointLimitsReached.lb", {

package/src/components/jogging/JoggingJointRotationControl.tsx

@@ -1,6 +1,6 @@
 import ChevronLeft from "@mui/icons-material/ChevronLeft"
 import ChevronRight from "@mui/icons-material/ChevronRight"
-import { IconButton, Slider, Typography } from "@mui/material"
+import { IconButton, Slider, Typography, useTheme } from "@mui/material"
 import Stack from "@mui/material/Stack"
 import throttle from "lodash-es/throttle"
 import { observer, useLocalObservable } from "mobx-react-lite"
@@ -33,6 +33,12 @@ export const JoggingJointRotationControl = externalizeComponent(
     }: JoggingJointRotationControlProps) => {
       const { t } = useTranslation()
       const [currentValue, setCurrentValue] = useState<number | undefined>()
+      const theme = useTheme()
+
+      const pressedButtonStyle = {
+        background: theme.palette.backgroundPaperElevation?.[4],
+        color: theme.palette.backgroundPaperElevation?.[11],
+      }
 
       const state = useLocalObservable(() => ({
         activeJoggingDir: null as "-" | "+" | null,
@@ -92,23 +98,31 @@ export const JoggingJointRotationControl = externalizeComponent(
         <Stack
           height="64px"
           width="100%"
-          maxWidth="300px"
+          maxWidth="260px"
           direction="row"
           {...rest}
           sx={{
             "& .MuiIconButton-root": {
               width: "52px",
-              color: "white",
+              color: theme.palette.text.primary,
               alignContent: "center",
-              backgroundColor: "#38445A",
-              "&:disabled": {
-                opacity: 0.5,
-                backgroundColor: "#38445A",
-              },
+              backgroundColor: theme.palette.backgroundPaperElevation?.[11],
               "& svg": {
                 width: "42px",
                 height: "42px",
               },
+
+              "&.Mui-disabled": {
+                backgroundColor: theme.palette.backgroundPaperElevation?.[11],
+                color: theme.palette.action.disabled,
+                opacity: 1,
+              },
+              "&:hover": {
+                backgroundColor: theme.palette.backgroundPaperElevation?.[9],
+              },
+              "&:active": {
+                ...pressedButtonStyle,
+              },
             },
           }}
         >
@@ -117,10 +131,10 @@ export const JoggingJointRotationControl = externalizeComponent(
             onPointerUp={onPointerUp}
             onPointerOut={onPointerOut}
             disabled={disabled}
+            disableRipple
             sx={{
               borderRadius: "16px 0px 0px 16px",
-              backgroundColor:
-                state.activeJoggingDir === "-" ? "#495975" : undefined,
+              ...(state.activeJoggingDir === "-" ? pressedButtonStyle : {}),
             }}
           >
             <ChevronLeft />
@@ -134,10 +148,8 @@ export const JoggingJointRotationControl = externalizeComponent(
               borderStyle: "solid",
               borderLeftWidth: 0,
               borderRightWidth: 0,
-              borderTopWidth: "4px",
-              borderBottomWidth: "4px",
-              backgroundColor: "#38445A",
-              borderColor: "#38445A",
+              border: "none",
+              backgroundColor: theme.palette.backgroundPaperElevation?.[11],
               paddingLeft: "20px",
               paddingRight: "20px",
               zIndex: 1,
@@ -146,9 +158,13 @@ export const JoggingJointRotationControl = externalizeComponent(
             <Typography
               sx={{
                 fontSize: "15px",
+                fontWeight: 700,
                 position: "relative",
                 top: "5px",
-                color: "white",
+
+                color: disabled
+                  ? theme.palette.action.disabled
+                  : theme.palette.text.primary,
               }}
             >
               {formatDegrees(currentValue)}
@@ -167,16 +183,21 @@ export const JoggingJointRotationControl = externalizeComponent(
                 },
                 "& .MuiSlider-thumb": {
                   width: "5px",
-                  height: "10px",
+                  height: "12px",
                   borderRadius: "2px",
+                  color: disabled
+                    ? theme.palette.action.disabled
+                    : theme.palette.text.primary,
                 },
                 "& .MuiSlider-markLabel": {
                   top: "20px",
                   fontSize: "12px",
-                  color: "white",
+                  color: disabled
+                    ? theme.palette.action.disabled
+                    : theme.palette.text.secondary,
                 },
                 "& .MuiSlider-rail": {
-                  backgroundColor: "#1F283A",
+                  backgroundColor: theme.palette.backgroundPaperElevation?.[5],
                   opacity: 1,
                 },
               }}
@@ -201,12 +222,10 @@ export const JoggingJointRotationControl = externalizeComponent(
             onPointerUp={onPointerUp}
             onPointerOut={onPointerOut}
             disabled={disabled}
+            disableRipple
             sx={{
               borderRadius: "0px 16px 16px 0px",
-              backgroundColor:
-                state.activeJoggingDir === "+"
-                  ? "#495975 !important"
-                  : "#38445A",
+              ...(state.activeJoggingDir === "+" ? pressedButtonStyle : {}),
             }}
           >
             <ChevronRight />

package/src/components/jogging/JoggingJointTab.tsx

@@ -1,11 +1,10 @@
-import { Stack, Typography } from "@mui/material"
+import { Divider, Stack } from "@mui/material"
 import { radiansToDegrees } from "@wandelbots/wandelbots-js"
 import { observer } from "mobx-react-lite"
 import type { ReactNode } from "react"
 import { JoggingActivationRequired } from "./JoggingActivationRequired"
 import { JoggingJointLimitDetector } from "./JoggingJointLimitDetector"
 import { JoggingJointRotationControl } from "./JoggingJointRotationControl"
-import { JoggingJointValues } from "./JoggingJointValues"
 import type { JoggingStore } from "./JoggingStore"
 import { JoggingVelocitySlider } from "./JoggingVelocitySlider"
 
@@ -27,37 +26,33 @@ export const JoggingJointTab = observer(
     }
 
     return (
-      <Stack flexGrow={1} justifyContent="space-between">
-        <JoggingJointValues store={store} />
-        <JoggingActivationRequired store={store}>
-          <Stack gap="0.8rem">
-            {store.jogger.motionStream.joints.map((joint) => {
-              const jointLimits =
-                store.motionGroupSpec.mechanical_joint_limits?.[joint.index]
-              const lowerLimitDegs =
-                jointLimits?.lower_limit !== undefined
-                  ? radiansToDegrees(jointLimits.lower_limit)
-                  : undefined
-              const upperLimitDegs =
-                jointLimits?.upper_limit !== undefined
-                  ? radiansToDegrees(jointLimits.upper_limit)
-                  : undefined
+      <Stack flexGrow={1} gap={2} sx={{ padding: "18px 24px" }}>
+        <JoggingVelocitySlider store={store} />
+        <Divider />
 
-              return (
-                <Stack
-                  direction="row"
-                  alignItems="center"
-                  gap={2}
-                  key={`joint-${joint.index}`}
-                >
-                  <Typography
-                    sx={{
-                      flexGrow: 1,
-                      textAlign: "right",
-                    }}
-                  >{`J${joint.index + 1}`}</Typography>
+        <Stack
+          justifyContent="center"
+          alignItems="stretch"
+          sx={{ flexGrow: "1" }}
+          id="JointControls"
+        >
+          <JoggingActivationRequired store={store}>
+            <Stack alignItems="center" gap="24px" sx={{ flexGrow: 1 }}>
+              {store.jogger.motionStream.joints.map((joint) => {
+                const jointLimits =
+                  store.motionGroupSpec.mechanical_joint_limits?.[joint.index]
+                const lowerLimitDegs =
+                  jointLimits?.lower_limit !== undefined
+                    ? radiansToDegrees(jointLimits.lower_limit)
+                    : undefined
+                const upperLimitDegs =
+                  jointLimits?.upper_limit !== undefined
+                    ? radiansToDegrees(jointLimits.upper_limit)
+                    : undefined
+
+                return (
                   <JoggingJointRotationControl
-                    key={joint.index}
+                    key={`joint-${joint.index}`}
                     disabled={store.isLocked}
                     lowerLimitDegs={lowerLimitDegs}
                     upperLimitDegs={upperLimitDegs}
@@ -77,19 +72,15 @@ export const JoggingJointTab = observer(
                     }
                     stopJogging={stopJointJogging}
                   />
-                  {/* Just to balance out the right side */}
-                  <Typography
-                    sx={{
-                      flexGrow: 1,
-                    }}
-                  />
-                </Stack>
-              )
-            })}
-          </Stack>
-        </JoggingActivationRequired>
+                )
+              })}
+            </Stack>
+          </JoggingActivationRequired>
+        </Stack>
         <JoggingJointLimitDetector store={store} />
-        <JoggingVelocitySlider store={store} />
+
+        {children && <Divider />}
+
         {/* Custom content */}
         {children}
       </Stack>