Spot Robot Command Center

A modern, professional web-based UI command center for controlling Boston Dynamics' Spot robot with real-time camera feeds, advanced controls, and secure authentication.

Quickstart (3 Minutes)

# 1) Backend
cd backend
source venv/bin/activate  # On Windows: venv\Scripts\activate
python app.py

# 2) Frontend (new terminal)
cd frontend
npm start

Open http://localhost:3000 → Login with your configured credentials → Power On → Stand → Move.

Features

✨ Real-time Camera Feeds - Stream video from multiple robot cameras simultaneously
🎮 Advanced Robot Control - Stand, sit, move, and manipulate with intuitive interface
🦾 Arm Control - Reach to positions, rotate end-effector, stow/unstow arm
✊ Gripper Control - Open, close, and precisely control gripper position
📊 Live Telemetry Dashboard - Monitor battery, uptime, distance traveled, and command count
🔐 JWT Authentication - Secure token-based user authentication
⌨️ Keyboard & UI Controls - Intuitive keyboard shortcuts (WASD) and button controls
🎨 Professional Dark UI - Modern interface with responsive design
🐳 Docker & Kubernetes Ready - Complete containerization for easy deployment
🔒 Production-Ready - SSL/TLS, health checks, logging, and monitoring support

Project Structure

SpotCommandCenter/
├── backend/
│   ├── app.py                    # Flask REST API server
│   ├── robot_controller.py       # Spot SDK integration
│   ├── arm_controller.py         # Arm & gripper control
│   ├── camera_stream.py          # Camera streaming handler
│   ├── auth.py                   # JWT authentication
│   ├── config.py                 # Configuration settings
│   ├── requirements.txt          # Python dependencies
│   ├── Dockerfile                # Docker configuration
│   ├── .env.example              # Environment template
│   └── .dockerignore
│
├── frontend/
│   ├── public/
│   │   └── index.html
│   ├── src/
│   │   ├── components/
│   │   │   ├── Login.js          # Authentication UI
│   │   │   ├── CameraFeed.js     # Video streaming
│   │   │   ├── ControlPanel.js   # Movement controls
│   │   │   ├── ArmControl.js     # Arm manipulation
│   │   │   ├── GripperControl.js # Gripper control
│   │   │   ├── RobotStatus.js    # Status display
│   │   │   ├── Telemetry.js      # Metrics dashboard
│   │   │   ├── ConnectionManager.js
│   │   │   └── (CSS files)
│   │   ├── App.js
│   │   ├── App.css
│   │   └── index.js
│   ├── package.json
│   ├── Dockerfile
│   └── .dockerignore
│
├── docker/
│   └── nginx.conf                # Nginx proxy configuration
│
├── docker-compose.yml            # Full stack orchestration
├── README.md                      # This file
├── DEPLOYMENT.md                 # Deployment & production guide
├── API_DOCS.md                   # API reference
├── setup.sh / setup.bat          # Quick setup scripts
└── .gitignore

Installation

Prerequisites

Python 3.8+ - For the backend
Node.js 16+ - For the frontend
Boston Dynamics Spot SDK 4.1.1+ - For robot communication
Docker & Docker Compose (optional) - For containerized deployment
Spot Robot - Connected to your network (or use mock mode)

Step-by-Step Start and Connect

Set robot credentials

Copy the env template:
```
cp backend/.env.example backend/.env
```
Edit backend/.env and set:
- ROBOT_IP
- ROBOT_USERNAME
- ROBOT_PASSWORD

Start the backend

cd backend
source venv/bin/activate  # On Windows: venv\Scripts\activate
python app.py

Start the frontend (new terminal)

cd frontend
npm start

Open the UI

Visit http://localhost:3000

Connect and drive

Log in with the credentials configured in backend/.env
Click Power On
Click Stand
Use the on-screen arrows or W/A/S/D to move
Toggle Obstacle Avoidance as needed in the Safety section

Quick Start (Development)

Option 1: Automated Setup

