We recently announced the Foxglove WebSocket protocol, which enables Foxglove Studio to ingest and visualize robotics data in custom formats, not just ROS data from live robots or .bag files. Now even more teams can use Studio to enhance their robotics development workflows.

Currently, Studio supports messages encoded as JSON and Protobuf. In this tutorial, we'll see how to integrate Protobuf data into Foxglove Studio by writing a simple Foxglove WebSocket server with Python.

What is Protobuf?

Protocol buffers (Protobuf) are a way to serialize data into a common format that can be interpreted by any program, regardless of language or platform.

Protobuf defines a syntax for human-readable .proto files, which describe the structure and format of the custom data in the form of messages. It also defines a wire format, which specifies exactly how a Protobuf message should be serialized to and deserialized from a compact binary representation. The Protobuf compiler (protoc) can read .proto files and generate code to convert to and from the wire format in many different languages.

Writing a simple .proto message

The rest of this tutorial will demonstrate how Protobuf can be used with the Foxglove WebSocket connection to load custom data into Foxglove Studio.

Before continuing, make sure you've installed protoc on your computer — either from GitHub or via a package manager (e.g. brew install protobuf).

To get started, let's create a file called ExampleMsg.proto and define a simple message that contains a string and a number:



Next, run the following command to generate a Python module for working with ExampleMsg objects in a file called ExampleMsg\_pb2.py:



This module can be used to serialize an ExampleMsg object into a byte string in the Protobuf wire format. Our WebSocket server will eventually send this raw data to Studio.



Since Foxglove Studio is available as a pre-built web app and desktop app, it doesn't have any inherent knowledge of your custom data types — so in order to decode the Protobuf data, Studio needs some information about the original .proto files. Luckily, Protobuf is distributed with a self-describing descriptor.proto which defines FileDescriptorSet, a Protobuf message type that can represent parsed .proto files.

Run the following command to compile ExampleMsg.proto into a binary FileDescriptorSet. This will produce a file called ExampleMsg.bin.



This file is not meant to be human-readable, but by inspecting it with hexdump, we can see that it contains the "ExampleMsg" message name, as well as the "msg" and "count" field names.



Studio will use this information to decode incoming data from the Protobuf wire format.

Now we have everything we need to put together a simple WebSocket server!

Serving messages with a Foxglove WebSocket server

To build a server that can communicate with Foxglove Studio, we need to install the foxglove-websocket and protobuf Python packages:



Let's create a file called my\_server.py. In it, we'll import the Python module and schema data we generated with protoc. The schema needs to be base64-encoded so it can be sent on the WebSocket as a string. We'll do this once at the beginning of the program.



Below that, we'll create a main() function that will start up a FoxgloveServer, which hosts a WebSocket server that Foxglove Studio can connect to.

If you're not familiar with the async and await syntax used in this tutorial, visit the asyncio documentation for an introduction.



Now that the server is set up, we'll add a channel to inform Studio about our stream of ExampleMsg data. To indicate that this channel's messages are encoded with Protobuf, we provide the following fields:



The schemaName must be set to "ExampleMsg" — if the FileDescriptorSet contained multiple message definitions, this would tell Studio which one to use.

Let's start publishing messages on the channel so we can view them in Studio. We'll make a loop that publishes a message every 0.2 seconds:



As the last step, we need to invoke the main() function when the program is run. Because we'd like our server to exit gracefully when control+C is pressed, we'll use the run\_cancellable helper from the foxglove\_websocket package.



Now our server is ready to publish messages to clients!

Viewing message data inside Foxglove Studio

Let's test that Foxglove Studio can connect to our server and receive messages. First, run the server:



Then, open Studio and initiate a Foxglove WebSocket connection to ws\://localhost:8765. The data published by the server should now be visible under the example\_msg topic! You can visualize the data using a Raw Messages or Plot panel. The Data Source Info panel shows metadata about the data source, including the example\_msg topic with ExampleMsg data.

Foxglove Studio displaying message data from the custom WebSocket server

Hopefully this tutorial has given you a helpful starting point for bringing in your own Protobuf data to Foxglove Studio. The full example code for this tutorial is available in the foxglove/ws-protocol repo, and you can also run the complete Protobuf example server directly from the installed package, using python -m foxglove\_websocket.examples.protobuf\_server.

