Foundations & ConceptDemo

Case Study Results

Light-Weight Synthesis of Ptolemy Diagramswith KIELER

Ulf Ruegg, Christian Schneider, Christoph Daniel Schulze,Miro Sponemann, Christian Motika, and Reinhard von Hanxleden

Real-Time Systems and Embedded Systems GroupDepartment of Computer Science

Christian-Albrechts-Universitat zu Kiel, Germany

KIELERKiel Integrated Environmentfor Layout Eclipse RichClient

10th Ptolemy MiniconferenceBerkeley, 7 Nov. 2013

Christian Motika Light-Weight Synthesis of Ptolemy Diagrams with KIELER 1 / 17

Foundations & ConceptDemo

Case Study Results

MotivationContributionOverview

Ptolemy & KIELER

Christian Motika Light-Weight Synthesis of Ptolemy Diagrams with KIELER 2 / 17

Foundations & ConceptDemo

Case Study Results

MotivationContributionOverview

Graphical Modeling

I , Short learning curve(palette, Drag&Drop)

I , Readability(inspecting/understanding,mental map)

I , Visualization ofdynamics: Simulation

I , Validation(detect obvious modelerrors)

Christian Motika Light-Weight Synthesis of Ptolemy Diagrams with KIELER 3 / 17

Foundations & ConceptDemo

Case Study Results

MotivationContributionOverview

Graphical Modeling

I , Short learning curve(palette, Drag&Drop)

I , Readability(inspecting/understanding,mental map)

I , Visualization ofdynamics: Simulation

I , Validation(detect obvious modelerrors)

Christian Motika Light-Weight Synthesis of Ptolemy Diagrams with KIELER 3 / 17

Foundations & ConceptDemo

Case Study Results

MotivationContributionOverview

Graphical Modeling

I , Short learning curve(palette, Drag&Drop)

I , Readability(inspecting/understanding,mental map)

I , Visualization ofdynamics: Simulation

I , Validation(detect obvious modelerrors)

Christian Motika Light-Weight Synthesis of Ptolemy Diagrams with KIELER 3 / 17

Foundations & ConceptDemo

Case Study Results

MotivationContributionOverview

Graphical Modeling

I , Short learning curve(palette, Drag&Drop)

I , Readability(inspecting/understanding,mental map)

I , Visualization ofdynamics: Simulation

I , Validation(detect obvious modelerrors)

Christian Motika Light-Weight Synthesis of Ptolemy Diagrams with KIELER 3 / 17

Foundations & ConceptDemo

Case Study Results

MotivationContributionOverview

Graphical Modeling (cont’d)

I Widely used in today’s industrial tool chains (e.g., SCADE)and academia (e.g., Ptolemy)

I / Readability (overview gets lost quickly)I / Maintenance (requires lots of manual effort)

Christian Motika Light-Weight Synthesis of Ptolemy Diagrams with KIELER 4 / 17

Foundations & ConceptDemo

Case Study Results

MotivationContributionOverview

Graphical Modeling (cont’d)

I Widely used in today’s industrial tool chains (e.g., SCADE)and academia (e.g., Ptolemy)

I / Readability (overview gets lost quickly)

I / Maintenance (requires lots of manual effort)

Christian Motika Light-Weight Synthesis of Ptolemy Diagrams with KIELER 4 / 17

Foundations & ConceptDemo

Case Study Results

MotivationContributionOverview

Graphical Modeling (cont’d)

I Widely used in today’s industrial tool chains (e.g., SCADE)and academia (e.g., Ptolemy)

I / Readability (overview gets lost quickly)I / Maintenance (requires lots of manual effort)

Christian Motika Light-Weight Synthesis of Ptolemy Diagrams with KIELER 4 / 17

Foundations & ConceptDemo

Case Study Results

MotivationContributionOverview

Graphical Modeling (cont’d)

I / Readability (layout critical for understanding semantics)

Christian Motika Light-Weight Synthesis of Ptolemy Diagrams with KIELER 5 / 17

Foundations & ConceptDemo

Case Study Results

MotivationContributionOverview

Graphical Modeling (cont’d) - Model Browsing

Christian Motika Light-Weight Synthesis of Ptolemy Diagrams with KIELER 6 / 17

Foundations & ConceptDemo

Case Study Results

MotivationContributionOverview

Graphical Modeling (cont’d) - Model Browsing

Christian Motika Light-Weight Synthesis of Ptolemy Diagrams with KIELER 6 / 17

Foundations & ConceptDemo

Case Study Results

MotivationContributionOverview

