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

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

package/src/components/jogging/JoggingStore.tsx

@@ -0,0 +1,294 @@
+import { keyBy } from "lodash-es"
+import { autorun, makeAutoObservable, type IReactionDisposer } from "mobx"
+import type { CoordinateSystem, JoggerConnection, MotionGroupSpecification, RobotTcp } from "@wandelbots/wandelbots-js"
+import { tryParseJson } from "@wandelbots/wandelbots-js"
+
+const discreteIncrementOptions = [
+  { id: "0.1", mm: 0.1, degrees: 0.05 },
+  { id: "1", mm: 1, degrees: 0.5 },
+  { id: "5", mm: 5, degrees: 2.5 },
+  { id: "10", mm: 10, degrees: 5 },
+]
+
+const incrementOptions = [
+  { id: "continuous" },
+  ...discreteIncrementOptions,
+] as const
+
+export type DiscreteIncrementOption = (typeof discreteIncrementOptions)[number]
+export type IncrementOption = (typeof incrementOptions)[number]
+export type IncrementOptionId = IncrementOption["id"]
+
+export class JoggingStore {
+  selectedTabId: "cartesian" | "joint" | "debug" = "cartesian"
+
+  // TODO
+  isLocked: boolean = false
+
+  /**
+   * Id of selected coordinate system from among those defined on the API side
+   */
+  selectedCoordSystemId: string = "world"
+
+  /** Id of selected tool center point from among the options available on the robot */
+  selectedTcpId: string = ""
+
+  /**
+   * Id of selected increment amount for jogging. Options are defined by robot pad.
+   * When non-continuous, jogging moves the robot by a fixed number of mm or degrees
+   * each time the button is pressed, for extra precision
+   */
+  selectedIncrementId: IncrementOptionId = "continuous"
+
+  /**
+   * When on the cartesian tab, jogging can be either translating or rotating
+   * around the TCP.
+   */
+  selectedCartesianMotionType: "translate" | "rotate" = "translate"
+
+  /** True when the API is busy doing a planned increment jog motion */
+  incrementJoggingInProgress = false
+
+  /** How fast the robot goes when doing cartesian translate jogging in mm/s */
+  translationVelocityMmPerSec: number = 10
+  /** How fast the robot goes when doing cartesian or joint rotation jogging in °/s */
+  rotationVelocityDegPerSec: number = 1
+
+  /** Minimum translation velocity user can choose on the velocity slider in °/s */
+  minTranslationVelocityMmPerSec: number = 5
+  /** Maximum translation velocity user can choose on the velocity slider in °/s */
+  maxTranslationVelocityMmPerSec: number = 250
+
+  /** Minimum rotation velocity user can choose on the velocity slider in °/s */
+  minRotationVelocityDegPerSec: number = 1
+  /** Maximum rotation velocity user can choose on the velocity slider in °/s */
+  maxRotationVelocityDegPerSec: number = 60
+
+  disposers: IReactionDisposer[] = []
+
+  /**
+   * Load a jogging store with the relevant data it needs
+   * from the backend
+   */
+  static async loadFor(jogger: JoggerConnection) {
+    const { nova } = jogger
+
+    // Find out what TCPs this motion group has (we need it for jogging)
+    const [motionGroupSpec, { coordinatesystems }, { tcps }] = await Promise.all([
+      nova.api.motionGroupInfos.getMotionGroupSpecification(jogger.motionGroupId),
+
+      // Fetch coord systems so user can select between them
+      nova.api.coordinateSystems.listCoordinateSystems("ROTATION_VECTOR"),
+
+      // Same for TCPs
+      nova.api.motionGroupInfos.listTcps(
+        jogger.motionGroupId,
+        "ROTATION_VECTOR",
+      ),
+    ])
+
+    return new JoggingStore(jogger, motionGroupSpec, coordinatesystems || [], tcps || [])
+  }
+
+  constructor(
+    readonly jogger: JoggerConnection,
+    readonly motionGroupSpec: MotionGroupSpecification,
+    readonly coordSystems: CoordinateSystem[],
+    readonly tcps: RobotTcp[],
+  ) {
+    // TODO workaround for default coord system on backend having a canonical id
+    // of empty string. Can remove when fixed on API side
+    for (const cs of coordSystems) {
+      if (cs.coordinate_system === "") {
+        cs.coordinate_system = "world"
+        break
+      }
+    }
+    this.selectedCoordSystemId = coordSystems[0]?.coordinate_system || "world"
+    this.selectedTcpId = tcps[0]?.id || ""
+
+    makeAutoObservable(this, {}, { autoBind: true })
+
+    // Load user settings from local storage if available
+    this.loadFromLocalStorage()
+
+    // Automatically save user settings to local storage when save changes
+    this.disposers.push(autorun(() => this.saveToLocalStorage()))
+    ;(window as any).joggingStore = this
+  }
+
+  dispose() {
+    for (const dispose of this.disposers) {
+      dispose()
+    }
+    this.jogger.dispose()
+  }
+
+  loadFromLocalStorage() {
+    const save = tryParseJson(localStorage.getItem("joggingToolStore"))
+    if (!save) return
+
+    if (this.tabsById[save.selectedTabId]) {
+      this.selectedTabId = save.selectedTabId
+    }
+
+    if (this.coordSystemsById[save.selectedCoordSystemId]) {
+      this.selectedCoordSystemId = save.selectedCoordSystemId
+    }
+
+    if (this.tcpsById[save.selectedTcpId]) {
+      this.selectedTcpId = save.selectedTcpId
+    }
+
+    if (this.incrementOptionsById[save.selectedIncrementId]) {
+      this.selectedIncrementId = save.selectedIncrementId
+    }
+
+    if (["translate", "rotate"].includes(save.selectedCartesianMotionType)) {
+      this.selectedCartesianMotionType = save.selectedCartesianMotionType
+    }
+  }
+
+  saveToLocalStorage() {
+    localStorage.setItem(
+      "joggingToolStore",
+      JSON.stringify(this.localStorageSave),
+    )
+  }
+
+  get localStorageSave() {
+    return {
+      selectedTabId: this.selectedTabId,
+      selectedCoordSystemId: this.selectedCoordSystemId,
+      selectedTcpId: this.selectedTcpId,
+      selectedIncrementId: this.selectedIncrementId,
+      selectedCartesianMotionType: this.selectedCartesianMotionType,
+    }
+  }
+
+  get tabs() {
+    return [
+      {
+        id: "cartesian",
+        label: "Cartesian",
+      },
+      {
+        id: "joint",
+        label: "Joint",
+      },
+    ] as const
+  }
+
+  get incrementOptions() {
+    return incrementOptions
+  }
+
+  get discreteIncrementOptions() {
+    return discreteIncrementOptions
+  }
+
+  get incrementOptionsById() {
+    return keyBy(this.incrementOptions, (o) => o.id)
+  }
+
+  get tabsById() {
+    return keyBy(this.tabs, (t) => t.id)
+  }
+
+  get currentTab() {
+    return this.tabsById[this.selectedTabId] || this.tabs[0]!
+  }
+
+  get tabIndex() {
+    return this.tabs.indexOf(this.currentTab)
+  }
+
+  get coordSystemsById() {
+    return keyBy(this.coordSystems, (cs) => cs.coordinate_system)
+  }
+
+  get selectedCoordSystem() {
+    return this.coordSystemsById[this.selectedCoordSystemId]
+  }
+
+  get tcpsById() {
+    return keyBy(this.tcps, (tcp) => tcp.id)
+  }
+
+  get selectedDiscreteIncrement() {
+    return discreteIncrementOptions.find(
+      (d) => d.id === this.selectedIncrementId,
+    )
+  }
+
+  /** The selected rotation velocity converted to radians per second */
+  get rotationVelocityRadsPerSec() {
+    return (this.rotationVelocityDegPerSec * Math.PI) / 180
+  }
+
+  get velocityInCurrentUnits() {
+    return this.currentMotionType === "translate"
+      ? this.translationVelocityMmPerSec
+      : this.rotationVelocityDegPerSec
+  }
+
+  get minVelocityInCurrentUnits() {
+    return this.currentMotionType === "translate"
+      ? this.minTranslationVelocityMmPerSec
+      : this.minRotationVelocityDegPerSec
+  }
+
+  get maxVelocityInCurrentUnits() {
+    return this.currentMotionType === "translate"
+      ? this.maxTranslationVelocityMmPerSec
+      : this.maxRotationVelocityDegPerSec
+  }
+
+  /**
+   * For velocity unit purposes, joint and cartesian rotation
+   * are treated as the same type of motion
+   */
+  get currentMotionType() {
+    if (
+      this.selectedTabId === "cartesian" &&
+      this.selectedCartesianMotionType === "translate"
+    ) {
+      return "translate"
+    } else {
+      return "rotate"
+    }
+  }
+
+  onTabChange(_event: React.SyntheticEvent, newValue: number) {
+    const tab = this.tabs[newValue] || this.tabs[0]!
+    this.selectedTabId = tab.id
+  }
+
+  setSelectedCoordSystemId(id: string) {
+    this.selectedCoordSystemId = id
+  }
+
+  setSelectedTcpId(id: string) {
+    this.selectedTcpId = id
+  }
+
+  setSelectedIncrementId(id: IncrementOptionId) {
+    this.selectedIncrementId = id
+  }
+
+  setIncrementJoggingInProgress(inProgress: boolean) {
+    this.incrementJoggingInProgress = inProgress
+  }
+
+  setVelocityFromSlider(velocity: number) {
+    if (this.currentMotionType === "translate") {
+      this.translationVelocityMmPerSec = velocity
+    } else {
+      this.rotationVelocityDegPerSec = velocity
+    }
+  }
+
+  setSelectedCartesianMotionType(type: "translate" | "rotate") {
+    this.selectedCartesianMotionType = type
+  }
+}

