Hooks and Readouts

Follow a camera window and display on-demand frame statistics without updating React every frame.

<SectionView source={source} path="demo"
  display={{ colormap: 'Seismic', wiggle: false, agc: false }}
  rangeBars style={{ height: 340 }} />

Connect readouts to the engine without moving drawing state into React. Try the section above: a resting view can report zero FPS because frames are drawn on demand.

Follow the Camera

import type { Camera } from '@bs/outkrop-core'
import { useCameraWindow } from '@bs/outkrop-react'

export function WindowReadout({ camera }: { camera: Camera | null }) {
  const window = useCameraWindow(camera)
  if (!window) return <span>View not ready</span>
  return (
    <output>
      X: {window.x[0].toFixed(2)}–{window.x[1].toFixed(2)}; Y: {window.y[0].toFixed(2)}–
      {window.y[1].toFixed(2)}
    </output>
  )
}

useCameraWindow follows pan, zoom and linked updates. It returns null without a mounted camera. Ranges are camera world coordinates; supply their units. They are not automatically the trace/ms window of SectionView.

Measure Drawn Frames

import type { DataSource } from '@bs/outkrop-core'
import { SectionView, useFrameRate } from '@bs/outkrop-react'

export function MeasuredSection({ source, path }: { source: DataSource; path: string }) {
  const { onFrame, rate } = useFrameRate(500)
  return (
    <>
      <output>
        {rate.fps.toFixed(1)} frames/s · {rate.cpuMs.toFixed(2)} ms CPU/frame
      </output>
      <SectionView source={source} path={path} onFrame={onFrame} style={{ height: 480 }} />
    </>
  )
}

The default interval is 500 ms. These numbers exclude GPU duration, file-open time and full interaction latency. Compare the same device, viewport, data and action; measure loading separately.

Follow the Page Theme

useHostTheme(ref) supplies colors/font for custom layers. See Theme Integration for tokens and update rules.