Qt SCXML Traffic Light QML Example (Static) | Qt SCXML 5.13.2

Qt 5.13 | Qt SCXML | Qt SCXML Traffic Light QML Example (Static)

Qt 5.13.2 Reference Documentation

# Qt SCXML Traffic Light QML Example (Static)

A Qt Quick application that uses a compiled state machine to implement a traffic light.

Traffic Light QML Example (Static) demonstrates how to connect to the active properties of a state in a state machine that is compiled to a class.

The UI is created using Qt Quick.

#### Running the Example

To run the example from Qt Creator, open the Welcome mode and select the example from Examples. For more information, visit Building and Running an Example.

#### Compiling the State Machine

We link against the Qt SCXML module by adding the following line to the .pro file:

      QT += qml scxml

We then specify the state machine to compile:

      STATECHARTS = ../trafficlight-common/statemachine.scxml

The Qt SCXML Compiler, `qscxmlc`, is run automatically to generate statemachine.h and statemachine.cpp, and to add them to the `HEADERS` and `SOURCES` variables for compilation.

#### Instantiating the State Machine

We instantiate the state machine as follows:

      import TrafficLightStateMachine 1.0

      TrafficLight {
          stateMachine: TrafficLightStateMachine {
              running: true
          }

#### Connecting to States

In the SCXML file, we specify states for each light: red, yellow, and green. In the `<onentry>` element, we specify the event to send when entering the state and the delay in seconds before sending the event. In the `<transition>` element, we specify the event that triggers the transition to the state specified by the `target` attribute:

              <state id="red">
                  <onentry>
                      <send event="startGoingGreen" delay="3s"/>
                  </onentry>
                  <transition event="startGoingGreen" target="redGoingGreen"/>
              </state>

              <state id="yellow" initial="greenGoingRed">
                  <state id="redGoingGreen">
                      <onentry>
                          <send event="goGreen" delay="1s"/>
                      </onentry>
                      <transition event="goGreen" target="green"/>
                  </state>

                  <state id="greenGoingRed">
                      <onentry>
                          <send event="goRed" delay="1s"/>
                      </onentry>
                      <transition event="goRed" target="red"/>
                  </state>
              </state>

              <state id="green">
                  <onentry>
                      <send event="startGoingRed" delay="3s"/>
                  </onentry>
                  <transition event="startGoingRed" target="greenGoingRed"/>
              </state>

We connect to the states as follows:

          states: [
              State {
                  name: "Red"
                  when: stateMachine.red

                  PropertyChanges {
                      target: redLight
                      opacity: 1
                  }
              },
              State {
                  name: "RedGoingGreen"
                  when: stateMachine.redGoingGreen

                  PropertyChanges {
                      target: redLight
                      opacity: 1
                  }

                  PropertyChanges {
                      target: yellowLight
                      opacity: 1
                  }
              },
              State {
                  name: "Yellow"
                  when: stateMachine.yellow || stateMachine.blinking

                  PropertyChanges {
                      target: yellowLight
                      opacity: 1
                  }
              },
              State {
                  name: "Green"
                  when: stateMachine.green

                  PropertyChanges {
                      target: greenLight
                      opacity: 1
                  }
              }
          ]

Example project @ code.qt.io