| Note: This tutorial assumes that you have completed the previous tutorials: ROS tutorials. |
 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. |
Writing a simple 3D visualization for rosjs
Description: This tutorial covers using rosjs to write a simple 3D visualization in the browser.Tutorial Level: BEGINNER
Next Tutorial: Write a simple action client using rosjs
Contents
The following tutorial shows how to create and use a visualization manager to create visualizations of ROS topics in Javascript.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>rosjs Visualization Tutorial</title>
<!-- REQUIRED scripts for ROS -->
<script type="text/javascript" src="../wviz/js/jquery/jquery-latest.js"></script>
<script type="text/javascript" src="../wviz/js/spidergl/spidergl.js"></script>
<script type="text/javascript" src="../wviz/js/ros/ros.js"></script>
<script type="text/javascript" src="../wviz/js/ros/common.js"></script>
<script type="text/javascript" src="../wviz/js/ros/visualization/visualization.js"></script>
<script>
function start()
{
//create a visualization manager
var vm = new ros.visualization.VisualizationManager("WEBGL_CANVAS");
// create a rosjs node handle
var node = new ros.NodeHandle("ws://rtc.pr2-remotelab.com:9090");
// set handler for onClose event
node.setOnClose(function(e) {
ros_debug("Disconnected or Can't Connect.");
});
// set handler for onError event
node.setOnError(function(e) {
ros_debug("Unknown error!");
});
//set handler for onOpen event
node.setOnOpen(function(e) {
// successfully connected to rosjs
ros_debug("Connected to " + node.url + ".");
// create a transform listener that subscribes to /tf messages
var tf = new ros.tf.TransformListener(node, "/tf");
// initialize visualization manager
vm.initialize(node, tf);
// add visualization nodes here...
vm.addGrid("/odom_combined",10.0,1.0);
});
window.onresize = function() {
var c = document.getElementById('WEBGL_CANVAS');
c.width = window.innerWidth;
c.height = window.innerHeight;
}
window.onresize();
}
</script>
</head>
<body onload="start()" style="margin:0;padding:0;background-white;overflow:hidden">
<canvas id="WEBGL_CANVAS" width="1000" height="600"></canvas>
</body>
</html>