MLAB-6489: recreated screenshots with margin; added an example how the GUI would look without margin

Author: okonrad

mevislab.github.io/content/tutorials/basicmechanisms/macromodules/guidesign.md

@@ -81,10 +81,6 @@ In the *Parameters* section, you can define *fields* of your macro module. These
 ### Module Panel Layout
 To create your own user interface, we need to create a {{< docuLinks "/Resources/Documentation/Publish/SDK/MDLReference/index.html#mdl_Window" "Window" >}}. A window is one of the layout elements that exist in MDL. These layout elements are called {{< docuLinks "/Resources/Documentation/Publish/SDK/MDLReference/index.html#Controls" "controls" >}}. The curled brackets define the window section, in which you can define properties of the window and insert further controls like a {{< docuLinks "/Resources/Documentation/Publish/SDK/MDLReference/index.html#mdl_Box" "Box" >}}.
 
-{{<alert class="info" caption="Info">}}
-We use *Category* as the top-level layouter in the *Window* to give the inner content a small margin. Otherwise, the controls touch the border of the window and look unappealing.
-{{</alert>}}
-
 Initially, we call the window *MyWindowTitle*, which can be used to reference this window.
 
 Double-clicking {{< mousebutton "left" >}} on your module now opens your first self-developed user interface.
@@ -118,6 +114,12 @@ Window MyWindowName {
 
 ![Module panel](images/tutorials/basicmechanics/ModulePanel.png "Module panel")
 
+{{<alert class="info" caption="Info">}}
+We use *Category* as the top-level layouter in the *Window* to give the inner content a small margin. Otherwise, the controls touch the border of the window and look unappealing.
+{{</alert>}}
+
+![Module panel without margin](images/tutorials/basicmechanics/ModulePanel_noMargin.png "Module panel without margin")
+
 You can define different properties of your control. For a window, you can, for example, define a title, or whether the
 window should be shown in full screen (*fullscreen = Yes*).
 

mevislab.github.io/content/tutorials/summary/summary3.md

@@ -70,15 +70,17 @@ Window {
 ```
 {{</highlight>}}
 
-{{<alert class="info" caption="Info">}}
-We use *Category* as the top-level layouter in the *Window* to give the inner content a small margin. Otherwise, the controls touch the border of the window and look unappealing.{{</alert>}}
-
 You can preview your initial layout in MeVisLab by double-clicking your module {{< mousebutton "left" >}}.
 
 ![Initial window layout](images/tutorials/summary/Example3_1.png "Initial window layout")
 
 You can see the four vertical aligned parts as defined in the *.script* file. Now, we are going to add the content of the boxes.
 
+{{<alert class="info" caption="Info">}}
+We use *Category* as the top-level layouter in the *Window* to give the inner content a small margin. Otherwise, the controls touch the border of the window and look unappealing.{{</alert>}}
+
+![Initial window layout without margin](images/tutorials/summary/Example3_1_noMargin.png "Initial window layout without margin")
+
 {{<alert class="info" caption="Additional Info">}}
 An overview over the existing layout elements in MeVisLab Definition Language (MDL) can be found {{< docuLinks "/Resources/Documentation/Publish/SDK/MDLReference/index.html#N11695" "here" >}}
 {{</alert>}}