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

A - Box path: allow you to browse a multilevel diagram (box including boxes).

  • Helps you to know which level of the behavior is currently displayed in the flow diagram panel. Indeed each box in the flow diagram of the behavior can contain a flow diagram itself and then contain other boxes. A behavior is then structured as a tree of boxes connected to each other. The root level displays an overview of the behavior with the links between the first level boxes.
../../../_images/chore_flow_diagram_upper_line.png
  • The root/Say level means that the flow diagram currently displayed is the diagram of Say box which itself is in the root diagram.

B - Flow diagram: represents a group of boxes linked with each other.

  • The inputs of each box are on the left of the box. The outputs of each box are on the right of the box.
  • The main inputs of the diagram are on the top left of the diagram. The main outputs of the diagram are on the top right of the diagram.
  • The boxes are connected to each other by links between inputs and outputs.
../../../_images/chore_flow_diagram_detailed.png
  • In the example above, from the left to the right, you can see the main input of the diagram (1) linked to the starting input of Localized Text box (2). Its output (3) is then linked to the starting input of Say Text box (4) which output (5) is linked to the main output of the diagram (6).

Creating a Box

To create a behavior, you need boxes. To get a box from here you can:

  • Either drag and drop the box you want to use from the box library panel to the flow diagram.
  • Or create your own new box from scratch by right-clicking on the flow diagram background and pressing Add a new box. You can then enter its name and validate to get quickly your new box.

Editing boxes

Once you have boxes in your diagram you can:

  • cut, copy or paste a box by right-clicking on it and selecting Cut, Copy or Paste.
  • select several boxes by dragging and dropping the mouse so that the square drawn by your mouse includes the boxes you want to select. You can also select all the boxes of a diagram by right-clicking anywhere on the diagram and selecting Select All.
  • delete the selected boxes by right-clicking on one of them or on the background and selecting Delete selection.
  • set the value of the parameters of a box (if any) by right-clicking on the box and selecting Set Parameters, or by clicking on the parameter button on the bottom-left of the box: parameter-button. This action will open a widget to set the value of box parameters.
  • edit a box and its properties by right-clicking on it and selecting Edit box. This action will open the Box Edition widget where you will be able to set the properties of the box.
  • edit the script of a box by right-clicking on it and selecting Edit box script.
  • edit the resources of a box by right-clicking on it and selecting Edit resources. This action will open the Box Resource Edition widget where you will be able to set the resources of the box.
  • store a box in a box library by right-clicking on the box and selecting Add to library.

Zooming

Moreover you can zoom in or out the diagram to have a better point of view of the boxes by right-clicking anywhere on the flow diagram, selecting Zoom and choosing the zoom level you want. By default the auto-zoom is set so that you can see as many boxes as possible within the diagram panel.

Box inputs/outputs

You can directly edit or delete each existing input (or output) of a box by right-clicking on it and selecting the action you want to make (edit or delete).

In the same way you can directly add a new input (or output) to a box by right-clicking on one of the existing inputs (or outputs) and selecting Add input (or Add output).

And if your box is a flow diagram or a timeline, you can even directly add an input from ALMemory by right-clicking on one of the inputs and selecting Add input from ALMemory.

You can also add, edit and delete most of inputs (and outputs) of a box by right-clicking in the far left area (or the far right area for the outputs) of the diagram when you are in the box diagram.

Note

While the behavior is running, you can simulate a signal on an input (or an output) by double-clicking on the input (or the output). If it carries a data, then you will be asked to enter the data value you want to send through the input (or the output).

Grouping several boxes

Then you will be able to group several boxes linked to each other into a single box in order to have a more readable flow diagram. To do so, right-click anywhere on the selection and select Convert to Box.

Note

This single box will have no input nor output if the selected boxes are not linked to an other box which is not selected nor to the main inputs or outputs.

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:

  1. Select all the boxes you want to gather.

    ../../../_images/gather_boxes.png
  2. Right click on the diagram and click on Convert to box in the context menu.

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

  3. Check if the links are good.

Multilevel diagram

You can access the diagram of a box (if any) by double-clicking on it. You can come back to the parent diagram (if any) by double-clicking on the background of the flow diagram.

If you double-click on a timeline box to enter the diagram, the flow diagram then displayed will not be quite the same as the one corresponding to a flow diagram box and a new panel will be displayed: the Timeline panel.

If the timeline of the box has no behavior layer, it has no flow diagram and then the Flow Diagram panel will be 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.

Note

A script box has no flow diagram. So when you double-click on it, it will be the Script Editor with the box script which will be displayed. Fore further details about this panel, go to the concerned section: the Script Editor.