Announcing the Foxglove WebSocket Protocol
Foxglove Studio has its origins in the Robot Operating System (ROS) ecosystem. Many of Studio’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 Studio v0.24.
Stream data into Foxglove Studio over a WebSocket
WebSockets offer a simple interface for two-way communication between servers and clients. We chose this protocol as the basis for this new Studio 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 Studio, you will need to build a custom server that transmits data to clients. Because connections are initiated from Foxglove Studio, 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 Studio. For this initial launch, we’ve integrated support for two common encodings: JSON and Protocol Buffers (Protobuf).
Along with Studio 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 Studio 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.
Visualize CPU and memory usage
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://studio.foxglove.dev/?ds=foxglove-websocket&ds.url=ws://localhost:8765/ │ foxglove:sysmon │ │ foxglove:sysmon ╰────────────────────────────────────────────────────────────────────────────────────╯ +0ms
To see the data being transmitted by your server, open Foxglove Studio. 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.
Display camera images
image-server command will start up an example server that transmits images, similar to those captured by your robot’s camera, to Foxglove Studio as binary data.
Close out the previous server by pressing control-C. Now, run
npx @foxglove/ws-protocol-examples image-server. If Foxglove Studio 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!
Getting custom data into Foxglove Studio
Your server will need to inform Foxglove Studio about the data’s format, or encoding, as well as its structure, or schema. For JSON-encoded data, Studio 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.
Share your feedback
We’re excited to enable more teams to work with their data in Foxglove Studio 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 Studio with data formats other than JSON and Protobuf, or have any other feedback, please get in touch.
Feel free to share your thoughts in Slack, file bug reports and feature requests on GitHub (studio or ws-protocol), 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 Studio!
Writing custom panels in Foxglove Studio using the extensions API.
How Foxglove Studio compares to Cruise’s data visualization tool.
Get blog posts sent directly to your inbox.