Create a monitor

This tutorial creates a WebGPU monitor, loads a packed series, commits one frame, and listens for pointer readings.

Create a canvas

The application owns the canvas and its layout:

<canvas id="monitor" style="display: block; width: 100%; height: 360px"></canvas>

Load a series

Series.values is signal-major:

signal * frameCount * elementCount + frame * elementCount + element

The example below has one signal, four frames, and two elements.

import { colormap } from '@latkit/colormaps';
import { requestDevice } from '@latkit/gpu';
import { createMonitor, type Series } from '@latkit/monitor';

const canvas = document.getElementById('monitor');
if (!(canvas instanceof HTMLCanvasElement)) {
  throw new Error('Missing #monitor canvas.');
}

const frameCount = 4;
const elementCount = 2;

const series: Series = {
  time: Float64Array.from([0, 1, 2, 3]),
  values: new Float32Array(1 * frameCount * elementCount),
  signalCount: 1,
  elementCount,
  validFrames: 0,
};

const device = await requestDevice();
const monitor = await createMonitor(device, canvas, {
  valueRange: [0, 1],
  colormap: colormap('magma'),
});

monitor.load(series, 0);
series.values[0 * frameCount * elementCount + 0 * elementCount + 0] = 0.25;
series.values[0 * frameCount * elementCount + 0 * elementCount + 1] = 0.75;
monitor.extend(1);

extend(1) tells the monitor that frame 0 is ready to draw. Later calls can commit more frames after you mutate or replace the values buffer.

Inspect readings

Use hover and pick events to connect the monitor to the rest of your UI:

monitor.on('hover', (reading) => {
  if (!reading) return;
  console.log(reading.element, reading.frame, reading.value);
});

monitor.on('pick', (reading) => {
  monitor.setFocus(reading.element);
});

When the page removes the monitor, destroy the renderer before removing its canvas, and release the application-owned device last:

monitor.destroy();
canvas.remove();
device.destroy();

Run the full example

The repository example streams synthetic signals, switches signal channels, ranks hot elements, and demonstrates picking:

pnpm --filter @latkit/monitor-example dev

Open http://127.0.0.1:5190.