@wandelbots/wandelbots-js-react-components

A growing collection of ready-made React UI components based on MaterialUI and React Three Fiber for use with the Wandelbots platform.

npm install @wandelbots/wandelbots-js-react-components

Basic usage:

Import your desired components or functions from the package:

import { JoggingPanel, ... } from '@wandelbots/wandelbots-js-react-components'

See the Storybook for implementation details of each component.

Index

UI JoggingPanel WandelscriptEditor Theming 3D Viewport Robot Lightning Safety Zones

UI

JoggingPanel

The JoggingPanel is a high-level user interface for manually moving a robot using the Wandelbots stack. It needs only a NovaClient instance from wandelbots-js and the id of a motion group to connect to.

type JoggingPanelProps = {
  /** Connection to a Nova instance to use for jogging */
  nova: NovaClient
  /** Id of the motion group to move e.g. 0@ur5e **/
  motionGroupId: string
  /** Callback with the jogging panel's state store for further customization/config */
  onSetup: (store: JoggingStore) => void
  /** Any children will go at the bottom of the panel under the default components */
  children?: React.ReactNode
}

WandelscriptEditor

The WandelscriptEditor provides an interface for editing snippets of Wandelscript code with the appropriate syntax highlighting. It uses the Monaco editor under the hood.

type WandelscriptEditorProps = {
  /** The current Wandelscript content of the code editor (controlled component) */
  code?: string
  /** What to do when the user edits the code */
  onChange?: (
    code: string | undefined,
    ev: editor.IModelContentChangedEvent,
  ) => void
  /** Callback to further configure monaco on startup if needed */
  monacoSetup?: (monaco: Monaco) => void
}

Theming

The UI components presented in this library will respect the Material UI theme of the application they are rendered within, allowing customization with the MUI theming system.

Using the Wandelbots MUI theme To make the components look exactly like they do in the storybook, pass the Wandelbots MUI theme to ThemeProvider.

import { ThemeProvider } from "@mui/material";
import { createNovaMuiTheme, JoggingPanel } from "@wandelbots/wandelbots-js-react-components"

const theme = createNovaMuiTheme()

<ThemeProvider theme={theme}>
  <JoggingPanel ... />
</ThemeProvider>

Viewport

Robot

This Robot component adds the robot to the 3D viewport. Use it together with the connectedMotionGroup from @wandelbots/wandelbots-js.

<Robot connectedMotionGroup={connectedMotionGroup} />

The robot model are loaded from the jsdelivr CDN.

In case you want to use the application offline, you can download the models and host them locally. You can override the URL resolver of the Robot component by passing a getModel function like:

<Robot
  getModel={() => `public/${connectedMotionGroup.modelFromController}.glb`}
  connectedMotionGroup={connectedMotionGroup}
/>

export type ConnectecMotionGroupRobotProps = {
  connectedMotionGroup: ConnectedMotionGroup // The connected motion group from wandelbots-js
  getModel?: (modelFromController: string) => string // A function that returns the URL of the robot model
  transparentColor?: string // Whether the robot should be displayed transparently
} & GroupProps

SupportedRobot

The SupportedRobot can be used to display a robot model without the need for a connectedMotionGroup from @wandelbots/wandelbots-js.

<SupportedRobot
  rapidlyChangingMotionState={rapidlyChangingMotionState}
  dhParameters={dhParameters as any}
  modelFromController={modelFromController || ""}
  getModel={() => `./robot-pad/models/${modelFromController}.glb`}
/>

export type SupportedRobotProps = {
  rapidlyChangingMotionState: MotionGroupStateResponse // The motion state of the robot
  modelFromController: string // The model name of the robot
  dhParameters: DHParameter[] // The DH parameters of the robot
  getModel?: (modelFromController: string) => string // A function that returns the URL of the robot model
  transparentColor?: string // Whether the robot should be displayed transparently
} & GroupProps

Lighting

The PresetEnvironment component adds a default lighting setup to the 3D viewport.

<PresetEnvironment>

Safety

The SafetyZonesRenderer component visualizes the safety zones of the controller.

<SafetyZonesRenderer safetyZones={connectedMotionGroup.safetyZones || []} />

Contributing

To set up wandelbots-js-react-components for development, first clone the repo and run:

npm install

Then you can run the storybook to develop the components:

npm run dev

Local Testing

To test the package locally, you can run:

npm run build
npm pack

this will generate a .tgz file in the root of the project. You can then install this package in another project with:

npm install /path/to/wandelbots-wandelbots-js-react-components-0.0.1.tgz

npm link leads to issues with the react three fiber components (peerDependencies are not supported), so it is recommended to use npm install with the .tgz file.