You'll need to make changes to adapt the ideas presented in this tutorial to your own particular development workflow, but feel free to get in touch with us via Slack, or file issues on GitHub (studio or ws-protocol), if you have any questions.

Using schemas with built-in Studio visualization support

Certain Foxglove Studio panels expect specific message schemas in order to work properly. For instance, while the Raw Messages and Plot panels are very flexible and work with many kinds of data, the Image panel expects image messages to contain header, format, and data fields. Likewise, the 3D panel only knows how to render markers, point clouds, and other specific types. Currently, most of the types handled by Studio's built-in panels mirror the standard ROS data types, such as sensor\_msgs/CompressedImage — we've listed the ROS types supported by each panel in our panel documentation.

Even if you're not using ROS, matching the structure of the standard ROS message schemas will allow you to take full advantage of Foxglove Studio's features. To help get you started, we've translated the common ROS message definitions to .proto files. While we expect to iterate on our supported message schemas, Studio will continue to support these ROS-based Protobuf schemas alongside the original ROS messages.

We can't wait to see how you'll use the Foxglove WebSocket protocol with your custom data! Join our community to ask any questions or show off what you've built.


When roboticists see Foxglove Studio, they may be reminded of another popular data visualization tool: RViz. Many of our users used RViz to debug their data before switching to Foxglove Studio, and many newcomers to Foxglove are unclear about these tools' unique strengths and weaknesses.

So let’s get into it – why should you use Foxglove Studio, when you may already know how to visualize your robotics data with RViz?

Similarities

Let's start with what these tools have in common – namely, their goal to make robotics data debugging intuitive and accessible.

Open source

Both RViz and Foxglove Studio are open source tools that are available to the public at no cost. To use RViz, you must first have ROS 1 or ROS 2 installed and set up on your computer. To use Foxglove Studio, you can navigate to studio.foxglove.dev in a browser, or download the desktop app for Windows, Linux, or macOS.

As for ongoing development, RViz is an actively maintained project, with frequent contributions from maintainers and open source users alike. Foxglove Studio is also a community project – we collaborate closely with everyone from professional robotics engineers and hobbyists in the open source community to our colleagues at Open Robotics. We discuss our development plans across GitHub, Slack, and Twitter, and post community announcements to our blog and newsletter.

3D scene visualization

Iterating on a robot is difficult without understanding what it is currently seeing and thinking in 3D space. While debugging "two-dimensional data" may be easy enough with plots and logs, debugging 3D data purely by a stream of numeric outputs is nearly impossible. Instead of visualizing data like position coordinates and orientation in your mind’s eye, tools like RViz and Foxglove Studio provide rich visualization environments to help you see the world in 3D like your robot does.

Foxglove Studio's 3D panel

Both RViz and Foxglove Studio can display sensor data (camera images, laser scans, point clouds), state information (tracked objects, planned trajectories, system health), and visualization markers to delineate information of interest (labels, bounding boxes, 3D models). Combined in one rich 3D scene, they paint a picture of what a robot perceives in its environment, how it predicts its environment to change, and how it plans to execute tasks within that environment. All this information allows roboticists to determine how effective their robots currently are, and how they can be improved.

Configurable

Both RViz and Foxglove Studio allow you to determine exactly how you want your visualizations to look. You can toggle the appearance of various markers, or adjust their various attributes like size, shape, and color.

Foxglove Studio's 3D panel settings
Foxglove Studio's 3D panel provides visualization settings per displayed topic.

Both apps also support user-contributed extensions. In RViz, you write plugins in C++ and compile them before installing. In Foxglove Studio, you write custom panel extensions in HTML & JavaScript to install in your local instance of Foxglove Studio. For both apps, this extensibility empowers robotics companies to meet their unique requirements with custom-built tools that share a common base platform.

Differences

While their goals and development philosophies may be similar, Foxglove Studio and RViz are built to solve different problems.

Scope of visualization

Out of the box, RViz was primarily designed to help you see your robot’s environment via camera images and 3D markers. The ROS ecosystem offers other visualization tools like rqt\_multiplot, rqt\_runtime\_monitor, and rqt\_graph to solve other problems like logging outputs or plotting data in charts, but RViz focuses on the 3D view.

RViz with image and 3D view
RViz displays your robot's camera images and an annotated 3D scene.

