Gods-Eye-View Modules and Components: Complete Architecture Guide

The gods-eye-view project consists of ten specialized modules—including Cockpit Core, CCTV Sensors, World Navigation, and UI Rendering—that encapsulate distinct responsibilities from flight-deck mathematics to frame-rate throttling.

Gods-eye-view is a web-based tactical visualization platform that simulates an aircraft cockpit environment with external CCTV feeds, weather effects, and real-time navigation data. According to the bilawalsidhu/gods-eye-view source code, the codebase follows a strict modular architecture where individual JavaScript files handle isolated domain concerns. Understanding these gods-eye-view modules is essential for developers extending the simulation or integrating additional sensor streams.

Cockpit Core: Flight-Deck Mathematics and Tracking

The Cockpit Core module handles all flight-deck display logic, including heading calculations, altitude tape rendering, and camera grounding safety. This foundational layer ensures the primary flight display remains synchronized with live data sources.

Key source files include:

The mathematical utilities in cockpitMath.js provide essential transformations for aviation displays:

import {
  normalizeHeading,
  slewHeading,
  cockpitUiUpdateDue,
} from './cockpitMath.js';

// Normalise a raw heading value (e.g., from a sensor)
const heading = normalizeHeading(rawHeading);   // 0 – 359°

/* Smoothly slew the displayed heading toward a target
   without exceeding a max step size (deg per frame) */
const displayed = slewHeading(currentHeading, targetHeading, 2.5);

/* Determine whether the cockpit UI should repaint */
const shouldUpdate = cockpitUiUpdateDue(Date.now(), lastUpdateMs, 100);

For aircraft identification across different data layers, the resolveTrackedAircraftInfo() function merges civilian and military tracking data:

import { resolveTrackedAircraftInfo } from './cockpitMath.js';

const info = resolveTrackedAircraftInfo({
  civilian: civilianLayerInfo,
  military: militaryLayerInfo,
  trackedId: 'military:ABCD12',
});
// `info` now contains the owning layer's data and a `layerId` field.

Altitude visualization uses altitudeRulerTicks() to generate HUD tick marks:

import { altitudeRulerTicks } from './cockpitMath.js';

const ticks = altitudeRulerTicks(12000); // altitude in feet
// `ticks` is an array of objects describing each tick value and its visual slot.

CCTV and External Sensor Integration

The CCTV and External Sensors module manages auxiliary video feeds that supplement the primary cockpit view. These components handle asynchronous camera requests and policy-based feed activation.

Key implementations include:

Requesting a CCTV feed follows this pattern:

import { requestCCTVFocus } from './cctvFocusRequest.js';

const feed = await requestCCTVFocus({ cameraId: 'cam-42', bounds: myBounds });
if (feed) {
  // Render the CCTV video overlay
}

The policy layer in cctvFocusPolicy.js evaluates contextual rules—such as aircraft proximity or alert status—to determine feed visibility without cluttering the primary tactical view.

World Focus and Navigation Systems

The World Focus and Navigation modules determine the geographic center of attention and compute great-circle bearings for route planning. These components bridge the gap between raw coordinate data and the visual map representation.

Primary source files:

These modules feed directly into the map controller, ensuring the tactical view remains centered on relevant operational areas while maintaining proper navigation context.

Weather Effects and Atmospheric Rendering

The Weather Effects module provides mathematical models for visualizing atmospheric phenomena. Rather than simple overlays, these utilities calculate realistic cloud positioning and precipitation patterns based on altitude and geographic data.

Key file:

These modules enable dynamic weather visualization that responds to the aircraft's current altitude and location, enhancing situational awareness during tactical operations.

UI Components and Layout Management

The UI and Rendering layer encompasses the heads-up display (HUD), panel layouts, and interactive controls that present data to the operator. This module ensures consistent frame rates and responsive interactions under heavy data loads.

Critical components include:

The Render Governor (src/renderGovernor.js) acts as a performance safeguard, throttling rendering operations to maintain consistent frame rates when processing high-frequency data updates. This prevents UI lag during intensive flight tracking scenarios.

General UI utilities in src/ui.js provide reusable widgets—such as tooltips, buttons, and split-flap displays (src/splitFlap.js)—used across multiple panels.

Entry Points and System Integration

The Entry Point and Misc module bootstraps the application and wires all components together. This top-level orchestration layer initializes the global application context and manages the module lifecycle.

Key files:

The initialization sequence in main.js creates the global application context, instantiates the render governor for frame pacing, and loads the initial world focus before mounting the cockpit interface.

Summary

Frequently Asked Questions

What is the primary role of cockpitMath.js in the gods-eye-view architecture?

The cockpitMath.js module serves as the mathematical foundation for the flight deck, providing functions like normalizeHeading(), slewHeading(), and altitudeRulerTicks() to transform raw sensor data into aviation-standard displays. It handles critical calculations for heading normalization, smooth gauge transitions, and altitude tape generation used throughout the HUD rendering pipeline.

How does the render governor maintain performance during heavy data loads?

The renderGovernor.js module implements frame-rate throttling by scheduling render cycles and skipping unnecessary repaints when the data update rate exceeds the display refresh capacity. This prevents UI lockup when processing high-frequency flight tracking updates or multiple simultaneous CCTV feeds.

How do CCTV modules integrate with the main cockpit display?

The CCTV integration uses a two-stage process where cctvFocusRequest.js handles asynchronous camera feed acquisition via requestCCTVFocus(), while cctvFocusPolicy.js applies contextual rules to determine when external video should overlay the primary tactical view. This policy-based approach prevents display clutter while ensuring critical external feeds appear during specific operational contexts.

What determines the initial geographic focus when the application loads?

The worldFocus.js module calculates the initial viewport center based on configuration parameters or default geographic boundaries, while navigationPolicy.js establishes the initial bearing and route context. During bootstrap, main.js coordinates these modules to set the starting location before the map stack controller renders the initial tactical view.

Have a question about this repo?

These articles cover the highlights, but your codebase questions are specific. Give your agent direct access to the source. Share this with your agent to get started:

Share the following with your agent to get started:
curl -s "https://instagit.com/install.md"

Works with
Claude Codex Cursor VS Code OpenClaw Any MCP Client

Maintain an open-source project? Get it listed too →