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)
(Display the relations between the instructions)
 
(11 intermediate revisions by 2 users not shown)
Line 2: Line 2:
  
 
==Objectives==
 
==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.
+
Create a basic Diagram to display the instructions of a Mindstorms choreography.
 
* Nodes  
 
* Nodes  
 
** '''Grab''' actions
 
** '''Grab''' actions
Line 36: Line 36:
 
Watch the [https://youtu.be/hOU62wf3bYs video] (22'02)
 
Watch the [https://youtu.be/hOU62wf3bYs video] (22'02)
  
[[File:MindstormsVideo3.png]]
+
[[File:MindstormsVideo3.png|link=https://youtu.be/hOU62wf3bYs]]
  
 
==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 [https://www.eclipse.org/sirius/resources/mindstorms-tutorial/icons-designer.zip 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_Rotate</code>
*** Domain class = mindstorms::Rotate
+
*** '''Domain class''' = <code>mindstorms::Rotate</code>
*** In the Advanced tab : Precondition Expression = aql:self.degrees>=0
+
** Change these values on the '''Workspace Image'''
** Change these values on the Workspace Image
+
*** '''Image Path''' = <code>Rotate_Left.svg</code> (prefixed by its path)
*** Image Path = Rotate_Left.svg (prefixed by its path)
+
*** '''Label Expression''' = <code>aql:if self.random then '?' else self.degrees+'°' endif</code>
*** 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
+
* 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]]
 +
 
 
===Display the relations between the instructions===
 
===Display the relations between the instructions===
 
* 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 [https://www.eclipse.org/sirius/resources/mindstorms-tutorial/methods.txt 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_Rotate, 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_Rotate, 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:
 +
 +
[[File:Mindstorms-3-1.png]]
  
 
==Installing the solution==
 
==Installing the solution==
 +
 +
The solution of this step is provided in [https://www.eclipse.org/sirius/resources/mindstorms-tutorial/solution2.zip 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 

Latest revision as of 10:28, 17 September 2018

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

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_Rotate
      • Domain class = mindstorms::Rotate
    • 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_Rotate, CD_Choreography
    • Target mapping = CD_GoForward, CD_Grab, CD_Release, CD_Rotate, 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 

Back to the top