Linux/macOS:

chmod +x setup.sh
./setup.sh

Windows:

setup.bat

Option 2: Manual Setup

Backend:

cd backend
python -m venv venv
source venv/bin/activate  # On Windows: venv\Scripts\activate
pip install -r requirements.txt
cp .env.example .env
# Edit .env with your settings
python app.py

Frontend (in another terminal):

cd frontend
npm install
npm start

Then open http://localhost:3000 in your browser.

Docker Deployment

Quick start:

docker-compose up -d

First time setup:

cp backend/.env.example backend/.env
# Edit backend/.env with your robot configuration

# On Windows, you may need to create SSL certificates:
mkdir docker/ssl
# Create self-signed cert or copy your existing cert

docker-compose up -d

Access the application:

Configuration

Environment Variables (.env)

Robot Settings:

ROBOT_IP=192.168.1.100
ROBOT_USERNAME=admin
ROBOT_PASSWORD=your_password

Server Settings:

DEBUG=False
HOST=0.0.0.0
SERVER_PORT=5000
FLASK_ENV=production

Security:

JWT_SECRET=your-super-secret-key-minimum-32-characters
JWT_EXPIRATION_HOURS=24

Camera:

CAMERA_QUALITY=80
CAMERA_MAX_FPS=30
STREAM_FORMAT=mjpeg

Usage

Logging In

Credentials are configured via environment variables in backend/.env:

APP_USER_ADMIN — sets the admin password
APP_USER_OPERATOR — sets the operator password

See backend/.env.example for the full template.

Robot Control

Stance:

Stand up | Sit down

Movement:

W/↑ = Forward
S/↓ = Backward
A/← = Strafe left
D/→ = Strafe right
Q = Rotate left
E = Rotate right
Space = Stop

Arm Control:

Set X, Y, Z coordinates
Adjust end-effector rotation
Stow/unstow arm positions

Gripper:

Slider for precise position control (0-100%)
Quick open/close buttons

Telemetry Dashboard

Real-time metrics:

Battery percentage with visual bar
System uptime
Distance traveled
Commands executed

API Reference

Authentication

POST /api/auth/login
{
  "username": "admin",
  "password": "<your_password>"
}

# Returns:
{
  "token": "eyJ...",
  "user": "admin"
}

# Use token in Authorization header:
Authorization: Bearer eyJ...

Robot Control

GET  /api/robot/state              # Get battery, power state
POST /api/robot/stand              # Stand command
POST /api/robot/sit                # Sit command
POST /api/robot/move               # Move with velocity
POST /api/robot/stop               # Stop movement

Arm & Gripper

POST /api/robot/arm/reach          # Reach to position
POST /api/robot/arm/rotate         # Rotate end-effector
POST /api/robot/arm/stow           # Stow arm
POST /api/robot/arm/unstow         # Unstow arm
POST /api/robot/gripper/open       # Open gripper
POST /api/robot/gripper/close      # Close gripper
POST /api/robot/gripper/set        # Set position (0-100%)
GET  /api/robot/gripper/position   # Get current position

Cameras & Streaming

GET  /api/cameras                  # List available cameras
GET  /api/camera/{name}/image      # Get single frame
GET  /api/camera/{name}/stream     # MJPEG video stream

Telemetry

GET  /api/robot/telemetry          # Get all metrics

See API_DOCS.md for complete API reference with examples.

Deployment

Development Build

cd frontend
npm start

Production Build

cd frontend
npm run build
# Serves on http://localhost:5000

Docker Production

See DEPLOYMENT.md for:

Docker Compose setup
AWS (ECS, Lightsail, EC2)
Heroku deployment
Google Cloud Run
Azure Container Instances
SSL/TLS configuration
Security best practices
Monitoring & logging

Security

Authentication

JWT token-based authentication
Secure password hashing
Token expiration (24 hours default)
Protected API endpoints

Network Security

HTTPS/SSL support (production)
Nginx reverse proxy with security headers
CORS protection
Rate limiting ready

