janga1997/Basic roslibjs Tutorial

## Basic roslibjs Tutorial

**Sending Messages via roslibjs:**

Sending ros messages to roscore via a webpage is pretty straightforward with roslibjs, along with eventemitter.js.
Roslibjs is a javascript library which converts ros messages to JSON objects, and vice-versa.


----------


This is how the HTML file is supposed to look like:
```
    <!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 type="text/javascript" type="text/javascript">
      // Connecting to ROS
      // -----------------

      var ros = new ROSLIB.Ros({
        url : 'ws://localhost:9090'
      });

      ros.on('connection', function() {
        console.log('Connected to websocket server.');
      });

      ros.on('error', function(error) {
        console.log('Error connecting to websocket server: ', error);
      });

      ros.on('close', function() {
        console.log('Connection to websocket server closed.');
      });

      // Publishing a Topic
      // ------------------

      var cmdVel = new ROSLIB.Topic({
        ros : ros,
        name : '/cmd_vel',
        messageType : 'geometry_msgs/Twist'
      });

      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
        }
      });
      cmdVel.publish(twist);

      // Subscribing to a Topic
      // ----------------------

      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();
      });

      // Calling a service
      // -----------------

      var addTwoIntsClient = new ROSLIB.Service({
        ros : ros,
        name : '/add_two_ints',
        serviceType : 'rospy_tutorials/AddTwoInts'
      });

      var request = new ROSLIB.ServiceRequest({
        a : 1,
        b : 2
      });

      addTwoIntsClient.callService(request, function(result) {
        console.log('Result for service call on '
          + addTwoIntsClient.name
          + ': '
          + result.sum);
      });

      // Getting and setting a param value
      // ---------------------------------

      ros.getParams(function(params) {
        console.log(params);
      });

      var maxVelX = new ROSLIB.Param({
        ros : ros,
        name : 'max_vel_y'
      });

      maxVelX.set(0.8);
      maxVelX.get(function(value) {
        console.log('MAX VAL: ' + value);
      });
    </script>
    </head>

    <body>
      <h1>Simple roslib Example</h1>
      <p>Check your Web Console for output.</p>
    </body>
    </html>

```
----------


**Breaking It Down**


----------


    <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>

This step involves including the required libraries into the HTML document. If you want to run this offline,
type
`wget http://cdn.robotwebtools.org/EventEmitter2/current/eventemitter2.min.js` into your terminal. And do the same for roslibjs.

This will save the libraries with the names eventemitter2.min.js and roslib.min.js in the same directory.


----------
     var ros = new ROSLIB.Ros({
            url : 'ws://localhost:9090'
          });

This step creates the Ros node object to communicate with the rosbridge server.
If the **client** and the **server** are on different devices, be sure to replace **localhost** with the IP of the device on which rosbridge server is launched, and make sure that they both the devices are connected to the **same network**.

9090 is the default port on which rosbridge server is launched.


----------

    var cmdVel = new ROSLIB.Topic({
            ros : ros,
            name : '/cmd_vel',
            messageType : 'geometry_msgs/Twist'
          });

ROSLIB.Topic corresponds to a ROS Topic. We pass in the **ros** object we created earlier.
Now, a couple of things to keep in mind here.

 - The ROS topic mentioned in the name parameter must be one which takes input. This is because not all ROS Topics require input.
 - To find out the message type of any ROS Topic, open up a terminal, and type `rostopic type /topicname. `
 In this case, `rostopic type /cmd_vel`.

----------


    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
            }
          });

This step involves creating a ROSLIB.Message to publish to the ROS Topic.

What we have to do is to make an object with the exact same tree structure as that of the corresponding ROS message.
To know that, open up a terminal, and type

    rosmsg show geometry_msgs/Twist

   This produces the output:


    geometry_msgs/Vector3 linear
      float64 x
      float64 y
      float64 z
    geometry_msgs/Vector3 angular
      float64 x
      float64 y
      float64 z

float64 indicates the data type of each variable. So, corresponding to the tree structure of the message type, construct the ROSLIB.Message object.


----------

    cmdVel.publish(twist);

This step involves with publishing the message to the ROS topic.

To check whether your web page is actually publishing to the ROS topic, open up a terminal before loading the web page in the browser, and type

    rostopic echo /cmd_vel
