Skip to main content

Introduction

Foxglove often requires incoming messages to conform to specific structures to visualize them properly. Using Foxglove schemas helps you take full advantage of the platform's built-in visualizations.

Supported formats​

If you've already written custom messages, you can transform them into Foxglove-supported schemas using a message converter extension.

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.

NOTE: For Protobuf data, time values of type google.protobuf.Timestamp or google.protobuf.Duration will appear with sec and nsec fields (instead of seconds and nanos) in user scripts, message converters, and the rest of Foxglove, for consistency with time and duration types in other data formats.

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.

Schemaless JSON​

MCAP supports writing JSON messages without specifying a schema. To write JSON message data with no schema, set your channel's message encoding to json and the schema ID to 0. This indicates there is no schema for the channel: https://mcap.dev/spec#channel-op0x04

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.x = 0.5
msg.y = 0.7

TypeScript​

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

In Foxglove'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's User Scripts panel.