Graphical Modeling (cont’d) - Model Browsing

Christian Motika Light-Weight Synthesis of Ptolemy Diagrams with KIELER 6 / 17

Foundations & ConceptDemo

Case Study Results

MotivationContributionOverview

Graphical Modeling (cont’d) - Model Browsing

Christian Motika Light-Weight Synthesis of Ptolemy Diagrams with KIELER 6 / 17

Foundations & ConceptDemo

Case Study Results

MotivationContributionOverview

Graphical Modeling (cont’d) - Model Browsing

Christian Motika Light-Weight Synthesis of Ptolemy Diagrams with KIELER 6 / 17

Foundations & ConceptDemo

Case Study Results

MotivationContributionOverview

Graphical Modeling (cont’d) - Model Browsing

I / Fokus&Context, inner and outer ports vs. performance

Christian Motika Light-Weight Synthesis of Ptolemy Diagrams with KIELER 6 / 17

Foundations & ConceptDemo

Case Study Results

MotivationContributionOverview

Graphical Modeling vs. Textual ModelingI Emerging trend: Textual Modeling

I Concrete syntax is text

I , Rapid Development (goodtooling support, e.g., Xtext)

I , Handling (model diffs,version control, toolinterchange)

I , Readability, Maintenance(formatter)

I / Readability (harder to inspecta larger model, mental map)

I / Validation (harder to seemodel errors)

I / Visualization of dynamics:Simulation

Christian Motika Light-Weight Synthesis of Ptolemy Diagrams with KIELER 7 / 17

Foundations & ConceptDemo

Case Study Results

MotivationContributionOverview

Graphical Modeling vs. Textual ModelingI Emerging trend: Textual Modeling

I Concrete syntax is textI , Rapid Development (good

tooling support, e.g., Xtext)

I , Handling (model diffs,version control, toolinterchange)

I , Readability, Maintenance(formatter)

I / Readability (harder to inspecta larger model, mental map)

I / Validation (harder to seemodel errors)

I / Visualization of dynamics:Simulation

Christian Motika Light-Weight Synthesis of Ptolemy Diagrams with KIELER 7 / 17

Foundations & ConceptDemo

Case Study Results

MotivationContributionOverview

Graphical Modeling vs. Textual ModelingI Emerging trend: Textual Modeling

I Concrete syntax is textI , Rapid Development (good

tooling support, e.g., Xtext)I , Handling (model diffs,

version control, toolinterchange)

I , Readability, Maintenance(formatter)

I / Readability (harder to inspecta larger model, mental map)

I / Validation (harder to seemodel errors)

I / Visualization of dynamics:Simulation

Christian Motika Light-Weight Synthesis of Ptolemy Diagrams with KIELER 7 / 17

Foundations & ConceptDemo

Case Study Results

MotivationContributionOverview

Graphical Modeling vs. Textual ModelingI Emerging trend: Textual Modeling

I Concrete syntax is textI , Rapid Development (good

tooling support, e.g., Xtext)I , Handling (model diffs,

version control, toolinterchange)

I , Readability, Maintenance(formatter)

I / Readability (harder to inspecta larger model, mental map)

I / Validation (harder to seemodel errors)

I / Visualization of dynamics:Simulation

Christian Motika Light-Weight Synthesis of Ptolemy Diagrams with KIELER 7 / 17

Foundations & ConceptDemo

Case Study Results

MotivationContributionOverview

Graphical Modeling vs. Textual ModelingI Emerging trend: Textual Modeling

I Concrete syntax is textI , Rapid Development (good

tooling support, e.g., Xtext)I , Handling (model diffs,

version control, toolinterchange)

I , Readability, Maintenance(formatter)

I / Readability (harder to inspecta larger model, mental map)

I / Validation (harder to seemodel errors)

I / Visualization of dynamics:Simulation

Christian Motika Light-Weight Synthesis of Ptolemy Diagrams with KIELER 7 / 17

Foundations & ConceptDemo

Case Study Results

MotivationContributionOverview

Graphical Modeling vs. Textual ModelingI Emerging trend: Textual Modeling

I Concrete syntax is textI , Rapid Development (good

tooling support, e.g., Xtext)I , Handling (model diffs,

version control, toolinterchange)

I , Readability, Maintenance(formatter)

I / Readability (harder to inspecta larger model, mental map)

I / Validation (harder to seemodel errors)

I / Visualization of dynamics:Simulation

Christian Motika Light-Weight Synthesis of Ptolemy Diagrams with KIELER 7 / 17

Foundations & ConceptDemo

Case Study Results

MotivationContributionOverview

