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

> Discover how the App orchestrator in Gods Eye View coordinates CesiumJS post-processing effects, panels, and state management for a unified UI experience. Learn more now.

- Repository: [Bilawal Sidhu/gods-eye-view](https://github.com/bilawalsidhu/gods-eye-view)
- Tags: internals
- Published: 2026-09-12

---

**The App orchestrator in Gods Eye View is a central coordination hub implemented in [`src/ui.js`](https://github.com/bilawalsidhu/gods-eye-view/blob/main/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`](https://github.com/bilawalsidhu/gods-eye-view/blob/main/src/ui.js) [lines 491-508](https://github.com/bilawalsidhu/gods-eye-view/blob/main/src/ui.js#L491-L508)—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`](https://github.com/bilawalsidhu/gods-eye-view/blob/main/contextModePolicy.js) and [`contactsDetectionPolicy.js`](https://github.com/bilawalsidhu/gods-eye-view/blob/main/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:

```javascript
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:

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

```

## Detection Overlays and Notifications

### Detection Overlay Cycling

Working with [`contactsDetectionPolicy.js`](https://github.com/bilawalsidhu/gods-eye-view/blob/main/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:

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

```

## Policy Module Integration

The orchestrator consumes modular policies to enforce UI constraints. [`contextModePolicy.js`](https://github.com/bilawalsidhu/gods-eye-view/blob/main/contextModePolicy.js) governs how different contexts (CCTV vs. Intel HUD) enable or disable specific controls, while [`contactsDetectionPolicy.js`](https://github.com/bilawalsidhu/gods-eye-view/blob/main/contactsDetectionPolicy.js) implements the logic for threat detection overlays. By delegating business rules to these modules, [`src/ui.js`](https://github.com/bilawalsidhu/gods-eye-view/blob/main/src/ui.js) remains focused on coordination rather than policy implementation.

## Summary

- The **App orchestrator** resides in [`src/ui.js`](https://github.com/bilawalsidhu/gods-eye-view/blob/main/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`](https://github.com/bilawalsidhu/gods-eye-view/blob/main/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.