Tutorials - KIELER Lightweight Diagrams

Page / - last modified by Soeren Domroes on 2025/01/30 12:04

KIELER Lightweight Diagrams

last modified by Soeren Domroes

on 2025/01/30 12:04

Table of Contents

Preliminaries

Implement a simple turing diagram synthesis

Augment your diagram synthesis

Introduce synthesis and layout options

Add hierarchy

Manipulate displayed diagrams

This tutorial fits into the row of our tutorials teaching the basics of Eclipse and Eclipse modeling technologies. It is intended to be performed by bachelor or master students taking part on practicals (e.g. Eclipse Practical (winter term 201213)) or warming up for a thesis.

The aim of this tutorial is to make you familiar with KLighD and the KLighD way of creating diagrams of models and even any data structures being worth to be visualized by node-link-diagrams.

Preliminaries

Read about the ideas & motivation of KLighD in our paper "Just Model! – Putting Automatic Synthesis of Node-Link-Diagrams into Practice", cited at Lightweight Diagrams (KLighD)

You can skip the size estimation part and focus on section I, III, IV A, and V.

Install the KLighD from our latest release update site as demonstrated on Lightweight Diagrams (KLighD) and import the examples project.

Make yourself familiar with the UML2UseCaseDiagramSynthesis contained that project

Have also a look at the ...Extensions classes mentioned in UML2UseCaseDiagramSynthesis, especially KNodeExtensions.
What is the purpose of createNode(...) and getNode(...)?

Implement a simple turing diagram synthesis

Create a new diagram synthesis implementation by means of the KLighD project wizard as illustrated on Lightweight Diagrams (KLighD).

Add a dependency of the newly introduced plug-in project to the project defining your turing modeling language.

Let your diagram synthesis create a node for each state declared in your state machine.

Let those node be depicted by ellipses or rounded rectangles containing a text field showing the corresponding state's name

Add some space around the text by trying out all of

setSurroundingSpace(...), make sure to let the rel parameter satisfy
rel < 0.5f

setAreaPlacementData().from(LEFT, ..., ..., TOP, ..., ...).to(RIGHT, ..., ..., BOTTOM, ..., ...), as well as

setPointPlacementDataLEFT00.5fTOP00.5fH_CENTRALV_CENTRAL0000(, , , , , , , , 1, 1, , )

Make yourself familiar with all of that opportunities, play around with the parameters to figure out their effects!

Let your diagram synthesis create an edge for each transition being depicted by a polyline

Attach arrow decorators to those polylines.

Augment your diagram synthesis

Highlight the initial state of your turing diagrams by setting some different color, line width, line style, or what ever

The actor nodes in UML2UseCaseDiagramSynthesis are equipped with (node) labels. This is done by means of a convenience method provided KLabelExtensions.

Equip the edges of your turing diagrams with labels exhibiting the guard, new symbol, etc; use a fitting method for edge labels from KLabelExtensions.

Improve the layout of your diagrams

switch the layout algorithm to Graphviz dot by setting the layout option LayoutOptions.ALGORITHM on the root node to de.cau.cs.kieler.graphviz.dot.

change the edge figures from polylines to splines.

Introduce synthesis and layout options

Try out the EcoreDiagramSynthesis as shown in the meeting, make yourself familiar with the implementation

Focus on the declaration of SynthesisOptions and their usages, have also a look SynthesisOption's class documentation.

Add a synthesis option to your diagram synthesis implementation for turning edge labels on & off.

Feel free to add further options, e.g. for changing the coloring of the nodes and edges

Provide some reasonable layout options in the side bar, allowing the tool user to tailor the diagrams' layout

Add hierarchy

Add a further KNode representing the TuringMachine, move all nodes representing states into that machine node

Choose a reasonable basis figure for that node

add a text field showing the machine's name (or some fixed title text)

add a text field showing the machine's tape alphabet, extend your turing machine language (meta model) respectively, if necessary

add a KChildArea, e.g. by calling addChildArea()

define a grid-based children placement of the root figure by calling setGridPlacement(1)

What is the effect of the 1?

add polylines acting as separators of the above figure elements

Manipulate displayed diagrams

KLighD diagrams provide interactivity by allowing to link action to KRenderings

add a KAction to the title text of node representing the turing machine by calling
text.addAction(Trigger::DOUBLECLICK, KlighdConstants::ACTION_COLLAPSE_EXPAND)

observe the effect and enjoy

Implement your own action

have a look at de.cau.cs.kieler.klighd.actions.CollapseExpandAction and its registration in the corresponding plugin.xml

implement an own IAction that manipulates the current diagram by changing colors, adding or removing elements, hiding and showing single nodes or edges, ... , and register it

associate it with a diagram part of your choice and test it

Run your action via a menu contribution

copy the following snippet into a plugin.xml of your projects, replace ##YOUR_PLUGINS_ID## and ##YOUR_ACTIONS_ID## by the corresponding strings

<extension
id="##YOUR_PLUGINS_ID##.internal.commands.handler"
point="org.eclipse.ui.menus">
<menuContribution
allPopups="false"
locationURI="toolbar:de.cau.cs.kieler.layout.toolbar">
<command
commandId="de.cau.cs.kieler.klighd.ui.actionExecution"
label="TestContribution"
style="push">
<parameter
name="de.cau.cs.kieler.klighd.ui.action"
value="##YOUR_ACTIONS_ID##">
</parameter>
</command>
</menuContribution>
</extension>

change ##YOUR_PLUGINS_ID## part of the label, enter your action's id (##YOUR_ACTIONS_ID##), feel free to put it at a different location, e.g. the context menu

test it by selecting a diagram node or edge and hitting your menu entry