Introduction to Robot Web Tools

Robot Web Tools Bringing robots to your favorite browser

Previously ros.js 1.0 rosbridge 1.0 wviz

Previously

We learned A Lot

Need more: Modular Robust Community Web Standard

New Tools rosbridge 2.0 roslibjs ros2djs ros3djs

Alright, I’m intrigued. How does it work?

Let’s do some H T M L

<html> <head>  </head> <body> <h1>ROSCon
2013!</h1> </body> </html> HTML

python -m SimpleHTTPServer Server

We need a server to ROS

sudo apt-get install ros-groovy-rosbridge-suite rosbridge roslaunch rosbridge_server rosbridge_websocket.launch

...and a connection to the robot

<head> <script src=”roslib.js”> </head> <body> ... <div id=”pose”></div> </body> HTML

var ros = new ROSLIB.Ros(); ros.connect( ‘ws://localhost:9090’ ); roslibjs

Now, let’s get some robot data

var poseTopic = new ROSLIB.Topic({ ros : ros, name :
'/robot_pose', messageType : 'geometry_msgs/Pose' }); roslibjs

poseTopic.subscribe( function(pose) { console.log(pose); } ); roslibjs

What’s a pose without a map?

<head> <script src=”roslib.js”> <script src=”ros2d.js”> </head> <body> ... <div id="map"></div>
</body> HTML

var viewer2D = new ROS2D.Viewer({ divID : 'map', width :
300, height : 300 }); ros2djs

gridClient = new ROS2D.OccupancyGridClient({ ros : ros, rootObject : viewer2D.scene
}); ros2djs

We have a pose We have a map Let’s combine

var robotMarker = new ROS2D.NavigationArrow({ size : 12, strokeSize :
1, pulse : true }); ros2djs

poseTopic.subscribe( function(pose) { robotMarker.x = pose.position.x; robotMarker.y = -pose.position.y; });
ros2djs

gridClient.rootObject .addChild(robotMarker); ros2djs

You know what’s cooler than 2D? 3D

<head> <script src=”roslib.js”> <script src=”ros2d.js”> <script src=”ros3d.js”> </head> <body> ...
<div id="model"></div> </body> HTML

var viewer3D = new ROS3D.Viewer({ divID : 'threed-map', width :
600, height : 300, }); ros3djs

var tfClient = new ROSLIB.TFClient({ ros : ros, angularThres :
0.01, transThres : 0.01, rate : 10.0 }); ros3djs

var urdfClient = new ROS3D.UrdfClient({ ros : ros, tfClient :
tfClient, path : resourceUrl, rootObject : viewer3D.scene }); ros3djs

var grid3D = new ROS3D.OccupancyGridClient({ ros : ros, tfClient :
tfClient, rootObject : viewer3D.scene }); ros3djs

var mesh = new ROS3D.MeshResource({ path : resourceUrl, resource :
'willow.dae' }), ros3djs

var building = new ROS3D.SceneNode({ tfClient : tfClient, frameID :
'/map', object : mesh, pose : pose }); ros3djs

viewer3D.addObject(building); ros3djs

Widgets

The Future

Special Thanks Russell Toris Jihoon Lee David Gossow

RobotWebTools.org Brandon Alexander https://github.com/baalexander @bacealexander

More Decks by Brandon Alexander