@wandelbots/wandelbots-js-react-components 2.36.0 → 2.37.0-pr.feature-states-for-cycle-timer.379.4ca80c1

package/src/components/ProgramControl.tsx

@@ -173,9 +173,9 @@ export const ProgramControl = externalizeComponent(
                   }
                   onClick={config.onClick}
                   sx={{
-                    width: "110px",
-                    height: "110px",
-                    borderRadius: "110px",
+                    width: "88px",
+                    height: "88px",
+                    borderRadius: "88px",
                     backgroundColor: config.color,
                     opacity:
                       config.enabled &&
@@ -197,7 +197,7 @@ export const ProgramControl = externalizeComponent(
                       backgroundColor: config.color,
                       opacity: 0.3,
                     },
-                    minWidth: "110px",
+                    minWidth: "88px",
                     flexShrink: 0,
                   }}
                 >

package/src/components/TabBar.tsx

@@ -74,14 +74,13 @@ export const TabBar = externalizeComponent(
         sx={{ height: "100%", display: "flex", flexDirection: "column", ...sx }}
       >
         {/* Tabs */}
-        <Box sx={{ px: 3, pt: 3, pb: 3 }}>
+        <Box sx={{ px: 0, py: 0 }}>
           <Tabs
             value={activeTab}
             onChange={handleTabChange}
             sx={{
-              minHeight: "auto",
+              minHeight: "32px",
               backgroundColor: "transparent",
-              mt: 3,
               "& .MuiTabs-indicator": {
                 display: "none", // Hide the default indicator
               },
@@ -98,16 +97,15 @@ export const TabBar = externalizeComponent(
                 iconPosition="start"
                 disableRipple
                 sx={{
-                  minHeight: "auto",
-                  minWidth: "auto",
-                  padding: "4px 8px",
-                  borderRadius: "10px",
+                  minHeight: "32px",
+                  height: "32px",
+                  padding: "0px 10px",
+                  borderRadius: "12px",
                   backgroundColor: (theme) =>
                     theme.palette.backgroundPaperElevation?.[11] || "#32344B",
                   color: "text.primary",
                   opacity: activeTab === index ? 1 : 0.38,
-                  textTransform: "none",
-                  fontWeight: 500,
+                  fontSize: "13px",
                   transition: "all 0.2s ease-in-out",
                   "&:hover": {
                     opacity: activeTab === index ? 1 : 0.6,
@@ -131,7 +129,7 @@ export const TabBar = externalizeComponent(
         </Box>
 
         {/* Border line */}
-        <Box sx={{ mx: 3, borderBottom: 1, borderColor: "divider" }} />
+        <Box sx={{ mt: "32px", borderBottom: 1, borderColor: "divider" }} />
 
         {/* Tab Content */}
         <Box sx={{ flex: 1, overflow: "auto" }}>

package/src/components/jogging/PoseCartesianValues.tsx

@@ -1,21 +1,64 @@
-import { Stack } from "@mui/material"
+import { Button, Stack, Typography } from "@mui/material"
 import { poseToWandelscriptString } from "@wandelbots/nova-js"
-import type { MotionStreamConnection } from "@wandelbots/nova-js/v1"
+import type {
+  ConnectedMotionGroup,
+  MotionStreamConnection,
+} from "@wandelbots/nova-js/v1"
 import { observer } from "mobx-react-lite"
-import { useRef } from "react"
+import { useRef, useState } from "react"
 import { CopyableText } from "../CopyableText"
 import { useAnimationFrame } from "../utils/hooks"
 
+export type PoseCartesianValuesProps = {
+  /** Either a MotionStreamConnection or ConnectedMotionGroup */
+  motionStream?: MotionStreamConnection
+  connectedMotionGroup?: ConnectedMotionGroup
+  showCopyButton?: boolean
+}
+
 export const PoseCartesianValues = observer(
-  ({ motionStream }: { motionStream: MotionStreamConnection }) => {
+  ({
+    motionStream,
+    connectedMotionGroup,
+    showCopyButton = false,
+  }: PoseCartesianValuesProps) => {
     const poseHolderRef = useRef<HTMLDivElement>(null)
+    const [copyMessage, setCopyMessage] = useState("")
+
+    // Use the provided motionStream or create a mock-like object from connectedMotionGroup
+    const activeMotionStream =
+      motionStream ||
+      (connectedMotionGroup
+        ? ({
+            rapidlyChangingMotionState:
+              connectedMotionGroup.rapidlyChangingMotionState,
+          } as MotionStreamConnection)
+        : undefined)
+
+    if (!activeMotionStream) {
+      throw new Error(
+        "PoseCartesianValues requires either motionStream or connectedMotionGroup prop",
+      )
+    }
 
     function getCurrentPoseString() {
-      const tcpPose = motionStream.rapidlyChangingMotionState.tcp_pose
+      if (!activeMotionStream) return ""
+      const tcpPose = activeMotionStream.rapidlyChangingMotionState.tcp_pose
       if (!tcpPose) return ""
       return poseToWandelscriptString(tcpPose)
     }
 
+    const handleCopy = async () => {
+      try {
+        await navigator.clipboard.writeText(getCurrentPoseString())
+        setCopyMessage("Copied!")
+        setTimeout(() => setCopyMessage(""), 2000)
+      } catch {
+        setCopyMessage("Copy failed")
+        setTimeout(() => setCopyMessage(""), 2000)
+      }
+    }
+
     useAnimationFrame(() => {
       if (!poseHolderRef.current) {
         return
@@ -30,11 +73,28 @@ export const PoseCartesianValues = observer(
 
     return (
       <Stack
-        alignItems="left"
-        spacing={2}
+        direction="row"
+        alignItems="center"
+        spacing={1}
         sx={{ flexGrow: 1, minWidth: 0, overflow: "hidden" }}
       >
         <CopyableText value={getCurrentPoseString()} ref={poseHolderRef} />
+        {showCopyButton && (
+          <Button
+            variant="contained"
+            color="secondary"
+            size="small"
+            onClick={handleCopy}
+            sx={{ flexShrink: 0 }}
+          >
+            Copy
+          </Button>
+        )}
+        {copyMessage && (
+          <Typography variant="caption" color="success.main">
+            {copyMessage}
+          </Typography>
+        )}
       </Stack>
     )
   },

package/src/components/jogging/PoseJointValues.tsx

@@ -1,18 +1,61 @@
-import { Stack } from "@mui/material"
-import type { MotionStreamConnection } from "@wandelbots/nova-js/v1"
+import { Button, Stack, Typography } from "@mui/material"
+import type {
+  ConnectedMotionGroup,
+  MotionStreamConnection,
+} from "@wandelbots/nova-js/v1"
 import { observer } from "mobx-react-lite"
-import { useRef } from "react"
+import { useRef, useState } from "react"
 import { CopyableText } from "../CopyableText"
 import { useAnimationFrame } from "../utils/hooks"
 
+export type PoseJointValuesProps = {
+  /** Either a MotionStreamConnection or ConnectedMotionGroup */
+  motionStream?: MotionStreamConnection
+  connectedMotionGroup?: ConnectedMotionGroup
+  showCopyButton?: boolean
+}
+
 export const PoseJointValues = observer(
-  ({ motionStream }: { motionStream: MotionStreamConnection }) => {
+  ({
+    motionStream,
+    connectedMotionGroup,
+    showCopyButton = false,
+  }: PoseJointValuesProps) => {
     const poseHolderRef = useRef<HTMLDivElement>(null)
+    const [copyMessage, setCopyMessage] = useState("")
+
+    // Use the provided motionStream or create a mock-like object from connectedMotionGroup
+    const activeMotionStream =
+      motionStream ||
+      (connectedMotionGroup
+        ? ({
+            rapidlyChangingMotionState:
+              connectedMotionGroup.rapidlyChangingMotionState,
+          } as MotionStreamConnection)
+        : undefined)
+
+    if (!activeMotionStream) {
+      throw new Error(
+        "PoseJointValues requires either motionStream or connectedMotionGroup prop",
+      )
+    }
 
     function getCurrentPoseString() {
+      if (!activeMotionStream) return ""
       const { joints } =
-        motionStream.rapidlyChangingMotionState.state.joint_position
-      return `[${joints.map((j) => parseFloat(j.toFixed(4))).join(", ")}]`
+        activeMotionStream.rapidlyChangingMotionState.state.joint_position
+      return `[${joints.map((j: number) => parseFloat(j.toFixed(4))).join(", ")}]`
+    }
+
+    const handleCopy = async () => {
+      try {
+        await navigator.clipboard.writeText(getCurrentPoseString())
+        setCopyMessage("Copied!")
+        setTimeout(() => setCopyMessage(""), 2000)
+      } catch {
+        setCopyMessage("Copy failed")
+        setTimeout(() => setCopyMessage(""), 2000)
+      }
     }
 
     useAnimationFrame(() => {
@@ -29,11 +72,28 @@ export const PoseJointValues = observer(
 
     return (
       <Stack
-        alignItems="left"
-        spacing={2}
+        direction="row"
+        alignItems="center"
+        spacing={1}
         sx={{ flexGrow: 1, minWidth: 0, overflow: "hidden" }}
       >
         <CopyableText value={getCurrentPoseString()} ref={poseHolderRef} />
+        {showCopyButton && (
+          <Button
+            variant="contained"
+            color="secondary"
+            size="small"
+            onClick={handleCopy}
+            sx={{ flexShrink: 0 }}
+          >
+            Copy
+          </Button>
+        )}
+        {copyMessage && (
+          <Typography variant="caption" color="success.main">
+            {copyMessage}
+          </Typography>
+        )}
       </Stack>
     )
   },

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

@@ -48,6 +48,10 @@
   "CycleTimer.OfTime.lb": "von {{time}} min.",
   "CycleTimer.Time.lb": "{{time}} min.",
   "CycleTimer.Error.lb": "Fehler",
+  "CycleTimer.WaitingForCycle.lb": "Warten auf Programmzyklus",
+  "CycleTimer.CycleTime.lb": "Zykluszeit",
+  "CycleTimer.Measuring.lb": "wird gemessen...",
+  "CycleTimer.Determined.lb": "bestimmt",
   "ProgramControl.Start.bt": "Start",
   "ProgramControl.Resume.bt": "Weiter",
   "ProgramControl.Retry.bt": "Wiederholen",

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

@@ -49,6 +49,10 @@
   "CycleTimer.OfTime.lb": "of {{time}} min.",
   "CycleTimer.Time.lb": "{{time}} min.",
   "CycleTimer.Error.lb": "Error",
+  "CycleTimer.WaitingForCycle.lb": "Waiting for program cycle",
+  "CycleTimer.CycleTime.lb": "Cycle Time",
+  "CycleTimer.Measuring.lb": "measuring...",
+  "CycleTimer.Determined.lb": "determined",
   "ProgramControl.Start.bt": "Start",
   "ProgramControl.Resume.bt": "Resume",
   "ProgramControl.Retry.bt": "Retry",