| <?xml version="1.0" encoding="iso-8859-1" ?> |
| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" |
| "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> |
| <!--http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd--> |
| <html xmlns="http://www.w3.org/1999/xhtml" |
| > |
| <head><title>Automatic Diagram Layout with KIELER</title> |
| <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> |
| <meta name="generator" content="TeX4ht (http://www.cse.ohio-state.edu/~gurari/TeX4ht/)" /> |
| <meta name="originator" content="TeX4ht (http://www.cse.ohio-state.edu/~gurari/TeX4ht/)" /> |
| <!-- xhtml,3,next,html --> |
| <meta name="src" content="etrice-doc.tex" /> |
| <meta name="date" content="2013-10-21 12:44:00" /> |
| <link rel="stylesheet" type="text/css" href="etrice-doc.css" /> |
| </head><body |
| > |
| <!--l. 1--><div class="crosslinks"><p class="noindent">[<a |
| href="etrice-docse26.html" >next</a>] [<a |
| href="etrice-docse24.html" >prev</a>] [<a |
| href="etrice-docse24.html#tailetrice-docse24.html" >prev-tail</a>] [<a |
| href="#tailetrice-docse25.html">tail</a>] [<a |
| href="etrice-docch5.html#etrice-docse25.html" >up</a>] </p></div> |
| <h3 class="sectionHead"><span class="titlemark">5.2 </span> <a |
| id="x32-1370005.2"></a>Automatic Diagram Layout with KIELER</h3> |
| <!--l. 3--><p class="noindent" > |
| </p> |
| <h4 class="subsectionHead"><span class="titlemark">5.2.1 </span> <a |
| id="x32-1380005.2.1"></a>Overview</h4> |
| <!--l. 5--><p class="noindent" >eTrice now provides a new feature of automatic layout of the ROOM diagrams in its graphical editors. This helps in improving |
| the pragmatics of the diagrams and frees the user from the burden of manually lay-outing the diagrams on the |
| canvas. |
| </p><!--l. 9--><p class="noindent" >The automatic lay-outing has been provided with the help of the well known KIELER framework, which focuses on the |
| pragmatics of model-based system design, which can improve comprehensibility of diagrams, improve development and |
| maintenance time, and improve the analysis of dynamic behavior. |
| </p><!--l. 13--><p class="noindent" >This chapter will answer the following questions </p> |
| <ul class="itemize1"> |
| <li class="itemize"><a |
| href="#x32-1390005.2.2">”How to perform automatic layout in the graphical editors of eTrice?”</a> |
| </li> |
| <li class="itemize"><a |
| href="#x32-1400005.2.3">”What are layout options?”</a> |
| </li> |
| <li class="itemize"><a |
| href="#x32-1410005.2.4">”How to configure the layout options to alter the diagram layout as desired?”</a></li></ul> |
| <!--l. 21--><p class="noindent" >Moreover, some <a |
| href="#x32-1460005.2.5">”special layout options”</a> will also be discussed. |
| </p><!--l. 23--><p class="noindent" > |
| </p> |
| <h4 class="subsectionHead"><span class="titlemark">5.2.2 </span> <a |
| id="x32-1390005.2.2"></a>Performing Automatic Layout</h4> |
| <!--l. 26--><p class="noindent" >Automatic layout could be performed in eTrice graphical editors using the command to layout the current |
| diagram. |
| </p><!--l. 29--><p class="noindent" >This command is available in |
| </p> |
| <ul class="itemize1"> |
| <li class="itemize">The context menu of the diagrams |
| </li> |
| <li class="itemize">Using the <span |
| class="ec-lmsso-10">Ctrl+R L </span>shortcut.</li></ul> |
| <!--l. 36--><p class="noindent" >Additionally, an entry in the context menu allows to layout only a selected part of the diagram. |
| |
| |
| </p><!--l. 38--><p class="noindent" > |
| </p> |
| <h4 class="subsectionHead"><span class="titlemark">5.2.3 </span> <a |
| id="x32-1400005.2.3"></a>Layout Options</h4> |
| <!--l. 41--><p class="noindent" >A layout option is a customization point for the layout algorithms, with a specific data type and optionally a |
| default value, used to affect how the active layout algorithm computes concrete coordinates for the graph |
| elements. |
| </p><!--l. 45--><p class="noindent" >User-configurable layout options for a particular diagram object can be viewed and configured through the Layout View.The |
| Layout View can be opened from the context menu of a selected diagram object by clicking the <span |
| class="ec-lmsso-10">Show Layout View</span> |
| entry. |
| </p><!--l. 49--><p class="noindent" >On opening the layout view, and selecting any layout option, a description of the layout option is available in the footer of |
| eclipse SDK. This is shown in figure <a |
| href="#x32-1400011">5.1<!--tex4ht:ref: fig:layout_options --></a>. |
| </p> |
| <hr class="figure" /><div class="figure" |
| > |
| |
| |
| <a |
| id="x32-1400011"></a> |
| |
| |
| |
| <!--l. 53--><p class="noindent" ><img |
| src="images/043-LayoutOptionDescription.png" alt="PIC" |
| /> |
| <br /> </p><div class="caption" |
| ><span class="id">Figure 5.1: </span><span |
| class="content">Layout options</span></div><!--tex4ht:label?: x32-1400011 --> |
| |
| |
| </div><hr class="endfigure" /> |
| <h4 class="subsectionHead"><span class="titlemark">5.2.4 </span> <a |
| id="x32-1410005.2.4"></a>Configuring Layout Options</h4> |
| <!--l. 61--><p class="noindent" >The values of the layout options for a particular diagram object (in the visible diagram) can be changed using |
| the Layout View of that diagram object. The initial values are the predefined <span |
| class="ec-lmsso-10">default </span>values. These defaults |
| can be changed using the context menu in Layout View as well as the Layout preference pages provided by |
| eTrice. |
| </p><!--l. 66--><p class="noindent" > |
| </p> |
| <h5 class="subsubsectionHead"><a |
| id="x32-1420005.2.4"></a>The Layout View</h5> |
| <hr class="figure" /><div class="figure" |
| > |
| |
| |
| <a |
| id="x32-1420012"></a> |
| |
| |
| |
| <!--l. 70--><p class="noindent" ><img |
| src="images/043-LayoutView.png" alt="PIC" |
| /> |
| <br /> </p><div class="caption" |
| ><span class="id">Figure 5.2: </span><span |
| class="content">Layout view</span></div><!--tex4ht:label?: x32-1420012 --> |
| |
| |
| </div><hr class="endfigure" /> |
| <!--l. 75--><p class="noindent" >The Layout view (figure <a |
| href="#x32-1420012">5.2<!--tex4ht:ref: fig:layout_view --></a>) allows flexible customization of layout options for the selected objects in the eTrice diagram. |
| If no object is selected, the view shows the options for the top-level container of the diagram. Options are |
| stored persistently in diagram file (<span |
| class="ec-lmsso-10">.structure file / </span>.behavior file) of the eTrice diagram, so that they are still |
| available after the next Eclipse restart. Of course this requires the diagram to be saved after an option was |
| changed. |
| </p><!--l. 81--><p class="noindent" >The options are grouped according to the function of the selected objects. The group Nodes (respectively Edges, Ports, or |
| Labels) contains options related to the object itself, such as its size or priority, while the group Parents contains options for |
| the elements contained in the selected objects, such as the applied layout algorithm or the spacing between elements. Which |
| layout options are displayed depends on the types of selected objects and the active layout algorithm, since each algorithm |
| supports only a subset of the available options. Furthermore, some options are only visible if the <span |
| class="ec-lmsso-10">Show Advanced</span> |
| <span |
| class="ec-lmsso-10">Properties </span>button in the view toolbar is activated. The group types can be hidden using the Show Categories |
| button. |
| </p><!--l. 90--><p class="noindent" >An option can be changed by selecting or entering a new value in the corresponding cell of the Value column. |
| </p><!--l. 92--><p class="noindent" >The most important option is Layout Algorithm, which is used to determine the layout algorithm for the contents of |
| the selected element. Here either a specific layout algorithm or a layout type can be chosen; in the latter |
| case, the most suitable layout algorithm of the given type is taken. By changing the active layout algorithm, |
| the content of the layout view is updated to display only those options that are supported by the new layout |
| algorithm. |
| </p><!--l. 98--><p class="noindent" >Selecting <span |
| class="ec-lmsso-10">Restore Default Value </span>in the context menu or the view toolbar (figure <a |
| href="#x32-1420023">5.3<!--tex4ht:ref: fig:layout_context_menu --></a>) removes any value for the currently |
| selected option that is stored in the current model file, thus resetting the option to its default value. The view menu has an |
| entry Remove all Layout Options which resets all options of the current model by removing persistent data in the model |
| file. |
| </p> |
| <hr class="figure" /><div class="figure" |
| > |
| |
| |
| <a |
| id="x32-1420023"></a> |
| |
| |
| |
| <!--l. 105--><p class="noindent" ><img |
| src="images/043-ContextMenu.png" alt="PIC" |
| /> |
| <br /> </p><div class="caption" |
| ><span class="id">Figure 5.3: </span><span |
| class="content">Layout in context menu</span></div><!--tex4ht:label?: x32-1420023 --> |
| |
| |
| </div><hr class="endfigure" /> |
| <!--l. 110--><p class="noindent" >The context menu for a specific layout option has different alternatives to set the currently active value as <span |
| class="ec-lmsso-10">default</span> |
| value: |
| </p> |
| <ul class="itemize1"> |
| <li class="itemize"><span |
| class="ec-lmsso-10">Set as Default for this Diagram</span>: Changes the open diagram file so that the same value is applied to all similar |
| objects (edit parts) of that diagram. |
| </li> |
| <li class="itemize"><span |
| class="ec-lmsso-10">Set as Default for ... in this Context</span>: Applies the value to all similar objects that are displayed with the any of |
| the eTrice editors (the option is linked to the edit part class of the selected object). |
| </li> |
| <li class="itemize"><span |
| class="ec-lmsso-10">Set as Default for all ...</span>: Links the option value with the domain model element or the diagram type of the |
| selected object (see the context menu depicted above).</li></ul> |
| <!--l. 125--><p class="noindent" >These four alternatives have different priorities: if present, the default value for the current diagram is taken first, then the |
| default value for the edit part is checked, then the default value for the domain model element, and then the default value for |
| the diagram type. |
| </p><!--l. 129--><p class="noindent" >Tips: </p> |
| <ul class="itemize1"> |
| <li class="itemize">The information button of the view toolbar can be used to display some useful details on the current selection, |
| such as the edit part and domain model classes. |
| </li> |
| <li class="itemize">Default values for layout options can most easily be manipulated based on the eTrice domain model elements.</li></ul> |
| <h5 class="subsubsectionHead"><a |
| id="x32-1430005.2.4"></a>Preference Page</h5> |
| <!--l. 140--><p class="noindent" >The user-defined <span |
| class="ec-lmsso-10">default </span>values for layout options can also be set using the preference pages provided in eTrice. Three |
| preference pages have been provided for this purpose </p> |
| <ul class="itemize1"> |
| <li class="itemize"><span |
| class="ec-lmsso-10">Layout</span>: for general preferences regarding layout |
| </li> |
| <li class="itemize"><span |
| class="ec-lmsso-10">Behavior</span>: for setting default values of layout options for eTrice behavior diagrams |
| </li> |
| <li class="itemize"><span |
| class="ec-lmsso-10">Structure</span>: for setting default values of layout options for eTrice structure diagrams</li></ul> |
| <!--l. 148--><p class="noindent" >These preference pages can be accessed via <span |
| class="ec-lmsso-10">Windows > Preferences > </span><span |
| class="ec-lmsso-10">e</span><span |
| class="ec-lmsso-10">Trice</span> <span |
| class="ec-lmsso-10">> Layout</span>. |
| </p><!--l. 150--><p class="noindent" >Note that the contents of these preference pages are in sync with the <span |
| class="ec-lmsso-10">KIELER > Layout </span>preference page |
| provided by the KIELER. Relevant entries in the <span |
| class="ec-lmsso-10">KIELER > Layout </span>page are shown in the above preference |
| pages. |
| </p> |
| <!--l. 154--><p class="noindent" ><span class="paragraphHead"><a |
| id="x32-1440005.2.4"></a><span |
| class="ec-lmssbo-10">Layout </span><span |
| class="ec-lmssbx-10">Preference Page</span></span> |
| <br |
| class="newline" /> |
| </p><!--l. 156--><p class="noindent" >The <span |
| class="ec-lmsso-10">Layout </span>preference page is meant to configure general options regarding the layout. |
| </p><!--l. 158--><p class="noindent" >If <span |
| class="ec-lmsso-10">Set routing style of all edges to oblique </span>is active, all routing styles and smoothness settings of edges are removed when |
| automatic layout is performed. Since most layouters compute the routing of edges as part of their algorithm, these styles |
| usually do not yield the expected results. |
| |
| |
| </p> |
| <!--l. 162--><p class="noindent" ><span class="paragraphHead"><a |
| id="x32-1450005.2.4"></a><span |
| class="ec-lmssbo-10">Behavior </span><span |
| class="ec-lmssbx-10">and </span><span |
| class="ec-lmssbo-10">Structure </span><span |
| class="ec-lmssbx-10">Preference Page</span></span> |
| <br |
| class="newline" /> |
| </p><!--l. 165--><p class="noindent" >The <span |
| class="ec-lmsso-10">Behavior </span>and <span |
| class="ec-lmsso-10">Structure </span>sub-preference pages help in setting up the default values of layout options in behavior and |
| structure diagrams respectively. |
| </p><!--l. 168--><p class="noindent" >The <span |
| class="ec-lmsso-10">Default Layout Option Values </span>table is used to manage the default setting for layout options, which can also be modified |
| with the context menu of the layout view (see above). All user-defined settings are displayed here, and the buttons on the |
| right of the table serve to create, edit, and remove entries. The Type column shows the type of element the option is |
| linked with: either edit part, model element, or diagram type. The Element column shows the class name |
| for options that relate to edit parts or domain model elements, and the diagram type name for options that |
| relate to diagram types. Option is the name of the layout option, and Value is the currently set value of the |
| option. |
| </p><!--l. 176--><p class="noindent" >Creating a new entry requires the selection of the type of related element (figure <a |
| href="#x32-1450014">5.4<!--tex4ht:ref: fig_layout_preference_page --></a>) and entering its class |
| name or identifier. Class names of edit parts can be explored using the information button of the layout view, |
| while the class names for the domain model elements and the diagram type identifiers for the diagram types |
| can be selected with the Browse button. After that, a layout option has to be selected from the list using |
| the corresponding Browse button. Hitting OK creates an entry, and its value can then be set using the Edit |
| button. |
| </p> |
| <hr class="figure" /><div class="figure" |
| > |
| |
| |
| <a |
| id="x32-1450014"></a><a |
| id="x34-15600048"></a> |
| |
| |
| |
| <!--l. 185--><p class="noindent" ><img |
| src="images/043-PreferencePage.png" alt="PIC" |
| /> |
| <br /> </p><div class="caption" |
| ><span class="id">Figure 5.4: </span><span |
| class="content">Layout preference page</span></div><!--tex4ht:label?: x32-1450014 --> |
| |
| |
| </div><hr class="endfigure" /> |
| <!--l. 190--><p class="noindent" >Note that the <span |
| class="ec-lmsso-10">Behavior </span>preference page will show only those entries which hold for the behavior diagrams. |
| Moreover, it will allow setting default values of layout options for only those domain model elements and diagram |
| types which could be present in the behavior editor diagrams. Similar thing holds for the <span |
| class="ec-lmsso-10">Structure </span>preference |
| page. |
| </p> |
| <h4 class="subsectionHead"><span class="titlemark">5.2.5 </span> <a |
| id="x32-1460005.2.5"></a>Special Layout Options</h4> |
| <!--l. 198--><p class="noindent" >While most layout options are used to affect how the active layout algorithm computes concrete coordinates for the graph |
| elements, there are some layout options that have a special role. |
| </p><!--l. 201--><p class="noindent" > |
| </p> |
| <h5 class="subsubsectionHead"><a |
| id="x32-1470005.2.5"></a>Layout Algorithm</h5> |
| <!--l. 203--><p class="noindent" >The option with identifier de.cau.cs.kieler.algorithm specifies which layout algorithm to use for the content of a composite |
| node. The value can be either the identifier of a layout algorithm or the identifier of a layout type. In the latter case the |
| algorithm with highest priority of that type is applied. |
| </p><!--l. 207--><p class="noindent" >For the purpose of automatic diagram layout in eTrice, we use the <span |
| class="ec-lmsso-10">Layered </span>algorithms which are meant for lay-outing |
| hierarchical diagrams and are best suited for behavior and structure diagrams in eTrice. For the behavior diagrams we have |
| used the <span |
| class="ec-lmsso-10">Graphviz Dot </span>algorithm whereas for the structure diagrams we have used the <span |
| class="ec-lmsso-10">KLay Layered </span>algorithm. Though the |
| layout algorithm being used for performing layout can be changed at ones own will, it is recommended to use the |
| defaults. |
| </p><!--l. 213--><p class="noindent" > |
| </p> |
| <h5 class="subsubsectionHead"><a |
| id="x32-1480005.2.5"></a>Diagram Type</h5> |
| <!--l. 215--><p class="noindent" >Diagram types are used to classify graphical diagrams for setting default layout option values for a set of similar diagrams. |
| The diagram type of an element is specified with the layout option <span |
| class="ec-lmtt-10">de.cau.cs.kieler.diagramType</span>. Thus, these help |
| in |
| </p><!--l. 219--><p class="noindent" >The following diagram types have been defined and used in eTrice: </p> |
| <ul class="itemize1"> |
| <li class="itemize"><span |
| class="ec-lmsso-10">General </span>- This type is automatically assigned to all diagrams for which no specific type is declared. (Predefined |
| in KIELER) |
| </li> |
| <li class="itemize"><span |
| class="ec-lmsso-10">e</span><span |
| class="ec-lmsso-10">Trice</span> <span |
| class="ec-lmsso-10">Behavior Diagrams </span>- This type has been assigned to the diagram objects in eTrice Behavior Diagrams. |
| </li> |
| <li class="itemize"><span |
| class="ec-lmsso-10">e</span><span |
| class="ec-lmsso-10">Trice</span> <span |
| class="ec-lmsso-10">Structure Diagrams </span>- This type has been assigned to the diagram objects in eTrice Structure Diagrams.</li></ul> |
| <!--l. 228--><p class="noindent" >Note that not all diagrams objects in the behavior and structure diagrams are assigned the last two diagram types. |
| Only the top-level container and the visible bounding box has been assigned these diagram types in respective |
| editors. |
| </p><!--l. 232--><p class="noindent" > |
| </p> |
| <h4 class="subsectionHead"><span class="titlemark">5.2.6 </span> <a |
| id="x32-1490005.2.6"></a>Further References</h4> |
| |
| |
| <!--l. 234--><p class="noindent" >Most parts of the above documentation have been taken from the "KIML wiki" |
| (<a |
| href="http://rtsys.informatik.uni-kiel.de/confluence/pages/viewpage.action?pageId=328078" class="url" ><span |
| class="ec-lmtt-10">http://rtsys.informatik.uni-kiel.de/confluence/pages/viewpage.action?pageId=328078</span></a> and have been |
| modified for automatic layout in eTrice. A more detailed description about the layout algorithms, predefined |
| diagram types and the internal structure of KIELER Infrastructure for Meta-Layout (KIML) can be found |
| there. |
| |
| |
| </p> |
| <!--l. 1--><div class="crosslinks"><p class="noindent">[<a |
| href="etrice-docse26.html" >next</a>] [<a |
| href="etrice-docse24.html" >prev</a>] [<a |
| href="etrice-docse24.html#tailetrice-docse24.html" >prev-tail</a>] [<a |
| href="etrice-docse25.html" >front</a>] [<a |
| href="etrice-docch5.html#etrice-docse25.html" >up</a>] </p></div> |
| <!--l. 1--><p class="noindent" ><a |
| id="tailetrice-docse25.html"></a> </p> |
| </body></html> |