Graphical Modeling vs. Textual ModelingI Emerging trend: Textual Modeling

I Concrete syntax is textI , Rapid Development (good

tooling support, e.g., Xtext)I , Handling (model diffs,

version control, toolinterchange)

I , Readability, Maintenance(formatter)

I / Readability (harder to inspecta larger model, mental map)

I / Validation (harder to seemodel errors)

I / Visualization of dynamics:Simulation

Christian Motika Light-Weight Synthesis of Ptolemy Diagrams with KIELER 7 / 17

Foundations & ConceptDemo

Case Study Results

MotivationContributionOverview

Contribution

I Get all benefits from graphical modeling

I Preserve all the benefits from textual modeling

I ⇒ Automatic synthesis of diagrams:KIELER Light-Weight Diagram (KLighD)

Christian Motika Light-Weight Synthesis of Ptolemy Diagrams with KIELER 8 / 17

Foundations & ConceptDemo

Case Study Results

MotivationContributionOverview

Contribution

I Get all benefits from graphical modeling

I Preserve all the benefits from textual modeling

I ⇒ Automatic synthesis of diagrams:KIELER Light-Weight Diagram (KLighD)

Christian Motika Light-Weight Synthesis of Ptolemy Diagrams with KIELER 8 / 17

Foundations & ConceptDemo

Case Study Results

MotivationContributionOverview

Contribution

I Get all benefits from graphical modeling

I Preserve all the benefits from textual modeling

I ⇒ Automatic synthesis of diagrams:KIELER Light-Weight Diagram (KLighD)

Christian Motika Light-Weight Synthesis of Ptolemy Diagrams with KIELER 8 / 17

Foundations & ConceptDemo

Case Study Results

MotivationContributionOverview

Overview

I Foundations & Concept

I Demo

I Case Study Results

Christian Motika Light-Weight Synthesis of Ptolemy Diagrams with KIELER 9 / 17

Foundations & ConceptDemo

Case Study Results

FunctionalityDetails

Synthesis of Diagrams

KLighDdiagrammodel

[C. Schneider et al., VL/HCC’13]

I Input: Model (dsl, xml, moml)

I Output: Configurable diagram

I Diagram options: E.g., show transition labelsI Layout options: E.g., direction or spacing

I Requirement: Automatic Layout (→ KIML)

Christian Motika Light-Weight Synthesis of Ptolemy Diagrams with KIELER 10 / 17

Foundations & ConceptDemo

Case Study Results

FunctionalityDetails

Synthesis of Diagrams

KLighDdiagrammodel

[C. Schneider et al., VL/HCC’13]

I Input: Model (dsl, xml, moml)

I Output: Configurable diagram

I Diagram options: E.g., show transition labelsI Layout options: E.g., direction or spacing

I Requirement: Automatic Layout (→ KIML)

Christian Motika Light-Weight Synthesis of Ptolemy Diagrams with KIELER 10 / 17

Foundations & ConceptDemo

Case Study Results

FunctionalityDetails

Synthesis of Diagrams

KLighDdiagrammodel

[C. Schneider et al., VL/HCC’13]

I Input: Model (dsl, xml, moml)

I Output: Configurable diagram

I Diagram options: E.g., show transition labels

I Layout options: E.g., direction or spacing

I Requirement: Automatic Layout (→ KIML)

Christian Motika Light-Weight Synthesis of Ptolemy Diagrams with KIELER 10 / 17

Foundations & ConceptDemo

Case Study Results

FunctionalityDetails

Synthesis of Diagrams

KLighDdiagrammodel

[C. Schneider et al., VL/HCC’13]

I Input: Model (dsl, xml, moml)

I Output: Configurable diagram

I Diagram options: E.g., show transition labelsI Layout options: E.g., direction or spacing

I Requirement: Automatic Layout (→ KIML)

Christian Motika Light-Weight Synthesis of Ptolemy Diagrams with KIELER 10 / 17

Foundations & ConceptDemo

Case Study Results

FunctionalityDetails

Synthesis of Diagrams

KLighDdiagrammodel

[C. Schneider et al., VL/HCC’13]

I Input: Model (dsl, xml, moml)

I Output: Configurable diagram

I Diagram options: E.g., show transition labelsI Layout options: E.g., direction or spacing

I Requirement: Automatic Layout (→ KIML)

Christian Motika Light-Weight Synthesis of Ptolemy Diagrams with KIELER 10 / 17

Foundations & ConceptDemo

Case Study Results

FunctionalityDetails

KLighD Architecture

KIML

KLighD

transformation A transformation B transformation ...

