Overview

This section presents an overview of AToMPM’s user interface: how to create an account, and the different parts of the user interface (toolbars, canvas, and console).

First Usage

When first opening the user interface at localhost:8124/atompm, the user is presented with a login screen.

_images/first_login_screen.png

Click the create one now link, which will allow you to create a new account with a user name and password. Fill out the form and click Create new account.

_images/create_new_account.png

AToMPM will initialize the account (by creating a user folder under the users/ folder) and switch to the main user interface view. When you revisit the AToMPM webpage or create a new AToMPM instance, the tool will remember your username and password and automatically log you in. You can log out by clicking the logout link at the top right of the user interface.

The AToMPM User Interface

When logged in, the AToMPM user interface is initialized with four button toolbars: MainMenu, CompileMenu, TransformationController, and TransformationEditor. They allow a langugage developer and a language user to perform most activities and are heavily used in the next sections of the documentation.

_images/user_interface.png

The user interface of AToMPM consists of three areas: the toolbar area, contained in the canvas area, and the console. To bring up the console, in Google Chrome press the F12 key. These areas are explained in more details in the next sections.

Toolbars

There are two types of toolbars that can be loaded: button toolbars consist of a number of buttons that each perform a certain action, while formalism toolbars allow to instantiate language elements. A new toolbar can be loaded using the (re)load a toolbar button of the MainMenu toolbar. Toolbar models that can be loaded either have the .buttons.model extension (for button toolbars) or the .metamodel extension (for formalism toolbars).

Button Toolbars

All button toolbar models can be found under the /Toolbars/ user folder. A button toolbar consists of a number of buttons that, when clicked, execute a particular action. Four button toolbar are loaded by default, explained below.

_images/main_toolbar.png
  1. Launch a new AToMPM user interface in a new tab.
  2. (Re-)open a button or formalism toolbar.
  3. Close an opened toolbar. If this is a formalism toolbar, the model elements conforming to that formalism are removed from the model.
  4. Create a new formalism under the /Formalisms/ user folder with the given name.
  5. Open a model.
  6. Insert the elements of a model into the currently opened model.
  7. Save current model.
  8. Save current model as...
  9. Undo the last performed action.
  10. Redo the last undone action.
  11. Copy the selected elements on canvas.
  12. Paste the copied elements on the canvas (copy/paste also works across AToMPM tabs).
  13. Verify whether the constraints of the current model are satisfied.
  14. Show or hide entities of a particular formalism (but do not remove them from the model).
  15. Open the manual.

Most of these actions are intuitive. Others are explained in more detail in the next sections.

_images/compilation_toolbar.png
  1. Compile the current model (conforming to the ConcreteSyntax formalism) to a formalism toolbar.
  2. Compile the current model (conforming to the SimpleClassDiagram formalism) to a metamodel.
  3. Compile a metamodel to a pattern metamodel (and associated formalism toolbar(s)), used in model transformation rules.

More information on these buttons can be found in Creating a Modelling Language and Modelling a Model Transformation.

_images/transformation_controller.png
  1. Load a transformation.
  2. Run the currently loaded transformation until the end.
  3. Execute one step of the currently loaded transformation.
  4. Pause the running transformation.
  5. Stop the running transformation.
  6. Enable debugging, which opens a debug window when the transformation is executed that shows the transformation schedule and highlights the currently executing step.

More information on these buttons can be found in Executing a Model Transformation.

_images/transformation_editor.png
  1. Open a rule model.
  2. Open a transformation model.
  3. Open a formalism toolbar of a pattern metamodel.
  4. Create a new transformation model, and open it in a new tab.
  5. Create a new rule model, and open it in a new tab.

More information on these buttons can be found in Modelling a Model Transformation.

Formalism Toolbars

Loading a formalism toolbar allows you to create elements on the canvas conforming to that formalism. Multiple formalism toolbars can be loaded, which allows a model to contain elements conforming to multiple formalisms.

As an example, we show the formalism toolbar of the TrafficLight language, which is used throughout the readme as an example.

_images/trafficlight_toolbar.png

