Track when the discrete values of topic message paths, specified using message path syntax, change.

When playing back a pre-recorded data source (e.g. a local or remote .bag file), this panel will preload the data belonging to the specified topic message paths for the whole playback timeline.

Current playback time will be indicated by a vertical gray bar.

state transitions panel

Paths can point to any primitive value (numbers, booleans, enums, etc.), but will be most useful for "enums".

Note: Constants included in your ROS message definition will be displayed as a label for each "enum" plot. Limit enums to one per message definition, as Studio will not know which constant name to use in the event of multiple matches.

User interactions

Scroll to zoom, and drag to pan. Double-click to reset the view.

Hover over any point on a chart to see its details in a tooltip. You'll see a vertical yellow bar appear, as well as a corresponding yellow marker on the playback timeline.

hover on state transitions panel

Click to seek playback to the yellow marker on the timeline.


The Foxglove Data Platform API allows you to import, export, and get information about your robots' data.


The Foxglove Data Platform API allows you to view and create devices corresponding to robots in your fleet.

Each device stored in Foxglove Data Platform should correspond to a robot in your fleet. The base URL for all API endpoints is https\://api.foxglove.dev.


This API is in beta – we welcome your feedback.

Foxglove Data Platform allows you to create events associated with a device to highlight anything of interest to your team. You can annotate events with custom metadata for easy search & discoverability.

The events API supports API key authentication, so events can be created directly from your devices.


Foxglove Data Platform allows you to share and manage Foxglove Studio extensions. Check out the Foxglove Studio docs to learn more.

The extensions API supports API key authentication, so you can create new extensions and versions as part of a Continuous Integration pipeline.


Foxglove Data Platform provides a REST API, Python client library (py-data-platform), and CLI tool to manage your robotics data.


Use Foxglove Data Platform's web console to add events of interest to your data.

Adding events to your robotics data in Data Platform can help you quickly identify, categorize, and search for points of interest in your data. Each event is tied to a device and time, and can contain optional metadata.

View events

Add an event

Search events

View events

Go to the Events page to view all events, with their associated devices and metadata.

Add an event

Go to the Devices page, and select the device to which you want to add an event.

On the selected device's landing page, click "Create event" to create an event of interest for that device.

create event

Set the time of event, duration, and relevant metadata keys and values to that event to facilitate later searching. For an instantaneous event, the duration can be set to 0.

Search events

Use the search module on the Events page to filter events by device, time range, and metadata keys and values.

search events


Use Foxglove libraries to encode and decode data retrieved from Foxglove Data Platform.

Retrieve data from Foxglove Data Platform with clients like py-data-platform, then experiment with that data in a sandbox environment like Jupyter notebooks.

Use the libraries below to encode and decode your fetched data, or to easily read and write MCAP messages.

|        | format   | repo                              | description                                                           |
| ------ | -------- | --------------------------------- | --------------------------------------------------------------------- |
| Python |          |                                   |                                                                       |
|        | ROS 1    | python-mcap-ros1-support          | Read and write ROS 1 messages with the Python MCAP reader / writer    |
|        | ROS 2    | foxglove/python-mcap-ros2-support | Read and write ROS 2 messages with the Python MCAP reader / writer    |
|        | Protobuf | python-mcap-protobuf-support      | Read and write Protobuf messages with the Python MCAP reader / writer |


Use Foxglove Data Platform's web console to export your data as ROS 1 .bag or MCAP files and to visualize it in Foxglove Studio.

Once you've imported data, you can export parts of it – as a file or data stream – for analysis in Foxglove Studio.

Export or visualize a custom time range

Visualize imports and events

Export or visualize a custom time range

Use the Timeline view to find the data you are interested in:

search

Use the date picker or the "year", "month", or "week" tabs to navigate to time ranges of interest. Click any column in the timeline to zoom in on the data you want.

After locating the data you want in the "hour" view, click a coverage bar or select a time range by dragging and clicking the selected region:

export via Timeline

Download this data as a .bag or .mcap file, or launch it in Studio for immediate visualization.

Visualize imports and events

Select any file import on the Files page or event on the Events page to "View in Studio", for immediate visualization:

view in Foxglove Studio


Use Foxglove Data Platform's web console to import and interact with your robotics data - whether you're recording it in ROS 1 or ROS 2, MCAP, Protobuf, or any other custom data format.

After signing in to your Foxglove account, you can start importing your robots' data for your whole organization to collaborate on.

Add a device

Import data

ROS 1

ROS 2

Custom data

MCAP

View imports

View imports for a device

Add a device

Go to the Devices page, and click "Add device":

add device

Create a uniquely named device for every robot you want to track. This will allow your team members to add data recorded on these devices.

Import data

NOTE: All imported data must be tied to a device, so be sure to create all relevant devices before starting an import.

Click the "Import data" button on the Files or Timeline page.

Select the recorded data file you want to import, as well as the device you want to associate with this import (i.e. the robot that recorded this data):

import

Alternatively, you can select a device on the Devices page, then click "Import data" on that device's dedicated landing page.

ROS 1

Select the ROS 1 .bag file you want to upload, and start your "Upload".

ROS 2

Use the mcap CLI tool to convert your ROS 2 .db3 files into MCAP files:



mcap will search the path stored in your $AMENT\_PREFIX\_PATH environment variable to locate the ROS message definitions on your hard drive.

Alternatively, you can specify a colon-separated list of directories for the CLI tool to search using the ament-prefix-path flag:



Back in the web console, select your newly output .mcap file, and start your "Upload".

Custom data

Whether you're recording your data in Protobuf, JSON, MessagePack, or another format, you can convert this data into the standardized MCAP format to import into Data Platform.

Read and write your own MCAP files in C++, Python, Go, Swift, or TypeScript.

Back in the web console, select your output .mcap files, and start your "Upload".

MCAP

Select the .mcap file you want to upload.

View imports

Go to the Files page to see all imported data as discrete files.

You can also go to the Timeline page to view all imported data as ranges on a timeline.

View imports for a device

Click any device on the Devices page to see its associated imports.


Keep your data it in your own cloud environment, while still leveraging Foxglove Data Platform services and data management features.

All Foxglove CLI, API, and web console operations work similarly to the hosted environment, except for importing data. With a private cloud deployment, data must be uploaded directly to your inbox bucket.

Importing data

To import data to bucket, you need to upload your data with a foxglove\_device\_id metadata key that corresponds to a device ID in your Foxglove Data Platform account.

To add a device and get its ID, either click "Add Device" in the web console, or use the CLI's foxglove devices add command.

Once you've created a device, you can import data for that device using the following commands.

For Microsoft Azure:



For Google Cloud Storage:



For Amazon S3:



You will see updates in the console for the status of your pending import. Once completed, the data import will be available and accessible via Foxglove Studio and the CLI tool.


Create and sign in to your Foxglove account to access your team's data – from shared layouts to imported robot data.

You must create a Foxglove account to store and manage your team's robotics data in Foxglove Data Platform.

A Foxglove account also gives you access to several unique Foxglove Studio features:

Save your Studio layouts to a remote store, to sync them across multiple devices

Share and collaborate on layouts with other members of your organization

Web console

Go to console.foxglove.dev to get started.

When you sign up for a Foxglove account for the first time, you will be prompted to create or join an organization.

select org

Explore your team's data

Once signed in, you can use the following views to explore your organization's data:

Devices

Add a robot to your team

View your team's robots

Click a device to see its Files view

Files

Import data

View all imported data as discrete uploaded files

Events

View all events with associated devices and metadata

Timeline

Import data

View all imported data in chronological order

Layouts

View all layouts for your team

Click a layout to load it in Foxglove Studio

Configure settings

You can also use the web console to configure settings for yourself and your team:

Profile

Set your display name and configure your UI theme

Organization

Manage your team's name, subscription plan, and members


Foxglove Data Platform is a scalable data management platform optimized specifically for storing and sharing robotic data.

Your robotics data should be easy to find, explore, and understand. By managing your data efficiently, you can significantly streamline your team's ability to debug and iterate on your robots.

To get started with Foxglove Data Platform, sign in to your Foxglove account and invite your team to start uploading data.

hero

Secure and robust infrastructure

With our world-class infrastructure that can scale from gigabytes to petabytes of storage, Foxglove Data Platform is your one-stop shop for organizing your most sensitive data. Our convenient web interface and API allow you to upload data to a central team repository that your teammates can access securely.

Efficient search

As a team grows, so does its accumulated and duplicated data, making it increasingly difficult to know what information lives where and how to access it quickly.

Foxglove Data Platform makes exploring your data intuitive. We strategically partition and index your data so that you can retrieve just the information you need at lightning speed. This means you can locate events of interest by simply querying for a robot ID and time range.

Easy sharing and visualization

Robotics teams must sift through an incredible volume of data at an equally incredible rate. To keep up, robotics developers may be forced to manually upload and download huge files or pass hard drives around the office every time they want to share data with a teammate.

Having one central repository for your team's data makes it easy to know where your information lives, regardless of who first uploaded it and who currently needs to access it.

Foxglove Data Platform also integrates seamlessly with Foxglove Studio. After locating the data you want to analyze, you can stream it directly in Studio for instant visualization and debugging.


Annotate enum fields in your ROS message definitions to optimize visualizations inside Studio.

Since ROS messages do not have built-in support for enums, we've implemented a way for Studio to read annotated message definitions and display enum values (e.g. in the Plot, Raw Messages, and State Transitions panels) in a meaningful way.

Before annotating

Previously, Studio could only display the value for an enum field if that field provided its own enum mapping.

For example, let's consider the following message definitions:



The my\_color field in a my\_msgs/MySettings message would be interpreted as an enum of datatype color\_msgs/PrimaryColors.

If Studio were to receive a my\_msgs/MySettings message with my\_color: 2, it would correctly display it as my\_color: YELLOW.

After annotating

To annotate an enum field, convert it to a simple uint8 and add a comment (formatted as \[enumDatatype] \[enumField]\_\_foxglove\_enum) on the line before the field definition:



You can now remove the unnecessary data field in color\_msgs/PrimaryColors:



You can now access the enum value directly with mySettingsMsg.my\_color, instead of mySettingsMsg.my\_color.data. Studio will still correctly display a my\_msgs/MySettings message with my\_color: 2 as my\_color: YELLOW.

This annotation will not add any bytes to the serialized ROS message, but it will add the necessary information (i.e. the constant values for RED, YELLOW, and BLUE) to the connection header.

Note: Studio can interpret multiple enum fields in the same message. Consider the message definitions below:



For my\_msgs/MySettings messages, Studio will display my\_primary\_color as RED, YELLOW, or BLUE, and my\_secondary\_color as ORANGE, GREEN, or PURPLE –  even though both fields contain 1, 2, and 3 as possible enum values.


View panel documentation, find links to external resources, and reference legal documents.

Click into the Help tab in the app sidebar to see the following resources.

help sidebar


Message path syntax is used throughout Studio to help you drill down to the exact information you want to inspect in your data.

Topics and fields

Reference this sample message for the /my\_models topic:



Specify the topic name to display all messages for that topic:



To access nested fields, first specify the topic, then use dot notation to drill down into a nested field:



Typing any text into a message path input field will display a list of matching autocomplete options – any topics or nested fields that contain the user-input text will be included in this list.

autocomplete options

Index into an array with bracket notation:



Slices

Reference this sample message for the /my\_options topic:



Slices will return an array of values:



Using dot notation after an array of objects will map through to access each element's nested field:



