ValueGaugeNode

ValueGaugeNode (from scenerystack/scenery-phet) is a GaugeNode subclass that adds a centered NumberDisplay showing the same value the needle points to, positioned in the bottom half of the dial. It takes the exact same constructor arguments as GaugeNode — use it whenever readers should see both the analog needle position and an exact numeric readout, without composing the two Nodes yourself.

import { ValueGaugeNode } from 'scenerystack/scenery-phet';
import { NumberProperty, StringProperty } from 'scenerystack/axon';
import { Range } from 'scenerystack/dot';

A minimal example

const speedProperty = new NumberProperty( 42 );
const speedRange = new Range( 0, 100 );
const labelProperty = new StringProperty( 'm/s' );

const gaugeNode = new ValueGaugeNode( speedProperty, labelProperty, speedRange, {
  radius: 120,
  numberDisplayOptions: {
    decimalPlaces: 1
  }
} );

gaugeNode.numberDisplayVisible = false; // hide just the numeric readout; the needle and dial stay visible

Constructor

new ValueGaugeNode(
  valueProperty: TReadOnlyProperty<number>,
  labelProperty: TReadOnlyProperty<string>,
  range: Range,
  providedOptions?: ValueGaugeNodeOptions
)

Identical signature to GaugeNode, plus one extra option below. All of GaugeNode's options (radius, span, tick options, etc.) are accepted too.

Options

Option	Default	Effect
numberDisplayOptions	{ textOptions: { font: new PhetFont(16) }, backgroundStroke: 'black', align: 'center', cornerRadius: 5 }	Options forwarded to the internal NumberDisplay

Public API

Member	Description
numberDisplayVisible	Settable/gettable boolean — show or hide the internal NumberDisplay without affecting the dial or needle

Don't pass position options to numberDisplayOptions

ValueGaugeNode positions its internal NumberDisplay itself, centered at (0, radius / 2) via a ManualConstraint, and asserts that the NumberDisplay has no translation from options you passed. Use numberDisplayOptions only for its formatting/appearance options (decimalPlaces, valuePattern, colors, etc.), not x/y/center.