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.
Difference between revisions of "Sirius/Tutorials/Mindstorms/EdtionTools"
(→Sirius concepts) |
|||
Line 1: | Line 1: | ||
Coming soon... | Coming soon... | ||
− | ==Sirius concepts== | + | =Container and edition tools= |
+ | |||
+ | ==Objectives== | ||
+ | Enhance a basic Diagram to display the sub-choreographies with a container showing the sub-instructions and provide tools to allow the user to create new instructions and sub-diagrams. | ||
+ | * Container | ||
+ | ** Sub-choregraphies with the list of their sub-instructions | ||
+ | * Double-click Tool | ||
+ | ** Create/Open a diagram by double-clicking on a Choreography | ||
+ | * Creation Tools | ||
+ | ** A button for each kind of instruction | ||
+ | ** Two buttons for Rotate (left and right) | ||
+ | |||
+ | [[File:Mindstorms-4-1.png]] | ||
+ | |||
+ | == Sirius concepts== | ||
+ | During this step, you will mainly use these Sirius concepts: | ||
+ | * '''Container''' | ||
+ | ** Describes model elements displayed via a box which can show sub-elements | ||
+ | * '''Color Palette''' | ||
+ | ** Defines custom colors | ||
* '''Section''' | * '''Section''' | ||
** Describes a category of tools in the palette | ** Describes a category of tools in the palette | ||
Line 10: | Line 29: | ||
* '''Double-click Tool''' | * '''Double-click Tool''' | ||
** Describes the action to perform when the user double-clicks on a diagram element | ** Describes the action to perform when the user double-clicks on a diagram element | ||
+ | |||
+ | |||
+ | ==Video== | ||
+ | Watch the [https://youtu.be/MlRdRsLic_k video] (18'25) | ||
+ | |||
+ | [[File:MindstormsVideo4.png]] | ||
+ | |||
+ | |||
+ | ==Detailed script== | ||
+ | |||
+ | ===Use a container to display the sub-choreographies with their instructions=== | ||
+ | * In the Default Layer, delete the Node CD_SubChoreography and replace it by a Container that will display the Choreography with its sub-instructions | ||
+ | |||
+ | ** Id = CD_SubChoreography | ||
+ | ** Domain Class = mindstorms::Choreography | ||
+ | ** Semantic Candidate Expression = feature:instructions | ||
+ | ** Children Presentation = List | ||
+ | |||
+ | ** Create a Style of type Gradient | ||
+ | *** Label Format = Bold | ||
+ | |||
+ | * Add this container to the Source and Target mappings of the edge CD_Next | ||
+ | |||
+ | '''Note''': To display the sub-instructions, we will use a unique sub-node and compute the label with a service written in Java | ||
+ | |||
+ | * Define a service that computes the label of any kind of instruction. | ||
+ | ** Copy the source code of the Method named getLabel from the file methods-tuto1.txt into the class Services.java | ||
+ | |||
+ | * In CD_SubChoreography, Create a Sub Node named CD_SubInstruction | ||
+ | ** Domain class = mindstorms::Instruction | ||
+ | ** Semantic Candidate Expression = feature:instructions | ||
+ | ** Define a default Style (any kind of style with a label, for example Square) | ||
+ | *** Show Icon = true | ||
+ | *** Label Expression = service:getLabel() | ||
+ | |||
+ | * Now, the diagram on the sample model should look like this: | ||
+ | |||
+ | [[File:Mindstorms-4-2.png]] | ||
+ | |||
+ | |||
+ | * Define a specific color for the container’s background | ||
+ | ** Create a Users Colors Palette | ||
+ | *** Add a User Fixed Color named MindstormsColor1 | ||
+ | * Red = 186 | ||
+ | * Green = 223 | ||
+ | * Blue = 225 | ||
+ | ** Update the style of the CD_SubChoreography container | ||
+ | *** Background Color = MindstormsColor1 | ||
+ | *** ForegroundColor = MindstormsColor1 | ||
+ | |||
+ | ===Add creation tools=== | ||
+ | * In the Default layer, create a Section to provide a palette for the creation of objects | ||
+ | |||
+ | * In this section, create a Node Creation tool to create instances of Grab | ||
+ | ** Id = Grab | ||
+ | ** Node Mapping = CD_Grab | ||
+ | ** To also allow the users to create a Grab directly into a sub-choreography add CD_SubChoreography in the Extra Mappings property | ||
+ | ** Under the Begin node, create an Operation of type Change Context in order to define on which object the next operations will be executed | ||
+ | *** Browse Expression = var:container (this is the current Choreography) | ||
+ | ** Add an Operation of type Create Instance | ||
+ | *** Reference Name = instructions | ||
+ | *** Type Name = mindstorms::Grab | ||
+ | |||
+ | * Copy/Paste and adapt the previous Node Creation tool for the other kinds of Action: | ||
+ | ** Release | ||
+ | ** GoForward | ||
+ | *** After the creation of the instance, add a Set: | ||
+ | * Feature Name = cm | ||
+ | * Value Expression = 50 | ||
+ | ** Rotate to Left | ||
+ | *** After the creation of the instance, add a Set: | ||
+ | * Feature Name = degrees | ||
+ | * Value Expression = 90 | ||
+ | ** Rotate to Right | ||
+ | *** Icon Path = Rotate_Right_16px.png (prefixed with its path) | ||
+ | *** After the creation of the instance, add a Set: | ||
+ | * Feature Name = degrees | ||
+ | * Value Expression = -90 | ||
+ | |||
+ | * To also provide a button in the palette that allows the user to create Choreographies, create a Container Creation tool and proceed like the Node Creation tools created previously | ||
+ | ** After the creation of the instance, add a Set: | ||
+ | *** Feature Name = name | ||
+ | *** Value Expression = NewChoreography | ||
+ | |||
+ | * Now, you should see some buttons in the palette that create new instructions within the current choreography: | ||
+ | |||
+ | [[File:Mindstorms-4-3.png]] | ||
+ | |||
+ | |||
+ | ===Add a navigation tool=== | ||
+ | * In the previous Section, create a Double-Click tool to navigate from a Choreography to its own diagram | ||
+ | ** Mapping = CD_SubChoreography | ||
+ | ** After the Begin, create a Navigation to Choreography Diagram | ||
+ | *** Create if not Existent = true | ||
+ | * Close the diagram and reopen it: now, by double-clicking on the header of the container C1, a dialog box opens to create a new diagram: | ||
+ | |||
+ | [[File:Mindstorms-4-4.png]] | ||
+ | |||
+ | If you click on 'Ok', Sirius opens a new diagram: | ||
+ | |||
+ | [[File:Mindstorms-4-5.png]] | ||
+ | |||
+ | |||
+ | |||
+ | ==Installing the solution== | ||
+ | |||
+ | The solution of this step is provided in '''solution4.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:50, 13 September 2018
Coming soon...
Contents
Container and edition tools
Objectives
Enhance a basic Diagram to display the sub-choreographies with a container showing the sub-instructions and provide tools to allow the user to create new instructions and sub-diagrams.
- Container
- Sub-choregraphies with the list of their sub-instructions
- Double-click Tool
- Create/Open a diagram by double-clicking on a Choreography
- Creation Tools
- A button for each kind of instruction
- Two buttons for Rotate (left and right)
Sirius concepts
During this step, you will mainly use these Sirius concepts:
- Container
- Describes model elements displayed via a box which can show sub-elements
- Color Palette
- Defines custom colors
- Section
- Describes a category of tools in the palette
- Node Creation Tool
- Describes the tool in the palette that allows the user to create a new node
- Container Creation Tool
- Describes the tool in the palette that allows the user to create a new container
- Double-click Tool
- Describes the action to perform when the user double-clicks on a diagram element
Video
Watch the video (18'25)
Detailed script
Use a container to display the sub-choreographies with their instructions
- In the Default Layer, delete the Node CD_SubChoreography and replace it by a Container that will display the Choreography with its sub-instructions
- Id = CD_SubChoreography
- Domain Class = mindstorms::Choreography
- Semantic Candidate Expression = feature:instructions
- Children Presentation = List
- Create a Style of type Gradient
- Label Format = Bold
- Create a Style of type Gradient
- Add this container to the Source and Target mappings of the edge CD_Next
Note: To display the sub-instructions, we will use a unique sub-node and compute the label with a service written in Java
- Define a service that computes the label of any kind of instruction.
- Copy the source code of the Method named getLabel from the file methods-tuto1.txt into the class Services.java
- In CD_SubChoreography, Create a Sub Node named CD_SubInstruction
- Domain class = mindstorms::Instruction
- Semantic Candidate Expression = feature:instructions
- Define a default Style (any kind of style with a label, for example Square)
- Show Icon = true
- Label Expression = service:getLabel()
- Now, the diagram on the sample model should look like this:
- Define a specific color for the container’s background
- Create a Users Colors Palette
- Add a User Fixed Color named MindstormsColor1
- Create a Users Colors Palette
- Red = 186
- Green = 223
- Blue = 225
- Update the style of the CD_SubChoreography container
- Background Color = MindstormsColor1
- ForegroundColor = MindstormsColor1
- Update the style of the CD_SubChoreography container
Add creation tools
- In the Default layer, create a Section to provide a palette for the creation of objects
- In this section, create a Node Creation tool to create instances of Grab
- Id = Grab
- Node Mapping = CD_Grab
- To also allow the users to create a Grab directly into a sub-choreography add CD_SubChoreography in the Extra Mappings property
- Under the Begin node, create an Operation of type Change Context in order to define on which object the next operations will be executed
- Browse Expression = var:container (this is the current Choreography)
- Add an Operation of type Create Instance
- Reference Name = instructions
- Type Name = mindstorms::Grab
- Copy/Paste and adapt the previous Node Creation tool for the other kinds of Action:
- Release
- GoForward
- After the creation of the instance, add a Set:
- Feature Name = cm
- Value Expression = 50
- Rotate to Left
- After the creation of the instance, add a Set:
- Rotate to Left
- Feature Name = degrees
- Value Expression = 90
- Rotate to Right
- Icon Path = Rotate_Right_16px.png (prefixed with its path)
- After the creation of the instance, add a Set:
- Rotate to Right
- Feature Name = degrees
- Value Expression = -90
- To also provide a button in the palette that allows the user to create Choreographies, create a Container Creation tool and proceed like the Node Creation tools created previously
- After the creation of the instance, add a Set:
- Feature Name = name
- Value Expression = NewChoreography
- After the creation of the instance, add a Set:
- Now, you should see some buttons in the palette that create new instructions within the current choreography:
- In the previous Section, create a Double-Click tool to navigate from a Choreography to its own diagram
- Mapping = CD_SubChoreography
- After the Begin, create a Navigation to Choreography Diagram
- Create if not Existent = true
- Close the diagram and reopen it: now, by double-clicking on the header of the container C1, a dialog box opens to create a new diagram:
If you click on 'Ok', Sirius opens a new diagram:
Installing the solution
The solution of this step is provided in solution4.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