A modern, browser-based control center for autonomous robot navigation with ROS2

Web-based graphical user interface providing intuitive control and real-time visualization of SLAM, localization, navigation, and data management for ROS2-based autonomous robots. Access everything from any device with a web browser.

• LiDAR SLAM with FAST-LIO integration
• Real-time Localization with live parameter tuning
• Multi-Session SLAM for map merging and optimization
• Live YAML configuration editing with instant apply
• Real-time terminal output monitoring
• One-click start/stop control

• PlotJuggler-style Real-time Plotting

  • Interactive time-series data visualization
  • Multi-tab interface for organizing plots
  • Drag-and-drop topic selection from tree view
  • Auto-save/restore plot configurations
  • Zoom, pan, play/pause controls
  • Export plots (PNG, CSV) (coming soon)

• 3D Visualization (in development)

  • Real-time PointCloud2 rendering
  • Path and odometry display
  • Interactive camera controls
  • WebSocket-based low-latency updates

• Bag Player

  • Play ROS2 bag files with topic filtering
  • Timeline control with play/pause
  • Variable playback speed
  • Integration with 3D visualization

• Bag Recorder

  • Record live ROS2 topics to bag files
  • Selective topic recording
  • Real-time recording status
  • Auto-saved configurations

• File Player (ConPR Format)

  • Play CSV-based trajectory data (pose, IMU, LiDAR)
  • Variable playback speed (0.01x ~ 20.0x)
  • Convert to ROS2 bag format
  • Support for Livox LiDAR and camera data

• Latency Monitor for real-time network performance tracking
• Remote Access via web browser from any device on network

Coming soon: Web interface screenshots and demo videos

• Ubuntu: 22.04 or later
• ROS2: Jazzy or later (Installation Guide)
• Python: 3.10+ (included with ROS2)
• rosbridge_server: For 3D visualization and plot features

1. Install rosbridge_server

   sudo apt install ros-jazzy-rosbridge-server

2. Clone the repository

   cd ~/your_workspace/src
   git clone https://github.com/Kimkyuwon/Web-based-GUI-for-ROS2-SLAM-and-File-Player.git ros2_autonav_webui

3. Build the package

   cd ~/your_workspace
   colcon build --packages-select ros2_autonav_webui
   source install/setup.bash

# Source ROS2 environment
source /opt/ros/jazzy/setup.bash
source ~/your_workspace/install/setup.bash

# Launch the web server
ros2 launch ros2_autonav_webui ros2_autonav_webui.launch.py

Once the server starts, you'll see:

[INFO] [ros2_autonav_webui_node]: ======================================
[INFO] [ros2_autonav_webui_node]: Web server started on port 8080
[INFO] [ros2_autonav_webui_node]: Local access:   http://localhost:8080
[INFO] [ros2_autonav_webui_node]: Network access: http://YOUR_IP:8080
[INFO] [ros2_autonav_webui_node]: ======================================

Open the URL in your web browser.

1. Load Configuration

   • Click "Config Load" to browse for your SLAM config file
   • Default location: /path/to/FAST_LIO_ROS2/config/mapping_config.yaml
   • Edit parameters in real-time using the web interface

2. Start SLAM

   • Click "Start SLAM" button
   • Monitor real-time terminal output in the web UI
   • Green status indicator shows running state

3. Save Map

   • Click "Save Map" to trigger pose graph optimization
   • Map is automatically saved to configured output directory

4. Stop SLAM

   • Click "Stop SLAM" button
   • Process terminates gracefully (SIGINT → SIGTERM → SIGKILL)

The Plot feature provides PlotJuggler-style visualization directly in your browser:

1. Navigate to Plot Tab

   • Click "Visualization" → "Plot" in the main navigation

2. Browse Topics

   • Topics are displayed in a tree view (topic → message fields)
   • Search topics by name using the search box
   • Click to expand/collapse message fields

3. Create Plots

   • Drag leaf nodes (data fields) from tree to plot area
   • Each drag creates a new trace in the plot
   • Multiple traces can be added to a single plot

4. Manage Tabs

   • Click "+" to create new plot tabs
   • Double-click tab title to rename
   • Click "×" to close tabs (minimum 1 tab)
   • Each tab maintains independent plots

5. Plot Controls

   • Play/Pause: Toggle real-time data updates
   • t0 Mode: Show relative time (starts from 0 seconds)
   • Zoom Out: Auto-scale to fit all data
   • Clear Plot: Reset plot (keeps current subscriptions)
   • Buffer Time: Adjust visible time window (1-300 seconds)

