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.


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 provides a REST API, Python client library (py-data-platform), and CLI tool to manage your robotics data.


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 |


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

Visit our web consoleto get started. When you sign up for the first time, you must create or join an organization.

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 Data Platform provides a web UI for interacting with your robotics data as .bag or .mcap files.

After signing into your Foxglove Data Platform account at console.foxglove.dev, you can explore your team's data via several views:

Devices

Lists your team's robots

Clicking into a device will switch to the Files view for that robot

Files

Lists all imported data by the discrete files that were imported

Events

Lists all events with associated devices and metadata

Timeline

Displays all imported data in chronological order

Layouts

Displays all layouts for your team

From these pages, you and your teammates can take the following actions:

Add and view devices

Import data

Export data

Visualize data

Add and view events

Supported file formats

Foxglove Data Platform supports importing and exporting your data in the following file formats:

ROS 1 bag files (.bag)

MCAP files (.mcap)

You can use the mcap CLI tool to convert your ROS 1 .bag files or 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.

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



Add and view devices

Click the "Add device" button at the top of the Devices page to create a uniquely named robot for your team to track.

add device

All data that your team imports in the future must be tied to one of these created devices.

The Devices page will update to list all your robots – clicking any of these will go to a page with all that device's associated imported data.

Import data

Click the "Import data" button at the top of the Files page to start adding your team's robotics data to the platform. We currently support ROS 1 .bag files or MCAP files. For ROS 2 data, you can use the mcap CLI tool to convert your ROS 2 files to the MCAP file format before importing.

import

Each import must be associated with the corresponding device that it was recorded on.

Export data

Use the Timeline view's date picker to find data to export or stream:

search

You can use the date picker or the "year", "month", or "week" tabs to navigate to time ranges of interest. From any of these views, you can click a column to zoom in on the data you want.

After locating the data you need in the "hour" view, click a coverage bar or select a time range (by dragging and clicking the selected region). You can export this data as a .bag or .mcap file, or stream it in Foxglove Studio for immediate visualization.

Visualize data

From either the Files and Events page, select an import or event to "View in Studio".

view in Foxglove Studio

Add and view events

Go to the Devices page and click into a device to navigate to its page.

From there, click into the "Create event" button at the top of the page to create an event of interest to 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.

Use the Events view to view all events with their associated metadata and devices.

You can also search all created events by criteria like device, time range, and metadata.

search events


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

Specify the topic name to display all messages for that topic, e.g. /some\_topic.

To access nested fields, first specify the topic, then use dot notation to drill down into a nested field, e.g. /some\_topic.some\_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, e.g. /some\_topic.many\_values\[0].width.

Slices

Slices will return an array of values, e.g. /some\_topic.many\_values\[1:3].x or even /some\_topic.many\_values\[:].x to get all values.

Negative slices work backwards from the end of the array, e.g. \[-1] gets the last element, and \[-2:-1] gets the last 2 elements.

Slice on a variable, e.g. /some\_topic.many\_values\[$my\_start\_idx:$my\_end\_idx].

Filters

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

Filter on fields in the top-level message using curly brackets – e.g. /some\_topic\{foo.bar==123}. 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: /some\_topic.many\_values\[:]\{id==123}.x.

In addition to filtering on primitive values, you can filter on a variable: /some\_topic.many\_values\[:]\{id==$my\_id}.

When you apply multiple filters, only messages that satisfy all filters will be returned (i.e. an AND expression): /some\_topic.many\_values\[:]\{some\_str\_field=="abc"}\{some\_num\_field==5}\{some\_boolean\_field==false}.x.

We don't support escaping quotation marks in strings, but you can use single or double quotes, which allows you to express most strings, e.g. \{value='string with "double" quotes'}.


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, or boolean value.

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:Foxglove Data Platform: foxglove-data-platformFoxglove WebSocket: foxglove-websocketRemote ROS 1 bag files: ros1-remote-bagfileRosbridge WebSocket: rosbridge-websocket | ✓        | 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 |

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   |

Foxglove WebSocket data

