Updated user interface documentation

material_maker/doc/nodes_common.rst

@@ -24,18 +24,20 @@ connected to several node inputs. Each node output (and input) can be:
 
 * a **3D signed distance function** (shown in red)
 
+* a **3D texture** (shown in fuchia)
+
 Greyscale, color and RGBA inputs and outputs can be connected to each other and will automatically be
 converted when required.
 
 2D signed distance functions have a specific preview that shows the associated signed distance
-field. They can be converted into greyscale images using the `sdShow node`.
+field. They can be converted into greyscale images using the `sdShow` node.
 
-3D signed distance functions have a specific preview that shows the lit 3Dscene. They can be
-converted into a greyscale height map and a color normal map using the `Render node`.
+3D signed distance functions have a specific preview that shows the lit 3D scene. They can be
+converted into a greyscale height map and a color normal map using the `Render` node.
 
-Next to the output, an (open or closed) eye icon indicates that a preview is available. Clicking
-on it will show the preview at the bottom of the node. When a node has several outputs, only
-one of them can be previewed at a time.
+Clicking on an output slot it will show the corresponding preview at the bottom of the node.
+When a node has several outputs, only one of them can be previewed at a time. The previewed
+output slot will has a circle around it, and clicking it again will hide the preview.
 
 Inputs
 ^^^^^^

material_maker/doc/user_interface.rst

@@ -4,22 +4,30 @@ User interface
 Overview
 --------
 
-Material Maker mainly consists of 3 panes:
+Material Maker mainly consists of 5 panes:
 
-* The top left pane is the library, that contains all available nodes that can be used
+* The Project pane (located in the center) contains the graph editors where materials are
+  described for current projects
+
+* The Library pane (by default in the top left corner) contains all available nodes that can be used
   to create materials. Library items are shown in a tree view
 
-* The bottom left pane is the preview, that shows at the same time the current material
-  applied to a sample mesh in a sample environment, and the texture generated by the
+* The Hierarchy pane (by default in the bottom left corner) shows the hierarchy of node groups
+  of the current material graph
+
+* The 2D preview pane (by default in the top right corner) shows the first texture generated by the
   currently selected node
 
-* The right pane contains the graph editors where materials are described for current
-  projects
+* The 3D preview pane (by default in the bottom right corner) shows the current material
+  applied to a sample mesh in a sample environment
+
+The 4 panes on the sides of the user interface can be moved around by dragging their title to their
+desired location and hidden using the **View -> Panes**
 
 First steps with the user interface
 -----------------------------------
 
-When opening Material Maker, a new empty project is created and shown in the right pane.
+When opening Material Maker, a new empty project is created and shown in the center pane.
 An empty project simply consists of a material node where textures for all elements of
 the material should be connected.
 
@@ -30,15 +38,20 @@ item, a preview or a simple description will be displayed while dragging.
 .. image:: images/create_node.gif
   :align: center
 
-Selecting this new node (by clicking on it) shows it in the preview pane. The very small
-2d preview of the preview pane can be maximized by double clicking on it. This will hide
-the 3d preview but is useful when working on the different textures of the material.
+An alternate method to create a node is to show the library menu using the space bar
+in the Project pane, and select a node from the list. The library menu will also be
+shown when connecting a node output into an empty space in the graph (in this case,
+the newly created node will be connected automatically).
+
+.. image:: images/create_node_menu.gif
+  :align: center
+
+Selecting this new node (by clicking on it) shows it in the 2D preview pane.
 
 To connect a node output to an input of another node, simply drag one to the other.
 For example we can drag the first output of the Bricks node to the albedo input of
 the Materials node. This will automatically assign the simple Bricks texture to the
-albedo element of the material, and the 3d preview will immediately be updated (if
-you maximized the 2d preview it can be minimized by double-clicking on it again).
+albedo element of the material, and the 3D preview will immediately be updated.
 
 Nodes can also be disconnected by dragging a connected input away from its node.
 
@@ -90,7 +103,8 @@ Material navigation
 .. |graph_up_button| image:: images/graph_up_button.png
 
 In the top right corner of the graph pane, the graph navigation button
-|graph_navigation_button| can be used to show a tree view of the material.
+|graph_navigation_button| can be used to show a tree view of the
+material (this is only useful when the Hierarchy pane is not visible).
 Double clicking on an item in this tree will show it in the graph view.
 
 When a subgraph is shown in the graph pane, additional items are visible in
@@ -117,10 +131,20 @@ or group of nodes can easily be shared using this format.
 The contents of the clipboard can be pasted into a graph using the **Edit -> Paste**
 menu or the **Control+V** keyboard shortcut.
 
+Selected items can also be duplicated using the **Edit -> Duplicate**
+menu or the **Control+D** keyboard shortcut. This operation does not affect
+the clipboard.
+
+Background 2D preview
+^^^^^^^^^^^^^^^^^^^^^
+
+The bottom left "bricks" button can be used to show a 2D preview in the background
+of the graph view. 
+
 Background 3D preview
 ^^^^^^^^^^^^^^^^^^^^^
 
-The bottom left ("cube") button can be used to show a 3D preview in the background
+The bottom left "cube" button can be used to show a 3D preview in the background
 of the graph view. The blue/red arrows icon is used to rotate the object or the view,
 and other controls are similar to the 3D preview.
 
@@ -139,15 +163,20 @@ give focus to the search field using the **Control+F** keyboard shortcut.
 .. image:: images/library_filter.gif
   :align: center
 
-Preview pane
-------------
+Hierarchy pane
+--------------
 
-The preview pane has tabs for a 2D preview and the 3D preview.
+The hierarchy pane shows the hierarchy of groups of the current material graph.
+It shows the name as well as a preview of a number of outputs (for 0 to 3),
+that can be configured by right clicking on the pane.
 
-2D preview
-^^^^^^^^^^
+Double clicking on a group in the hierarchy shows the contents of the corresponding group
+in the Graph pane.
 
-The 2D preview shows a tiled preview of the first output of the selected
+2D Preview pane
+---------------
+
+The 2D preview pane shows a tiled preview of the first output of the selected
 node. The animated dashed lines show the bounds of the texture, so it is
 easy to check that the texture wraps correctly.
 
@@ -157,8 +186,8 @@ easy to check that the texture wraps correctly.
 Depending on the selected node, controls can be shown and they can me moved
 around to modify the associated parameters.
 
-3D preview
-^^^^^^^^^^
+3D Preview pane
+---------------
 
 The 3D preview pane shows a 3D preview of the current material.
 
@@ -184,10 +213,11 @@ forward or backward).
 Main menu
 ---------
 
-The main menu is organized in 4 sections:
+The main menu bar is organized in 5 menus:
 
 * the *File* menu contains actions to create, load, save and export materials
 * the *Edit* menu has common edit actions cut, copy and paste
+* the *View* menu contains actions to customize the graphial user interface
 * the *Tools* menu has actions to add items to the user library
 * the *Help* menu can be used to find more information and submit feedback about the software
 
@@ -239,6 +269,8 @@ View menu
 
 * *Reset zoom* Resets the zoom level of the current material graph view
 
+* the *Panes* submenu can be used to show or hide all side panes
+
 Tools menu
 ^^^^^^^^^^