A comprehensive robotics navigation and visualization platform featuring real-time A* pathfinding visualization and ROS2 robot integration.
IEEERobotech/
├── website/ # React web application
│ ├── src/
│ │ ├── components/ # UI and 3D visualization
│ │ ├── hooks/ # React state management
│ │ ├── services/ # ROS & pathfinding logic
│ │ └── types/ # TypeScript definitions
│ └── ...
├── robot/ # Robot code (ROS2 packages)
│ └── README.md
└── README.md
A Pathfinding Visualization*
- Step-by-step algorithm animation
- 8 template environments
- Visual node exploration (open/closed sets)
- Adjustable animation speed
- Path glow effects
Robot Control
- WebSocket connection to ROS2 via rosbridge
- Real-time teleoperation (WASD + joystick)
- Click-to-navigate goal setting
- Emergency stop functionality
Visualization
- 2D/3D view modes with Three.js
- Occupancy grid overlay
- Robot path trail
- Camera feed picture-in-picture
Reserved for ROS2 packages:
- Navigation algorithms
- Sensor processing
- Robot URDF/descriptions
- Launch configurations
cd website
# Install dependencies
npm install
# Start development server
npm run dev- On your robot, start rosbridge:
ros2 launch rosbridge_server rosbridge_websocket_launch.xml port:=9090- In the web app, enter
ws://ROBOT_IP:9090and click Connect
| Technology | Purpose |
|---|---|
| Vite | Build tool |
| React 18 | UI framework |
| TypeScript | Type safety |
| TailwindCSS | Styling |
| Three.js | 3D visualization |
| Zustand | State management |
| Framer Motion | Animations |
| roslibjs | ROS communication |
| Environment | Description |
|---|---|
| Simple Maze | Basic walls with corridors |
| Obstacle Course | Scattered rectangular obstacles |
| Circular Barriers | Various sized circular obstacles |
| Narrow Corridors | Tight passages |
| Random Field | 20% obstacle density |
| Warehouse Layout | Grid-like aisles |
| Spiral Challenge | Long spiral path |
| Dense Forest | 35% obstacle density |
/map- OccupancyGrid/odom- Odometry/path- Navigation path/camera/image_raw/compressed- Camera feed
/goal_pose- Navigation goals/cmd_vel- Velocity commands
# Website development
cd website
npm run dev # Development server
npm run build # Production build
npm run lint # Type checking| Key | Action |
|---|---|
| W / ↑ | Forward |
| S / ↓ | Backward |
| A / ← | Turn left |
| D / → | Turn right |
| Space | Emergency stop |
The web interface features:
- Dark theme with cyan/purple accents
- Glassmorphism UI elements
- Animated node visualization
- Real-time status displays
- Fork the repository
- Create a feature branch
- Make changes
- Submit a pull request
MIT License - IEEE Robotech Team
Built for IEEE Robotech Competition
