(!) Please ask about problems and questions regarding this tutorial on answers.ros.org. Don't forget to include in your question the link to this page, the versions of your OS & ROS, and also add appropriate tags.

Math utilities provided by roslibjs

Description: This tutorial shows you how to use the math utilities that are part of roslibjs.

Keywords: roslibjs, web interface, Robot Web Tools

Tutorial Level: BEGINNER

Getting Started

This tutorial involves writing a single HTML file, which will contain the HTML and JavaScript needed to communicate with perform math functions with roslibjs. To begin, create a file math.html with your favorite text editor.

The complete code for this tutorial can be found in the roslibjs repo.

The HTML Code

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4 <meta charset="utf-8" />
   5 <script type="text/javascript" src="http://cdn.robotwebtools.org/EventEmitter2/current/eventemitter2.js"></script>
   6 <script type="text/javascript" src="http://cdn.robotwebtools.org/roslibjs/current/roslib.js"></script>
   7 
   8 <script type="text/javascript" type="text/javascript">
   9   var v1 = new ROSLIB.Vector3({
  10     x : 1,
  11     y : 2,
  12     z : 3
  13   });
  14   var v2 = v1.clone();
  15   v1.add(v2);
  16   console.log(v1);
  17 
  18   var q1 = new ROSLIB.Quaternion({
  19     x : 0.1,
  20     y : 0.2,
  21     z : 0.3,
  22     w : 0.4
  23   });
  24   var q2 = q1.clone();
  25   q1.multiply(q2);
  26   q1.invert();
  27   console.log(q1);
  28 
  29   var p = new ROSLIB.Pose({
  30     position : v1,
  31     orientation : q1
  32   });
  33   console.log(p);
  34 
  35   var tf = new ROSLIB.Transform({
  36     translation : v2,
  37     rotation : q2
  38   });
  39   p.applyTransform(tf);
  40   console.log(p);
  41 </script>
  42 </head>
  43 
  44 <body>
  45   <h1>Math Example with Roslibjs</h1>
  46   <p>Check the JavaScript console for the output.</p>
  47 </body>
  48 </html>

Code Explanation

Now that we have an example, let's look at each piece.

   9   var v1 = new ROSLIB.Vector3({
  10     x : 1,
  11     y : 2,
  12     z : 3
  13   });

A 3 dimensional vector object Vector3 is provided with roslibjs, with properties for x, y, and z and various vector functions.

  14   var v2 = v1.clone();
  15   v1.add(v2);
  16   console.log(v1);

ROSLIB.Vector3 contains functions for cloning vectors, adding and subtracting vectors and more. Check out the ROSLIB.Vector3 docs for a complete of functions and their usage.

  18   var q1 = new ROSLIB.Quaternion({
  19     x : 0.1,
  20     y : 0.2,
  21     z : 0.3,
  22     w : 0.4
  23   });

Quaternions are also provided via the ROSLIB.Quaternion object, including properties for x, y, z, and w.

  25   q1.multiply(q2);
  26   q1.invert();
  27   console.log(q1);

ROSLIB.Quaternion has functions for multiplying, inverting, conjugating quaternions and more. Check out the ROSLIB.Quaternion docs for a complete of functions and their usage.

  29   var p = new ROSLIB.Pose({
  30     position : v1,
  31     orientation : q1
  32   });

ROSLIB.Pose, similar to ROS' pose message, contains the pose information using a ROSLIB.Vector3 and ROSLIB.Quaternion. The ROSLIB.Pose docs describes its usage and functions like applyTransform shown below.

  35   var tf = new ROSLIB.Transform({
  36     translation : v2,
  37     rotation : q2
  38   });
  39   p.applyTransform(tf);

ROSLIB.Transform provides transforms in 3-space. The last line applies the transform to the pose above.

Running the Example

Running this example doesn't require ROS as all the math operations are happening in the browser using JavaScript. You can open up the HTML file directly in the browser without running a web server. The data outputted happens in the Web Console.

Wiki: roslibjs/Tutorials/MathFunctions (last edited 2019-10-10 11:26:32 by ArvidNorlander)