Skip to main content

Notice: this Wiki will be going read only early in 2024 and edits will no longer be possible. Please see: https://gitlab.eclipse.org/eclipsefdn/helpdesk/-/wikis/Wiki-shutdown-plan for the plan.

Jump to: navigation, search

Difference between revisions of "Sirius/Tutorials/Mindstorms/VisualizationTool"

(Create a Sirius project and a first diagram definition)
(Create a Sirius project and a first diagram definition)
Line 65: Line 65:
 
** 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)
 
** 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)
  
[[File:Mindstorms-3-2.png]]
+
[[File:Mindstorms-3-2.png|600px]]
  
 
===Display each kind of instruction with a dedicated icon===
 
===Display each kind of instruction with a dedicated icon===

Revision as of 09:35, 13 September 2018

Visualization Tool

Objectives

Create a basic Diagram to display the instructions of a Mindstorms choreography and provide tools to allow the user to create new instructions and sub-diagrams.

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

Mindstorms-3-1.png

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)

MindstormsVideo3.png

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 mindstorms 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)

Mindstorms-3-2.png

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 to left 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
  • Copy & Paste CD_RotateLeft to create a Node that displays Rotate to right instructions
    • Change these values on the Node:
      • Id = CD_RotateRight
      • Precondition Expression = aql:self.degrees<0
    • Change these values on the Workspace Image
      • Image Path = Rotate_Right.svg (prefixed by its path)
  • 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

Back to the top