package/src/components/jogging/JoggingVelocitySlider.tsx

@@ -0,0 +1,56 @@
+import { Stack, Divider, Typography } from "@mui/material"
+import { observer, useLocalObservable } from "mobx-react-lite"
+import type { JoggingStore } from "./JoggingStore"
+import { VelocitySlider } from "../VelocitySlider"
+import { useTranslation } from "react-i18next"
+
+export const JoggingVelocitySlider = observer(
+  ({ store }: { store: JoggingStore }) => {
+    const { t } = useTranslation()
+
+    const state = useLocalObservable(() => ({
+      get valueLabelFormat() {
+        if (store.currentMotionType === "translate") {
+          return (value: number) =>
+            `v=${t("Jogging.Cartesian.Translation.velocityMmPerSec.lb", { amount: value })}`
+        } else {
+          return (value: number) =>
+            `v=${t("Jogging.Cartesian.Rotation.velocityDegPerSec.lb", { amount: value })}`
+        }
+      },
+    }))
+
+    return (
+      <Stack>
+        <Divider />
+        <Stack
+          sx={{
+            margin: "0px 20px",
+            marginTop: "0.8rem",
+            marginBottom: "0.8rem",
+          }}
+        >
+          <Stack sx={{ width: "380px", maxWidth: "90%", margin: "auto" }}>
+            <Typography
+              sx={{
+                fontWeight: "bold",
+                fontSize: "15px",
+              }}
+            >
+              {t("Jogging.Velocity.lb")}
+            </Typography>
+            <VelocitySlider
+              velocity={store.velocityInCurrentUnits}
+              min={store.minVelocityInCurrentUnits}
+              max={store.maxVelocityInCurrentUnits}
+              onVelocityChange={store.setVelocityFromSlider}
+              disabled={store.isLocked}
+              valueLabelFormat={state.valueLabelFormat}
+            />
+          </Stack>
+        </Stack>
+        <Divider />
+      </Stack>
+    )
+  },
+)