# Monitors

> Read-only controls: live value readouts with sparkline graphs, and the FPS meter under real load.

The page: https://ryankiley.github.io/tweakit/monitors.html. Every page as Markdown: https://ryankiley.github.io/tweakit/llms.txt

Monitors flow the other way: instead of editing a value, they watch one. Hand them a `get` function (or a static `value`) 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. `min`/`max` frame the graph, `interval` sets the poll rate (ms), `decimals` trims the readout. `view: "graph"` or `"text"` forces one form whatever the value's type, and `rows` turns the text form into a scrolling buffer of the last *n* values.

```js
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. 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.

```js
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));
```