Credentials

⚠️ IMPORTANT: Change default credentials before production deployment!

Edit backend/auth.py:

DEFAULT_USERS = {
    'admin': 'your_secure_password_here',
    'operator': 'operator_secure_password',
}

For database-backed authentication (recommended for production):

Implement bcrypt password hashing
Store credentials in encrypted database
Implement user roles and permissions

Troubleshooting

Can't connect to robot

Verify robot IP: ping <robot-ip>
Check credentials in .env
Ensure robot is powered on
Verify network connectivity

Mock mode

The app runs in harmless mock mode if:

Spot SDK isn't installed
Robot IP is unreachable
Credentials are incorrect

Perfect for UI testing!

Port already in use

# Linux/macOS - kill process on port 5000
sudo lsof -i :5000
sudo kill -9 <PID>

# Windows
netstat -ano | findstr :5000
taskkill /PID <PID> /F

Docker issues

# View logs
docker-compose logs -f backend
docker-compose logs -f frontend

# Rebuild everything
docker-compose down
docker-compose up -d --build

Development

Adding Features

Backend:
- Add routes to app.py
- Extend robot_controller.py
- Update requirements.txt
Frontend:
- Create components in src/components/
- Add corresponding CSS
- Update App.js to include new component
Testing:
- Backend: pytest (if added)
- Frontend: npm test

Project Statistics

Backend: ~800 lines of Python
Frontend: ~600 lines of React
Styling: ~1000 lines of CSS
Documentation: Complete API & deployment guides
Components: 8 React components
API Endpoints: 30+ REST endpoints

Performance Metrics

Connection establishment: 500-2000ms
State update latency: 100-500ms
Camera frame latency: 50-200ms (MJPEG)
Typical bandwidth: 2-5 Mbps per camera

Known Limitations

WebRTC streams (planned v2.0)
Robot recording/playback (planned v1.2)
Advanced arm kinematics (future)
Multi-robot coordination (future)

System Requirements

Minimum:

CPU: 2 cores
RAM: 2GB
Storage: 10GB
Network: 10 Mbps

Recommended (Production):

CPU: 4+ cores
RAM: 8GB+
Storage: 50GB+
Network: 100+ Mbps

Version History

v2.0 (Current) - Added authentication, arm control, gripper control, Docker, deployment guides
v1.0 - Initial release with basic controls and camera streaming

License

This project uses the Boston Dynamics Spot SDK which is governed by the BDSDK License.

See spot_sdk_v4.1.1/spot-sdk-4.1.1/LICENSE for details.

Support

Authors

Created for comprehensive control of Boston Dynamics' Spot robot through an intuitive web interface.

Last Updated: February 19, 2026
SDK Version: 4.1.1
Status: Production Ready ✅

Project Structure

SpotCommandCenter/
├── backend/                    # Python Flask Server
│   ├── app.py                 # Main Flask application
│   ├── robot_controller.py    # Spot SDK integration
│   ├── camera_stream.py       # Camera streaming handler
│   ├── config.py              # Configuration settings
│   ├── requirements.txt       # Python dependencies
│   └── .env.example           # Environment variables template
│
└── frontend/                  # React Web UI
    ├── public/
    │   └── index.html         # HTML entry point
    ├── src/
    │   ├── App.js            # Main React component
    │   ├── App.css           # Main styles
    │   ├── index.js          # React DOM render
    │   ├── index.css         # Global styles
    │   └── components/       # React components
    │       ├── CameraFeed.js
    │       ├── ControlPanel.js
    │       ├── RobotStatus.js
    │       ├── ConnectionManager.js
    │       └── (respective CSS files)
    └── package.json          # Node dependencies

Installation

Prerequisites

Python 3.8+ - For the backend
Node.js 16+ - For the frontend
Boston Dynamics Spot SDK 4.1.1+ - For robot communication
Spot Robot - Connected to your network (or mock mode for testing)

Backend Setup

