ROS 2 Jazzy Web Turtlesim

Minimal ROS 2 Jazzy setup that runs the real TurtleSim GUI in your browser via noVNC, plus a lightweight web teleop UI over rosbridge.

• Real GUI: noVNC at http://localhost:56080
• Web teleop: static UI at http://localhost:55080 (connect to ws://localhost:55090)

Prerequisites (Windows/Linux/macOS)

• Docker Desktop (Windows: WSL 2 backend recommended)
• Compose v2 (docker compose command)

Quick Start

1. Build and start

• PowerShell/cmd/bash: cd c:\\Users\\<you>\\Documents\\dev\\rosweb (adjust to your path)
• docker compose up -d --build

2. Real TurtleSim GUI (noVNC)

• Open: http://localhost:56080
• If you see a directory listing, open vnc_auto.html (or go directly to http://localhost:56080/vnc_auto.html?autoconnect=1)
• Password: ros (change via VNC_PASSWORD)

3. Web Teleop (rosbridge)

• Open: http://localhost:55080
• Bridge URL: ws://localhost:55090 → Connect
• Drive with Arrow keys or WASD; Space to stop

Ports

• 55080 → container 8080: Static web UI
• 55090 → container 9090: rosbridge websocket
• 56080 → container 6080: noVNC web client
• 55901 → container 5901: direct VNC (optional)

All ports are bound to 127.0.0.1 for safety.

Environment Variables

Configure in docker-compose.yaml (or override at runtime):

• VNC_GEOMETRY (default 1280x800): desktop resolution
• VNC_PASSWORD (default ros): VNC/noVNC password
• ROS_DOMAIN_ID (default 0): DDS domain for ROS 2

Continuous Development Workflow

• Build after changes: docker compose build
• Restart services: docker compose up -d
• Stop stack: docker compose down
• Check status: docker compose ps
• View logs: docker compose logs --no-color --tail=200

Typical loops

• Modify web client (files under web/): rebuild is not required for static file edits if you add a bind mount. Current image copies files at build time; for fast iteration, either:

  • Option A: Rebuild (docker compose build) after edits, then up -d.
  • Option B: Temporarily mount web/ as a bind in compose while developing:

    volumes:
      - ./web:/app/web:ro

    Then refresh the browser to see changes immediately.

• Change supervisor/Dockerfile: rebuild required (docker compose build && docker compose up -d).

Healthchecks

Compose healthcheck probes the internal services:

• Web UI on 8080
• noVNC on 6080
• rosbridge on 9090 Check with docker compose ps to see healthy.

Security Notes

• By default, ports are bound to 127.0.0.1. If exposing externally, place behind a reverse proxy (nginx/traefik) with TLS and auth.
• Change VNC_PASSWORD for shared environments.
• Avoid exposing DDS directly to the internet.

Troubleshooting

• noVNC shows directory listing only: open vnc_auto.html?autoconnect=1.
• Black/blank VNC: wait a few seconds; refresh once; check logs.
• Web teleop doesn’t move turtle: confirm the Bridge URL is ws://localhost:55090 and you clicked Connect; tail logs for rosbridge.
• Ports blocked: Windows can deny low ports; we use high ports to avoid conflicts. If still blocked, choose different host ports in compose.

Project Layout

• Dockerfile — Jazzy base; installs turtlesim, rosbridge, VNC/noVNC, supervisor
• supervisord.conf — starts VNC, noVNC, turtlesim, rosbridge, and static web server
• docker-compose.yaml — service, ports, env, healthcheck
• web/ — minimal roslibjs UI (canvas + teleop)
• project_description.md — architecture and MVP notes
• README.md — this guide

Next Steps

• Add a redirect file to make http://localhost:56080 auto-open vnc_auto.html?autoconnect=1.
• Parameterize host ports via compose variables for quick port swaps.
• Optional: split into separate services (desktop vs web) if scaling.