Foxglove Studio, on the other hand, offers many different visualization tools, or panels, that you can arrange into a layout of your choice. These panels are conveniently integrated into one environment, so you only have to download one app, instead of searching for, installing, and learning how to use multiple tools.

In fact, Studio has two panels – the Image and 3D panel – that essentially encompass the scope of what RViz helps users visualize. The Image panel, as its name suggests, displays images recorded by your robot’s camera sensors, while the 3D panel displays all available sensor data and visualization markers in the context of an interactive 3D scene. Though the 3D panel still has some work to do to support all of RViz's display types – for example, it does not currently display interactive markers – all currently supported markers are listed in the docs.

Foxglove Studio with Image, 3D, and other panels
Foxglove Studio also displays images and 3D scenes, alongside many other visualizations not included in RViz.

Foxglove Studio does the legwork for you, collecting all the tools you need to debug your robotics data into one integrated workflow. Many of these tools have ROS equivalents – Studio’s Plot panel, for example, mirrors some of the functionality in ROS’s rqt\_plot. As an added bonus, Studio can preserve the layout of your panels, allowing you to switch between pre-designed workspaces with the click of a button, instead of manually rearranging different tools on your desktop every time you need them.

File playback

RViz does not have the built-in ability to play back .bag files. To view your ROS data in RViz, you will need to use a separate CLI tool likerosbag (ROS 1) or ros2 bag (ROS 2) to play back the desired file.

Foxglove Studio, on the other hand, makes it exceptionally easy to load .bag files for playback. You can specify the file to load (ROS 1 or 2, local or remote) from the app’s Data sources tab, or simply drag and drop a local .bag file into the app to start playing. Studio also offers interactive playback controls to adjust playback time, view the current timestamp in different formats, and scrub back and forth in time.

Cross-platform

As a part of the ROS ecosystem, RViz requires ROS to be installed and set up properly. If your machine doesn’t fall into the category of the few Tier 1 platforms supported by ROS (Ubuntu and Windows 10), you will have to run your ROS environment inside a virtual machine, making it that much more difficult to connect to your robots and data.

Installing native ROS tools often requires hours of head-scratching and fine-tuning a very specific environment to get things working. Foxglove Studio minimizes the friction of adopting a new tool by being accessible in two simple ways – as a stand-alone web app and desktop app, without a slew of other dependencies. To quickly view your robot's data without downloading a desktop app, simply navigate to studio.foxglove.dev in a browser; to use the desktop app, download the appropriate installer for macOS, Windows, or Linux. It's important to note that some features – like native ROS connections and custom panel extensions – are only available on desktop.
No matter your setup, you can get started with Studio in minutes, if not seconds.

Collaboration

RViz is great for visualizing your robotics data as a solo roboticist, but it doesn’t offer many built-in features to facilitate sharing your work with a larger team. Apart from publishing plugins that other RViz users can download, you don’t have many options for sharing your RViz debugging setup with others.

Foxglove Studio offers custom extensions, which are somewhat analogous to RViz’s plugins – these are also available in an extension marketplace where users can browse what custom visualizations they may need. It’s easy to write visualizations or display data however you like.

But Studio takes it a step further with two team-specific features. Team layouts allow you to create, edit, and share your layouts with the rest of your robotics organization. Foxglove Data Platform allows any member of your team can upload, access, and explore team data in one central repository. Use Data Platform's convenient web interface to locate events of interest, then stream them directly into Studio for further analysis.

Foxglove Data Platform's Files page

Foxglove Data Platform provides one central data repository that allows you to upload, explore, and stream your robotics data.

Foxglove Data Platform currently supports ingesting ROS 1 and MCAP data, but we are just getting started – we’re excited to hear your thoughts on what you’d like to see in the future.

Stay in touch

Whether you work in agriculture, aerospace, or ocean exploration, we want Foxglove Studio to help your team unlock new workflows and iterate more quickly on exciting new technologies. While Studio doesn’t necessarily replace any single existing tool, we’d like to think that its integrated environment, cross-platform support, and rich collaboration features make it another powerful tool in your robotics development toolbelt.

We’re continuing to work with industry decision makers to shape the future of robotics development for everyone. and find other high-impact features to implement. Most immediately on the horizon, we want to expand our extensions API, support more data sources, and flesh out our Data Platform capabilities.

