Example state machine

The example below shows a working state machine, modelling a cassette player, with the current state highlighted (as this is a hierarchical machine, you will see the nesting of current state).

Model

The model is implemented in JavaScript as a script in the page, see the page source for details.

Page-1 operational: State operational operational active: State active active running: State running running behaviour entry / startMotor exit / stopMotor entry / startMotor exit / stopMotor paused: State paused paused Dynamic connector Pause Pause Dynamic connector.5 Pause Pause Dynamic connector.6 Play Play behaviour entry / startMotor exit / stopMotor entry / engageHead exit / disengageHead stopped: State stopped stopped Pause / defer Dynamic connector.10 Play Play Dynamic connector.11 Stop Stop history: PseudoState H* H* Sheet.14 Sheet.15 flipped: State flipped flipped Dynamic connector.16 Flip Flip Dynamic connector.17 Flip Flip Dynamic connector.18 Sheet.20 initial initial Dynamic connector.21 Dynamic connector.23 Stop Stop Sheet.24 Sheet.19 final final Sheet.22

Events

Use the buttons below to send triggering events into the machine for evaluation.

Outputs

Below are the outputs of the state machine, in this example controlling the cassette players head and motor

Head: disengaged

Motor: stopped

Notes

In addition to basic state transitions, this example shows a few more advanced features: first, deep history is specified in the operational state, meaning when returning from the flipped state, the machine will revert to the state it was in prior to entering the flipped state; next, there are two transitions that respond to the Stop event, this shows depth-first evaluation; last, the transition from stopped to running crosses the region boundary within the active state such that there is no need for an initial state; last, the stopped state can defer the Pause event for evaluation after it has been exited.

The active state configuration changes colour on state entry/exit with transparency to show the nesting of the current state. If you open your browser console you will see some further log output.