@wandelbots/wandelbots-js-react-components 4.2.0 → 4.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wandelbots/wandelbots-js-react-components",
-  "version": "4.2.0",
+  "version": "4.3.0",
   "description": "React UI toolkit for building applications on top of the Wandelbots platform",
   "type": "module",
   "sideEffects": false,
@@ -93,7 +93,7 @@
     "@types/react": "^19.1.8",
     "@types/three": "^0.182.0",
     "@vitejs/plugin-react": "^4.3.4",
-    "@wandelbots/nova-js": "^3.5.2",
+    "@wandelbots/nova-js": "^3.5.3",
     "add": "^2.0.6",
     "eslint-plugin-storybook": "^10.1.10",
     "glob": "^13.0.0",

package/src/components/jogging/JoggingJointTab.tsx

@@ -1,10 +1,9 @@
 import { Divider, Stack, Typography, useTheme } from "@mui/material"
-import { radiansToDegrees } from "@wandelbots/nova-js"
 import { observer } from "mobx-react-lite"
 import type { ReactNode } from "react"
 import { JoggingJointLimitDetector } from "./JoggingJointLimitDetector"
-import { JoggingJointRotationControl } from "./JoggingJointRotationControl"
-import type { JoggingStore } from "./JoggingStore"
+import { JoggingJointValueControl } from "./JoggingJointValueControl"
+import { type JoggingStore, JointCategory } from "./JoggingStore"
 import { JoggingVelocitySlider } from "./JoggingVelocitySlider"
 
 export const JoggingJointTab = observer(
@@ -12,14 +11,22 @@ export const JoggingJointTab = observer(
     const theme = useTheme()
     async function startJointJogging(opts: {
       joint: number
-      direction: "-" | "+"
+      direction: "-" | "+",
     }) {
       await store.activate()
 
       await store.jogger.rotateJoints({
         joint: opts.joint,
         direction: opts.direction,
-        velocityRadsPerSec: store.rotationVelocityRadsPerSec,
+        velocityUnit:
+          store.jointCategory === JointCategory.PRISMATIC
+            ? "mm/s"
+            : "rad/s",
+        velocityValue:
+          store.jointCategory === JointCategory.PRISMATIC
+            ? store.translationVelocityMmPerSec
+            : store.rotationVelocityRadsPerSec,
+
       })
     }
 
@@ -43,14 +50,6 @@ export const JoggingJointTab = observer(
               const jointLimits =
                 store.motionGroupDescription.operation_limits.auto_limits
                   ?.joints?.[joint.index]?.position
-              const lowerLimitDegs =
-                jointLimits?.lower_limit !== undefined
-                  ? radiansToDegrees(jointLimits.lower_limit)
-                  : undefined
-              const upperLimitDegs =
-                jointLimits?.upper_limit !== undefined
-                  ? radiansToDegrees(jointLimits.upper_limit)
-                  : undefined
 
               return (
                 <Stack
@@ -73,16 +72,17 @@ export const JoggingJointTab = observer(
                     </Typography>
                   )}
 
-                  <JoggingJointRotationControl
+                  <JoggingJointValueControl
                     disabled={store.isLocked}
-                    lowerLimitDegs={lowerLimitDegs}
-                    upperLimitDegs={upperLimitDegs}
-                    getValueDegs={() => {
+                    lowerLimit={jointLimits?.lower_limit}
+                    upperLimit={jointLimits?.upper_limit}
+                    useDegree={store.currentMotionType === "rotate"}
+                    getValue={() => {
                       const value =
                         store.jogger.motionStream.rapidlyChangingMotionState
                           .joint_position[joint.index]
                       return value !== undefined
-                        ? radiansToDegrees(value)
+                        ? value
                         : undefined
                     }}
                     startJogging={(direction: "-" | "+") =>

package/src/components/jogging/{JoggingJointRotationControl.tsx → JoggingJointValueControl.tsx}

@@ -1,5 +1,6 @@
 import ChevronLeft from "@mui/icons-material/ChevronLeft"
 import ChevronRight from "@mui/icons-material/ChevronRight"
+import { radiansToDegrees } from "@wandelbots/nova-js"
 import { IconButton, Slider, Typography, useTheme } from "@mui/material"
 import Stack from "@mui/material/Stack"
 import throttle from "lodash-es/throttle"
@@ -9,28 +10,29 @@ import { useTranslation } from "react-i18next"
 import { externalizeComponent } from "../../externalizeComponent"
 import { useAnimationFrame } from "../utils/hooks"
 
-type JoggingJointRotationControlProps = {
+type JoggingJointValueControlProps = {
   startJogging: (direction: "-" | "+") => void
   stopJogging: () => void
-  lowerLimitDegs?: number
-  upperLimitDegs?: number
-  getValueDegs: () => number | undefined
-
+  lowerLimit?: number
+  upperLimit?: number
+  useDegree: boolean
+  getValue: () => number | undefined
   disabled?: boolean
 } & React.ComponentProps<typeof Stack>
 
 /** A input widget to control an individual joint */
-export const JoggingJointRotationControl = externalizeComponent(
+export const JoggingJointValueControl = externalizeComponent(
   observer(
     ({
-      startJogging,
-      stopJogging,
-      lowerLimitDegs,
-      upperLimitDegs,
-      getValueDegs,
-      disabled,
-      ...rest
-    }: JoggingJointRotationControlProps) => {
+       startJogging,
+       stopJogging,
+       lowerLimit,
+       upperLimit,
+       useDegree,
+       getValue,
+       disabled,
+       ...rest
+     }: JoggingJointValueControlProps) => {
       const { t } = useTranslation()
       const [currentValue, setCurrentValue] = useState<number | undefined>()
       const theme = useTheme()
@@ -55,11 +57,18 @@ export const JoggingJointRotationControl = externalizeComponent(
       }))
 
       const updateValue = throttle(() => {
-        setCurrentValue(getValueDegs())
+        setCurrentValue(useDegree ? convertToDegree(getValue()) : getValue())
       }, 50)
 
       useAnimationFrame(updateValue)
 
+      function convertToDegree(value: number| undefined){
+        if (value == undefined){
+          return undefined;
+        }
+        return radiansToDegrees(value);
+      }
+
       function onPointerDownMinus(ev: React.PointerEvent) {
         // Stop right click from triggering jog
         if (ev.button === 0) state.startJogging("-")
@@ -90,6 +99,20 @@ export const JoggingJointRotationControl = externalizeComponent(
           return output
         }
       }
+      function formatMm(value: number | undefined, precision = 1) {
+        if (value === undefined || isNaN(value)) return ""
+
+        const output = t("General.mm.variable", {
+          amount: value.toFixed(precision),
+        })
+
+        if (value > 0 && precision === 0) {
+          return `+${output}`
+        } else {
+          return output
+        }
+      }
+
 
       return (
         <Stack
@@ -138,8 +161,8 @@ export const JoggingJointRotationControl = externalizeComponent(
               sx={{
                 pointerEvents: "none",
                 color:
-                  theme.componentsExt?.JoggingPanel?.JoggingJoint?.Joint
-                    ?.arrowColor,
+                theme.componentsExt?.JoggingPanel?.JoggingJoint?.Joint
+                  ?.arrowColor,
               }}
             />
           </IconButton>
@@ -171,14 +194,14 @@ export const JoggingJointRotationControl = externalizeComponent(
                   : theme.palette.text.primary,
               }}
             >
-              {formatDegrees(currentValue)}
+              {useDegree ? formatDegrees(currentValue) : formatMm(currentValue)}
             </Typography>
 
             <Slider
               disabled
               aria-label="Joint position"
-              min={lowerLimitDegs}
-              max={upperLimitDegs}
+              min={ useDegree ? convertToDegree(lowerLimit) : lowerLimit}
+              max={ useDegree ? convertToDegree(upperLimit) : upperLimit}
               value={currentValue || 0}
               track={false}
               sx={{
@@ -206,15 +229,15 @@ export const JoggingJointRotationControl = externalizeComponent(
                 },
               }}
               marks={
-                lowerLimitDegs !== undefined &&
-                upperLimitDegs !== undefined && [
+                lowerLimit !== undefined &&
+                upperLimit !== undefined && [
                   {
-                    value: lowerLimitDegs,
-                    label: formatDegrees(lowerLimitDegs, 0),
+                    value: (useDegree ? convertToDegree(lowerLimit) : lowerLimit) as number,
+                    label: useDegree ? formatDegrees(convertToDegree(lowerLimit),0) : formatMm(lowerLimit),
                   },
                   {
-                    value: upperLimitDegs,
-                    label: formatDegrees(upperLimitDegs, 0),
+                    value: (useDegree ? convertToDegree(upperLimit) : upperLimit) as number,
+                    label: useDegree ?  formatDegrees(convertToDegree(upperLimit),0) : formatMm(upperLimit),
                   },
                 ]
               }
@@ -236,8 +259,8 @@ export const JoggingJointRotationControl = externalizeComponent(
               sx={{
                 pointerEvents: "none",
                 color:
-                  theme.componentsExt?.JoggingPanel?.JoggingJoint?.Joint
-                    ?.arrowColor,
+                theme.componentsExt?.JoggingPanel?.JoggingJoint?.Joint
+                  ?.arrowColor,
               }}
             />
           </IconButton>

package/src/components/jogging/JoggingPanel.tsx

@@ -153,7 +153,7 @@ const JoggingPanelInner = observer(
         >
           {store.tabs.map((tab) => {
             const label =
-              tab.label === "cartesian"
+              tab.label === "Cartesian"
                 ? t("Jogging.Cartesian.bt")
                 : t("Jogging.Joints.bt")
 

package/src/components/jogging/JoggingStore.ts

@@ -40,8 +40,16 @@ export type IncrementJogInProgress = {
   axis: JoggingAxis
 }
 
+export enum JointCategory {
+  REVOLUTE = "REVOLUTE",
+  PRISMATIC = "PRISMATIC",
+}
+
+type TabType = "cartesian" | "joint" | "debug";
+
+
 export class JoggingStore {
-  selectedTabId: "cartesian" | "joint" | "debug" = "cartesian"
+  selectedTabId: TabType = "cartesian";
 
   /**
    * State of the jogging panel. Starts as "inactive"
@@ -298,18 +306,20 @@ export class JoggingStore {
   }
 
   get tabs() {
-    return [
-      {
+    const tempTabs : {id: TabType, label: string}[] = [{
+      id: "joint",
+      label: "Joints",
+    }] ;
+    if(this.isTcpCartesianMoveable){
+      tempTabs.unshift({
         id: "cartesian",
-        label: "cartesian",
-      },
-      {
-        id: "joint",
-        label: "joint",
-      },
-    ] as const
+        label: "Cartesian",
+      })}
+
+    return tempTabs;
   }
 
+
   get incrementOptions() {
     return incrementOptions
   }
@@ -395,8 +405,10 @@ export class JoggingStore {
    */
   get currentMotionType() {
     if (
-      this.selectedTabId === "cartesian" &&
-      this.selectedCartesianMotionType === "translate"
+      (
+        this.selectedTabId === "cartesian" &&
+        this.selectedCartesianMotionType === "translate"
+      ) || this.jointCategory === JointCategory.PRISMATIC
     ) {
       return "translate"
     } else {
@@ -404,6 +416,24 @@ export class JoggingStore {
     }
   }
 
+
+  /*
+  * ToDo replace Hardcoded Models with an api request that delivers the type (will become part of DH-Parameters)
+  *  Ticket already created
+  * */
+  get jointCategory(): JointCategory {
+    return this.motionGroupDescription.motion_group_model === "ABB_IRT710"
+      ? JointCategory.PRISMATIC
+      : JointCategory.REVOLUTE
+  }
+
+  get isTcpCartesianMoveable(): boolean{
+    if(this.motionGroupDescription.motion_group_model === "ABB_IRT710"){
+      return false;
+    }
+    return true;
+  }
+
   onTabChange(_event: React.SyntheticEvent, newValue: number) {
     const tab = this.tabs[newValue] || this.tabs[0]!
     this.selectedTabId = tab.id

package/src/components/robots/MotionGroupVisualizer.tsx

@@ -83,10 +83,10 @@ export const MotionGroupVisualizer: React.FC<MotionGroupVisualizerProps> = exter
     return [
       "KUKA_DKP250",
       "KUKA_DKP500_2",
-      "YASKAWA_TURN1",
-      "YASKAWA_TURN2",
-      "YASKAWA_TURN3",
-    ].includes(modelFromController)
+      "Yaskawa_TURN1",
+      "Yaskawa_TURN2",
+      "Yaskawa_TURN3",
+    ].some(model => model.toLowerCase() === modelFromController.toLowerCase())
   }, [modelFromController])
 
   if (inverseSolver || isTurnTable) {

package/src/core.ts

@@ -3,7 +3,7 @@ export * from "./components/AppHeader"
 export * from "./components/CycleTimer"
 export * from "./components/DataGrid"
 export * from "./components/jogging/JoggingCartesianAxisControl"
-export * from "./components/jogging/JoggingJointRotationControl"
+export * from "./components/jogging/JoggingJointValueControl"
 export * from "./components/jogging/JoggingPanel"
 export { JoggingStore } from "./components/jogging/JoggingStore"
 export * from "./components/jogging/PoseCartesianValues"
@@ -31,3 +31,4 @@ export * from "./lib/motionStateUpdate"
 export * from "./lib/MotionStreamConnection"
 export * from "./themes/themeTypes"
 export { createNovaMuiTheme } from "./themes/theming"
+

package/src/lib/JoggerConnection.test.ts

@@ -77,7 +77,8 @@ test("jog a robot somewhat", async () => {
   await jogger.rotateJoints({
     joint: 0,
     direction: "+",
-    velocityRadsPerSec: 0.1,
+    velocityValue: 0.1,
+    velocityUnit: "rad/s",
   })
 
   await delay(500)
@@ -94,7 +95,8 @@ test("jog a robot somewhat", async () => {
   await jogger.rotateJoints({
     joint: 0,
     direction: "-",
-    velocityRadsPerSec: 0.1,
+    velocityValue: 0.1,
+    velocityUnit: "rad/s",
   })
   await delay(500)
   await jogger.stop()

package/src/lib/JoggerConnection.ts

@@ -282,14 +282,18 @@ export class JoggerConnection {
   async rotateJoints({
     joint,
     direction,
-    velocityRadsPerSec,
+    velocityValue,
+    velocityUnit
+
   }: {
     /** Index of the joint to rotate */
     joint: number
     /** Direction of rotation ("+" or "-") */
     direction: "+" | "-"
-    /** Speed of the rotation in radians per second */
-    velocityRadsPerSec: number
+    /** Speed of the rotation, unit is currently unused, but i wanted it there to raise awareness that not everything here is rad/s*/
+    velocityValue: number
+    velocityUnit: "mm/s" | "rad/s"
+
   }) {
     if (!this.joggingSocket || this.mode !== "jogging") {
       throw new Error(
@@ -300,7 +304,7 @@ export class JoggerConnection {
     const velocity = new Array(this.numJoints).fill(0)
 
     velocity[joint] =
-      direction === "-" ? -velocityRadsPerSec : velocityRadsPerSec
+      direction === "-" ? - velocityValue : velocityValue
 
     this.joggingSocket.sendJson({
       message_type: "JointVelocityRequest",

package/dist/components/jogging/JoggingJointRotationControl.d.ts

@@ -1,15 +0,0 @@
-import Stack from "@mui/material/Stack";
-type JoggingJointRotationControlProps = {
-    startJogging: (direction: "-" | "+") => void;
-    stopJogging: () => void;
-    lowerLimitDegs?: number;
-    upperLimitDegs?: number;
-    getValueDegs: () => number | undefined;
-    disabled?: boolean;
-} & React.ComponentProps<typeof Stack>;
-/** A input widget to control an individual joint */
-export declare const JoggingJointRotationControl: (({ startJogging, stopJogging, lowerLimitDegs, upperLimitDegs, getValueDegs, disabled, ...rest }: JoggingJointRotationControlProps) => import("react/jsx-runtime").JSX.Element) & {
-    displayName: string;
-};
-export {};
-//# sourceMappingURL=JoggingJointRotationControl.d.ts.map

package/dist/components/jogging/JoggingJointRotationControl.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"JoggingJointRotationControl.d.ts","sourceRoot":"","sources":["../../../src/components/jogging/JoggingJointRotationControl.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,qBAAqB,CAAA;AAQvC,KAAK,gCAAgC,GAAG;IACtC,YAAY,EAAE,CAAC,SAAS,EAAE,GAAG,GAAG,GAAG,KAAK,IAAI,CAAA;IAC5C,WAAW,EAAE,MAAM,IAAI,CAAA;IACvB,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,YAAY,EAAE,MAAM,MAAM,GAAG,SAAS,CAAA;IAEtC,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,KAAK,CAAC,CAAA;AAEtC,oDAAoD;AACpD,eAAO,MAAM,2BAA2B,oGAUjC,gCAAgC;;CAuNtC,CAAA"}