domain-specic visual modelling - mcgill university

NSERC Summer Research26 August 2004

Domain-Specific Visual Modelling

Denis Dube

School of Computer Science, McGill University, Montreal, CanadaModelling, Simulation & Design Lab (MSDL)

NSERC summer research, 26 August 2004 [email protected] Domain-Specific Visual Modelling 1/21

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


Causal Block Harmonic Oscillator

x0

0.0

y0

1.0

ICx

ICy

− I OUT

K

1.0

0.0

PLOT


GPSS Telephone Simulation

FN112

0

2V2

V1 PH1

LR PH1

V1 H2

P2NEP1

S PH1

LNKS

R PH1

1

LR PH2 R PH1

LNKS

1

S PH2

FN1120

Function: 1LNKS10


Petri-Nets Power Window Controller

Hi_Bot0

Hi_Mid0

Hi_Top0

Med_Bot0

Med_Mid0

Med_Top0

Low_Bot1

Low_Mid0

Low_Top0

object.Present0

object.Absent1

removeObject1

insertObject1

control.Neutral1

control.movingDown0

control.movingUp0

control.Emergency0

cmdUp0

cmdDown0

cmdStop0

cmd1

in_object.Present_and_con

in_control.Neutral_22x21

in_control.MovingDown_22x

in_control.MovingUp_31x32






in_object.Present_and_con









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


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


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


Annotation Meta-Model

text type=Text init.value=

charHeight type=Float init.value=18.0charWidth type=Float init.value=7.5autoResize type=Boolean init.value=TrueautoOptimizeArrow type=Boolean init.value=True

TextAnnotationBox


charWidth type=Float init.value=7.5charHeight type=Float init.value=18.0autoResize type=Boolean init.value=TrueautoOptimizeArrow type=Boolean init.value=True

TextAnnotationRound


charWidth type=Float init.value=7.5charHeight type=Float init.value=18.0autoResize type=Boolean init.value=TrueautoOptimizeArrow type=Boolean init.value=True

TextAnnotationRoundedBox

autoOptimizeArrow type=Boolean init.value=TrueshowAnchor type=Boolean init.value=True

Anchor

text type=Text init.value=T

autoOptimizeArrow type=Boolean init.value=True

TextAnnotation

AnnotationArrow


Icon-Editor

Francois Plamondon

NSERC USRA, Summer 2003

http://moncs.cs.mcgill.ca/people/fplamo/summerwork.dtml


Annotation Model

MSDL Philosphy: Everything is a model. Even annotations are modeledinstead of hardcoded.

This particular model sportsmany pre/post conditions whichcan be controlled by editing the attributes of individual nodes.

The above text containers candyanmically re−size to fit thetext, and the arrows are automatically adjusted to asmooth gentle curve.


Traffic + Annotation Model


Visual Modelling Environment� Thus far, the visual meta-modeling process is described from a static

point of view

� The key interactive components of a visual modelling environment

are:

i) Visual environment behaviour

ii) Layout in static models, unchanging

iii) Layout in dynamic models, undergoing graph transformations


Visual Environment Behaviour� Philosphy: ”Everything is modelled explicitly”

� The behaviour was modeled as a DChart, a form of StateCharts, that

is in turn a form of finite state automata

� The model was then simulated with SVM to ensure correct behaviour

� Python code was generated from the model using SCC

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


DCharts GUI BehaviourGUI Behaviour

Arrow EditorNew Arrow

Initial

Main

Remove From Selection

New Selection

Add To Selection

Drag Nodes

Scale Entity

Exit

DefaultActive Point

Snap Points

No Snap

Postscript

Bounding Box Edit

Drag Label

Scale Text

Finish Selection

Motion

Model Action

Done

Motion

Edit Arrow

Move Right

Smooth Default

Scale Selection

Open Metamodel

Reset

Move Left

Force Layout

Reset Scale

Motion

Select Point

Move Up

Finish Drag

Drop Point

Paste

Move Label Toggle

Insert Point

Motion

Close Metamodel

Redo

Create New Arrow

Save As

Deselect All

Copy Attributes

Start Drag

Fresh Selection

Additive Selection

Toggle Snap

Select All

Scale Selection

Finish Selection

Motion

Rollback

Start Drag

Move Label Toggle

Show Console

Additive Selection

Finish Scale

Move Down

Finish Selection

Toggle Label Drag

Motion

Arrow Optimizer

Snap Grid Toggle

Clear Canvas

Edit Arrow

Popup Menu

Options

Delete

Rollback

Finish Scale

Done

Recent Metamodel

Trans. Menu

Motion

Motion

Save

Popup Menu

File Menu

Model Menu

Negative Selection

Drop Point

Model Menu

Exit

Toggle Snap

Move Up

Zoom Layout