Install Python dependencies:

cd backend
pip install -r requirements.txt

Create environment configuration:

cp .env.example .env

Edit .env with your robot's details:

ROBOT_IP=192.168.1.100          # Your Spot robot's IP address
ROBOT_USERNAME=admin             # Default admin username
ROBOT_PASSWORD=your_password     # Your admin password
SERVER_PORT=5000
DEBUG=True

Note: If you don't have a physical Spot robot, the app will run in mock mode automatically. This is great for testing the UI!

Frontend Setup

Install Node dependencies:

cd frontend
npm install

Build the React frontend:

npm run build

This creates an optimized build in the frontend/build directory.

Running the Application

Option 1: Development Mode

Terminal 1 - Backend:

cd backend
python app.py

Terminal 2 - Frontend (React dev server):

cd frontend
npm start

Then open http://localhost:3000 in your browser.

Option 2: Production Mode

cd backend
python app.py

Then open http://localhost:5000 in your browser.

The React build is served directly by Flask.

Usage

Connecting to Your Robot

Enter your robot's IP address (e.g., 192.168.1.100 or spot)
Click Connect
Once connected, you'll see:
- Real-time camera feeds
- Robot status (battery, power state)
- Control panel

Controlling the Robot

Stance Control:

Stand - Robot stands up
Sit - Robot sits down

Movement:

Use W/A/S/D keys or Arrow Keys to move
- W / ↑ = Move forward
- S / ↓ = Move backward
- A / ← = Strafe left
- D / → = Strafe right
- Q = Rotate left (counterclockwise)
- E = Rotate right (clockwise)
Click movement buttons on the control panel
Space Bar = Stop

Camera Feeds

Select different cameras from the dropdown menu
Real-time streaming updates from all robot cameras
Currently supports: Front, back, left, right RGB cameras

API Reference

Connection Endpoints

POST /api/robot/connect           - Connect to a specific robot IP
POST /api/robot/disconnect        - Disconnect from robot
GET  /api/robot/status            - Get connection status

Robot State Endpoints

GET  /api/robot/state             - Get battery, power, etc.

Control Endpoints

POST /api/robot/stand             - Stand command
POST /api/robot/sit               - Sit command
POST /api/robot/move              - Move with velocity
POST /api/robot/stop              - Stop movement

Move Request Body:

{
  "vx": 0.5,      // Forward velocity (m/s)
  "vy": -0.5,     // Lateral velocity (m/s)
  "v_rot": 0.0    // Rotation velocity (rad/s)
}

Camera Endpoints

GET  /api/cameras                 - List available cameras
GET  /api/camera/<name>/image     - Get single JPEG frame
GET  /api/camera/<name>/stream    - MJPEG stream

Configuration

Backend Configuration (`.env`)

Setting	Default	Description
`ROBOT_IP`	`192.168.1.100`	Robot's IP address
`ROBOT_USERNAME`	`admin`	Authentication username
`ROBOT_PASSWORD`	`password`	Authentication password
`SERVER_PORT`	`5000`	Flask server port
`DEBUG`	`True`	Debug mode
`CAMERA_QUALITY`	`80`	JPEG quality (0-100)
`CAMERA_MAX_FPS`	`30`	Maximum camera FPS
`STREAM_FORMAT`	`mjpeg`	Stream format (mjpeg/h264)

Troubleshooting

Can't Connect to Robot

Verify the robot's IP address
Ensure both your computer and robot are on the same network
Check robot credentials (username/password)
Try pinging the robot: ping <robot-ip>

Camera Feed Not Loading

The app starts in mock mode if SDK is unavailable
Check that the camera name is correct
Verify robot connectivity
Check server logs for errors

Port Already in Use

# Change ports in .env:
SERVER_PORT=5001

ModuleNotFoundError for `bosdyn`

The app will automatically run in MockSpotRobotController mode, which is perfect for UI testing without a real robot.

Development

Adding New Features

