Last modified by Soeren Domroes on 2025/01/30 12:04
<
From version < 10.1 >
edited by chsch
on 2013/11/12 16:04
To version < 17.1 >
edited by uru
on 2023/07/06 14:36
>
Change comment: Renamed back-links.

Summary

Details

Page properties
Parent
... ... @@ -1,0 +1,1 @@
1 +Lightweight Diagrams (KLighD)
Author
... ... @@ -1,1 +1,1 @@
1 -XWiki.chsch
1 +XWiki.uru
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:Lightweight Diagrams (KLighD)]]
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]]
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:Lightweight Diagrams (KLighD)]] and import the examples project.
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.
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,88 @@
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:Lightweight Diagrams (KLighD)]].
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]].
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 +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
26 +1**. (((
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}}
29 +)))
30 +1*. Make yourself familiar with all of that opportunities, play around with the parameters to figure out their effects!
31 +\\
22 22  1. Let your diagram synthesis create an edge for each transition being depicted by a polyline
23 23  1*. Attach arrow decorators to those polylines.
24 24  
25 25  = Augment your diagram synthesis =
26 26  
37 +1. Highlight the initial state of your turing diagrams by setting some different color, line width, line style, or what ever
27 27  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}}.
28 28  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}}.
29 29  1. Improve the layout of your diagrams
30 -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}}.
31 -11. change the edge figures from polylines to splines.
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.
32 32  
44 += Introduce synthesis and layout options =
45 +
46 +1. Try out the {{code language="none"}}EcoreDiagramSynthesis{{/code}} as shown in the meeting, make yourself familiar with the implementation
47 +1*. Focus on the declaration of {{code language="none"}}SynthesisOption{{/code}}s and their usages, have also a look {{code language="none"}}SynthesisOption{{/code}}'s class documentation.
48 +1. Add a synthesis option to your diagram synthesis implementation for turning edge labels on & off.
49 +1. Feel free to add further options, e.g. for changing the coloring of the nodes and edges
50 +1. Provide some reasonable layout options in the side bar, allowing the tool user to tailor the diagrams' layout
51 +
52 += Add hierarchy =
53 +
54 +1. Add a further KNode representing the TuringMachine, move all nodes representing states into that machine node
55 +1. Choose a reasonable basis figure for that node
56 +11. add a text field showing the machine's name (or some fixed title text)
57 +11. add a text field showing the machine's tape alphabet, extend your turing machine language (meta model) respectively, if necessary
58 +11. add a {{code language="none"}}KChildArea{{/code}}, e.g. by calling {{code language="none"}}addChildArea{{/code}}()
59 +11. define a grid-based children placement of the root figure by calling (% style="line-height: 1.4285715;" %)setGridPlacement(% class="s1" %)((% class="s2" %)1(% class="s1" %)){{code language="none"}}{{/code}}
60 +11*. What is the effect of the {{code language="none"}}1{{/code}}?
61 +11. add polylines acting as separators of the above figure elements
62 +
63 += Manipulate displayed diagrams =
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 +
33 33  
Confluence.Code.ConfluencePageClass[0]
Id
... ... @@ -1,1 +1,1 @@
1 -8651137
1 +8651121
URL
... ... @@ -1,1 +1,1 @@
1 -https://rtsys.informatik.uni-kiel.de/confluence//wiki/spaces/KIELER/pages/8651137/Student Tutorial on KIELER Lightweight Diagrams
1 +https://rtsys.informatik.uni-kiel.de/confluence//wiki/spaces/KIELER/pages/8651121/Student Tutorial on KIELER Lightweight Diagrams

Navigation

Quick Links

KIELER on GitHub
RTSYS Homepage