@wandelbots/wandelbots-js-react-components 1.17.2 → 1.17.4

package/src/components/robots/UniversalRobots_UR10e.tsx

@@ -1,31 +1,14 @@
 import { animated } from "@react-spring/three"
 import { useGLTF } from "@react-three/drei"
-import type { RobotProps } from "./SupportedRobot"
-import RobotAnimator from "./RobotAnimator"
-import type * as THREE from "three"
+import type { RobotModelProps } from "./types"
 
-export function UniversalRobots_UR10e({
-  modelURL,
-  rapidlyChangingMotionState,
-  ...props
-}: RobotProps) {
+export function UniversalRobots_UR10e({ modelURL, ...props }: RobotModelProps) {
   const gltf = useGLTF(modelURL) as any
   const nodes = gltf.nodes
   const materials = gltf.materials
 
-  function setRotation(jointObjects: THREE.Object3D[], jointValues: number[]) {
-    jointObjects.forEach(
-      (object, index) => (object.rotation.y = jointValues[index]!),
-    )
-  }
-
   return (
     <>
-      <RobotAnimator
-        rapidlyChangingMotionState={rapidlyChangingMotionState}
-        robotRootObjectName="Scene"
-        onRotationChanged={setRotation}
-      />
       <group {...props} dispose={null}>
         <group name="Scene">
           <group name="UR10e" rotation={[Math.PI / 2, 0, 0]}>

package/src/components/robots/UniversalRobots_UR3.tsx

@@ -1,31 +1,14 @@
 import { animated } from "@react-spring/three"
 import { useGLTF } from "@react-three/drei"
-import type * as THREE from "three"
-import type { RobotProps } from "./SupportedRobot"
-import RobotAnimator from "./RobotAnimator"
+import type { RobotModelProps } from "./types"
 
-export function UniversalRobots_UR3({
-  modelURL,
-  rapidlyChangingMotionState,
-  ...props
-}: RobotProps) {
+export function UniversalRobots_UR3({ modelURL, ...props }: RobotModelProps) {
   const gltf = useGLTF(modelURL) as any
   const nodes = gltf.nodes
   const materials = gltf.materials
 
-  function setRotation(jointObjects: THREE.Object3D[], jointValues: number[]) {
-    jointObjects.forEach(
-      (object, index) => (object.rotation.y = jointValues[index]!),
-    )
-  }
-
   return (
     <>
-      <RobotAnimator
-        rapidlyChangingMotionState={rapidlyChangingMotionState}
-        robotRootObjectName="Scene"
-        onRotationChanged={setRotation}
-      />
       <group {...props} dispose={null}>
         <group name="Scene">
           <group name="UR3" rotation={[Math.PI / 2, 0, 0]}>

package/src/components/robots/UniversalRobots_UR3e.tsx

@@ -1,31 +1,14 @@
-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"
+import { useGLTF } from "@react-three/drei"
+import type { RobotModelProps } from "./types"
 
-export function UniversalRobots_UR3e({
-  modelURL,
-  rapidlyChangingMotionState,
-  ...props
-}: RobotProps) {
+export function UniversalRobots_UR3e({ modelURL, ...props }: RobotModelProps) {
   const gltf = useGLTF(modelURL) as any
   const nodes = gltf.nodes
   const materials = gltf.materials
 
-  function setRotation(jointObjects: THREE.Object3D[], jointValues: number[]) {
-    jointObjects.forEach(
-      (object, index) => (object.rotation.y = jointValues[index]!),
-    )
-  }
-
   return (
     <>
-      <RobotAnimator
-        rapidlyChangingMotionState={rapidlyChangingMotionState}
-        robotRootObjectName="Scene"
-        onRotationChanged={setRotation}
-      />
       <group {...props} dispose={null}>
         <group name="Scene">
           <animated.group name="UR3e" rotation={[Math.PI / 2, 0, 0]}>

package/src/components/robots/UniversalRobots_UR5.tsx

@@ -1,31 +1,14 @@
-import { useGLTF } from "@react-three/drei"
-import type * as THREE from "three"
 import { animated } from "@react-spring/three"
-import type { RobotProps } from "./SupportedRobot"
-import RobotAnimator from "./RobotAnimator"
+import { useGLTF } from "@react-three/drei"
+import type { RobotModelProps } from "./types"
 
-export function UniversalRobots_UR5({
-  modelURL,
-  rapidlyChangingMotionState,
-  ...props
-}: RobotProps) {
+export function UniversalRobots_UR5({ modelURL, ...props }: RobotModelProps) {
   const gltf = useGLTF(modelURL) as any
   const nodes = gltf.nodes
   const materials = gltf.materials
 
-  function setRotation(jointObjects: THREE.Object3D[], jointValues: number[]) {
-    jointObjects.forEach(
-      (object, index) => (object.rotation.y = jointValues[index]!),
-    )
-  }
-
   return (
     <>
-      <RobotAnimator
-        rapidlyChangingMotionState={rapidlyChangingMotionState}
-        robotRootObjectName="Scene"
-        onRotationChanged={setRotation}
-      />
       <group {...props} dispose={null}>
         <group name="Scene">
           <animated.group name="UNIVERSALROBOTS_UR5CB3_J00">

package/src/components/robots/UniversalRobots_UR5e.tsx

@@ -1,31 +1,14 @@
-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"
+import { useGLTF } from "@react-three/drei"
+import type { RobotModelProps } from "./types"
 
-export function UniversalRobots_UR5e({
-  modelURL,
-  rapidlyChangingMotionState,
-  ...props
-}: RobotProps) {
+export function UniversalRobots_UR5e({ modelURL, ...props }: RobotModelProps) {
   const gltf = useGLTF(modelURL) as any
   const nodes = gltf.nodes
   const materials = gltf.materials
 
-  function setRotation(jointObjects: THREE.Object3D[], jointValues: number[]) {
-    jointObjects.forEach(
-      (object, index) => (object.rotation.y = jointValues[index]!),
-    )
-  }
-
   return (
     <>
-      <RobotAnimator
-        rapidlyChangingMotionState={rapidlyChangingMotionState}
-        robotRootObjectName="Scene"
-        onRotationChanged={setRotation}
-      />
       <group {...props} dispose={null}>
         <group name="Scene">
           <group name="UR5e" rotation={[Math.PI / 2, 0, 0]}>

package/src/components/robots/Yaskawa_AR1440.tsx

@@ -1,36 +1,20 @@
-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"
+import { useGLTF } from "@react-three/drei"
+import type { RobotModelProps } from "./types"
 
-export function Yaskawa_AR1440({
-  modelURL,
-  rapidlyChangingMotionState,
-  ...props
-}: RobotProps) {
+Yaskawa_AR1440.config = {
+  rotationOffsets: [0, -Math.PI / 2, 0, 0, 0, 0],
+  rotationSign: [1, -1, 1, 1, 1, 1],
+}
+
+export function Yaskawa_AR1440({ modelURL, ...props }: RobotModelProps) {
   const gltf = useGLTF(modelURL) as any
 
   const nodes = gltf.nodes
   const materials = gltf.materials
-  const rotationOffsets = [0, -Math.PI / 2, 0, 0, 0, 0]
-  const rotationSign = [1, -1, 1, 1, 1, 1]
-
-  function setRotation(jointObjects: THREE.Object3D[], jointValues: number[]) {
-    jointObjects.forEach(
-      (object, index) =>
-        (object.rotation.y =
-          rotationSign[index]! * jointValues[index]! + rotationOffsets[index]!),
-    )
-  }
 
   return (
     <>
-      <RobotAnimator
-        rapidlyChangingMotionState={rapidlyChangingMotionState}
-        robotRootObjectName="Scene"
-        onRotationChanged={setRotation}
-      />
       <group {...props} dispose={null}>
         <group name="Scene">
           <group name="AR1440" rotation={[Math.PI / 2, 0, 0]}>

package/src/components/robots/Yaskawa_AR1730.tsx

@@ -1,36 +1,20 @@
-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"
+import { useGLTF } from "@react-three/drei"
+import type { RobotModelProps } from "./types"
 
-export function Yaskawa_AR1730({
-  modelURL,
-  rapidlyChangingMotionState,
-  ...props
-}: RobotProps) {
+Yaskawa_AR1730.config = {
+  rotationOffsets: [0, -Math.PI / 2, 0, 0, 0, 0],
+  rotationSign: [1, -1, 1, 1, 1, 1],
+}
+
+export function Yaskawa_AR1730({ modelURL, ...props }: RobotModelProps) {
   const gltf = useGLTF(modelURL) as any
 
   const nodes = gltf.nodes
   const materials = gltf.materials
-  const rotationOffsets = [0, -Math.PI / 2, 0, 0, 0, 0]
-  const rotationSign = [1, -1, 1, 1, 1, 1]
-
-  function setRotation(jointObjects: THREE.Object3D[], jointValues: number[]) {
-    jointObjects.forEach(
-      (object, index) =>
-        (object.rotation.y =
-          rotationSign[index]! * jointValues[index]! + rotationOffsets[index]!),
-    )
-  }
 
   return (
     <>
-      <RobotAnimator
-        rapidlyChangingMotionState={rapidlyChangingMotionState}
-        robotRootObjectName="Scene"
-        onRotationChanged={setRotation}
-      />
       <group {...props} dispose={null}>
         <group name="Scene">
           <animated.group name="AR1730_J00">

package/src/components/robots/Yaskawa_AR2010.tsx

@@ -1,35 +1,19 @@
-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"
+import { useGLTF } from "@react-three/drei"
+import type { RobotModelProps } from "./types"
 
-export function Yaskawa_AR2010({
-  modelURL,
-  rapidlyChangingMotionState,
-  ...props
-}: RobotProps) {
+Yaskawa_AR2010.config = {
+  rotationOffsets: [0, -Math.PI / 2, 0, 0, 0, 0],
+  rotationSign: [1, -1, 1, 1, 1, 1],
+}
+
+export function Yaskawa_AR2010({ modelURL, ...props }: RobotModelProps) {
   const gltf = useGLTF(modelURL) as any
   const nodes = gltf.nodes
   const materials = gltf.materials
-  const rotationOffsets = [0, -Math.PI / 2, 0, 0, 0, 0]
-  const rotationSign = [1, -1, 1, 1, 1, 1]
-
-  function setRotation(jointObjects: THREE.Object3D[], jointValues: number[]) {
-    jointObjects.forEach(
-      (object, index) =>
-        (object.rotation.y =
-          rotationSign[index]! * jointValues[index]! + rotationOffsets[index]!),
-    )
-  }
 
   return (
     <>
-      <RobotAnimator
-        rapidlyChangingMotionState={rapidlyChangingMotionState}
-        robotRootObjectName="Scene"
-        onRotationChanged={setRotation}
-      />
       <group {...props} dispose={null}>
         <group name="Scene">
           <group name="AR2010" rotation={[Math.PI / 2, 0, 0]}>

package/src/components/robots/Yaskawa_AR3120.tsx

@@ -1,36 +1,20 @@
-import { useGLTF } from "@react-three/drei"
-import type * as THREE from "three"
-import type { RobotProps } from "./SupportedRobot"
-import RobotAnimator from "./RobotAnimator"
 import { animated } from "@react-spring/three"
+import { useGLTF } from "@react-three/drei"
+import type { RobotModelProps } from "./types"
 
-export function Yaskawa_AR3120({
-  modelURL,
-  rapidlyChangingMotionState,
-  ...props
-}: RobotProps) {
+Yaskawa_AR3120.config = {
+  rotationOffsets: [0, -Math.PI / 2, 0, 0, 0, 0],
+  rotationSign: [1, -1, 1, 1, 1, 1],
+}
+
+export function Yaskawa_AR3120({ modelURL, ...props }: RobotModelProps) {
   const gltf = useGLTF(modelURL) as any
 
   const nodes = gltf.nodes
   const materials = gltf.materials
-  const rotationOffsets = [0, -Math.PI / 2, 0, 0, 0, 0]
-  const rotationSign = [1, -1, 1, 1, 1, 1]
-
-  function setRotation(jointObjects: THREE.Object3D[], jointValues: number[]) {
-    jointObjects.forEach(
-      (object, index) =>
-        (object.rotation.y =
-          rotationSign[index]! * jointValues[index]! + rotationOffsets[index]!),
-    )
-  }
 
   return (
     <>
-      <RobotAnimator
-        rapidlyChangingMotionState={rapidlyChangingMotionState}
-        robotRootObjectName="Scene"
-        onRotationChanged={setRotation}
-      />
       <group {...props} dispose={null}>
         <group name="Scene">
           <animated.group name="AR3120_J00">

package/src/components/robots/Yaskawa_AR900.tsx

@@ -1,33 +1,18 @@
-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"
+import { useGLTF } from "@react-three/drei"
+import type { RobotModelProps } from "./types"
 
-export function Yaskawa_AR900({
-  modelURL,
-  rapidlyChangingMotionState,
-  ...props
-}: RobotProps) {
+Yaskawa_AR900.config = {
+  rotationOffsets: [0, -Math.PI / 2, 0, 0, 0, 0],
+}
+
+export function Yaskawa_AR900({ modelURL, ...props }: RobotModelProps) {
   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">
           <group name="AR900" rotation={[Math.PI / 2, 0, 0]}>

package/src/components/robots/Yaskawa_GP50.tsx

@@ -1,36 +1,19 @@
-import { useGLTF } from "@react-three/drei"
-import type * as THREE from "three"
-import type { RobotProps } from "./SupportedRobot"
-import RobotAnimator from "./RobotAnimator"
 import { animated } from "@react-spring/three"
+import { useGLTF } from "@react-three/drei"
+import type { RobotModelProps } from "./types"
 
-export function Yaskawa_GP50({
-  modelURL,
-  rapidlyChangingMotionState,
-  ...props
-}: RobotProps) {
+Yaskawa_GP50.config = {
+  rotationOffsets: [0, -Math.PI / 2, 0, 0, 0, 0],
+}
+
+export function Yaskawa_GP50({ modelURL, ...props }: RobotModelProps) {
   const gltf = useGLTF(modelURL) as any
 
   const nodes = gltf.nodes
   const materials = gltf.materials
-  const rotationOffsets = [0, -Math.PI / 2, 0, 0, 0, 0]
-  const rotationSign = [1, 1, 1, 1, 1, 1]
-
-  function setRotation(jointObjects: THREE.Object3D[], jointValues: number[]) {
-    jointObjects.forEach(
-      (object, index) =>
-        (object.rotation.y =
-          rotationSign[index]! * jointValues[index]! + rotationOffsets[index]!),
-    )
-  }
 
   return (
     <>
-      <RobotAnimator
-        rapidlyChangingMotionState={rapidlyChangingMotionState}
-        robotRootObjectName="Scene"
-        onRotationChanged={setRotation}
-      />
       <group {...props} dispose={null}>
         <group name="Scene">
           <group name="link_0">

package/src/components/robots/types.ts

@@ -0,0 +1,19 @@
+import type { GroupProps } from "@react-three/fiber"
+
+export type RobotModelProps = {
+  modelURL: string
+} & GroupProps
+
+/**
+ * Configuration needed to render a specific robot model that
+ * isn't already handled by the gltf => tsx export
+ */
+export type RobotModelConfig = {
+  rotationOffsets?: number[]
+  rotationSign?: number[]
+}
+
+export type RobotModelComponent = {
+  (props: RobotModelProps): JSX.Element
+  config?: RobotModelConfig
+}

package/src/i18n/config.ts

@@ -1,27 +1,23 @@
-import deJSON from "./locales/de/translations.json"
-import enJSON from "./locales/en/translations.json"
-import i18next from "i18next"
 import type { i18n } from "i18next"
+import i18next from "i18next"
 import LanguageDetector from "i18next-browser-languagedetector"
-import { initReactI18next } from "react-i18next"
+import deJSON from "./locales/de/translations.json"
+import enJSON from "./locales/en/translations.json"
 
 const i18n: i18n = i18next.createInstance()
 
-i18n
-  .use(LanguageDetector)
-  .use(initReactI18next)
-  .init({
-    supportedLngs: ["en", "de"],
-    resources: {
-      en: {
-        translations: enJSON,
-      },
-      de: {
-        translations: deJSON,
-      },
+i18n.use(LanguageDetector).init({
+  supportedLngs: ["en", "de"],
+  resources: {
+    en: {
+      translations: enJSON,
+    },
+    de: {
+      translations: deJSON,
     },
-    ns: ["translations"],
-    defaultNS: "translations",
-  })
+  },
+  ns: ["translations"],
+  defaultNS: "translations",
+})
 
 export default i18n

package/src/i18n/locales/de/translations.json

@@ -11,5 +11,6 @@
   "Jogging.Increment.Continuous.dd": "Fortlaufend",
   "Jogging.Cartesian.Orientation.lb": "Orientierung",
   "Jogging.Activate.bt": "Jogging activieren",
-  "Jogging.Activating.lb": "Jogging wird aktivieren"
+  "Jogging.Activating.lb": "Jogging wird aktivieren",
+  "Jogging.JointLimitsReached.lb": "Joint-Limit für Joint {{jointNumbers}} erreicht"
 }

package/src/i18n/locales/en/translations.json

@@ -11,5 +11,6 @@
   "Jogging.Increment.Continuous.dd": "Continuous",
   "Jogging.Cartesian.Orientation.lb": "Orientation",
   "Jogging.Activate.bt": "Activate jogging",
-  "Jogging.Activating.lb": "Activating jogging"
+  "Jogging.Activating.lb": "Activating jogging",
+  "Jogging.JointLimitsReached.lb": "Joint limit reached for joint {{jointNumbers}}"
 }