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"

(Display the relations between the instructions)
(Installing the solution)
Line 144: Line 144:
  
 
==Installing the solution==
 
==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 

Revision as of 09:39, 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)

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 

Back to the top