Zoom and pan

Orientation indicator

The XYZ triad in the corner shows which way the camera faces. Click an axis to turn the view to look along it, and again for the opposite side; drag it to orbit. It is on over a scene unless the page turns it off, and a plot of charts alone never draws it, because there is no camera for it to describe. The choice is kept, so a page can turn it off at setup before any geometry has arrived.

99 of 136

The call

plot.setOrientationIndicator(on: boolean): void

Draw the scene's XYZ orientation indicator, or never draw it.

The indicator sits in a corner of the canvas and shows which way the scene camera faces. Click an axis to turn the view to look along it, and again for the opposite side; drag it to orbit. It is on by default, and it is only ever drawn when there is something in the scene or a graph: a plot of charts alone never shows it, because there is no camera for it to describe.

Callable on any plot. Turned off before any geometry is uploaded, it stays off when geometry arrives.

calls/orientation-indicator

plot.setOrientationIndicator(indicator);
if (content === "a scene") {
  const { positions, scalars } = shell(40_000);
  plot.showPoints(plot.uploadPoints({ positions, scalars }));
  plot.frameScene();
} else {
  const x = new Float32Array(200).map((_, i) => i);
  const y = x.map((v) => Math.sin(v / 15));
  plot.setCharts({ charts: [{ kind: "line", series: [{ x: plot.uploadBuffer(x), y: plot.uploadBuffer(y) }], legend: false }] });
}
return { readout: `indicator wanted: ${plot.orientationIndicator}` };

Also called

5 in the code above, in the order it makes them

plot.showPoints(handle: PointsHandle): void

Draw the point cloud handle names.

plot.uploadPoints(points: PointSet): PointsHandle

Upload a point cloud and return a handle naming it.

plot.frameScene(): void

Point the camera at the middle of everything uploaded, far enough back to see it.

Call after uploading. A scene measured in grid cells or in millimetres is nowhere near where a camera starts, and without this the first thing a caller sees is an empty canvas.

plot.setCharts(document: ChartDocument): readonly ChartHandle[]

Draw a document of charts, and get a handle for each one.

The handles come back in document order and are what names a chart afterwards: chartView, setChartView, chartPicked, and the chart on a hover, a hit or any other event. A page linking two charts holds two handles rather than allocating ids.

Replaces the charts and the series each one reads.

Throws rather than drawing a partial document, and a throw leaves the previous document in place. What it refuses: a misspelled key, a handle that names something other than a buffer, a range whose ends are the wrong way round, and a column on a chart kind that cannot read it. All four would otherwise be a chart that draws something subtly wrong, or nothing, with nothing said.

Setting a document again is the way to change one: there is no per-chart edit, and the compile is cheap because the data does not move. The buffers are named by handle, so a live chart writes to them with writeBuffer and never sets a document at all.

plot.uploadBuffer(values: Float32Array | Float64Array): BufferHandle

Upload a block of scalars and return a handle naming it.

A buffer keeps the precision it arrived in. Use Float64Array for time and for anything where f32's twenty-four bits of mantissa would lose something real: a millisecond timestamp narrowed to f32 rounds every sample into a five-minute bucket, and it does that silently.