Extension of the GUI documentation (gazebosim#299)

* grouped images under tutorials directory, added extra screenshots, reworded some lines for clarity, removed the pre-release tag under the --version explanation

Author: gaileyleseman

garden/GUI_tutorial.md

@@ -17,44 +17,47 @@ gz sim shapes.sdf
 
 `gz sim` will run the latest version of Gazebo you have installed.
 You can check if you have more than one version of Gazebo installed by running `gz sim --versions`.
-For example, if you have Garden, Fortress and Dome installed, `--versions` might return:
+For example, if you have Garden (7.x.x), Fortress (6.x.x) and Edifice (5.x.x) installed, `--versions` might return:
 
 ```bash
-7.0.0~pre1
+7.0.0
 6.0.0
 5.0.0
 ```
 
 To ensure you're working with Garden, include the `--force-version` directive when starting up:
 
 ```bash
-gz sim --force-version 7.0.0~pre1 shapes.sdf
+gz sim --force-version 7.0.0 shapes.sdf
 ```
 
 ## GUI
 
 After running `shapes.sdf`, you should see the following screen:
 
-![shapes.sdf](img/shapes.png)
+![shapes.sdf](tutorials/gui/shapes.png)
 
 The interface consists of several sections:
 
-### The Toolbar
-
-The toolbar along the top of the GUI contains two buttons, a file menu button on the left (horizontal stripes), and a plugins button on the right (vertical ellipsis).
+### The Toolbars
 
+The toolbar along the top of the GUI contains two buttons, a file menu button (![menu button](tutorials/gui/menu_btn.png)) on the left, and a plugins button (![plugins button](tutorials/gui/plugins_btn.png)) on the right.
 The file menu button allows you to save the world to a file, save and load interface configurations and customize interface style settings.
 An interface configuration consists of the plugins you have loaded and the style settings in place.
 
-The top left toolbar hanging below the file menu button contains shape buttons (sphere, box, cylinder, capsule and ellipsoid) and transform control (first four buttons on the second row).
-To learn more about transform control, go to the "Transform Control" section of [Manipulating Models](manipulating_models) tutorial.
+![toolbars](tutorials/gui/toolbars.png)
+
+The top left toolbar hanging below the file menu button contains shape buttons (sphere, box, cylinder, capsule and ellipsoid) as well as lighting controls (point, directional and spot). 
 The shape buttons allow you to directly insert a box, sphere, cylinder capsule, or ellipsoid model into the world.
 Simply click on the shape you would like to insert, and place it into the world.
 The shape will automatically snap onto the ground plane, and its properties will show up on the Entity Tree plugin window.
 
-The following is what it looks like after inserting shapes:
+The following image shows the scene and the Entity Tree after adding three shapes (`box_0`, `sphere_0` and `capsule_0`):
+
+![shape insertion](tutorials/gui/shape_insertion.png)
 
-![shape insertion](img/shape_insertion.png)
+The first five buttons on the second row are for `Transform Control`. 
+To learn more about this plugin, go to the `Transform Control` section of [Manipulating Models](manipulating_models) tutorial.
 
 The plugins button lists all the available plugins.
 You can scroll down this list to see all the plugins that are available for your version of Gazebo.
@@ -68,14 +71,15 @@ At the top is the Component Inspector, followed by the Entity Tree.
 Everything in a simulation is considered an "entity."
 In `shapes.sdf`, the entities listed are the ground plane, each of the shape models, and the sun.
 
-Items in the list can be expanded to reveal their links, as well as corresponding visuals and collisions, and joints, if they exist.
+Entities in the Entity Tree can be expanded to reveal their links, as well as corresponding visuals and collisions, and joints, if they exist.
 
-You can select entities in the simulation by clicking on their names in the entity tree.
+You can select entities in the simulation by clicking on their names in the Entity Tree (or by clicking directly on the entity in the scene).
 You can also hold `Ctrl` and click to select multiple.
 
-![Selecting multiple entities from the entity tree](img/entity_select.png)
+![Selecting multiple entities from the entity tree](tutorials/gui/entity_select.png)
 
-You can also right-click on any plugin to open basic `Settings` or to `Close`.
+You can right-click on any plugin to open basic `Settings` or to `Close`.
+You can (re)open plugins through the plugin menu. 
 
 ### The Scene
 
@@ -95,23 +99,25 @@ Currently, you can navigate the scene with a mouse in several ways:
 * **Right-click and drag**: zoom in and out
 * **Scroll wheel forward/backward**: zoom in and out
 * **Scroll wheel click and drag**: rotate the scene
+  * Or use **Shift key + left-click and drag**
 
 More complex methods for interacting with the entities within a scene will be explained in-depth in the coming tutorials.
 
 #### Grid Config
 
-The grid visible in the scene can be adjusted by a plugin.
+The grid visibility in the scene can be adjusted by a plugin.
 You can adjust features of the world's grid, including cell size, grid position, cell count, and even color.
 
-Open the Grid Config plugin by selecting it from the plugins button from the toolbar and selecting it from the dropdown list (below the Entity tree, use the scrollbar if your screen did not display it).
+Open the Grid Config plugin by selecting it from the plugins button from the toolbar and selecting it from the dropdown list. 
+The plugin will now show up in the right panel (below the Entity Tree, scroll down if your screen did not display it).
 
-![Select Grid Config](img/grid_config.png)
+![Select Grid Config](tutorials/gui/grid_config.png)
 
 #### World Control
 
 Along the bottom edge of the scene, you'll notice several buttons:
 
-![Playback buttons](img/playback.png)
+![Playback buttons](tutorials/gui/playback.png)
 
 From left to right, the options are `Play`, `Steps` and `RTF` (real time factor).
 
@@ -121,8 +127,12 @@ You can use the same button to pause the simulation as well.
 The `Steps` button allows you to step through the simulation at the rate of a step size, or simulation iteration.
 You can customize step size by hovering over the button.
 
+![hover steps](tutorials/gui/hover_steps.png)
+
 At the furthest right end of the scene, you can expand `RTF` to see not only the percentage value that compares real time with sim time, but also those individual values themselves, as well as iteration count.
 
+![RTF expanded](tutorials/gui/rtf_expanded.png)
+
 The function of the World Control options will become clearer once you begin manipulating entities.
 
 ## Next Up