82 lines
2.7 KiB
HTML
82 lines
2.7 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<script type="text/javascript" src="http://cdn.robotwebtools.org/EventEmitter2/current/eventemitter2.min.js"></script>
|
|
<script type="text/javascript" src="http://cdn.robotwebtools.org/roslibjs/current/roslib.min.js"></script>
|
|
|
|
<script src="http://cdn.robotwebtools.org/roslibjs/current/roslib.js"></script>
|
|
<script type="text/javascript" type="text/javascript">
|
|
|
|
var ros = new ROSLIB.Ros();
|
|
// If there is an error on the backend, an 'error' emit will be emitted.
|
|
ros.on('error', function(error) {
|
|
document.getElementById('connecting').style.display = 'none';
|
|
document.getElementById('connected').style.display = 'none';
|
|
document.getElementById('closed').style.display = 'none';
|
|
document.getElementById('error').style.display = 'inline';
|
|
console.log(error);
|
|
});
|
|
// Find out exactly when we made a connection.
|
|
ros.on('connection', function() {
|
|
console.log('Connection made!');
|
|
// document.getElementById('connecting').style.display = 'none';
|
|
// document.getElementById('error').style.display = 'none';
|
|
// document.getElementById('closed').style.display = 'none';
|
|
// document.getElementById('connected').style.display = 'inline';
|
|
});
|
|
ros.on('close', function() {
|
|
console.log('Connection closed.');
|
|
document.getElementById('connecting').style.display = 'none';
|
|
document.getElementById('connected').style.display = 'none';
|
|
document.getElementById('closed').style.display = 'inline';
|
|
});
|
|
// Create a connection to the rosbridge WebSocket server.
|
|
ros.connect('ws://localhost:9090');
|
|
// Publishing a Topic
|
|
// ------------------
|
|
// First, we create a Topic object with details of the topic's name and message type.
|
|
var cmdVel = new ROSLIB.Topic({
|
|
ros : ros,
|
|
name : '/cmd_vel',
|
|
messageType : 'geometry_msgs/Twist'
|
|
});
|
|
// Then we create the payload to be published. The object we pass in to ros.Message matches the
|
|
// fields defined in the geometry_msgs/Twist.msg definition.
|
|
var twist = new ROSLIB.Message({
|
|
linear : {
|
|
x : 0.1,
|
|
y : 0.2,
|
|
z : 0.3
|
|
},
|
|
angular : {
|
|
x : -0.1,
|
|
y : -0.2,
|
|
z : -0.3
|
|
}
|
|
});
|
|
// And finally, publish.
|
|
cmdVel.publish(twist);
|
|
|
|
var listener = new ROSLIB.Topic({
|
|
ros : ros,
|
|
name : '/listener',
|
|
messageType : 'std_msgs/String'
|
|
});
|
|
|
|
listener.subscribe(function(message) {
|
|
console.log('Received message on ' + listener.name + ': ' + message.data);
|
|
listener.unsubscribe();
|
|
});
|
|
|
|
|
|
</script>
|
|
</head>
|
|
<body>
|
|
<h1>Simple roslib Example</h1>
|
|
<p>Check your Web Console for output.</p>
|
|
<button onclick="cmdVel.publish(twist)">Send Twist Command</button>
|
|
</body>
|
|
|
|
</html>
|