 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.
A 3 dimensional vector object Vector3 is provided with roslibjs, with properties for x, y, and z and various vector functions.
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.
Quaternions are also provided via the ROSLIB.Quaternion object, including properties for x, y, z, and w.
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.
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.
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.
