SCXML Traffic Light (Dynamic, Widgets)

Traffic Light demonstrates how to connect to the active properties of a state in a dynamically loaded state machine.

The UI is created using Qt Widgets.

Running the Example

You can run the example from:

• Qt Creator

  Open the Welcome mode and select the example from Examples. For more information, see Qt Creator: Tutorial: Build and run.

• Qt Extension for Visual Studio Code

  Run the Qt: Open Qt examples command from the Command Palette, and select the example from the list. For more information, see Qt Extension for Visual Studio Code: Tutorial: Build and run.

Dynamically Loading the State Machine

We link against the Qt SCXML module by adding the following lines to the example's build files.

To .pro when using qmake:

 QT += widgets scxml

To CMakeLists.txt when using cmake:

 find_package(Qt6 REQUIRED COMPONENTS Core Gui Scxml Widgets)

 target_link_libraries(trafficlight-widgets-dynamic PRIVATE
     Qt6::Core
     Qt6::Gui
     Qt6::Scxml
     Qt6::Widgets
 )

We dynamically create the state machine in trafficlight-widgets-dynamic.cpp:

 #include "trafficlight.h"

 #include <QtWidgets/qapplication.h>
 #include <QtCore/qiodevice.h>
 #include <QtCore/qtextstream.h>

 using namespace Qt::Literals::StringLiterals;

 int main(int argc, char **argv)
 {
     QApplication app(argc, argv);

     QScxmlStateMachine *machine = QScxmlStateMachine::fromFile(u":statemachine.scxml"_s);

     if (!machine->parseErrors().isEmpty()) {
         QTextStream errs(stderr, QIODevice::WriteOnly);
         const auto errors = machine->parseErrors();
         for (const QScxmlError &error : errors) {
             errs << error.toString();
         }
         return -1;
     }

And then instantiate it:

     TrafficLight widget(machine);
     widget.show();
     machine->setParent(&widget);
     machine->start();

     return app.exec();
 }

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:

     machine->connectToState(u"red"_s, widget->redLight(), &LightWidget::switchLight);
     machine->connectToState(u"redGoingGreen"_s, widget->redLight(), &LightWidget::switchLight);
     machine->connectToState(u"yellow"_s, widget->yellowLight(), &LightWidget::switchLight);
     machine->connectToState(u"blinking"_s, widget->yellowLight(), &LightWidget::switchLight);
     machine->connectToState(u"green"_s, widget->greenLight(), &LightWidget::switchLight);

Example project @ code.qt.io