Domain-Specific Visual Modelling Denis Dub e School of Computer - - PowerPoint PPT Presentation

NSERC Summer Research 26 August 2004

Domain-Specific Visual Modelling

Denis Dub´ e

School of Computer Science, McGill University, Montr´ eal, Canada Modelling, Simulation & Design Lab (MSDL)

NSERC summer research, 26 August 2004 d3n14@yahoo.com Domain-Specific Visual Modelling 1/25

Domain-Specific Visual Modelling

• Enables working directly with domain concepts
• High level of abstraction
• Some Examples:

DCharts, StateCharts, Petri-Nets, GPSS, Timed Automata, Reachability Graphs, Causal Block Diagrams

NSERC summer research, 26 August 2004 d3n14@yahoo.com Domain-Specific Visual Modelling 2/25

Causal Block Diagram Harmonic Oscillator

x0 0.0 y0 1.0

IC

x

IC

y −

I OUT

K 1.0 0.0 PLOT NSERC summer research, 26 August 2004 d3n14@yahoo.com Domain-Specific Visual Modelling 3/25

GPSS Telephone Simulation

FN1 12 2 V2 V1 PH 1 LR PH1 V1 H 2 P2 NE P1 S PH1 LNKS R PH1 1 LR PH2 R PH1 LNKS 1 S PH2 FN1 120 Function: 1 LNKS 10

NSERC summer research, 26 August 2004 d3n14@yahoo.com Domain-Specific Visual Modelling 4/25

Petri-Nets Power Window Controller

Hi_Bot Hi_Mid Hi_Top Med_Bot Med_Mid Med_Top Low_Bot 1 Low_Mid Low_Top

• bject.Present
• bject.Absent

1 removeObject 1 insertObject 1 control.Neutral 1 control.movingDown control.movingUp control.Emergency cmdUp cmdDown cmdStop cmd 1 in_object.Present_and_con in_control.Neutral_22x21 in_control.MovingDown_22x in_control.MovingUp_31x32 in_control.MovingDown_32x in_control.Neutral_32x31 in_control.MovingUp_32x33 in_control.MovingDown_33x in_control.Neutral_33x32 in_object.Present_and_con in_control.MovingDown_23x in_control.Neutral_23x22 in_control.MovingUp_11x12 in_control.MovingDown_12x in_control.Neutral_12x11 in_control.MovingUp_12x13 in_control.MovingDown_13x in_control.Neutral_13x12 removeObject insertObject cmdUp unconditional cmdDown in_plant.Hi_Bot startMovingDown StopMovingDown StopMovingUp startMovingUp in_plant.Hi_Top in_control.movingUp_and_o in_control.movingDown_31x in_control.movingUp in_control.movingDown_21x gen_cmdUp gen_cmdStop gen_cmdDown

NSERC summer research, 26 August 2004 d3n14@yahoo.com Domain-Specific Visual Modelling 5/25

Domain-Specific Modelling Environment

• Meta-modelling specifies the syntax of domain specific modelling

formalisms explicitly, in the form of a model

• Thus a meta-modelling tool allows domain experts to build a

meta-model and synthesize a domain-specific modelling environment from it.

• One such tool is AToM3 (A Tool for Multi-formalism Meta-Modelling),

developed by the Modelling, Simulation and Design Lab

NSERC summer research, 26 August 2004 d3n14@yahoo.com Domain-Specific Visual Modelling 6/25

Visually Modelling The Syntax

• Enables intuitive creation of meta-models
• Visual entities are connected to denote relationships
• Dynamic visual attributes such as names can be set
• Dynamic pre/post conditions can be set to alter model behaviour

NSERC summer research, 26 August 2004 d3n14@yahoo.com Domain-Specific Visual Modelling 7/25

Annotation Meta-Model

