1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
|
<?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" />
<<<<<<< Upstream, based on branch 'master' of ssh://hrentzreich@git.eclipse.org:29418/etrice/org.eclipse.etrice.git
<meta name="date" content="2013-06-14 00:16:00" />
=======
<meta name="date" content="2013-06-14 08:45:00" />
>>>>>>> 1fbdb27 [doc] fixed problem with colored eTrice in headings
<link rel="stylesheet" type="text/css" href="etrice-doc.css" />
</head><body
>
<!--l. 1--><div class="crosslinks"><p class="noindent">[<a
href="etrice-docse38.html" >next</a>] [<a
href="etrice-docch8.html" >prev</a>] [<a
href="etrice-docch8.html#tailetrice-docch8.html" >prev-tail</a>] [<a
href="#tailetrice-docse37.html">tail</a>] [<a
href="etrice-docch8.html#etrice-docse37.html" >up</a>] </p></div>
<h3 class="sectionHead"><span class="titlemark">8.1 </span> <a
id="x47-1120008.1"></a>Automatic Diagram Layout with KIELER</h3>
<!--l. 3--><p class="noindent" >
</p>
<h4 class="subsectionHead"><span class="titlemark">8.1.1 </span> <a
id="x47-1130008.1.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="#x47-1140008.1.2">”How to perform automatic layout in the graphical editors of eTrice?”</a>
</li>
<li class="itemize"><a
href="#x47-1150008.1.3">”What are layout options?”</a>
</li>
<li class="itemize"><a
href="#x47-1160008.1.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="#x47-1210008.1.5">”special layout options”</a> will also be discussed.
</p><!--l. 23--><p class="noindent" >
</p>
<h4 class="subsectionHead"><span class="titlemark">8.1.2 </span> <a
id="x47-1140008.1.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">8.1.3 </span> <a
id="x47-1150008.1.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="#x47-1150011">8.1<!--tex4ht:ref: fig:layout_options --></a>.
</p>
<hr class="figure" /><div class="figure"
>
<a
id="x47-1150011"></a>
<!--l. 53--><p class="noindent" ><img
src="images/043-LayoutOptionDescription.png" alt="PIC"
/>
<br /> </p><div class="caption"
><span class="id">Figure 8.1: </span><span
class="content">Layout options</span></div><!--tex4ht:label?: x47-1150011 -->
</div><hr class="endfigure" />
<h4 class="subsectionHead"><span class="titlemark">8.1.4 </span> <a
id="x47-1160008.1.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="x47-1170008.1.4"></a>The Layout View</h5>
<hr class="figure" /><div class="figure"
>
<a
id="x47-1170012"></a>
<!--l. 70--><p class="noindent" ><img
src="images/043-LayoutView.png" alt="PIC"
/>
<br /> </p><div class="caption"
><span class="id">Figure 8.2: </span><span
class="content">Layout view</span></div><!--tex4ht:label?: x47-1170012 -->
</div><hr class="endfigure" />
<!--l. 75--><p class="noindent" >The Layout view (figure <a
href="#x47-1170012">8.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 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="#x47-1170023">8.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="x47-1170023"></a>
<!--l. 105--><p class="noindent" ><img
src="images/043-ContextMenu.png" alt="PIC"
/>
<br /> </p><div class="caption"
><span class="id">Figure 8.3: </span><span
class="content">Layout in context menu</span></div><!--tex4ht:label?: x47-1170023 -->
</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="x47-1180008.1.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="x47-1190008.1.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="x47-1200008.1.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="#x47-1200014">8.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="x47-1200014"></a><a
id="x48-12600048"></a>
<!--l. 185--><p class="noindent" ><img
src="images/043-PreferencePage.png" alt="PIC"
/>
<br /> </p><div class="caption"
><span class="id">Figure 8.4: </span><span
class="content">Layout preference page</span></div><!--tex4ht:label?: x47-1200014 -->
</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">8.1.5 </span> <a
id="x47-1210008.1.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="x47-1220008.1.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="x47-1230008.1.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">8.1.6 </span> <a
id="x47-1240008.1.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-docse38.html" >next</a>] [<a
href="etrice-docch8.html" >prev</a>] [<a
href="etrice-docch8.html#tailetrice-docch8.html" >prev-tail</a>] [<a
href="etrice-docse37.html" >front</a>] [<a
href="etrice-docch8.html#etrice-docse37.html" >up</a>] </p></div>
<!--l. 1--><p class="noindent" ><a
id="tailetrice-docse37.html"></a> </p>
</body></html>
|
