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

> Customize the God's Eye View UI. Learn to modify shaders, rearrange panels, and add custom data layers using JavaScript and CSS. Complete guide to themes, panels, and layers.

- Repository: [Bilawal Sidhu/gods-eye-view](https://github.com/bilawalsidhu/gods-eye-view)
- Tags: how-to-guide
- Published: 2026-09-05

---

**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`](https://github.com/bilawalsidhu/gods-eye-view/blob/main/src/ui.js) (lines 2112-2114).

### Programmatic Style Control

For scripted customization, import `StyleManager` from [`src/ui.js`](https://github.com/bilawalsidhu/gods-eye-view/blob/main/src/ui.js) and call `setStyle()` with the shader module name:

```js
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`](https://github.com/bilawalsidhu/gods-eye-view/blob/main/src/styles/retro.js) as a template.
2. Register the name in the `STYLE_SHADERS` map within [`src/ui.js`](https://github.com/bilawalsidhu/gods-eye-view/blob/main/src/ui.js).

```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`](https://github.com/bilawalsidhu/gods-eye-view/blob/main/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`](https://github.com/bilawalsidhu/gods-eye-view/blob/main/src/ui.js):

```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`](https://github.com/bilawalsidhu/gods-eye-view/blob/main/src/ui.js), lines 25-27) and the chip builder in [`src/mapStackChips.js`](https://github.com/bilawalsidhu/gods-eye-view/blob/main/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:

```js
// 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`](https://github.com/bilawalsidhu/gods-eye-view/blob/main/style.css) or by adding custom classes to the layer definition.

## Global Theme and CSS Modifications

For holistic UI changes, edit [`style.css`](https://github.com/bilawalsidhu/gods-eye-view/blob/main/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:

```bash
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`](https://github.com/bilawalsidhu/gods-eye-view/blob/main/style.css).

## Summary

- **Visual Styles**: Use `StyleManager.setStyle()` in [`src/ui.js`](https://github.com/bilawalsidhu/gods-eye-view/blob/main/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`](https://github.com/bilawalsidhu/gods-eye-view/blob/main/src/ui.js).
- **Data Layers**: Register custom layers through `LayerStateCoordinator.register()` to automatically generate toolbar chips in [`src/mapStackChips.js`](https://github.com/bilawalsidhu/gods-eye-view/blob/main/src/mapStackChips.js).
- **Global Styling**: Modify [`style.css`](https://github.com/bilawalsidhu/gods-eye-view/blob/main/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`](https://github.com/bilawalsidhu/gods-eye-view/blob/main/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`](https://github.com/bilawalsidhu/gods-eye-view/blob/main/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`](https://github.com/bilawalsidhu/gods-eye-view/blob/main/src/styles/nightVision.js) or [`src/styles/thermal.js`](https://github.com/bilawalsidhu/gods-eye-view/blob/main/src/styles/thermal.js) to adjust the RGB output values.