This component provides an interactive overlay for sonar spectrogram images, enabling users to place harmonic cursors, adjust scaling via a rate input, and switch between multiple analysis modes.
- Modes: Analysis, Harmonics, Doppler
- Harmonic line overlays with frequency labels
- Retro-style LED readouts for measurement
- Drag-to-place cursor system with unlimited cursors
- Embedded via HTML config tables
- Fully self-contained JavaScript (no build step)
- Developer diagnostics mode available via standalone page
- Getting Started — Prerequisites, setup, and development workflow
- Technical Architecture — System architecture, mode system, rendering pipeline, state management
- HTML Integration Guide — Embedding GramFrame in HTML pages
- Adding Graphical Features — Code area guide for new visual features
- Data and State Guide — State management patterns and data flow
- Rendering Troubleshooting — Debugging rendering and coordinate issues
- Architecture Decision Records — Design decisions and rationale
Trainees or students using sonar training manuals in HTML format.
Include the JavaScript file via <script>, and place a config table with the appropriate class on your HTML page. The component will auto-initialize after page load.