Slice on a variable by prepending each variable name with a $. For example, if you've set $my\_start\_idx to 3 and $my\_end\_idx to 4:



Filters

Reference these sample messages for the /my\_books topic:



Filter messages based on their fields’ boolean, number, or string values. Only equality is currently supported.

Filter on top-level fields using curly brackets – messages that don't match the filter will be skipped entirely:



You can also filter on a message’s nested field values using a combination of slices and filters:



In addition to filtering on primitive values, you can filter on a variable:



When you apply multiple filters, only messages that satisfy all filters will be returned (i.e. an AND expression):



We don't support escaping quotation marks in strings, but you can use single or double quotes, which allows you to express most strings



Navigate the timeline of a pre-recorded data source (e.g. a local or remote .bag file) using the playback bar controls.

Note: The playback bar will be hidden when Studio is connected to a live robot.

playback bar

Use the available controls to do the following:

Order ROS messages by their receive time or by their header stamps

Configure playback speed

Toggle playback looping

Specify a timestamp display format

Incrementally seek 100ms back and forth

Shortcuts

Space – Pause or play

← – Seek backward 100ms

→ – Seek forward 100ms


Configure app settings, privacy preferences, and experimental features in Studio.

Click into the Preferences tab in the app sidebar to configure the following settings.

General

Color scheme – Choose between light or dark mode, or follow your OS settings

Timezone – The timezone used to display timestamps throughout the app.

Timestamp format – The format in which timestamps are displayed throughout the app.

Message rate (Hz) – The message pipeline's framerate. Lowering the framerate will reduce CPU usage and redraw frequency for panels like Raw Messages and Data Source Info. Studio will continue to render at the usual 60fps for a smooth playback experience.

Updates – Toggle ability to automatically install updates on the desktop app.

ROS

ROS\_PACKAGE\_PATH – Paths to search for more ROS packages. Can be specified using local file paths or package:// URLs. Multiple paths can be separated by your standard OS path separator (e.g. ':' on Unix-like systems).

Privacy

Decide whether you want to send anonymized usage data or crash reports to the Studio team – all data will be used to improve the app. These preference changes require an app relaunch to take effect.

Experimental features

These features are often being actively developed, tested, or deprecated – they are not recommended for regular use.

The only exceptions are as follows:

Unlimited in-memory cache - Fully buffer a loaded bag file into memory for improved playback performance

Studio debug panels - Show internal debugging tools (i.e. the Studio – Internals, Studio – Logs, and Studio – Playback Performance panels)

Feel free to reach out in the Slack channel, if you think you may be interested in using any of these features.


Variables are values that can be set globally for a given layout. They’re prefixed with a $ for easy reference (e.g. $my\_global\_var) and can be set to any valid string, number, boolean, or undefined. It can also be set to an array containing any of those primitive values (e.g. \["x", 2, false]), or a map of strings to any of those primitive values (e.g. \{"x": 2, "y": false}).

Open the sidebar's Variables tab to view, add, and update variables.

variables tab

Certain panels like the 3D and Variable Slider panels have built-in ways to update variable values with user interactions. Panels that support message path syntax – like Raw Messages, Plot, and State Transitions – can reference variables to dynamically decide what to visualize.

You can leverage variables to quickly switch between subsets of your data – for example:

Create a $my\_ID variable in the Variables tab, and set its value to 101

Type /my\_objects.objects\[:]\{id==$my\_ID} in a Raw Messages panel to inspect the object whose id field equals 101

Add /my\_objects.objects\[:]\{id==$my\_ID}.velocity as a y-axis value in a Plot panel to plot that same object's velocity

Shortcuts

↑ / ↓ – Quickly update numeric variable values


Build and share deep links with your teammates to open Foxglove Studio (either the desktop or web app) with specific layouts and data sources.

| platform | prefix                       | behavior                                                      | example                                                                                                                     |
| -------- | ---------------------------- | ------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------- |
| Web      | https\://studio.foxglove.dev | Prompts user to choose between opening the web or desktop app | https\://studio.foxglove.dev?ds=ros1-remote-bagfile\&ds.url=https\://storage.googleapis.com/foxglove-public-assets/demo.bag |
| Desktop  | foxglove://open              | Prompts user to confirm opening the desktop app               | foxglove://open?ds=ros1-socket\&ds.url=localhost:11311                                                                      |

Loading a layout

To load a saved layout (personal or team):

| query param | type   | required | description                               |
| ----------- | ------ | -------- | ----------------------------------------- |
| layoutId    | string | ✓        | Foxglove's ID for a remotely saved layout |

To get a URL with the correct layoutId param, click your desired layout in the Layouts sidebar (web app) or on the Foxglove web console's Layouts page (desktop app).

Loading a data source

To specify your data source and time:

| query param | type                                                                                                                                                                                                                                                                       | required | description                                      |
| ----------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- | ------------------------------------------------ |
| ds          | Desktop app:Native ROS 1: ros1-socketNative ROS 2: ros2-socketDesktop and web app:Remote filesROS 1: ros1-remote-bagfileMCAP: mcap-remote-fileRosbridge WebSocket: rosbridge-websocketFoxglove WebSocket: foxglove-websocketFoxglove Data Platform: foxglove-data-platform | ✓        | Data source type                                 |
| time        | Timestamps in RFC3339 format                                                                                                                                                                                                                                               |          | Timestamp to seek to (for non-live data sources) |

All data source links also support the layoutId query param, as well as additional params specific to their respective data source type.

For example, a link to a native ROS 1 connection may look like the following: foxglove://open?ds=ros1-socket\&ds.url=localhost:11311\&layoutId=d3597a63-36af-4167-9635-fde78b8926aa.

Native ROS 1 and ROS 2 connections

Must be used with ?ds=ros1-socket (ROS 1) or ?ds=ros2-socket (ROS 2).

| query param | type   | required | description                                 |
| ----------- | ------ | -------- | ------------------------------------------- |
| ds.url      | string | ✓        | ROS 1: ROS master URLROS 2: ROS\_DOMAIN\_ID |

Rosbridge WebSocket connections

Must be used with ?ds=rosbridge-websocket.

| query param | type   | required | description   |
| ----------- | ------ | -------- | ------------- |
| ds.url      | string | ✓        | WebSocket URL |

Foxglove WebSocket data

Must be used with ?ds=foxglove-websocket.

| query param | type   | required | description   |
| ----------- | ------ | -------- | ------------- |
| ds.url      | string | ✓        | WebSocket URL |

Foxglove Data Platform data

Must be used with ?ds=foxglove-data-platform.

| query param | type                         | required | description                  |
| ----------- | ---------------------------- | -------- | ---------------------------- |
| ds.deviceId | string                       | ✓        | Robot ID                     |
| ds.start    | Timestamps in RFC3339 format | ✓        | Start of data playback range |
| ds.end      | Timestamps in RFC3339 format | ✓        | End of data playback range   |

Remote files

Must be used with ?ds=ros1-remote-bagfile for ROS 1 bag files, or ?ds=mcap-remote-file for MCAP files.

| query param | type   | required | description               |
| ----------- | ------ | -------- | ------------------------- |
| ds.url      | string | ✓        | URL to .bag or .mcap file |


Foxglove Studio can inspect data via multiple sources – including live and recorded ROS and non-ROS connections, as well as local and remote recorded data files.

Depending on your framework (ROS or non-ROS), you have access to the following data sources:

| Framework / sensor | Live data source           | Pre-recorded data source          |
| ------------------ | -------------------------- | --------------------------------- |
| ROS 1              | ROS 1, Rosbridge WebSocket | ROS 1 (.bag) file - local, remote |
| ROS 2              | ROS 2, Rosbridge WebSocket | ROS 2 (.db3) file - local only    |
| PX4                | N/A                        | PX4 ULog (.ulg) file - local only |
| Custom             | Foxglove WebSocket         | MCAP (.mcap) file - local, remote |
| Velodyne LIDAR     | Velodyne LIDAR             | N/A                               |

On opening Foxglove Studio, you will see a dialog with a list of all possible data sources (i.e. local file, remote file, live connection, sample data) – click into any of these options to start visualizing your data.

data source dialog

Once you've loaded or connected to a data source, open the Data sources tab in the app sidebar to:

View details about your current data source

Open the dialog again to switch to a different data source

data sources tab

All pre-recorded data sources (i.e. ROS 1, ROS 2, MCAP, and PX4 ULog files), whether they are loaded locally or from a remote URL, will be preloaded into Foxglove Studio. This means that you can visualize data over the course of the entire file at once.

For more information on the MCAP file format, check out the GitHub repo and Introducing the MCAP File Format. If you're interested in support for data formats that are not currently included, please share the protocols or serialization formats you're using.


Connect directly to your live custom data via Foxglove WebSocket, an encoding-agnostic WebSocket connection.

Getting started

The foxglove/ws-protocol repo provides both Python and JavaScript/TypeScript packages for building your own Foxglove WebSocket servers and clients. It also includes templates for building your own custom server (Python, JavaScript/TypeScript) and client (JavaScript/TypeScript).

It also includes a @foxglove/ws-protocol-examples npm package with example servers and clients. Run these examples to see how Studio can receive system stats and image data from a custom WebSocket server:



To learn more, reference the protocol specification.

Loading data

In the Data source dialog, click Open connection, select Foxglove WebSocket , and then enter the URL to your WebSocket server:

foxglove websocket dialog

You can also choose to stream your Foxglove Data Platform data directly into Studio, for further analysis. Check out the Data Platform docs for more information.

Foxglove WebSocket connections currently support Protobuf and JSON data. Please get in touch if there are other data formats that your team would like to see supported.

JSON

For channels with encoding: "json", Studio expects the schema to be a JSON Schema definition.

Each message should be UTF8-encoded JSON representing an object. Binary data should be represented as a base64-encoded string in the JSON object, and as a contentEncoding (e.g. \{ "type": "string", "contentEncoding": "base64" }) in the schema.

Protobuf

For channels with encoding: "protobuf", Studio expects the schema to be a base64-encoded binary FileDescriptorSet (as produced by protoc --include\_imports --descriptor\_set\_out) , and schemaName to be one of the message types defined in the FileDescriptorSet.

Each message should be encoded in the protobuf binary wire format – we provide .proto files compatible with the standard ROS types in our foxglove/ros-message-schemas repo.


Foxglove Studio can load and inspect ROS 1 (.bag), ROS 2 (.db3), MCAP (.mcap), and PX4 ULog (.ulg) files stored locally on your computer.

To select a file you want to play back in Studio, you can double-click the file from your file manager, drag and drop the file directly into the app, or use the Open local file option in the Data source dialog:

local file dialog

Studio supports loading the following file formats:

ROS 1 (.bag)

ROS 2 (.db3)

MCAP (.mcap)

PX4 ULog (.ulg)

Note that ROS 2 .db3 files do not contain their message definitions. Use the mcap CLI tool to convert them into self-contained MCAP files:



mcap will search the path stored in your $AMENT\_PREFIX\_PATH environment variable to locate the ROS message definitions on your hard drive. You can also specify a colon-separated list of directories for the CLI tool to search using the ament-prefix-path flag:



Studio can fetch ROS 1 (.bag) and MCAP (.mcap) files from a remote URL to inspect their recorded data.

To load a remote .bag or .mcap file, select Open file from URL in the Data source dialog, and enter the URL to your remote file.

remote file dialog

Once you've loaded your remote data source, you can test that the data is streaming correctly into Studio by adding a Raw Messages panel to your layout, and verifying that your data's topics populate the dropdown.

Setting up CORS for a remote file

