Flow diagram Panel

What is the Flow diagram panel

The Flow diagram panel is the place where you can compose NAO’s behaviors.

../../../_images/chore-flow-diagram.png

The table below describes the main parts of the Flow diagram panel:

Part Name Allows you to ...
A Box path

Browse the different levels of the Flow diagram (when a box contains other boxes).

For further details, see How to navigate in a multilevel diagram.

B Flow diagram

Create or edit the Flow diagram of the current Behavior or Box.

For further details, see How to create a Flow diagram.

C Input border

Add, edit or delete inputs of the current Behavior or Box.

For further details, see Managing Flow diagram inputs and outputs.

D Output border

Add, edit or delete outputs of the current Behavior or Box.

For further details, see Managing Flow diagram inputs and outputs.

What is a Flow diagram

A Flow diagram is a group of boxes linked with each other and usually linked with at least an input.

../../../_images/chore_flow_diagram_detailed.png

In the example above, from the left to the right:

  • the main onStart input of the Flow diagram (1) is linked to the onStart input of Localized Text box (2);
  • the onStopped output of Localized Text box (3) is linked to the onStart input of Say Text box (4);
  • the onStopped output of Say Text box (5) is linked to the main onStopped output of the Flow diagram (6).

How to create a Flow diagram

To create a Flow diagram:

Step Action For further details, see ...
Add or create boxes. How to add boxes to a Flow diagram
Connect the boxes. How to create links

How to add boxes to a Flow diagram

To add a box to the current Flow diagram:

Once you become familiar with Choregraphe, you will be also able to create your own new box.

To create:

The Flow diagram Editor

Managing Flow diagram inputs and outputs

Buttons appear on the Input and Output borders of the Flow diagram:

../../../_images/flow_diagram_add_buttons_114.png

To display their names, hold down Shift-Control:

../../../_images/flow_diagram_add_buttons_infobulle_114.png

To add an input or an output to the Flow diagram:

  • Click one of the plus (+) buttons, or

  • Right-click the Input border or the Output border, and choose the relevant command:

    Command

    Description

    Add input

    Add an input to the current Flow diagram.

    Add input from ALMemory

    Add an input from ALMemory to the current Flow diagram.

    Add output

    Add an output to the current Flow diagram.

    Add output from ALMemory

    Add an output from ALMemory to the current Flow diagram.

To edit or delete an input or an output:

  • Right-click the input or the output and choose the relevant command:

    Command

    Description

    Edit input/output

    Displays the Input, and output edition widgets.

    Delete input/output

    Delete the selected input or output.

Managing boxes

The table below summarizes the commands allowing to manage boxes inside a Flow diagram.

To ... Action
Select several boxes Drag the mouse so that the square drawn by your mouse includes the boxes you want to select.
Cut, Copy or Paste one or several box(es) Right-click it and choose Cut, Copy or Paste.
Select all the boxes of a diagram Right-click anywhere on the diagram and choose Select All.
Zoom in or out the diagram

Right-click anywhere on the Flow diagram, choose Zoom and then the zoom level you want.

By default the auto-zoom is set so that you can see as many boxes as possible within the Flow diagram panel.

Create a new bow from scratch

Right-click the box and choose Add a new box.

For further details, see How to create a box.

Store a box in a box library Right-click the box and choose Add to library.
Group several boxes into a single one

Right-click the box and choose Convert to box.

For further details, see How to group several boxes into a single one.

Delete the selected box(es) Right-click one of them or the background and choose Delete selection.
Edit a box and its properties

Right-click the box and choose Edit box.

The Box Edition widget appears.

Edit the Script of a box

Right-click the box and choose Edit box script.

The Script editor panel appears.

Edit the Resource of a box

Right-click the box and choose Edit resources.

This action opens the Box resource selector.

Set the value of the parameters of a box

Click the parameter-button parameter button of the box or

Right-click the box and choose Set Parameters.

The Widget to set the value of box parameters appears.

Shortcuts to manage box inputs and outputs

The table below lists the shortcuts allowing to manage quickly inputs and outputs.

To ... Action
Add a new input (or output) to a box Right-click one of the existing inputs (or outputs) and select Add input (or Add output).
Add an input from ALMemory

Right-click one of the inputs and select Add input from ALMemory.

This action has no effect on a Script box, but adds an ALMemeory input directly inside Flow diagram or Timeline boxes.

Edit an existing input (or output) of a box Right-click it and choose Edit.
Delete an existing input (or output) of a box Right-click it and choose Delete.
Simulate a signal on an input (or an output)

Double-click the input (or the output).

This action is only available while the behavior is running.

If the event carries a data, then you will be asked to enter the data value you want to send through the input (or the output).

Except simulation, most of these commands are also available in the Box Edition widget.

Multilevel diagrams

What are parent box and child box (or sub-box)

The parent box of a box is the box which Flow diagram directly contains this other box.

A child box (or a sub-box) of an other box is then a box which is contained in the Flow diagram of this other box.

For example:

  • A is a Flow diagram box.
  • B is one of the boxes contained in the diagram of A.

Then A is B’s parent box. And B is one of A’s child boxes (or sub-boxes).

../../../_images/chore_ref_parent_child_box.png

You can also say that a box is a parent box of another if it is its indirect parent (for example if it is the parent of its parent box or the parent of the parent of its parent box).

How to group several boxes into a single one

In order to have clear and organized diagram it is possible to gather several boxes into one, to do so:

Step Action

Select all the boxes you want to gather, provided that they are linked together and also linked to the main Flow diagram.

../../../_images/gather_boxes.png

Note

If the selected boxes are not linked to the main Flow diagram ( i.e. to another box which is not selected nor to the main inputs or outputs), the resulting box will have no input nor output.

Right click the diagram and choose Convert to box in the context menu.

The following window appears:

../../../_images/chore_group_boxes.png

Complete the Name, Tooltip and Image fields, then click OK button.

The new box replaces the selected boxes.

../../../_images/gather_boxes_result.png

It is a Flow diagram box.

If you double click on the created box you will see that all the selected boxes are in it.

How to navigate in a multilevel diagram

To access the inner Flow diagram of a box (if any):

  • Double-click the box.

The inner Flow diagram of the box is displayed, and the name of the box is added on the Box path:

../../../_images/chore_flow_diagram_upper_line.png

To come back to the parent diagram (if any):

  • Click the label of the parent box on the Box path, or
  • Double-click the background of the Flow diagram.

Note

A script box has no Flow diagram. So when you double-click on it, it is the Script Editor with the box script which is displayed. Fore further details about this panel, see Script editor panel.

A Timeline box has also a different structure, so when you double-click on it, the Timeline panel is displayed. For further details, see Timeline box Flow diagrams.

Timeline box Flow diagrams

If the Timeline of the box has no behavior layer, it has no Flow diagram and then the Flow Diagram panel is empty as shown below.

../../../_images/chore_flow_diagram_empty.png

If it has at least one behavior layer and one behavior keyframe, the diagram displayed is the diagram of the selected behavior keyframe.

Each behavior keyframe has its own diagram. And each behavior keyframe diagram has an onLoad input as shown below.

../../../_images/chore_flow_diagram_timeline.png

This input is stimulated as soon as the diagram is loaded.