This prints any value being published to the topic `/cmd_vel` in the terminal. Then load up the web page, and sure enough you can see that it is being published.

	Sending Messages via roslibjs:

	Sending ros messages to roscore via a webpage is pretty straightforward with roslibjs, along with eventemitter.js.
	Roslibjs is a javascript library which converts ros messages to JSON objects, and vice-versa.


	----------


	This is how the HTML file is supposed to look like:
	```
	<!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 type="text/javascript" type="text/javascript">
	// Connecting to ROS
	// -----------------

	var ros = new ROSLIB.Ros({
	url : 'ws://localhost:9090'
	});

	ros.on('connection', function() {
	console.log('Connected to websocket server.');
	});

	ros.on('error', function(error) {
	console.log('Error connecting to websocket server: ', error);
	});

	ros.on('close', function() {
	console.log('Connection to websocket server closed.');
	});

	// Publishing a Topic
	// ------------------

	var cmdVel = new ROSLIB.Topic({
	ros : ros,
	name : '/cmd_vel',
	messageType : 'geometry_msgs/Twist'
	});

	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
	}
	});
	cmdVel.publish(twist);

	// Subscribing to a Topic
	// ----------------------

	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();
	});

	// Calling a service
	// -----------------

	var addTwoIntsClient = new ROSLIB.Service({
	ros : ros,
	name : '/add_two_ints',
	serviceType : 'rospy_tutorials/AddTwoInts'
	});

	var request = new ROSLIB.ServiceRequest({
	a : 1,
	b : 2
	});

	addTwoIntsClient.callService(request, function(result) {
	console.log('Result for service call on '
	+ addTwoIntsClient.name
	+ ': '
	+ result.sum);
	});

	// Getting and setting a param value
	// ---------------------------------

	ros.getParams(function(params) {
	console.log(params);
	});

	var maxVelX = new ROSLIB.Param({
	ros : ros,
	name : 'max_vel_y'
	});

	maxVelX.set(0.8);
	maxVelX.get(function(value) {
	console.log('MAX VAL: ' + value);
	});
	</script>
	</head>

	<body>
	<h1>Simple roslib Example</h1>
	<p>Check your Web Console for output.</p>
	</body>
	</html>

	```
	----------


	Breaking It Down


	----------


	<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>

	This step involves including the required libraries into the HTML document. If you want to run this offline,
	type
	`wget http://cdn.robotwebtools.org/EventEmitter2/current/eventemitter2.min.js` into your terminal. And do the same for roslibjs.

	This will save the libraries with the names eventemitter2.min.js and roslib.min.js in the same directory.


	----------
	var ros = new ROSLIB.Ros({
	url : 'ws://localhost:9090'
	});

	This step creates the Ros node object to communicate with the rosbridge server.
	If the client and the server are on different devices, be sure to replace localhost with the IP of the device on which rosbridge server is launched, and make sure that they both the devices are connected to the same network.

	9090 is the default port on which rosbridge server is launched.


	----------

	var cmdVel = new ROSLIB.Topic({
	ros : ros,
	name : '/cmd_vel',
	messageType : 'geometry_msgs/Twist'
	});

	ROSLIB.Topic corresponds to a ROS Topic. We pass in the ros object we created earlier.
	Now, a couple of things to keep in mind here.

	- The ROS topic mentioned in the name parameter must be one which takes input. This is because not all ROS Topics require input.
	- To find out the message type of any ROS Topic, open up a terminal, and type `rostopic type /topicname. `
	In this case, `rostopic type /cmd_vel`.

	----------


	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
	}
	});

	This step involves creating a ROSLIB.Message to publish to the ROS Topic.

	What we have to do is to make an object with the exact same tree structure as that of the corresponding ROS message.
	To know that, open up a terminal, and type

	rosmsg show geometry_msgs/Twist

	This produces the output:


	geometry_msgs/Vector3 linear
	float64 x
	float64 y
	float64 z
	geometry_msgs/Vector3 angular
	float64 x
	float64 y
	float64 z

	float64 indicates the data type of each variable. So, corresponding to the tree structure of the message type, construct the ROSLIB.Message object.


	----------

	cmdVel.publish(twist);

	This step involves with publishing the message to the ROS topic.

	To check whether your web page is actually publishing to the ROS topic, open up a terminal before loading the web page in the browser, and type

	rostopic echo /cmd_vel
	This prints any value being published to the topic `/cmd_vel` in the terminal. Then load up the web page, and sure enough you can see that it is being published.