Custom

Foxglove Studio can load your custom data (i.e. Protobuf, JSON, FlatBuffers) as local or remote MCAP files. It can also connect directly to your live custom data with the Foxglove WebSocket, an encoding-agnostic WebSocket connection.

Files

Load custom data into Foxglove Studio by first encoding it in MCAP (.mcap) files.

MCAP supports the following serialization formats:

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

Use the guides at mcap.dev to learn how to read and write your custom data to and from MCAP files.

Local file

Once you have your local MCAP file, follow the MCAP directions for loading it in Studio.

Cloud data

Foxglove Data Platform

Once you've recorded your custom data to MCAP (.mcap) files, you can upload them to Foxglove Data Platform's web console and stream them directly into Foxglove Studio.

Check out the Data Platform docs for more information on how to export and visualize your robotics data.

By URL

Once you have an MCAP file in remote storage, follow the MCAP directions for opening it via URL in Studio.

Check out the Setting up CORS page for more details on loading your remote data files into Foxglove Studio.

Live connection

Connect directly to your live custom data (i.e. Protobuf, JSON, FlatBuffers) with an encoding-agnostic WebSocket connection.

Foxglove WebSocket

First, you'll need to create your own server and client to start publishing your custom data.

The foxglove/ws-protocol repo provides:

The @foxglove/ws-protocol-examples npm package also provides example servers and clients that you can run to see how Studio can receive system stats and image data from a custom WebSocket server:

$ npx @foxglove/ws-protocol-examples sysmon
$ npx @foxglove/ws-protocol-examples image-server

To learn more, reference the protocol specification.

JSON

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

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

Protobuf

For channels with encoding: "protobuf", Studio expects the schema to be a base64-encoded binary FileDescriptorSet.

You can generate the FileDescriptorSet at runtime using Python:

from typing import Any, Set
from google.protobuf.descriptor import FileDescriptor
from google.protobuf.descriptor_pb2 import FileDescriptorSet

def build_file_descriptor_set(message_class: Any) -> FileDescriptorSet:
  file_descriptor_set = FileDescriptorSet()
  seen_dependencies: Set[str] = set()

  def append_file_descriptor(file_descriptor: FileDescriptor):
    for dep in file_descriptor.dependencies:
      if dep.name not in seen_dependencies:
        seen_dependencies.add(dep.name)
        append_file_descriptor(dep)
    file_descriptor.CopyToProto(file_descriptor_set.file.add())

  append_file_descriptor(message_class.DESCRIPTOR.file)
  return file_descriptor_set

Or C++:

#include <google/protobuf/descriptor.pb.h>

// Writes the FileDescriptor of this descriptor and all transitive dependencies
// to a string, for use as a channel schema.
std::string SerializeFdSet(const google::protobuf::Descriptor* toplevelDescriptor) {
  google::protobuf::FileDescriptorSet fdSet;
  std::queue<const google::protobuf::FileDescriptor*> toAdd;
  toAdd.push(toplevelDescriptor->file());
  std::unordered_set<std::string> added;
  while (!toAdd.empty()) {
    const google::protobuf::FileDescriptor* next = toAdd.front();
    toAdd.pop();
    next->CopyTo(fdSet.add_file());
    added.insert(next->name());
    for (int i = 0; i < next->dependency_count(); ++i) {
      const auto& dep = next->dependency(i);
      if (added.find(dep->name()) == added.end()) {
        toAdd.push(dep);
      }
    }
  }
  return fdSet.SerializeAsString();
}

Studio also expects schemaName to be one of the message types defined in the FileDescriptorSet.

Each message should be encoded in the Protobuf binary wire format – we provide .proto files compatible with Foxglove Studio in our foxglove/schemas repo.

Connecting to data

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

Foxglove WebSocket dialog