Must be used with ?ds=foxglove-websocket.

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

Remote ROS 1 bag files

Must be used with ?ds=ros1-remote-bagfile.

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

Rosbridge WebSocket connections

Must be used with ?ds=rosbridge-websocket.

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


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 | Live data                  | Pre-recorded data                     |
| --------- | -------------------------- | ------------------------------------- |
| ROS 1     | ROS 1, Rosbridge WebSocket | ROS 1 bag (.bag) file - local, remote |
| ROS 2     | ROS 2, Rosbridge WebSocket | ROS 2 bag (.db3) file - local only    |
| PX4       | N/A                        | PX4 ULog (.ulg) file - local only     |
| Custom    | Foxglove WebSocket         | MCAP file - local, remote             |

On opening Foxglove Studio, you will see a dialog with a list of all possible data sources.

data source dialog

Click into any of the listed options to start seeing your data inside Foxglove Studio.

After loading or connnecting to a data source, open the the Data sources tab in the app's 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 and 2 .bag files, .ulg files) are preloaded into Foxglove Studio, which means you can visualize data over the course of the entire file at once.

If you're interested in support for data formats that are not currently included, please share what protocols or serialization formats you're using.


Foxglove Studio can load live data via an encoding-agnostic Foxglove WebSocket connection.

The Foxglove WebSocket connection in Foxglove Studio allows you to connect to a server via an encoding-agnostic WebSocket connection. We currently support receiving Protobuf and JSON data.

The server transmitting data will advertise a set of channels to Foxglove Studio. Each channel has a human-readable topic name, as well as information about the data's format, or encoding, and its structure, or schema. For more information on how to set up your own server, reference the protocol specification and our examples (Python, TypeScript).

Encoding support

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 in the JSON object as a base64-encoded string, and in the schema using contentEncoding (for example, \{ "type": "string", "contentEncoding": "base64" }).

