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

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>
+    )
+  },
+)

package/src/components/jogging/JoggingJointValues.tsx

@@ -0,0 +1,45 @@
+import { observer } from "mobx-react-lite"
+import { Stack, Typography } from "@mui/material"
+import { useRef } from "react"
+import { useTranslation } from "react-i18next"
+import { JoggingStore } from "./JoggingStore"
+import { useAnimationFrame } from "../utils/hooks"
+
+export const JoggingJointValues = observer(({ store }: { store: JoggingStore }) => {
+  const valueHolderRef = useRef<HTMLPreElement>(null)
+  const { t } = useTranslation()
+
+  function getCurrentValueString() {
+    const { joints } =
+      store.jogger.motionStream.rapidlyChangingMotionState.state.joint_position
+    return `{${joints.map((j) => parseFloat(j.toFixed(4))).join(", ")}}`
+  }
+
+  useAnimationFrame(() => {
+    if (!valueHolderRef.current) return
+    valueHolderRef.current.textContent = getCurrentValueString()
+  })
+
+  return (
+    <Stack alignItems="center" marginTop="0.8rem">
+      <Typography
+        sx={{
+          fontSize: "12px",
+          marginTop: "0.8rem",
+        }}
+      >
+        {t("Jogging.Joints.JointValues.lb")}
+      </Typography>
+      <Typography
+        component="pre"
+        ref={valueHolderRef}
+        sx={{
+          fontSize: "14px",
+          opacity: 0.6,
+        }}
+      >
+        {getCurrentValueString()}
+      </Typography>
+    </Stack>
+  )
+})

package/src/components/jogging/JoggingOptions.tsx

@@ -0,0 +1,96 @@
+import { Stack, MenuItem, InputLabel, Select } from "@mui/material"
+import { observer } from "mobx-react-lite"
+import type { IncrementOptionId, JoggingStore } from "./JoggingStore"
+import { useTranslation } from "react-i18next"
+import { useThemeColors } from "../../themes/wbTheme"
+import { ThemeSelect } from "../ThemeSelect"
+
+export const JoggingOptions = observer(({ store }: { store: JoggingStore }) => {
+  const { t } = useTranslation()
+  const colors = useThemeColors()
+
+  return (
+    <Stack
+      direction={"row"}
+      alignItems={"center"}
+      spacing={1}
+      sx={{
+        padding: "16px",
+        "& label": {
+          color: colors.textSubtle,
+          fontSize: "12px",
+          marginBottom: "4px",
+        },
+      }}
+    >
+      {/* Coordinate system */}
+      <Stack width="33%">
+        <InputLabel id="jogging-coord-select">{"Coordinate Sys."}</InputLabel>
+        <ThemeSelect
+          kind="filled"
+          labelId="jogging-coord-select"
+          value={store.selectedCoordSystemId}
+          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}>
+              {cs.name || cs.coordinate_system}
+            </MenuItem>
+          ))}
+        </ThemeSelect>
+      </Stack>
+
+      {/* TCP selection */}
+      <Stack width="33%">
+        <InputLabel id="jogging-tcp-select">TCP</InputLabel>
+        <ThemeSelect
+          kind="filled"
+          labelId="jogging-tcp-select"
+          value={store.selectedTcpId}
+          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>
+          ))}
+        </ThemeSelect>
+      </Stack>
+
+      {/* Increment selection */}
+      <Stack width="33%">
+        <InputLabel id="jogging-increment-select">{"Increment"}</InputLabel>
+        <ThemeSelect
+          kind="filled"
+          labelId="jogging-increment-select"
+          value={store.selectedIncrementId}
+          onChange={(event) => {
+            store.setSelectedIncrementId(
+              event.target.value as IncrementOptionId,
+            )
+          }}
+          disabled={store.isLocked}
+        >
+          <MenuItem key="continuous" value="continuous">
+            {t("Jogging.Increment.Continuous.dd")}
+          </MenuItem>
+
+          {store.discreteIncrementOptions.map((inc) => (
+            <MenuItem key={inc.id} value={inc.id}>
+              {store.currentMotionType === "translate"
+                ? `${inc.mm}mm`
+                : `${inc.degrees}°`}
+            </MenuItem>
+          ))}
+        </ThemeSelect>
+      </Stack>
+    </Stack>
+  )
+})

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

@@ -0,0 +1,26 @@
+import { Meta, StoryObj } from "@storybook/react";
+import { JoggingPanel } from "./JoggingPanel";
+import { useArgs } from "@storybook/preview-api";
+import { NovaClient } from "@wandelbots/wandelbots-js";
+
+const meta: Meta<typeof JoggingPanel> = {
+  component: JoggingPanel,
+
+  args: {
+    motionGroupId: "0@mock-ur5e"
+  },
+  render: function Component(args) {
+    const [, setArgs] = useArgs();
+    return <JoggingPanel
+      {...args} 
+      nova={new NovaClient({
+        instanceUrl: "https://mock",
+        mock: true
+      })}
+    />;
+  },
+};
+export default meta;
+
+export const Default: StoryObj<typeof JoggingPanel> = {
+};

