@wandelbots/wandelbots-js-react-components 2.27.0 → 2.27.1-pr.feature-add-program-control-component.367.9154db9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wandelbots/wandelbots-js-react-components",
-  "version": "2.27.0",
+  "version": "2.27.1-pr.feature-add-program-control-component.367.9154db9",
   "description": "React UI toolkit for building applications on top of the Wandelbots platform",
   "type": "module",
   "sideEffects": false,

package/src/components/ProgramControl.tsx

@@ -0,0 +1,212 @@
+import { Pause, PlayArrow, Stop } from "@mui/icons-material"
+import { Box, Button, Typography, useTheme } from "@mui/material"
+import { observer } from "mobx-react-lite"
+import { externalizeComponent } from "../externalizeComponent"
+
+export type ProgramState = "idle" | "running" | "paused" | "stopping"
+
+export interface ProgramControlProps {
+  /** The current state of the program control */
+  state: ProgramState
+  /** Callback fired when the run/resume button is clicked */
+  onRun: () => void
+  /** Callback fired when the pause button is clicked (only available in 'with_pause' variant) */
+  onPause?: () => void
+  /** Callback fired when the stop button is clicked */
+  onStop: () => void
+  /**
+   * Function to reset the component from 'stopping' state back to 'idle'.
+   * This must be called manually by the user when requiresManualReset is true.
+   */
+  onReset?: () => void
+  /**
+   * When true, the component will stay in 'stopping' state until onReset is called manually.
+   * When false (default), auto-resets to 'idle' after 2 seconds.
+   */
+  requiresManualReset?: boolean
+  /**
+   * Variant of the component:
+   * - 'with_pause': Shows run/pause/stop buttons (default)
+   * - 'without_pause': Shows only run/stop buttons
+   */
+  variant?: "with_pause" | "without_pause"
+  /** Additional CSS class name */
+  className?: string
+}
+
+interface ButtonConfig {
+  enabled: boolean
+  label: string
+  color: string
+  onClick: () => void
+}
+
+/**
+ * A control component for program execution with run, pause, and stop functionality.
+ *
+ * Features:
+ * - State machine with idle, running, paused, and stopping states
+ * - Two variants: with_pause (3 buttons) and without_pause (2 buttons)
+ * - Optional manual reset functionality
+ * - Responsive design with 110px circular buttons
+ * - Material-UI theming integration
+ */
+export const ProgramControl = externalizeComponent(
+  observer(
+    ({
+      state,
+      onRun,
+      onPause,
+      onStop,
+      onReset,
+      requiresManualReset = false,
+      variant = "with_pause",
+      className,
+    }: ProgramControlProps) => {
+      const theme = useTheme()
+
+      const getButtonConfigs = (): ButtonConfig[] => {
+        const baseConfigs: Record<string, ButtonConfig> = {
+          run: {
+            enabled: state === "idle" || state === "paused",
+            label: state === "paused" ? "Resume" : "Run",
+            color: theme.palette.success.main,
+            onClick: onRun,
+          },
+          pause: {
+            enabled: state === "running",
+            label: "Pause",
+            color: "#FFFFFF33",
+            onClick: onPause || (() => {}),
+          },
+          stop: {
+            enabled: state === "running" || state === "paused",
+            label: "Stop",
+            color: theme.palette.error.main,
+            onClick: onStop,
+          },
+        }
+
+        if (variant === "without_pause") {
+          return [baseConfigs.run, baseConfigs.stop]
+        }
+
+        return [baseConfigs.run, baseConfigs.pause, baseConfigs.stop]
+      }
+
+      const getButtonIcon = (index: number) => {
+        const iconProps = { sx: { fontSize: "55px" } }
+
+        if (variant === "without_pause") {
+          return index === 0 ? (
+            <PlayArrow {...iconProps} />
+          ) : (
+            <Stop {...iconProps} />
+          )
+        }
+
+        switch (index) {
+          case 0:
+            return <PlayArrow {...iconProps} />
+          case 1:
+            return <Pause {...iconProps} />
+          case 2:
+            return <Stop {...iconProps} />
+          default:
+            return null
+        }
+      }
+
+      const buttonConfigs = getButtonConfigs()
+
+      return (
+        <Box
+          className={className}
+          sx={{
+            display: "flex",
+            flexDirection: "column",
+            alignItems: "center",
+            gap: 2,
+          }}
+        >
+          <Box
+            sx={{
+              display: "flex",
+              gap: "40px",
+              flexWrap: "wrap",
+              justifyContent: "center",
+              alignItems: "center",
+            }}
+          >
+            {buttonConfigs.map((config, index) => (
+              <Box
+                key={config.label}
+                sx={{
+                  display: "flex",
+                  flexDirection: "column",
+                  alignItems: "center",
+                  gap: 1,
+                }}
+              >
+                <Button
+                  variant="contained"
+                  disabled={
+                    !config.enabled ||
+                    (state === "stopping" && !requiresManualReset)
+                  }
+                  onClick={config.onClick}
+                  sx={{
+                    width: "110px",
+                    height: "110px",
+                    borderRadius: "110px",
+                    backgroundColor: config.color,
+                    opacity:
+                      config.enabled &&
+                      !(state === "stopping" && !requiresManualReset)
+                        ? 1
+                        : 0.3,
+                    "&:hover": {
+                      backgroundColor: config.color,
+                      opacity:
+                        config.enabled &&
+                        !(state === "stopping" && !requiresManualReset)
+                          ? 0.8
+                          : 0.3,
+                    },
+                    "&:disabled": {
+                      backgroundColor: config.color,
+                      opacity: 0.3,
+                    },
+                    minWidth: "110px",
+                    flexShrink: 0,
+                  }}
+                >
+                  {getButtonIcon(index)}
+                </Button>
+
+                <Typography
+                  variant="body1"
+                  sx={{
+                    color:
+                      config.enabled &&
+                      !(state === "stopping" && !requiresManualReset)
+                        ? config.color
+                        : theme.palette.text.disabled,
+                    textAlign: "center",
+                    opacity:
+                      config.enabled &&
+                      !(state === "stopping" && !requiresManualReset)
+                        ? 1
+                        : 0.3,
+                  }}
+                >
+                  {config.label}
+                </Typography>
+              </Box>
+            ))}
+          </Box>
+        </Box>
+      )
+    },
+  ),
+)