We recommend hosting your data files in a cloud provider like Amazon Simple Storage Service (S3), Google Cloud Storage (GCS), or Azure Storage, but you can also host files on your own server. Just be aware that your server has to support Cross-Origin Resource Sharing (CORS) and accept range requests, which can be difficult and time-consuming to set up.

If your data is sensitive, generate and use a signed URL – make sure that you point to the resource directly, as redirects will not work with CORS:

For S3 – Sharing objects using presigned URLs

For GCS – Signed URLS

For Azure Storage – Grant limited access to Azure Storage resources using shared access signatures (SAS)

This signed URL will work for a limited period of time, and you can set up your server to only sign URLs for authenticated users.

Finally, set up your CORS configuration. Below is an example of a Terraform config for an S3 bucket (documentation here):



And a Terraform config for a GCS bucket (documentation here):



Connect directly to your running ROS stack via a native TCP (Transmission Control Protocol) connection to access your ROS master and/or nodes directly.

In the Data source dialog, click Open connection and then select the type of native ROS connection you'd like to initiate ("ROS 1" or "ROS 2"):

ros 1 dialog

Docker for Mac unfortunately does not expose all container ports to the macOS host, and so does not support bridge or host networking. Use the Rosbridge connection instead.

Once you have a working ROS 1 or ROS 2 setup on your computer, run roscore in your terminal to start your ROS master.

