Foxglove Studio offers a suite of data visualization panels to help you debug your robotics data, but many of these panels require data in a specific format.

With our newly released message converter extensions, you can visualize custom messages in Studio's built-in panels – even when these messages don't adhere to the panels' supported schemas.

When to use message converters

Before Foxglove Studio v1.33, visualizing your custom robotics data with non-standard message types required building entirely new custom panels. While building a panel from scratch tailored to your unique message schemas and visualization needs is infinitely flexible, this route requires a significant amount of work.

With the release of message converter extensions, this process becomes much easier. Instead of building your own panel, you can visualize your team’s proprietary data by leveraging the powerful visualizations Studio offers in built-in panels.

Some example uses of message converters are visualizing a robot planning path within the 3D panel, building 3D scenes from perception output, or plotting custom GPS messages in the Map panel.

Building a message converter extension

For the purpose of this tutorial, let’s assume that we have custom GPS messages that we want to plot in Foxglove Studio’s Map panel (download example MCAP file here). However, we have one small problem – the panel only supports foxglove.LocationFix messages, whereas our data uses our custom sensors.MyGps schema:



Instead of creating an entirely new panel to handle your custom messages, let’s write a message converter that transforms them into already-supported foxglove.LocationFix messages, so that they can be visualized in the existing Map panel.

Set up your extension directory

Use create-foxglove-extension to generate our extension directory:



This will create a myGpsConverter directory with some template source code for a message converter extension.

Write the converter

The index.ts file in your project's src folder is the entry point for your extension source code. It exports an activate function that accepts a single extensionContext argument of type ExtensionContext.

To register a message converter, we call registerMessageConverter on the extensionContext argument with three arguments: the source schema name (sensors.MyGps), the destination schema name (foxglove.LocationFix), and the converter function that will do the transformation:



Fill out the converter function to re-map our sensors.MyGps messages’ lat and lon fields to the foxglove.LocationFix schema’s latitude and longitude fields:



Test the extension

To build and install your extension for local testing in the Foxglove Studio desktop app, run the following command in the extension directory:



In the Studio desktop app, open the Extensions tab in the app sidebar – you'll now see myGpsConverter appear in the list of installed extensions.

Connect to your data source, and add a Map panel to the layout. You should now see your custom GPS messages visualized on the map!

Map panel

Release your extension

Once you are happy with how your extension works, you can package it and share it with your team using the foxglove CLI tool. This will deploy the extension to all users within your organization.



Check out our documentation to learn more about sharing with your team.

Share your feedback

Read the extensions documentation for more details on Studio's extension API.

As we continue building out extension support, we’d love to hear your feedback. Join the conversation in our Slack community or on Twitter, or check out our GitHub to file feature requests.


L: Mapping camera feed image colors to point colors using color\_cloud, R: Color point clouds by object classification for construction surveying

When visualizing point cloud data gathered by your robot’s lidar, radar, and depth sensors, you may want to customize point colors to help you analyze the scan. You could map points to camera images to mimic the environment’s colors –  with green points for trees, red for stop signs, and gray for curbs. You could also color the points by classification – like green for targets and red for obstacles.

Whatever your coloring logic, using customized point clouds can make a scan easier to interpret at a glance and dramatically streamline your analysis workflows. In this tutorial, we'll cover how to use ROS and Foxglove schemas to create and display colorized point cloud messages in Foxglove Studio.

Using ROS schemas

Build the message

To customize point colors for ROS 1 sensor\_msgs/PointCloud2 and ROS 2 sensors\_msgs/msg/PointCloud2 topics, each point must contain an rgb or rgba field with the appropriately packed bytes for color.

To do this, you’d specify your fields to describe your point’s position (using x, y, and z), and color.

You must represent the color field with a four-byte datatype – we recommend a value of 6 for UINT32 values. Each byte represents a color channel in the 0-255 range. Bytes must be packed in \[0xBB, 0xGG, 0xRR, 0xAA] order (i.e. (0xAA \< 24) | (0xRR \< 16) | (0xGG \< 8) | 0xBB, in little-endian order), which is compatible with how RViz expects this same information.

