• Slides (French): CoursKermeta.pdf
• Electronic resources:
  • The lecture resources
  • The GraphTransformation case study

• Remarks:
  • Code and lectures are built upon Kermeta 1.3.0, bundled in the Titan OpenEmbeDD release.
  • No computer were injured during the implementation of this lab session. Yes, really. Surprised?

In this lab session, we'll transform Turtles choreographies into real pictures. From a Turtle representation of a drawing, we'll produce the associated SVG file, viewable in a web browser. The lab session is then divided in four parts:

1. Enhancing existing meta-models by using Kermeta Aspect & Java bindings mechanisms
2. Defining a model → text transformation (from a Figure to SVG code)
3. Defining a model → model transformation (from a Turtle to a Figure)
   • And the composite transformation Turtle → SVG
4. Build complex pictures (Polygons, Spyrographs & Fractal Tree) using Kermeta.

We consider in this lab session a very simple Cartesian figure meta-model. In this meta-model, a given Figure contains a set of Shapes. A Shape holds a position, and can be a simple Line, a Polyline (i.e, a line following several points) or a Text. A Figure defines its width and height, and its colours (background and foreground).

We'll assume you're working in a new Kermeta Project. The following archive kermeta_material.zip contains several resources associated to this lab session:

• Meta-models (to be dropped in the metamodel directory)
  • Turtle.ecore, an Ecore implementation of the Turtle meta-model
  • Figure.ecore (and its associated Figure.ecorediag diagram), an Ecore implementation of a very restricted figure meta-model.
• Models in a data directory (to be dropped in the model directory)
  • aSquare.xmi: a serialized figure model, representing a square
  • Mystery_figure.xmi: a serialized figure model, representing a nice drawing
  • Mystery_turtle.xmi: a serialized turtle model, representing the same drawing as above
  • Octogon_turtle.xmi: a serialized turtle model, representing an octagon
  • Violation.xmi: a serialized figure model, which is invalid regarding business constraints

1. Meta-model registration: (in a file metamodel/register.kmt)
   • Write a kermeta program to register the two meta-models in the EPackage registry
2. Turtle enhancement: (in a file src/helpers/EnhancedTurtle.kmt)
   • Add two persistence operation to the Stage concept:
     • operation load(file: String): Stage is do … end
     • operation save(file: String): Void is do … end
   • Remark: do not forget to add non-contained Farms in your resource to avoid DanglingRef troubles
3. Figure enhancement: (in a file src/helpers/EnhancedFigure.kmt)
   • Add an opposite reference in the Shape concept:
     • ⇒ now, A Shape knows its associated Figure as a fig reference.
   • Add two persistence operation to the Figure concept:
     • operation load(file: String): Figure is do … end
     • operation save(file: String): Void is do … end
   • Constrains the Shape concept:
     • The position of a Shape must be contained by the Figure
     • Remark: some entities use several Coordinates …
4. Java wrapper:
   • Create a Java Project named TrigoWrapper in your workspace
     • Add a reference to the Kermeta interpreter plugin
       • plugins/fr.irisa.triskell.kermeta.interpreter_1.3.0.jar
     • Define a Trigo class, and implement :
       • usual trigonometrical functions cos(α) & sin(α),
       • radians ↔ degrees converter (tip: rad = (π * deg) / 180)
   • In the Kermeta project, in a file named src/helpers/Trigo.kmt:
     • Write a class which implement cos(α) & sin(α) (α expressed in degrees)

The SVG standard allows one to define pictures as XML code. Here is an example¹⁾ of such a code:

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
                     "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
  <line x1="0" y1="0" x2="300" y2="300" style="stroke:rgb(99,99,99);stroke-width:2"/>
</svg>

• Model → Text transformation: (in a file src/transfo/Figure2SVG.kmt)
  • Implement an aspect to make a Figure transformable into SVG Code