package/src/components/safetyBar/OperationModeIndicator.tsx

@@ -19,7 +19,7 @@ export const OperationModeIndicator = observer(
     operationMode,
     anchorOrigin,
     transformOrigin,
-    compact
+    compact,
   }: OperationModeIndicatorProps) => {
     const { t } = useTranslation()
     const theme = useTheme()
@@ -33,7 +33,7 @@ export const OperationModeIndicator = observer(
             title={t("SafetyBar.OperationMode.ti")}
             name={t("SafetyBar.OperationMode.Automatic.ti")}
             label={compact ? null : t("SafetyBar.OperationMode.Automatic.ti")}
-            color={"rgba(255, 255, 255, 0.57)"}
+            color={theme.palette.text.secondary}
             explanation={
               <Trans i18nKey="SafetyBar.OperationMode.Auto.Explanation.lb">
                 The robot controller is in automatic operation mode. Automated

package/src/components/safetyBar/SafetyStateIndicator.tsx

@@ -35,16 +35,15 @@ export const SafetyStateIndicator = observer(
             id="safety-state-normal"
             title={t("SafetyBar.SafetyState.ti")}
             name={t("SafetyBar.SafetyState.Normal.lb")}
-            label={compact ? null :  t("SafetyBar.SafetyState.Normal.lb")}
+            label={compact ? null : t("SafetyBar.SafetyState.Normal.lb")}
             icon={SafetyStateNormalIcon}
-            color={"rgba(255, 255, 255, 0.57)"}
+            color={theme.palette.text.secondary}
             explanation={
               <Trans i18nKey="SafetyBar.SafetyState.Normal.Explanation.lb">
                 The robot controller is in a normal safety state. Movement is
                 not prevented by this state.
               </Trans>
             }
-
             anchorOrigin={anchorOrigin}
             transformOrigin={transformOrigin}
           />
@@ -114,7 +113,11 @@ export const SafetyStateIndicator = observer(
             color={theme.palette.warning.main}
             title={t("SafetyBar.SafetyState.ti")}
             name={t("SafetyBar.SafetyState.ManualActionRequired.lb")}
-            label={compact ? null : t("SafetyBar.SafetyState.ManualActionRequired.lb")}
+            label={
+              compact
+                ? null
+                : t("SafetyBar.SafetyState.ManualActionRequired.lb")
+            }
             explanation={
               <Trans i18nKey="SafetyBar.SafetyState.ManualActionRequired.Explanation.lb">
                 The robot controller has entered a safety state requiring manual

package/src/index.ts

@@ -9,6 +9,7 @@ export * from "./components/jogging/PoseCartesianValues"
 export * from "./components/jogging/PoseJointValues"
 export * from "./components/LoadingCover"
 export * from "./components/modal/NoMotionGroupModal"
+export * from "./components/ProgramControl"
 export * from "./components/robots/AxisConfig"
 export * from "./components/robots/Robot"
 export { defaultGetModel } from "./components/robots/robotModelLogic"