Let’s figure out how to write ROS 1 point cloud messages in Python using the mcap\_ros1 package (mcap\_ros2 also available for ROS 2).

To start, import the MCAP writer and some other important packages:



Define the fields that each point in the point cloud will include. Note the single rgba field for the color:



Let’s assume we have a color method that assigns an arbitrary color to a given point. Pack each point into your buffer with its corresponding color information – note that we include these bytes in BGRA order:



Create a point cloud message with our previously defined fields and packed data, and write it to your MCAP file:



You can reference the full code snippet here.

Visualize in Studio

Foxglove Studio’s 3D panel provides two options for displaying ROS PointCloud2 topics – "BGR" and "BGRA" (named to accurately reflect the actual byte order). When using the "BGR" mode, the point cloud message’s alpha value is still required, but will be ignored.

Open a 3D panel and load a data source with point cloud data. In the panel settings sidebar, find your point cloud topic and ensure you have “BGR (packed)” or “BGRA (packed)” selected:

Panel settings for PointCloud2

This ensures that your custom colors will be displayed in the 3D panel:

Visualizing PointCloud2 in 3D panel

Using Foxglove schemas

Build the message

For foxglove.PointCloud topics, Foxglove Studio’s 3D panel supports a "RGBA (separate fields)" color mode. In this mode, the 3D panel reads RGBA values from four separate "red", "green", "blue", and "alpha" fields.

Some example values, given each numeric type:

FLOAT32 (0 to 1)

UINT8 (0 to 255)

INT8 (-127 to 127)

red
0.2
51
\-76

green
0.1
25
\-102

blue
1
255
127

alpha
0.5
127
0

Let’s say we’re using the MCAP writer to write foxglove.PointCloud messages in JSON format. That means we will need to use this Foxglove schema for point clouds in JSON.

Set some important constants:



Define the fields that each point in the point cloud will include – note the 4 separate color fields (red, green, blue, and alpha):



Pack each point in data with its corresponding color information – note that we include the colors in RGBA order to match the order of our fields:



Create a point cloud message with our previously defined fields and packed data (encoded with base64), and write it to your MCAP file:



You can reference the full code snippet here.

Visualize in Studio

Foxglove Studio’s 3D panel provides the "RGBA (separate fields)" Color mode for displaying foxglove.PointCloud topics with your custom colors.

Open a 3D panel in Foxglove Studio, and load your data source with point cloud data. In the Panel settings sidebar tab, find your point cloud topic and select “RGBA (separate fields)” as the “Color mode”:

Panel settings for foxglove.PointCloud

This ensures that your custom colors will be displayed in the 3D panel:

Visualizing foxglove.PointCloud in 3D panel

Learn more

In addition to customizing point clouds, Foxglove Studio has also added custom color support for foxglove.Grid messages.

Coloring your point clouds during debugging can help you present more information about your robot’s world in a visually intuitive and digestible way. Not only does this inform your debugging strategies, it also streamlines your analysis workflows by allowing you to understand more at a glance.

For a list of all supported visualization message types, check out Foxglove Studio’s 3D panel docs. Please feel free to reach out to us in our Slack community if you have any other visualization requests!


Accelerate your
robotics development

Use Foxglove Studio's rich interactive visualizations to analyze live connections and pre-recorded data.

Use the Foxglove Data Platform to manage and organize your data.

Lean on robust community support to get the most out of our extensible tools.

Follow our blog

Want product news and updates?

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

Accelerate yourrobotics development

Use Foxglove Studio's rich interactive visualizations to analyze live connections and pre-recorded data.

Use the Foxglove Data Platform to manage and organize your data.

Lean on robust community support to get the most out of our extensible tools.

Follow our blog

Want product news and updates?

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

Accelerate your
robotics development