For ROS 1, enter your ROS\_MASTER\_URI (ROS master's IP and port) and ROS\_HOSTNAME. If you're experiencing any issues, ensure you have unrestricted network connectivity between your ROS stack and Studio, as ROS uses multiple ports to communicate.

ros 1 dialog

For ROS 2, enter your ROS\_DOMAIN\_ID:

ros 2 dialog

Note: Linux users opening a ROS 2 connection may need to adjust their networking receive buffer size in order to receive larger messages.

You are now connected to ROS!

To test your connection, add a Raw Messages panel to your layout, and see a list of available topics populate the dropdown. If you are not yet running any ROS nodes, you should only see the /rosout\_agg topic.

Current limitations

Native ROS 1 connections can decode custom message definitions and allow you to publish back to your ROS stack. Native ROS 2 connections, however, currently have the following limitations:

Can only decode the common ROS 2 definitions (no custom message definitions)

Cannot publish messages back to the ROS stack

Both native ROS 1 and ROS 2 connections do not yet support reading or setting ROS parameters.


Connect directly to your running ROS stack via WebSockets using a Rosbridge connection.

Click Open connection in the Data source dialog to select any of the following live connection options:

rosbridge dialog

A rosbridge connection uses a standard protocol to connect Studio to your ROS master over WebSockets. While it does require running an extra ROS node (rosbridge\_server), we recommend this option if you have a network firewall between ROS and Studio, as it requires your ROS host to have only one port open.

To open a Rosbridge connection, ake sure you’ve installed ROS 1 or ROS 2, as well as rosbridge-suite:



Next, start the WebSocket server, and review the command printout to determine the port it is listening on (e.g. ws\://0.0.0.0:9090):



Select the Rosbridge (ROS 1 and 2) connection, and enter the URL to your Rosbridge server:

rosbridge dialog

You are now connected to ROS!

To test your connection, add a Raw Messages panel to your layout, and see a list of available topics populate the dropdown. Check out the /connected\_clients topic to see information rosbridge is publishing about your connection.

Current limitations

Rosbridge connections support publishing back to your ROS stack, but not reading or setting ROS parameters.


Connect directly to your Velodyne LIDAR hardware to see its incoming data live.

In the Data source dialog, click Open connection and select the Velodyne LIDAR connection. Enter the local UDP port on which you want to listen for Velodyne packets:

velodyne LIDAR dialog

To test your connection, add a 3D panel to your layout, and open the topic picker to toggle on your velodyne topic. You should now see an interactive representation of your LIDAR scan in a 3D scene.


Build your own Foxglove Studio panels with custom extensions, using the
@foxglove/studio SDK and create-foxglove-extension

While Studio offers a suite of general-purpose tools for robotics data visualization and debugging, many users have domain-specific needs that our out-of-the-box offering does not address.

Studio's extensions library provides an API for building custom panels. This allows developers to create extensions in TypeScript using the @foxglove/studio SDK. These extensions are loaded and executed in the Studio app.

Once created, your extension can be installed via the Foxglove Studio sidebar's Extensions tab, then added to your layout via the sidebar's Add panel tab.

Creating an extension for a custom panel

Before you start, make sure you have Node.js 14+ and yarn installed.

In a terminal, cd into the directory where your source code will live and run the following command:



This uses create-foxglove-extension to create a myExtensionName directory containing all the source code for an example panel extension, with all dependencies installed.

For a simple example of how to create and register a custom panel, open myExtensionName in the editor of your choice and pull up the files src/index.ts and src/ExamplePanel.tsx.

index.ts

The index.ts file acts as the entry point for your extension source code.

It must export an activate function that:

Accepts an extensionContext argument - For more info on the ExtensionContext type, see @foxglove/studio

Registers your extension's panels - in this case, just ExamplePanel



ExamplePanel.tsx

The panel file(s) referenced in index.ts will define the behavior and UI of the custom panel(s) that your extension will install.

While ExamplePanel.tsx is written in React, panels are framework agnostic - i.e. they can be written using DOM primitives, React, or any other front-end framework.

Check out the turtlesim extension for an example of a panel written without React.

The initPanel function accepts a PanelExtensionContext argument. This argument contains properties and methods for accessing data within your panel and rendering your UI updates.

PanelExtensionContext

See the panel-api docs for available properties and methods for the PanelExtensionContext.


Installation

To build and install your extension into a local Studio extensions folder, run yarn local-install. This will create a folder under your home directory (e.g. \~/.foxglove-studio/extensions/unknown.myExtensionName-0.0.0) with your compiled extension.

Open the latest version of Studio. You should now be able to see an Extensions menu in your sidebar that contains myExtensionName in the list of installed extensions.

menu

Once installed, you should be able to open the Add panel menu and see an option called ExamplePanel. You've successfully loaded your first Studio extension!

Alternatively, if you've already published your extension, you can also just double-click on the produced .foxe file to install your extension in Studio.

Development

Each time you make a change to your extension, you must run yarn local-install to build it to your local extensions folder.

You must then reload or restart Studio to execute the latest version of your extension code in the app. Alternatively, you can confirm your code compiles without installing it locally by simply running yarn build.


Use the panel API to define a custom extension panel for your unique workflow.

The PanelExtensionContext exposes properties and methods for the business logic of your custom panel. The context has methods to subscribe for messages, receive updates, configure your panel's settings, and render your panel to the UI.

The more common methods and properties are described below. For full type docs on the PanelExtensionContext and RenderState types, see @foxglove/studio.

panelElement: HTMLDivElement

The root DOM element for your panel. Add any panel UI to this DOM element or pass this element as the root of your UI framework.

onRender(renderState: Readonly\<RenderState>, done: () => void)

Studio will run context.onRender whenever your panel needs to re-render during playback. The function accepts renderState and a done callback as its arguments.

Note: Your onRender function must call done after rendering to indicate that the panel is ready to render the next set of data. The exact placement of this done invocation will vary between frameworks and different extensions' logic.



watch(field: keyof RenderState)

Use context.watch to indicate which fields in renderState (e.g. allFrames, appSettings, currentFrame, currentTime, previewTime, parameters, topics) should trigger panel re-renders when their contained values change.



subscribe(topics: \{ topic: string, preload?: boolean }\[])

Use context.subscribe to indicate the topics that your panel should subscribe to when populating renderState.currentFrame. You can indicate which topics you want to preload when playing data back in Foxglove Studio - preloading topics results in more data transfer and memory use and is recommended only for panels which display the entire dataset (e.g. the Plot panel) vs. only the current frame.



Invoking context.subscribe(\[]); will unsubscribe from all topics.

advertise(topic: string, datatype: string, options?: Record\<string, unknown>)

Use context.advertise to indicate an intent to publish a specific datatype on a topic. A panel must call context.advertise before being able to publish on the topic (context.publish). Options are specific to the data source - some make use of options; others do not.



options are specific to each data source - see documentation below for supported data sources.

Native (ROS 1)

| field     | type            | description                                                                      |
| --------- | --------------- | -------------------------------------------------------------------------------- |
| datatypes | Map\<string, T> | JavaScript map of datatype names and RosDefinition definitions for a given topic |

Common datatype definitions are available in the @foxglove/rosmsg-msgs-common package.



Native (ROS 2)

| field     | type            | description                                                                      |
| --------- | --------------- | -------------------------------------------------------------------------------- |
| datatypes | Map\<string, T> | JavaScript map of datatype names and RosDefinition definitions for a given topic |

Common datatype definitions are available in the @foxglove/rosmsg-msgs-common package.



Rosbridge

No options required. Simply publish a JSON message with fields conforming to the advertised datatype, and the bridge node will serialize it according to the datatype.

unadvertise(topic: string)

Use context.unadvertise to remove advertising for a topic.



publish(topic: string, message: Record\<string, unknown>)

Use context.publish to publish a message on a previously advertised topic. If the topic is not advertised or otherwise malformed, the function will throw an error.



setParameter: (name: string, value: ParameterValue)

Use context.setParameter to set a parameter name to any valid value (i.e. primitives, dates, Uint8Arrays, and arrays or objects containing these values).



setVariable: (name: string, value: VariableValue)

Use context.setVariable to set a variable name to any valid variable value.



callService: (service: string, request: unknown) => Promise\<unknown>

Use context.callService to make a service call to the specified service with a request payload.



saveState(state: Partial\<unknown>)

Use context.saveState to save an arbitrary object as persisted panel state in the Foxglove Studio layout.



addPanel(\{ position: "sibling", type: string, updateIfExists: boolean, getState(existingState?: unknown): unknown; })

Use context.addPanel to add a sibling panel of a given panel type (e.g. "RawMessages") to the layout. All panel types can be referenced here.

If updateIfExists is set to true, this will update a sibling panel of the same panel type, if it already exists in the layout.

getState is set to a function that returns the state for the added or updated panel. When updating an existing panel, the existing state will be passed in as getState's first argument.



Use the panel settings API to build a settings interface for your extension panels.

The panel settings API allows you to define configurable settings for your extension, and render them in a way that matches Foxglove Studio's appearance – all without having to write any custom UI code.

The PanelExtensionContext exposes methods for the business logic of your custom panel – including one to define your settings interface and to configure its values. Check out @foxglove/studio for full type descriptions on all possible configuration values.

updatePanelSettingsEditor: (settings: Readonly\<SettingsTree>) => void

Invoke the updatePanelSettingsEditor on your panel's PanelExtensionContext instance to define or update its settings.



SettingsTree

The settings argument must be a valid SettingsTree and include two important properties – nodes and actionHandler:

nodes - Hierarchical structure where each node can contain input fields, display fields, or even other nodes

actionHandler - Function that is invoked when the user interacts with the settings UI; contains logic to process the interactions and update the panel or settings tree

The example tree below has a title text input field inside a General section along with an actionHandler to respond to updates for the title field.



SettingsTreeAction

A SettingsTreeAction describes how the settings UI should update when a user interacts with its fields.

Each SettingsTreeAction has a payload with a path to the settings field to update (e.g. \["general", "title"]).

The update action corresponds to a user setting a new value for a field (e.g. "My new title").

Input types

In addition to the string input type in the example above, the panel API provides a wide array of types for your extension panel input fields.

Each input type has different properties that you can configure:

autocomplete

boolean

rgb

rgba

gradient

messagepath

select

string

toggle

vec3

vec2


Publish your extension to help other Studio users and other members of your Foxglove Studio organization leverage your custom panel.

Defining metadata

Set your extension's metadata fields in the package.json file:

name

publisher

version

description

Packaging your extension

When you're ready to distribute your extension, run yarn package to produce a ZIP archive with a .foxe extension that contains your extension manifest and compiled code — e.g. myExtensionName-0.0.0.foxe.

Sharing publicly

Share your extension with all Foxglove Studio users by adding it to the studio-extension-marketplace.

Publish your .foxe file somewhere public – we recommend GitHub releases alongside your code. Then, open a PR in the repo to update extensions.json and this README's "Extensions" section with your extension information.

Once we merge your PR, your extension will be available for anyone to install in Foxglove Studio's Extensions sidebar.

Sharing privately

With anyone

Share your .foxe file directly with collaborators via email or a remote storage solution like Google Drive or Dropbox. They can double-click the file to install it in their local Foxglove Studio app.

Publish your extension with the foxglove CLI for the rest of your organization to use in Foxglove Studio:



On app load and every 10 minutes thereafter, all extensions are installed automatically to every organization member's Studio instance, and any existing extensions that are no longer listed in the organization registry are uninstalled.

Only admins can view an organization's extensions in the Foxglove web console. They can also choose to un-publish an extension for the organization from that interface.


Foxglove Studio is a visualization and debugging tool for your robotics data, conveniently packaged as desktop and web apps.

Download Foxglove Studio as a desktop app (available on Linux, Windows, or macOS), or simply navigate to the web app in a Chrome browser window.

Some app features are only available via our desktop app:

Opening a native ROS 1 or ROS 2 connection

Connecting to your Velodyne LIDAR hardware

Loading local URDF and mesh resources in the 3D panel using URLs prefixed with package://

Creating shareable links prefixed with foxglove://

When you first load the app, you will see an introductory dialog, with "Open data source" options and "Help" resources. On subsequent app loads, you will also be able to reconnect to your most recently selected data sources in the "Recents" list.

Data source dialog

If you want to get a sense of what you can visualize in Foxglove Studio before connecting to your own data, click on "Explore sample data" to load a sample dataset adapted from nuScenes in an example layout for playback. Hover over each panel to see its name and toolbar, and seek to different places on the playback bar to see the panels update with new information.

Sample nuScenes data

The app's sidebar contains the following tabs:

Data sources – Select a data source to connect to

Layouts – Save different Studio layouts for later use

Add panel – Add a panel of your choice to your current layout

Panel settings - Edit a selected panel's settings

Variables - Set app-level variables for use throughout your current layout

Account - Sign in to access collaboration features like shared layouts (coming soon)

Preferences – Configure app settings, privacy preferences, and experimental features

Toolbar menus

You can use the application toolbar menus to do the following:

Open a new Studio window (File > New Window)

Connect to a data source (File > Open ROS 1, Open ROS 1 Rosbridge, etc.

Reset your layout to the Welcome layout (Help > Welcome)

Read documentation on message path syntax (Help > Message path syntax)

Reference keyboard shortcuts (Help > Keyboard shortcuts)

Open the Foxglove website (Help > Learn more)


Arrange Studio panels into custom workspaces, called layouts, to assist with your unique visualization and debugging workflows.

Layouts allow you to configure and arrange any selection of panels into an interactive workspace, so you have the ideal tools ready for the task at hand. For example, a perception engineer may develop layouts for calibrating various sensors, a planning engineer may have a few for visualizing different routing algorithm outputs, and a controls engineer may build one for plotting robot kinematics.

When you first create a layout via the sidebar's Layouts tab, you can browse a glossary of all available panels to decide how you want to explore your data.

layouts glossary

By creating and sharing layouts designed to meet specific needs, you can revisit a particular setup for a common task or share that setup with a teammate solving a similar problem. Sign up for a Foxglove organization to make collaborating on layouts even easier.

Personal layouts

Create, save, and switch between your personal layouts in the sidebar's Layouts tab. When signed in to your Foxglove account, your personal layouts will be synced across all of your devices.

Use each layout's details menu to rename, duplicate, export, or delete any personal layout. To save, revert, duplicate, or delete multiple layouts at once, press Cmd to select multiple layouts or Shift to select a range of adjacent layouts, then right-click for the context menu. If you're signed in, you will have the additional option to share the layout with your team. Otherwise, your personal layouts will remain accessible to only you – they cannot be viewed, loaded, or edited by anyone else.

Use the "Import layout" icon in the top right to load an exported layout file.

layouts tab

After editing a personal layout, you can take either of the following actions:

Save your changes to the layout

Discard your changes and revert to the last explicitly saved version of the layout

modified personal layout options

Taking any of the following actions will automatically edit your loaded layout:

Adding or removing panels

Configuring panels

Adjusting playback settings

Changing variable values

Share any of your personal layouts with the members of your organization to make it a team layout. Once shared, team layouts can be edited, renamed, or deleted by any member of that organization.

team layouts

This allows teams to curate a set of canonical layouts to accomplish common tasks – e.g. for calibrating radar sensors, visualizing planning algorithm outputs, or viewing logs. Instead of maintaining marginally different setups for different tasks, teammates can use layouts preconfigured by workflow experts to avoid redundant work and accelerate development.

Team layouts work very similarly to personal layouts – i.e. you can rename, copy, export, and delete them – but operate more as templates than evolving snapshots of a workspace.

team layout options

If you edit a team layout and then try switching to another layout, you'll be prompted to take one of the following actions:

Save your changes as a separate personal layout (reverts changes to team layout)

Overwrite the team layout with your changes

Discard your changes and revert to the last explicitly saved version of the layout


Each field in a message schema has a type. This type can be another message schema, an enum, or one of the primitive types documented below:

boolean

Either true or false.

bytes

Raw binary data, represented as a Uint8Array in JavaScript.

enum

Number that serves as a key in a set of named constants.

float64

64-bit floating-point number.

string

String value encoded as UTF-8.

time

| field | type   | required | description                        |
| ----- | ------ | -------- | ---------------------------------- |
| sec   | uint32 | ✓        | Seconds since epoch                |
| nsec  | uint32 | ✓        | Additional nanoseconds since epoch |

duration

| field | type   | required | description                                  |
| ----- | ------ | -------- | -------------------------------------------- |
| sec   | int32  | ✓        | Seconds offset                               |
| nsec  | uint32 | ✓        | Nanoseconds offset in the positive direction |

uint32

Non-negative integer value between 0 and 232−1.

int32

Integer value between −231 and 231−1.


Certain Foxglove Studio panels must receive messages that adhere to a specific schema to visualize them correctly.

While some Foxglove Studio panels, like the Raw Messages and Plot panels, are able to display data of any type from any topic, other panels require incoming messages to conform to a known schema name and type. For example, the Map and 3D panels both have a specific list of supported messages that they can visualize.

See the panels documentation for each panel's supported messages.

Getting started with Foxglove schemas

Reference the Foxglove schema files in the @foxglove/schemas repo to write structured messages in any of the following formats:

Protobuf

JSON Schema

ROS 1

ROS 2

TypeScript

Having your data adhere to these outlined schemas will help you take full advantage of Studio's built-in visualizations.

Protobuf and JSON Schema

Copy the .proto files or .json files you need directly into your project, and use them to start publishing data via a live Foxglove WebSocket connection or logging data to an MCAP file.

You can also import JSON schemas via the @foxglove/schemas npm package:



We provide WebSocket libraries for live data (Python, JavaScript, C++), as well as MCAP writers for pre-recorded data files (Python, JavaScript, C++).

Check out the blog post on Recording Robocar Data with MCAP for an example on using an MCAP C++ writer to record your Protobuf data.

ROS

Install the foxglove\_msgs package:



Then, import the schemas you need inside your ROS project to start publishing data:



TypeScript

Import Foxglove schemas as TypeScript types for type-checking purposes.

In Foxglove Studio's User Scripts panel, you can specify the schema you want with Message\<"foxglove.\[SchemaName]">:



For your own TypeScript project, you can import the type directly from the @foxglove/schemas npm package:



Import these types when working on a JavaScript WebSocket or MCAP project, or when writing a custom data transformation script in Foxglove Studio’s User Scripts panel.


Foxglove Studio streamlines robotics development by integrating many commonly used developer tools into one environment – see which of your existing tools you can migrate to Studio's panels.

| Framework | Tool                    | Foxglove Studio panel          |
| --------- | ----------------------- | ------------------------------ |
| ROS 1     | rosparam                | Parameters                     |
|           | rostopic                | Data Source Info, Raw Messages |
|           | rqt\_console            | Log                            |
|           | rqt\_graph              | Topic Graph                    |
|           | rqt\_image\_view        | Image                          |
|           | rqt\_plot               | Plot                           |
|           | rqt\_publisher          | Publish                        |
|           | rqt\_runtime\_monitor   | Diagnostics                    |
|           | rviz                    | 3D                             |
|           | teleop\_twist\_keyboard | Teleop                         |
| ROS 2     | ros2 param              | Parameters                     |
|           | ros2 topic              | Data Source Info, Raw Messages |
|           | rqt\_console            | Log                            |
|           | rqt\_graph              | Topic Graph                    |
|           | rqt\_image\_view        | Image                          |
|           | rqt\_plot               | Plot                           |
|           | rqt\_publisher          | Publish                        |
|           | rqt\_runtime\_monitor   | Diagnostics                    |
|           | rviz                    | 3D                             |
|           | teleop\_twist\_keyboard | Teleop                         |
| Other     | urdf-loader demo        | URDF Viewer                    |


Open source software has played a huge role in helping us develop Foxglove Studio, and we're committed to contributing our own software back to the community.

In building Foxglove Studio, we relied heavily on others' open source contributions. That's why we're committed to keeping Studio open source and contributing our
own software back to the community.

In addition to Studio, we've published several npm packages to facilitate common development tasks – like serializing and deserializing data,
parsing message definitions, and exposing helper methods for data manipulation. While these packages were originally developed for Studio, they can be included in any TypeScript or JavaScript project.

Check out our npm and GitHub pages for more details on all our published packages.

ROS (Robot Operating System)

Miscellaneous


Display visualization markers in a 2D or 3D scene.

This panel makes performance and user experience improvements to the legacy 3D panel.

3d panel

Table of contents

Introduction

Transforms

Supported messages

User interactions

Settings

Shortcuts

Introduction

By publishing specifically formatted marker messages to a topic, you can programmatically add primitive shapes (arrows, spheres, etc.) and more complex visualizations (occupancy grids, point clouds, etc.) to your 3D panel's scene.

Open the Panel settings tab in the app sidebar to choose the topics you want to display. Expand each topic's section to configure its visualization settings.

3d panel topic-picker

Transforms

To translate or rotate the placement of your markers, publish transform messages to define the spatial relationship between two coordinate frames. To successfully apply this transformation to your markers, your transform message must include its own frame\_id and a child\_frame\_id (i.e. your markers' frame\_id).

In ROS, transform interpolation works by holding a buffer of every received transform in the last 10 seconds for each coordinate frame, and transforms are always done at a point in time. If the requested time falls between two transforms for any coordinate frame(s) between the child and parent, LERP and SLERP are used for interpolation (using the marker's frame\_locked attribute). To translate between two sibling frames, search for a common parent and conduct a transform from A to parent, followed by an inverse transform from parent to B. To accomplish this, all coordinate transformations must be parameterized by time, instead of always using the latest transform.

The 3D panel does handle future transform requests differently from the ROS implementation. It clamps any future time to the latest received transform timestamp. This removes a poorly documented tuning parameter and reduces user surprise when a transform can't be found because the window is slightly too old.

Supported messages

This section describes the datatypes for supported messages. To use this panel, your data source must provide messages conforming to one of the supported datatypes.

ColorRGBA

A color in RGBA format.

| Framework | Datatype                |
| --------- | ----------------------- |
| ROS 1     | std\_msgs/ColorRGBA     |
| ROS 2     | std\_msgs/msg/ColorRGBA |
| Custom    | foxglove.Color          |

LaserScan

A single scan from a planar laser range-finder.

| Framework | Datatype                   |
| --------- | -------------------------- |
| ROS 1     | sensor\_msgs/LaserScan     |
| ROS 2     | sensor\_msgs/msg/LaserScan |
| Custom    | foxglove.LaserScan         |

Marker

A visualization marker (i.e. arrows, cubes, spheres, etc.) to be displayed within your scene.

| Framework | Datatype                       |
| --------- | ------------------------------ |
| ROS 1     | visualization\_msgs/Marker     |
| ROS 2     | visualization\_msgs/msg/Marker |

For markers with a mesh\_resource field, load the mesh using the following URL types:

http(s)://

package:// (Desktop app only)

file:// (Desktop app only)

The mesh resource must be in one of the following file formats:

glTF (.glb)

STL (.stl)

COLLADA (.dae)

MarkerArray

An array of various visualization markers to be displayed within your scene.

| Framework | Datatype                            |
| --------- | ----------------------------------- |
| ROS 1     | visualization\_msgs/MarkerArray     |
| ROS 2     | visualization\_msgs/msg/MarkerArray |

OccupancyGrid

2D grid map, with each cell representing the probability of occupancy.

| Framework | Datatype                    |
| --------- | --------------------------- |
| ROS 1     | nav\_msgs/OccupancyGrid     |
| ROS 2     | nav\_msgs/msg/OccupancyGrid |
| Custom    | foxglove.Grid               |

Path

An array of timestamped poses in a named coordinate frame, denoting an object's path through space.

| Framework | Datatype              |
| --------- | --------------------- |
| ROS 1     | nav\_msgs/Path        |
| ROS 2     | nav\_msgs/msg/Path    |
| Custom    | foxglove.PosesInFrame |

PointCloud

A collection of N-dimensional points, which may contain additional fields with information like normals, intensity, etc.

| Framework | Datatype                     |
| --------- | ---------------------------- |
| ROS 1     | sensor\_msgs/PointCloud2     |
| ROS 2     | sensor\_msgs/msg/PointCloud2 |
| Custom    | foxglove.PointCloud          |

Settings

| field           | description                                                                                                                                                                                  |
| --------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Point size      | Size of each rendered point                                                                                                                                                                  |
| Point shape     | Shape of each rendered point                                                                                                                                                                 |
| Decay time      | Duration of time (in sec) that each point stays rendered                                                                                                                                     |
| Color mode      | "Flat" (one color), "Color map" (normalizes values before mapping to color), "Gradient" (between 2 colors) , "RGB" (based on message's rgb field), or "RGBA" (based on message's rgba field) |
| Flat color      | Only shown if "Color mode" is set to "Flat"; hex code for color of each rendered point                                                                                                       |
| Color by        | Only shown if "Color mode" is set to any value but "Flat"; numeric field in message used for coloring logic                                                                                  |
| Color map       | Only shown if "Color mode" is set to "Color map"; "Turbo" (Google) or "Rainbow" (RViz); for mapping "Color by" field values to colors                                                        |
| RGB byte order  | Only shown if "Color mode" is set to "RGB"; RGB, BGR, or XBGR; order in which color bytes should be interpreted                                                                              |
| RGBA byte order | Only shown if "Color mode" is set to "RGBA"; RGBA, BGRA, or ABGR; order in which color bytes should be interpreted                                                                           |
| Value min       | Only shown if "Color mode" is set to any value but "Flat"; minimum value used to normalize incoming points' "Color by" field values                                                          |
| Value max       | Only shown if "Color mode" is set to any value but "Flat"; maximum value used to normalize incoming points' "Color by" field values                                                          |

PolygonStamped

A polygon with a reference coordinate frame and timestamp.

| Framework | Datatype                          |
| --------- | --------------------------------- |
| ROS 1     | geometry\_msgs/PolygonStamped     |
| ROS 2     | geometry\_msgs/msg/PolygonStamped |

PoseStamped

A timestamped pose in a named coordinate frame.

| Framework | Datatype                       |
| --------- | ------------------------------ |
| ROS 1     | geometry\_msgs/PoseStamped     |
| ROS 2     | geometry\_msgs/msg/PoseStamped |
| Custom    | foxglove.PoseInFrame           |

PoseArray

An array of timestamped poses in a named coordinate frame.

| Framework | Datatype                     |
| --------- | ---------------------------- |
| ROS 1     | geometry\_msgs/PoseArray     |
| ROS 2     | geometry\_msgs/msg/PoseArray |
| Custom    | foxglove.PosesInFrame        |

Transform message

A transform between two named coordinate frames in space.

| Framework | Datatype                |
| --------- | ----------------------- |
| ROS 1     | tf/tfMessage            |
| ROS 1     | tf2\_msgs/TFMessage     |
| ROS 2     | tf2\_msgs/msg/TFMessage |
| Custom    | foxglove.FrameTransform |

VelodyneScan

Velodyne LIDAR scan packets.

| Framework | Datatype                        |
| --------- | ------------------------------- |
| ROS 1     | velodyne\_msgs/VelodyneScan     |
| ROS 2     | velodyne\_msgs/msg/VelodyneScan |

URDF model

URDF robot models are loaded automatically if your data source supports parameters (i.e. a native ROS 1 or ROS 2 connection) and the /robot\_description parameter is set to valid URDF XML.

Override this parameter with a custom http(s)://, package:// (desktop app only), or file:// (desktop app only) URL in the 3D panel's topic picker, under the "3D Model" entry's settings.

User interactions

Click any given marker in the scene to display its relevant details in a dialog box.

3d panel clicked marker

Clicking overlapping markers will display a context menu that lets you select a specific marker.

The panel controls on the right can be used to do the following:

Toggle between 3D and 2D views of the scene

Measure the distance between 2 points – Click to draw points in the scene; only possible in 2D view

Settings

| Frame         |                                                                             |
| ------------- | --------------------------------------------------------------------------- |
| Display frame | Coordinate frame to follow for position and orientation throughout playback |

| Scene        |                                                                           |
| ------------ | ------------------------------------------------------------------------- |
| Render stats | Display rendering performance statistics in the top left corner of panel  |
| Background   | Scene's background color                                                  |
| Label scale  | Scale of rendered labels                                                  |
| View         | Camera settings like distance, perspective (2D vs. 3D view), target, etc. |

| Transforms                                                                                                     |
| -------------------------------------------------------------------------------------------------------------- |
| Transform topics to toggle and configure; see each transform topic's parent frame, translation, rotation, etc. |

| Topics                                       |
| -------------------------------------------- |
| Visualization topics to toggle and configure |

| Custom Layers                         |
| ------------------------------------- |
| Customizable grids to add to 3D scene |

| Publish |                                                                                                                 |
| ------- | --------------------------------------------------------------------------------------------------------------- |
| Type    | Marker type to click (pose estimates, poses, or points)                                                         |
| Topic   | Topic to which clicked pose estimate, pose, or point should be published; only possible with a live data source |

Publish markers

Shortcuts

To move the camera:

w – Forward

a – Left

s – Backward

d – Right

z, or Scroll up – Zoom in

x, or Scroll down – Zoom out

Drag – Parallel to the ground. Will disengage “follow” mode, if enabled.

Right-click + drag – Pan and rotate. Dragging horizontally rotates around the world's z-axis; dragging vertically pans around the x and y axes

Shift + other action – Adjusts all values to be 1/10 of baseline values; allows for more precise movements and adjustments


Display visualization markers in a 2D or 3D scene.

3d panel

Table of contents

Introduction

Transforms

Supported messages

User interactions

Settings

Shortcuts

Introduction

By publishing specifically formatted marker messages to a topic, you can programmatically add primitive shapes (arrows, spheres, etc.) and more complex visualizations (occupancy grids, point clouds, etc.) to your 3D panel's scene.

Choose the topics you want to display via the topic picker, and configure each topic's visualization settings using the "Edit topic settings" menu.

3d panel topic-picker

Transforms

To translate or rotate the placement of your markers, publish transform messages to define the spatial relationship between two coordinate frames. To successfully apply this transformation to your markers, your transform message must include its own frame\_id and a child\_frame\_id (i.e. your markers' frame\_id).

In ROS, transform interpolation works by holding a buffer of every received transform in the last 10 seconds for each coordinate frame, and transforms are always done at a point in time. If the requested time falls between two transforms for any coordinate frame(s) between the child and parent, LERP and SLERP are used for interpolation (using the marker's frame\_locked attribute). To translate between two sibling frames, search for a common parent and conduct a transform from A to parent, followed by an inverse transform from parent to B. To accomplish this, all coordinate transformations must be parameterized by time, instead of always using the latest transform.

The 3D panel does handle future transform requests differently from the ROS implementation. It clamps any future time to the latest received transform timestamp. This removes a poorly documented tuning parameter and reduces user surprise when a transform can't be found because the window is slightly too old.

Supported messages

This section describes the datatypes for supported messages. To use this panel, your data source must provide messages conforming to one of the supported datatypes.

ColorRGBA

A color in RGBA format.

| Framework | Datatype                |
| --------- | ----------------------- |
| ROS 1     | std\_msgs/ColorRGBA     |
| ROS 2     | std\_msgs/msg/ColorRGBA |
| Custom    | foxglove.Color          |

LaserScan

A single scan from a planar laser range-finder.

| Framework | Datatype                   |
| --------- | -------------------------- |
| ROS 1     | sensor\_msgs/LaserScan     |
| ROS 2     | sensor\_msgs/msg/LaserScan |
| Custom    | foxglove.LaserScan         |

Marker

A visualization marker (i.e. arrows, cubes, spheres, etc.) to be displayed within your scene.

| Framework | Datatype                       |
| --------- | ------------------------------ |
| ROS 1     | visualization\_msgs/Marker     |
| ROS 2     | visualization\_msgs/msg/Marker |

For markers with a mesh\_resource field, load the mesh using the following URL types:

http(s)://

package:// (Desktop app only)

file:// (Desktop app only)

The mesh resource must be in one of the following file formats:

glTF (.glb)

STL (.stl)

COLLADA (.dae)

MarkerArray

An array of various visualization markers to be displayed within your scene.

| Framework | Datatype                            |
| --------- | ----------------------------------- |
| ROS 1     | visualization\_msgs/MarkerArray     |
| ROS 2     | visualization\_msgs/msg/MarkerArray |

OccupancyGrid

2D grid map, with each cell representing the probability of occupancy.

| Framework | Datatype                    |
| --------- | --------------------------- |
| ROS 1     | nav\_msgs/OccupancyGrid     |
| ROS 2     | nav\_msgs/msg/OccupancyGrid |
| Custom    | foxglove.Grid               |

Path

An array of timestamped poses in a named coordinate frame, denoting an object's path through space.

| Framework | Datatype              |
| --------- | --------------------- |
| ROS 1     | nav\_msgs/Path        |
| ROS 2     | nav\_msgs/msg/Path    |
| Custom    | foxglove.PosesInFrame |

PointCloud

A collection of N-dimensional points, which may contain additional fields with information like normals, intensity, etc.

| Framework | Datatype                     |
| --------- | ---------------------------- |
| ROS 1     | sensor\_msgs/PointCloud2     |
| ROS 2     | sensor\_msgs/msg/PointCloud2 |
| Custom    | foxglove.PointCloud          |

PolygonStamped

A polygon with a reference coordinate frame and timestamp.

| Framework | Datatype                          |
| --------- | --------------------------------- |
| ROS 1     | geometry\_msgs/PolygonStamped     |
| ROS 2     | geometry\_msgs/msg/PolygonStamped |

PoseStamped

A timestamped pose in a named coordinate frame.

| Framework | Datatype                       |
| --------- | ------------------------------ |
| ROS 1     | geometry\_msgs/PoseStamped     |
| ROS 2     | geometry\_msgs/msg/PoseStamped |
| Custom    | foxglove.PoseInFrame           |

PoseArray

An array of timestamped poses in a named coordinate frame.

| Framework | Datatype                     |
| --------- | ---------------------------- |
| ROS 1     | geometry\_msgs/PoseArray     |
| ROS 2     | geometry\_msgs/msg/PoseArray |
| Custom    | foxglove.PosesInFrame        |

Transform message

A transform between two named coordinate frames in space.

| Framework | Datatype                |
| --------- | ----------------------- |
| ROS 1     | tf/tfMessage            |
| ROS 1     | tf2\_msgs/TFMessage     |
| ROS 2     | tf2\_msgs/msg/TFMessage |
| Custom    | foxglove.FrameTransform |

VelodyneScan

Velodyne LIDAR scan packets.

| Framework | Datatype                        |
| --------- | ------------------------------- |
| ROS 1     | velodyne\_msgs/VelodyneScan     |
| ROS 2     | velodyne\_msgs/msg/VelodyneScan |

URDF model

URDF robot models are loaded automatically if your data source supports parameters (i.e. a native ROS 1 or ROS 2 connection) and the /robot\_description parameter is set to valid URDF XML.

Override this parameter with a custom http(s)://, package:// (desktop app only), or file:// (desktop app only) URL in the 3D panel's topic picker, under the "3D Model" entry's settings.

User interactions

Click any given marker in the scene to display its relevant details in a dialog box.

3d panel clicked marker

Clicking overlapping markers will display a context menu that lets you select a specific marker. Clicking a point in a point cloud enables you to export the point cloud message as a CSV.

You can also leverage linked variables to dynamically change the data visualized in your other panels. After clicking a marker, hover over the topic field you want to link in the corresponding dialog box (e.g. id). Follow the prompts to link that field to a variable name of your choice (e.g. $my\_marker\_id). Now, whenever you click another marker under that same topic, your variable will update to match the new marker's linked field value.

linked variables

For example, if you click on a visualization marker published under the /tracked\_objects topic, and link its id field to $my\_object\_id, the $my\_object\_id variable will automatically be set to that visualization marker’s id field value (e.g. 1000). Now if you click another /tracked\_objects marker with an id of 2000, that $my\_object\_id variable will automatically be updated to 2000.

This is useful if you want to, for example, plot the selected marker’s velocity – you can open a Plot panel in your layout, and add a line for /tracked\_objects\{id==$my\_custom\_id}.velocity.

The panel controls on the right can be used to do the following:

Set a target frame for the camera to follow – Can also toggle orientation following altogether. By default the scene will follow the center of a frame. When panning, the camera will be offset from, but stay relative to, that original frame center. If you ever get lost in a scene after panning, click "Follow" to snap the camera back to the default position.

Search for text in marker messages

Toggle between 3D and 2D views of the scene

Measure the distance between 2 points – Click to draw points in the scene; only possible in 2D view

Draw pose estimates, poses, and points, and publish them to predetermined topics – Only visible when connected to a live data source like a native ROS 1 or ROS 2, Rosbridge, or Foxglove WebSocket connection
Publish markers

View and edit the camera state – Can also toggle the ability to sync camera positions across multiple 3D panels or to show a crosshair across all 3D panels on hover

Settings

| General              |                                                                                                                     |
| -------------------- | ------------------------------------------------------------------------------------------------------------------- |
| Flatten markers      | Ensures that markers reference the same baseline height when rendering on a plane                                   |
| Auto-text background | Makes text label markers easier to read within the 3D scene                                                         |
| Auto background      | Sets background color based on selected color scheme when toggled on, even if a custom background color is selected |

| Mesh rendering          |                                                                          |
| ----------------------- | ------------------------------------------------------------------------ |
| Ignore COLLADA up\_axis | Ignores orientation metadata in COLLADA files loaded as a mesh\_resource |

| Publish             |                                                                                 |
| ------------------- | ------------------------------------------------------------------------------- |
| Pose estimate topic | Topic to which pose estimates drawn in the 3D scene should be published         |
| Pose topic          | Topic to which poses drawn in the 3D scene should be published                  |
| Point topic         | Topic to which points drawn in the 3D scene should be published                 |
| X deviation         | X standard deviation for the covariance of pose estimates drawn by the user     |
| Y deviation         | Y standard deviation for the covariance of pose estimates drawn by the user     |
| Theta deviation     | Theta standard deviation for the covariance of pose estimates drawn by the user |

Shortcuts

To move the camera:

w – Forward

a – Left

s – Backward

d – Right

z, or Scroll up – Zoom in

x, or Scroll down – Zoom out

Drag – Parallel to the ground. Will disengage “follow” mode, if enabled.

Right-click + drag – Pan and rotate. Dragging horizontally rotates around the world's z-axis; dragging vertically pans around the x and y axes

Shift + other action – Adjusts all values to be 1/10 of baseline values; allows for more precise movements and adjustments

Other:

t – Open topic picker

Esc – Close topic picker

Cmd + f – Search for marker text


View time and topic information for your connected data source.

See the start time, end time, and playback duration of your data source.

You can also view a table with all incoming topics – including their names, datatypes, message counts, and average publish rates.

data source info panel


Display the status of seen nodes (i.e. stale, error, warn, or OK) from a topic with a ROS DiagnosticArray datatype in a running feed, and display the diagnostics data for a given diagnostic\_name/hardware\_id.

Open a Diagnostics – Summary (ROS) panel to see the status of seen nodes (i.e. stale, error, warn, or OK) in a running feed.

diagnostics summary panel

To pin a node to the top of your feed, hover on an entry and click the pin icon that appears.

pin diagnostic

Use the dropdown menu to select the minimum level by which you want to filter your diagnostics.

filter by level

Use the search field to fuzzy filter entries by hardware\_id and node name. Results will be ordered by how early the search text appears in the matched label.

diagnostics summary search

Click any entry to open a corresponding Diagnostics – Detail (ROS) panel with the clicked node’s relevant details. Alternatively, you can manually open a new Diagnostics – Detail panel and input a diagnostic to inspect. The displayed keys and values support rich formatting with basic HTML tags – e.g. \<b>, \<u>, \<table>, etc.

diagnostics summary and detail panels

Settings

For the Diagnostics – Summary (ROS) panel:

| General       |                                                     |
| ------------- | --------------------------------------------------- |
| Topic         | ROS DiagnosticArray topic to subscribe to for nodes |
| Sort by level | Toggle whether you want to sort seen nodes by level |

For the Diagnostics – Detail (ROS) panel:

| General |                                                     |
| ------- | --------------------------------------------------- |
| Topic   | ROS DiagnosticArray topic to subscribe to for nodes |

Supported messages

This section describes the datatypes for supported messages. To use this panel, your data source must provide messages conforming to one of the supported datatypes.

DiagnosticArray

| Framework | Datatype                             |
| --------- | ------------------------------------ |
| ROS 1     | diagnostic\_msgs/DiagnosticArray     |
| ROS 2     | diagnostic\_msgs/msg/DiagnosticArray |


Display raw and compressed images, superimposed with annotations.

Select an image topic to display from the dropdown.

image panel

Supported encoding formats

| Raw images   | Compressed images |
| ------------ | ----------------- |
| 8UC1         | webp              |
| 8UC3         | jpeg              |
| 16UC1        | png               |
| 32FC1        |                   |
| bayer\_bggr8 |                   |
| bayer\_gbrg8 |                   |
| bayer\_grbg8 |                   |
| bayer\_rggb8 |                   |
| bgr8         |                   |
| bgra8        |                   |
| mono8        |                   |
| mono16       |                   |
| rgb8         |                   |
| rgba8        |                   |
| yuv422       |                   |

Annotations

If your robot is publishing CameraCalibration messages for the selected camera, you can go to the Markers section of the panel to toggle on any ImageAnnotations topic. Any given image annotation topic will overlay a combination of CircleAnnotations and PointsAnnotations onto your selected camera image.

For unrectified images, the image markers will be transformed based on the Camera Calibration.

When zooming in or out on an image, image markers will re-render to remain sharp.

User interactions

Right-click on the image to download it as a PNG file.

download as png

Click any displayed image marker to view its details.

marker details

Use the available zoom controls to adjust the image's scale.

image scale

Scroll to zoom, and drag to pan – by default, the maximum zoom will be set to 300%, but this value can be adjusted in the panel settings.

Settings

| General                      |                                                                                                          |
| ---------------------------- | -------------------------------------------------------------------------------------------------------- |
| Camera topic                 | Image topic to display                                                                                   |
| Synchronize markers          | Synchronizes messages from the camera topic and selected markers topics                                  |
| Bilinear smoothing           | Resamples images to minimize visual distortion when resizing, using bilinear interpolation               |
| Flip horizontal              | Flip image horizontally over a vertical axis                                                             |
| Flip vertical                | Flip image vertically over a horizontal axis                                                             |
| Rotation                     | Rotate image by 90°, 180°, or 270°                                                                       |
| Minimum value (depth images) | Minimum scaling value for depth images (default: 0); currently only used for mono16 and 16UC1 images     |
| Maximum value (depth images) | Maximum scaling value for depth images (default: 10000); currently only used for mono16 and 16UC1 images |

| Markers                                       |
| --------------------------------------------- |
| Image annotation markers to toggle on and off |

Supported messages

This section describes the datatypes for supported messages. To use this panel, your data source must provide messages conforming to one of the supported datatypes.

RawImage

| Framework | Datatype               |
| --------- | ---------------------- |
| ROS 1     | sensor\_msgs/Image     |
| ROS 2     | sensor\_msgs/msg/Image |
| Custom    | foxglove.RawImage      |

CompressedImage

| Framework | Datatype                         |
| --------- | -------------------------------- |
| ROS 1     | sensor\_msgs/CompressedImage     |
| ROS 2     | sensor\_msgs/msg/CompressedImage |
| Custom    | foxglove.CompressedImage         |

CameraCalibration

| Framework | Datatype                    |
| --------- | --------------------------- |
| ROS 1     | sensor\_msgs/CameraInfo     |
| ROS 2     | sensor\_msgs/msg/CameraInfo |
| Custom    | foxglove.CameraCalibration  |

ImageAnnotation

| Framework | Datatype                            |
| --------- | ----------------------------------- |
| ROS 1     | visualization\_msgs/ImageMarker     |
| ROS 2     | visualization\_msgs/msg/ImageMarker |

ImageAnnotations

| Framework | Datatype                        |
| --------- | ------------------------------- |
| ROS 1     | foxglove\_msgs/ImageMarkerArray |
| Custom    | foxglove.ImageAnnotations       |


Display a color-coded label to indicate threshold values in your data.

indicator panel

Settings

| General |                                                  |
| ------- | ------------------------------------------------ |
| Data    | Message path to the data value you want to track |
| Style   | Style of indicator ("Bulb" or "Background")      |

Add, edit, and reorder the rules for when the indicator should display different colors or labels.

| Rules (first matching rule wins) |                                                                                                                                                                        |
| -------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Comparison                       | How you want to compare your incoming data with your threshold value ("Equal to", "Less than", "Less than or equal to", "Greater than", or "Greater than or equal to") |
| Compare with                     | Threshold value (string, number, or boolean) to compare your incoming data against                                                                                     |
| Color                            | Color to display when the above rule is met                                                                                                                            |
| Label                            | Text label to display when the above rule is met                                                                                                                       |


Panels are modular visualization interfaces that can be configured and arranged into Studio layouts.

Find the full list of available panels in the sidebar's Add panel tab.

panels tab

Hover over any entry to see a thumbnail image and short description of that panel.

panels thumbnail

Click any panel name to add it to your current layout. Alternatively, drag and drop a panel name into your current layout to add it to a specific location.

Each panel's top bar contains the following:

Help icon to open related documentation in the Help sidebar

Fullscreen icon to view the panel in fullscreen mode

Cog icon menu that shows options for viewing your panel settings and conducting common panel actions

Drag handle for easily moving the panel around your layout

Panel settings

You can also open the sidebar's Panel settings tab and click on a panel in your layout to edit its settings. The selected panel will be designated with a purple border.

panel settings tab

Clicking another panel while the Panel settings tab is open will automatically display its settings in the sidebar.

Shortcuts

Cmd + click – Select panel to group into a Tab panel

Cmd + a – Select all panels in the current layout

Hover on panel + \` – Show panel shortcuts, with ability to view full-screen


Display Log messages from topics.

Filter incoming messages by:

Severity level – The minimum severity of messages to show.

Node names or message text – A comma-separated list of filter terms.

The severity filter is always enforced — i.e. messages below the minimum severity will never appear, even if their node names or message texts match the text filter.

The filter terms for node names or message text will execute as an OR – i.e. it will return messages that match any of the terms.

Supported messages

This section describes the datatypes for supported messages. To use this panel, your data source must provide messages conforming to one of the supported datatypes.

Log

| Framework | Datatype                |
| --------- | ----------------------- |
| ROS 1     | rosgraph\_msgs/Log      |
| ROS 2     | rcl\_interfaces/msg/Log |
| Custom    | foxglove.Log            |


Display points on a world map, using topics that contain LocationFix messages.

map panel

These points may be surrounded by circles that represent their accuracy - i.e. the larger the circle, the less accurate the coordinates. Points generated while the GPS receiver does not have a fix are displayed in a darker red, to denote that their coordinates are likely invalid

User interactions

Hover over the playback bar to highlight map points corresponding to that time.

Hover over a point on the map to highlight its corresponding time in the playback bar.

Click a point to seek playback to that time.

Scroll over the map to zoom

Settings

| General             |                                                                                                                                             |
| ------------------- | ------------------------------------------------------------------------------------------------------------------------------------------- |
| Tile Layer          | "Map", "Satellite", or "Custom" view                                                                                                        |
| Custom map tile URL | Displayed only when the "Custom" tile layer is selected; URL to your custom map tiles, in https\://my.custom.url/\{x}/\{y}/\{z}.webp format |
| Follow topic        | Topic with LocationFix schema to follow in the panel viewport                                                                               |

The Topics section allows you to toggle visibility and set colors for LocationFix or GeoJSON topics when superimposed on the map.

Supported messages

This section describes the datatypes for supported messages. To use this panel, your data source must provide messages conforming to one of the supported datatypes.

LocationFix

| Framework | Datatype                   |
| --------- | -------------------------- |
| ROS 1     | sensor\_msgs/NavSatFix     |
| ROS 2     | sensor\_msgs/msg/NavSatFix |
| Custom    | foxglove.LocationFix       |

GeoJSON

| Framework | Datatype         |
| --------- | ---------------- |
| Custom    | foxglove.GeoJSON |


Read and set parameters from the connected data source.

Connect to a ROS native connection to see a live view of all current rosparams. Conversely, edit the parameter values to publish rosparam updates back to your ROS stack.


Plot arbitrary values from topic message paths, specified using message path syntax.

When playing back a pre-recorded data source (e.g. a local or remote .bag file), this panel will preload the data belonging to the specified topic message paths for the whole playback timeline.

Current playback time will be indicated by a vertical gray bar.

Y-Axis

Using message path syntax, specify the path to the y-axis data you want to plot. Alternatively, enter a number to add a horizontal line at that value.

If you enter a message path that points to multiple values (e.g. /some\_topic/some\_array\[:].x), the plot will display a scatter plot of points at each x-axis tick.

plot panel

X-Axis

There are 3 possible values for the x-axis: incoming messages' timestamp, y-axis values' indices, or data at a user-specified message path.

All Plot panels with a time-based x-axis will automatically be synced with each other – when a user pans or zooms in one time-based Plot panel, all other time-based Plot panels will pan or zoom accordingly to maintain the same viewport.

Timestamp

By default, the panel plots y-values against incoming messages' timestamp. It is possible to specify whether the timestamp is taken from message's receive time or its header stamp in each series' details menu. All Plot panels with timestamp x-axes in a given layout will be kept in sync for easy comparison.

plot with timestamp x-axis

Index

In this mode, adding message path /some\_topic.some\_array as a new line in the plot will chart that array's values against their respective indices. For example, if /some\_topic.some\_array contained the values \[5, 10, 15], the resulting points on the chart would be \[0, 5], \[1, 10], and \[2, 15].

This plots just the data from the latest tick, and should always point to an array of values.

plot with index x-axis

Message path

Using message path syntax, specify the path to the x-axis data you want to plot, e.g. /some\_topic.position.x. You can choose to plot data from just the most recent tick ("msg path (current)") or from all matching messages throughout playback ("msg path (accumulated)").

plot with path x-axis - current

plot with path x-axis - accumulated

User interactions

Click into the details menu for each data series in the legend to configure that series' line color and timestamp ordering method.

Scroll to zoom, and drag to pan. By default, scrolling will zoom horizontally only. To zoom vertically, hold v while scrolling. To zoom horizontally and vertically at the same time, hold b while scrolling. Click the "reset view" button or double-click the panel to reset to the original viewport.

Hover over any point on the plot to see its details in a tooltip. You'll see a vertical yellow bar appear, as well as a corresponding yellow marker at the same on the playback timeline. Click to seek playback to the yellow marker on the timeline.

Click the download icon in the top left to download the plotted data as a .csv file.

download csv

Math modifiers

The following Math functions are available to append to your Plot panel's message paths:

.\@abs

.\@acos

.\@asin

.\@atan

.\@ceil

.\@cos

.\@derivative

.\@log

.\@log1p

.\@log2

.\@log10

.\@negative

.\@round

.\@sign

.\@sin

.\@sqrt

.\@tan

.\@trunc

Note that .\@derivative will not work with scatter plots (i.e. message paths that point to an array of values for each x-axis tick).

See the Javascript Math documentation for more details.

Settings

| General                    |                                                                                                                                     |
| -------------------------- | ----------------------------------------------------------------------------------------------------------------------------------- |
| Title                      | Plot title                                                                                                                          |
| Sync with other plots      | Sync to other Plot panels with a timestamp-based x-axis                                                                             |
| Legend position            | Display the legend next to, instead of superimposed onto, the chart                                                                 |
| Show plot values in legend |  Show the corresponding y value next to each series in the legend (either at the current playback time or at a point on user hover) |
| Show x-axis label          | Display label for the x-axis                                                                                                        |
| Show y-axis label          | Display label for the y-axis                                                                                                        |
| Y max                      | Fixed maximum value for y-axis                                                                                                      |
| Y min                      | Fixed minimum value for y-axis                                                                                                      |

| Time series only  |                                                                        |
| ----------------- | ---------------------------------------------------------------------- |
| X range (seconds) | Width of the plot's viewport width (in seconds) as it follows playback |

Shortcuts

Scroll – Zoom horizontally

v + Scroll – Zoom vertically

b + Scroll – Zoom both horizontally and vertically


Publish messages on a given topic back to your ROS stack.

Specifying the topic you want to publish your message on will automatically infer its datatype and populate the text field with a JSON message template.

Clicking into the datatype field will provide a dropdown list of common ROS datatypes. Selecting a datatype will also populate the text field with a JSON message template.

Edit the template to customize the message you want to send back to your ROS stack, before hitting "Publish".

publish panel

The "Publish" button will be disabled if Studio is not connected to a ROS source.

Settings

| General        |                                                                                        |
| -------------- | -------------------------------------------------------------------------------------- |
| Editing mode   | Whether you want to edit the message to publish back to your ROS stack; defaults to On |
| Button title   | Defaults to "Publish"                                                                  |
| Button tooltip |  Defaults to "Connect to ROS to publish data"                                          |
| Button color   |  Defaults to green                                                                     |


Display incoming topic data in an easy-to-read collapsible JSON tree format.

Use message path syntax to specify the message path you want to inspect.

As new messages are received for a given path, the collapsible JSON tree will show just the latest data. You will be able to expand and collapse keys, and have those changes persist across playback.

raw messages panel

A link to the topic's datatype is at the top of display for easy reference.

raw messages datatype

Drilling down to a primitive value (i.e. number, string, boolean) will display that value in large text.

raw messages large num display

Diff Mode

Compare messages by showing additions (green), deletions (red), and changes (yellow) to their fields across 3 categories:

"previous message" – Compare consecutive messages for a given message path

"other source" - Compare messages from different data sources for a given timestamp

"custom" – Compare different topic messages for a given timestamp

raw messages diff prev msg
raw messages diff custom

User interactions

Click "Copy msg" to copy the current topic message to your clipboard. Click the icon next to the message path to expand or collapse all nested fields in the displayed message.

raw messages expand
raw messages collapse

Settings

| General     |                                                                                                                                                        |
| ----------- | ------------------------------------------------------------------------------------------------------------------------------------------------------ |
| Auto Expand | "Off" (default) collapses all fields, "On" expands all fields, and "Auto" expands fields under a certain size (i.e. arrays with fewer than 5 elements) |


Specify the channels for which to display internal logs. Displayed only when the experimental feature for "Studio Debug Panels" is toggled on in the app's settings.

Internal logs can be viewed in the app's Developer Tools console.

studio logs panel


Display playback and data-streaming performance statistics. Displayed only when the experimental feature for "Studio Debug Panels" is toggled on in the app's settings.

playback performance panel

The following statistics are displayed for a given playback session. "Instantaneous" statistics are reported based on the most recent frame, and also are averaged over the last 5 seconds.

Playback speed

The player tries to play at the speed specified by the user, but may not be able to keep up, given heavy layouts and large amounts of data. This chart displays the actual playback speed as a ratio of bag time to playback time.

Frame rate

The number of frames played per second. Though the player can play back at up to 60fps, this statistic will be lower if frames take longer than 16ms to render.

Bag frame time

The duration in bag-time for the rendered frames in milliseconds. To "keep up" with playback, Studio will often emit "larger" frames.

Data throughput

The amount of data received by the player in megabits per second. For remote bags, this includes topics that the player is not subscribed to.
This statistic does not account for Content-Encoding compression, so it may be larger than the actual network bandwidth.


Group related panels into tabs to organize your layout and save space.

Select panels to group using Cmd + click. Simply click a selected panel to deselect it. It's important to note that selecting multiple panels is disabled when the Panel settings tab is open, as only one panel can be selected at a time for editing.

Hovering over a selected panel will present the following options:

selecting tab action

Group in tab

Combines selected panels under a single tab in a new Tab panel

Use to organize layout by keeping related panels together

For panels that should moved around the layout together

Create x tabs

Create separate tabs for each selected panel in a new Tab panel

Use to conserve space in a crowded layout

For panels that do not need to be visible all the time or all at once

You can also create a Tab panel by adding a blank one to your layout from the sidebar's Add panel tab. Add child panels directly from the Add panel tab, or drag and drop existing panels in the layout into your Tab panel. Panels can also be dragged and dropped out of a Tab panel.

To name a tab, click into its default name to edit it. Add more tabs to an existing Tab panel using the plus icon. Drag and drop tabs to reorder them, either within their parent Tab panel and across multiple Tab panels.

Shortcuts

Cmd + click – Select panels to group

Cmd + a – Select all panels in the current layout


Display topic data in a tabular format.

Use message path syntax to drill down to an array of values inside a message.

Each element in that array will now be displayed as a separate row in your table, and each field in each element will be displayed as a separate column.

e.g. for a topic like /perception.tracked\_objects, you may see something like:

| id  | type    | isMoving |
| --- | ------- | -------- |
| 123 | "human" | true     |
| 456 | "car"   | false    |
| 789 | "car"   | true     |

As you play through your data, the table's values will update with the latest message values.

To sort the table rows by a specific column's values, click that column's header. To multi-sort, hold Shift to click multiple column headers.


Teleoperate your robot by publishing geometry\_msgs/Twist or geometry\_msgs/msg/Twist messages on a given topic back to your live ROS stack.

teleop panel

To use the control pad to teleoperate your connected robot, you must be connected to your robot via a native or Rosbridge connection.

For more information on how to connect to a live ROS stack, check out our supported data sources.

Settings

| General      |                                                                                          |
| ------------ | ---------------------------------------------------------------------------------------- |
| Publish rate | Rate of publishing your geometry\_msgs/Twist or geometry\_msgs/msg/Twist messages        |
| Topic        | Topic to publish live geometry\_msgs/Twist or geometry\_msgs/msg/Twist messages to       |
| Up button    | Field (linear or angular x, y, or z) and value to publish when pressing the up button    |
| Down button  | Field (linear or angular x, y, or z) and value to publish when pressing the down button  |
| Left button  | Field (linear or angular x, y, or z) and value to publish when pressing the left button  |
| Right button | Field (linear or angular x, y, or z) and value to publish when pressing the right button |

Supported messages

This section describes the datatypes for supported messages. To use this panel, your data source must provide messages conforming to one of the supported datatypes.

Twist

| Framework | Datatype                 |
| --------- | ------------------------ |
| ROS 1     | geometry\_msgs/Twist     |
| ROS 2     | geometry\_msgs/msg/Twist |


Display a graph visualization of the current node and topic topology.

To use this panel, you must be connected to a live ROS system via a native or Rosbridge connection. Use the native connector for best results.

The graph will show nodes, topics, and services. Nodes implement services, and either subscribe or publish to topics. The direction of the graph's arrows will denote whether a node is subscribing to or publishing a topic.

Nodes – blue rectangles

Topics – purple diamonds

Services – red rectangles

User interactions

If any items in the graph are overlapping, click and drag to reposition them for easier viewing.

topic graph panel

Use the available controls to accomplish the following:

Zoom fit – Fit the graph within the viewport

Orientation – Toggle the graph's orientation

Showing services / Hiding services – Toggle the visibility of the services

Showing x topics – Toggle between displaying different groups of topics

topic groups to toggle

Shortcuts

Scroll – Zoom


Drag and drop a Unified Robot Description Format (URDF) file to visualize it.

Settings

| General        |                                                                                   |
| -------------- | --------------------------------------------------------------------------------- |
| Manual Control |  Set the robot model's joint positions manually                                   |
| Topic          |  JointState topic for updating the visualization live; defaults to /joint\_states |

URDF viewer panel

When connected to a live ROS system, the panel will also display the /robot\_description parameter.

Supported messages

This section describes the datatypes for supported messages. To use this panel, your data source must provide messages conforming to one of the supported datatypes.

JointState

| Framework | Datatype                    |
| --------- | --------------------------- |
| ROS 1     | sensor\_msgs/JointState     |
| ROS 2     | sensor\_msgs/msg/JointState |


Use a code editor sandbox to write scripts that publish pseudo-ROS topics internally to Studio. Manipulate, reduce, and filter existing ROS messages and output them in a way that is useful to you.

Getting started

User Scripts uses TypeScript to typecheck messages in your scripts.

TypeScript is a superset of JavaScript, so you can Google syntactic questions (e.g. how to manipulate arrays, or access object properties) using JavaScript terms, and semantic questions (e.g. how to make an object property optional) using TypeScript terms.

Resources:

Basic Types

Gitbook

Writing your first script

Every script must declare 3 exports:

Inputs array of topic names

Output topic name

Node function that takes messages from input topics and publishes messages under your output topic

Here is a basic script that echoes its input on a new output topic, /studio\_script/echo:



If you drag in a .bag file, you should now be able to inspect the /studio\_script/echo topic in the Raw Message panel.

When you create a new script, you’ll be presented with some boilerplate:



You’ll notice a few things:

The types Input and Message are being imported from the ./types module

The type Output has no properties

The type GlobalVariables is declared for convenience

Input is a generic type, meaning that it takes a parameter in order to be used. It is left empty on purpose as you'll need to populate it with the name of your input topic, e.g. Input\<"/rosout">.

As for the Output type, you can either manually type out your output with the properties you care about or use one of the dynamically generated types from the Message type imported above. For instance, if you want to publish an array of markers, you can return the type Message\<"visualization\_msgs/MarkerArray">.

The GlobalVariables type is used to specify the types of any variables you'd like to access in your script. It is not required.

It's not always obvious how message properties affect the visualized output – strictly typing your scripts helps you debug issues at compile time rather than at runtime. With that said, you can disable Typescript checks when working on a rough draft of your script by adding // @ts-expect-error on the line above the one you want to ignore.

Using multiple input topics

In some cases, you will want to define multiple input topics:



This snippet uses union types to assert that the message in the node function can take either a /rosout or /tf topic. Use an if/else clause to differentiate between incoming topic datatypes when manipulating messages.

To combine messages from multiple topics, create a variable in your script's global scope to reference every time your node function is invoked. Check timestamps to make sure you are not publishing out-of-sync data.



Using global variables

The node function will receive all of the variables as an object every time it is called. If the variables change, the node function will automatically re-run with the new values:



Debugging

For easier debugging, invoke log(someValue) anywhere in your script to print values to the Logs section at the bottom of the panel. The only value you cannot log() is one that is, or contains, a function definition. You can also log multiple values at once, e.g. log(someValue, anotherValue, yetAnotherValue).

The following log statements will not produce any errors:



But these statements containing function definitions will:



Invoking log() outside your node function will invoke it once, when your script is registered. Invoking log() inside your node function will log that value every time your node function is called.

Note that if your topic publishes at a high rate, using log() will significantly slow down your code.

FAQ

What if I don't want to produce a message every time publish is called?

Do an early (or late) return in your function body when you don't want to publish. For example, let's say you only wanted to publish messages when a constant in the input is not 3:



In Typescript, if you return without a value, it will implicitly return undefined. Note the union return type for the node function – we've indicated to Typescript that this function can return undefined.

Can I return arbitrary JSON data in a message?

Yes! User Scripts supports the json type. You can import it from the ./types module:



Utilities and templates

The sidebar's Utilities tab includes functions that can be imported for use in any script (e.g. import \{ compare } from "./time.ts"). The types.ts utility file is generated from the currently loaded data source, and contains type definitions for all found datatypes.

To contribute your own utility function, open a pull request to add it to our codebase.

We currently do not allow importing 3rd-party packages, but let us know if there are packages that would be useful to you!

The Templates tab includes boilerplate for writing common scripts, like one that publishes a MarkerArray. If you have any other use cases that would work well as a template, please let us know.

Settings

| General             |                                              |
| ------------------- | -------------------------------------------- |
| Auto-format on save |  Auto-format the code in your script on save |


Use a customizable slider interface to quickly update a numerical variable value.

variable slider panel

Settings

Variable name – The name of the variable you want to control with this slider.

Min – The slider's minimum value.

Max – The slider's maximum value.

Step – The slider's increments when going from the min to max value.


While creating a Foxglove account is not necessary to use Foxglove Studio, signing in does allow you to access several unique features:

Save your Studio layouts to a remote store, to sync them across multiple devices

Share and collaborate on layouts with other members of your organization

Store and manage your team's robotics data using Foxglove Data Platform

Open the Studio app and follow the prompts in the sidebar's Account tab to sign in:

sign in prompt

This will open a browser window and take you to our web console. When you sign up for the first time, you must create or join an organization, even as a solo user.

select org

Once signed in, you will have access to your Foxglove dashboard, where you'll be able to manage your organization's members, view your team layouts, and manage your shared data.


Foxglove Studio is an open source visualization and debugging tool for your robotics data. It is available in a variety of ways to make development as convenient as possible – it can be run as a standalone desktop app, accessed via your browser, or even self-hosted on your own domain.

foxglove studio

Many native robotics tools (like those in the ROS ecosystem) are only supported on Linux, but the Studio desktop app works cross-platform on Linux, Windows, and macOS. Even if your ROS stack is running on a different operating system, Studio can communicate with your robot without a hitch.

Fully integrated

With Studio, all bells and whistles come included.

We’ve taken the dizzying array of tools that robotics development usually requires, and integrated them into one delightfully seamless developer experience.

By streamlining how you analyze, debug, and make sense of your robotics data, we hope you can spend less time setting up your tools, and more time focusing on what your robots are doing.

Modular and flexible

Studio provides a rich suite of visualization and debugging panels – from interactive charts and 3D visualizations, to camera images and diagnostics feeds. Whether you’re shadowing your robot in real-time or debugging an issue in a recorded .bag file, these panels will help you tackle a diverse range of common robotics tasks.

These panels can then be configured and arranged within custom layouts to accommodate any project’s unique needs and workflows. By leveraging these modular building blocks, you can build your own robotics control center from scratch – just the way you want it. Our suite of panels is always growing.

Our extensions API also empowers you to create your own custom panels, tailored to your project's specific needs. You can contribute your extension to our public extensions registry, or search it to install useful extensions contributed by your fellow roboticists.

By keeping Studio customizable and flexible, we hope to adapt to the ever-evolving landscape of robotics without missing a beat.

Open source and community-driven

Open source software has played a huge role in helping us develop Foxglove Studio, and so we plan to keep our own software open source. We know that in building a tool that wholly reimagines robotics data visualization, our best collaborators would be our own users.

Our team exists to accelerate your robotics development, so we are constantly brainstorming new ways how our users can leverage Studio to rush to the bleeding edge of robotics. Everything about how we operate – from our Slack concierge, our actively monitored GitHub issues and discussions, and comprehensive documentation – revolves around us helping you make your robot go.

We're also committed to contributing our own software back to the community.

If you have questions, feature requests, or compliments to send our way, we are happy to receive them. Here are the many ways you can get in touch with our team:

Slack

GitHub issues and discussions

LinkedIn

Twitter

Email
