How to Customize the UI of God's Eye View: Complete Guide to Themes, Panels, and Layers

God's Eye View provides three customizable UI layers—visual sensor presets via StyleManager, DOM-based panel docking controls, and modular map-stack chips—allowing you to modify post-process shaders, rearrange interface panels, and add custom data layers through vanilla JavaScript and CSS.

The bilawalsidhu/gods-eye-view repository implements a modular UI architecture built on vanilla JavaScript and Vite. Whether you need to switch to thermal imaging, pin critical panels, or integrate proprietary data feeds, you can customize the UI of God's Eye View by targeting three distinct integration points in the source code.

Visual Style Customization (Sensor Presets)

God's Eye View renders its globe and HUD through interchangeable GLSL post-process shaders called "styles." These control the visual aesthetic—from CRT monitors to night vision—without altering the underlying data.

Keyboard-Activated Style Switching

Users can cycle through built-in presets interactively. Press 1 through 7 on the keyboard to toggle predefined visual modes including CRT, NVG (night vision), FLIR (thermal), Noir, and Snow. These shortcuts invoke the StyleManager class defined in src/ui.js (lines 2112-2114).

Programmatic Style Control

For scripted customization, import StyleManager from src/ui.js and call setStyle() with the shader module name:

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

// Activate night vision shader
StyleManager.setStyle('nightVision');

// Switch to thermal imaging view
StyleManager.setStyle('thermal');

The setStyle() method accepts a string key that maps to shader modules stored in src/styles/. Each module exports a shader object (e.g., nightVisionShader, thermalShader) wrapping a GLSL program.

Creating Custom Visual Styles

To add a new visual preset:

1. Create a JavaScript file in src/styles/ that exports a shader object using src/styles/retro.js as a template.
2. Register the name in the STYLE_SHADERS map within src/ui.js.

// src/styles/customScan.js
export const customScanShader = {
  // GLSL uniforms and fragment shader logic
};

// In src/ui.js, add to the STYLE_SHADERS map:
STYLE_SHADERS.set('customScan', customScanShader);

Panel Layout and Docking Control

The interface panels in God's Eye View are standard DOM elements managed through CSS class toggling. You control visibility and positioning by manipulating classes on <section> elements identified by IDs like #data-panel, #context-panel, and #radio-panel.

DOM Structure and CSS Classes

The UI uses specific CSS classes to control panel state (as implemented in src/ui.js, lines 1076-1080):

• collapsed – Hides the panel from view
• dock-pinned or dock-pinned-top – Keeps the panel visible during scrolling
• active – Marks the panel as currently selected

Programmatic Panel Manipulation

Target panels directly via the DOM or use helper methods from src/ui.js:

// Collapse the CCTV panel
document.getElementById('cctv-panel')?.classList.add('collapsed');

// Pin the global context panel to the right rail
document.getElementById('global-context-panel')
        ?.classList.add('dock-pinned-top');

// Alternative: Use built-in helpers from ui.js
togglePanelPinned('data-panel', true);

Map Stack and Data Layer Customization

God's Eye View renders live data (flights, satellites, CCTV feeds) through a modular chip system. Each layer registers a UI chip that appears in the left-hand toolbar for toggle control.

Understanding Layer Chips

The toolbar construction is handled by LayerStateCoordinator (referenced in src/ui.js, lines 25-27) and the chip builder in src/mapStackChips.js. Each data layer exports metadata including a chipId that links the backend data to its UI control.

Registering Custom Data Layers

To add a new data layer with its own UI chip:

// myLayer.js
export const myLayer = {
  id: 'flight-tracking',
  name: 'Custom Flight Layer',
  chipId: 'flight-chip',
  // Data fetching and rendering implementation
};

// In src/ui.js or a plugin file:
import { myLayer } from './myLayer.js';
LayerStateCoordinator.register(myLayer);

The toolbar automatically renders a new chip. Users can toggle the layer on/off, and you can style the chip via style.css or by adding custom classes to the layer definition.

Global Theme and CSS Modifications

For holistic UI changes, edit style.css in the repository root. This stylesheet controls:

• HUD colors (target .hud-panel selectors)
• Chip button sizing (modify .layer-chip classes)
• Layout dimensions (panel widths, font scales)

Because the project uses vanilla JavaScript + Vite, changes reflect immediately during development:

npm run dev

To implement a dark mode, toggle a root class (e.g., .dark-mode) on the body element and provide alternative CSS rules in style.css.

Summary

• Visual Styles: Use StyleManager.setStyle() in src/ui.js to switch between GLSL shaders stored in src/styles/, or press 1-7 for built-in presets.
• Panel Layout: Manipulate CSS classes (collapsed, dock-pinned-top) on DOM elements like #cctv-panel and #global-context-panel, or use helper methods from src/ui.js.
• Data Layers: Register custom layers through LayerStateCoordinator.register() to automatically generate toolbar chips in src/mapStackChips.js.
• Global Styling: Modify style.css for color schemes and layout adjustments, with hot-reload support via Vite.

Frequently Asked Questions

How do I add a custom visual style to God's Eye View?

Create a new shader module in src/styles/ that exports a GLSL shader object, then register the style name in the STYLE_SHADERS map within src/ui.js. The StyleManager class dynamically loads these modules when you call setStyle('yourStyleName').

Can I save custom panel layouts in God's Eye View?

While the repository does not include persistent state management by default, you can serialize panel states by reading the CSS classes (collapsed, dock-pinned) from panel elements like #data-panel and storing them in localStorage. Restore layouts by reapplying these classes on application load.

How do I disable specific data layers programmatically?

Call the LayerStateCoordinator methods to toggle layer visibility. Each registered layer (stored in src/data/ modules) can be deactivated by ID, which automatically removes its chip highlight and suspends data fetching without removing the UI element entirely.

What file controls the color scheme of the HUD?

The HUD color palette is defined in style.css targeting the .hud-panel selector. For shader-based tinting (like green night vision or amber thermal), modify the fragment shaders in src/styles/nightVision.js or src/styles/thermal.js to adjust the RGB output values.

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