For channels with encoding: "protobuf", Studio expects the schema to be a base64-encoded binary FileDescriptorSet (as produced by protoc --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. To get your data in a format Studio understands, you can find .proto files that are compatible with the standard ROS data types in our foxglove/ros-message-schemas repo.

Please get in touch if there are other data formats that your team would like to see supported.

Getting started

The foxglove/ws-protocol repo provides both Python and JavaScript/TypeScript packages you can install to build your own custom Foxglove WebSocket servers and clients.

It also includes a @foxglove/ws-protocol-examples npm package that provides example servers and clients. You can run these examples to explore how Foxglove Studio can receive system stats and image data from a custom WebSocket server.



Loading data in Foxglove Studio

To see your Foxglove WebSocket server data in Foxglove Studio, select Open connection in the Data source dialog, and click on the Foxglove WebSocket tab. Enter the URL to your WebSocket server:

foxglove websocket dialog

The repo also includes code templates for building your own custom server (Python or JavaScript/TypeScript) and client (JavaScript/TypeScript).


Foxglove Studio can inspect data recorded in MCAP (.mcap) files, stored locally on your computer.

To load a local MCAP file, select Open local file in the Data source dialog, then click on the file you want to playback. Alternatively, you can double-click the file from your file manager, or drag it directly into the app.

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

For more information on the MCAP file format, check out the GitHub repo and our blog post Introducing the MCAP File Format.


The easiest way to start seeing data in Studio is to connect to a running ROS system – this is a native TCP (Transmission Control Protocol) connection that accesses your ROS master and nodes directly.

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.

To get a ROS master running, run roscore in your terminal.

Now select Open connection in Studio's Data source dialog, and click on the ROS 1 or ROS 2 tab (depending on the ROS version you are running).

For ROS 1, enter your ROS\_MASTER\_URI (ROS master's IP and port), as well as your 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.


Studio can inspect data recorded in PX4 ULog (.ulg) files, stored locally on your computer.

To load a local .ulg file, select Open local file in the Data source dialog, then click on the file you want to playback. Alternatively, you can double-click the file from your file manager, or drag it directly into the app.


Studio can inspect data recorded in ROS 1 .bag files, either loaded from your local filesystem or fetched from a remote URL.

To load a local .bag file, select Open local file in the Data source dialog and select the file you want to playback. Alternatively, you can double-click the file from your file manager, or drag it directly into the app.

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

bag file dialog

You are now loading your pre-recorded ROS data!

To test, add a Raw Messages panel to your layout, and see a list of available topics populate the dropdown.


Studio can inspect data recorded in ROS 2 .bag files, stored locally on your computer.

Select Open local file in the Data source dialog, then click on the directory containing your ROS 2 data to load it into Studio. The directory should contain the following:

metadata.yaml – Required for playback

.db3 files – Database files for sqlite3

Current limitations

Due to upstream limitations of ROS 2, ROS 2 bags cannot decode custom message type definitions for useful visualization in Studio. Use the mcap CLI tool to convert your .db3 files into self-contained MCAP files with the necessary message definitions.


A rosbridge connection connects Studio to your ROS master over WebSockets.

Because a rosbridge connection uses a standard protocol and only requires one port to be open on your ROS host, this is a better option if you have a network firewall between ROS and Studio. On the flip side, it does require running an extra ROS node – rosbridge\_server.

Before you start, make sure you’ve installed rosbridge-suite. On Ubuntu / Debian, the package name is ros-\<version>-rosbridge-suite:



Next, ensure you do not already have a ROS master running, and start the WebSocket server:



Review the printout to determine which port the server is listening on (e.g. ws\://0.0.0.0:9090).

Now in Studio, select Open connection in the Data source dialog, and click on the Rosbridge (ROS 1 and 2) tab. 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

Both ROS 1 and ROS 2 Rosbridge connections allow publishing back to your ROS stack.

However, both do not yet support reading or setting ROS parameters.


Connect directly to Velodyne LIDAR hardware to inspect incoming data.

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

velodyne LIDAR dialog


Build your own Foxglove Studio panels by writing custom extensions, using the @foxglove/studio SDK and @foxglove/fox extension tool.

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.

To empower users to develop tools customized to their specific needs, Studio's extensions library provides an API for building and installing bespoke panels. This allows developers to create custom extensions in TypeScript using the @foxglove/studio SDK. These extensions can then be loaded and executed in the Studio app.

extensions

Currently, users can create extensions to add custom panels. In the future, users will also be able to create Studio extensions for different file formats and data sources.

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 fox, Studio's extension tool, 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, check out @foxglove/studio

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



The extensionContext contains your panel's root element, as well as various API methods for interfacing with the rest of Studio.

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 Foxglove Studio's own turtlesim extension for an example of a panel written without React.

Your panel files must include:

Panel component definition – Accepts an argument with a context field (for more info on the PanelExtensionsContext type, check out @foxglove/studio)



Exported initialization function – Initializes your defined panel component



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.


For full details on the PanelExtensionContext and RenderState types, check out @foxglove/studio.

In the example panel component code (ExamplePanel.tsx), you'll notice some attributes and methods attached to your context.

For one, the panel is rendered to context.panelElement, which stands for the panel's root element. You should attach your component to this root element.



Let's cover some of the most relevant API methods attached to your context.

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: string\[])

Use context.subscribe to indicate the topics that your panel should subscribe to when populating renderState.currentFrame.



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.



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.



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).



Defining metadata

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

name

publisher

version

description

Distributing .foxe files

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

You can now upload your extension code to the public extension marketplace, for other users to reference and install.

Alternatively, you can send your .foxe file directly to a collaborator, who can then click into the file to unpack and install the extension into their local \~/.foxglove-studio/extensions folders.


Download Foxglove Studio for your operating system – whether that's Linux, Windows, or macOS.

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

Team layouts

Account required

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 schema has a type. Foxglove Studio's built-in types are documented below.

bytes

Array of bytes, represented as a Uint8Array in JavaScript.

DataField

List of fields included for every entity in an accompanying data field array.

| field  | type             | required | description                           |
| ------ | ---------------- | -------- | ------------------------------------- |
| name   | string           |          | Name of field                         |
| offset | uint32           |          | Byte offset from start of data buffer |
| type   | enum NumericType |          | Type of data in field                 |

enum

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

float

Floating-point number (float32 or float64).

float32

32-bit floating-point number.

float64

64-bit floating-point number.

enum NumericType

Enum for denoting numeric type.

| value | name                    |
| ----- | ----------------------- |
| 1     | UINT8                   |
| 2     | INT8                    |
| 3     | UINT16 (little-endian)  |
| 4     | INT16 (little-endian)   |
| 5     | UINT32 (little-endian)  |
| 6     | INT32 (little-endian)   |
| 7     | FLOAT32 (little-endian) |
| 8     | FLOAT64 (little-endian) |

Point

A point in free space.

| field | type  | required | description           |
| ----- | ----- | -------- | --------------------- |
| x     | float | ✓        | x coordinate position |
| y     | float | ✓        | y coordinate position |
| z     | float | ✓        | z coordinate position |

Point2d

A point in 2D space.

| field | type  | required | description           |
| ----- | ----- | -------- | --------------------- |
| x     | float | ✓        | x coordinate position |
| y     | float | ✓        | y coordinate position |

Pose

| field       | type       | required | description                           |
| ----------- | ---------- | -------- | ------------------------------------- |
| position    | Point      | ✓        | Point denoting position in free space |
| orientation | Quaternion | ✓        | Object's orientation in free space    |

Quaternion

An orientation in free space in quaternion form.

| field | type  | required | description |
| ----- | ----- | -------- | ----------- |
| x     | float | ✓        | x value     |
| y     | float | ✓        | y value     |
| z     | float | ✓        | z value     |
| w     | float | ✓        | w value     |

string

String value.

timestamp

| field | type   | required | description                  |
| ----- | ------ | -------- | ---------------------------- |
| sec   | uint32 | ✓        | Seconds since UNIX epoch     |
| nsec  | uint32 | ✓        | Nanoseconds since UNIX epoch |

uint32

Positive integer value between 0 and 4,294,967,295.

Vector2

A vector in 2D space that represents a direction only.

| field | type  | required | description |
| ----- | ----- | -------- | ----------- |
| x     | float | ✓        | x value     |
| y     | float | ✓        | y value     |

Vector3

A vector in free space that represents a direction only.

| field | type  | required | description |
| ----- | ----- | -------- | ----------- |
| x     | float | ✓        | x value     |
| y     | float | ✓        | y value     |
| z     | float | ✓        | z value     |


The foxglove.CameraCalibration message contains camera calibration parameters.

Schema

| field             | type       | required | description                                                                  |
| ----------------- | ---------- | -------- | ---------------------------------------------------------------------------- |
| timestamp         | timestamp  | ✓        | Timestamp of image                                                           |
| width             | uint32     | ✓        | Image width                                                                  |
| height            | uint32     | ✓        | Image height                                                                 |
| distortion\_model | string     |          | Name of distortion model; supported names depend on panel                    |
| D                 | float\[]   |          | Distortion parameters; size depends on distortion model                      |
| K                 | float\[9]  |          | Intrinsic camera matrix (3x3 row-major matrix) for the raw (distorted) image |
| R                 | float\[9]  |          | Rectification matrix (3x3 row-major matrix); for stereo cameras only         |
| P                 | float\[12] |          | Projection/camera matrix (3x4 row-major matrix)                              |

K

Projects 3D points in the camera coordinate frame to 2D pixel coordinates using the focal lengths (fx, fy) and principal point (cx, cy).



R

Aligns the camera coordinate system to the ideal stereo image plane so that epipolar lines in both stereo images are parallel.

P

By convention, specifies the intrinsic (camera) matrix of the processed (rectified) image. That is, the left 3x3 portion is the normal camera intrinsic matrix for the rectified image.



It projects 3D points in the camera coordinate frame to 2D pixel coordinates using the focal lengths (fx', fy') and principal point (cx', cy') - these may differ from the values in K.

For monocular cameras, Tx = Ty = 0. Normally, monocular cameras will also have R = the identity and P\[1:3,1:3] = K.

For a stereo pair, the 4th column \[Tx Ty 0]' is related to the position of the optical center of the 2nd camera in the first camera's frame. We assume Tz = 0 so both cameras are in the same stereo image plane. The first camera always has Tx = Ty = 0. For the right (2nd) camera of a horizontal stereo pair, Ty = 0 and Tx = -fx' \\\* B, where B is the baseline between the cameras.

Given a 3D point \[X Y Z]', the projection (x, y) of the point onto the rectified image is given by:



This holds for both images of a stereo pair.


The foxglove.Color message contains an RGBA color.

Schema

| field | type  | required | description                   |
| ----- | ----- | -------- | ----------------------------- |
| r     | float | ✓        | Red value between 0 and 1     |
| g     | float | ✓        | Green value between 0 and 1   |
| b     | float | ✓        | Blue value between 0 and 1    |
| a     | float | ✓        | Opacity value between 0 and 1 |


The foxglove.CompressedImage message contains a compressed image.

Schema

| field     | type      | required | description        |
| --------- | --------- | -------- | ------------------ |
| timestamp | timestamp | ✓        | Timestamp of image |
| format    | string    | ✓        | Image format       |
| data      | bytes     | ✓        | Raw image data     |


The foxglove.FrameTransform message contains an array of transforms between two coordinate frames in free space.

Schema

| field      | type              | required | description                   |
| ---------- | ----------------- | -------- | ----------------------------- |
| transforms | FrameTransform\[] | ✓        | An array of transform objects |

FrameTransform

| field       | type       | required | description                          |
| ----------- | ---------- | -------- | ------------------------------------ |
| translation | Vector3    | ✓        | Object's translation from base frame |
| rotation    | Quaternion | ✓        | Object's rotation from base frame    |


The foxglove.GeoJSON message type contains GeoJSON data, used for annotating maps.

GeoJSON can be used to add a variety of types of markers to maps. For more details refer to the GeoJSON specification.

Schema

| field   | type   | required | description                            |
| ------- | ------ | -------- | -------------------------------------- |
| geojson | string | ✓        | GeoJSON data encoded as a UTF-8 string |


The foxglove.Grid message type contains contains a 2D grid map.

Schema

| field         | type         | required | description                                                                                                         |
| ------------- | ------------ | -------- | ------------------------------------------------------------------------------------------------------------------- |
| timestamp     | timestamp    | ✓        | Timestamp of grid                                                                                                   |
| frame\_id     | string       | ✓        | Frame of reference                                                                                                  |
| pose          | Pose         | ✓        | Origin of grid's corner relative to frame of reference; grid is positioned in the x-y plane relative to this origin |
| column\_count | uint32       | ✓        | Number of grid columns                                                                                              |
| cell\_size    | Vector2      | ✓        | Size of single grid cell along x and y axes, relative to pose                                                       |
| row\_stride   | uint32       | ✓        | Number of bytes between rows in data                                                                                |
| cell\_stride  | uint32       | ✓        | Number of bytes between cells within a row in data                                                                  |
| fields        | DataField\[] | ✓        | Fields in data                                                                                                      |
| data          | bytes        | ✓        | Grid cell data, interpreted using fields, in row-major (y-major) order                                              |


The foxglove.ImageAnnotations message contains an array annotations for 2D images.

Schema

| field   | type                | required | description        |
| ------- | ------------------- | -------- | ------------------ |
| circles | CircleAnnotation\[] |          | Circle annotations |
| points  | PointsAnnotation\[] |          | Points annotations |

CircleAnnotation

| field          | type      | required | description                                  |
| -------------- | --------- | -------- | -------------------------------------------- |
| timestamp      | timestamp | ✓        | Timestamp of annotation                      |
| position       | Point2d   |          | Center of the circle in 2D image coordinates |
| diameter       | float     |          | Circle diameter for circle annotations       |
| thickness      | float     |          | Line thickness annotations                   |
| fill\_color    | Color     |          | Fill color                                   |
| outline\_color | Color     |          | Outline color                                |

PointsAnnotation

| field           | type       | required | description                                |
| --------------- | ---------- | -------- | ------------------------------------------ |
| timestamp       | timestamp  | ✓        | Timestamp of annotation                    |
| type            | enum       | ✓        | POINTS=0POLYGON=1LINE\_STRIP=2LINE\_LIST=3 |
| points          | Point2d\[] |          | Array of points in the annotation          |
| outline\_colors | Color\[]   |          |                                            |
| fill\_color     | Color      |          | Fill color                                 |


Certain Foxglove Studio panels must receive messages that adhere to a specific type to display them correctly.

Some panels, like the Raw Messages and Plot panels, are able to display data of any type from any topic. Other panels, like the Map and 3D panels, require the data source to provide messages that conform to a known name and schema.

If you are using a custom framework, you can still benefit from these panels by producing messages which conform to specific schemas and datatypes. Your messages can build on the schemas described in the Studio messages.

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


The foxglove.JointState message describes the state of a set of controlled joints.

The message consists of multiple arrays, one for each part of the joint state. If your joints do
not have a specific attribute (i.e. no effort) you can omit the field or leave the array blank.

Any provided fields must have the same array length.

Schema

| field    | type      | required | description                                       |
| -------- | --------- | -------- | ------------------------------------------------- |
| name     | string\[] | ✓        | Joint names                                       |
| position | float\[]  |          | Joint position (radians or meters)                |
| velocity | float\[]  |          | Joint velocity (radians/second or meters/seconds) |
| effort   | float\[]  |          | Joint effort (Nm or N)                            |


The foxglove.LaserScan message type contains a single scan from a planar laser range-finder.

Schema

| field        | type       | required | description                                                                                                                                                                                                                |
| ------------ | ---------- | -------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| timestamp    | timestamp  | ✓        | Timestamp of grid                                                                                                                                                                                                          |
| frame\_id    | string     | ✓        | Frame of reference                                                                                                                                                                                                         |
| pose         | Pose       | ✓        | Origin of scan relative to frame of reference; points are positioned in the x-y plane relative to this origin; angles are interpreted as counterclockwise rotations around the z axis with 0 rad being in the +x direction |
| start\_angle | float64    | ✓        | Bearing of first point, in radians                                                                                                                                                                                         |
| end\_angle   | float64    | ✓        | Bearing of last point, in radians                                                                                                                                                                                          |
| ranges       | float64\[] | ✓        | Distance of detections from origin; assumed to be at equally-spaced angles between start\_angle and end\_angle                                                                                                             |
| intensities  | float64\[] | ✓        | Intensity of detections                                                                                                                                                                                                    |


The foxglove.LocationFix message type contains a Navigation Satellite fix for any Global Navigation Satellite System.

Schema

| field                      | type      | required | description                                                                                                                                                        |
| -------------------------- | --------- | -------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| latitude                   | float     | ✓        | Latitude in degrees                                                                                                                                                |
| longitude                  | float     | ✓        | Longitude in degrees                                                                                                                                               |
| altitude                   | float     |          | Altitude in meters                                                                                                                                                 |
| position\_covariance       | float\[9] |          | Position covariance \[m^2] defined relative to a tangential plane through the reported position. The components are East, North, and Up (ENU), in row-major order. |
| position\_covariance\_type | enum      |          | If position\_covariance is available, position\_covariance\_type must be set to indicate the type of covariance. Unknown=0Approximated=1DiagonalKnown=2Known=3     |


The foxglove.Log message contains logging information.

Schema

| field     | type      | required | description                       |
| --------- | --------- | -------- | --------------------------------- |
| timestamp | timestamp | ✓        | Timestamp of log message          |
| level     | enum      | ✓        | DEBUG=1INFO=2WARN=3ERROR=4FATAL=5 |
| message   | string    | ✓        | Log message                       |
| name      | string    |          | Process or node name              |
| file      | string    |          | Filename                          |
| line      | uint32    |          | Line number in the file           |


The foxglove.PointCloud message type contains a collection of N-dimensional points, which may contain additional fields with information like normals, intensity, etc.

Schema

| field         | type         | required | description                                                                                            |
| ------------- | ------------ | -------- | ------------------------------------------------------------------------------------------------------ |
| timestamp     | timestamp    | ✓        | Timestamp of grid                                                                                      |
| frame\_id     | string       | ✓        | Frame of reference                                                                                     |
| pose          | Pose         | ✓        | Origin of grid relative to frame of reference; grid is positioned in x-y plane relative to this origin |
| point\_stride | uint32       | ✓        | Number of bytes between points in data                                                                 |
| fields        | DataField\[] | ✓        | Fields in data                                                                                         |
| data          | bytes        | ✓        | Grid cell data, interpreted using fields                                                               |


The foxglove.PoseInFrame message contains a timestamped pose in free space.

Schema

| field     | type      | required | description                                          |
| --------- | --------- | -------- | ---------------------------------------------------- |
| timestamp | timestamp | ✓        | Timestamp of pose                                    |
| frame\_id | string    | ✓        | Frame of reference for pose position and orientation |
| pose      | Pose      | ✓        | Pose in free space                                   |


The foxglove.PosesInFrame message contains an array of stamped poses.

Schema

| field     | type           | required | description |
| --------- | -------------- | -------- | ----------- |
| timestamp | timestamp      | ✓        |             |
| frame\_id | string         | ✓        |             |
| poses     | PoseInFrame\[] | ✓        |             |


The foxglove.RawImage message contains an uncompressed image.

Schema

| field     | type      | required | description                    |
| --------- | --------- | -------- | ------------------------------ |
| timestamp | timestamp | ✓        | Timestamp of image             |
| width     | uint32    | ✓        | Image width                    |
| height    | uint32    | ✓        | Image height                   |
| encoding  | string    | ✓        | Encoding of the raw image data |
| step      | uint32    | ✓        | Byte length of a single row    |
| data      | bytes     | ✓        | Raw image data                 |


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

In-app


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

3d panel

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 their visualization settings in the "Edit topic settings" menu.

3d panel topic-picker

To translate or rotate the placement of your markers, publish transform messages (supported types listed below) to define a transform 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).

