@ranchhandrobotics/babylon_ros 0.1.7 β 0.1.9
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 -154
- package/dist/ros.js +1 -1
- package/dist/ros.js.map +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -2,7 +2,29 @@
|
|
|
2
2
|
|
|
3
3
|
## Overview
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
Babylon_ros is a Node.JS API for rendering [ROS 2](https://ros.org) based URDFs and Xacro in a web browser or Visual Studio Code compatible extension using [the Babylon.js graphics engine](https://www.babylonjs.com/).
|
|
6
|
+
|
|
7
|
+
|
|
8
|
+
<div align="center">
|
|
9
|
+
|
|
10
|
+
[](https://ranch-hand-robotics.github.io/babylon_ros/docs/urdf-viewer.html?urdf=https://raw.githubusercontent.com/Ranch-Hand-Robotics/babylon_ros/main/test/testdata/mule.urdf)
|
|
11
|
+
|
|
12
|
+
</div>
|
|
13
|
+
|
|
14
|
+
### Universal URDF Viewer
|
|
15
|
+
|
|
16
|
+
The generic URDF viewer accepts any URDF or Xacro file via URL parameters:
|
|
17
|
+
|
|
18
|
+
```
|
|
19
|
+
https://ranch-hand-robotics.github.io/babylon_ros/docs/urdf-viewer.html?urdf=YOUR_URDF_URL
|
|
20
|
+
```
|
|
21
|
+
|
|
22
|
+
**Example URLs:**
|
|
23
|
+
- **Mule Robot**: `https://ranch-hand-robotics.github.io/babylon_ros/docs/urdf-viewer.html?urdf=https://raw.githubusercontent.com/Ranch-Hand-Robotics/babylon_ros/main/test/testdata/mule.urdf`
|
|
24
|
+
- **R2 Robot**: `https://ranch-hand-robotics.github.io/babylon_ros/docs/urdf-viewer.html?urdf=https://raw.githubusercontent.com/Ranch-Hand-Robotics/babylon_ros/main/test/testdata/r2.urdf`
|
|
25
|
+
|
|
26
|
+
This makes it easy to embed live robot visualizations in any README by simply linking to the viewer with your URDF file URL.
|
|
27
|
+
|
|
6
28
|
|
|
7
29
|
## Features
|
|
8
30
|
|
|
@@ -16,10 +38,10 @@ Babylon_ROS is a Node.JS API for rendering ROS 2 based URDFs and Xacro in a web
|
|
|
16
38
|
- **No Sensor visualization**: The package does not simulate or visualize sensors.
|
|
17
39
|
|
|
18
40
|
## Installation
|
|
19
|
-
|
|
41
|
+
Babylon_ros is available via the [Node Package Manager](https://npmjs.com) package that can be installed in your web application. To install, run:
|
|
20
42
|
|
|
21
43
|
```bash
|
|
22
|
-
npm install --save @
|
|
44
|
+
npm install --save @ranchhandrobotics/babylon_ros
|
|
23
45
|
```
|
|
24
46
|
|
|
25
47
|
## Usage
|
|
@@ -64,161 +86,20 @@ Hereβs a simple example which renders a the Test Page included in this package
|
|
|
64
86
|
</body>
|
|
65
87
|
</html>
|
|
66
88
|
```
|
|
67
|
-
To use your own hosting application, I suggest looking at how the Test Page is implemented in the `test` directory.
|
|
68
|
-
|
|
69
|
-
### Rendering URDF Files from GitHub
|
|
70
|
-
You can directly render URDF files hosted on GitHub using unpkg to load babylon_ros. This is perfect for embedding live robot visualizations in README files or documentation.
|
|
71
|
-
|
|
72
|
-
Here's a complete example that renders the mule robot from this repository:
|
|
73
89
|
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
<html lang="en">
|
|
77
|
-
<head>
|
|
78
|
-
<meta charset="UTF-8">
|
|
79
|
-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
80
|
-
<title>Mule Robot URDF Viewer</title>
|
|
81
|
-
<style>
|
|
82
|
-
html, body {
|
|
83
|
-
overflow: hidden;
|
|
84
|
-
width: 100%;
|
|
85
|
-
height: 100%;
|
|
86
|
-
margin: 0;
|
|
87
|
-
padding: 0;
|
|
88
|
-
font-family: Arial, sans-serif;
|
|
89
|
-
}
|
|
90
|
-
#renderCanvas {
|
|
91
|
-
width: 100%;
|
|
92
|
-
height: 100%;
|
|
93
|
-
touch-action: none;
|
|
94
|
-
}
|
|
95
|
-
#controls {
|
|
96
|
-
position: absolute;
|
|
97
|
-
top: 10px;
|
|
98
|
-
left: 10px;
|
|
99
|
-
background: rgba(0, 0, 0, 0.7);
|
|
100
|
-
color: white;
|
|
101
|
-
padding: 10px;
|
|
102
|
-
border-radius: 5px;
|
|
103
|
-
z-index: 100;
|
|
104
|
-
}
|
|
105
|
-
button {
|
|
106
|
-
margin: 2px;
|
|
107
|
-
padding: 5px 10px;
|
|
108
|
-
background: #4CAF50;
|
|
109
|
-
color: white;
|
|
110
|
-
border: none;
|
|
111
|
-
border-radius: 3px;
|
|
112
|
-
cursor: pointer;
|
|
113
|
-
}
|
|
114
|
-
button:hover {
|
|
115
|
-
background: #45a049;
|
|
116
|
-
}
|
|
117
|
-
</style>
|
|
118
|
-
</head>
|
|
119
|
-
<body>
|
|
120
|
-
<canvas id="renderCanvas" touch-action="none"></canvas>
|
|
121
|
-
<div id="controls">
|
|
122
|
-
<h3>Mule Robot</h3>
|
|
123
|
-
<button onclick="resetCamera()">Reset Camera</button>
|
|
124
|
-
<button onclick="takeScreenshot()">Screenshot</button>
|
|
125
|
-
</div>
|
|
126
|
-
|
|
127
|
-
<!-- Load dependencies from unpkg -->
|
|
128
|
-
<script src="https://unpkg.com/babylonjs@7.16.1/babylon.js"></script>
|
|
129
|
-
<script src="https://unpkg.com/babylonjs-gui@7.16.1/babylon.gui.min.js"></script>
|
|
130
|
-
<script src="https://unpkg.com/@ranch-hand-robotics/babylon_ros/web/ros.js"></script>
|
|
131
|
-
|
|
132
|
-
<script>
|
|
133
|
-
let robotScene;
|
|
134
|
-
|
|
135
|
-
async function loadMuleRobot() {
|
|
136
|
-
try {
|
|
137
|
-
// Fetch the URDF file from GitHub
|
|
138
|
-
const urdfUrl = 'https://raw.githubusercontent.com/Ranch-Hand-Robotics/babylon_ros/main/test/testdata/mule.urdf';
|
|
139
|
-
const response = await fetch(urdfUrl);
|
|
140
|
-
const urdfText = await response.text();
|
|
141
|
-
|
|
142
|
-
// Create the robot scene
|
|
143
|
-
const canvas = document.getElementById('renderCanvas');
|
|
144
|
-
robotScene = new babylon_ros.RobotScene();
|
|
145
|
-
await robotScene.createScene(canvas);
|
|
146
|
-
|
|
147
|
-
// Load and render the URDF
|
|
148
|
-
await robotScene.applyURDF(urdfText);
|
|
149
|
-
|
|
150
|
-
console.log('Mule robot loaded successfully!');
|
|
151
|
-
} catch (error) {
|
|
152
|
-
console.error('Error loading robot:', error);
|
|
153
|
-
alert('Failed to load robot: ' + error.message);
|
|
154
|
-
}
|
|
155
|
-
}
|
|
156
|
-
|
|
157
|
-
function resetCamera() {
|
|
158
|
-
if (robotScene) {
|
|
159
|
-
robotScene.resetCamera();
|
|
160
|
-
}
|
|
161
|
-
}
|
|
162
|
-
|
|
163
|
-
async function takeScreenshot() {
|
|
164
|
-
if (robotScene) {
|
|
165
|
-
try {
|
|
166
|
-
const base64Data = await robotScene.takeScreenshot();
|
|
167
|
-
const link = document.createElement('a');
|
|
168
|
-
link.href = `data:image/png;base64,${base64Data}`;
|
|
169
|
-
link.download = 'mule_robot.png';
|
|
170
|
-
link.click();
|
|
171
|
-
} catch (error) {
|
|
172
|
-
console.error('Screenshot failed:', error);
|
|
173
|
-
}
|
|
174
|
-
}
|
|
175
|
-
}
|
|
176
|
-
|
|
177
|
-
// Load the robot when the page loads
|
|
178
|
-
window.addEventListener('load', loadMuleRobot);
|
|
179
|
-
</script>
|
|
180
|
-
</body>
|
|
181
|
-
</html>
|
|
182
|
-
```
|
|
183
|
-
|
|
184
|
-
### GitHub README Integration
|
|
185
|
-
To embed a live robot viewer in your GitHub README, you can use GitHub Pages or any static hosting service. Here's how to set it up:
|
|
186
|
-
|
|
187
|
-
1. **Create the viewer HTML file** (as shown above) in your repository
|
|
188
|
-
2. **Enable GitHub Pages** for your repository
|
|
189
|
-
3. **Link to the live viewer** in your README:
|
|
190
|
-
|
|
191
|
-
```markdown
|
|
192
|
-
## Live Robot Visualization
|
|
193
|
-
|
|
194
|
-
[π View the Mule Robot in 3D](https://ranch-hand-robotics.github.io/babylon_ros/mule_viewer.html)
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
```
|
|
198
|
-
|
|
199
|
-
## Screenshot API
|
|
200
|
-
|
|
201
|
-
The library includes built-in screenshot functionality to capture clean images of your robot scenes:
|
|
202
|
-
|
|
203
|
-
```javascript
|
|
204
|
-
// Take a screenshot and get base64 PNG data
|
|
205
|
-
const base64Data = await robotScene.takeScreenshot();
|
|
90
|
+
## Support
|
|
91
|
+
If you encounter any issues with this package, the following resources are provided:
|
|
206
92
|
|
|
207
|
-
|
|
208
|
-
|
|
93
|
+
### Github Issues
|
|
94
|
+
Bugs and feature requests are handled through [Github Issues in the Repository](https://github.com/Ranch-Hand-Robotics/babylon_ros/issues).
|
|
209
95
|
|
|
210
|
-
|
|
211
|
-
const dataUrl = await robotScene.takeScreenshotDataURL();
|
|
96
|
+
If you find that you are hitting the same issue as someone else, please give a :+1: or comment on an existing issue.
|
|
212
97
|
|
|
213
|
-
|
|
214
|
-
const link = document.createElement('a');
|
|
215
|
-
link.href = `data:image/png;base64,${base64Data}`;
|
|
216
|
-
link.download = 'robot_scene.png';
|
|
217
|
-
link.click();
|
|
218
|
-
```
|
|
98
|
+
Please provide as much details as possible, including an isolated reproduction of the issue or a pointer to an online repository.
|
|
219
99
|
|
|
220
|
-
|
|
100
|
+
### Discussions
|
|
101
|
+
[Github Discussions](https://github.com/orgs/Ranch-Hand-Robotics/discussions) are provided for community driven general guidance, walkthroughs, or support.
|
|
221
102
|
|
|
222
|
-
##
|
|
223
|
-
|
|
103
|
+
## Sponsor
|
|
104
|
+
If you find this package useful, please consider [sponsoring Ranch Hand Robotics](https://github.com/sponsors/Ranch-Hand-Robotics) to help support the development of this package and other open source projects.
|
|
224
105
|
|