Statechart Module Tutorial Part 2: Building a Statechart

In Part 1 of this tutorial, you learned the basics of modifying a statechart. In Part 2 of this tutorial, you recreate part of statechart that you modified in Part 1. You finish recreating this statechart in Part 3.

You can complete these exercises in approximately 45 minutes.

Note  Refer to the labview\examples\Statechart\Tutorial\Asynchronous\Getting Started 2.lvsc for a completed version of the statechart you create in this part of the tutorial.

Creating and Configuring the Statechart

Complete the following steps to create and configure the statechart.

1. Launch LabVIEW and display the Getting Started window.
2. Select File»New to launch the New dialog box.
3. Select Other Files»Statechart from the Create New tree.
4. Click the OK button. LabVIEW prompts you to save the statechart.
5. Enter My Getting Started Statechart.lvsc and save the statechart in a convenient location on disk.
   
   LabVIEW displays a Project Explorer window that contains the necessary support files under the My Getting Started Statechart.lvsc project item. This project item represents the .lvsc file in which LabVIEW stores statechart information.
6. Right-click the My Getting Started Statechart.lvsc item and select Properties. LabVIEW launches the Properties dialog box.
7. Select the Statechart Code Generation item from the Category list. LabVIEW displays options relating to statechart code generation.
8. Select Asynchronous from the Usage pull-down menu to specify that the statechart is asynchronous.
9. Click the OK button to save changes and return to the Project Explorer window.

Defining States

The next step is creating the states that comprise the statechart. A state is a unique condition in which the statechart can be. For example, a basic light bulb can be either ON or OFF. Therefore, a statechart that represents this light bulb would contain only these two states.

The statechart you construct does not represent any real-world application. This statechart consists of three states: Menu, Play, and Pause. Complete the following steps to create these states.

1. In the Project Explorer window, double-click the Diagram.vi item to launch the Statechart Editor window.
   
   This window displays the statechart diagram. You build a statechart by placing statechart objects on the statechart diagram.
2. If you do not see the Functions palette, select View»Functions Palette to display this palette.
3. On this palette, select Statechart»Statechart Development to display the Statechart Development palette.
4. Click the State object.
5. Move the cursor over the statechart diagram. Click to place the top left corner of the state, drag the cursor diagonally to establish the size of the state, and click again to place the state on the statechart diagram.
6. Notice the state is labeled State. Double-click this label to enable text editing and enter Menu as the new label.
7. Move the cursor over the black border of the Menu state until the cursor changes to the Positioning tool.
8. Press the <Ctrl> key and click and drag the cursor to the right of the Menu state to create a copy of the state.
9. Label this new state Play.
10. Create another new state labeled Pause. Place this state to the right of the Play state.
11. Return to the Statechart Development palette and place a Terminal pseudostate below the Play state.

    Note  A pseudostate is a statechart object that represents a state. The Terminal pseudostate represents a state that can terminate the statechart.

The statechart diagram now resembles the following figure:

Creating a Transition

The next step is defining the ways in which the statechart can move between states. To define this behavior, you use transitions to connect one state to another visually. Complete the following steps to create transitions between two states.

1. Move the cursor over the right border of the Menu state until the cursor changes to the Wiring tool.

   Note  If you do not see the Wiring tool, you might have disabled automatic tool selection. Either enable this feature or press the <Tab> key until the Wiring tool appears.

2. Click the state border. As you move the cursor across the statechart diagram, LabVIEW draws a dotted line between the state and the Wiring tool.
3. Move the cursor over the left border of the Play state. A gray box appears under the cursor.
4. Click the border to finish the transition. LabVIEW creates a transition between the two states.

   Note  If you move the cursor inside the state border before clicking it, LabVIEW attempts to create a transition into the state instead of to the state. In this situation, press the <Esc> key to remove the erroneous transition.

The statechart diagram now resembles the following figure:

The object that appears in the middle of the transition is a transition node. You use this node to configure the transition.

Creating a Trigger and Configuring a Transition

The next step is specifying that the statechart takes the transition only after receiving a specific event, also called a trigger. By default, transitions are configured to react to the NULL trigger. However, the caller VI that executes this statechart does not send the NULL trigger. Therefore, you must configure this transition to react to a different trigger.

