Foxglove の使い方

起動→接続→panel 追加→message path→layout 保存の一連。live (foxglove_bridge / rosbridge) と rosbag/MCAP 再生の差、message path 記法、代表 panel、自作 extension まで。

要点: Foxglove は「robot 用ダッシュボード」。ROS 2 なら foxglove_bridge を上げて WebSocket で繋ぎ、live で見る。rosbag / MCAP を open すれば同じ layout で再生できる。panel の情報源は message path (/topic.field.subfield) を書くだけ。layout は JSON で export → repo コミット → 誰でも同じ画面で始められる。

一発起動 #

ROS 2 側:

ros2 launch foxglove_bridge foxglove_bridge_launch.xml   # ws://localhost:8765
# or
ros2 run foxglove_bridge foxglove_bridge --ros-args -p port:=8765

Foxglove 側: 起動 → Open connection → Foxglove WebSocket → ws://localhost:8765 → 接続。

bag 再生: 起動画面で Open local file → .mcap or .db3 (rosbag2 SQLite) を選ぶ。

データソースの選択肢 #

ソース	用途	速度
Foxglove WebSocket (`foxglove_bridge`)	live ROS 2	ネイティブ
Rosbridge (`rosbridge_server`)	live ROS 1/2 both、ブラウザ連携もあり	やや遅い
MCAP file	記録の再生。新プロジェクトは MCAP 推奨	速い
ROS 2 bag (SQLite .db3)	既存 rosbag2 の re-play	遅い (SQLite)
Data platform (SaaS)	クラウド越しに複数機の集約	ネット越し

MCAP は Foxglove が推してる新コンテナ。ROS 2 の rosbag2 も storage_id: mcap で選べる:

ros2 bag record -a --storage mcap

Layout の考え方 #

panel: 1 個の UI (3D / Plot / Image / Log / Diagnostics …) を持つタイル
layout: panel の配置 + 各 panel の設定を JSON にしたもの
右上メニューから Export layout → ~/repo/layouts/live_debug.json にコミット
起動時に Import from file で同じ画面を再現できる

代表 panel #

Panel	何を出すか	情報源 (例)
3D	TF ツリー、URDF、PointCloud、MarkerArray、Path、Grid、Image on plane	`/tf`, `/robot_description`, `/scan`, `/plan`
Image	単眼カメラ像 (compressed / raw)	`/camera/image_raw/compressed`
Plot	数値の時系列 (multi-series、二軸、対数)	`/joint_states.position[0]`
State Transitions	enum っぽい topic のガンチャート	`/hsm/status.state`
Diagnostics (Summary / Detail)	`diagnostic_msgs/DiagnosticArray` の集約表示	`/diagnostics_agg`
Raw Messages	任意 topic の生 JSON (デバッグの最終手段)	`/anything`
Log	rosout をレベル・ノード・keyword でフィルタ	`/rosout`
Publish	GUI から Bool / Twist / String を publish	任意 topic
Table	array of struct を表 (例: workpieces 一覧)	`/salamander/field_state.workpieces`
Teleop	Twist を仮想 joystick で publish	`/cmd_vel`
Node Playground / User Scripts	JS で受信 → 変換 → 再 publish (Foxglove 内で)	任意
Gauge / Indicator	数値をメータ or 灯で	任意
Variable Slider	Foxglove 内変数を GUI で	Global variables

Message Path 記法 #

Foxglove 全 panel の共通言語。ros2 topic echo より柔軟:

/joint_states.position                    # 全配列
/joint_states.position[0]                 # 添字
/joint_states.position[:@name=="base_yaw"]  # フィルタ (name フィールドが等しい要素)
/tf.transforms[:].transform.translation.z   # 全 transform の z
{{ /joint_states.position[0] * 180 / 3.14159 }}  # 数式 (deg 換算)

フィルタ: [:@field=="value"] — array を条件で絞る (multi-message 型で頻用)
数式: {{ ... }} — Plot / Gauge 等で単位換算・スケーリング

よく使うショートカット #

キー	動作
`Space`	再生 / 一時停止
`←` / `→`	1 メッセージ戻る/進む
`Shift + ←/→`	大きく巻き戻し/送り
`Alt + drag`	3D パネルで pan
`f`	全画面パネル (もう一度で戻る)
`Ctrl + K`	topic ピッカー (subscribe 候補)

拡張 (自作 panel)#

TypeScript + React で書ける:

npm create foxglove-extension@latest
# 実装後
npm run local-install   # ~/.foxglove-studio/extensions/ に配置

ROS 2 の型は自動生成される (import { StringMsg } from "...").
panel は Foxglove の subscribe / advertise API を使う (context.subscribe([{topic:"/x"}])).
例: ~/salamander_ws/salamander_webui/foxglove_extensions/ に自作パネルを置いて、per-slot bias を heatmap 化する等。

foxglove_bridge の param (よく変える)#

port: 8765
address: 0.0.0.0            # 別 PC から見るときは host バインドしない
use_compression: true       # 帯域が細ければ
send_buffer_limit: 100000000  # 大きい image を送る時に上げる
topic_whitelist: ['.*']     # regex で filter (perception/heavy を切る)
service_whitelist: ['.*']
param_whitelist: ['.*']

注意: foxglove_bridge は launch でしか publish されないパラメータも購読可能にする。ただし non-latched の初期値が 遅く来る — panel は subscribe した瞬間から表示されない → 数フレーム待つ。

落とし穴 #

Image panel が黒い: QoS 不一致 (best_effort / reliable)。foxglove_bridge の QoS 自動追従を過信しないで、topic 情報ペインで QoS を確認
3D の URDF が出ない: /robot_description を publish していないと出ない。robot_state_publisher が要る (実機 or sim launch で立てておく)
Plot が empty: message path が typo。ros2 topic echo で先に手で見る
.db3 の再生が遅い: MCAP に convert (ros2 bag convert --storage mcap in.db3 out.mcap)
layout が壊れた: JSON を直接触ると復旧できることが多い (panel id / topic name を検索置換)
latched (transient_local) が来ない: bridge の QoS override を掛ける、または node 側で latched depth を 1 以上に

rviz2 / rqt との違い #

項目	foxglove	rviz2	rqt
3D シーン	○	◎ (highend、meshes)	△
Plot / Table	◎	×	○
Diagnostics	◎ (専用パネル)	×	○ (rqt_robot_monitor)
rosbag / MCAP 再生	◎	× (別ツール要)	×
リモート (Web)	◎ (browser でも)	×	×
layout 共有	◎ (JSON export)	○ (rviz config)	×
ROS 独立	○ (MCAP なら)	×	×

使い分け: 3D 中心の可視化・meshes 山盛り = rviz2、それ以外は foxglove。rqt は個別ツール (topic monitor / bag / graph) で残る。

出典 #

最終更新: 2026年9月14日