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.

Empty JSON Schemas

MCAP allows empty schemas for the JSON message encoding, but you must define a valid JSON schema for visualization. If you don't want to define your schema, you can specify a JSON Schema representing any object, which by default allows additional properties: {"type": "object"}.

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.