How to Set Up Foxglove: A Practical Guide

TL;DR

• Install Foxglove in 2 minutes via desktop, web, or Docker.
• Connect to ROS 2 with ros2 topic list and Foxglove’s ROS bridge.
• Visualize MCAP logs faster than ROS Bag files (use mcap record).
• Build dashboards with drag-and-drop panels for 3D, images, and plots.
• Debug live vs. recorded data with time-sync controls.
• Extend Foxglove with custom TypeScript panels for proprietary schemas.

1. Installing Foxglove and Connecting to ROS 2

Install Foxglove

Choose your method:

Desktop (Recommended for ROS 2)

# macOS (Homebrew)
brew install --cask foxglove-studio

# Linux (AppImage)
wget https://github.com/foxglove/studio/releases/download/v2.12.0/FoxgloveStudio-2.12.0.AppImage
chmod +x FoxgloveStudio-*.AppImage
./FoxgloveStudio-*.AppImage

# Windows (Winget)
winget install Foxglove.FoxgloveStudio

Web App (No Install)

Open https://app.foxglove.dev in Chrome/Firefox.

Docker (For CI/CD)

docker run -p 8080:8080 foxglove/studio

Connect to ROS 2

1. Verify ROS 2 is running:

   ros2 topic list
   

   Copy

   Example output:

   /cmd_vel
   /scan
   /tf
   /odom
   

   Copy

2. Launch Foxglove and connect:

   • Open Foxglove → Click "Connect" → Select "ROS 2".
   • Enter your ROS 2 domain ID (default: 0):

     ros2 run foxglove_bridge foxglove_bridge --ros-domain-id 0
     

     Copy
   • In Foxglove, select the same domain ID.

3. Expected Output:

   • Foxglove will list all ROS 2 topics. Click "Subscribe" to start streaming.

2. The MCAP Log Format

Why MCAP?

MCAP (Micro-Format for ROS Data) is faster and smaller than ROS Bag files Source: MCAP Spec. Use it for:

• Large robot datasets.
• Cloud storage (e.g., Foxglove Data Platform).

Record MCAP Data

# Install MCAP tools
pip install rosbags-mcap

# Record from ROS 2 topics
ros2 bag record -a --storage mcap -o my_robot_data.mcap

Playback in Foxglove

1. Open Foxglove → Drag my_robot_data.mcap into the app.
2. Use the time slider to scrub through data.

3. Building Visualization Layouts

Create a Dashboard

1. Add Panels:

   • Drag "3D Panel", "Image Panel", or "Plot Panel" from the left sidebar.
   • Example: Visualize /scan (LiDAR) in 3D and /image_raw as an image.

2. Save Layout:

   # Export as JSON
   foxglove studio export-layout --output my_dashboard.json
   

   Copy

   Example my_dashboard.json:

   {
     "panels": [
       {
         "type": "3D",
         "topic": "/scan",
         "frame": "base_link"
       },
       {
         "type": "Image",
         "topic": "/image_raw"
       }
     ]
   }
   

   Copy

3. Load Layout:

   • Open Foxglove → "Load Layout" → Select my_dashboard.json.

4. 3D, Image, and Plot Panels

3D Panel (LiDAR/URDF)

• Add a 3D Panel → Select /scan topic.
• Configure:
  • Set frame to base_link (from /tf).
  • Enable "Show TF Frames" to visualize robot pose.

Image Panel (Camera)

• Add an Image Panel → Select /image_raw.
• Adjust:
  • Set encoding to bgr8 (common for ROS 2 cameras).

Plot Panel (Time-Series)

• Add a Plot Panel → Select /odom/pose/pose/position/x.
• Customize:
  • Add a second series: /twist/twist/linear/x.
  • Use "Auto-Scale" for dynamic ranges.

5. Live Debugging vs. Recorded Playback

Live Debugging

1. Stream ROS 2 data in real-time:

   ros2 run foxglove_bridge foxglove_bridge --ros-domain-id 0
   

   Copy
2. Pause/Resume playback with the time controls.

Recorded Playback

1. Load an MCAP file:

   foxglove studio open my_robot_data.mcap
   

   Copy
2. Sync Time:
   • Use "Time Sync" to align multiple logs.

6. Custom Extensions and Message Schemas

Add a Custom Panel

1. Create a TypeScript extension:

   npx @foxglove/create-extension my-custom-panel
   cd my-custom-panel
   

   Copy
2. Edit src/panel.ts:

   import { Panel } from '@foxglove/studio';
   
   export class MyCustomPanel extends Panel {
     render() {
       return <div>Custom visualization for my_topic</div>;
     }
   }
   

   Copy
3. Build and Load:

   npm run build
   foxglove studio load-extension ./dist
   

   Copy

Define Custom Message Schemas

1. Add a schema in foxglove.config.json:

   {
     "schemas": {
       "my_namespace/MyMessage": {
         "fields": [
           {"name": "x", "type": "float32"},
           {"name": "y", "type": "float32"}
         ]
       }
     }
   }
   

   Copy
2. Use in Foxglove:
   • Select the topic → Foxglove will parse the custom schema.

7. Team Workflows for Fleet Debugging

Share a Live Session

1. Host a session:

   foxglove studio share --port 8080
   

   Copy
2. Invite teammates to https://app.foxglove.dev with the link.

Cloud Storage (Foxglove Data Platform)

1. Upload data:

   foxglove data upload my_robot_data.mcap
   

   Copy
2. Access in Foxglove:
   • Sign in → Select "Cloud" → Load the dataset.

What’s Next?

1. Record and analyze a full robot mission with mcap record.
2. Build a custom dashboard for your robot’s key metrics.
3. Extend Foxglove with a TypeScript panel for proprietary topics.

For Physical AI infrastructure and deployment, explore Hyperion’s tools for embodied VLA systems and edge runtimes. Contact us to discuss your project.