Last modified by Soeren Domroes on 2025/01/30 12:04
<
From version < 17.1 >
edited by uru
on 2023/07/06 14:36
To version < 11.1 >
edited by chsch
on 2013/11/12 16:42
>
Change comment: There is no comment for this version

Summary

Details

Page properties
Parent
... ... @@ -1,1 +1,0 @@
1 -Lightweight Diagrams (KLighD)
Author
... ... @@ -1,1 +1,1 @@
1 -XWiki.uru
1 +XWiki.chsch
Content
... ... @@ -4,9 +4,9 @@
4 4  
5 5  = Preliminaries =
6 6  
7 -1. Read about the ideas & motivation of KLighD in our paper "//Just Model!// – Putting Automatic Synthesis of Node-Link-Diagrams into Practice", cited at [[doc:KIELER.Home.Lightweight Diagrams (KLighD).WebHome]]
7 +1. Read about the ideas & motivation of KLighD in our paper "//Just Model!// – Putting Automatic Synthesis of Node-Link-Diagrams into Practice", cited at [[doc:Lightweight Diagrams (KLighD)]]
8 8  1*. You can skip the size estimation part and focus on section I, III, IV A, and V.
9 -1. Install the KLighD from our latest release update site as demonstrated on [[doc:KIELER.Home.Lightweight Diagrams (KLighD).WebHome]] and import the examples project.
9 +1. Install the KLighD from our latest release update site as demonstrated on [[doc:Lightweight Diagrams (KLighD)]] and import the examples project.
10 10  1. Make yourself familiar with the (% style="line-height: 1.4285715;" %){{code language="none"}}UML2UseCaseDiagramSynthesis{{/code}} contained that project
11 11  1*. (((
12 12  (% style="line-height: 1.4285715;" %)Have also a look at the {{code language="none"}}...Extensions{{/code}} classes mentioned in UML2UseCaseDiagramSynthesis, especially {{code language="none"}}KNodeExtensions{{/code}}.
... ... @@ -15,19 +15,18 @@
15 15  
16 16  = Implement a simple turing diagram synthesis =
17 17  
18 -1. Create a new diagram synthesis implementation by means of the KLighD project wizard as illustrated on [[doc:KIELER.Home.Lightweight Diagrams (KLighD).WebHome]].
18 +1. Create a new diagram synthesis implementation by means of the KLighD project wizard as illustrated on [[doc:Lightweight Diagrams (KLighD)]].
19 19  1. Add a dependency of the newly introduced plug-in project to the project defining your turing modeling language.
20 20  1. Let your diagram synthesis create a node for each state declared in your state machine.
21 21  1*. Let those node be depicted by ellipses or rounded rectangles containing a text field showing the corresponding state's name
22 22  1*. Add some space around the text by trying out all of
23 -1**. {{code language="none"}}setSurroundingSpace(...){{/code}}, make sure to let the{{code language="none"}} rel{{/code}} parameter satisfy
24 -{{code language="none"}} rel < 0.5f{{/code}}
25 -1**. {{code language="none"}}setAreaPlacementData().from(LEFT, ..., ..., TOP, ..., ...).to(RIGHT, ..., ..., BOTTOM, ..., ...){{/code}}, as well as
23 +1**. setSurroundingSpace(...), as well as
24 +1**. setAreaPlacementData().from(LEFT, ..., ..., TOP, ..., ...).to(RIGHT, ..., ..., BOTTOM, ..., ...)
26 26  1**. (((
27 27  (% class="p1" %)
28 -(% class="s2" %)setPointPlacementData(% class="s3" %)LEFT(% class="s4" %)00.5f(% class="s3" %)TOP(% class="s4" %)00.5f(% class="s3" %)H_CENTRALV_CENTRAL(% class="s4" %)0000{{code language="none"}}(, , , , , , , , 1, 1, , ){{/code}}
27 +(% class="s2" %)setPointPlacementData(%%)((% class="s3" %)LEFT(%%), (% class="s4" %)0(%%), (% class="s4" %)0.5f(%%), (% class="s3" %)TOP(%%), (% class="s4" %)0(%%), (% class="s4" %)0.5f(%%), (% class="s3" %)H_CENTRAL(%%), (% class="s3" %)V_CENTRAL(%%), 1(% class="s4" %)0(%%), 1(% class="s4" %)0(%%), (% class="s4" %)0(%%), (% class="s4" %)0(%%));
29 29  )))
30 -1*. Make yourself familiar with all of that opportunities, play around with the parameters to figure out their effects!
29 +1*. Make yourself with all of that opportunities, play around with the parameters to figure out their effects!
31 31  \\
32 32  1. Let your diagram synthesis create an edge for each transition being depicted by a polyline
33 33  1*. Attach arrow decorators to those polylines.
... ... @@ -38,8 +38,8 @@
38 38  1. The actor nodes in {{code language="none"}}UML2UseCaseDiagramSynthesis{{/code}} are equipped with (node) labels. This is done by means of a convenience method provided {{code language="none"}}KLabelExtensions{{/code}}.
39 39  1*. Equip the edges of your turing diagrams with labels exhibiting the guard, new symbol, etc; use a fitting method for edge labels from {{code language="none"}}KLabelExtensions{{/code}}.
40 40  1. Improve the layout of your diagrams
41 -1*. switch the layout algorithm to Graphviz {{code language="none"}}dot{{/code}} by setting the layout option //LayoutOptions//{{code language="none"}}.ALGORITHM{{/code}} on the root node to {{code language="none"}}de.cau.cs.kieler.graphviz.dot{{/code}}.
42 -1*. change the edge figures from polylines to splines.
40 +11. switch the layout algorithm to Graphviz {{code language="none"}}dot{{/code}} by setting the layout option //LayoutOptions//{{code language="none"}}.ALGORITHM{{/code}} on the root node to {{code language="none"}}de.cau.cs.kieler.graphviz.dot{{/code}}.
41 +11. change the edge figures from polylines to splines.
43 43  
44 44  = Introduce synthesis and layout options =
45 45  
... ... @@ -60,43 +60,6 @@
60 60  11*. What is the effect of the {{code language="none"}}1{{/code}}?
61 61  11. add polylines acting as separators of the above figure elements
62 62  
63 -= Manipulate displayed diagrams =
62 +
64 64  
65 -KLighD diagrams provide interactivity by allowing to link action to KRenderings
66 -
67 -1. add a {{code language="none"}}KAction{{/code}} to the title text of node representing the turing machine by calling
68 -{{code language="none"}}text.addAction({{/code}}{{code language="none"}}Trigger::DOUBLECLICK, KlighdConstants::ACTION_COLLAPSE_EXPAND){{/code}}
69 -1*. observe the effect and enjoy 
70 -1. Implement your own action
71 -1*. have a look at {{code language="none"}}de.cau.cs.kieler.klighd.actions.CollapseExpandAction{{/code}} and its registration in the corresponding {{code language="none"}}plugin.xml{{/code}}
72 -1*. implement an own {{code language="none"}}IAction{{/code}} that manipulates the current diagram by changing colors, adding or removing elements, hiding and showing single nodes or edges, ... , and register it
73 -1*. associate it with a diagram part of your choice and test it
74 -1. Run your action via a menu contribution
75 -1*. (((
76 -copy the following snippet into a {{code language="none"}}plugin.xml{{/code}} of your projects, replace{{code language="none"}} ##YOUR_PLUGINS_ID##{{/code}} and {{code language="none"}}##YOUR_ACTIONS_ID##{{/code}} by the corresponding strings
77 -
78 -{{code}}
79 - <extension
80 - id="##YOUR_PLUGINS_ID##.internal.commands.handler"
81 - point="org.eclipse.ui.menus">
82 - <menuContribution
83 - allPopups="false"
84 - locationURI="toolbar:de.cau.cs.kieler.layout.toolbar">
85 - <command
86 - commandId="de.cau.cs.kieler.klighd.ui.actionExecution"
87 - label="TestContribution"
88 - style="push">
89 - <parameter
90 - name="de.cau.cs.kieler.klighd.ui.action"
91 - value="##YOUR_ACTIONS_ID##">
92 - </parameter>
93 - </command>
94 - </menuContribution>
95 - </extension>
96 -
97 -{{/code}}
98 -)))
99 -1*. change {{code language="none"}}##YOUR_PLUGINS_ID##{{/code}} part of{{code language="none"}} {{/code}}the label, enter your action's id ({{code language="none"}}##YOUR_ACTIONS_ID##{{/code}}), feel free to put it at a different location, e.g. the context menu
100 -1*. test it by selecting a diagram node or edge and hitting your menu entry
101 -
102 102  
Confluence.Code.ConfluencePageClass[0]
Id
... ... @@ -1,1 +1,1 @@
1 -8651121
1 +8651139
URL
... ... @@ -1,1 +1,1 @@
1 -https://rtsys.informatik.uni-kiel.de/confluence//wiki/spaces/KIELER/pages/8651121/Student Tutorial on KIELER Lightweight Diagrams
1 +https://rtsys.informatik.uni-kiel.de/confluence//wiki/spaces/KIELER/pages/8651139/Student Tutorial on KIELER Lightweight Diagrams

Navigation

Quick Links

KIELER on GitHub
RTSYS Homepage