@wandelbots/wandelbots-js-react-components/dist/components/RobotCard.d.ts

React UI toolkit for building applications on top of the Wandelbots platform

import type { ConnectedMotionGroup, RobotControllerStateOperationModeEnum, RobotControllerStateSafetyStateEnum } from "@wandelbots/nova-js/v1";
import type { Group } from "three";
import type { ProgramState } from "./ProgramControl";
export interface RobotCardProps {
    /** Name of the robot displayed at the top */
    robotName: string;
    /** Current program state */
    programState: ProgramState;
    /** Current safety state of the robot controller */
    safetyState: RobotControllerStateSafetyStateEnum;
    /** Current operation mode of the robot controller */
    operationMode: RobotControllerStateOperationModeEnum;
    /** Whether the "Drive to Home" button should be enabled */
    driveToHomeEnabled?: boolean;
    /** Callback fired when "Drive to Home" button is pressed */
    onDriveToHomePress?: () => void;
    /** Callback fired when "Drive to Home" button is released */
    onDriveToHomeRelease?: () => void;
    /**
     * Callback fired when "Drive to Home" button is pressed, with the default home position.
     * If provided, this will be called instead of onDriveToHomePress, providing the recommended
     * home position joint configuration based on the robot manufacturer.
     */
    onDriveToHomePressWithConfig?: (homePosition: number[]) => void;
    /**
     * Callback fired when "Drive to Home" button is released after using onDriveToHomePressWithConfig.
     * If provided, this will be called instead of onDriveToHomeRelease.
     */
    onDriveToHomeReleaseWithConfig?: () => void;
    /**
     * Custom default joint configuration to use if manufacturer-based defaults are not available.
     * Joint values should be in radians.
     */
    defaultJointConfig?: number[];
    /** Connected motion group for the robot */
    connectedMotionGroup: ConnectedMotionGroup;
    /** Custom robot component to render (optional, defaults to Robot) */
    robotComponent?: React.ComponentType<{
        connectedMotionGroup: ConnectedMotionGroup;
        flangeRef?: React.Ref<Group>;
        postModelRender?: () => void;
        transparentColor?: string;
        getModel?: (modelFromController: string) => string;
    }>;
    /** Custom component to render in the content area (optional) */
    customContentComponent?: React.ComponentType<Record<string, unknown>>;
    /** Additional CSS class name */
    className?: string;
}
/**
 * A responsive card component that displays a 3D robot with states and controls.
 * The card automatically adapts to its container's size and aspect ratio.
 *
 * Features:
 * - Fully responsive Material-UI Card that adapts to container dimensions
 * - Automatic layout switching based on aspect ratio:
 *   - Portrait mode: Vertical layout with robot in center
 *   - Landscape mode: Horizontal layout with robot on left, content on right (left-aligned)
 * - Responsive 3D robot rendering:
 *   - Scales dynamically with container size
 *   - Hides at very small sizes to preserve usability
 *   - Adaptive margin based on available space
 * - Smart spacing and padding that reduces at smaller sizes
 * - Minimum size constraints for usability while maximizing content density
 * - Robot name displayed in Typography h6 at top-left
 * - Program state indicator below the name
 * - Auto-fitting 3D robot model that scales with container size
 * - Customizable content area for displaying custom React components
 * - Transparent gray divider line
 * - "Drive to Home" button with press-and-hold functionality
 * - Localization support via react-i18next
 * - Material-UI theming integration
 *
 * Usage with custom content:
 * ```tsx
 * // Example custom timer component
 * const CustomTimer = () => (
 *   <Box>
 *     <Typography variant="body1" sx={{ color: "text.secondary" }}>
 *       Runtime
 *     </Typography>
 *     <Typography variant="h6">05:23</Typography>
 *   </Box>
 * )
 *
 * <RobotCard
 *   robotName="UR5e Robot"
 *   programState={ProgramState.RUNNING}
 *   customContentComponent={CustomTimer}
 *   // ... other props
 * />
 * ```
 */
export declare const RobotCard: (({ robotName, programState, safetyState, operationMode, driveToHomeEnabled, onDriveToHomePress, onDriveToHomeRelease, connectedMotionGroup, robotComponent: RobotComponent, customContentComponent: CustomContentComponent, className, }: RobotCardProps) => import("react/jsx-runtime").JSX.Element) & {
    displayName: string;
};
//# sourceMappingURL=RobotCard.d.ts.map