Spring Layout

Reset Scale

Reboot

Fresh Selection

Source Paths

Layout Menu

Recent Model

Motion

Move Left

CopySelect Point

Negative Selection

Motion

Open

Paste Attributes

Start

Motion

Motion

Postscript

Delete

Edit Properties

Smooth

Smooth

Delete

Undo

Cut

Edit Properties

Move Down

Done

Move Right

Finish Drag


DCharts SVM vs In Action


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


Reachability Graph Export/Import to/from yED

[Low_Bot, cmd, insertObject, object.Absent, removeObject, control.Neutral]

[Low_Bot, control.Neutral, removeObject, object.Present, cmd]

[Low_Bot, control.Neutral, cmd, object.Absent]

[Low_Bot, control.Neutral, object.Absent, cmdUp]

[Low_Bot, control.movingUp, object.Absent]

[Low_Mid, object.Absent, control.movingUp]

[Low_Top, control.movingUp, object.Absent]

[Med_Top, object.Absent, control.movingUp]

[Hi_Top, control.movingUp, object.Absent]

[Hi_Top, control.Neutral, object.Absent]

[Med_Top, control.Neutral, object.Absent]

[Low_Top, control.Neutral, object.Absent]

[Low_Bot, control.Neutral, object.Absent, cmdStop] [Low_Bot, control.Neutral, cmdDown, object.Absent]

[Low_Bot, object.Absent, control.movingDown]

[Med_Bot, object.Absent, control.movingDown]

[Hi_Bot, object.Absent, control.movingDown]

[control.Neutral, object.Absent, Hi_Bot]

[Med_Bot, control.Neutral, object.Absent]

[Low_Bot, control.Neutral, object.Absent]

[Low_Bot, control.Neutral, object.Present, cmdUp, removeObject]

[Low_Bot, object.Present, control.movingUp, removeObject]

[Low_Mid, object.Present, control.movingUp, removeObject]

[object.Present, Med_Mid, control.Emergency, removeObject]

[control.Emergency, Med_Mid, object.Absent]

[control.Neutral, object.Absent, Med_Mid]

[control.Neutral, Low_Mid, object.Absent]

[control.Neutral, object.Present, Med_Mid, removeObject]

[control.Neutral, Low_Mid, object.Present, removeObject]

[Low_Bot, control.Neutral, object.Present, cmdStop, removeObject] [Low_Bot, control.Neutral, cmdDown, object.Present, removeObject]

[Low_Bot, object.Present, removeObject, control.movingDown]

[Med_Bot, object.Present, removeObject, control.movingDown]

[object.Present, Hi_Bot, removeObject, control.movingDown]

[control.Neutral, object.Present, Hi_Bot, removeObject]

[Med_Bot, control.Neutral, object.Present, removeObject]

[Low_Bot, control.Neutral, object.Present, removeObject]

[Low_Bot, insertObject, control.Neutral, object.Absent, removeObject, cmdUp]

[Low_Bot, insertObject, control.movingUp, object.Absent, removeObject]

[insertObject, Low_Mid, object.Absent, control.movingUp, removeObject]

[Low_Top, insertObject, control.movingUp, object.Absent, removeObject]

[Med_Top, insertObject, object.Absent, control.movingUp, removeObject]

[Hi_Top, insertObject, control.movingUp, object.Absent, removeObject]

[Hi_Top, object.Present, control.movingUp, removeObject]

[Hi_Top, control.Neutral, object.Present, removeObject]

[Med_Top, control.Neutral, object.Present, removeObject]

[Low_Top, control.Neutral, object.Present, removeObject]

[Hi_Top, insertObject, control.Neutral, object.Absent, removeObject]

[Med_Top, insertObject, control.Neutral, object.Absent, removeObject]

[Low_Top, insertObject, control.Neutral, object.Absent, removeObject]

[Med_Top, object.Present, control.movingUp, removeObject]

[Low_Top, object.Present, control.movingUp, removeObject]

[Low_Bot, insertObject, control.Neutral, object.Absent, removeObject, cmdStop] [Low_Bot, insertObject, control.Neutral, object.Absent, removeObject, cmdDown]

[Low_Bot, insertObject, object.Absent, removeObject, control.movingDown]

[Med_Bot, insertObject, object.Absent, removeObject, control.movingDown]

[insertObject, Hi_Bot, object.Absent, removeObject, control.movingDown]

[insertObject, control.Neutral, object.Absent, Hi_Bot, removeObject]

[Med_Bot, insertObject, control.Neutral, object.Absent, removeObject]

[Low_Bot, insertObject, control.Neutral, object.Absent, removeObject]

removeObject


insertObject

startMovingUp

removeObject

insertObject

insertObject

startMovingDown

insertObject



insertObject

unconditional