Backend features - Add routes to app.py
Robot commands - Extend robot_controller.py
UI components - Create new React components in frontend/src/components/
Styling - Add corresponding .css files

Running Tests

# Backend tests (if added)
cd backend
pytest

# Frontend tests (if added)
cd frontend
npm test

System Requirements

Minimum CPU: Intel i5 or equivalent
Minimum RAM: 4 GB
Network: 10 Mbps+ connection recommended for stable video streaming
Browser: Chrome 90+, Firefox 88+, Safari 14+

Performance Notes

Camera streams run at max 30 FPS (configurable)
Each camera connection uses ~2-5 Mbps depending on quality
Multiple concurrent connections are supported
Mock mode has no camera feed but is 100% responsive

Known Limitations

WebRTC streaming not yet implemented (using MJPEG)
Arm control not yet implemented (planned for v1.1)
Gripper control not yet implemented (planned for v1.1)
No recording functionality yet

Future Enhancements (v1.1+)

License

This project uses the Boston Dynamics Spot SDK which is governed by the BDSDK License. See spot_sdk_v4.1.1/spot-sdk-4.1.1/LICENSE for details.

Support & Documentation

Contributing

Contributions are welcome! Feel free to open issues or submit pull requests.

Author

Created for managing and controlling Boston Dynamics' Spot robot through an intuitive web interface.

Last Updated: February 19, 2026
SDK Version: 4.1.1
Status: Active Development

Name		Name	Last commit message	Last commit date
.swarm		.swarm
GhostSDK_bullet_linux		GhostSDK_bullet_linux
backend		backend
docker		docker
docs		docs
frontend		frontend
hetero_follow		hetero_follow
progressive-robot-stream		progressive-robot-stream
robot_relay		robot_relay
.env.example		.env.example
.gitignore		.gitignore
API_DOCS.md		API_DOCS.md
ARCHITECTURE.md		ARCHITECTURE.md
CHANGELOG.md		CHANGELOG.md
DEPLOYMENT.md		DEPLOYMENT.md
QUICKSTART.md		QUICKSTART.md
README.md		README.md
Screenshot from 2026-02-20 19-01-51.png		Screenshot from 2026-02-20 19-01-51.png
Screenshot from 2026-02-20 19-07-06.png		Screenshot from 2026-02-20 19-07-06.png
ar.md		ar.md
arch.md		arch.md
docker-compose.yml		docker-compose.yml
setup.bat		setup.bat
setup.sh		setup.sh

Latest commit

History

Folders and files

Repository files navigation

Spot Robot Command Center

Quickstart (3 Minutes)

Features

Project Structure

Installation

Prerequisites

Step-by-Step Start and Connect

Quick Start (Development)

Option 1: Automated Setup

Option 2: Manual Setup

Docker Deployment

Configuration

Environment Variables (.env)

Usage

Logging In

Robot Control

Telemetry Dashboard

API Reference

Authentication

Robot Control

Arm & Gripper

Cameras & Streaming

Telemetry

Deployment

Development Build

Production Build

Docker Production

Security

Authentication

Network Security

Credentials

Troubleshooting

Can't connect to robot

Mock mode

Port already in use

Docker issues

Development

Adding Features

Project Statistics

Performance Metrics

Known Limitations

System Requirements

Version History

License

Support

Authors

Project Structure

Installation

Prerequisites

Backend Setup

Frontend Setup

Running the Application

Option 1: Development Mode

Option 2: Production Mode

Usage

Connecting to Your Robot

Controlling the Robot

Camera Feeds

API Reference

Connection Endpoints

Robot State Endpoints

Control Endpoints

Camera Endpoints

Configuration

Backend Configuration (.env)

Troubleshooting

Can't Connect to Robot

Camera Feed Not Loading

Port Already in Use

ModuleNotFoundError for bosdyn

Development

Adding New Features

Running Tests

System Requirements

Performance Notes

Known Limitations

Backend Configuration (`.env`)

ModuleNotFoundError for `bosdyn`