[Documentation] [TitleIndex] [WordIndex

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


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://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...

  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>

2020-03-28 13:06