diagrammodelKGraph &

KRenderingdata

KGraph,KRendering &layout data

KGraph,KRendering &layout data

[C. Schneider et al., VL/HCC’13]

Christian Motika Light-Weight Synthesis of Ptolemy Diagrams with KIELER 11 / 17

Foundations & ConceptDemo

Case Study Results

KLighD Demo

Christian Motika Light-Weight Synthesis of Ptolemy Diagrams with KIELER 12 / 17

Foundations & ConceptDemo

Case Study Results

Ptolemy Case StudyKIELER Case Study

Ptolemy Case Study: Model Browsing

I , Readability (normalized diagrams with fixed layout settings, configurable settings)

I , Hierarchy (no new windows, inner and outer ports)

I , Large models (Focus&Context, collapse & expand)

I , Complex models (filter details, e.g., transition labels)

I , Maintenance / Handling (create/edit the model in Vergil, generate it, use a textual DSL, ...)

I , Light-Weight (no editing, no transactions → just transient views)

Christian Motika Light-Weight Synthesis of Ptolemy Diagrams with KIELER 13 / 17

Foundations & ConceptDemo

Case Study Results

Ptolemy Case StudyKIELER Case Study

Ptolemy Case Study: Model Browsing

I , Readability (normalized diagrams with fixed layout settings, configurable settings)

I , Hierarchy (no new windows, inner and outer ports)

I , Large models (Focus&Context, collapse & expand)

I , Complex models (filter details, e.g., transition labels)

I , Maintenance / Handling (create/edit the model in Vergil, generate it, use a textual DSL, ...)

I , Light-Weight (no editing, no transactions → just transient views)

Christian Motika Light-Weight Synthesis of Ptolemy Diagrams with KIELER 13 / 17

Foundations & ConceptDemo

Case Study Results

Ptolemy Case StudyKIELER Case Study

Ptolemy Case Study: Model Browsing

I , Readability (normalized diagrams with fixed layout settings, configurable settings)

I , Hierarchy (no new windows, inner and outer ports)

I , Large models (Focus&Context, collapse & expand)

I , Complex models (filter details, e.g., transition labels)

I , Maintenance / Handling (create/edit the model in Vergil, generate it, use a textual DSL, ...)

I , Light-Weight (no editing, no transactions → just transient views)

Christian Motika Light-Weight Synthesis of Ptolemy Diagrams with KIELER 13 / 17

Foundations & ConceptDemo

Case Study Results

Ptolemy Case StudyKIELER Case Study

Ptolemy Case Study: Model Browsing

I , Readability (normalized diagrams with fixed layout settings, configurable settings)

I , Hierarchy (no new windows, inner and outer ports)

I , Large models (Focus&Context, collapse & expand)

I , Complex models (filter details, e.g., transition labels)

I , Maintenance / Handling (create/edit the model in Vergil, generate it, use a textual DSL, ...)

I , Light-Weight (no editing, no transactions → just transient views)

Christian Motika Light-Weight Synthesis of Ptolemy Diagrams with KIELER 13 / 17

Foundations & ConceptDemo

Case Study Results

Ptolemy Case StudyKIELER Case Study

Ptolemy Case Study: Model Browsing

I , Readability (normalized diagrams with fixed layout settings, configurable settings)

I , Hierarchy (no new windows, inner and outer ports)

I , Large models (Focus&Context, collapse & expand)

I , Complex models (filter details, e.g., transition labels)

I , Maintenance / Handling (create/edit the model in Vergil, generate it, use a textual DSL, ...)

I , Light-Weight (no editing, no transactions → just transient views)

Christian Motika Light-Weight Synthesis of Ptolemy Diagrams with KIELER 13 / 17

Foundations & ConceptDemo

Case Study Results

Ptolemy Case StudyKIELER Case Study

Ptolemy Case Study: Model Browsing

I , Readability (normalized diagrams with fixed layout settings, configurable settings)

I , Hierarchy (no new windows, inner and outer ports)

I , Large models (Focus&Context, collapse & expand)

I , Complex models (filter details, e.g., transition labels)

I , Maintenance / Handling (create/edit the model in Vergil, generate it, use a textual DSL, ...)

I , Light-Weight (no editing, no transactions → just transient views)

Christian Motika Light-Weight Synthesis of Ptolemy Diagrams with KIELER 13 / 17

Foundations & ConceptDemo

Case Study Results

Ptolemy Case StudyKIELER Case Study

Model Editing & Simulation

Christian Motika Light-Weight Synthesis of Ptolemy Diagrams with KIELER 14 / 17

