Foxglove

Introduction

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

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

Foxglove Studio's extensions also make it possible for you to write your own message converters to transform your custom messages from one schema to another supported by Foxglove Studio's panels.

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

Using Foxglove schemas

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

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

Protobuf and JSON Schema

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

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

import { CompressedImage } from "@foxglove/schemas/jsonschema";

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

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

ROS

Install the foxglove_msgs package:

$ sudo apt install ros-noetic-foxglove-msgs # For ROS 1
$ sudo apt install ros-galactic-foxglove-msgs # For ROS 2

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

from foxglove_msgs.msg import Vector2

…
msg = Vector2()
msg.data = { x: 0.5, y: 0.7 }

TypeScript

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

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

import { Input, Message } from "./types";

type Output = Message<"foxglove.Point2">;

export const inputs = ["/input/topic"];
export const output = "/studio_script/output_topic";

export default function script(event: Input<"/input/topic">): Output {
  return { x: 1, y: 2 };
}

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

import { Point2 } from "@foxglove/schemas";

const myImage: Point2 = { x: 1, y: 2 };

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