Supported messages

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

ColorRGBA

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

LaserScan

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

Marker

| 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):// – for web and desktop app

package:// – for desktop app only

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

glTF (.glb)

STL (.stl)

COLLADA (.dae)

MarkerArray

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

OccupancyGrid

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

Path

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

PointCloud

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

PolygonStamped

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

PoseStamped

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

PoseArray

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

Transform message

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

VelodyneScan

| 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 package:// or http(s):// 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. 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.

3d panel clicked marker

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 3D 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

Flatten markers with a z-value of 0 to be located at the base frame's z value – Ensures that markers reference the same baseline height when rendering on a plane.

Automatically apply dark/light background color to text – Makes text label markers easier to read within the 3D scene.

Automatically determine background color based on the color scheme - Sets background color based on selected color scheme when toggled on, even if a custom background color is selected.

Background color - Custom background color, if color scheme default is not toggled on.

Ignore \<up\_axis> in COLLADA meshes - Ignores orientation metadata in COLLADA files loaded as a mesh\_resource

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

Pose estimate X std deviation - X standard deviation for the covariance of pose estimates drawn by the user

Pose estimate Y std deviation - Y standard deviation for the covariance of pose estimates drawn by the user

Pose estimate Theta std 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 topics with a DiagnosticArray datatype in a running feed, and display the diagnostics data for a given diagnostic\_name/hardware\_id.