If you have any feedback you’d like to share, join our Slack community or find us on GitHub and Twitter. To get started, download the app and check out our docs to see how Studio can accelerate your team’s robotics development.


Developing and debugging robots today can be difficult, manual, and painfully time-consuming. At Foxglove, we’re on a mission to accelerate robotics development by bringing powerfully flexible, user-extensible, and fully integrated developer tools to the industry.

Today, we’re excited to announce that Foxglove has raised $3.7M in seed funding led by Amplify Partners. These funds will help our team make valuable progress towards our long-term mission – accelerating development for all the potentially world-changing robotics projects out in the wild today.

We think the future of robotics development tools is exciting uncharted territory – and our colleagues in the industry agree. We’re privileged to have had many experienced visionaries and operators participate in this round, including Kyle Vogt (CTO, Cruise), Dr. Pieter Abbeel (UC Berkeley), Adam Draper (Boost VC), Ryan Gembala (Pathbreaker), Karri Saarinen (CEO, Linear), Fred Ehrsam, Olaf Carlson-Wee, Linda Xie, and Daniel Romero.

“Developer productivity at Cruise is critical to enabling our progress towards a driverless future. I’m excited to see Foxglove help the next generation of robotics startups bring innovative products to market faster.”

\- Kyle Vogt, Co-founder & CTO, Cruise

Our journey so far

While leading Infrastructure at Cruise, I was struck by the lack of off-the-shelf tooling available for robotics and autonomous vehicle development – commercial or open source. We were forced to develop nearly all of our tooling in-house, including systems for visualization, data management, AI/ML, simulation, fleet management, and remote assistance. Building these systems took hundreds of person-years of engineering effort, and I realized that there was no reason modern robotics and autonomous vehicle companies should need to solve these same problems over and over again.

Roman and I founded Foxglove because we strongly believe the robotics industry will not reach its full potential until high quality off-the-shelf solutions are available - freeing up roboticists to focus on their complex domain-specific challenges.

Our first product, Foxglove Studio, is an open source visualization and debugging platform – an IDE for robotics. Foxglove Studio began as a fork of Webviz (an open source project many of our team worked on at Cruise). Since launching, we’ve added many new features including ROS 2 support, more visualization panels, performance improvements, and a new extension API.

“Foxglove has helped streamline our development efforts, providing an integrated visualization and debugging solution for our NVIDIA DRIVE autonomous vehicle platform. With Foxglove, we’re able to visualize vehicle data, design custom layouts from common workflows, and integrate with our data lake for faster browser-based debugging.”

\- Nicolas Koumchatzky, Senior Director of AI Infrastructure, NVIDIA

studio

What’s next

We’re continuing to invest in Foxglove Studio and expand our core open source offering with support for more robotics frameworks, additional visualizations, and a more powerful extension API. We also recently announced the Foxglove Data Platform – bringing us one step closer towards a seamless end-to-end robotics development experience.

Foxglove Data Platform is a solution to your organization’s robotics data management needs. We heard from leading robotics companies that efficiently managing their data was challenging, and that existing solutions were not useful for managing the large volumes of heterogeneous data typical in robotics – leading many companies to resort to passing external hard drives around the office as their primary means of collaboration. We’ve designed Foxglove Data Platform to be a one-stop shop for storing and exploring your data, allowing you to tag events of interest, instantly visualize that data in Foxglove Studio, and automatically delete data when it is no longer needed.

data platform

Follow our journey

This investment will allow us to continue our vision of Foxglove’s end-to-end robotics development platform. We plan to expand our extensions API, add support for additional robotics frameworks, and launch some exciting new features in the Foxglove Data Platform.

Robotics data should be easy to find, explore, and understand, and managing this data well is critical to iterating quickly on your robots. Instead of spending hours sifting through terabytes or petabytes of data, Foxglove’s convenient web interface allows you to organize, search, and visualize your data more intelligently. And instead of using external hard drives to share data with your teammates, you can search one central repository of your shared data.

With the generous support of our investors, Foxglove’s goal is to make robotics development as seamlessly integrated as possible, from ingesting and storing data to visualizing and gathering actionable insights from it. We’re excited to see where this journey takes us – join our community and help us shape the future of robotics development tooling.


Foxglove Raises $3.7M to Build Better Developer Tools For Robotics

Read more:

Ready to get started?Download today on Linux, Windows, or macOS.