Web-ECDIS: Offline-First Maritime Navigation Simulator 🚢⚓

Democratizing Maritime Simulation: A Scenario-Based Progressive Web App for ECDIS, Radar Familiarization, and COLREGs Training.

⚓ Project Overview

Maritime technology is incredibly expensive and notoriously hard to access outside of a formal classroom. This project was built to change that. By bringing a fully offline, browser-based ECDIS and Radar simulator directly to students' devices, Web-ECDIS solves the real-world problem of limited simulator time.

The application is specifically designed to help cadets master the fundamentals:

• True heading vs. relative bearing: Understanding exact vessel orientation.

• Radar plotting: Interpreting and tracking targets on a simulated radar display.

• COLREGs decision-making: Navigating randomized scenarios based on the "rules of the road" to prevent collisions at sea.

⚠️ The Problem

Let's face it: maritime education requires heavy, expensive infrastructure. Student cadets rarely get enough hands-on time with critical bridge equipment like ECDIS and radar systems. This creates a dangerous gap between knowing the theory from a textbook and actually making the right calls under pressure.

Web-ECDIS bridges that gap. It provides a free, accessible, and fully offline-capable simulation tool that runs beautifully in any modern browser.

📚 Thesis Outline

Chapter 1: Introduction

• Background of the Study: The high cost of maritime education and the limited access student cadets have to physical ECDIS simulators.

• Statement of the Problem: Students lack sufficient hands-on time to practice critical skills like interpreting heading and bearing, radar plotting, and understanding COLREGs in real-time.

• Objectives:

  • Develop an offline-first, browser-based simulation tool.

  • Implement randomized COLREGs scenarios to test decision-making.

  • Create a mathematically accurate representation of ship kinematics (gyro, bearing, heading).

• Scope and Limitations: The app is strictly for familiarization and educational purposes, not for actual vessel navigation. It focuses on fundamental COLREGs (crossing, overtaking, head-on) rather than complex, multi-vessel fleet maneuvers.

Chapter 2: Review of Related Literature

• The Role of Simulation: How simulated environments actively improve maritime safety and cadet competency.

• Barriers to Entry: The financial and infrastructural constraints of traditional marine simulators.

• Web Technologies in Education: The rise of Progressive Web Apps (PWAs) to bridge the gap in remote, disconnected learning environments, especially while at sea.

Chapter 3: Methodology and Architecture

• System Architecture: The offline-first data flow. This details how the application runs entirely in the browser using client-side state management and Service Workers to completely eliminate the need for persistent server connections.

• Core Algorithms:

  • Mathematical vector calculations for Speed, Distance, Time, and Relative Motion.

  • Procedural generation of valid, randomized COLREGs scenarios.

• User Interface Design: Adapting standard ECDIS UI conventions for smaller screens like laptops and mobile phones using Tailwind CSS.

Chapter 4: Implementation

• Frontend Shell: Structuring the SvelteKit application.

• Mapping Integration: Implementing Svelte MapLibre and managing offline vector tile caching.

• Radar Simulation Logic: Building the HTML Canvas and SVG rendering for the sweeping radar, range rings, and target plotting.

• State Management: Architecting local stores to track cadet scenario variables and manage simulation physics entirely client-side, without relying on an external database.

Chapter 5: Testing & Evaluation

• Technical Testing: Rigorous testing of the Service Worker to verify 100% offline functionality.

• User Testing: Usability testing with current maritime students.

• Evaluation Metrics: Measuring the application's effectiveness in actually improving students' comprehension of radar plotting and basic COLREGs principles.

Chapter 6: Conclusion and Future Work

• Summary: Assessment of project goals and the viability of web-based maritime training.

• Future Scope: Potential additions like multiplayer modes (two students interacting in the exact same scenario), voice command integration, or dynamic weather simulations.

✨ Key Features

• Offline-First Architecture: Works entirely without an internet connection using Service Workers and local client-side state.

• Randomized COLREGs Scenarios: Procedurally generated crossing, overtaking, and head-on situations so no two practice sessions are exactly the same.

• Simulated Radar Display: Built with HTML Canvas to render a sweeping radar, range rings, and real-time target plotting.

• ECDIS Chart Display: Offline nautical charts powered by MapLibre and pre-cached vector tiles.

• Ship Kinematics Engine: Mathematically accurate vector calculations mapping speed, distance, time, and relative motion.

• Progressive Web App (PWA): Easily installable on laptops, tablets, and mobile phones for a native, full-screen experience.