Each button of a formalism toolbar corresponds to an icon in the concrete syntax definition of the formalism. Links are not shown. Clicking a button will select that particular type to be instantiated. Right-clicking on the canvas instantiates the icon on the canvas. More information on how to use a formalism toolbar to model can be found in Using a Modelling Language.

Canvas

Below is a list of various states the Canvas can be in along with lists of actions available in each state and their corresponding shortcut(s).

When in the DEFAULT state,

Action Shortcut(s)
Choose an entity type to create Left-click on desired type from a loaded formalism toolbar.
Create an entity Right-click anywhere on the canvas.
Select an entity Left-click any entity. This will also select the entity’s contents, if any. To select a container without selecting its contents, SHIFT-Left-click it. Enters the SOMETHING SELECTED state.
Select one or more entity Left-press anywhere on Canvas, drag selection box around desired entity or entities and release. Enters the SOMETHING SELECTED state.
Connect entities Right-press an entity (enters the DRAWING EDGE state), drag to-be edge to target entity and release.
Edit icon text SHIFT-Middle-click any text from any icon on the Canvas (this will display a very simple text editor).
Edit entity Middle-click or SHIFT-Left-click any entity on the Canvas (this will display the attribute editor).

When in the SOMETHING SELECTED state (i.e., when one or more entity is selected), something_selected

Action Shortcut(s)
Unselect selection Right-/Left-/Middle-click anywhere on the Canvas, or click ESC. Enters the DEFAULT state.
Move selection Left-press selection, drag preview overlay to desired position and release. Enters the DEFAULT state.
Delete selection Press DELETE. Enters the DEFAULT state.
Edit first entity in selection Click INSERT, or click COMMAND (this will display the attribute editor.
Change the geometry of the selection Click CTRL. Enters the GEOMETRY EDITING state.
Edit the selected edge Click SHIFT. Enters the EDGE EDITING state.
Snap selection to nearest grid point Click TAB. Enters the DEFAULT state.

When in the DRAGGING SELECTION state (i.e., when left-dragging one or more selected entity), dragging_selection

Action Shortcut(s)
Insert selection into container Left-release on top of the target entity. Enters the DEFAULT state.
Remove selection from container Left-release outside of current container. Containment relationships can also be deleted manually if visible. Enters the DEFAULT state.
Confirm motion Left-release on the Canvas. Enters the DEFAULT state.
Cancel motion Click ESC. Enters the DEFAULT state.

When in the DRAWING EDGE state (i.e., when dragging to-be edge from source to target entities), drawing_edge

Action Shortcut(s)
Make current line horizontal/vertical Click TAB.
Create control point Left-click anywhere, or click CTRL.
Delete last control point Middle-click anywhere, or click ALT.
Cancel current edge Left-release anywhere on the Canvas. Enters the DEFAULT state.

When in the EDGE EDITING state, edge_editing

Action Shortcut(s)
Move control point Left-press any control point, drag it to desired position and release.
Vertically/Horizontally align control point to previous control point Left-click any control point and click TAB.
Clone control point Right-click any control point.
Delete control point Middle-click any control point (extremities and the central control point cannot be removed).
Finish editing Right-/Left-/Middle-click anywhere on the Canvas, or click ESC. Enters the DEFAULT state.

When in the GEOMETRY EDITING state, geometry_editing

Action Shortcut(s)
Scale Mouse-wheel up/down on scale icon until preview overlay reaches desired shape.
Scale vertically only Mouse-wheel up/down on vertical scale icon until preview overlay reaches desired shape.
Scale horizontally only Mouse-wheel up/down on horizontal scale icon until preview overlay reaches desired shape.
Rotate Mouse-wheel up/down on rotation icon until preview overlay reaches desired shape.
Cancel changes Right-/Left-/Middle-click anywhere on the Canvas, or click ESC. Enters the DEFAULT state.
Confirm changes Left-click confirmation icon. Enters the DEFAULT state.

Console

The developer console (press F12 in Chrome/Firefox) contains many useful debugging messages. Especially when Executing a Model Transformation, the console contains useful information on which rules were executed and whether they failed or succeeded.

_images/console.png