Skip to main content
Jump to: navigation, search

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

(Display the relations between the instructions)
(Create a Sirius project and a first diagram definition)
Line 43: Line 43:
 
* Create a '''Viewpoint Specification Project''' named <code>fr.obeo.dsl.tuto.mindstorms.design</code>
 
* Create a '''Viewpoint Specification Project''' named <code>fr.obeo.dsl.tuto.mindstorms.design</code>
 
** '''Viewpoint Specification Model name''': <code>mindstorms.odesign</code>
 
** '''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)

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