6. Interact with Plots

   • Zoom: Scroll wheel (when paused)
   • Pan: Middle mouse button drag (when paused)
   • Delete Plot: Right-click on trace or legend → "Delete plot"
   • Auto-save: Plot configurations save automatically
   • Auto-restore: Plots restore after page refresh

1. Enter Bag Name

   • Type desired bag name in "Bag Name" field
   • Click "Enter Bag Name" to confirm

2. Select Topics

   • Click "Select Topic" button
   • Choose topics to record from the list
   • Click "Confirm"

3. Record

   • Click "Record" to start recording
   • Status indicator shows recording state
   • Click "Stop" to finish recording
   • Bag file is saved to /home/user/dataset/[bag_name]/

1. Load Bag

   • Click "Load Bag File" to browse for bag directory
   • ROS2 bags are stored as directories

2. Select Topics

   • Click "Select Topic" to filter which topics to play
   • All topics are played by default if none selected

3. Playback

   • Click "Play" to start playback
   • Use timeline slider for seeking
   • Click "Stop" to stop playback

1. Select Display Topics

   • Click "Select PointCloud2 Topics" button
   • Choose PointCloud2, Path, or Odometry topics
   • Click "Confirm" to start visualization

2. Camera Controls

   • Rotate: Left mouse drag
   • Zoom: Mouse scroll wheel
   • Pan: Right mouse drag

The service automatically sets:

ROS_DOMAIN_ID=0
ROS_LOCALHOST_ONLY=1

For manual ROS2 commands in other terminals, set the same variables:

export ROS_DOMAIN_ID=0
export ROS_LOCALHOST_ONLY=1
source /opt/ros/jazzy/setup.bash

Ubuntu/Linux:

sudo ufw allow 8080/tcp
sudo ufw reload

Windows:

• Windows Defender Firewall → Advanced Settings → Inbound Rules
• New Rule → Port → TCP 8080 → Allow

Edit ros2_autonav_webui/web_server.py:

# Change port number (default: 8080)
web_thread = threading.Thread(target=run_web_server, args=(node, 9090), daemon=True)

Then rebuild:

colcon build --packages-select ros2_autonav_webui

• ROS2 Jazzy (Desktop Full)

  • rclpy - ROS2 Python library
  • std_msgs, sensor_msgs, geometry_msgs - Standard message types
  • rosbag2_py - Bag file handling

• rosbridge_server - WebSocket bridge for browser communication

  sudo apt install ros-jazzy-rosbridge-server

FAST-LIO (for SLAM/Localization features):

cd ~/your_workspace/src
git clone https://github.com/hku-mars/FAST_LIO.git
cd FAST_LIO
git submodule update --init
cd ~/your_workspace
colcon build --packages-select fast_lio

livox_ros_driver2 (for Livox LiDAR data):

cd ~/your_workspace/src
git clone https://github.com/Livox-SDK/livox_ros_driver2.git
cd ~/your_workspace
colcon build --packages-select livox_ros_driver2

ros2_autonav_webui/
├── ros2_autonav_webui/
│   ├── web_server.py              # Main HTTP server & ROS2 node
│   └── __init__.py
├── web/
│   ├── index.html                 # Main web interface
│   └── static/
│       ├── script.js              # Main UI logic & API calls
│       ├── plot_manager.js        # Plotly.js plot management
│       ├── plot_tab_manager.js    # Plot tab management
│       ├── plot_tree.js           # PlotJuggler-style tree view
│       ├── threejs_display.js     # Three.js 3D visualization
│       └── style.css              # UI styling
├── launch/
│   └── ros2_autonav_webui.launch.py  # ROS2 launch configuration
├── package.xml                    # ROS2 package manifest
├── setup.py                       # Python package setup
├── README.md                      # This file
├── Project.md                     # Detailed project documentation
└── LICENSE                        # Apache 2.0 License

• POST /api/slam/load_config_file - Load SLAM configuration
• POST /api/slam/save_config_file - Save SLAM configuration
• POST /api/slam/start_mapping - Start SLAM process
• POST /api/slam/stop_mapping - Stop SLAM process
• POST /api/slam/save_map - Trigger map save
• GET /api/slam/get_terminal_output - Get real-time terminal output

• POST /api/localization/load_config_file - Load localization config
• POST /api/localization/save_config_file - Save localization config
• POST /api/localization/start_mapping - Start localization
• POST /api/localization/stop_mapping - Stop localization
• GET /api/localization/get_terminal_output - Get terminal output

