Spectrum Plot
A VSCode extension for GPU-accelerated waterfall (spectrogram) visualization of IQ signal files.
Features
- SigMF support: Open
.sigmf-data files directly — metadata is read automatically from the paired .sigmf-meta file
- Generic binary IQ: Open any binary IQ file via the command palette with a metadata prompt
- WebGL waterfall: Top-down waterfall display rendered on the GPU; smooth at high FFT resolutions
- KissFFT via WASM: Signal processing runs in a Web Worker using KissFFT compiled to WebAssembly
- Streaming: Large files are processed in chunks — multi-GB files are fully supported
- Time scrubber: Jump to any point in the recording
- Colormaps: Viridis, Plasma, Turbo, Grayscale
- Configurable: Adjustable FFT size, dB range, and colormap
| Format |
Description |
cf32_le |
Complex float32, little-endian (most common) |
cf32_be |
Complex float32, big-endian |
cf64_le |
Complex float64, little-endian |
cf64_be |
Complex float64, big-endian |
ci16_le |
Complex int16, little-endian |
ci16_be |
Complex int16, big-endian |
ci8 |
Complex int8 |
cu8 |
Complex uint8 (RTL-SDR) |
Usage
SigMF Files
Right-click a .sigmf-data file in the Explorer and choose Open With → Spectrum Plot Waterfall, or simply click to open (it is the default editor for .sigmf-data).
The extension will look for a corresponding .sigmf-meta file in the same directory.
Generic Binary IQ Files
Open the Command Palette (Ctrl+Shift+P) and run Spectrum Plot: Open Binary IQ File. You will be prompted for sample rate, data type, center frequency, and byte offset.
Building from Source
Extension
npm install
npm run build
WASM Module (requires Emscripten)
npm run build:wasm
Development
Press F5 to launch the Extension Development Host.
Use npm run watch for incremental builds during development.
Architecture
Extension Host (Node.js)
└── SpectrogramEditorProvider
├── reads file in chunks via Node fs.read()
├── decodes IQ samples → Float32 interleaved
└── posts chunks to Webview via postMessage (zero-copy ArrayBuffer transfer)
Webview (Chromium / WebGL)
├── WaterfallRenderer (WebGL)
│ ├── R32F ring-buffer texture (width=FFT_SIZE, height=4096 rows)
│ └── GLSL fragment shader: ring-offset + colormap lookup
├── FFT Web Worker
│ └── KissFFT WASM: complex float32 → dBFS magnitudes
└── UI controls (dB range, FFT size, colormap, scrubber)
