Robot Path Editor

ロボットの移動経路をGUIで設計するためのWebベースのパスエディタです。
ウェイポイントの配置・Dubins曲線による滑らかな経路生成・ロボットのヘディング（向き）制御までを直感的に行えます。

公開URL: http://www.fortefibre.net/Robot-Path-Editor/

---

主な機能

🗺️ パス編集

• ウェイポイントの配置・移動・削除 — キャンバス上にクリックでウェイポイントを追加し、ドラッグで自由に移動できます
• Dubins 曲線 — ウェイポイント間のセクションごとに最小旋回半径（RMin）を設定でき、滑らかな円弧経路を自動生成します。値を設定しない場合は直線補間されます
• 経路のヘディング（進行方向） — 各ウェイポイントのパスヘディングをドラッグ操作で直感的に編集できます
• ドラッグ&ドロップによる順序変更 — Path Details パネルでウェイポイントの順序をドラッグ&ドロップで並べ替えられます

🧭 ヘディング（ロボットの向き）編集

• ヘディングキーフレーム — パスのセクション上の任意の位置にヘディングキーフレームを追加し、ロボットの向きを制御できます
• Auto / Manual モード — ウェイポイントのヘディングは自動計算（Auto）と手動指定の切り替えが可能です。Auto の場合は点線、手動設定の場合は実線で表示されます
• Path / Heading モード切替 — ツールバーのトグルスイッチでパス編集モードとヘディング編集モードをすばやく切り替えられます

🧲 スナップ機能

ポイントの配置やヘディングの編集時に、以下のスナップが自動的に適用されます（個別にON/OFF切替可能）：

• ポイント
  • Align X / Align Y — 他のポイントのX座標・Y座標に揃える
  • Prev Heading Line — 前のポイントのヘディング延長線上にスナップ
  • Parallel / Perpendicular — 前のセグメントと平行・垂直にスナップ
• ヘディング
  • Prev Waypoint Heading — 前のウェイポイントの角度を維持
  • 45° Angles — 45度単位の角度にスナップ
  • Segment Heading — セグメントの方向にスナップ

📋 パス管理

• 複数パス対応 — 複数のパスを作成・管理でき、パスごとに色を設定できます
• パスの複製・削除・名前変更 — サイドバーからパスごとの操作が可能です
• 表示/非表示の切替 — パスごとにキャンバス上の表示を切り替えられます

📍 ポイントライブラリ

• 頻繁に使うポイントを名前付きでライブラリに登録できます
• ライブラリのポイントはパスのウェイポイントとしてリンクでき、ライブラリ側の座標を変更すると関連するすべてのウェイポイントに反映されます
• ポイントのロック機能により、誤操作による座標変更を防止できます

🤖 ロボットプレビュー

• ロボットのサイズ（長さ・幅）を設定し、パス上でのロボットの動きをプレビューできます
• 運動制約の設定 — 最大速度・加速度・減速度・向心加速度を設定することで、速度制約を考慮したタイミングが自動計算されます

🖼️ 背景画像

• フィールド画像やマップ画像をキャンバスに重ねて表示できます
• 位置（X, Y）、スケール、不透明度を調整可能です
• 画像のロック/アンロック機能で、誤操作での位置移動を防止できます

💾 インポート / エクスポート

• JSON — ワークスペース全体をJSON形式で保存・読み込みできます。パス、ポイント、背景画像設定、ロボット設定などすべての状態が含まれます
• CSV — パスを離散化したCSVファイルをエクスポートできます。各CSVは x,y,theta の3カラム構成で、theta はロボットヘディングをラジアンへ変換した値です
  • エクスポート対象が active の場合は1ファイル、all の場合はパスごとに個別CSVを出力します
  • all では表示/非表示にかかわらず waypoint を持つすべてのパスを出力します
  • ファイル名はパス名ベースで自動生成されます
  • 離散化ステップ幅（デフォルト 0.005 m）を変更可能

↩️ Undo / Redo

• すべての編集操作に対してUndo/Redoが可能です
• キーボードショートカット（Ctrl+Z / Ctrl+Shift+Z）に対応しています

---

座標系

ROS座標系（ros-x-up-y-left）を使用しています。
角度は度数表記で、キャンバス上の表示は上がX正方向、左がY正方向です。

---

はじめに

必要な環境

• Node.js（v18以上推奨）

インストール

npm install

開発サーバーの起動

npm run dev

ブラウザで表示されたURL（通常 http://localhost:5173）にアクセスしてください。

基本的な使い方

1. ツールバーの Add Point を選択し、キャンバスをクリックしてウェイポイントを追加します
2. Select ツールに切り替え、ウェイポイントをドラッグして位置を調整します
3. ヘディング方向のノブをドラッグして、各ウェイポイントの進行方向を設定します
4. Path Details パネル（右サイドバー）でウェイポイントの座標やセクションの旋回半径を確認・編集します
5. Mode: Heading に切り替えると、ロボットの向き（ヘディング）を編集できます
6. 完成したパスは Export から JSON または CSV で保存します

---

テスト

# ユニットテスト
npm test

# E2Eテスト（Playwright）
npm run test:e2e

# 全テスト
npm run test:all

---