text type=Text init.value= charHeight type=Float init.value=18.0 charWidth type=Float init.value=7.5 autoResize type=Boolean init.value=True autoOptimizeArrow type=Boolean init.value=True TextAnnotationBox text type=Text init.value= charWidth type=Float init.value=7.5 charHeight type=Float init.value=18.0 autoResize type=Boolean init.value=True autoOptimizeArrow type=Boolean init.value=True TextAnnotationRound text type=Text init.value= charWidth type=Float init.value=7.5 charHeight type=Float init.value=18.0 autoResize type=Boolean init.value=True autoOptimizeArrow type=Boolean init.value=True TextAnnotationRoundedBox autoOptimizeArrow type=Boolean init.value=True showAnchor type=Boolean init.value=True Anchor text type=Text init.value=T autoOptimizeArrow type=Boolean init.value=True TextAnnotation

AnnotationArrow

NSERC summer research, 26 August 2004 d3n14@yahoo.com Domain-Specific Visual Modelling 8/25

Icon-Editor

Francois Plamondon NSERC USRA, Summer 2003 http://moncs.cs.mcgill.ca/people/fplamo/summerwork.dtml

NSERC summer research, 26 August 2004 d3n14@yahoo.com Domain-Specific Visual Modelling 9/25

Annotation Model

MSDL Philosphy: Everything is a model. Even annotations are modeled instead of hardcoded. This particular model sports many pre/post conditions which can be controlled by editing the attributes of individual nodes. The above text containers can dyanmically re−size to fit the text, and the arrows are automatically adjusted to a smooth gentle curve.

NSERC summer research, 26 August 2004 d3n14@yahoo.com Domain-Specific Visual Modelling 10/25

Visual Modelling Environment

Thus far, the visual meta-modeling process is described from a static point of view Some of the key components of an interactive visual modelling environment are:

• 1. Visual environment behaviour
• 2. Layout in static models, unchanging
• 3. Layout in dynamic models, undergoing graph transformations

NSERC summer research, 26 August 2004 d3n14@yahoo.com Domain-Specific Visual Modelling 11/25

Visual Environment Behaviour

Philosphy: ”Everything is modelled explicitly”

• 1. The behaviour was modeled as a DChart, a form of StateCharts, that

is in turn a form of finite state automata

• 2. The model was then simulated with SVM to ensure correct behaviour
• 3. Python code was generated from the model using SCC

DCharts, SVM, and SCC were developed in Thomas Feng’s M.Sc. thesis.

NSERC summer research, 26 August 2004 d3n14@yahoo.com Domain-Specific Visual Modelling 12/25

DCharts GUI Behaviour

NSERC summer research, 26 August 2004 d3n14@yahoo.com Domain-Specific Visual Modelling 13/25

DCharts GUI Behaviour

NSERC summer research, 26 August 2004 d3n14@yahoo.com Domain-Specific Visual Modelling 14/25

Static Layout

• An extensive review of the existing litterature and tools was conducted
• In particular, one tool, yED, proved very powerful yet free to download
• Thus the ability to export AToM3 models to several common graph

languages was implemented

• The ability to export and import from yED, to preserve the AToM3

model appearence, was also implemented

NSERC summer research, 26 August 2004 d3n14@yahoo.com Domain-Specific Visual Modelling 15/25

Reachability Graph Export/Import to/from yED

NSERC summer research, 26 August 2004 d3n14@yahoo.com Domain-Specific Visual Modelling 16/25

Static Layout

The following tools were directly integrated into AToM3:

• Spring-based layout

Simulates nodes and edges to create a layout

• Snap Grid

Removes burden of aligning node and edge control points

• Automatic edge optimizer

Removes burden of creating straight or gently curved arrows

• Interactive edge manipulation

Eases the creation and modification of control points Removes burden of manually selecting connection ports

NSERC summer research, 26 August 2004 d3n14@yahoo.com Domain-Specific Visual Modelling 17/25

Static Layout

Additional minor yet useful tools:

• General manipulation of multiple nodes and edges at once
• Scaling of nodes and edge drawings
• Text scaling
• Global zooming
• Arbitrary relative label placement
• Cut, copy, and paste
• Undo and redo

NSERC summer research, 26 August 2004 d3n14@yahoo.com Domain-Specific Visual Modelling 18/25

Spring-based Layout

This layout approach works by modelling:

• 1. Each pair of connected nodes as being tied together by an ideal

spring, with a given rest length