Note  Statecharts can receive triggers from an external program, such as a VI, and from within the statechart itself. Later in this tutorial you will use a VI to send triggers to the statechart.

Each statechart has a list of triggers from which you can choose when configuring a transition. Configuring a transition involves creating a trigger and then associating that trigger with the transition. Complete the following steps to configure the transition.

1. Double-click the transition node between the Menu and Play states to launch the Configure Transition dialog box. You use this dialog box to configure transitions.
   
   The first tab in this dialog box is the Triggers/Groups tab. Notice that the NULL trigger is selected by default in the Triggers and Groups list. Every statechart has this trigger by default.
2. Click the Edit Triggers and Groups button to launch the Edit Triggers and Groups dialog box. You use this dialog box to create and modify triggers.
3. Click the Create Trigger button to create a new trigger, which appears in the Triggers and Groups list.
4. Enter Play as the new trigger name.
5. Click the OK button to save changes and return to the Configure Transition dialog box. Notice the new trigger appears in the Triggers list.
6. In the Triggers/Groups list, place a checkmark in the Play checkbox to specify that this trigger causes the statechart to take the transition.
7. Remove the checkmark from the NULL checkbox.
8. Click the OK button to save changes and return to the statechart diagram.
9. Save the statechart by selecting File»Save in the Statechart Editor window. You also can press the <Ctrl-S> keys.

Notice the blue rectangle on the transition node. This rectangle indicates that you have specified a non-NULL trigger for the transition. If you move the cursor over the transition node, the Context Help window displays the properties of the transition, including the trigger. If you do not see the Context Help window, press the <Ctrl-H> keys to display this window.

Creating and Configuring Additional Transitions

When you create a transition, the state border you click first is the state that initiates the transition. Because transitions are unidirectional, you can return to that initiating state only by creating a second transition.

Note  Notice that the transition itself forms an arrow that shows the direction in which the transition moves.

Create and configure the following transitions and triggers. Remember also to deselect the NULL trigger for each transition.

• From the Play state to the Menu state. Configure this transition to react to the Menu trigger.
• From the Pause state to the Play state. Configure this transition to react to the Play trigger.
• From the Play state to the Pause state. Configure this transition to react to the Pause trigger.

Creating and Configuring the Terminal Transitions

Create a transition from the Menu state to the Terminal pseudostate. Configure this transition to react only to a new trigger, Stop. This transition specifies that if the statechart is in the Menu state and receives the Stop trigger, the statechart terminates.

(Optional) Right-click the transition node and select either Rotate or Reverse to ensure the node faces the proper direction.

Then, save the statechart by pressing the <Ctrl-S> keys.

The statechart diagram now resembles the following figure:

Finding and Fixing Statechart Errors

The toolbar of the Statechart Editor window contains a button that you click to generate code for the statechart. Currently, this button appears broken . This icon means that this statechart contains errors. You must fix these errors before you can generate code for this statechart.

Complete the following steps to find and fix errors with this statechart.

1. Click this button to display the Error list window, which displays several errors.
   
   These errors appear because the top-level statechart diagram does not have an Initial pseudostate. This pseudostate defines the first state that the statechart enters. The top-level statechart diagram must have one and only one Initial pseudostate.
2. Click the Close button to return to the statechart diagram.
3. Place an Initial pseudostate, located on the Statechart Development palette, to the left of the Menu state.
4. Create a transition between this pseudostate and the Menu state. Notice the Generate Code button no longer is broken .

   Note  Transitions that exit Initial pseudostates cannot have triggers or guards. Therefore, you do not have to configure this transition.

5. Save the statechart.

The statechart diagram now resembles the following figure:

Summary

In this tutorial, you learned about the following tasks:

• Creating a statechart.
• Defining states.
• Creating transitions between states.
• Creating triggers.
• Configuring a transition to react to a trigger.
• Specifying the first state that a statechart executes.
• Specifying a state that can terminate the statechart.
• Finding errors on the statechart diagram.

Where to Go from Here

In Part 3 of this tutorial, you define and modify statechart data.