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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wandelbots/wandelbots-js-react-components",
-  "version": "1.9.0",
+  "version": "1.9.1",
   "description": "React UI toolkit for building applications on top of the Wandelbots platform",
   "files": [
     "dist",

package/src/Setup.tsx

@@ -0,0 +1,37 @@
+import * as React from "react"
+import { Vector3 } from "three"
+import { Canvas, type Props as CanvasProps } from "@react-three/fiber"
+import { OrbitControls } from "@react-three/drei"
+import { PresetEnvironment } from "./components/3d-viewport/PresetEnvironment"
+
+type Props = React.PropsWithChildren<
+  CanvasProps & {
+    cameraFov?: number
+    cameraPosition?: Vector3
+    controls?: boolean
+    lights?: boolean
+  }
+>
+
+export const Setup = ({
+  children,
+  cameraFov = 25,
+  cameraPosition = new Vector3(-2, 1, 1),
+  controls = true,
+  lights = true,
+  ...restProps
+}: Props) => (
+  <Canvas
+    shadows
+    camera={{ position: cameraPosition, fov: cameraFov }}
+    {...restProps}
+  >
+    {children}
+    {lights && (
+      <>
+        <PresetEnvironment />
+      </>
+    )}
+    {controls && <OrbitControls makeDefault />}
+  </Canvas>
+)

package/src/components/VelocitySlider.tsx

@@ -30,7 +30,7 @@ export const VelocitySlider = observer((props: VelocitySliderProps) => {
       <Typography
         sx={{
           textAlign: "center",
-          fontSize: "15px",
+          fontSize: "14px",
           opacity: 0.8,
           color: theme.palette.text.primary,
         }}

package/src/components/jogging/JoggingCartesianTab.tsx

@@ -150,7 +150,7 @@ export const JoggingCartesianTab = observer(
         {/* Jogging options */}
         <JoggingOptions store={store} />
 
-        <Stack width="80%" maxWidth="296px" margin="auto" marginTop="24px">
+        <Stack width="80%" maxWidth="296px" margin="auto" marginTop="16px">
           {/* Translate or rotate toggle */}
           <ToggleButtonGroup
             value={store.selectedCartesianMotionType}

package/src/components/jogging/JoggingCartesianValues.tsx

@@ -30,7 +30,8 @@ export const JoggingCartesianValues = observer(
         alignItems="left"
         spacing={2}
         sx={{
-          padding: "16px",
+          padding: "8px 16px",
+          paddingTop: "16px",
           "& label": {
             opacity: 0.7,
             fontSize: "12px",

package/src/components/jogging/JoggingOptions.tsx

@@ -30,8 +30,7 @@ export const JoggingOptions = observer(({ store }: { store: JoggingStore }) => {
         alignItems={"center"}
         spacing={2}
         sx={{
-          padding: "16px",
-          paddingTop: "8px",
+          padding: "8px 16px",
           "& label": {
             opacity: 0.7,
             fontSize: "12px",
@@ -84,8 +83,7 @@ export const JoggingOptions = observer(({ store }: { store: JoggingStore }) => {
         alignItems={"center"}
         spacing={2}
         sx={{
-          padding: "16px",
-          paddingTop: "8px",
+          padding: "8px 16px",
           "& label": {
             opacity: 0.7,
             fontSize: "12px",

package/src/components/jogging/JoggingVelocitySlider.tsx

@@ -29,20 +29,6 @@ export const JoggingVelocitySlider = observer(
         }}
       >
         <Stack sx={{ width: "380px", maxWidth: "90%", margin: "auto" }}>
-          <Stack
-            sx={{
-              justifyContent: "center",
-            }}
-          >
-            <Typography
-              sx={{
-                fontSize: "12px",
-                opacity: 0.6,
-              }}
-            >
-              {t("Jogging.Velocity.lb")}
-            </Typography>
-          </Stack>
           <VelocitySlider
             velocity={store.velocityInCurrentUnits}
             min={store.minVelocityInCurrentUnits}

package/src/components/robots/SupportedRobot.stories.tsx

@@ -0,0 +1,130 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import { useState } from "react"
+import { Canvas } from "@react-three/fiber"
+import { Euler, Vector3, WebGLRenderer } from "three"
+import { OrbitControls, Grid } from "@react-three/drei"
+import { SupportedRobot } from "./SupportedRobot"
+import type {
+  Joints,
+  MotionGroupStateJointLimitReached,
+  MotionGroupStateResponse,
+  MotionVector,
+  TcpPose,
+} from "@wandelbots/wandelbots-js"
+import { Setup } from "../../Setup"
+
+export default {
+  title: "Components/SupportedRobot",
+  component: SupportedRobot,
+  decorators: [
+    (Story) => (
+      <div
+        style={{
+          width: "100%",
+          height: "100vh",
+          display: "flex",
+          justifyContent: "center",
+          alignItems: "center",
+        }}
+      >
+        <Setup cameraPosition={new Vector3(0, 0, 3)}>
+          <group position={[0, -0.25, 0]}>
+            <Story />
+          </group>
+        </Setup>
+      </div>
+    ),
+  ],
+} satisfies Meta<typeof SupportedRobot>
+
+type Story = StoryObj<typeof SupportedRobot>
+
+function SupportedRobotScene(
+  props: React.ComponentProps<typeof SupportedRobot>,
+) {
+  const rapidlyChangingMotionState: MotionGroupStateResponse = {
+    state: {
+      motion_group: "",
+      controller: "",
+      joint_position: {
+        joints: [0, 0, 0, 0, 0, 0],
+      } as Joints,
+      joint_velocity: {
+        joints: [0, 0, 0, 0, 0, 0],
+      } as Joints,
+      tcp_pose: {
+        position: { x: 0, y: 0, z: 0 },
+        orientation: { x: 0, y: 0, z: 0 },
+        coordinate_system: "world",
+        tcp: "flange",
+      } as TcpPose,
+      velocity: {
+        linear: { x: 0, y: 0, z: 0 },
+        angular: { x: 0, y: 0, z: 0 },
+        coordinate_system: "world",
+      } as MotionVector,
+      joint_limit_reached: {
+        limit_reached: [false, false, false, false, false, false],
+      } as MotionGroupStateJointLimitReached,
+    },
+  }
+
+  return (
+    <SupportedRobot
+      {...props}
+      rapidlyChangingMotionState={rapidlyChangingMotionState}
+      dhParameters={[
+        {
+          a: 0,
+          d: 0,
+          alpha: 1.5707963267948966,
+          theta: 0,
+          reverse_rotation_direction: false,
+        },
+        {
+          a: 710,
+          d: 0,
+          alpha: 0,
+          theta: 1.5707963267948966,
+          reverse_rotation_direction: false,
+        },
+        {
+          a: 0,
+          d: 0,
+          alpha: -1.5707963267948966,
+          theta: 0,
+          reverse_rotation_direction: false,
+        },
+        {
+          a: 0,
+          d: -540,
+          alpha: 1.5707963267948966,
+          theta: 0,
+          reverse_rotation_direction: false,
+        },
+        {
+          a: 0,
+          d: 150,
+          alpha: -1.5707963267948966,
+          theta: 0,
+          reverse_rotation_direction: false,
+        },
+        {
+          a: 0,
+          d: -160,
+          alpha: 3.141592653589793,
+          theta: 0,
+          reverse_rotation_direction: false,
+        },
+      ]}
+    />
+  )
+}
+
+export const SupportedRobotSceneSt = {
+  args: {
+    modelFromController: "FANUC_CRX25iAL",
+  },
+  render: (args) => <SupportedRobotScene {...args} />,
+  name: "Default",
+} satisfies Story

package/src/index.ts

@@ -38,3 +38,4 @@ import { VelocitySlider as VS } from "./components/VelocitySlider"
 export const VelocitySlider = externalizeComponent(VS)
 
 export * from "./components/utils/hooks"
+export * from "./components/robots/AxisConfig"