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"

(Video)
(Detailed script)
Line 40: Line 40:
 
==Detailed script==
 
==Detailed script==
 
===Create a Sirius project and a first diagram definition===
 
===Create a Sirius project and a first diagram definition===
* Select the Sirius perspective (button on the top right)
+
* Select the '''Sirius''' perspective (button on the top right)
* Create a Viewpoint Specification Project named fr.obeo.dsl.tuto.mindstorms.design
+
* Create a '''Viewpoint Specification Project''' named <code>fr.obeo.dsl.tuto.mindstorms.design</code>
** Viewpoint Specification Model name: mindstorms.odesign
+
** '''Viewpoint Specification Model name''': <code>mindstorms.odesign</code>
* Import the Archive File icons-designer.zip into this project
+
* 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)
+
'''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)
+
* Update the '''Viewpoint''' created by default (<code>MyViewpoint</code>)
** Id = Mindstorms
+
** '''Id''' = <code>Mindstorms</code>
** Model File Extension = mindstorms
+
** '''Model File Extension''' = <code>mindstorms</code>
  
* In this viewpoint, create a Representation of type Diagram Description  
+
* In this viewpoint, create a '''Representation''' of type '''Diagram Description'''
** Id = Choreography Diagram
+
** '''Id''' = <code>Choreography Diagram</code>
** Domain Class = mindstorms::Choreography
+
** '''Domain Class''' = <code>mindstorms::Choreography</code>
** Reference the mindstorms metamodel
+
** Reference the '''mindstorms''' metamodel
*** in metamodels tab, add the mindstorms package from the registry (enter *mindstorms in the selection field)
+
*** in '''metamodels''' tab, add the <code>http://www.obeo.fr/dsl/mindstorms/1.0.0</code> package from the registry (enter <code>*mindstorms</code> 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:
+
'''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)  
+
* 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
+
* 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:
 
* 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)
+
** 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|800px]]
 
[[File:Mindstorms-3-2.png|800px]]
  
 
===Display each kind of instruction with a dedicated icon===
 
===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
+
* In the '''Default Layer''', create a '''Diagram Element''' of type '''Node''' that displays the '''Grab''' instructions of the current choreography
** Id = CD_Grab  
+
** '''Id''' = <code>CD_Grab</code>
** Domain class = mindstorms::Grab
+
** '''Domain class''' = <code>mindstorms::Grab</code>
** Semantic Candidate Expression = feature:instructions
+
** '''Semantic Candidate Expression''' = <code>feature:instructions</code>
  
** Create a Style of type Workspace Image for this Node
+
** Create a '''Style''' of type '''Workspace Image''' for this '''Node'''
*** Image Path = Grab.svg (prefixed by its path)
+
*** '''Image Path''' = <code>Grab.svg</code> (prefixed by its path)
*** In the Label tab : Show Icon = false
+
*** In the '''Label''' tab : '''Show Icon''' = <code>false</code>
*** Remove the value of Label Expression
+
*** Remove the value of '''Label Expression'''
*** Label Position = border
+
*** '''Label Position''' = <code>border</code>
  
* Copy & Paste CD_Grab to create a Node that displays Release instructions
+
* Copy & Paste '''CD_Grab''' to create a '''Node''' that displays '''Release''' instructions
** Change these values on the Node:
+
** Change these values on the '''Node''':
*** Id = CD_Release
+
*** '''Id''' = <code>CD_Release</code>
*** Domain class = mindstorms::Release
+
*** '''Domain class''' = <code>mindstorms::Release</code>
** Change these values on the Workspace Image
+
** Change these values on the '''Workspace Image'''
*** Image Path = Release.svg (prefixed by its path)
+
*** '''Image Path''' = <code>Release.svg</code> (prefixed by its path)
  
* Copy & Paste CD_Grab to create a Node that displays GoForward instructions
+
* Copy & Paste '''CD_Grab''' to create a '''Node''' that displays '''GoForward''' instructions
** Change these values on the Node:
+
** Change these values on the '''Node''':
*** Id = CD_GoForward
+
*** '''Id''' = <code>CD_GoForward</code>
*** Domain class = mindstorms::GoForward
+
*** '''Domain class''' = <code>mindstorms::GoForward</code>
** Change these values on the Workspace Image
+
** Change these values on the '''Workspace Image'''
*** Image Path = GoForward.svg (prefixed by its path)
+
*** '''Image Path''' = <code>GoForward.svg</code> (prefixed by its path)
*** Label Expression = aql:self.cm+' cm'
+
*** '''Label Expression''' = <code>aql:self.cm+' cm'</code>
  
* Copy & Paste CD_Grab to create a Node that displays Rotate to left instructions
+
* Copy & Paste '''CD_Grab''' to create a '''Node''' that displays '''Rotate''' instructions
 
** Change these values on the Node:
 
