@wandelbots/wandelbots-js-react-components 1.3.0 → 1.3.2

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

@@ -0,0 +1,41 @@
+import { Meta, StoryObj } from "@storybook/react";
+import { JoggingCartesianAxisControl } from "./JoggingCartesianAxisControl";
+import { useRef, useState } from "react";
+import { useAnimationFrame } from "../utils/hooks";
+import { useArgs } from "@storybook/preview-api";
+
+const meta: Meta<typeof JoggingCartesianAxisControl> = {
+  component: JoggingCartesianAxisControl,
+
+  args: {
+    color: "#F14D42",
+    label: "X",
+    disabled: false,
+  },
+  render: function Component(args) {
+    const [, setArgs] = useArgs();
+
+    const joggingDirRef = useRef<"+" | "-" | null>(null);
+    const joggingValueRef = useRef(0);
+
+    useAnimationFrame(() => {
+      if (joggingDirRef.current === "+") {
+        joggingValueRef.current += 1;
+      } else if (joggingDirRef.current === "-") {
+        joggingValueRef.current -= 1;
+      }
+    })
+
+    return <JoggingCartesianAxisControl
+      {...args} 
+      startJogging={(direction) => joggingDirRef.current = direction} 
+      stopJogging={() => joggingDirRef.current = null}
+      getDisplayedValue={() => joggingValueRef.current.toString()}
+    />;
+  },
+
+};
+export default meta;
+
+export const Default: StoryObj<typeof JoggingCartesianAxisControl> = {
+};

package/src/components/jogging/JoggingCartesianAxisControl.tsx

@@ -0,0 +1,127 @@
+import { Button, Typography } from "@mui/material"
+import Stack from "@mui/material/Stack"
+import { observer } from "mobx-react-lite"
+import { useRef, type ReactNode } from "react"
+import { useAnimationFrame } from "../utils/hooks"
+
+type JoggingCartesianAxisControlProps = {
+  color?: string
+  label: ReactNode
+  getDisplayedValue: () => string
+  startJogging: (direction: "-" | "+") => void
+  stopJogging: () => void
+  disabled?: boolean
+} & React.ComponentProps<typeof Stack>
+
+export const JoggingCartesianAxisControl = observer(
+  ({
+    color,
+    label,
+    getDisplayedValue,
+    startJogging,
+    stopJogging,
+    disabled,
+    ...rest
+  }: JoggingCartesianAxisControlProps) => {
+    useAnimationFrame(() => {
+      const displayValue = getDisplayedValue()
+      const element = valueContainerRef.current
+      if (!element) return
+
+      element.textContent = displayValue
+    })
+
+    const valueContainerRef = useRef<HTMLParagraphElement>(null)
+
+    color = color || "#F14D42"
+
+    function onPointerDownMinus(ev: React.PointerEvent) {
+      // Stop right click from triggering jog
+      if (ev.button === 0) startJogging("-")
+    }
+
+    function onPointerDownPlus(ev: React.PointerEvent) {
+      if (ev.button === 0) startJogging("+")
+    }
+
+    return (
+      <Stack height="72px" direction="row" {...rest}>
+        <Button
+          onPointerDown={onPointerDownMinus}
+          onPointerUp={stopJogging}
+          onPointerOut={stopJogging}
+          disabled={disabled}
+          sx={{
+            width: "105px",
+            backgroundColor: color,
+            color: "white",
+            alignContent: "center",
+            fontSize: "37px",
+            borderRadius: "16px 0px 0px 16px",
+
+            ":hover": {
+              color: "white",
+              backgroundColor: color,
+            },
+          }}
+        >
+          {"-"}
+        </Button>
+
+        <Stack
+          spacing="6px"
+          sx={{
+            width: "184px",
+            backgroundColor: color,
+            alignItems: "center",
+            justifyContent: "center",
+            opacity: "0.9",
+          }}
+        >
+          <Stack
+            height="22px"
+            direction="row"
+            alignItems="center"
+            justifyItems="center"
+            spacing={1}
+            sx={{ userSelect: "none" }}
+          >
+            {label}
+          </Stack>
+          <Typography
+            height="22px"
+            sx={{
+              fontSize: "15px",
+              color: "white",
+            }}
+            ref={valueContainerRef}
+          >
+            {getDisplayedValue()}
+          </Typography>
+        </Stack>
+
+        <Button
+          onPointerDown={onPointerDownPlus}
+          onPointerUp={stopJogging}
+          onPointerOut={stopJogging}
+          disabled={disabled}
+          sx={{
+            width: "105px",
+            backgroundColor: color,
+            color: "white",
+            alignContent: "center",
+            fontSize: "37px",
+            borderRadius: "0px 16px 16px 0px",
+
+            ":hover": {
+              color: "white",
+              backgroundColor: color,
+            },
+          }}
+        >
+          {"+"}
+        </Button>
+      </Stack>
+    )
+  },
+)

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> = {
+};