Skip to content

Commit da2f4ae

Browse files
EzraBrooksEzraBrooks
authored
Make examples runnable from package.json (#1102)
1 parent baa09fd commit da2f4ae

File tree

13 files changed

+1120
-835
lines changed

13 files changed

+1120
-835
lines changed

‎README.md‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,6 @@
44

55
## The Standard ROS JavaScript Library
66

7-
For full documentation see the [ROS wiki](http://wiki.ros.org/roslibjs).
8-
97
[JSDoc](https://robotwebtools.github.io/roslibjs) can be found on the Robot Web Tools website.
108

119
This project is released as part of the [Robot Web Tools](https://robotwebtools.github.io/) effort.
@@ -21,8 +19,7 @@ npm install roslib
2119
## Troubleshooting
2220

2321
1. Check that connection is established. You can listen to error and
24-
connection events to report them to console. See
25-
examples/simple.html for a complete example:
22+
connection events to report them to console.
2623

2724
```js
2825
ros.on("error", function (error) {
@@ -33,6 +30,8 @@ npm install roslib
3330
});
3431
```
3532

33+
Try running `npm run examples` for some complete examples!
34+
3635
2. Check that you have the websocket server is running on
3736
port 9090. Something like this should do:
3837

‎examples/action_client.html‎

Lines changed: 77 additions & 81 deletions
Original file line numberDiff line numberDiff line change
@@ -1,94 +1,90 @@
1-
<!DOCTYPE html>
1+
<!doctype html>
22
<html>
3-
<head>
4-
<meta charset="utf-8" />
5-
<script src="https://unpkg.com/eventemitter3@latest/dist/eventemitter3.umd.min.js"></script>
6-
<script src="../dist/RosLib.umd.cjs"></script>
3+
<head>
4+
<meta charset="utf-8" />
5+
<script src="../importmap.js"></script>
76

8-
<script>
9-
// Connecting to ROS
10-
// -----------------
11-
var ros = new ROSLIB.Ros({
12-
url : 'ws://localhost:9090'
13-
});
7+
<script type="module">
8+
import * as ROSLIB from "roslib";
9+
// Connecting to ROS
10+
// -----------------
11+
var ros = new ROSLIB.Ros({
12+
url: "ws://localhost:9090",
13+
});
1414

15-
// If there is an error on the backend, an 'error' emit will be emitted.
16-
ros.on('error', function(error) {
17-
document.getElementById('connecting').style.display = 'none';
18-
document.getElementById('connected').style.display = 'none';
19-
document.getElementById('closed').style.display = 'none';
20-
document.getElementById('error').style.display = 'inline';
21-
console.log(error);
22-
});
15+
// If there is an error on the backend, an 'error' emit will be emitted.
16+
ros.on("error", function (error) {
17+
document.getElementById("connecting").style.display = "none";
18+
document.getElementById("connected").style.display = "none";
19+
document.getElementById("closed").style.display = "none";
20+
document.getElementById("error").style.display = "inline";
21+
console.log(error);
22+
});
2323

24-
// Find out exactly when we made a connection.
25-
ros.on('connection', function() {
26-
console.log('Connection made!');
27-
document.getElementById('connecting').style.display = 'none';
28-
document.getElementById('error').style.display = 'none';
29-
document.getElementById('closed').style.display = 'none';
30-
document.getElementById('connected').style.display = 'inline';
31-
});
24+
// Find out exactly when we made a connection.
25+
ros.on("connection", function () {
26+
console.log("Connection made!");
27+
document.getElementById("connecting").style.display = "none";
28+
document.getElementById("error").style.display = "none";
29+
document.getElementById("closed").style.display = "none";
30+
document.getElementById("connected").style.display = "inline";
31+
});
3232

33-
ros.on('close', function() {
34-
console.log('Connection closed.');
35-
document.getElementById('connecting').style.display = 'none';
36-
document.getElementById('connected').style.display = 'none';
37-
document.getElementById('closed').style.display = 'inline';
38-
});
33+
ros.on("close", function () {
34+
console.log("Connection closed.");
35+
document.getElementById("connecting").style.display = "none";
36+
document.getElementById("connected").style.display = "none";
37+
document.getElementById("closed").style.display = "inline";
38+
});
3939

40-
// The ActionClient
41-
// ----------------
40+
// The ActionClient
41+
// ----------------
4242

43-
var fibonacciClient = new ROSLIB.ActionClient({
44-
ros : ros,
45-
serverName : '/fibonacci',
46-
actionName : 'actionlib_tutorials/FibonacciAction'
47-
});
43+
var fibonacciClient = new ROSLIB.ActionClient({
44+
ros: ros,
45+
serverName: "/fibonacci",
46+
actionName: "actionlib_tutorials/FibonacciAction",
47+
});
4848

49-
// Create a goal.
50-
var goal = new ROSLIB.Goal({
51-
actionClient : fibonacciClient,
52-
goalMessage : {
53-
order : 7
54-
}
55-
});
49+
// Create a goal.
50+
var goal = new ROSLIB.Goal({
51+
actionClient: fibonacciClient,
52+
goalMessage: {
53+
order: 7,
54+
},
55+
});
5656

57-
// Print out their output into the terminal.
58-
goal.on('feedback', function(feedback) {
59-
console.log('Feedback: ' + feedback.sequence);
60-
});
61-
goal.on('result', function(result) {
62-
console.log('Final Result: ' + result.sequence);
63-
});
57+
// Print out their output into the terminal.
58+
goal.on("feedback", function (feedback) {
59+
console.log("Feedback: " + feedback.sequence);
60+
});
61+
goal.on("result", function (result) {
62+
console.log("Final Result: " + result.sequence);
63+
});
6464

65-
// Send the goal to the action server.
66-
goal.send();
67-
</script>
68-
</head>
65+
// Send the goal to the action server.
66+
goal.send();
67+
</script>
68+
</head>
6969

70-
<body>
71-
<h1>Fibonacci ActionClient Example</h1>
72-
<p>Run the following commands in the terminal then refresh this page. Check the JavaScript
73-
console for the output.</p>
74-
<ol>
75-
<li><tt>roscore</tt></li>
76-
<li><tt>rosrun actionlib_tutorials fibonacci_server</tt></li>
77-
<li><tt>roslaunch rosbridge_server rosbridge_websocket.launch</tt></li>
78-
</ol>
79-
<div id="statusIndicator">
80-
<p id="connecting">
81-
Connecting to rosbridge...
70+
<body>
71+
<h1>Fibonacci ActionClient Example</h1>
72+
<p>
73+
Run the following commands in the terminal then refresh this page. Check
74+
the JavaScript console for the output.
8275
</p>
83-
<p id="connected" style="color:#00D600; display:none">
84-
Connected
85-
</p>
86-
<p id="error" style="color:#FF0000; display:none">
87-
Error in the backend!
88-
</p>
89-
<p id="closed" style="display:none">
90-
Connection closed.
91-
</p>
92-
</div>
93-
</body>
76+
<ol>
77+
<li><tt>roscore</tt></li>
78+
<li><tt>rosrun actionlib_tutorials fibonacci_server</tt></li>
79+
<li><tt>roslaunch rosbridge_server rosbridge_websocket.launch</tt></li>
80+
</ol>
81+
<div id="statusIndicator">
82+
<p id="connecting">Connecting to rosbridge...</p>
83+
<p id="connected" style="color: #00d600; display: none">Connected</p>
84+
<p id="error" style="color: #ff0000; display: none">
85+
Error in the backend!
86+
</p>
87+
<p id="closed" style="display: none">Connection closed.</p>
88+
</div>
89+
</body>
9490
</html>

‎examples/action_server.html‎

Lines changed: 64 additions & 61 deletions
Original file line numberDiff line numberDiff line change
@@ -1,75 +1,78 @@
1-
<!DOCTYPE html>
1+
<!doctype html>
22
<html>
3-
<head>
4-
<meta charset="utf-8" />
5-
<script src="https://unpkg.com/eventemitter3@latest/dist/eventemitter3.umd.min.js"></script>
6-
<script src="../dist/RosLib.umd.cjs"></script>
3+
<head>
4+
<meta charset="utf-8" />
5+
<script src="../importmap.js"></script>
76

8-
<script>
9-
// Connecting to ROS
10-
// -----------------
11-
var ros = new ROSLIB.Ros({
12-
url : 'ws://localhost:9090'
13-
});
7+
<script type="module">
8+
import * as ROSLIB from "roslib";
9+
// Connecting to ROS
10+
// -----------------
11+
var ros = new ROSLIB.Ros({
12+
url: "ws://localhost:9090",
13+
});
1414

15-
// If there is an error on the backend, an 'error' emit will be emitted.
16-
ros.on('error', function(error) {
17-
console.log(error);
18-
});
15+
// If there is an error on the backend, an 'error' emit will be emitted.
16+
ros.on("error", function (error) {
17+
console.log(error);
18+
});
1919

20-
// The ActionServer
21-
// ----------------
20+
// The ActionServer
21+
// ----------------
2222

23-
this.fibonacciServer = new ROSLIB.SimpleActionServer({
24-
ros : ros,
25-
serverName : '/fibonacci',
26-
actionName : 'actionlib_tutorials/FibonacciAction'
27-
});
23+
const fibonacciServer = new ROSLIB.SimpleActionServer({
24+
ros: ros,
25+
serverName: "/fibonacci",
26+
actionName: "actionlib_tutorials/FibonacciAction",
27+
});
2828

29-
this.canceled = false;
30-
var that=this;
29+
var canceled = false;
3130

32-
//handle fibonacci action request.
33-
this.fibonacciServer.on('goal', function(goalMessage) {
34-
console.log(goalMessage);
35-
fibonacciSequence = [];
36-
fibonacciSequence.push(0);
37-
fibonacciSequence.push(1);
31+
//handle fibonacci action request.
32+
fibonacciServer.on("goal", function (goalMessage) {
33+
console.log(goalMessage);
34+
fibonacciSequence = [];
35+
fibonacciSequence.push(0);
36+
fibonacciSequence.push(1);
3837

39-
for (var i = 1; i < goalMessage.order; i++ ) {
40-
fibonacciSequence.push( fibonacciSequence[i] + fibonacciSequence[i-1] );
38+
for (var i = 1; i < goalMessage.order; i++) {
39+
fibonacciSequence.push(
40+
fibonacciSequence[i] + fibonacciSequence[i - 1],
41+
);
4142

42-
if (that.canceled === true ) {
43-
console.log("Action server preempted");
43+
if (canceled === true) {
44+
console.log("Action server preempted");
4445

45-
that.fibonacciServer.setPreempted();
46-
}
47-
console.log(fibonacciSequence);
48-
//send feedback
49-
var feedback = { sequence: fibonacciSequence };
50-
that.fibonacciServer.sendFeedback(fibonacciSequence);
51-
}
46+
fibonacciServer.setPreempted();
47+
}
48+
console.log(fibonacciSequence);
49+
//send feedback
50+
var feedback = { sequence: fibonacciSequence };
51+
fibonacciServer.sendFeedback(fibonacciSequence);
52+
}
5253

53-
//send result
54-
var result = { sequence: fibonacciSequence};
55-
that.fibonacciServer.setSucceeded(result);
56-
});
54+
//send result
55+
var result = { sequence: fibonacciSequence };
56+
fibonacciServer.setSucceeded(result);
57+
});
5758

58-
this.fibonacciServer.on('cancel', function(goalMessage){
59-
that.canceled = true;
60-
});
61-
</script>
62-
</head>
59+
fibonacciServer.on("cancel", function (goalMessage) {
60+
canceled = true;
61+
});
62+
</script>
63+
</head>
6364

64-
<body>
65-
<h1>Fibonacci ActionClient Example</h1>
66-
<p>Run the following commands in the terminal then refresh this page. Check the JavaScript
67-
console for the output.</p>
68-
<ol>
69-
<li><tt>roscore</tt></li>
70-
<li><tt>roslaunch rosbridge_server rosbridge_websocket.launch</tt></li>
71-
<li><tt>refresh this page</tt></li>
72-
<li><tt>rosrun actionlib_tutorials fibonacci_client</tt></li>
73-
</ol>
74-
</body>
65+
<body>
66+
<h1>Fibonacci ActionClient Example</h1>
67+
<p>
68+
Run the following commands in the terminal then refresh this page. Check
69+
the JavaScript console for the output.
70+
</p>
71+
<ol>
72+
<li><tt>roscore</tt></li>
73+
<li><tt>roslaunch rosbridge_server rosbridge_websocket.launch</tt></li>
74+
<li><tt>refresh this page</tt></li>
75+
<li><tt>rosrun actionlib_tutorials fibonacci_client</tt></li>
76+
</ol>
77+
</body>
7578
</html>

‎examples/index.html‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
<body>
2+
<ul>
3+
<li>
4+
<a href="./action_client.html">ROS 1 Action Client</a>
5+
</li>
6+
<li>
7+
<a href="./action_server.html">ROS 1 Action Server</a>
8+
</li>
9+
<li>
10+
<a href="./math.html">Math Examples</a>
11+
</li>
12+
<li>
13+
<a href="./ros2_action_client.html">ROS 2 Action Client</a>
14+
</li>
15+
<li>
16+
<a href="./ros2_action_server.html">ROS 2 Action Server</a>
17+
</li>
18+
<li>
19+
<a href="./ros2_simple.html">Full ROS 2 Example</a>
20+
</li>
21+
<li>
22+
<a href="./simple.html">Full ROS 1 Example</a>
23+
</li>
24+
<li>
25+
<a href="./tf.html">ROS 1 TF Example</a>
26+
</li>
27+
<li>
28+
<a href="./urdf.html">URDF Example</a>
29+
</li>
30+
</ul>
31+
</body>

0 commit comments

Comments
 (0)