** Change these values on the Node:
*** Id = CD_RotateLeft
+
*** '''Id''' = <code>CD_RotateLeft</code>
*** Domain class = mindstorms::Rotate
+
*** '''Domain class''' = <code>mindstorms::Rotate</code>
*** In the Advanced tab : Precondition Expression = aql:self.degrees>=0
+
*** In the '''Advanced tab''' : '''Precondition Expression''' = <code>aql:self.degrees>=0</code>
** Change these values on the Workspace Image
+
** Change these values on the '''Workspace Image'''
*** Image Path = Rotate_Left.svg (prefixed by its path)
+
*** '''Image Path''' = <code>Rotate_Left.svg</code> (prefixed by its path)
*** Label Expression = aql:if self.random then '?' else self.degrees+'°' endif
+
*** '''Label Expression''' = <code>aql:if self.random then '?' else self.degrees+'°' endif</code>
  
* Copy & Paste CD_RotateLeft to create a Node that displays Rotate to right instructions
+
* Create a '''Style Customizations''' section on the '''Default Layer''' and add a '''Style Customization''' to display a specific image for Rotate to right instructions
** Change these values on the Node:
+
** '''Predicate Expression''' = <code>aql:self.degrees<0</code>
*** Id = CD_RotateRight
+
** Add a '''Property Customization (by expression)'''
*** Precondition Expression = aql:self.degrees<0
+
*** '''Applied On''' = <code>Rotate_Left.svg</code>
** Change these values on the Workspace Image
+
*** '''Property Name''' = <code>workspacePath</code>
*** Image Path = Rotate_Right.svg (prefixed by its path)
+
*** '''Value Expression''' = <code>/fr.obeo.dsl.tuto.mindstorms.design/icons/Rotate_Right.svg</code>
  
* Copy & Paste CD_Grab to create a Node that displays Choreography instructions
+
* Copy & Paste '''CD_Grab''' to create a '''Node''' that displays '''Choreography''' instructions
 
** Change these values on the Node:
 
** Change these values on the Node:
*** Id = CD_SubChoreography
+
*** '''Id''' = <code>CD_SubChoreography</code>
*** Domain class = mindstorms::Choreography
+
*** '''Domain class''' = <code>mindstorms::Choreography</code>
** Change these values on the Workspace Image
+
** Change these values on the '''Workspace Image'''
*** Image Path = Choreography.svg (prefixed by its path)
+
*** '''Image Path''' = <code>Choreography.svg</code> (prefixed by its path)
*** Label Expression = feature:name
+
*** '''Label Expression''' = <code>feature:name</code>
  
 
* The diagram on the sample model should look like this:
 
* 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)
+
** click on the '''Arrange All''' button if necessary (the first one on the left in the tabbar)
  
 
[[File:Mindstorms-3-3.png]]
 
[[File:Mindstorms-3-3.png]]
Line 126: Line 126:
 
* Define a service that computes the next instruction of a given instruction.
 
* 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
 
** 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  
+
*** Edit the '''META-INF/MANIFEST.MF''' file  
*** In the Dependencies tab, add  fr.obeo.dsl.tuto.mindstorms to the Required Plugins
+
*** In the '''Dependencies''' tab, add  <code>fr.obeo.dsl.tuto.mindstorms</code> to the '''Required Plugins'''
** Copy the source code of the Method named getNextInstruction from the file  
+
** Copy the source code of the '''Method''' named '''getNextInstruction''' from the file '''methods.txt''' into the class '''Services.java''' (in the '''src''' folder)  
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
+
* In the '''Default layer''', create a '''Relation Based Edge''' that displays the links between an '''Instruction''' and its '''next''' Instruction
** Id = CD_Next
+
** '''Id''' = <code>CD_Next</code>
** Source mapping = CD_GoForward, CD_Grab, CD_Release, CD_RotateLeft, CD_RotateRight, CD_Choreography
+
** '''Source mapping''' = <code>CD_GoForward, CD_Grab, CD_Release, CD_RotateLeft, CD_RotateRight, CD_Choreography</code>
** Target mapping = CD_GoForward, CD_Grab, CD_Release, CD_RotateLeft, CD_RotateRight, CD_Choreography
+
** '''Target mapping''' = <code>CD_GoForward, CD_Grab, CD_Release, CD_RotateLeft, CD_RotateRight, CD_Choreography</code>
** Target Finder Expression = service:getNextInstruction()
+
** '''Target Finder Expression''' = <code>service:getNextInstruction()</code>
* In the Diagram Definition, Create a Composite Layout to force linked objects to be displayed from left to right (Direction = Left to Right
+
* In the '''Diagram Definition''', Create a '''Composite Layout''' to force linked objects to be displayed from left to right ('''Direction''' = <code>Left to Right</code>)
  
 
* The diagram on the sample model should look like this:
 
* The diagram on the sample model should look like this:

Revision as of 12:37, 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

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

Mindstorms-3-3.png

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:

Mindstorms-3-1.png

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 

Copyright © Eclipse Foundation, Inc. All Rights Reserved.