• POST /api/recorder/set_bag_name - Set recording bag name
• GET /api/recorder/get_topics - Get available topics
• POST /api/recorder/record - Start/stop recording
• GET /api/recorder/state - Get recorder state
• POST /api/player/load_bag - Load bag file for playback
• POST /api/player/play - Start playback
• POST /api/player/stop - Stop playback

• GET /api/ping - Ping server for latency measurement

1. For Python backend changes:

   # Edit files in ros2_autonav_webui/
   colcon build --packages-select ros2_autonav_webui
   source install/setup.bash
   # Restart the server

2. For web frontend changes:

   # Edit files in web/static/
   colcon build --packages-select ros2_autonav_webui
   # Hard refresh browser (Ctrl + F5)

3. For faster iteration (one-time setup):

   colcon build --symlink-install --packages-select ros2_autonav_webui
   # Now Python and web file changes don't require rebuild

Backend (Python):

• Add API endpoints in ros2_autonav_webui/web_server.py
• Use do_GET() for GET requests, do_POST() for POST requests
• Follow existing patterns for error handling and responses

Frontend (JavaScript):

• Main UI logic: web/static/script.js
• Plot management: web/static/plot_manager.js
• Tab management: web/static/plot_tab_manager.js
• Tree view: web/static/plot_tree.js
• Use apiCall(endpoint, data) for backend communication

UI (HTML/CSS):

• Layout: web/index.html
• Styling: web/static/style.css
• Follow existing CSS variable conventions for theming

Issue: Port 8080 already in use

# Check what's using port 8080
sudo lsof -i :8080
# Kill the process or change port in web_server.py

Issue: Plot or 3D viewer not working

# Ensure rosbridge is installed
sudo apt install ros-jazzy-rosbridge-server

# Check if rosbridge is running (it starts automatically with the launch file)
ros2 node list | grep rosbridge

Issue: No topics in plot tree or bag recorder

# Check ROS2 environment variables
echo $ROS_DOMAIN_ID      # Should be 0
echo $ROS_LOCALHOST_ONLY # Should be 1

# List topics manually
ros2 topic list

Issue: Plot configurations not restoring

• Check browser console (F12) for JavaScript errors
• Clear browser cache and LocalStorage if corrupted:

  // In browser console
  localStorage.clear();
  location.reload();

Issue: colcon build fails

# Clean build artifacts
rm -rf build/ install/ log/

# Rebuild from scratch
colcon build --packages-select ros2_autonav_webui

• PlotJuggler-style real-time plotting
• Multi-tab plot management
• Plot state save/restore
• SLAM/Localization control
• Bag Player/Recorder

• XY Plot functionality
• Plot export (PNG, CSV)
• 3D Viewer completion
  • PointCloud2 rainbow coloring
  • Path/Odometry visualization
  • TF tree visualization
• Navigation control (Phase 4)

• Multi-robot support
• Map editor
• Parameter tuning wizard
• Mobile app companion
• Cloud deployment support

Contributions are welcome! Please follow these guidelines:

1. Fork the repository
2. Create a feature branch (git checkout -b feature/amazing-feature)
3. Follow code conventions (see .cursor/rules/01.developerules.mdc)
4. Test thoroughly (build, run, browser test)
5. Commit with clear messages (see existing commit history)
6. Push to your branch (git push origin feature/amazing-feature)
7. Open a Pull Request

• Follow ROS2 naming conventions
• Use ES6+ JavaScript features
• Add JSDoc comments for functions
• Test on both Chrome and Firefox
• Update documentation for new features

• FAST-LIO - Fast LiDAR-Inertial Odometry
• FAST_LIO_ROS2 - ROS2 port of FAST-LIO

• ConPR - ConPR dataset format
• PlotJuggler - Inspiration for plot UI

• Three.js - 3D graphics library
• Plotly.js - Interactive plotting library
• rosbridge_suite - WebSocket interface to ROS

This project is licensed under the Apache License 2.0 - see the LICENSE file for details.

• Three.js: MIT License
• Plotly.js: MIT License
• rosbridge_suite: BSD License

Special thanks to:

• FAST-LIO developers for robust SLAM algorithms
• ConPR team for the dataset format
• PlotJuggler for UI inspiration
• ROS2 community for excellent documentation
• All contributors and users of this project

• Issues: GitHub Issues
• Discussions: GitHub Discussions
• Email: Contact repository owner via GitHub profile

If you find this project useful, please consider giving it a star! ⭐

Made with ❤️ for the ROS2 community