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

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>

package/src/components/jogging/JoggingOptions.tsx

@@ -1,155 +1,129 @@
-import {
-  InputLabel,
-  MenuItem,
-  Select,
-  Stack,
-  ToggleButton,
-  ToggleButtonGroup,
-} from "@mui/material"
+import { Box, MenuItem } from "@mui/material"
 import { observer } from "mobx-react-lite"
 import { useTranslation } from "react-i18next"
-import OrientationCoordSysIcon from "../../icons/orientation-coord-system.svg"
-import OrientationToolIcon from "../../icons/orientation-tool.svg"
-import type { IncrementOptionId, JoggingStore } from "./JoggingStore"
+import AdornedSelect from "../experimental/utils/AdornedSelect"
+import {
+  ORIENTATION_IDS,
+  type IncrementOptionId,
+  type JoggingStore,
+  type OrientationId,
+} from "./JoggingStore"
 
 export const JoggingOptions = observer(({ store }: { store: JoggingStore }) => {
   const { t } = useTranslation()
 
-  function onOrientationChange(
-    _event: React.MouseEvent<HTMLElement>,
-    newOrientation: string,
-  ) {
-    if (newOrientation === "coordsys" || newOrientation === "tool")
-      store.setSelectedOrientation(newOrientation)
+  function translateOrientation(orientation: OrientationId): string {
+    switch (orientation) {
+      case "coordsys":
+        return t("Jogging.Orientation.coordsys")
+      case "tool":
+        return t("Jogging.Orientation.tool")
+      default:
+        return orientation
+    }
   }
 
   return (
-    <>
-      <Stack
-        direction={"row"}
-        alignItems={"center"}
-        spacing={2}
-        sx={{
-          padding: "6px 16px",
-          "& label": {
-            opacity: 0.7,
-            fontSize: "12px",
-            marginBottom: "4px",
-          },
+    <Box
+      sx={{
+        display: "grid",
+        gap: "16px",
+        gridTemplateColumns: "1fr 1fr",
+        gridTemplateRows: "min-height min-height",
+        "& label": {
+          opacity: 0.7,
+          fontSize: "12px",
+          marginBottom: "4px",
+        },
+      }}
+    >
+      {/* Coordinate system */}
+      <AdornedSelect
+        labelId="jogging-coord-select"
+        labelValue={"Coordinate Sys."}
+        value={store.selectedCoordSystemId}
+        size="small"
+        variant="filled"
+        displayEmpty={true}
+        onChange={(event) => {
+          store.setSelectedCoordSystemId(event.target.value as string)
         }}
+        disabled={store.isLocked}
       >
-        {/* Coordinate system */}
-        <Stack width="50%">
-          <InputLabel id="jogging-coord-select">{"Coordinate Sys."}</InputLabel>
-          <Select
-            labelId="jogging-coord-select"
-            value={store.selectedCoordSystemId}
-            size="small"
-            variant="filled"
-            displayEmpty={true}
-            onChange={(event) => {
-              store.setSelectedCoordSystemId(event.target.value as string)
-            }}
-            disabled={store.isLocked}
-          >
-            {store.coordSystems.map((cs) => (
-              <MenuItem key={cs.coordinate_system} value={cs.coordinate_system}>
-                {/* Distinguish coordinate systems with the same name */}
-                {cs.name && store.coordSystemCountByName[cs.name] > 1
-                  ? `${cs.name} / ${cs.coordinate_system}`
-                  : cs.name || cs.coordinate_system}
-              </MenuItem>
-            ))}
-          </Select>
-        </Stack>
+        {store.coordSystems.map((cs) => (
+          <MenuItem key={cs.coordinate_system} value={cs.coordinate_system}>
+            {/* Distinguish coordinate systems with the same name */}
+            {cs.name && store.coordSystemCountByName[cs.name] > 1
+              ? `${cs.name} / ${cs.coordinate_system}`
+              : cs.name || cs.coordinate_system}
+          </MenuItem>
+        ))}
+      </AdornedSelect>
 
-        {/* TCP selection */}
-        <Stack width="50%">
-          <InputLabel id="jogging-tcp-select">TCP</InputLabel>
-          <Select
-            labelId="jogging-tcp-select"
-            value={store.selectedTcpId}
-            size="small"
-            variant="filled"
-            onChange={(event) => {
-              store.setSelectedTcpId(event.target.value as string)
-            }}
-            disabled={store.isLocked}
-          >
-            {store.tcps.map((tcp) => (
-              <MenuItem key={tcp.id} value={tcp.id}>
-                {tcp.id}
-              </MenuItem>
-            ))}
-          </Select>
-        </Stack>
-      </Stack>
+      {/* TCP selection */}
 
-      <Stack
-        direction={"row"}
-        alignItems={"center"}
-        spacing={2}
-        sx={{
-          padding: "6px 16px",
-          "& label": {
-            opacity: 0.7,
-            fontSize: "12px",
-            marginBottom: "4px",
-          },
+      <AdornedSelect
+        labelId="jogging-tcp-select"
+        labelValue="TCP"
+        value={store.selectedTcpId}
+        size="small"
+        variant="filled"
+        onChange={(event) => {
+          store.setSelectedTcpId(event.target.value as string)
         }}
+        disabled={store.isLocked}
       >
-        {/* Orientation */}
-        <Stack width="50%">
-          <InputLabel id="orientation-select">
-            {t("Jogging.Cartesian.Orientation.lb")}
-          </InputLabel>
-          <ToggleButtonGroup
-            value={store.selectedOrientation}
-            onChange={onOrientationChange}
-            exclusive
-            aria-labelledby="orientation-select"
-            disabled={store.isLocked}
-          >
-            <ToggleButton value="coordsys" sx={{ flexGrow: 1 }}>
-              <OrientationCoordSysIcon />
-            </ToggleButton>
-            <ToggleButton value="tool" sx={{ flexGrow: 1 }}>
-              <OrientationToolIcon />
-            </ToggleButton>
-          </ToggleButtonGroup>
-        </Stack>
+        {store.tcps.map((tcp) => (
+          <MenuItem key={tcp.id} value={tcp.id}>
+            {tcp.id}
+          </MenuItem>
+        ))}
+      </AdornedSelect>
 
-        {/* Increment selection */}
-        <Stack width="50%">
-          <InputLabel id="jogging-increment-select">{"Increment"}</InputLabel>
-          <Select
-            labelId="jogging-increment-select"
-            size="small"
-            variant="filled"
-            value={store.activeDiscreteIncrement?.id || "continuous"}
-            onChange={(event) => {
-              store.setSelectedIncrementId(
-                event.target.value as IncrementOptionId,
-              )
-            }}
-            disabled={store.isLocked}
-          >
-            <MenuItem key="continuous" value="continuous">
-              {t("Jogging.Increment.Continuous.dd")}
-            </MenuItem>
+      {/* Orientation */}
+      <AdornedSelect
+        labelValue={t("Jogging.Cartesian.Orientation.lb")}
+        id="orientation-select"
+        labelId="orientation-select"
+        value={store.selectedOrientation}
+        onChange={(event) => {
+          store.setSelectedOrientation(event.target.value as OrientationId)
+        }}
+        disabled={store.isLocked}
+      >
+        {ORIENTATION_IDS.map((orientationId) => (
+          <MenuItem key={orientationId} value={orientationId}>
+            {translateOrientation(orientationId)}
+          </MenuItem>
+        ))}
+      </AdornedSelect>
+
+      {/* Increment selection */}
+      <AdornedSelect
+        labelValue={"Increment"}
+        labelId="jogging-increment-select"
+        size="small"
+        variant="filled"
+        value={store.activeDiscreteIncrement?.id || "continuous"}
+        onChange={(event) => {
+          store.setSelectedIncrementId(event.target.value as IncrementOptionId)
+        }}
+        disabled={store.isLocked}
+      >
+        <MenuItem key="continuous" value="continuous">
+          {t("Jogging.Increment.Continuous.dd")}
+        </MenuItem>
 
-            {store.selectedOrientation === "tool"
-              ? null
-              : store.discreteIncrementOptions.map((inc) => (
-                  <MenuItem key={inc.id} value={inc.id}>
-                    {store.currentMotionType === "translate"
-                      ? `${inc.mm}mm`
-                      : `${inc.degrees}°`}
-                  </MenuItem>
-                ))}
-          </Select>
-        </Stack>
-      </Stack>
-    </>
+        {store.selectedOrientation === "tool"
+          ? null
+          : store.discreteIncrementOptions.map((inc) => (
+              <MenuItem key={inc.id} value={inc.id}>
+                {store.currentMotionType === "translate"
+                  ? `${inc.mm}mm`
+                  : `${inc.degrees}°`}
+              </MenuItem>
+            ))}
+      </AdornedSelect>
+    </Box>
   )
 })

package/src/components/jogging/JoggingPanel.tsx

@@ -1,4 +1,4 @@
-import { Stack, Tab, Tabs } from "@mui/material"
+import { Stack, Tab, Tabs, type SxProps } from "@mui/material"
 import { NovaClient } from "@wandelbots/wandelbots-js"
 import { isString } from "lodash-es"
 import { runInAction } from "mobx"
@@ -11,6 +11,8 @@ import { JoggingCartesianTab } from "./JoggingCartesianTab"
 import { JoggingJointTab } from "./JoggingJointTab"
 import { JoggingStore } from "./JoggingStore"
 
+export type JoggingPanelTabId = "cartesian" | "joint"
+
 export type JoggingPanelProps = {
   /** Either an existing NovaClient or the base url of a deployed Nova instance */
   nova: NovaClient | string
@@ -22,6 +24,7 @@ export type JoggingPanelProps = {
   children?: React.ReactNode
   /** Set this to true to disable jogging UI temporarily e.g. when a program is executing */
   locked?: boolean
+  sx?: SxProps
 }
 
 /**
@@ -80,16 +83,16 @@ export const JoggingPanel = externalizeComponent(
       <Stack
         sx={{
           maxWidth: "460px",
-          minWidth: "350px",
-          overflowY: "auto",
+          minWidth: "320px",
           position: "relative",
-          height: "100%",
+          ...props.sx,
         }}
       >
         {state.joggingStore ? (
-          <JoggingPanelInner store={state.joggingStore}>
-            {props.children}
-          </JoggingPanelInner>
+          <JoggingPanelInner
+            store={state.joggingStore}
+            children={props.children}
+          ></JoggingPanelInner>
         ) : (
           <LoadingCover message="Loading jogging" error={state.loadingError} />
         )}
@@ -105,6 +108,7 @@ const JoggingPanelInner = observer(
   }: {
     store: JoggingStore
     children?: React.ReactNode
+    childrenJoint?: React.ReactNode
   }) => {
     // Jogger is only active as long as the tab is focused
     useEffect(() => {
@@ -155,7 +159,7 @@ const JoggingPanelInner = observer(
     }
 
     return (
-      <Stack flexGrow={1} height="100%">
+      <Stack flexGrow={1} sx={{ overflow: "hidden" }}>
         {/* Tab selection */}
         <Tabs
           value={store.tabIndex}
@@ -173,7 +177,11 @@ const JoggingPanelInner = observer(
         </Tabs>
 
         {/* Current tab content */}
-        <Stack flexGrow={1} position="relative">
+        <Stack
+          flexGrow={1}
+          position="relative"
+          sx={{ overflowY: "auto", overflowX: "hidden" }}
+        >
           {renderTabContent()}
         </Stack>
       </Stack>

package/src/components/jogging/JoggingStore.ts

@@ -31,6 +31,9 @@ export type DiscreteIncrementOption = (typeof discreteIncrementOptions)[number]
 export type IncrementOption = (typeof incrementOptions)[number]
 export type IncrementOptionId = IncrementOption["id"]
 
+export const ORIENTATION_IDS = ["coordsys", "tool"]
+export type OrientationId = (typeof ORIENTATION_IDS)[number]
+
 export class JoggingStore {
   selectedTabId: "cartesian" | "joint" | "debug" = "cartesian"
 
@@ -69,7 +72,7 @@ export class JoggingStore {
    * When in tool orientation, the robot moves in a direction relative to the
    * attached tool rotation.
    */
-  selectedOrientation: "coordsys" | "tool" = "coordsys"
+  selectedOrientation: OrientationId = "coordsys"
 
   /**
    * Id of selected increment amount for jogging. Options are defined by robot pad.
@@ -426,7 +429,7 @@ export class JoggingStore {
     this.selectedTcpId = id
   }
 
-  setSelectedOrientation(orientation: "coordsys" | "tool") {
+  setSelectedOrientation(orientation: OrientationId) {
     this.selectedOrientation = orientation
   }
 

package/src/components/jogging/JoggingToggleButtonGroup.tsx

@@ -0,0 +1,25 @@
+import { styled, ToggleButtonGroup } from "@mui/material"
+
+export const JoggingToggleButtonGroup = styled(ToggleButtonGroup)(
+  ({ theme }) => ({
+    "&.MuiToggleButtonGroup-root": {
+      background: theme.palette.backgroundPaperElevation?.[8],
+      borderRadius: "8px",
+      padding: "4px",
+      gap: "4px",
+      button: {
+        border: "none",
+        borderRadius: "4px",
+        flex: "1 1 0px",
+        minWidth: 0,
+        "&.MuiToggleButtonGroup-firstButton": {
+          borderRadius: "8px 4px 4px 8px",
+        },
+
+        "&.MuiToggleButtonGroup-lastButton": {
+          borderRadius: "4px 8px 8px 4px",
+        },
+      },
+    },
+  }),
+)

package/src/components/jogging/JoggingVelocitySlider.tsx

@@ -1,7 +1,6 @@
-import { Stack } from "@mui/material"
 import { observer, useLocalObservable } from "mobx-react-lite"
 import { useTranslation } from "react-i18next"
-import { VelocitySlider } from "../VelocitySlider"
+import { VelocitySlider, VelocitySliderLabel } from "../VelocitySlider"
 import type { JoggingStore } from "./JoggingStore"
 
 export const JoggingVelocitySlider = observer(
@@ -12,32 +11,31 @@ export const JoggingVelocitySlider = observer(
       get valueLabelFormat() {
         if (store.currentMotionType === "translate") {
           return (value: number) =>
-            `v=${t("Jogging.Cartesian.Translation.velocityMmPerSec.lb", { amount: value })}`
+            `v = ${t("Jogging.Cartesian.Translation.velocityMmPerSec.lb", { amount: value })}`
         } else {
           return (value: number) =>
-            `v=${t("Jogging.Cartesian.Rotation.velocityDegPerSec.lb", { amount: value })}`
+            `v = ${t("Jogging.Cartesian.Rotation.velocityDegPerSec.lb", { amount: value })}`
         }
       },
     }))
 
     return (
-      <Stack
-        sx={{
-          margin: "0px 20px",
-          marginBottom: "6px",
-        }}
-      >
-        <Stack sx={{ width: "380px", maxWidth: "90%", margin: "auto" }}>
-          <VelocitySlider
-            velocity={store.velocityInCurrentUnits}
-            min={store.minVelocityInCurrentUnits}
-            max={store.maxVelocityInCurrentUnits}
-            onVelocityChange={store.setVelocityFromSlider}
-            disabled={store.isLocked}
-            valueLabelFormat={state.valueLabelFormat}
+      <VelocitySlider
+        velocity={store.velocityInCurrentUnits}
+        min={store.minVelocityInCurrentUnits}
+        max={store.maxVelocityInCurrentUnits}
+        onVelocityChange={store.setVelocityFromSlider}
+        disabled={store.isLocked}
+        renderValue={(value) => (
+          <VelocitySliderLabel
+            value={state.valueLabelFormat(value)}
+            sx={{
+              minWidth:
+                store.currentMotionType === "translate" ? "111px" : "90px",
+            }}
           />
-        </Stack>
-      </Stack>
+        )}
+      />
     )
   },
 )

package/src/components/jogging/PoseCartesianValues.tsx

@@ -0,0 +1,43 @@
+import { Stack } from "@mui/material"
+import {
+  MotionStreamConnection,
+  poseToWandelscriptString,
+} from "@wandelbots/wandelbots-js"
+import { observer } from "mobx-react-lite"
+import { useRef } from "react"
+import { CopyableText } from "../CopyableText"
+import { useAnimationFrame } from "../utils/hooks"
+
+export const PoseCartesianValues = observer(
+  ({ motionStream }: { motionStream: MotionStreamConnection }) => {
+    const poseHolderRef = useRef<HTMLDivElement>(null)
+
+    function getCurrentPoseString() {
+      const tcpPose = motionStream.rapidlyChangingMotionState.tcp_pose
+      if (!tcpPose) return ""
+      return poseToWandelscriptString(tcpPose)
+    }
+
+    useAnimationFrame(() => {
+      if (!poseHolderRef.current) {
+        return
+      }
+      const newPoseContent = getCurrentPoseString()
+      if (poseHolderRef.current.textContent === newPoseContent) {
+        return
+      }
+
+      poseHolderRef.current.textContent = newPoseContent
+    })
+
+    return (
+      <Stack
+        alignItems="left"
+        spacing={2}
+        sx={{ flexGrow: 1, minWidth: 0, overflow: "hidden" }}
+      >
+        <CopyableText value={getCurrentPoseString()} ref={poseHolderRef} />
+      </Stack>
+    )
+  },
+)

package/src/components/jogging/PoseJointValues.tsx

@@ -0,0 +1,40 @@
+import { Stack } from "@mui/material"
+import type { MotionStreamConnection } from "@wandelbots/wandelbots-js"
+import { observer } from "mobx-react-lite"
+import { useRef } from "react"
+import { CopyableText } from "../CopyableText"
+import { useAnimationFrame } from "../utils/hooks"
+
+export const PoseJointValues = observer(
+  ({ motionStream }: { motionStream: MotionStreamConnection }) => {
+    const poseHolderRef = useRef<HTMLDivElement>(null)
+
+    function getCurrentPoseString() {
+      const { joints } =
+        motionStream.rapidlyChangingMotionState.state.joint_position
+      return `[${joints.map((j) => parseFloat(j.toFixed(4))).join(", ")}]`
+    }
+
+    useAnimationFrame(() => {
+      if (!poseHolderRef.current) {
+        return
+      }
+
+      const newPoseContent = getCurrentPoseString()
+      if (poseHolderRef.current.textContent === newPoseContent) {
+        return
+      }
+      poseHolderRef.current.textContent = newPoseContent
+    })
+
+    return (
+      <Stack
+        alignItems="left"
+        spacing={2}
+        sx={{ flexGrow: 1, minWidth: 0, overflow: "hidden" }}
+      >
+        <CopyableText value={getCurrentPoseString()} ref={poseHolderRef} />
+      </Stack>
+    )
+  },
+)

package/src/i18n/locales/de/translations.json

@@ -12,5 +12,7 @@
   "Jogging.Cartesian.Orientation.lb": "Orientierung",
   "Jogging.Activate.bt": "Jogging aktivieren",
   "Jogging.Activating.lb": "Jogging wird aktiviert",
-  "Jogging.JointLimitsReached.lb": "Joint-Limit für Joint {{jointNumbers}} erreicht"
+  "Jogging.JointLimitsReached.lb": "Joint-Limit für Joint {{jointNumbers}} erreicht",
+  "Jogging.Orientation.coordsys": "Base",
+  "Jogging.Orientation.tool": "Tool"
 }

package/src/i18n/locales/en/translations.json

@@ -12,5 +12,7 @@
   "Jogging.Cartesian.Orientation.lb": "Orientation",
   "Jogging.Activate.bt": "Activate jogging",
   "Jogging.Activating.lb": "Activating jogging",
-  "Jogging.JointLimitsReached.lb": "Joint limit reached for joint {{jointNumbers}}"
+  "Jogging.JointLimitsReached.lb": "Joint limit reached for joint {{jointNumbers}}",
+  "Jogging.Orientation.coordsys": "Base",
+  "Jogging.Orientation.tool": "Tool"
 }