Sirius/Tutorials/Mindstorms/VisualizationTool

Visualization Tool

Objectives

Create a basic Diagram to display the instructions of a Mindstorms choreography.

• Nodes
  • Grab actions
  • Release actions
  • GoForward actions
  • Rotate actions
• Edges
  • Link between an instruction and its next instruction

Sirius concepts

During this step, you will mainly use these Sirius concepts: During this step, you will mainly use these Sirius concepts:

• Viewpoint Specification Project
  • The Eclipse project that defines a Sirius modeling tool
  • Contains a odesign file that describes the representations and Java services used by the tool
• Viewpoint
  • A viewpoint defines Sirius representations (diagrams, tables, matrices, trees) dedicated to a specific need
• Diagram Description
  • Describes a kind of graphical representation for your model
  • It defines which elements to display on the diagram, how (style) and the tools to edit them
• Node
  • Describes model elements displayed via an image or a simple shape
  • It defines how to find the model elements to display
  • It defines a graphical style (shape, label, color, …)
• Relation Based Edge
  • Describes the relation between two objects
  • The relation can be computed
  • It defines graphical style (color, line style, size, routing style, …)

Video

Watch the video (22'02)

Detailed script

Create a Sirius project and a first diagram definition

• Select the Sirius perspective (button on the top right)
• Create a Viewpoint Specification Project named fr.obeo.dsl.tuto.mindstorms.design
  • Viewpoint Specification Model name: mindstorms.odesign
• Import the Archive File icons-designer.zip into this project

Note: all the next actions have to be performed in the .odesign file (except the creation of Java services)

• Update the Viewpoint created by default (MyViewpoint)
  • Id = Mindstorms
  • Model File Extension = mindstorms

• In this viewpoint, create a Representation of type Diagram Description
  • Id = Choreography Diagram
  • Domain Class = mindstorms::Choreography
  • Reference the mindstorms metamodel
    • in metamodels tab, add the http://www.obeo.fr/dsl/mindstorms/1.0.0 package from the registry (enter *mindstorms in the selection field)

Note: from now, if you save the .odesign file, you should be able to create a blank Choreography Diagram on the sample model:

• Open the sample project and activate the Mindstorms viewpoint (right-click on the project + menu Viewpoint Selection)
• Create a diagram (right-click on the root Choreography in the Model Explorer and select New representation) : this diagram is still empty because we didn’t define its structure yet

 

• Your environment should look like this:
  • Split the editors zone to display both the mindstorms.odesign file and the newly created Choreography Diagram (drag to the right the diagram’s tab title)

Display each kind of instruction with a dedicated icon

• In the Default Layer, create a Diagram Element of type Node that displays the Grab instructions of the current choreography
  • Id = CD_Grab
  • Domain class = mindstorms::Grab
  • Semantic Candidate Expression = feature:instructions

• • Create a Style of type Workspace Image for this Node
    • Image Path = Grab.svg (prefixed by its path)
    • In the Label tab : Show Icon = false
    • Remove the value of Label Expression
    • Label Position = border

• Copy & Paste CD_Grab to create a Node that displays Release instructions
  • Change these values on the Node:
    • Id = CD_Release
    • Domain class = mindstorms::Release
  • Change these values on the Workspace Image
    • Image Path = Release.svg (prefixed by its path)

• Copy & Paste CD_Grab to create a Node that displays GoForward instructions
  • Change these values on the Node:
    • Id = CD_GoForward
    • Domain class = mindstorms::GoForward
  • Change these values on the Workspace Image
    • Image Path = GoForward.svg (prefixed by its path)
    • Label Expression = aql:self.cm+' cm'

• Copy & Paste CD_Grab to create a Node that displays Rotate instructions
  • Change these values on the Node:
    • Id = CD_RotateLeft
    • Domain class = mindstorms::Rotate
    • In the Advanced tab : Precondition Expression = aql:self.degrees>=0
  • Change these values on the Workspace Image
    • Image Path = Rotate_Left.svg (prefixed by its path)
    • Label Expression = aql:if self.random then '?' else self.degrees+'°' endif

• Create a Style Customizations section on the Default Layer and add a Style Customization to display a specific image for Rotate to right instructions
  • Predicate Expression = aql:self.degrees<0
  • Add a Property Customization (by expression)
    • Applied On = Rotate_Left.svg
    • Property Name = workspacePath
    • Value Expression = /fr.obeo.dsl.tuto.mindstorms.design/icons/Rotate_Right.svg

• Copy & Paste CD_Grab to create a Node that displays Choreography instructions
  • Change these values on the Node:
    • Id = CD_SubChoreography
    • Domain class = mindstorms::Choreography
  • Change these values on the Workspace Image
    • Image Path = Choreography.svg (prefixed by its path)
    • Label Expression = feature:name

• The diagram on the sample model should look like this:
  • click on the Arrange All button if necessary (the first one on the left in the tabbar)

Display the relations between the instructions

• Define a service that computes the next instruction of a given instruction.
  • To be able to write Java code that references the Mindstorms concepts, declare the EMF implementation of the metamodel in the project
    • Edit the META-INF/MANIFEST.MF file
    • In the Dependencies tab, add fr.obeo.dsl.tuto.mindstorms to the Required Plugins
  • Copy the source code of the Method named getNextInstruction from the file methods.txt into the class Services.java (in the src folder)

 

• In the Default layer, create a Relation Based Edge that displays the links between an Instruction and its next Instruction
  • Id = CD_Next
  • Source mapping = CD_GoForward, CD_Grab, CD_Release, CD_RotateLeft, CD_RotateRight, CD_Choreography
  • Target mapping = CD_GoForward, CD_Grab, CD_Release, CD_RotateLeft, CD_RotateRight, CD_Choreography
  • Target Finder Expression = service:getNextInstruction()
• In the Diagram Definition, Create a Composite Layout to force linked objects to be displayed from left to right (Direction = Left to Right)

• The diagram on the sample model should look like this:

Installing the solution

The solution of this step is provided in solution2.zip.

Warning: If you delete your current design project and load the solution, you should close the sample project and reopen it, in order the new version to be taken into account