Qt SCXML Traffic Light QML Example (Simple)

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

Article lu fois.

L'auteur

The Qt Company Ltd.

L'article

Publié le 27 décembre 2024 - Mis à jour le 27 décembre 2024

Liens sociaux

Qt SCXML Traffic Light QML Example (Simple)▲

Traffic Light QML Example (Simple) 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 http://, open the Welcome mode and select the example from Examples. For more information, visit http://.

Compiling the State Machine▲

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

Sélectionnez

QT += qml scxml

We then specify the state machine to compile:

Sélectionnez

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:

Sélectionnez

    TrafficLightStateMachine {
        id: stateMachine
        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:

Sélectionnez

        &lt;state id="red"&gt;
            &lt;onentry&gt;
                &lt;send event="startGoingGreen" delay="3s"/&gt;
            &lt;/onentry&gt;
            &lt;transition event="startGoingGreen" target="redGoingGreen"/&gt;
        &lt;/state&gt;

        &lt;state id="yellow" initial="greenGoingRed"&gt;
            &lt;state id="redGoingGreen"&gt;
                &lt;onentry&gt;
                    &lt;send event="goGreen" delay="1s"/&gt;
                &lt;/onentry&gt;
                &lt;transition event="goGreen" target="green"/&gt;
            &lt;/state&gt;

            &lt;state id="greenGoingRed"&gt;
                &lt;onentry&gt;
                    &lt;send event="goRed" delay="1s"/&gt;
                &lt;/onentry&gt;
                &lt;transition event="goRed" target="red"/&gt;
            &lt;/state&gt;
        &lt;/state&gt;

        &lt;state id="green"&gt;
            &lt;onentry&gt;
                &lt;send event="startGoingRed" delay="3s"/&gt;
            &lt;/onentry&gt;
            &lt;transition event="startGoingRed" target="greenGoingRed"/&gt;
        &lt;/state&gt;

We connect to the states as follows:

Sélectionnez

        Light {
            anchors.top: parent.top
            anchors.horizontalCenter: parent.horizontalCenter
            color: "red"
            visible: stateMachine.red || stateMachine.redGoingGreen
        }

        Light {
            anchors.centerIn: parent
            color: "yellow"
            visible: stateMachine.yellow || stateMachine.blinking
        }

        Light {
            anchors.bottom: parent.bottom
            anchors.horizontalCenter: parent.horizontalCenter
            color: "green"
            visible: stateMachine.green
        }
    }

List of Files▲

Files:

List of Files▲

trafficlight-qml-simple/Light.qml
trafficlight-qml-simple/TrafficLight.qml
trafficlight-qml-simple/trafficlight-qml-simple.cpp
trafficlight-qml-simple/trafficlight-qml-simple.pro
trafficlight-qml-simple/trafficlight-qml-simple.qrc

Vous avez aimé ce tutoriel ? Alors partagez-le en cliquant sur les boutons suivants :