• 2. Each pair of unconnected nodes as electrical charges and thus

exerting repulsive forces on each other

• 3. A friction force to limit the effect of repulsive forces

NSERC summer research, 26 August 2004 d3n14@yahoo.com Domain-Specific Visual Modelling 19/25

Spring-based Layout

Advantages:

• Highly configurable
• Animated in real-time
• Can be applied selectively (to sub-graphs)
• Quite effective on models that have a small/sparse structure

Disadvantages:

• O(n2) performance
• Does not minimize edge crossings
• Vulnerable to local minima solutions

NSERC summer research, 26 August 2004 d3n14@yahoo.com Domain-Specific Visual Modelling 20/25

Dynamic Layout

A force-transfer based layout was implemented:

• Handles the overlap resulting from the manipulation of a node or a

cluster of nodes

• i.e. this occurs when using graph grammars to transform one model

into another

• Animated in real-time
• Can be configured to work automatically in the background or applied

directly to specific nodes and even edge control points

• Handles overlap by moving nodes just enough so that they no longer
• verlap

NSERC summer research, 26 August 2004 d3n14@yahoo.com Domain-Specific Visual Modelling 21/25

Future Work

Better tools to handle dynamic layout are needed.

• A linear constraints approach would allow the specification of

directional relationships and distances between nodes of a given type.

• As nodes were inserted/removed, the layout would shift to

accomodate the change automatically or on demand.

• This would require layout specifications for each specific domain.
• Furthermore, a spring-based approach could be used to supplement

the linear constraints in situations where constraints conflict.

• The springs would naturally find a compromise solution to the conflict,

whereas in a pure linear constraint approach, one of the constraints must be dropped.

NSERC summer research, 26 August 2004 d3n14@yahoo.com Domain-Specific Visual Modelling 22/25

sourceTree Contributions Global

• ffset constraints.

• GXL. Configurable.

• r extension of canvas.

• actions. Generated code.

• routines. Snap & arrows.

NSERC summer research, 26 August 2004 d3n14@yahoo.com Domain-Specific Visual Modelling 23/25

sourceTree Contributions GUI

UserInterface Refactored & new content ArrowEditor.py Interactive edge manipulator. CallbackState.py Utility methods for callback handlers. ASG.py Modified addNode(), applies layout constraints. Cursors.py Context specific mouse cursors. ASGNode.py Modified code generator, added layout constraints. CallbackHandlers.py Many handlers for events from the UI_StateChart. Embedded_Images.py Stores GIF images in an ASCII format. graphEntity.py Added methods, base class of all nodes. GraphicalForm.py Added images and extra text font support. graphLink.py Added methods, base class of all edges. KeyBinds.py All mouse & keyboard events bound to UI events. OptionDatabase.py Generic way to load and save options. OptionDialog.py Displays the options for interactive change. PilotArrow.py Interactive ’fake’ arrow when creating new edge. popupMenuCreator.py Arranges popup menu elements into menus. popupMenuElements.py Single menu items. Generate UI events. Postscript.py Postscript dialog with interactive boundary. SelectionBox.py Draws a box on screen when selecting items. UI_StateChart.py Converts UI events into

• actions. Generated code.

Undo.py Undo & redo. Utilities.py Various optimization

• routines. Snap & arrows.

VisualObj.py Added methods, base class of all visual objects. Drag.py Slightly modified dragging routines. DrawConnections.py Modified edge creation routines.

NSERC summer research, 26 August 2004 d3n14@yahoo.com Domain-Specific Visual Modelling 24/25

sourceTree Contributions Layout

Layout New tools ArrowOptimizer.py Uses Utilities.py to auto−shape arrows. Export_Import_GML.py Exports GML then re−imports it to AToM3. SnapGrid.py Snaps entities and/or arrows to a grid. Exporter.py Exports to GML, DOT, or

• GXL. Configurable.

SpringLayout.py Physical simulation to achieve auto−layout. ForceTransfer.py Pushes nodes apart. ZoomFocus.py Global scaling, stretching,

• r extension of canvas.

NSERC summer research, 26 August 2004 d3n14@yahoo.com Domain-Specific Visual Modelling 25/25