How the App Orchestrator in Gods Eye View Works: CesiumJS UI Coordination

The App orchestrator in Gods Eye View is a central coordination hub implemented in src/ui.js that wires together CesiumJS post-processing effects, interactive panels, and state management into a single cohesive instance.

The bilawalsidhu/gods-eye-view repository delivers a surveillance-style geospatial visualization built on CesiumJS. At its core, the App orchestrator—instantiated via createUIOrchestrator() in src/ui.js lines 491-508—serves as the definitive source of truth for all UI interactions, visual effects, and cross-component communication.

Core Architecture and Initialization

The orchestrator is designed as a singleton-like controller that initializes once on page load. According to the source code, it maintains direct references to the Cesium Viewer instance, DOM panel elements, and policy modules such as contextModePolicy.js and contactsDetectionPolicy.js.

This centralization ensures that when multiple controls modify shared data—such as switching visual styles—the post-process pipeline and Intel HUD variants update in lockstep without state desynchronization.

Initialize the orchestrator by passing an existing Cesium viewer:

import { createUIOrchestrator } from './ui.js';

const viewer = new Cesium.Viewer('cesiumContainer');
const ui = createUIOrchestrator(viewer);

window.toggleBloom = (on) => ui.setBloom(on);
window.switchStyle = (style) => ui.applyStylePreset(style);
window.shareLink = () => ui.copyShareUrl();

Visual Effects Pipeline Management

Post-Process Stage Registration

The orchestrator registers GLSL-based post-process stages directly with CesiumJS. It creates Cesium.PostProcessStage objects for each visual style—including NVG, FLIR, CRT, anime, noir, and snow—storing them in an internal map. When users select a new aesthetic, the orchestrator updates each stage's uniforms to cross-fade intensities smoothly.

Real-Time Effect Toggles

For immediate visual feedback, the orchestrator exposes wrapper functions that interface with Cesium's rendering engine:

• setBloom(enabled, intensity) – Toggles the bloom effect and adjusts its intensity
• setSharpen(enabled, amount) – Controls sharpening filters applied to the viewport

These methods are invoked when users toggle UI switches, forwarding values directly to the corresponding Cesium stages.

Interactive Panel Coordination

Draggable and Collapsible Panels

The orchestrator manages UI panels including the CCTV interface, location bar, and intel HUD. It attaches drag listeners to DOM elements, computes viewport-clamped positions to prevent off-screen elements, and persists geometry to localStorage on pointerup events. This ensures panel layouts survive page refreshes.

CCTV Panel Integration

Through a dedicated API surface, the orchestrator facilitates camera control:

• cctv.selectCamera(id) – Switches active surveillance feeds
• cctv.setCalibration(patch) – Applies projection calibration parameters

These methods are triggered by both UI interactions and keyboard shortcuts, with the orchestrator mediating between input events and the CCTV subsystem.

Location Bar and Orbit Controller

The location bar displays city and POI preset pills with QWERTY navigation support. When users click pills or execute searches, the orchestrator invokes viewer.camera.flyTo() with target coordinates. It simultaneously manages the orbit controller, initiating smooth "fly-around" animations when POIs are selected and halting them on user interaction.

State Management and Persistence

Shareable URL Encoding

The Share-link manager encodes the complete UI state—including active visual styles, camera selections, and panel geometries—into a query string. When users trigger copyShareUrl(), the orchestrator collects current states, builds the URL parameters, and pushes them to browser history. On application startup, it parses these parameters to restore exact configurations.

Recording Mode and HUD Variants

During screen capture, the orchestrator activates recording mode by setting an internal flag, overlaying safe-frame guides on the Cesium scene, and swapping HUD variants via the Intel HUD manager. This ensures clean captures without interface distractions.

Apply a complete style preset with a single call:

document.getElementById('retroBtn').addEventListener('click', () => {
  ui.applyStylePreset('retro');
});

Detection Overlays and Notifications

Detection Overlay Cycling

Working with contactsDetectionPolicy.js, the orchestrator cycles through detection modes such as thermal and tactical, adjusting shader uniforms and overlay density based on user slider inputs.

Toast Notification System

For transient user feedback, the orchestrator maintains a lightweight toast queue. Calling ui.toast('CCTV calibrated', { duration: 3000 }) enqueues messages that fade automatically after specified timeouts:

ui.toast('CCTV calibration saved', { duration: 3000 });

Policy Module Integration

The orchestrator consumes modular policies to enforce UI constraints. contextModePolicy.js governs how different contexts (CCTV vs. Intel HUD) enable or disable specific controls, while contactsDetectionPolicy.js implements the logic for threat detection overlays. By delegating business rules to these modules, src/ui.js remains focused on coordination rather than policy implementation.

Summary

• The App orchestrator resides in src/ui.js and initializes via createUIOrchestrator(viewer).
• It manages CesiumJS post-process stages for NVG, FLIR, CRT, and other visual effects through direct PostProcessStage manipulation.
• Interactive panels (CCTV, location bar, intel HUD) are coordinated through dedicated APIs with localStorage persistence.
• The Share-link manager encodes full application state into URLs for reproducible viewing configurations.
• Utility methods like setBloom(), setSharpen(), and toast() provide immediate control over visual and feedback systems.

Frequently Asked Questions

Where is the App orchestrator located in the Gods Eye View codebase?

The App orchestrator is implemented in src/ui.js within the bilawalsidhu/gods-eye-view repository. Its core responsibilities and initialization logic are documented between lines 491-508, where the createUIOrchestrator function is defined.

How does the orchestrator handle visual style changes?

When applyStylePreset() is invoked—such as when selecting "retro" or "noir" modes—the orchestrator simultaneously updates multiple subsystems. It modifies GLSL uniform values for post-process stages, switches Intel HUD variants, and adjusts panel defaults to ensure consistent theming across the entire interface.

What methods does the orchestrator expose for controlling camera and effects?

The orchestrator exposes specific APIs including setBloom(enabled, intensity) and setSharpen(enabled, amount) for visual effects, along with cctv.selectCamera(id) and cctv.setCalibration(patch) for surveillance control. These methods abstract CesiumJS internals and provide stable interfaces for UI components and keyboard shortcuts.

How does state persistence work across sessions?

The orchestrator serializes panel geometries to localStorage on drag completion and encodes comprehensive application states—including camera positions and active styles—into shareable URLs. When the application loads, it parses these storage mechanisms to restore the exact previous configuration.

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}