Webviz: ROS data visualization in the browser

Hi everyone,

I work on the visualization tools team at Cruise, a self-driving car company in San Francisco. For over a year we’ve been building an internal web-based tool, called Webviz, for robotics data visualization. We recently split apart our internal code to release an open source version of Webviz, which currently includes panels functionally similar to RViz, rqt_runtime_monitor, rqt_plot, rqt_image_view, rostopic echo, and rqt_console. We’re excited to share this with the ROS community and we’d love for you to try it out:

Our hope is that folks in the community can use Webviz to make immediate improvements to their development & debugging workflows. Some key features:

  • You can drag .bag files directly into Webviz in your browser; no installation required. All the data is processed and visualized locally, not sent to any server. (Note: we’re mostly supporting the latest version of Google Chrome right now — use other browsers at your own risk :slight_smile:)

  • Multiple tools and views on the same data can be arranged in one window. The configuration can be exported as JSON and shared with other users.

  • Supports visualizing markers, TF frames, occupancy grids, point clouds, camera images (with ImageMarkers), console logs, and raw message data.

Webviz is under active internal development, and we’re regularly pushing updates out to the open source repo. We’d also welcome feedback and pull requests from the community on GitHub. There’s a lot of potential for future improvements, including:

  • Connecting to a live ROS master via WebSocket (we have an internal implementation of this, but the server is heavily dependent on our build system — we’d like to explore compatibility with rosbridge_suite, whose protocol is quite similar to ours, aside from some special behavior related to datatypes).

  • Pre-loading all data from a bag file into charts and other visualizations as fast as possible, rather than playing through them in realtime.

  • Performance and usability improvements throughout the application.

If you want to read more about Webviz and our motivations for building it, check out our recent blog post:

Looking forward to your feedback!
:turtle:

15 Likes

Thank you very much, that will be very useful. Already sent it to a student who is working with ROS experiment data on a non-ROS system but needs to inspect the bag file sometimes.

Copy-pasting the layout is a brilliant touch. If it was possible to embed it into the link, or worked without user input, that would be even better. I found the empty start screen with somewhat unintuitive. Will post it on the Github.

The pre-loading function sounds extremely attractive. We often record bags with a <1fps camera to be able to flip through the progress in rqt. Would be great if it worked in this as well.

Once again, great contribution. Thanks a lot.

1 Like

How add panel view LaserScan?

The 3D panel supports visualizing LaserScans as points in space. The topic should be present in the top-left menu. Here’s an example using data from the MIT Stata center:

For future questions about how to use Webviz, please leave them as GitHub Issues where it will be easier for us to track them!

Great job on this tool. Do you have a sense when and if the feature to connect to a live ROS master via WebSocket would be available?

1 Like

We don’t have an exact timeline on this, but great to know you’re interested. If you’d like to follow along or add your thoughts, there’s some discussion of the technical requirements here:

Are there any plans to get this to work with rosbag2 (ROS2 version of rosbag)? I’m not sure what the current state of the ROS 2 implementation of rosbag is and if there are many differences with the ROS 1 version. I was just wondering if you had any remarks on possible ROS2 support.

I haven’t been closely following the ROS2 efforts either, but rosbag2 support would certainly be on the table if the format/spec were stable enough; that said we don’t have any concrete plans to work on this. We’ll see if it becomes a common user request.

Webviz uses rosbag.js for reading bags, so likely most of the changes would need to go into the rosbag.js repo to add compatibility for new bag formats. (Or if it’s sufficiently different, maybe a separate package.)

This will be very helpful with the general consumer of our OpenR2 robotics project. Thank you very much!

1 Like

Does 3D panel support plotting /tf natively ? Seems like it doesn’t recognize the topic unless you have a marker topic in the bag file

Do you mean plotting the TF tree like this: http://wiki.ros.org/rviz/DisplayTypes/TF

We did implement this, but due to a minor oversight it’s not enabled in the open source version. Hopefully a simple fix though; I’ll ask the team if we can do it soon.

Correct - I mean how you can visualize a robot position/orientation like axes in tf.

Currently without the fix how would you visualize the robot position ?

Thanks,
-Phu

Yes, other than this tree visualization, you will need some pose or marker topic.

We have a new feature called Node Playground (in active development) which you can try using to produce a pose or marker topic by writing code directly in webviz: https://github.com/cruise-automation/webviz/blob/master/packages/webviz-core/src/panels/NodePlayground/index.help.md

Thanks. Looks like you guys added tf in the demo ? :smiley:

For costmap do you need it to have a certain topic name (/map) ?

My bag files have a different topic name for /map and /map/keepout and it doesn’t seem to render these topics.

Thanks,
-Phu

Yes, TF has now been added back to webviz! You can enable it alongside topics in the 3D panel:
image

We support any message with the OccupancyGrid datatype. For cost maps, are you talking about cost_map_msgs/CostMap? That hasn’t been implemented but support could probably be added by anyone who’s willing to make a PR. Most of the currently supported datatypes are listed in the code here.

Update: Webviz now supports connecting to live ROS master via WebSocket! See this post for more details.

3 Likes