@wandelbots/wandelbots-js-react-components 1.21.0 → 1.22.0
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 +35 -4
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -14,19 +14,22 @@ npm install @wandelbots/wandelbots-js-react-components
|
|
|
14
14
|
Import your desired components or functions from the package:
|
|
15
15
|
|
|
16
16
|
```jsx
|
|
17
|
-
import {
|
|
17
|
+
import { JoggingPanel, ... } from '@wandelbots/wandelbots-js-react-components'
|
|
18
18
|
```
|
|
19
19
|
|
|
20
|
+
See the [Storybook](https://wandelbotsgmbh.github.io/wandelbots-js-react-components) for implementation details of each component.
|
|
21
|
+
|
|
20
22
|
### Index
|
|
21
23
|
|
|
22
24
|
<table>
|
|
23
25
|
<tr>
|
|
24
26
|
<td valign="top">
|
|
25
27
|
<ul>
|
|
26
|
-
<li><a href="#
|
|
28
|
+
<li><a href="#ui">UI</a></li>
|
|
27
29
|
<ul>
|
|
28
30
|
<li><a href="#joggingpanel">JoggingPanel</a></li>
|
|
29
31
|
<li><a href="#wandelscripteditor">WandelscriptEditor</a></li>
|
|
32
|
+
<li><a href="#theming">Theming</a></li>
|
|
30
33
|
</ul>
|
|
31
34
|
<li><a href="#viewport">3D Viewport</a></li>
|
|
32
35
|
<ul>
|
|
@@ -39,10 +42,14 @@ import { WandelscriptEditor, ... } from '@wandelbots/wandelbots-js-react-compone
|
|
|
39
42
|
</tr>
|
|
40
43
|
</table>
|
|
41
44
|
|
|
42
|
-
###
|
|
45
|
+
### UI
|
|
43
46
|
|
|
44
47
|
#### JoggingPanel
|
|
45
48
|
|
|
49
|
+
<a href="https://wandelbotsgmbh.github.io/wandelbots-js-react-components/?path=/docs/jogging-joggingpanel--docs">
|
|
50
|
+
<img width="20%" alt="jogging" src="https://github.com/user-attachments/assets/07d8bd72-9378-4199-8f54-d101c857797c">
|
|
51
|
+
</a>
|
|
52
|
+
|
|
46
53
|
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.
|
|
47
54
|
|
|
48
55
|
```tsx
|
|
@@ -76,11 +83,31 @@ type WandelscriptEditorProps = {
|
|
|
76
83
|
}
|
|
77
84
|
```
|
|
78
85
|
|
|
86
|
+
#### Theming
|
|
87
|
+
|
|
88
|
+
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](mui.com/material-ui).
|
|
89
|
+
|
|
90
|
+
Using the Wandelbots MUI theme
|
|
91
|
+
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.
|
|
92
|
+
|
|
93
|
+
```tsx
|
|
94
|
+
import { ThemeProvider } from "@mui/material";
|
|
95
|
+
import { createNovaMuiTheme, JoggingPanel } from "@wandelbots/wandelbots-js-react-components"
|
|
96
|
+
|
|
97
|
+
const theme = createNovaMuiTheme()
|
|
98
|
+
|
|
99
|
+
<ThemeProvider theme={theme}>
|
|
100
|
+
<JoggingPanel ... />
|
|
101
|
+
</ThemeProvider>
|
|
102
|
+
```
|
|
103
|
+
|
|
79
104
|
### Viewport
|
|
80
105
|
|
|
81
106
|
#### Robot
|
|
82
107
|
|
|
83
|
-
<
|
|
108
|
+
<a href="https://wandelbotsgmbh.github.io/wandelbots-js-react-components/?path=/docs/3d-view-robot--docs">
|
|
109
|
+
<img width="20%" alt="Robot" src="https://github.com/user-attachments/assets/da661136-8b53-48ba-85de-63b09e3b51f3">
|
|
110
|
+
</a>
|
|
84
111
|
|
|
85
112
|
This `Robot` component adds the robot to the 3D viewport. Use it together with the `connectedMotionGroup` from `@wandelbots/wandelbots-js`.
|
|
86
113
|
|
|
@@ -140,6 +167,10 @@ The `PresetEnvironment` component adds a default lighting setup to the 3D viewpo
|
|
|
140
167
|
|
|
141
168
|
#### Safety
|
|
142
169
|
|
|
170
|
+
<a href="https://wandelbotsgmbh.github.io/wandelbots-js-react-components/?path=/docs/3d-view-safetyzonesrenderer--docs">
|
|
171
|
+
<img width="20%" alt="Bildschirmfoto 2024-09-19 um 14 26 40" src="https://github.com/user-attachments/assets/be5ef8c3-5cd2-4d6d-bfc3-cbf4eb4fc04c">
|
|
172
|
+
</a>
|
|
173
|
+
|
|
143
174
|
The `SafetyZonesRenderer` component visualizes the safety zones of the controller.
|
|
144
175
|
|
|
145
176
|
```tsx
|
package/package.json
CHANGED