Monitors

Monitors flow the other way: instead of editing a value, they watch one. Hand them a get function and they poll it — numbers draw a scrolling graph by default; graph: false keeps a plain text readout.

Monitor

Two monitors over the same signal — a noisy sine the page generates. The graph form scrolls; the text form just re-reads. min/max frame the graph, interval sets the poll rate (ms), decimals trims the readout.

const signal = () => Math.sin(Date.now() / 600) * 50 + (Math.random() - 0.5) * 12;
const panel = tweaks("Monitor", {
  wave: { type: "monitor", get: signal, min: -70, max: 70 },
  value: { type: "monitor", get: signal, graph: false, decimals: 1, interval: 250 },
});
mount.append(panel.el);

mount is the panel's slot inside the stage; target is the demo surface it controls. In your own page you'd just document.body.append(panel.el).

FPS graph

{ type: "fpsgraph" } measures the page's real frame rate — no get needed. To prove it's honest, the slider spawns blurred, endlessly-spinning tiles. Push it up and watch the trace dip; pull it back and the frame rate recovers.

const field = target.querySelector(".fps-field");
const panel = tweaks("FPS", {
  fps: { type: "fpsgraph", label: "FPS" },
  load: [0, 0, 400, 20],     // number of spinning tiles
});
mount.append(panel.el);

const apply = (p) => {
  while (field.children.length > p.load) field.lastChild.remove();
  while (field.children.length < p.load) {
    const tile = document.createElement("div");
    tile.className = "fps-tile";
    tile.style.animationDelay = `${(field.children.length * 53) % 1100}ms`;
    field.append(tile);
  }
};
panel.on(apply);
panel.ready.then(() => apply(panel.params));