# markplaga/twin-pane-stereoscope architecture

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

- Interactive diagram: https://gitdiagram.com/markplaga/twin-pane-stereoscope
- Repository: https://github.com/markplaga/twin-pane-stereoscope

## Overview

Twin Pane Stereoscope is a browser-based image viewer. Users open images, folders, or ZIP archives, then navigate a plate collection in stereo-pair or single-image mode; the viewer handles display, shared pan/zoom, and optional alignment aids. Slide show, fullscreen, and saved viewing settings are supporting capabilities. The runtime is concentrated in app.js, with index.html providing the page. The README documents several features whose implementation details are outside the sampled excerpts, so those relationships are cited to the README.

Main entry points: [`app.js`](https://github.com/markplaga/twin-pane-stereoscope/blob/main/app.js) (Plate collection), [`index.html`](https://github.com/markplaga/twin-pane-stereoscope/blob/main/index.html) (Viewer page)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_ingest["Image intake"]
  node_file_intake["File and folder loading<br/>[app.js]"]
  node_zip_unpack["ZIP unpacking<br/>[app.js]"]
  node_collection["Plate collection<br/>[app.js]"]
end

subgraph group_viewing["Viewing and navigation"]
  node_slide_show["Slide show<br/>[app.js]"]
  node_image_display["Image display<br/>[app.js]"]
  node_stereo_mode["Stereo and single modes<br/>[app.js]"]
end

subgraph group_adjust["Display adjustments"]
  node_shared_transform["Shared pan and zoom<br/>[app.js]"]
  node_alignment["Pair alignment<br/>[app.js]"]
  node_fusion_dots["Fusion dots<br/>[app.js]"]
end

subgraph group_interface["Controls and settings"]
  node_page["Viewer page<br/>[index.html]"]
  node_navigation["Navigation controls<br/>[app.js]"]
  node_settings["Viewing settings<br/>[app.js]"]
  node_fullscreen["Fullscreen and chrome<br/>[app.js]"]
end

node_user(("Viewer"))
node_jszip["JSZip CDN"]

node_user -->|"opens"| node_page
node_page -->|"loads runtime"| node_file_intake
node_user -->|"selects images"| node_file_intake
node_file_intake -->|"loads plates"| node_collection
node_user -->|"selects archive"| node_zip_unpack
node_zip_unpack -->|"uses library"| node_jszip
node_zip_unpack -->|"loads images"| node_collection
node_user -->|"operates controls"| node_navigation
node_navigation -->|"selects plate"| node_collection
node_slide_show -->|"advances plate"| node_collection
node_collection -->|"displays current plate"| node_image_display
node_image_display -->|"applies mode"| node_stereo_mode
node_image_display -->|"renders transform"| node_shared_transform
node_user -->|"switches mode"| node_stereo_mode
node_user -->|"pans and zooms"| node_shared_transform
node_user -->|"adjusts pair"| node_alignment
node_user -->|"toggles aid"| node_fusion_dots
node_user -->|"changes settings"| node_settings
node_user -->|"changes display"| node_fullscreen

click node_page "https://github.com/markplaga/twin-pane-stereoscope/blob/main/index.html"
click node_file_intake "https://github.com/markplaga/twin-pane-stereoscope/blob/main/app.js"
click node_zip_unpack "https://github.com/markplaga/twin-pane-stereoscope/blob/main/app.js"
click node_collection "https://github.com/markplaga/twin-pane-stereoscope/blob/main/app.js"
click node_slide_show "https://github.com/markplaga/twin-pane-stereoscope/blob/main/app.js"
click node_image_display "https://github.com/markplaga/twin-pane-stereoscope/blob/main/app.js"
click node_stereo_mode "https://github.com/markplaga/twin-pane-stereoscope/blob/main/app.js"
click node_shared_transform "https://github.com/markplaga/twin-pane-stereoscope/blob/main/app.js"
click node_alignment "https://github.com/markplaga/twin-pane-stereoscope/blob/main/app.js"
click node_fusion_dots "https://github.com/markplaga/twin-pane-stereoscope/blob/main/app.js"
click node_navigation "https://github.com/markplaga/twin-pane-stereoscope/blob/main/app.js"
click node_settings "https://github.com/markplaga/twin-pane-stereoscope/blob/main/app.js"
click node_fullscreen "https://github.com/markplaga/twin-pane-stereoscope/blob/main/app.js"

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_file_intake,node_zip_unpack,node_collection,node_user toneBlue
class node_slide_show,node_image_display,node_stereo_mode toneAmber
class node_shared_transform,node_alignment,node_fusion_dots toneMint
class node_page,node_navigation,node_settings,node_fullscreen toneRose
class node_jszip toneIndigo
```

## Components

### Image intake

- [File and folder loading](https://github.com/markplaga/twin-pane-stereoscope/blob/main/app.js): `app.js`
- [ZIP unpacking](https://github.com/markplaga/twin-pane-stereoscope/blob/main/app.js): `app.js`
- [Plate collection](https://github.com/markplaga/twin-pane-stereoscope/blob/main/app.js): `app.js`

### Viewing and navigation

- [Slide show](https://github.com/markplaga/twin-pane-stereoscope/blob/main/app.js): `app.js`
- [Image display](https://github.com/markplaga/twin-pane-stereoscope/blob/main/app.js): `app.js`
- [Stereo and single modes](https://github.com/markplaga/twin-pane-stereoscope/blob/main/app.js): `app.js`

### Display adjustments

- [Shared pan and zoom](https://github.com/markplaga/twin-pane-stereoscope/blob/main/app.js): `app.js`
- [Pair alignment](https://github.com/markplaga/twin-pane-stereoscope/blob/main/app.js): `app.js`
- [Fusion dots](https://github.com/markplaga/twin-pane-stereoscope/blob/main/app.js): `app.js`

### Controls and settings

- [Viewer page](https://github.com/markplaga/twin-pane-stereoscope/blob/main/index.html): `index.html`
- [Navigation controls](https://github.com/markplaga/twin-pane-stereoscope/blob/main/app.js): `app.js`
- [Viewing settings](https://github.com/markplaga/twin-pane-stereoscope/blob/main/app.js): `app.js`
- [Fullscreen and chrome](https://github.com/markplaga/twin-pane-stereoscope/blob/main/app.js): `app.js`

### Other components

- **Viewer**
- **JSZip CDN**

## Connections

- Viewer → Viewer page: opens (evidence: `README.md`)
- Viewer page → File and folder loading: loads runtime (evidence: `README.md`)
- Viewer → File and folder loading: selects images (evidence: `README.md`)
- File and folder loading → Plate collection: loads plates (evidence: `README.md`)
- Viewer → ZIP unpacking: selects archive (evidence: `README.md`)
- ZIP unpacking → JSZip CDN: uses library (evidence: `README.md`)
- ZIP unpacking → Plate collection: loads images (evidence: `README.md`)
- Viewer → Navigation controls: operates controls (evidence: `README.md`)
- Navigation controls → Plate collection: selects plate (evidence: `app.js`)
- Slide show → Plate collection: advances plate (evidence: `app.js`)
- Plate collection → Image display: displays current plate (evidence: `app.js`)
- Image display → Stereo and single modes: applies mode (evidence: `app.js`)
- Image display → Shared pan and zoom: renders transform (evidence: `app.js`)
- Viewer → Stereo and single modes: switches mode (evidence: `README.md`)
- Viewer → Shared pan and zoom: pans and zooms (evidence: `README.md`)
- Viewer → Pair alignment: adjusts pair (evidence: `README.md`)
- Viewer → Fusion dots: toggles aid (evidence: `README.md`)
- Viewer → Viewing settings: changes settings (evidence: `README.md`)
- Viewer → Fullscreen and chrome: changes display (evidence: `README.md`)