GramFrame

Interactive spectrogram analysis for sonar training material. The pages below are the component as it ships — the same standalone bundle a training page would load.

Demos

Student page sessionStorage

Annotations persist within the browser session and are cleared when the browser closes. Simulates a shared-PC training environment.

Trainer page localStorage

Annotations persist across browser restarts. Includes a “Clear gram” button to reset. Simulates a trainer workstation.

Optimised demo gram 9KB

A purpose-built synthetic gram — 9KB instead of 482KB — with a harmonic stack, sidebands, a Doppler curve and broadband transients drawn in, one for every mode.

Spectrograph player audio

Four machinery recordings analysed in the browser and shown as a scrolling, audible waterfall. Pause to annotate; the annotations ride the gram when play resumes.

Player trial harness pick a file

The package sent to stakeholders: choose one of the four samples, or any WAV on your own machine, then tune the analysis and the painting against it — FFT size, overlap, frame averaging, background normalisation and the display percentiles. Nothing is uploaded.

Developer pages

These load the component from source rather than the bundle, and set window.GRAMFRAME_DEBUG so the __test__* inspection API is reachable.

Not representative of published material. Training pages never set that flag, so the debug hooks below do not exist on a real training page. Use the demos above to judge what an analyst actually sees.

Debug page state panel

A single gram beside a live state inspector, in the student storage context.

Debug page, trainer state panel

The same inspector in the trainer storage context, with the “Clear gram” control.

Multiple instances focus

Several grams on one page — which instance takes keyboard input, and how they stay independent.

Release test page bundle

The page shipped inside the release archive, verifying the standalone bundle loads and runs.