Add text on attribute editor.

doc/overview.rst

@@ -10,11 +10,13 @@ When first opening the user interface at http://localhost:8124/atompm (or a remo
 
 .. image:: img/first_login_screen.png
     :scale: 50
+    :align: center
 
 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*.
 
 .. image:: img/create_new_account.png
     :scale: 50
+    :align: center
 
 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.
 
@@ -25,6 +27,7 @@ When logged in, the AToMPM user interface is initialized with four button toolba
 
 .. image:: img/user_interface.png
     :scale: 50
+    :align: center
 
 The user interface of AToMPM consists of three areas, which are explained in more details in the next sections. First is the *toolbar area* (also termed the *dock*), which contains the button and formalism toolbars. Second is the *canvas area* which displays the elements of the current model. Finally, there is the *console*, which may also appear in a separate window.
 
@@ -37,6 +40,7 @@ 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 toolbars are loaded by default, explained below.
 
 .. image:: img/main_toolbar.png
+    :align: center
     
 #. Launch a new AToMPM user interface in a new tab.
 #. (Re-)open a button or formalism toolbar.
@@ -57,6 +61,7 @@ All button toolbar models can be found under the */Toolbars/* user folder. A but
 Most of these actions are intuitive. Others are explained in more detail in the next sections.
     
 .. image:: img/compilation_toolbar.png
+    :align: center
     
 #. Compile the current model (conforming to the *ConcreteSyntax* formalism) to a formalism toolbar.
 #. Compile the current model (conforming to the *SimpleClassDiagram* formalism) to a metamodel.
@@ -65,6 +70,7 @@ Most of these actions are intuitive. Others are explained in more detail in the
 More information on these buttons can be found in :ref:`creating-a-modelling-language` and :ref:`modelling-a-model-transformation`.
     
 .. image:: img/transformation_controller.png
+    :align: center
     
 #. Load a transformation.
 #. Run the currently loaded transformation until the end.
@@ -76,6 +82,7 @@ More information on these buttons can be found in :ref:`creating-a-modelling-lan
 More information on these buttons can be found in :ref:`executing-a-model-transformation`.
     
 .. image:: img/transformation_editor.png
+    :align: center
     
 #. Open a rule model.
 #. Open a transformation model.
@@ -94,6 +101,7 @@ Loading a formalism toolbar allows you to create elements on the canvas conformi
 As an example, we show the formalism toolbar of the *TrafficLight* language, which is used throughout the readme as an example.
 
 .. image:: img/trafficlight_toolbar.png
+    :align: center
 
 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 :ref:`using-a-modelling-language`.
 
@@ -129,12 +137,18 @@ When in the **DEFAULT** state,
 |                                 | display the attribute editor).                                              |
 +---------------------------------+-----------------------------------------------------------------------------+
 
-When in the **SOMETHING SELECTED** state (*i.e.*, when one or more entity is selected).
+The attribute editor is shown in the image below. In the editor, TAB changes focus to the next text entry. The ENTER key will accept the changes and close the editor window in most cases. However, pressing ENTER in a multi-line text area will produce a newline within the text.
+
+.. image:: img/attrib_editor.png
+    :class: inline-image
+    :align: center
 
-|something_selected|
 
-.. |something_selected| image:: img/something_selected.png
+When in the **SOMETHING SELECTED** state (*i.e.*, when one or more entity is selected).
+
+.. image:: img/something_selected.png
     :class: inline-image
+    :align: center
     
 
 .. rst-class:: table-with-borders
@@ -161,8 +175,9 @@ When in the **SOMETHING SELECTED** state (*i.e.*, when one or more entity is sel
 
 When in the **DRAGGING SELECTION** state (*i.e.*, when left-dragging one or more selected entity), |dragging_selection|
 
-.. |dragging_selection| image:: img/dragging_selection.png
+.. image:: img/dragging_selection.png
     :class: inline-image
+    :align: center
 
 .. rst-class:: table-with-borders
 
@@ -181,8 +196,9 @@ When in the **DRAGGING SELECTION** state (*i.e.*, when left-dragging one or more
 
 When in the **DRAWING EDGE** state (*i.e.*, when dragging to-be edge from source to target entities), |drawing_edge|
 
-.. |drawing_edge| image:: img/drawing_edge.png
+.. image:: img/drawing_edge.png
     :class: inline-image
+    :align: center
 
 .. rst-class:: table-with-borders
 
@@ -200,8 +216,9 @@ When in the **DRAWING EDGE** state (*i.e.*, when dragging to-be edge from source
 
 When in the **EDGE EDITING** state, |edge_editing|
 
-.. |edge_editing| image:: img/edge_editing.png
+.. image:: img/edge_editing.png
     :class: inline-image
+    :align: center
 
 .. rst-class:: table-with-borders
 
@@ -224,8 +241,9 @@ When in the **EDGE EDITING** state, |edge_editing|
 
 When in the **GEOMETRY EDITING** state, |geometry_editing|
 
-.. |geometry_editing| image:: img/geometry_editing.png
+.. image:: img/geometry_editing.png
     :class: inline-image
+    :align: center
 
 .. rst-class:: table-with-borders
 
@@ -256,6 +274,7 @@ Console
 The developer console (press F12 in Chrome/Firefox) contains many useful debugging messages. Especially when :ref:`executing-a-model-transformation`, the console contains useful information on which rules were executed and whether they failed or succeeded.
     
 .. image:: img/console.png
+    :align: center
 
 Collaboration
 ^^^^^^^^^^^^^