package/src/components/jogging/JoggingPanel.tsx

@@ -0,0 +1,148 @@
+import { Paper, Stack, Tab, Tabs } from "@mui/material"
+import { observer, useLocalObservable } from "mobx-react-lite"
+import { useEffect } from "react"
+import { JoggingCartesianTab } from "./JoggingCartesianTab"
+import { JoggingJointTab } from "./JoggingJointTab"
+import { JoggingStore } from "./JoggingStore"
+import { LoadingCover } from "../LoadingCover"
+import { runInAction } from "mobx"
+import { NovaClient } from "@wandelbots/wandelbots-js"
+
+export type JoggingPanelProps = {
+  nova: NovaClient
+  motionGroupId: string
+}
+
+export const JoggingPanel = observer((props: JoggingPanelProps) => {
+  const { nova } = props
+
+  const state = useLocalObservable(() => ({
+    joggingStore: null as JoggingStore | null,
+    loadingError: null as unknown | null,
+  }))
+
+  async function init() {
+    try {
+      const jogger = await nova.connectJogger(props.motionGroupId)
+      const joggingStore = await JoggingStore.loadFor(jogger)
+      runInAction(() => {
+        state.joggingStore = joggingStore
+      })
+    } catch (err) {
+      state.loadingError = err
+    }
+  }
+
+  useEffect(() => {
+    init()
+    return () => {
+      state.joggingStore?.dispose()
+    }
+  }, [])
+
+  // Set correct jogging mode on jogger based on user selections
+  useEffect(() => {
+    if (!state.joggingStore) return
+
+    const {
+      currentTab,
+      selectedTcpId,
+      selectedCoordSystemId,
+      selectedDiscreteIncrement,
+    } = state.joggingStore
+
+    if (currentTab.id !== "cartesian" && currentTab.id !== "joint") return
+
+    const cartesianJoggingOpts = {
+      tcpId: selectedTcpId,
+      coordSystemId: selectedCoordSystemId,
+    }
+
+    if (selectedDiscreteIncrement && currentTab.id === "cartesian") {
+      state.joggingStore.jogger.setJoggingMode("increment", cartesianJoggingOpts)
+    } else {
+      state.joggingStore.jogger.setJoggingMode(currentTab.id, cartesianJoggingOpts)
+    }
+  }, [
+    state.joggingStore?.currentTab,
+    state.joggingStore?.selectedTcpId,
+    state.joggingStore?.selectedCoordSystemId,
+    state.joggingStore?.selectedDiscreteIncrement,
+  ])
+
+  useEffect(() => {
+
+    // Set the robot to default control mode (JoZi says is important for physical robot jogging)
+    async function init() {
+      if (!state.joggingStore) return
+
+      try {
+        await nova.api.controller.setDefaultMode(
+          state.joggingStore.jogger.motionStream.controllerId,
+          "MODE_CONTROL",
+        )
+      } catch (err) {
+        console.error(err)
+      }
+    }
+
+    init()
+  }, [state.joggingStore?.jogger.motionStream.controllerId])
+
+  if (!state.joggingStore) {
+    return (
+      <JoggingPanelOuter>
+        <LoadingCover message="Loading jogging" error={state.loadingError} />
+      </JoggingPanelOuter>
+    )
+  }
+
+  const { joggingStore: store } = state
+
+  return (
+    <JoggingPanelOuter>
+      <Stack flexGrow={1}>
+        {/* Tab selection */}
+        <Tabs value={store.tabIndex} onChange={store.onTabChange}>
+          {store.tabs.map((tab) => (
+            <Tab
+              key={tab.id}
+              label={tab.label}
+              id={`jogging-tab-${tab.id}`}
+              aria-controls={`jogging-tab-${tab.id}`}
+            />
+          ))}
+        </Tabs>
+
+        {/* Current tab content */}
+        <Stack flexGrow={1}>
+          {store.currentTab.id === "cartesian" && (
+            <JoggingCartesianTab store={store} />
+          )}
+          {store.currentTab.id === "joint" && (
+            <JoggingJointTab store={store} />
+          )}
+        </Stack>
+      </Stack>
+    </JoggingPanelOuter>
+  )
+})
+
+function JoggingPanelOuter({ children }: { children: React.ReactNode }) {
+  return (
+    <Stack
+      sx={{
+        maxWidth: "460px",
+        minWidth: "350px",
+        overflowY: "auto",
+        position: "relative",
+      }}
+    >
+      <Paper sx={{
+        minHeight: "90vh"
+      }}>
+        {children}
+      </Paper>
+    </Stack>
+  )
+}