@wandelbots/wandelbots-js-react-components 1.7.1 → 1.9.0

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

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

package/src/components/jogging/JoggingPanel.tsx

@@ -6,11 +6,17 @@ import { JoggingJointTab } from "./JoggingJointTab"
 import { JoggingStore } from "./JoggingStore"
 import { LoadingCover } from "../LoadingCover"
 import { runInAction } from "mobx"
-import { NovaClient } from "@wandelbots/wandelbots-js"
+import type { NovaClient } from "@wandelbots/wandelbots-js"
 
 export type JoggingPanelProps = {
+  /** Connection to a Nova instance to use for jogging */
   nova: NovaClient
+  /** Id of the motion group to move e.g. 0@ur5e **/
   motionGroupId: string
+  /** Callback with the jogging panel's state store for further customization/config */
+  onSetup?: (store: JoggingStore) => void
+  /** Any children will go at the bottom of the panel under the default components */
+  children?: React.ReactNode
 }
 
 export const JoggingPanel = observer((props: JoggingPanelProps) => {
@@ -28,6 +34,9 @@ export const JoggingPanel = observer((props: JoggingPanelProps) => {
       runInAction(() => {
         state.joggingStore = joggingStore
       })
+      if (props.onSetup) {
+        props.onSetup(joggingStore)
+      }
     } catch (err) {
       state.loadingError = err
     }
@@ -47,7 +56,7 @@ export const JoggingPanel = observer((props: JoggingPanelProps) => {
     const {
       currentTab,
       selectedTcpId,
-      selectedCoordSystemId,
+      activeCoordSystemId,
       selectedDiscreteIncrement,
     } = state.joggingStore
 
@@ -55,40 +64,27 @@ export const JoggingPanel = observer((props: JoggingPanelProps) => {
 
     const cartesianJoggingOpts = {
       tcpId: selectedTcpId,
-      coordSystemId: selectedCoordSystemId,
+      coordSystemId: activeCoordSystemId,
     }
 
     if (selectedDiscreteIncrement && currentTab.id === "cartesian") {
-      state.joggingStore.jogger.setJoggingMode("increment", cartesianJoggingOpts)
+      state.joggingStore.jogger.setJoggingMode(
+        "increment",
+        cartesianJoggingOpts,
+      )
     } else {
-      state.joggingStore.jogger.setJoggingMode(currentTab.id, cartesianJoggingOpts)
+      state.joggingStore.jogger.setJoggingMode(
+        currentTab.id,
+        cartesianJoggingOpts,
+      )
     }
   }, [
     state.joggingStore?.currentTab,
     state.joggingStore?.selectedTcpId,
-    state.joggingStore?.selectedCoordSystemId,
+    state.joggingStore?.activeCoordSystemId,
     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>
@@ -119,9 +115,8 @@ export const JoggingPanel = observer((props: JoggingPanelProps) => {
           {store.currentTab.id === "cartesian" && (
             <JoggingCartesianTab store={store} />
           )}
-          {store.currentTab.id === "joint" && (
-            <JoggingJointTab store={store} />
-          )}
+          {store.currentTab.id === "joint" && <JoggingJointTab store={store} />}
+          {props.children}
         </Stack>
       </Stack>
     </JoggingPanelOuter>
@@ -136,11 +131,14 @@ function JoggingPanelOuter({ children }: { children: React.ReactNode }) {
         minWidth: "350px",
         overflowY: "auto",
         position: "relative",
+        height: "100%",
       }}
     >
-      <Paper sx={{
-        minHeight: "90vh"
-      }}>
+      <Paper
+        sx={{
+          height: "100%",
+        }}
+      >
         {children}
       </Paper>
     </Stack>

package/src/components/jogging/JoggingStore.tsx

@@ -1,6 +1,11 @@
-import { keyBy } from "lodash-es"
+import { keyBy, uniqueId } from "lodash-es"
 import { autorun, makeAutoObservable, type IReactionDisposer } from "mobx"
-import type { CoordinateSystem, JoggerConnection, MotionGroupSpecification, RobotTcp } from "@wandelbots/wandelbots-js"
+import type {
+  CoordinateSystem,
+  JoggerConnection,
+  MotionGroupSpecification,
+  RobotTcp,
+} from "@wandelbots/wandelbots-js"
 import { tryParseJson } from "@wandelbots/wandelbots-js"
 
 const discreteIncrementOptions = [
@@ -22,8 +27,8 @@ export type IncrementOptionId = IncrementOption["id"]
 export class JoggingStore {
   selectedTabId: "cartesian" | "joint" | "debug" = "cartesian"
 
-  // TODO
-  isLocked: boolean = false
+  /** Locks to prevent UI interactions during certain operations */
+  locks = new Set<string>()
 
   /**
    * Id of selected coordinate system from among those defined on the API side
@@ -33,6 +38,13 @@ export class JoggingStore {
   /** Id of selected tool center point from among the options available on the robot */
   selectedTcpId: string = ""
 
+  /**
+   * Whether the user is jogging in the coordinate system or tool orientation.
+   * When in tool orientation, the robot moves in a direction relative to the
+   * attached tool rotation.
+   */
+  selectedOrientation: "coordsys" | "tool" = "coordsys"
+
   /**
    * 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
@@ -74,20 +86,28 @@ export class JoggingStore {
     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 || [])
+    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(
@@ -147,6 +167,10 @@ export class JoggingStore {
     if (["translate", "rotate"].includes(save.selectedCartesianMotionType)) {
       this.selectedCartesianMotionType = save.selectedCartesianMotionType
     }
+
+    if (["coordsys", "tool"].includes(save.selectedOrientation)) {
+      this.selectedOrientation = save.selectedOrientation
+    }
   }
 
   saveToLocalStorage() {
@@ -156,11 +180,16 @@ export class JoggingStore {
     )
   }
 
+  get isLocked() {
+    return this.locks.size > 0
+  }
+
   get localStorageSave() {
     return {
       selectedTabId: this.selectedTabId,
       selectedCoordSystemId: this.selectedCoordSystemId,
       selectedTcpId: this.selectedTcpId,
+      selectedOrientation: this.selectedOrientation,
       selectedIncrementId: this.selectedIncrementId,
       selectedCartesianMotionType: this.selectedCartesianMotionType,
     }
@@ -211,6 +240,12 @@ export class JoggingStore {
     return this.coordSystemsById[this.selectedCoordSystemId]
   }
 
+  get activeCoordSystemId() {
+    return this.selectedOrientation === "tool"
+      ? "tool"
+      : this.selectedCoordSystemId
+  }
+
   get tcpsById() {
     return keyBy(this.tcps, (tcp) => tcp.id)
   }
@@ -272,6 +307,10 @@ export class JoggingStore {
     this.selectedTcpId = id
   }
 
+  setSelectedOrientation(orientation: "coordsys" | "tool") {
+    this.selectedOrientation = orientation
+  }
+
   setSelectedIncrementId(id: IncrementOptionId) {
     this.selectedIncrementId = id
   }
@@ -291,4 +330,16 @@ export class JoggingStore {
   setSelectedCartesianMotionType(type: "translate" | "rotate") {
     this.selectedCartesianMotionType = type
   }
+
+  /** Lock the UI until the given async callback resolves */
+  async withMotionLock(fn: () => Promise<void>) {
+    const lockId = uniqueId()
+    this.locks.add(lockId)
+
+    try {
+      return await fn()
+    } finally {
+      this.locks.delete(lockId)
+    }
+  }
 }

package/src/components/jogging/JoggingVelocitySlider.tsx

@@ -1,4 +1,4 @@
-import { Stack, Divider, Typography } from "@mui/material"
+import { Stack, Typography } from "@mui/material"
 import { observer, useLocalObservable } from "mobx-react-lite"
 import type { JoggingStore } from "./JoggingStore"
 import { VelocitySlider } from "../VelocitySlider"
@@ -21,35 +21,37 @@ export const JoggingVelocitySlider = observer(
     }))
 
     return (
-      <Stack>
-        <Divider />
-        <Stack
-          sx={{
-            margin: "0px 20px",
-            marginTop: "0.8rem",
-            marginBottom: "0.8rem",
-          }}
-        >
-          <Stack sx={{ width: "380px", maxWidth: "90%", margin: "auto" }}>
+      <Stack
+        sx={{
+          margin: "0px 20px",
+          marginTop: "24px",
+          marginBottom: "24px",
+        }}
+      >
+        <Stack sx={{ width: "380px", maxWidth: "90%", margin: "auto" }}>
+          <Stack
+            sx={{
+              justifyContent: "center",
+            }}
+          >
             <Typography
               sx={{
-                fontWeight: "bold",
-                fontSize: "15px",
+                fontSize: "12px",
+                opacity: 0.6,
               }}
             >
               {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>
+          <VelocitySlider
+            velocity={store.velocityInCurrentUnits}
+            min={store.minVelocityInCurrentUnits}
+            max={store.maxVelocityInCurrentUnits}
+            onVelocityChange={store.setVelocityFromSlider}
+            disabled={store.isLocked}
+            valueLabelFormat={state.valueLabelFormat}
+          />
         </Stack>
-        <Divider />
       </Stack>
     )
   },

package/src/components/robots/FANUC_CRX20iAL.tsx

@@ -0,0 +1,176 @@
+import { useGLTF } from "@react-three/drei"
+import type * as THREE from "three"
+import type { RobotProps } from "./SupportedRobot"
+import { animated } from "@react-spring/three"
+import RobotAnimator from "./RobotAnimator"
+
+export function FANUC_CRX20iAL({
+  modelURL,
+  rapidlyChangingMotionState,
+  ...props
+}: RobotProps) {
+  const gltf = useGLTF(modelURL) as any
+  const nodes = gltf.nodes
+  const materials = gltf.materials
+  const rotationOffsets = [0, Math.PI / 2, 0, 0, 0, 0]
+
+  function setRotation(jointObjects: THREE.Object3D[], jointValues: number[]) {
+    jointObjects.forEach(
+      (object, index) =>
+        (object.rotation.y = jointValues[index]! + rotationOffsets[index]!),
+    )
+  }
+
+  return (
+    <>
+      <RobotAnimator
+        rapidlyChangingMotionState={rapidlyChangingMotionState}
+        robotRootObjectName="Scene"
+        onRotationChanged={setRotation}
+      />
+      <group {...props} dispose={null}>
+        <group name="Scene">
+          <mesh
+            name="link_0"
+            castShadow
+            receiveShadow
+            geometry={nodes.link_0.geometry}
+            material={materials.fanuc_metal_black}
+          />
+          <animated.group name="FANUC_CRX20iAL_J00" position={[0, -0.245, 0]}>
+            <animated.group
+              name="FANUC_CRX20iAL_J01"
+              position={[0, 0.245, 0]}
+              rotation={[Math.PI / 2, Math.PI / 2, 0]}
+            >
+              <animated.group name="FANUC_CRX20iAL_J02" position={[0.71, 0, 0]}>
+                <animated.group
+                  name="FANUC_CRX20iAL_J03"
+                  rotation={[-Math.PI / 2, 0, 0]}
+                >
+                  <animated.group
+                    name="FANUC_CRX20iAL_J04"
+                    position={[0, -0.54, 0]}
+                    rotation={[Math.PI / 2, 0, 0]}
+                  >
+                    <animated.group
+                      name="FANUC_CRX20iAL_J05"
+                      position={[0, 0.15, 0]}
+                      rotation={[-Math.PI / 2, 0, 0]}
+                    >
+                      <animated.group
+                        name="FANUC_CRX20iAL_FLG"
+                        position={[0, -0.16, 0]}
+                        rotation={[-Math.PI, 0, 0]}
+                      />
+                      <mesh
+                        name="link_6"
+                        castShadow
+                        receiveShadow
+                        geometry={nodes.link_6.geometry}
+                        material={materials.fanuc_metal_black}
+                        position={[-0.71, 0.54, -0.15]}
+                        rotation={[0, 0, -Math.PI / 2]}
+                      />
+                    </animated.group>
+                    <animated.group
+                      name="link_5"
+                      position={[-0.71, 0, -0.54]}
+                      rotation={[-Math.PI / 2, 0, -Math.PI / 2]}
+                    >
+                      <mesh
+                        name="shape053"
+                        castShadow
+                        receiveShadow
+                        geometry={nodes.shape053.geometry}
+                        material={materials.fanuc_white}
+                      />
+                      <mesh
+                        name="shape053_1"
+                        castShadow
+                        receiveShadow
+                        geometry={nodes.shape053_1.geometry}
+                        material={materials.fanuc_green}
+                      />
+                    </animated.group>
+                  </animated.group>
+                  <animated.group
+                    name="link_4"
+                    position={[-0.71, 0, 0]}
+                    rotation={[0, 0, -Math.PI / 2]}
+                  >
+                    <mesh
+                      name="shape054"
+                      castShadow
+                      receiveShadow
+                      geometry={nodes.shape054.geometry}
+                      material={materials.fanuc_white}
+                    />
+                    <mesh
+                      name="shape054_1"
+                      castShadow
+                      receiveShadow
+                      geometry={nodes.shape054_1.geometry}
+                      material={materials.fanuc_red}
+                    />
+                    <mesh
+                      name="shape054_2"
+                      castShadow
+                      receiveShadow
+                      geometry={nodes.shape054_2.geometry}
+                      material={materials.fanuc_metal_black}
+                    />
+                  </animated.group>
+                </animated.group>
+                <animated.group
+                  name="link_3"
+                  position={[-0.71, 0, 0]}
+                  rotation={[-Math.PI / 2, 0, -Math.PI / 2]}
+                >
+                  <mesh
+                    name="shape009"
+                    castShadow
+                    receiveShadow
+                    geometry={nodes.shape009.geometry}
+                    material={materials.fanuc_green}
+                  />
+                  <mesh
+                    name="shape009_1"
+                    castShadow
+                    receiveShadow
+                    geometry={nodes.shape009_1.geometry}
+                    material={materials.fanuc_white}
+                  />
+                </animated.group>
+              </animated.group>
+              <mesh
+                name="link_2"
+                castShadow
+                receiveShadow
+                geometry={nodes.link_2.geometry}
+                material={materials.fanuc_white}
+                rotation={[-Math.PI / 2, 0, -Math.PI / 2]}
+              />
+            </animated.group>
+            <group name="link_1" position={[0, 0.245, 0]}>
+              <mesh
+                name="shape005"
+                castShadow
+                receiveShadow
+                geometry={nodes.shape005.geometry}
+                material={materials.fanuc_white}
+              />
+              <mesh
+                name="shape005_1"
+                castShadow
+                receiveShadow
+                geometry={nodes.shape005_1.geometry}
+                material={materials.fanuc_green}
+              />
+            </group>
+          </animated.group>
+        </group>
+      </group>
+    </>
+  )
+}

package/src/components/robots/SupportedRobot.tsx

@@ -12,6 +12,7 @@ import { Yaskawa_AR1730 } from "./Yaskawa_AR1730"
 import { Yaskawa_AR2010 } from "./Yaskawa_AR2010"
 import { Yaskawa_AR3120 } from "./Yaskawa_AR3120"
 import { FANUC_CRX10iA } from "./FANUC_CRX10iA"
+import { FANUC_CRX20iAL } from "./FANUC_CRX20iAL"
 import { FANUC_CRX25iA } from "./FANUC_CRX25iA"
 import { FANUC_CRX25iAL } from "./FANUC_CRX25iAL"
 import { KUKA_KR210_R2700 } from "./KUKA_KR210_R2700"
@@ -204,6 +205,9 @@ export function SupportedRobot({
     case "FANUC_CRX10iA":
       Robot = FANUC_CRX10iA
       break
+    case "FANUC_CRX20iAL":
+      Robot = FANUC_CRX20iAL
+      break
     case "FANUC_CRX25iA":
       Robot = FANUC_CRX25iA
       break

package/src/components/wandelscript-editor/WandelscriptEditor.stories.tsx

@@ -1,10 +1,10 @@
-import { Meta, StoryObj } from "@storybook/react";
-import { WandelscriptEditor } from "./WandelscriptEditor";
+import type { Meta, StoryObj } from "@storybook/react"
+import { WandelscriptEditor } from "../../index"
 
 const meta: Meta<typeof WandelscriptEditor> = {
   component: WandelscriptEditor,
-};
-export default meta;
+}
+export default meta
 
 const defaultCode = `start = [832, -452, 289]  # The start position of the edge
 end = [817, 168, 288]  # The end position of the edge
@@ -29,7 +29,7 @@ for i = 0..<int(n / 2) - 1:
     move via arc(a) to b
     if i == 10:
         test_pose = planned_pose()
-`;
+`
 
 export const Editor: StoryObj<typeof WandelscriptEditor> = {
   args: {
@@ -40,6 +40,6 @@ export const Editor: StoryObj<typeof WandelscriptEditor> = {
       <div style={{ height: "400px" }}>
         <WandelscriptEditor {...props} />
       </div>
-    );
+    )
   },
-};
+}