Open a Diagnostics – Summary 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 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 panel:

Sort by level - Sort seen nodes by level, in decreasing order (i.e. stale, error, warn, then OK)

Supported messages

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

DiagnosticArray

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


Display images on RawImage, CompressedImage topics.

Select an image topic to display from the dropdown.

image panel

The following image encodings are currently supported:

8UC1

8UC3

16UC1

32FC1

bayer\_bggr8

bayer\_gbrg8

bayer\_grbg8

bayer\_rggb8

bgr8

mono8

mono16

rgb8

yuv422

Annotations

If your robot is publishing CameraCalibration messages for the selected camera, you can use the dropdown to select any ImageAnnotations topic to display annotations overlaid on the 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

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

Synchronize images and markers – Synchronizes messages from the image topic and overlaid markers topic.

Bilinear smoothing – Uses bilinear interpolation to resample images and minimize visual distortion when resizing.

Flip horizontally – Flip image horizontally over a vertical axis.

Flip vertically - Flip image vertically over a horizontal axis.

Rotation – Rotate image by 90°, 180°, or 270°.

Maximum zoom – Maximum allowable zoom level.

Minimum value (depth images) - Minimum scaling value for depth images; defaults to 0. Currently only used for mono16 and 16UC1 images.

Maximum value (depth images) - Maximum scaling value for depth images; defaults to 10000. Currently only used for mono16 and 16UC1 images.

