.. |parameter-button| image:: /medias/desktop/choregraphe/parameter_button.png :class: img-inline Flow Diagram Panel ==================== .. _choregraphe-overview-flow-diagram-panel: What is the Flow Diagram panel ------------------------------ The flow diagram panel is the place where you can compose NAO's :ref:`behaviors `. .. image:: /medias/desktop/choregraphe/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. .. image:: /medias/desktop/choregraphe/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 :ref:`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. .. image:: /medias/desktop/choregraphe/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 :ref:`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 :ref:`Box Edition widget ` where you will be able to set the properties of the box. * edit the :ref:`script ` of a box by right-clicking on it and selecting **Edit box script**. * edit the :ref:`resources ` of a box by right-clicking on it and selecting **Edit resources**. This action will open the :ref:`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). Creating a link --------------- To **connect two boxes** to each other you must drag and drop the mouse from the output of the first to the input of the second. A link then appears between the output and the input. You can also **set the value of a box parameter** from the value of a box output by dragging and dropping the mouse from the output of the source box to the **parameter button** of the destination box. You can then choose the parameter which you want to change the value of. For instance, you can have a link that changes the speed of the text synthesis on the box **Say**: .. image:: /medias/desktop/choregraphe/chore_parameters_link.png Editing links -------------- Once you have links in your diagram you can: * **select** a link by clicking on it. * **delete** a link by selecting it, right-clicking and selecting **Delete the selection**. You can also select several links and boxes of a diagram by dragging and dropping the mouse so that the square drawn by your mouse includes the boxes you want to select. You can even select all the links and boxes by right-clicking anywhere on the diagram and selecting **Select All**. 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. .. _choregraphe-howto-convert-boxes-to-one-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: #. Select all the boxes you want to gather. .. image:: /medias/desktop/choregraphe/gather_boxes.png #. 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. #. 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 :ref:`Timeline panel `. If the :ref:`timeline of the box ` has no :ref:`behavior layer `, it has **no flow diagram** and then the Flow Diagram panel will be empty as shown below. .. image:: /medias/desktop/choregraphe/chore_flow_diagram_empty.png If it has at least one :ref:`behavior layer ` and one :ref:`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. .. image:: /medias/desktop/choregraphe/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: :ref:`the Script Editor `.