Value monitor

A monitor displays a value your application owns — a triangle count, a buffer size, a connection state. Users cannot edit it through the UI, but your code keeps it up to date. It is still modeled as a value control so updating it uses the familiar set() method.

Try it

Usage

const triangles = pp.monitor({
  label: "Triangles",
  value: 0,
  format: (value) => value.toLocaleString(),
});

triangles.set(renderer.info.render.triangles);

Configuration

interface MonitorConfig<T> extends BaseControlConfig {
  /** The value to display, or a getter polled every `interval` ms. */
  value: T | (() => T);

  /** Poll the `value` getter on this interval (ms). Omit to update via set() only. */
  interval?: number;

  format?: (value: T) => string;
}

interface MonitorControl<T> extends ValueControl<T, MonitorConfig<T>> {}

Monitors are generic, so you can display any type — a number, a string status, a formatted object.

Push vs. polling

Push is the recommended approach: call set() whenever the value changes. It is precise, cheap, and never does work when nothing changed:

triangles.set(renderer.info.render.triangles);

Polling is available for values you cannot easily hook into. Provide a getter function and an interval in milliseconds:

const triangles = pp.monitor({
  label: "Triangles",
  value: () => renderer.info.render.triangles,
  interval: 250,
});

Automatic polling is explicit and well-behaved: it pauses while the control is hidden or its parent folder is collapsed, and it is cleaned up when the control is destroyed. Prefer push updates when you can.