Image resolution - Can be set to 20%, 50%, or 100%.

Supported messages

This section describes the datatypes for supported messages. To use this panel your data source should 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       |


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 blue 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 should 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

Active points are displayed in red, with surrounding circles representing the accuracy of these points' 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.

points

User interactions

Open the layers control to select a display mode ("map" or "satellite") and to toggle topics on the map display.

map controls

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

Supported messages

This section describes the datatypes for supported messages. To use this panel your data source should 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 |


Use a code editor sandbox to write nodes 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

Node Playground uses TypeScript to typecheck messages coming in and out of your nodes.

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 node

Every node must declare 3 exports:

Inputs array of topic names

Output topic with an enforced prefix: /studio\_node/

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

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



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

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



You’ll notice a few things:

The types Input and Messages are being imported from the ros 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 Messages type imported above. For instance, if you want to publish an array of markers, you can return the type Messages.visualization\_msgs\_\_MarkerArray.

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

It's not always obvious how message properties affect the visualized output – strictly typing your nodes 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 node 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 publisher 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 node's global scope to reference every time your publisher function is invoked. Check timestamps to make sure you are not publishing out-of-sync data.



Using global variables

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



Debugging

For easier debugging, invoke log(someValue) anywhere in your node code 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 publisher function will invoke it once, when your node is registered. Invoking log() inside your publisher function will log that value every time your publisher 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 publisher – we've indicated to Typescript that this function can return undefined.

