Notice: This Wiki is now read only and edits are no longer possible. Please see: https://gitlab.eclipse.org/eclipsefdn/helpdesk/-/wikis/Wiki-shutdown-plan for the plan.
Sirius/Tutorials/Mindstorms/VisualizationTool
< Sirius | Tutorials | Mindstorms
Revision as of 09:35, 13 September 2018 by Unnamed Poltroon (Talk) (→Create a Sirius project and a first diagram definition)
Contents
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
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)
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)
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
- Create a Style of type Workspace Image for this Node
- 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)
- Change these values on the Node:
- 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'
- Change these values on the Node:
- 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
- Change these values on the Node:
- 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)
- Change these values on the Node:
- 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
- Change these values on the Node:
- 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
- To be able to write Java code that references the Mindstorms concepts, declare the EMF implementation of the metamodel in the project
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: