@wandelbots/wandelbots-js-react-components 2.35.0-pr.feature-replace-forwardref.376.d3a302b → 2.35.0-pr.feature-replace-forward-trigger-build.377.c42fff6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +141 -151
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -2,207 +2,197 @@
|
|
|
2
2
|
|
|
3
3
|
[](https://npmjs.org/package/@wandelbots/wandelbots-js-react-components) [](https://bundlephobia.com/package/@wandelbots/wandelbots-js-react-components) [](https://github.com/wandelbotsgmbh/wandelbots-js-react-components/actions/workflows/release.yml) [](https://wandelbotsgmbh.github.io/wandelbots-js-react-components)
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
React UI components for building robotics applications on the [Wandelbots Nova platform](https://www.wandelbots.com/).
|
|
6
|
+
|
|
7
|
+
Built with TypeScript, Material-UI, and React Three Fiber. Provides robot control interfaces, 3D visualizations, and automation components that integrate with the Nova ecosystem.
|
|
8
|
+
|
|
9
|
+
## Quick Start
|
|
6
10
|
|
|
7
11
|
```bash
|
|
8
12
|
npm install @wandelbots/wandelbots-js-react-components
|
|
9
13
|
```
|
|
10
14
|
|
|
11
|
-
|
|
15
|
+
## Getting Started
|
|
12
16
|
|
|
13
|
-
|
|
17
|
+
For setup instructions, integration examples, and basic usage patterns, visit the **[Getting Started Guide](https://wandelbotsgmbh.github.io/wandelbots-js-react-components/?path=/docs/gettingstarted--docs)** in our Storybook documentation.
|
|
14
18
|
|
|
15
|
-
|
|
16
|
-
import { JoggingPanel, ... } from '@wandelbots/wandelbots-js-react-components'
|
|
17
|
-
```
|
|
19
|
+
## Documentation
|
|
18
20
|
|
|
19
|
-
See the [Storybook](https://wandelbotsgmbh.github.io/wandelbots-js-react-components) for
|
|
20
|
-
|
|
21
|
-
### Index
|
|
22
|
-
|
|
23
|
-
<table>
|
|
24
|
-
<tr>
|
|
25
|
-
<td valign="top">
|
|
26
|
-
<ul>
|
|
27
|
-
<li><a href="#ui">UI</a></li>
|
|
28
|
-
<ul>
|
|
29
|
-
<li><a href="#joggingpanel">JoggingPanel</a></li>
|
|
30
|
-
<li><a href="#wandelscripteditor">WandelscriptEditor</a></li>
|
|
31
|
-
<li><a href="#theming">Theming</a></li>
|
|
32
|
-
</ul>
|
|
33
|
-
<li><a href="#viewport">3D Viewport</a></li>
|
|
34
|
-
<ul>
|
|
35
|
-
<li><a href="#robot">Robot</a></li>
|
|
36
|
-
<li><a href="#lightning">Lightning</a></li>
|
|
37
|
-
<li><a href="#safety">Safety Zones</a></li>
|
|
38
|
-
</ul>
|
|
39
|
-
</ul>
|
|
40
|
-
</td>
|
|
41
|
-
</tr>
|
|
42
|
-
</table>
|
|
43
|
-
|
|
44
|
-
### UI
|
|
45
|
-
|
|
46
|
-
#### JoggingPanel
|
|
47
|
-
|
|
48
|
-
<a href="https://wandelbotsgmbh.github.io/wandelbots-js-react-components/?path=/docs/jogging-joggingpanel--docs">
|
|
49
|
-
<img width="20%" alt="jogging" src="https://github.com/user-attachments/assets/07d8bd72-9378-4199-8f54-d101c857797c">
|
|
50
|
-
</a>
|
|
51
|
-
|
|
52
|
-
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](https://github.com/wandelbotsgmbh/wandelbots-js) and the id of a motion group to connect to.
|
|
53
|
-
|
|
54
|
-
```tsx
|
|
55
|
-
type JoggingPanelProps = {
|
|
56
|
-
/** Connection to a Nova instance to use for jogging */
|
|
57
|
-
nova: NovaClient
|
|
58
|
-
/** Id of the motion group to move e.g. 0@ur5e **/
|
|
59
|
-
motionGroupId: string
|
|
60
|
-
/** Callback with the jogging panel's state store for further customization/config */
|
|
61
|
-
onSetup: (store: JoggingStore) => void
|
|
62
|
-
/** Any children will go at the bottom of the panel under the default components */
|
|
63
|
-
children?: React.ReactNode
|
|
64
|
-
}
|
|
65
|
-
```
|
|
21
|
+
See the [Storybook](https://wandelbotsgmbh.github.io/wandelbots-js-react-components) for interactive examples and API documentation.
|
|
66
22
|
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
The WandelscriptEditor provides an interface for editing snippets of Wandelscript code with the appropriate syntax highlighting. It uses the [Monaco](https://microsoft.github.io/monaco-editor/) editor under the hood.
|
|
70
|
-
|
|
71
|
-
```tsx
|
|
72
|
-
type WandelscriptEditorProps = {
|
|
73
|
-
/** The current Wandelscript content of the code editor (controlled component) */
|
|
74
|
-
code?: string
|
|
75
|
-
/** What to do when the user edits the code */
|
|
76
|
-
onChange?: (
|
|
77
|
-
code: string | undefined,
|
|
78
|
-
ev: editor.IModelContentChangedEvent,
|
|
79
|
-
) => void
|
|
80
|
-
/** Callback to further configure monaco on startup if needed */
|
|
81
|
-
monacoSetup?: (monaco: Monaco) => void
|
|
82
|
-
}
|
|
83
|
-
```
|
|
23
|
+
## Components
|
|
84
24
|
|
|
85
|
-
|
|
25
|
+
### Robot Control & Jogging
|
|
86
26
|
|
|
87
|
-
|
|
27
|
+
Manual robot control interfaces.
|
|
88
28
|
|
|
89
|
-
|
|
90
|
-
To make the components look exactly like they do in the storybook, pass the [Wandelbots MUI theme](https://wandelbotsgmbh.github.io/wandelbots-js-react-components/?path=/docs/theming-wandelbots-mui-theme--docs) to ThemeProvider.
|
|
29
|
+
**[JoggingPanel](https://wandelbotsgmbh.github.io/wandelbots-js-react-components/?path=/docs/jogging-joggingpanel--docs)** - Complete jogging interface with cartesian and joint controls
|
|
91
30
|
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
31
|
+
- Dual-mode operation (Cartesian & Joint space)
|
|
32
|
+
- Real-time velocity control
|
|
33
|
+
- Multiple coordinate systems support
|
|
95
34
|
|
|
96
|
-
|
|
35
|
+
**Individual Jogging Controls**
|
|
97
36
|
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
```
|
|
37
|
+
- **[JoggingCartesianAxisControl](https://wandelbotsgmbh.github.io/wandelbots-js-react-components/?path=/docs/jogging-joggingcartesianaxiscontrol--docs)** - Single-axis cartesian movement
|
|
38
|
+
- **[JoggingJointRotationControl](https://wandelbotsgmbh.github.io/wandelbots-js-react-components/?path=/docs/jogging-joggingjointrotationcontrol--docs)** - Individual joint controls
|
|
39
|
+
- **[VelocitySlider](https://wandelbotsgmbh.github.io/wandelbots-js-react-components/?path=/docs/jogging-velocityslider--docs)** - Speed adjustment interface
|
|
102
40
|
|
|
103
|
-
###
|
|
41
|
+
### Program Execution
|
|
104
42
|
|
|
105
|
-
|
|
43
|
+
Program control and monitoring components.
|
|
106
44
|
|
|
107
|
-
|
|
108
|
-
<img width="20%" alt="Robot" src="https://github.com/user-attachments/assets/da661136-8b53-48ba-85de-63b09e3b51f3">
|
|
109
|
-
</a>
|
|
45
|
+
**[ProgramControl](https://wandelbotsgmbh.github.io/wandelbots-js-react-components/?path=/docs/components-programcontrol--docs)** - Program lifecycle management
|
|
110
46
|
|
|
111
|
-
|
|
47
|
+
- Play, pause, stop functionality
|
|
48
|
+
- State machine integration
|
|
49
|
+
- Manual reset capabilities
|
|
112
50
|
|
|
113
|
-
|
|
114
|
-
<Robot connectedMotionGroup={connectedMotionGroup} />
|
|
115
|
-
```
|
|
51
|
+
**[ProgramStateIndicator](https://wandelbotsgmbh.github.io/wandelbots-js-react-components/?path=/docs/components-programstateindicator--docs)** - Visual program status
|
|
116
52
|
|
|
117
|
-
|
|
53
|
+
- Live execution state monitoring
|
|
54
|
+
- Error state visualization
|
|
118
55
|
|
|
119
|
-
|
|
56
|
+
### 3D Visualization & Robotics
|
|
120
57
|
|
|
121
|
-
|
|
122
|
-
<Robot
|
|
123
|
-
getModel={() => `public/${connectedMotionGroup.modelFromController}.glb`}
|
|
124
|
-
connectedMotionGroup={connectedMotionGroup}
|
|
125
|
-
/>
|
|
126
|
-
```
|
|
58
|
+
3D components for robot visualization.
|
|
127
59
|
|
|
128
|
-
|
|
129
|
-
export type ConnectecMotionGroupRobotProps = {
|
|
130
|
-
connectedMotionGroup: ConnectedMotionGroup // The connected motion group from wandelbots-js
|
|
131
|
-
getModel?: (modelFromController: string) => string // A function that returns the URL of the robot model
|
|
132
|
-
transparentColor?: string // Whether the robot should be displayed transparently
|
|
133
|
-
} & GroupProps
|
|
134
|
-
```
|
|
60
|
+
**[Robot](https://wandelbotsgmbh.github.io/wandelbots-js-react-components/?path=/docs/3d-view-robot--docs)** - Real-time 3D robot rendering
|
|
135
61
|
|
|
136
|
-
|
|
62
|
+
- Live pose updates from motion groups
|
|
63
|
+
- Extensive robot model support from major manufacturers
|
|
64
|
+
- [Supported Models](https://wandelbotsgmbh.github.io/wandelbots-js-react-components/?path=/story/3d-view-robot-supported-models--abb-1010-037-15) - ABB, FANUC, KUKA, Universal Robots, Yaskawa (100+ models)
|
|
65
|
+
- Automatic model loading from CDN
|
|
137
66
|
|
|
138
|
-
|
|
67
|
+
**[SafetyZonesRenderer](https://wandelbotsgmbh.github.io/wandelbots-js-react-components/?path=/docs/3d-view-safetyzonesrenderer--docs)** - 3D safety visualization
|
|
139
68
|
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
rapidlyChangingMotionState={rapidlyChangingMotionState}
|
|
143
|
-
dhParameters={dhParameters as any}
|
|
144
|
-
modelFromController={modelFromController || ""}
|
|
145
|
-
getModel={() => `./robot-pad/models/${modelFromController}.glb`}
|
|
146
|
-
/>
|
|
147
|
-
```
|
|
69
|
+
- Real-time safety zone rendering
|
|
70
|
+
- Visual collision boundaries
|
|
148
71
|
|
|
149
|
-
|
|
150
|
-
export type SupportedRobotProps = {
|
|
151
|
-
rapidlyChangingMotionState: MotionGroupStateResponse // The motion state of the robot
|
|
152
|
-
modelFromController: string // The model name of the robot
|
|
153
|
-
dhParameters: DHParameter[] // The DH parameters of the robot
|
|
154
|
-
getModel?: (modelFromController: string) => string // A function that returns the URL of the robot model
|
|
155
|
-
transparentColor?: string // Whether the robot should be displayed transparently
|
|
156
|
-
} & GroupProps
|
|
157
|
-
```
|
|
72
|
+
**[TrajectoryRenderer](https://wandelbotsgmbh.github.io/wandelbots-js-react-components/?path=/docs/3d-view-trajectoryrenderer--docs)** - Motion path visualization
|
|
158
73
|
|
|
159
|
-
|
|
74
|
+
- Real-time trajectory display
|
|
75
|
+
- Path planning visualization
|
|
160
76
|
|
|
161
|
-
|
|
77
|
+
### Safety & Monitoring
|
|
162
78
|
|
|
163
|
-
|
|
164
|
-
<PresetEnvironment>
|
|
165
|
-
```
|
|
79
|
+
Safety components for production environments.
|
|
166
80
|
|
|
167
|
-
|
|
81
|
+
**[SafetyBar](https://wandelbotsgmbh.github.io/wandelbots-js-react-components/?path=/docs/safety-safetybar--docs)** - Centralized safety status
|
|
168
82
|
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
</a>
|
|
83
|
+
- Real-time safety monitoring
|
|
84
|
+
- Emergency stop integration
|
|
172
85
|
|
|
173
|
-
|
|
86
|
+
### Code Editing
|
|
174
87
|
|
|
175
|
-
|
|
176
|
-
<SafetyZonesRenderer safetyZones={connectedMotionGroup.safetyZones || []} />
|
|
177
|
-
```
|
|
88
|
+
Code editing capabilities for robot programming.
|
|
178
89
|
|
|
179
|
-
|
|
90
|
+
**[WandelscriptEditor](https://wandelbotsgmbh.github.io/wandelbots-js-react-components/?path=/docs/wandelscript-wandelscripteditor--docs)** - Code editor
|
|
180
91
|
|
|
181
|
-
|
|
92
|
+
- Monaco editor integration
|
|
93
|
+
- Wandelscript syntax highlighting
|
|
94
|
+
- IntelliSense support
|
|
182
95
|
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
96
|
+
### Data & Interface Components
|
|
97
|
+
|
|
98
|
+
UI components for data display and user interaction.
|
|
99
|
+
|
|
100
|
+
**Data Components**
|
|
101
|
+
|
|
102
|
+
- **[DataGrid](https://wandelbotsgmbh.github.io/wandelbots-js-react-components/?path=/docs/components-datagrid--docs)** - Data tables with robotics data formatting
|
|
103
|
+
- **[LogPanel](https://wandelbotsgmbh.github.io/wandelbots-js-react-components/?path=/docs/components-logpanel--docs)** - Real-time log display and filtering
|
|
104
|
+
- **[CycleTimer](https://wandelbotsgmbh.github.io/wandelbots-js-react-components/?path=/docs/components-cycletimer--docs)** - Production cycle timing and metrics
|
|
105
|
+
|
|
106
|
+
**Robot Management**
|
|
107
|
+
|
|
108
|
+
- **[RobotCard](https://wandelbotsgmbh.github.io/wandelbots-js-react-components/?path=/docs/components-robotcard--docs)** - Robot overview cards with status
|
|
109
|
+
- **[RobotListItem](https://wandelbotsgmbh.github.io/wandelbots-js-react-components/?path=/docs/components-robotlistitem--docs)** - List view for multiple robots
|
|
110
|
+
- **[RobotSetupReadinessIndicator](https://wandelbotsgmbh.github.io/wandelbots-js-react-components/?path=/docs/components-robotsetupreadinessindicator--docs)** - Setup validation status
|
|
111
|
+
|
|
112
|
+
**Navigation**
|
|
113
|
+
|
|
114
|
+
- **[AppHeader](https://wandelbotsgmbh.github.io/wandelbots-js-react-components/?path=/docs/navigation-appheader--docs)** - Application header with branding
|
|
115
|
+
- **[TabBar](https://wandelbotsgmbh.github.io/wandelbots-js-react-components/?path=/docs/navigation-tabbar--docs)** - Multi-section navigation
|
|
116
|
+
|
|
117
|
+
### Theming & Styling
|
|
118
|
+
|
|
119
|
+
Styling system for consistent robotics applications.
|
|
186
120
|
|
|
187
|
-
|
|
121
|
+
**[Theming components](https://wandelbotsgmbh.github.io/wandelbots-js-react-components/?path=/docs/theming-theming-components--docs)** - Interactive theming examples
|
|
122
|
+
|
|
123
|
+
- Component theming demonstrations
|
|
124
|
+
- Customization patterns
|
|
125
|
+
|
|
126
|
+
**[Wandelbots MUI Theme](https://wandelbotsgmbh.github.io/wandelbots-js-react-components/?path=/docs/theming-wandelbots-mui-theme--docs)** - Material-UI theme
|
|
127
|
+
|
|
128
|
+
- Dark/light mode support
|
|
129
|
+
- Robotics-specific color schemes
|
|
130
|
+
- Material Design integration
|
|
131
|
+
|
|
132
|
+
## Architecture & Integration
|
|
133
|
+
|
|
134
|
+
### Nova Platform Integration
|
|
135
|
+
|
|
136
|
+
Components integrate with the Wandelbots Nova ecosystem:
|
|
137
|
+
|
|
138
|
+
- **NovaClient Integration** - Components accept either `NovaClient` instances or URL strings
|
|
139
|
+
- **Real-time Updates** - WebSocket connections for live robot state updates
|
|
140
|
+
- **Motion Group Management** - Direct integration with `ConnectedMotionGroup` objects
|
|
141
|
+
- **State Synchronization** - Automatic state management with MobX reactivity
|
|
142
|
+
|
|
143
|
+
### Technical Foundation
|
|
144
|
+
|
|
145
|
+
- **TypeScript** - Full type safety and enhanced developer experience
|
|
146
|
+
- **Material-UI v6/v7** - Professional design system and theming
|
|
147
|
+
- **React Three Fiber** - High-performance 3D rendering for robotics visualization
|
|
148
|
+
- **MobX** - Reactive state management for real-time updates
|
|
149
|
+
- **i18next** - Internationalization support for global deployment
|
|
150
|
+
|
|
151
|
+
## Installation & Setup
|
|
152
|
+
|
|
153
|
+
### Prerequisites
|
|
154
|
+
|
|
155
|
+
- React 18+ or 19+
|
|
156
|
+
- Material-UI v6 or v7
|
|
157
|
+
- @emotion/react and @emotion/styled
|
|
158
|
+
|
|
159
|
+
### Optional Dependencies (for 3D components)
|
|
160
|
+
|
|
161
|
+
- @react-three/fiber, @react-three/drei, three, three-stdlib
|
|
162
|
+
|
|
163
|
+
See the [Getting Started Guide](https://wandelbotsgmbh.github.io/wandelbots-js-react-components/?path=/docs/gettingstarted--docs) for complete setup instructions and integration examples.
|
|
164
|
+
|
|
165
|
+
## Development
|
|
166
|
+
|
|
167
|
+
To set up the project for development:
|
|
188
168
|
|
|
189
169
|
```bash
|
|
190
|
-
|
|
170
|
+
git clone https://github.com/wandelbotsgmbh/wandelbots-js-react-components.git
|
|
171
|
+
cd wandelbots-js-react-components
|
|
172
|
+
npm install
|
|
173
|
+
npm run dev # Start Storybook development server
|
|
191
174
|
```
|
|
192
175
|
|
|
193
176
|
### Local Testing
|
|
194
177
|
|
|
195
|
-
|
|
178
|
+
Build and test the package locally:
|
|
196
179
|
|
|
197
180
|
```bash
|
|
198
181
|
npm run build
|
|
199
182
|
npm pack
|
|
183
|
+
npm install /path/to/wandelbots-wandelbots-js-react-components-x.x.x.tgz
|
|
200
184
|
```
|
|
201
185
|
|
|
202
|
-
|
|
186
|
+
> **Note:** Use `npm install` with the `.tgz` file instead of `npm link` due to peer dependency requirements with React Three Fiber components.
|
|
203
187
|
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
188
|
+
## Contributing
|
|
189
|
+
|
|
190
|
+
We welcome contributions! Please see our contributing guidelines and feel free to submit issues and pull requests.
|
|
191
|
+
|
|
192
|
+
## License
|
|
193
|
+
|
|
194
|
+
This project is licensed under the terms specified in the LICENSE file.
|
|
195
|
+
|
|
196
|
+
---
|
|
207
197
|
|
|
208
|
-
|
|
198
|
+
[Explore the Storybook](https://wandelbotsgmbh.github.io/wandelbots-js-react-components) • [Visit Wandelbots.com](https://www.wandelbots.com/)
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@wandelbots/wandelbots-js-react-components",
|
|
3
|
-
"version": "2.35.0-pr.feature-replace-
|
|
3
|
+
"version": "2.35.0-pr.feature-replace-forward-trigger-build.377.c42fff6",
|
|
4
4
|
"description": "React UI toolkit for building applications on top of the Wandelbots platform",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"sideEffects": false,
|