Can I return arbitrary JSON data in a message?

Yes! Node Playground supports the json type. You can import it from the ros module:



Utilities and templates

The sidebar's Utilities tab includes functions that can be imported for use in any node (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 nodes, 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

Auto-format on save – Auto-format the code in your Node Playground node on save


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

Title - Plot title

Sync with other timestamp-based plots - Sync to other Plot panels with a timestamp-based x-axis

Legend display - 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

X range in seconds (for timestamp plots only) - The plot's "viewport" (i.e. 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

Editing mode - Defaults to on; toggling off will lock the message to publish back to your ROS stack.

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


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.


See topic publishers and subscribers, and record topic data for testing. Displayed only when the experimental feature for "Studio Debug Panels" is toggled on in the app's settings.

Select topics from which to record incoming messages, and record playback for the range of interest. The resulting recording can be exported as a JSON file to be used as a test fixture.

By default, you will see a list of topics that the panels in your current layout are publishing and subscribing to.

studio internals panel


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 this panel, 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.

Before you can publish any messages, you must configure your control pad. Click into the cog icon to open up the panel settings. Here, you can specify the topic you want to publish to, the rate at which you want to publish your geometry\_msgs/Twist or geometry\_msgs/msg/Twist messages, and the values in the message.

panel settings

You can now use the buttons in the panel's control pad to teleoperate your connected robot.


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

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.

Select any topic publishing a JointState message to update the visualization based on the published joint states. This topic defaults to /joint\_states.

Toggle to Manual joint control to set joint positions using the provided controls.

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 should provide messages conforming to one of the supported datatypes.

JointState

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


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.


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

Most ROS tools 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


Studio

Data Platform

Signing in