@wandelbots/wandelbots-js-react-components 1.3.1 → 1.4.0

package/src/components/jogging/JoggingCartesianTab.tsx

@@ -0,0 +1,265 @@
+import {
+  ToggleButtonGroup,
+  ToggleButton,
+  Stack,
+  Typography,
+} from "@mui/material"
+import { observer } from "mobx-react-lite"
+import { JoggingCartesianAxisControl } from "./JoggingCartesianAxisControl"
+import { radiansToDegrees } from "@wandelbots/wandelbots-js"
+import { useTranslation } from "react-i18next"
+import RotationIcon from "../../icons/rotation.svg"
+import XAxisIcon from "../../icons/axis-x.svg"
+import YAxisIcon from "../../icons/axis-y.svg"
+import ZAxisIcon from "../../icons/axis-z.svg"
+import type { JoggingStore, DiscreteIncrementOption } from "./JoggingStore"
+import { JoggingOptions } from "./JoggingOptions"
+import { JoggingVelocitySlider } from "./JoggingVelocitySlider"
+import { useReaction } from "../utils/hooks"
+import { JoggingCartesianValues } from "./JoggingCartesianValues"
+import { JoggingJointLimitDetector } from "./JoggingJointLimitDetector"
+
+type JoggingCartesianOpts = {
+  axis: "x" | "y" | "z"
+  motionType: "translate" | "rotate"
+  direction: "-" | "+"
+}
+
+export const JoggingCartesianTab = observer(
+  ({ store }: { store: JoggingStore }) => {
+    const { t } = useTranslation()
+
+    function onMotionTypeChange(
+      _event: React.MouseEvent<HTMLElement>,
+      newMotionType: string,
+    ) {
+      if (newMotionType === "translate" || newMotionType === "rotate")
+        store.setSelectedCartesianMotionType(newMotionType)
+    }
+
+    useReaction(
+      () => [store.selectedCoordSystemId, store.selectedTcpId],
+      () => {
+        store.jogger.motionStream.motionStateSocket.changeUrl(
+          store.jogger.nova.makeWebsocketURL(`/motion-groups/${store.jogger.motionGroupId}/state-stream?tcp=${store.selectedTcpId}&response_coordinate_system=${store.selectedCoordSystemId}`)
+        )
+      },
+      { fireImmediately: true } as any,
+    )
+
+    async function runIncrementalCartesianJog(
+      opts: JoggingCartesianOpts,
+      increment: DiscreteIncrementOption,
+    ) {
+      const tcpPose = store.jogger.motionStream.rapidlyChangingMotionState.tcp_pose
+      const jointPosition =
+        store.jogger.motionStream.rapidlyChangingMotionState.state.joint_position
+      if (!tcpPose) return
+
+      // await robotPad.withMotionLock(async () => {
+      //   await jogger.runIncrementalCartesianMotion({
+      //     currentTcpPose: tcpPose,
+      //     currentJoints: jointPosition,
+      //     coordSystemId: store.selectedCoordSystemId,
+      //     velocityInRelevantUnits: store.velocityInCurrentUnits,
+      //     axis: opts.axis,
+      //     direction: opts.direction,
+      //     motion:
+      //       store.selectedCartesianMotionType === "translate"
+      //         ? {
+      //             type: "translate",
+      //             distanceMm: increment.mm,
+      //           }
+      //         : {
+      //             type: "rotate",
+      //             distanceRads: degreesToRadians(increment.degrees),
+      //           },
+      //   })
+      // })
+    }
+
+    async function startCartesianJogging(opts: JoggingCartesianOpts) {
+      if (store.isLocked) return
+
+      if (store.selectedDiscreteIncrement) {
+        return runIncrementalCartesianJog(opts, store.selectedDiscreteIncrement)
+      }
+
+      if (opts.motionType === "translate") {
+        await store.jogger.startTCPTranslation({
+          axis: opts.axis,
+          direction: opts.direction,
+          velocityMmPerSec: store.translationVelocityMmPerSec,
+        })
+      } else {
+        await store.jogger.startTCPRotation({
+          axis: opts.axis,
+          direction: opts.direction,
+          velocityRadsPerSec: store.rotationVelocityRadsPerSec,
+        })
+
+      }
+    }
+
+    async function stopJogging() {
+      if (store.isLocked) return
+
+      if (store.selectedDiscreteIncrement) {
+        return
+      }
+
+      await store.jogger.stop()
+    }
+
+    const axisList = [
+      {
+        id: "x",
+        color: "#F14D42",
+        icon: <XAxisIcon />,
+      },
+      {
+        id: "y",
+        color: "#42A705",
+        icon: <YAxisIcon />,
+      },
+      {
+        id: "z",
+        color: "#0075FF",
+        icon: <ZAxisIcon />,
+      },
+    ] as const
+
+    function formatMM(value: number) {
+      return t("General.mm.variable", { amount: value.toFixed(1) })
+    }
+
+    function formatDegrees(value: number) {
+      return t("General.degree.variable", {
+        amount: radiansToDegrees(value).toFixed(1),
+      })
+    }
+
+    return (
+      <Stack>
+        {/* Jogging options */}
+        <JoggingOptions store={store} />
+
+        {/* Show Wandelscript string for the current coords */}
+        <JoggingCartesianValues store={store} />
+
+        {/* Translate or rotate toggle */}
+        <Stack alignItems="center" marginTop="1rem">
+          <ToggleButtonGroup
+            value={store.selectedCartesianMotionType}
+            onChange={onMotionTypeChange}
+            exclusive
+            aria-label={t("Jogging.Cartesian.MotionType.lb")}
+            sx={{
+              "& > button": {
+                borderRadius: "8px",
+                textTransform: "none",
+                padding: "4px 30px",
+              },
+            }}
+          >
+            <ToggleButton value="translate">
+              {t("Jogging.Cartesian.Translation.bt")}
+            </ToggleButton>
+            <ToggleButton value="rotate">
+              {t("Jogging.Cartesian.Rotation.bt")}
+            </ToggleButton>
+          </ToggleButtonGroup>
+        </Stack>
+
+        <Stack width="80%" maxWidth="296px" margin="auto">
+          {/* Cartesian translate jogging */}
+          {store.selectedCartesianMotionType === "translate" &&
+            axisList.map((axis) => (
+              <JoggingCartesianAxisControl
+                key={axis.id}
+                color={axis.color}
+                disabled={store.isLocked}
+                sx={{
+                  marginTop: "12px",
+                }}
+                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}
+              />
+            ))}
+
+          {/* Cartesian rotate jogging */}
+          {store.selectedCartesianMotionType === "rotate" &&
+            axisList.map((axis) => (
+              <JoggingCartesianAxisControl
+                key={axis.id}
+                color={axis.color}
+                disabled={store.isLocked}
+                sx={{
+                  marginTop: "12px",
+                }}
+                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>
+
+        {/* Velocity slider */}
+        <JoggingVelocitySlider store={store} />
+
+        {/* Show message if joint limits reached */}
+        <JoggingJointLimitDetector store={store} />
+      </Stack>
+    )
+  },
+)

package/src/components/jogging/JoggingCartesianValues.tsx

@@ -0,0 +1,45 @@
+import { observer } from "mobx-react-lite"
+import { Stack, Typography } from "@mui/material"
+import { useRef } from "react"
+import { poseToWandelscriptString } from "@wandelbots/wandelbots-js"
+import { useAnimationFrame } from "../utils/hooks"
+import { JoggingStore } from "./JoggingStore"
+
+export const JoggingCartesianValues = observer(({ store }: { store: JoggingStore }) => {
+  const poseStringRef = useRef<HTMLPreElement>(null)
+
+  function getCurrentPoseString() {
+    const tcpPose = store.jogger.motionStream.rapidlyChangingMotionState.tcp_pose
+    if (!tcpPose) return ""
+    return poseToWandelscriptString(tcpPose)
+  }
+
+  useAnimationFrame(() => {
+    if (!poseStringRef.current) {
+      return
+    }
+
+    poseStringRef.current.textContent = getCurrentPoseString()
+  })
+
+  return (
+    <Stack alignItems="center" marginTop="0.8rem">
+      <Typography
+        sx={{
+          fontSize: "12px",
+          marginTop: "0.8rem",
+        }}
+      >
+        {store.selectedTcpId} - {store.selectedCoordSystem?.name}
+      </Typography>
+      <Typography
+        component="pre"
+        ref={poseStringRef}
+        sx={{
+          fontSize: "14px",
+          opacity: 0.6,
+        }}
+      ></Typography>
+    </Stack>
+  )
+})

package/src/components/jogging/JoggingFreedriveTab.tsx

@@ -0,0 +1,9 @@
+import { Stack } from "@mui/material"
+
+export const JoggingFreedriveTab = () => {
+  return (
+    <Stack height={"300px"} alignItems={"center"} justifyContent={"center"}>
+      {"TODO: JoggingFreedriveTab"}
+    </Stack>
+  )
+}

package/src/components/jogging/JoggingJointLimitDetector.tsx

@@ -0,0 +1,51 @@
+import { Typography } from "@mui/material"
+import { useTranslation } from "react-i18next"
+import { useState } from "react"
+import { isEqual } from "lodash-es"
+import { MotionStreamConnection } from "@wandelbots/wandelbots-js"
+import { useAnimationFrame } from "../utils/hooks"
+import { JoggingStore } from "./JoggingStore"
+
+/**
+ * Monitors the active robot motion state and displays a message if
+ * any joint limits are reached.
+ */
+export const JoggingJointLimitDetector = ({ store }: { store: JoggingStore }) => {
+  const { t } = useTranslation()
+
+  const [jointLimitsReached, setJointLimitsReached] = useState(
+    store.jogger.motionStream.rapidlyChangingMotionState.state.joint_limit_reached
+      .limit_reached,
+  )
+
+  useAnimationFrame(() => {
+    const newLimitsReached =
+      store.jogger.motionStream.rapidlyChangingMotionState.state.joint_limit_reached
+        .limit_reached
+
+    if (!isEqual(jointLimitsReached, newLimitsReached)) {
+      setJointLimitsReached(newLimitsReached)
+    }
+  })
+
+  const jointLimitReachedIndices: number[] = []
+  jointLimitsReached.forEach((limitReached, index) => {
+    if (limitReached) jointLimitReachedIndices.push(index)
+  })
+
+  if (!jointLimitReachedIndices.length) return null
+
+  return (
+    <Typography
+      color="error"
+      sx={{
+        padding: "1rem",
+        textAlign: "center",
+      }}
+    >
+      {t("Jogging.JointLimitsReached.lb", {
+        jointNumbers: jointLimitReachedIndices.map((i) => i + 1).join(", "),
+      })}
+    </Typography>
+  )
+}

package/src/components/jogging/JoggingJointRotationControl.stories.tsx

@@ -0,0 +1,38 @@
+import { Meta, StoryObj } from "@storybook/react";
+import { JoggingJointRotationControl } from "./JoggingJointRotationControl";
+import { useRef } from "react";
+import { useAnimationFrame } from "../utils/hooks";
+
+const meta: Meta<typeof JoggingJointRotationControl> = {
+  component: JoggingJointRotationControl,
+
+  args: {
+    lowerLimitDegs: -360,
+    upperLimitDegs: 360,
+    disabled: false,
+  },
+  render: function Component(args) {
+    const joggingDirRef = useRef<"+" | "-" | null>(null);
+    const joggingValueRef = useRef(0);
+
+    useAnimationFrame(() => {
+      if (joggingDirRef.current === "+") {
+        joggingValueRef.current += 1;
+      } else if (joggingDirRef.current === "-") {
+        joggingValueRef.current -= 1;
+      }
+    })
+
+    return <JoggingJointRotationControl
+      {...args} 
+      startJogging={(direction) => joggingDirRef.current = direction} 
+      stopJogging={() => joggingDirRef.current = null}
+      getValueDegs={() => joggingValueRef.current}
+    />;
+  },
+
+};
+export default meta;
+
+export const Default: StoryObj<typeof JoggingJointRotationControl> = {
+};

package/src/components/jogging/JoggingJointRotationControl.tsx

@@ -0,0 +1,197 @@
+import { IconButton, Slider, Typography } from "@mui/material"
+import Stack from "@mui/material/Stack"
+import { observer, useLocalObservable } from "mobx-react-lite"
+import { I18nextProvider, useTranslation } from "react-i18next"
+import { ChevronLeft, ChevronRight } from "@mui/icons-material"
+import { useAnimationFrame } from "../utils/hooks"
+import { useState } from "react"
+import i18n from '../../i18n/config';
+
+type JoggingJointRotationControlProps = {
+  startJogging: (direction: "-" | "+") => void
+  stopJogging: () => void
+  lowerLimitDegs?: number
+  upperLimitDegs?: number
+  getValueDegs: () => number|undefined
+
+  disabled?: boolean
+} & React.ComponentProps<typeof Stack>
+
+export const JoggingJointRotationControl = observer(
+  ({
+    startJogging,
+    stopJogging,
+    lowerLimitDegs,
+    upperLimitDegs,
+    getValueDegs,
+    disabled,
+    ...rest
+  }: JoggingJointRotationControlProps) => {
+    const { t } = useTranslation()
+    const [currentValue, setCurrentValue] = useState<number|undefined>()
+
+    const state = useLocalObservable(() => ({
+      activeJoggingDir: null as "-" | "+" | null,
+
+      startJogging(dir: "-" | "+") {
+        this.activeJoggingDir = dir
+        startJogging(dir)
+      },
+
+      stopJogging() {
+        this.activeJoggingDir = null
+        stopJogging()
+      },
+    }))
+
+    useAnimationFrame(() => {
+      setCurrentValue(getValueDegs())
+    })
+
+    function onPointerDownMinus(ev: React.PointerEvent) {
+      // Stop right click from triggering jog
+      if (ev.button === 0) state.startJogging("-")
+    }
+
+    function onPointerDownPlus(ev: React.PointerEvent) {
+      if (ev.button === 0) state.startJogging("+")
+    }
+
+    function formatDegrees(value: number | undefined, precision = 1) {
+      if (value === undefined || isNaN(value)) return ""
+
+      const output = t("General.degree.variable", {
+        amount: value.toFixed(precision),
+      })
+
+      if (value > 0 && precision === 0) {
+        return `+${output}`
+      } else {
+        return output
+      }
+    }
+
+    return (
+      <I18nextProvider i18n={i18n}>
+      <Stack
+        height="64px"
+        width="100%"
+        maxWidth="300px"
+        direction="row"
+        {...rest}
+      >
+        <IconButton
+          onPointerDown={onPointerDownMinus}
+          onPointerUp={state.stopJogging}
+          onPointerOut={state.stopJogging}
+          disabled={disabled}
+          sx={{
+            width: "52px",
+            color: "white",
+            alignContent: "center",
+            borderRadius: "16px 0px 0px 16px",
+            backgroundColor:
+              state.activeJoggingDir === "-" ? "#495975 !important" : "#38445A",
+            "& svg": {
+              width: "42px",
+              height: "42px",
+            },
+          }}
+        >
+          <ChevronLeft />
+        </IconButton>
+
+        <Stack
+          flexGrow={1}
+          alignItems="center"
+          justifyContent="center"
+          sx={{
+            borderStyle: "solid",
+            borderLeftWidth: 0,
+            borderRightWidth: 0,
+            borderTopWidth: "4px",
+            borderBottomWidth: "4px",
+            backgroundColor: "#38445A",
+            borderColor: "#38445A",
+            paddingLeft: "20px",
+            paddingRight: "20px",
+            zIndex: 1,
+          }}
+        >
+          <Typography
+            sx={{
+              fontSize: "15px",
+              position: "relative",
+              top: "5px",
+            }}
+          >
+            {formatDegrees(currentValue)}
+          </Typography>
+
+          <Slider
+            disabled
+            aria-label="Joint position"
+            min={lowerLimitDegs}
+            max={upperLimitDegs}
+            value={currentValue}
+            track={false}
+            sx={{
+              "& .MuiSlider-mark": {
+                display: "none",
+              },
+              "& .MuiSlider-thumb": {
+                width: "5px",
+                height: "10px",
+                borderRadius: "2px",
+              },
+              "& .MuiSlider-markLabel": {
+                top: "20px",
+                fontSize: "12px",
+              },
+              "& .MuiSlider-rail": {
+                backgroundColor: "#1F283A",
+                opacity: 1,
+              },
+            }}
+            marks={
+              lowerLimitDegs !== undefined &&
+              upperLimitDegs !== undefined && [
+                {
+                  value: lowerLimitDegs,
+                  label: formatDegrees(lowerLimitDegs, 0),
+                },
+                {
+                  value: upperLimitDegs,
+                  label: formatDegrees(upperLimitDegs, 0),
+                },
+              ]
+            }
+          />
+        </Stack>
+
+        <IconButton
+          onPointerDown={onPointerDownPlus}
+          onPointerUp={state.stopJogging}
+          onPointerOut={state.stopJogging}
+          disabled={disabled}
+          sx={{
+            width: "52px",
+            color: "white",
+            alignContent: "center",
+            fontSize: "37px",
+            borderRadius: "0px 16px 16px 0px",
+            backgroundColor:
+              state.activeJoggingDir === "+" ? "#495975 !important" : "#38445A",
+            "& svg": {
+              width: "42px",
+              height: "42px",
+            },
+          }}
+        >
+          <ChevronRight />
+        </IconButton>
+      </Stack>
+      </I18nextProvider>
+    )
+  },
+)

package/src/components/jogging/JoggingJointTab.tsx

@@ -0,0 +1,93 @@
+import { Stack, Typography } from "@mui/material"
+import { observer } from "mobx-react-lite"
+import { radiansToDegrees } from "@wandelbots/wandelbots-js"
+import type { JoggingStore } from "./JoggingStore"
+import { JoggingVelocitySlider } from "./JoggingVelocitySlider"
+import { JoggingJointRotationControl } from "./JoggingJointRotationControl"
+import { JoggingJointValues } from "./JoggingJointValues"
+
+export const JoggingJointTab = observer(
+  ({ store }: { store: JoggingStore; }) => {
+    async function startJointJogging(opts: {
+      joint: number
+      direction: "-" | "+"
+    }) {
+      await store.jogger.startJointRotation({
+        joint: opts.joint,
+        direction: opts.direction,
+        velocityRadsPerSec: store.rotationVelocityRadsPerSec,
+      })
+    }
+
+    async function stopJointJogging() {
+      await store.jogger.stop()
+    }
+  
+    return (
+      <Stack>
+        <JoggingJointValues store={store} />
+        <Stack>
+          {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 (
+              <Stack
+                direction="row"
+                alignItems="center"
+                gap={2}
+                key={`joint-${joint.index}`}
+                marginTop="0.8rem"
+              >
+                <Typography
+                  sx={{
+                    flexGrow: 1,
+                    textAlign: "right",
+                  }}
+                >{`J${joint.index + 1}`}</Typography>
+                <JoggingJointRotationControl
+                  key={joint.index}
+                  disabled={store.isLocked}
+                  lowerLimitDegs={lowerLimitDegs}
+                  upperLimitDegs={upperLimitDegs}
+                  getValueDegs={() => {
+                    const value =
+                      store.jogger.motionStream.rapidlyChangingMotionState.state
+                        .joint_position.joints[joint.index]
+                    return value !== undefined
+                      ? radiansToDegrees(value)
+                      : undefined
+                  }}
+                  startJogging={(direction: "-" | "+") =>
+                    startJointJogging({
+                      joint: joint.index,
+                      direction,
+                    })
+                  }
+                  stopJogging={stopJointJogging}
+                />
+                {/* Just to balance out the right side */}
+                <Typography
+                  sx={{
+                    flexGrow: 1,
+                  }}
+                />
+              </Stack>
+            )
+          })}
+        </Stack>
+        <JoggingVelocitySlider store={store} />
+      </Stack>
+    )
+  },
+)