Here is another example, based on the aSquare model.

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
          "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="200" height="200" version="1.1" 
     xmlns="http://www.w3.org/2000/svg" >
  <rect height="200" width="200" 
        style="fill:#D1D1D1;stroke-width:2; stroke:rgba(0,0,0,1)" />
  <text x="15.0" y="15.0" 
        style="fill: rgba(143,34,255,1);">A Simple Square</text>
  <line x1="50.0" y1="50.0" x2="150.0" y2="50.0" 
        style="stroke:rgba(0,0,0,1); stroke-width:2" />
  <line x1="150.0" y1="50.0" x2="150.0" y2="150.0" 
        style="stroke:rgba(255,255,153,1); stroke-width:2" />
  <line x1="150.0" y1="150.0" x2="50.0" y2="150.0" 
        style="stroke:rgba(0,0,0,1); stroke-width:2" />
  <line x1="50.0" y1="150.0" x2="50.0" y2="50.0" 
        style="stroke:rgba(0,0,0,1); stroke-width:2" />
</svg>

In this section, we'll transform a Turtle choreography into a Figure. In other words, it means to transform a Polar representation into a Cartesian coordinates representation.

In a file src/transfo/Turtle2Figure.kmt:

• Define an aspect to enhance the Turtle concept with this Cartesian concerns ((x,y) real coordinates, α angle)
• Implement an operation move(r: Real): Void is do … end which make the turtle walk
  • x' = x + r * cos(α)
  • y' = y - r * sin(α)
• Enhance the Stage concept (and the others …) to perform the Turtle → Figure transformation
  • Remarks:
    • First of all, you should place the turtles at their initial position (center, North)

• A turtle will draw a line only when its pen is down
• Do not forget to clone when dealing with attributes … (symptom of a forgotten clone: an existing value vanished, replaced by a void).

In a file src/transfo/Turtle2SVG.kmt:

• Implement a composite transformation which compose the two previously defined transformations.

Here is an execution (simplified) trace when drawing a simple square:

#### Drawing polygons ...
## -> drawPolygon(4,100) -> square.xmi
t.move(100.0): (x: 300.0, y: 300.0, theta: 90.0)   --> (x: 300.0, y: 200.0, theta: 90.0)
t.turn(90.0):  (x: 300.0, y: 200.0, theta: 90.0)   --> (x: 300.0, y: 200.0, theta: 0.0)
t.move(100.0): (x: 300.0, y: 200.0, theta: 0.0)    --> (x: 400.0, y: 200.0, theta: 0.0)
t.turn(90.0):  (x: 400.0, y: 200.0, theta: 0.0)    --> (x: 400.0, y: 200.0, theta: -90.0)
t.move(100.0): (x: 400.0, y: 200.0, theta: -90.0)  --> (x: 400.0, y: 300.0, theta: -90.0)
t.turn(90.0):  (x: 400.0, y: 300.0, theta: -90.0)  --> (x: 400.0, y: 300.0, theta: -180.0)
t.move(100.0): (x: 400.0, y: 300.0, theta: -180.0) --> (x: 300.0, y: 300.0, theta: -180.0)
t.turn(90.0):  (x: 300.0, y: 300.0, theta: -180.0) --> (x: 300.0, y: 300.0, theta: -270.0)
#### End of drawing polygon

In the following exercises, you'll define a program in turtle terms, and then use model transformation to produce the assocated SVG file.

1. Implement a Polygon class to draw polygons
   • drawPolygon(8,100,”octagon”) will produce a octagon.svg file containing an octagon of length 100px.
   • Compare it with your EMF implementation of the same problem …
2. Implement a Spirograph class to draw Spirographied polygons
   • i.e draw a given polygon, then rotate a little bit, and then redraw the polygon, rotate, … until you've made a complete circle.
3. Implement a Fractal class to draw fractals curves
   • e.g. a Fractal Tree, a Koch (fr) curve, snowflake, flowsnake, …
   • What about performances?