# ksbaig/view3602 architecture

> Architecture diagram of the GitHub repository ksbaig/view3602, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-09-27). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/ksbaig/view3602
- Repository: https://github.com/ksbaig/view3602

## Overview

Pannellum is a browser-based panorama viewer. Its principal workflow is to initialize a viewer from embedded settings or standalone URL/configuration, load panorama imagery, render the view, and let the user navigate it. The source also indicates scene switching, hotspots, orientation input, and multiple image formats; examples identify cubemap, multiresolution, and tour use cases. The README is empty, and the source excerpts are partial, so some subsystem links are omitted where exact wiring is not shown.

Main entry points: [`src/js/pannellum.js`](https://github.com/ksbaig/view3602/blob/main/src/js/pannellum.js) (Viewer controller), [`src/standalone/standalone.js`](https://github.com/ksbaig/view3602/blob/main/src/standalone/standalone.js) (Standalone launcher), [`src/js/libpannellum.js`](https://github.com/ksbaig/view3602/blob/main/src/js/libpannellum.js) (Panorama renderer), [`src/css/pannellum.css`](https://github.com/ksbaig/view3602/blob/main/src/css/pannellum.css) (Viewer styling)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_entry["Viewer entry"]
  node_standalone["Standalone launcher<br/>[standalone.js]"]
  node_config["URL and scene config<br/>[pannellum.js]"]
end

subgraph group_view["Panorama viewing"]
  node_viewer["Viewer controller<br/>[pannellum.js]"]
  node_renderer["Panorama renderer<br/>[libpannellum.js]"]
  node_render_canvas["Rendered panorama<br/>[libpannellum.js]"]
end

subgraph group_interaction["Navigation and scenes"]
  node_input["Pointer and keyboard<br/>[pannellum.js]"]
  node_orientation["Device orientation<br/>[pannellum.js]"]
  node_scenes["Scene switching<br/>[pannellum.js]"]
  node_hotspots["Hotspot overlays<br/>[pannellum.js]"]
end

subgraph group_presentation["Presentation"]
  node_viewer_ui["Controls and metadata<br/>[pannellum.js]"]
  node_styles["Viewer styling<br/>[pannellum.css]"]
end

node_user(("Viewer user"))
node_remote_config["Config resource"]
node_image_source["Panorama images"]
node_browser["Browser APIs"]

node_user -->|"opens viewer"| node_standalone
node_standalone -->|"parses options"| node_config
node_standalone -->|"fetches config"| node_remote_config
node_standalone -->|"creates viewer"| node_viewer
node_config -->|"configures"| node_viewer
node_viewer -->|"creates renderer"| node_renderer
node_renderer -->|"loads imagery"| node_image_source
node_renderer -->|"renders view"| node_render_canvas
node_input -->|"updates view"| node_viewer
node_orientation -->|"updates view"| node_viewer
node_viewer -->|"switches scenes"| node_scenes
node_viewer -->|"creates overlays"| node_hotspots
node_viewer -->|"builds controls"| node_viewer_ui
node_browser -->|"provides location"| node_standalone
node_browser -->|"provides events"| node_viewer
node_styles -->|"styles controls"| node_viewer_ui

click node_standalone "https://github.com/ksbaig/view3602/blob/main/src/standalone/standalone.js"
click node_viewer "https://github.com/ksbaig/view3602/blob/main/src/js/pannellum.js"
click node_config "https://github.com/ksbaig/view3602/blob/main/src/js/pannellum.js"
click node_renderer "https://github.com/ksbaig/view3602/blob/main/src/js/libpannellum.js"
click node_render_canvas "https://github.com/ksbaig/view3602/blob/main/src/js/libpannellum.js"
click node_input "https://github.com/ksbaig/view3602/blob/main/src/js/pannellum.js"
click node_orientation "https://github.com/ksbaig/view3602/blob/main/src/js/pannellum.js"
click node_scenes "https://github.com/ksbaig/view3602/blob/main/src/js/pannellum.js"
click node_hotspots "https://github.com/ksbaig/view3602/blob/main/src/js/pannellum.js"
click node_viewer_ui "https://github.com/ksbaig/view3602/blob/main/src/js/pannellum.js"
click node_styles "https://github.com/ksbaig/view3602/blob/main/src/css/pannellum.css"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_standalone,node_config,node_user,node_browser toneBlue
class node_viewer,node_renderer,node_render_canvas toneAmber
class node_input,node_orientation,node_scenes,node_hotspots toneMint
class node_viewer_ui,node_styles toneRose
class node_remote_config,node_image_source toneIndigo
```

## Components

### Viewer entry

- [Standalone launcher](https://github.com/ksbaig/view3602/blob/main/src/standalone/standalone.js): `src/standalone/standalone.js`
- [URL and scene config](https://github.com/ksbaig/view3602/blob/main/src/js/pannellum.js): `src/js/pannellum.js`

### Panorama viewing

- [Viewer controller](https://github.com/ksbaig/view3602/blob/main/src/js/pannellum.js): `src/js/pannellum.js`
- [Panorama renderer](https://github.com/ksbaig/view3602/blob/main/src/js/libpannellum.js): `src/js/libpannellum.js`
- [Rendered panorama](https://github.com/ksbaig/view3602/blob/main/src/js/libpannellum.js): `src/js/libpannellum.js`

### Navigation and scenes

- [Pointer and keyboard](https://github.com/ksbaig/view3602/blob/main/src/js/pannellum.js): `src/js/pannellum.js`
- [Device orientation](https://github.com/ksbaig/view3602/blob/main/src/js/pannellum.js): `src/js/pannellum.js`
- [Scene switching](https://github.com/ksbaig/view3602/blob/main/src/js/pannellum.js): `src/js/pannellum.js`
- [Hotspot overlays](https://github.com/ksbaig/view3602/blob/main/src/js/pannellum.js): `src/js/pannellum.js`

### Presentation

- [Controls and metadata](https://github.com/ksbaig/view3602/blob/main/src/js/pannellum.js): `src/js/pannellum.js`
- [Viewer styling](https://github.com/ksbaig/view3602/blob/main/src/css/pannellum.css): `src/css/pannellum.css`

### Other components

- **Viewer user**
- **Config resource**
- **Panorama images**
- **Browser APIs**

## Connections

- Viewer user → Standalone launcher: opens viewer
- Standalone launcher → URL and scene config: parses options
- Standalone launcher → Config resource: fetches config
- Standalone launcher → Viewer controller: creates viewer
- URL and scene config → Viewer controller: configures
- Viewer controller → Panorama renderer: creates renderer
- Panorama renderer → Panorama images: loads imagery
- Panorama renderer → Rendered panorama: renders view
- Pointer and keyboard → Viewer controller: updates view
- Device orientation → Viewer controller: updates view
- Viewer controller → Scene switching: switches scenes
- Viewer controller → Hotspot overlays: creates overlays
- Viewer controller → Controls and metadata: builds controls
- Browser APIs → Standalone launcher: provides location
- Browser APIs → Viewer controller: provides events
- Viewer styling → Controls and metadata: styles controls