Skip to content

StopwatchNode

Overview

Shows a readout of the elapsed time, with play and pause buttons. By default there are no units (which could be used if all of a simulations time units are in 'seconds'), or you can specify a selection of units to choose from.

@author Jonathan Olson <jonathan.olson@colorado.edu> @author Sam Reid (PhET Interactive Simulations) @author Anton Ulyanov (Mlearner)

Class StopwatchNode

import { StopwatchNode } from 'scenerystack/scenery-phet';

Constructor

new StopwatchNode( stopwatch : Stopwatch, providedOptions? : StopwatchNodeOptions )

Instance Methods

dispose()

Instance Properties

dragListener : DragListener | null

(readonly)

Non-null if draggable. Can be used for forwarding press events when dragging out of a toolbox.

keyboardDragListener : KeyboardDragListener | null

(readonly)

Static Methods

getDecimalPlaces( time : number, numberDecimalPlaces : number ) : string

Gets the centiseconds (hundredths-of-a-second) string for a time value.

createRichTextNumberFormatter( providedOptions? : FormatterOptions ) : ( time: number ) => string

Creates a custom value for options.numberDisplayOptions.numberFormatter, passed to NumberDisplay. When using this method, you will also need to use NumberDisplayOptions.numberFormatterDependencies, to tell NumberDisplay about the dependencies herein. See https://github.com/phetsims/scenery-phet/issues/781. This will typically be something like:

numberFormatter: StopwatchNode.createRichTextNumberFormatter( { units: unitsProperty, ... } ), numberFormatterDependencies: [ string_scenery_phet_stopwatchValueUnitsPattern_StringProperty, unitsProperty ],

Static Properties

NUMBER_FONT_FAMILY

(readonly)

We used to use Lucida Console, Arial, but Arial has smaller number width for "11" and hence was causing jitter. Neither Trebuchet MS and Lucida Grande is a monospace font, but the digits all appear to be monospace. Use Trebuchet first, since it has broader cross-platform support. Another advantage of using a non-monospace font (with monospace digits) is that the : and . symbols aren't as wide as the numerals. @ariel-phet and @samreid tested this combination of families on Mac/Chrome and Windows/Chrome and it seemed to work nicely, with no jitter.

DEFAULT_FONT : PhetFont

(readonly)

PLAIN_TEXT_MINUTES_AND_SECONDS

(readonly)

A value for options.numberDisplayOptions.numberFormatter where time is interpreted as minutes and seconds. The format is MM:SS.CC, where M=minutes, S=seconds, C=centiseconds. The returned string is plain text, so all digits will be the same size, and the client is responsible for setting the font size.

RICH_TEXT_MINUTES_AND_SECONDS

(readonly)

A value for options.numberDisplayOptions.numberFormatter where time is interpreted as minutes and seconds. The format is format MM:SS.cc, where M=minutes, S=seconds, c=centiseconds. The string returned is in RichText format, with the 'c' digits in a smaller font.

Type StopwatchNodeOptions

import type { StopwatchNodeOptions } from 'scenerystack/scenery-phet';

Source Code

See the source for StopwatchNode.ts in the scenery-phet repository.