Foundations & ConceptDemo

Case Study Results

Ptolemy Case StudyKIELER Case Study

Model Editing & Simulation

Christian Motika Light-Weight Synthesis of Ptolemy Diagrams with KIELER 14 / 17

Foundations & ConceptDemo

Case Study Results

Summary and OutlookThe End

Summary and Outlook

I Models are created once but read many times

I Large and complex, hierarchical models are hard to read andmaintain

I Automatic light-weight diagrams

I help browsing/readingI and maintaining models

I Models can be textual or graphical

Christian Motika Light-Weight Synthesis of Ptolemy Diagrams with KIELER 15 / 17

Foundations & ConceptDemo

Case Study Results

Summary and OutlookThe End

Summary and Outlook

I Models are created once but read many times

I Large and complex, hierarchical models are hard to read andmaintain

I Automatic light-weight diagrams

I help browsing/readingI and maintaining models

I Models can be textual or graphical

Christian Motika Light-Weight Synthesis of Ptolemy Diagrams with KIELER 15 / 17

Foundations & ConceptDemo

Case Study Results

Summary and OutlookThe End

Summary and Outlook

I Models are created once but read many times

I Large and complex, hierarchical models are hard to read andmaintain

I Automatic light-weight diagrams

I help browsing/readingI and maintaining models

I Models can be textual or graphical

Christian Motika Light-Weight Synthesis of Ptolemy Diagrams with KIELER 15 / 17

Foundations & ConceptDemo

Case Study Results

Summary and OutlookThe End

To Go FurtherKLAUSKE, L. K., SCHULZE, C. D., SPONEMANN, M., AND VON HANXLEDEN, R.

Improved layout for data flow diagrams with port constraints.In Proceedings of the 7th International Conference on the Theory and Application of Diagrams(DIAGRAMS’12) (2012), vol. 7352 of LNAI, Springer, pp. 65–79.

SCHNEIDER, C., SPONEMANN, M., AND VON HANXLEDEN, R.

Just model! – Putting automatic synthesis of node-link-diagrams into practice.In Proceedings of the IEEE Symposium on Visual Languages and Human-Centric Computing (VL/HCC’13)(San Jose, CA, USA, 15–19 Sept. 2013).With accompanying poster.

SUGIYAMA, K., TAGAWA, S., AND TODA, M.

Methods for visual understanding of hierarchical system structures.IEEE Transactions on Systems, Man and Cybernetics 11, 2 (Feb. 1981), 109–125.

UNI KIEL, REAL-TIME AND EMBEDDED SYSTEMS GROUP.

KIELER webpage.http://www.informatik.uni-kiel.de/en/rtsys/kieler/.

VON HANXLEDEN, R., LEE, E. A., MOTIKA, C., AND FUHRMANN, H.

Multi-view modeling and pragmatics in 2020 — position paper on designing complex cyber-physical systems.

In Proceedings of the 17th International Monterey Workshop on Development, Operation and Managementof Large-Scale Complex IT Systems, LNCS (Oxford, UK, Dec. 2012), vol. 7539.

Christian Motika Light-Weight Synthesis of Ptolemy Diagrams with KIELER 16 / 17

Foundations & ConceptDemo

Case Study Results

Summary and OutlookThe End

Thank you for your attention andparticipation!

Any questions or suggestions?

[5] [3] [1] [2] [4]

Christian Motika Light-Weight Synthesis of Ptolemy Diagrams with KIELER 17 / 17

Ptolemy Case Study: Model Browsing

Christian Motika Light-Weight Synthesis of Ptolemy Diagrams with KIELER 18 / 17

Ptolemy Case Study: Model Browsing (cont’d)

Christian Motika Light-Weight Synthesis of Ptolemy Diagrams with KIELER 19 / 17

General Data Structure Visualization

KXPosition

absolute : EFloat

relative : EFloat

KYPosition

absolute : EFloat

relative : EFloat

KPosition

KContainerRendering

KGridPlacement

numColumns : EInt

KAreaPlacementData

KLeftPosition

KTopPosition

KBottomPosition

KPointPlacementData

horizontalAlignment : HorizontalAlignment

verticalAlignment : VerticalAlignment

horizontalMargin : EFloat

verticalMargin : EFloat

minWidth : EFloat

minHeight : EFloat

Christian Motika Light-Weight Synthesis of Ptolemy Diagrams with KIELER 20 / 17

KLighDning - Collaborative Browser-Based Viewer

Christian Motika Light-Weight Synthesis of Ptolemy Diagrams with KIELER 21 / 17