Load JSON, Protobuf, or other custom data into Foxglove
Foxglove has its origins in the Robot Operating System (ROS) ecosystem. Many of Foxglove's visualization panels were inspired by off-the-shelf ROS tooling, and the app integrates seamlessly with ROS data sources, including live connections and recorded bag files. However, we recognize that not everyone in the robotics industry uses ROS. We’ve talked to teams who have modified and replaced pieces of ROS, some who have used other off-the-shelf messaging solutions like eCAL and Apollo Cyber RT, and some who have built their own stack entirely using tools like Redis or ZeroMQ.
At Foxglove, our mission is to bring world-class tooling to all robotics teams — large and small, ROS or otherwise. That’s why today we’re excited to announce the Foxglove WebSocket connection, a new protocol that allows anyone to use their data inside Foxglove v0.24.
WebSockets offer a simple interface for two-way communication between servers and clients. We chose this protocol as the basis for this new Foxglove connection because it is well-supported in browsers — allowing us to offer equal functionality in our desktop and web apps — and because WebSocket server and client libraries are readily available across many different languages and frameworks.
To use the new protocol with Foxglove, you will need to build a custom server that transmits data to clients. Because connections are initiated from Foxglove, the app will act as a client.
The Foxglove WebSocket protocol doesn’t specify what format your data needs to be in — instead, it requires the server to provide this information to the client dynamically. This is intentional, because we foresee teams wanting to work with many different kinds of data in Foxglove. For this initial launch, we’ve integrated support for two common encodings: JSON and Protocol Buffers (Protobuf).
Along with Foxglove support for the new WebSocket connection, we’re providing some sample programs to showcase the new functionality. Ultimately, engineering teams will need to write their own code to load their data into Foxglove Foxglove via WebSocket. However, the following examples can help you understand what we’ve built, and serve as a starting point for building your custom server.
Make sure you’ve installed Node.js before running these examples.
The system monitor command (sysmon) starts up a WebSocket server and transmits basic information about your computer, like its CPU and memory usage.
At the command line, run npx @foxglove/ws-protocol-examples sysmon to start the system monitor.
$ npx @foxglove/ws-protocol-examples sysmon
foxglove:sysmon ╭────────────────────────────────────────────────────────────────────────────────────╮
foxglove:sysmon │ │
foxglove:sysmon │ 📡 Server listening on localhost:8765. To see data, visit: │
foxglove:sysmon │ https://app.foxglove.dev/~/view?ds=foxglove-websocket&ds.url=ws://localhost:8765/ │
foxglove:sysmon │ │
foxglove:sysmon ╰────────────────────────────────────────────────────────────────────────────────────╯ +0ms
To see the data being transmitted by your server, open Foxglove. Add a Raw Messages panel to your layout, and select the system_stats topic to see a live feed memory usage and other system information. You can also try out a Plot panel with system_stats.total_cpu_usage to see your CPU usage on a graph.
The image-server command will start up an example server that transmits images, similar to those captured by your robot’s camera, to Foxglove as binary data.
Close out the previous server by pressing control-C. Now, run npx @foxglove/ws-protocol-examples image-server. If Foxglove is still open, it should automatically connect to the new WebSocket server.
Add an Image panel to your layout, and you’ll start to see images from the example_image topic. That was easy!
At this point, you might be wondering how to get your own data into Foxglove. To do this, you’ll need to write a WebSocket server. Foxglove will connect to the server, receive information about the available data, and request data that the user wants to visualize. The foxglove/ws-protocol repository contains libraries you can install and use with your own system, as well as some examples to get you started. We currently provide libraries to help you write servers in JavaScript/TypeScript (@foxglove/ws-protocol) and Python (foxglove-websocket).
Your server will need to inform Foxglove about the data’s format, or encoding, as well as its structure, or schema. For JSON-encoded data, Foxglove expects schemas in the JSON Schema format. For Protobuf-encoded data it expects a FileDescriptorSet, which is a binary representation of your Protobuf definitions that can be generated at runtime.
For more details on the protocol and supported encodings, visit the foxglove/ws-protocol repository and the Foxglove documentation.
We’re excited to enable more teams to work with their data in Foxglove with the new Foxglove WebSocket protocol. But we can’t do it alone — we need your input on specific needs and pain points to help guide the future direction of this protocol. If you’re interested in using Foxglove with data formats other than JSON and Protobuf, or have any other feedback, please get in touch.
Feel free to share your thoughts in Discord or message us directly on Twitter. We can’t wait to expand this feature to help more robotics teams load and explore their custom data inside Foxglove!
