Qt SCXML Traffic Light QML Example (Dynamic) | Qt SCXML 5.7

Qt 5.7 | Qt SCXML | Qt SCXML Examples | Qt SCXML Traffic Light QML Example (Dynamic)

Qt 5.7.1 Reference Documentation

# Qt SCXML Traffic Light QML Example (Dynamic)

Traffic Light QML Example (Dynamic) demonstrates how to connect to the active properties of a state in a dynamically loaded state machine.

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.

## Dynamically Loading the State Machine

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

      QT += qml scxml

We dynamically create the state machine in the main QML file:

      import QtScxml 5.7 as Scxml

      TrafficLight {
          Scxml.StateMachineLoader {
              id: loader
              filename: "qrc:///statemachine.scxml"
          }

          stateMachine: loader.stateMachine
      }

## 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:

              Image {
                  id: redLight
                  x: (lights.width - width) / 2
                  y: 40
                  source: "red.png"
                  visible: stateMachine.red || stateMachine.redGoingGreen
              }

              Image {
                  id: yellowLight
                  x: (lights.width - width) / 2
                  y: 135
                  source: "yellow.png"
                  visible: stateMachine.yellow || stateMachine.blinking
              }

              Image {
                  id: greenLight
                  x: (lights.width - width) / 2
                  y: 230
                  source: "green.png"
                  visible: stateMachine.green
              }

Files:

- trafficlight-qml-dynamic/trafficlight-qml-dynamic.cpp
- trafficlight-qml-dynamic/trafficlight-qml-dynamic.qml
- trafficlight-qml-dynamic/trafficlight-qml-dynamic.pro
- trafficlight-qml-dynamic/trafficlight-qml-dynamic.qrc