removeObject


in_control.MovingDown_12x11 in_control.MovingDown_13x12

removeObject

insertObject

insertObject

in_control.movingUp

in_control.Neutral_12x11insertObject

removeObject

removeObject

in_control.MovingDown_13x12


insertObject

in_control.MovingDown_12x11in_object.Present_and_control.MovingUp_21x22


gen_cmdDown



gen_cmdStop

removeObject

removeObject

in_plant.Hi_Top


removeObject

removeObject

removeObject

in_control.Neutral_12x11in_plant.Hi_Bot


gen_cmdUp

startMovingUp

insertObject

in_plant.Hi_Bot

gen_cmdStop

insertObject

removeObject

gen_cmdUp

insertObjectinsertObject


in_control.movingUp

insertObject

removeObject

startMovingDown in_control.MovingDown_12x11

insertObject

insertObject

removeObject

insertObject

in_control.MovingDown_13x12

removeObject

in_plant.Hi_Top

in_plant.Hi_Bot

removeObject

removeObjectgen_cmdUp

startMovingDown

removeObject unconditional

in_control.Neutral_22x21 removeObject

in_control.movingUp

gen_cmdDown

insertObjectgen_cmdDownremoveObjectgen_cmdStop

startMovingUpin_control.movingUp_and_object.Absent


in_control.movingUp_and_object.Absent



in_plant.Hi_Top


removeObjectin_control.Neutral_32x31



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


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


Spring-based Layout� This layout approach works by modelling:

i) Each pair of connected nodes as being tied together by an ideal

spring, with a given rest length

ii) Each pair of unconnected nodes as electrical charges and thus

exerting repulsive forces on each other

iii) A friction force to limit the effect of repulsive forces

� Highly configurable and animated in real-time

� Can be applied to selectively (to sub-graphs)

� Effective on models that have a small/sparse structure

� Disadvantages: Does not minimize edge crossings and is vulnerable

to local minima solutions


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

� 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

overlap


Future Work� Need more tools to handle dynamic layout

� Linear constraints could allow the smooth transformation of one

model into another by specifying distances and directonal

relationships between inter-connected nodes

� Spring-based constraints could do the same, and far more effectively

in the case of conflicting constraints, although performance in larger

models will likely prove insufficient

� A hybrid of the two approaches will yield a powerful tool for handling

dynamic model layout


sourceTree Contributions

Atom3

Central install directory

Kernel

Source code

External

Ex: SVM, lpsolve

Formalisms

Meta-models

Models

Saved models

ATOM3.py

Main executable,modified/created > 50%

ModelSpecificCode.py

Code depending on specific formalisms.

FilePaths.py

Directory structure of AToM3.

ATOM3Types

Fixed GUI bugs

Constraints

Area for future work

ERModels

Updated grahpics

GraphicalObjects

Added gif images

GraphicEditor

Integrated icon editor

Layout

New tools

Obsolete

To be phased out

UserInterface

Refactored & new content

constraintLoader.py

Load scale & label offset constraints.

ArrowOptimizer.py

Uses Utilities.pyto auto-shape arrows.

Export_Import_GML.py

Exports GML thenre-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 simulationto achieve auto-layout.

ForceTransfer.py

Pushes nodes apart.

ZoomFocus.py

Global scaling, stretching,or extension of canvas.

ArrowEditor.py

Interactive edge manipulator.

CallbackState.py

Utility methods for callback handlers.

ASG.py

Modified addNode(),applies layout constraints.

Cursors.py

Context specificmouse cursors.

ASGNode.py

Modified code generator,added layout constraints.

CallbackHandlers.py

Many handlers for eventsfrom the UI_StateChart.

Embedded_Images.py

Stores GIF images in an ASCII format.

graphEntity.py

Added methods, baseclass 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 & keyboardevents bound to UI events.

OptionDatabase.py

Generic way to loadand save options.

OptionDialog.py

Displays the optionsfor interactive change.

PilotArrow.py

Interactive 'fake' arrowwhen creating new edge.

popupMenuCreator.py

Arranges popup menuelements into menus.

popupMenuElements.py

Single menu items.Generate UI events.

Postscript.py

Postscript dialog withinteractive boundary.

SelectionBox.py

Draws a box on screenwhen 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, baseclass of all visual objects.

Drag.py

Slightly modified dragging routines.

DrawConnections.py

Modified edge creationroutines.

User Area

User directory

User External

External source

User Models

Saved models

User Formalisms

User meta-models

.AToM3

Hidden directory

Session Data

TempFiles

Copy & undo buffers.

Options

Saved options.Annotation

New text formalism

SourceTree

New formalism.

ReachGraph

Updated graphics.

DCharts

Updated graphics.


domain-specic visual modelling - mcgill university

Documents