Note: This tutorial assumes that you have completed the previous tutorials: ROS tutorials.
(!) Please ask about problems and questions regarding this tutorial on 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


The following tutorial shows how to create and use a visualization manager to create visualizations of ROS topics in Javascript.

<!DOCTYPE html>
<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>


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://");

  // 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, "/tf");
    // initialize visualization manager
    vm.initialize(node, tf);
    // add visualization nodes here...

  window.onresize = function() {
    var c = document.getElementById('WEBGL_CANVAS');
    c.width  = window.innerWidth;
    c.height = window.innerHeight;

<body onload="start()" style="margin:0;padding:0;background-white;overflow:hidden">
<canvas id="WEBGL_CANVAS" width="1000" height="600"></canvas>

Wiki: rosjs_tutorials/Tutorials/Visualization (last edited 2011-09-15 21:33:30 by SarahOsentoski)