# fastbot_nav2_web

**Repository Path**: yi-dao-he/fastbot_nav2_web

## Basic Information

- **Project Name**: fastbot_nav2_web
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-01-20
- **Last Updated**: 2026-01-20

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Fastbot Nav2 Web

[![ROS 2 Humble](https://img.shields.io/badge/ROS%202-Humble-blue?logo=ros)](https://docs.ros.org/en/humble/)
[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](LICENSE)
[![Vue.js](https://img.shields.io/badge/Vue.js-2.6-4FC08D?logo=vue.js&logoColor=white)](https://v2.vuejs.org/)
[![Cartographer](https://img.shields.io/badge/Cartographer-SLAM-orange)](https://google-cartographer-ros.readthedocs.io/)
[![Nav2](https://img.shields.io/badge/Nav2-Navigation-green)](https://navigation.ros.org/)

Web-based navigation interface for Fastbot using ROS 2, Nav2, and roslibjs. Control your robot from a browser with real-time 3D visualization, map display, and goal-setting capabilities.

## Demo

<table align="center" width="100%">
  <tr>
    <td align="center" width="35%">
      <a href="https://www.youtube.com/watch?v=-6Sa79Esn78">
        <strong>🎥 Click to watch demo</strong><br>
        <img src="https://img.youtube.com/vi/-6Sa79Esn78/maxresdefault.jpg" alt="Demo Video" width="100%">
      </a>
    </td>
    <td align="center" width="55%">
      <img src="docs/demo.png" alt="Fastbot Nav2 Web Interface" width="100%">
    </td>
  </tr>
</table>

---

## Table of Contents

- [Overview](#overview)
- [Installation](#installation)
- [Quick Start](#quick-start)
- [Running the System](#running-the-system)
- [Packages](#packages)
- [License](#license)

---

## Overview

This repository provides:

- **fastbot_slam** — Mapping (Cartographer) and navigation (Nav2) launch files
- **fastbot_description** — Robot URDF and meshes
- **fastbot_webapp** — Browser-based UI using roslibjs, ros3d, and ros2d
- **rosbridge_suite** — WebSocket bridge between ROS 2 and JavaScript
- **tf2_web_republisher_py** — Republishes TF transforms for web clients

---

## Installation

### Prerequisites

- ROS 2 Humble
- Colcon build tools
- Python 3

### 1. Clone and build

```bash
cd ~/ros2_ws/src
git clone https://github.com/legalaspro/fastbot_nav2_web.git

cd ~/ros2_ws
colcon build --packages-select fastbot_slam fastbot_description rosbridge_server rosbridge_library tf2_web_republisher_py
source install/setup.bash
```

### 2. Install additional dependencies

```bash
# Add ROS key (if not already added)
sudo curl -s https://raw.githubusercontent.com/ros/rosdistro/master/ros.asc | sudo apt-key add -
sudo apt update

# Web video server for camera streaming
sudo apt install ros-humble-web-video-server -y

# Python quaternion library (used by tf2_web_republisher)
pip3 install pyquaternion
```

---

## Quick Start

Before using navigation, you need a map. See [fastbot_slam/README.md](fastbot_slam/README.md) for mapping instructions.

Once you have a map, follow these steps to launch the web interface:

---

## Running the System

Open **5 terminals** and run each command.

> **Note:** Ports `11315` (video server) and `7000` (web app) are chosen for compatibility with [The Construct](https://www.theconstructsim.com/) simulation platform. You can use any available ports on your system.

### Terminal 1: ROSBridge WebSocket Server

Bridges ROS 2 topics/services to WebSocket for browser access.

```bash
ros2 launch rosbridge_server rosbridge_websocket_launch.xml
```

### Terminal 2: Web Video Server

Streams camera images via HTTP (MJPEG).

```bash
ros2 run web_video_server web_video_server --ros-args -p port:=11315
```

### Terminal 3: TF2 Web Republisher

Republishes TF transforms for roslibjs clients.

```bash
ros2 run tf2_web_republisher_py tf2_web_republisher
```

### Terminal 4: Navigation Stack

Starts map server, localization (AMCL), and Nav2 path planning.

```bash
ros2 launch fastbot_slam navigation.launch.py map_file:=your_map.yaml
```

### Terminal 5: Web App Server

Serve the web interface.

```bash
cd fastbot_webapp
python3 -m http.server 7000
```

### Open in Browser

Navigate to: **http://localhost:7000**

---

## Packages

| Package                  | Description                                              |
| ------------------------ | -------------------------------------------------------- |
| `fastbot_slam`           | Cartographer mapping, AMCL localization, Nav2 navigation |
| `fastbot_description`    | Robot URDF, meshes, and visualization configs            |
| `fastbot_webapp`         | Web UI (HTML/JS) using roslibjs, ros3d, ros2d            |
| `rosbridge_suite`        | WebSocket server bridging ROS 2 to web clients           |
| `tf2_web_republisher_py` | TF republisher for web visualization                     |

---

## Troubleshooting

- **WebSocket connection failed**: Ensure rosbridge is running on port 9090
- **No video stream**: Check web_video_server is running on port 11315
- **Robot not localized**: Wait for auto-localization spin to complete, or use 2D Pose Estimate in RViz
- **TF errors in browser**: Ensure tf2_web_republisher is running

---

## License

MIT License — Copyright (c) 2025 Dmitri Manajev