changed field styles (#136)

* changed field styles

* Updates after review

* additional review comments corrected

* another change

* next

---------

Co-authored-by: Heckmann <sascha.heckmann@mevis.de>

Author: sahehb

mevislab.github.io/content/examples/basic_mechanisms/contour_filter/index.md

@@ -11,7 +11,7 @@ This example shows how to create a contour filter.
 Images are loaded via `ImageLoad` module and visualized unchanged in a `View2D` module *View2D1*.
 Additionally, the images are modified by a local macro module `Filter` and shown in another `View2D` viewer *View2D*.
 
-In order to display the same slice (unchanged and changed), the module `SyncFloat` is used to synchronize the field value *startSlice* in both viewers. The `SyncFloat` module duplicates the value *Float1* to the field *Float2* if it differs by *Epsilon*.
+In order to display the same slice (unchanged and changed), the module `SyncFloat` is used to synchronize the field value <field>startSlice</field> in both viewers. The `SyncFloat` module duplicates the value <field>Float1</field> to the field <field>Float2</field> if it differs by <field>Epsilon</field>.
 
 ![Screenshot](examples/basic_mechanisms/contour_filter/image.png)
 

mevislab.github.io/content/examples/basic_mechanisms/macro_modules_and_module_interaction/example1/index.md

@@ -10,7 +10,7 @@ This example contains an entire package structure. Inside, you can find the exam
 ## Summary
 A new macro module `Filter` has been created. Initially, macro modules do not provide an own panel containing user interface elements such as buttons. The *Automatic Panel* is shown on double-clicking the module providing the name of the module.
 
-In this example we update the *.script* file of the `Filter` module to display the kernel selection field of the `Convolution` module within its network. 
+In this example we update the *.script* file of the `Filter` module to display the <field>Kernel</field> field of the `Convolution` module within its network. 
 
 {{<alert class="info" caption="Info">}}
 Changes applied to fields in the macro module's panel are applied to their internal network as well.

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

@@ -49,11 +49,11 @@ Another option for Python is [pydicom](https://pydicom.github.io/).
 {{</alert>}}
 
 ## Orthogonal Views
-The module `OrthoView2D` provides a 2D view displaying the input image in three orthogonal viewing directions. By default, the view is configured as *Cube* where the transverse view is placed in the top right segment, sagittal in bottom left, and coronal in bottom right segment. Use the left mouse button to set a position in the data set. This position will be displayed in all available views and is available as field *worldPosition*. 
+The module `OrthoView2D` provides a 2D view displaying the input image in three orthogonal viewing directions. By default, the view is configured as *Cube* where the transverse view is placed in the top right segment, sagittal in bottom left, and coronal in bottom right segment. Use the left mouse button to set a position in the data set. This position will be displayed in all available views and is available as field <field>worldPosition</field>. 
 
 ![OrthoView2D](images/tutorials/basicmechanics/OrthoView2D.png "OrthoView2D")
 
-As already learned in the previous example [1.1: MeVisLab Coordinate Systems](tutorials/basicmechanisms/coordinatesystems/coordinatesystems), world and voxel positions are based on different coordinate systems. Selecting the top left corner of any of your views will not show a world position of (0, 0, 0). You can move the mouse cursor to the voxel position (0, 0, 0) as seen in the image information of the viewers in brackets *(x, y, z)*. The field *worldPosition* then shows the location of the image in world coordinate system (see `Info` module).
+As already learned in the previous example [1.1: MeVisLab Coordinate Systems](tutorials/basicmechanisms/coordinatesystems/coordinatesystems), world and voxel positions are based on different coordinate systems. Selecting the top left corner of any of your views will not show a world position of *(0, 0, 0)*. You can move the mouse cursor to the voxel position *(0, 0, 0)* as seen in the image information of the viewers in brackets *(x, y, z)*. The field <field>worldPosition</field> then shows the location of the image in world coordinate system (see `Info` module).
 
 ![OrthoView2D Voxel- and World Position](images/tutorials/basicmechanics/OrthoView2D_WorldPosition.png "OrthoView2D Voxel- and World Position")
 

mevislab.github.io/content/tutorials/basicmechanisms/coordinatesystems/coordinatesystems2.md

@@ -98,7 +98,7 @@ Parameter Fields allow users to control the behavior of the internal network. Th
 You have two options when adding fields to your macro module:
 
 * **Define your own fields:** You can define your own fields by specifying their name, type, and default value in the *.script* file. This allows you to provide custom parameters for your macro module, tailored to your specific needs. These parameters can be use as input from the user or output from the modules processing.
-* **Reuse fields from the internal network:**  Instead of defining your own field, you can expose an existing field from one of the modules of your internal network. To do this, you reference the *internalName* of the internal field you want to reuse. This makes the internal field accessible at the macro module level, allowing users to interact with it directly without duplicating parameters. Changes of the field value are automatically applied in your internal network.
+* **Reuse fields from the internal network:**  Instead of defining your own field, you can expose an existing field from one of the modules of your internal network. To do this, you reference the <attribute>internalName</attribute> of the internal field you want to reuse. This makes the internal field accessible at the macro module level, allowing users to interact with it directly without duplicating parameters. Changes of the field value are automatically applied in your internal network.
 
 ![Inputs, Outputs, and Fields](images/tutorials/basicmechanics/fields.png "Inputs, Outputs, and Fields")
 

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

@@ -34,7 +34,7 @@ More information about GUI design in MeVisLab can be found {{< docuLinks "/Resou
 ### Creation of a Module Panel
 In [Example 2.2](tutorials/basicmechanisms/macromodules/globalmacromodules) we created the global macro module `Filter`. By now, this module does not have a proper panel. When double-clicking {{< mousebutton "left" >}} the module, the *Automatic Panel* is shown.
 
-The *Automatic Panel* contains fields, as well as module inputs and outputs. In this case, no fields exists except the *instanceName*. Accordingly, there is no possibility to interact with the module. Only the input and the output of the module are given.
+The *Automatic Panel* contains fields, as well as module inputs and outputs. In this case, no fields exists except the <field>instanceName</field>. Accordingly, there is no possibility to interact with the module. Only the input and the output of the module are given.
 
 ![Automatic Panel](images/tutorials/basicmechanics/GUI_10.png "Automatic Panel")
 
@@ -65,7 +65,7 @@ Interface {
 {{</highlight>}}
 
 ##### Module Inputs and Outputs
-To create an input/output, you need to define a *Field* in the respective input/output section. Each input/output gets a name (here *input0/output0*) that you can use to reference this field. The module input maps to an input of the internal network. You need to define this mapping. In this case, the input of the macro module `Filter` maps to the input of the module `Convolution` of the internal network (*internalName = Convolution.input0*). Similarly, you need to define which output of the internal network maps to the output of the macro module `Filter`. In this example, the output of the internal module `Arithmethic2` maps to the output of our macro module `Filter` (*internalName = Arithmetic2.output0*).
+To create an input/output, you need to define a *Field* in the respective input/output section. Each input/output gets a name (here <field>input0</field>/<field>output0</field>) that you can use to reference this field. The module input maps to an input of the internal network. You need to define this mapping. In this case, the input of the macro module `Filter` maps to the input of the module `Convolution` of the internal network (<inlineCode>internalName = Convolution.input0</inlineCode>). Similarly, you need to define which output of the internal network maps to the output of the macro module `Filter`. In this example, the output of the internal module `Arithmethic2` maps to the output of our macro module `Filter` (<inlineCode>internalName = Arithmetic2.output0</inlineCode>).
 
 Creating an input/output causes:
 1. Input/output connectors are added to the module.
@@ -76,7 +76,7 @@ Creating an input/output causes:
 ![Internal Network of your macro module](images/tutorials/basicmechanics/BM_23.png "Internal Network of your macro module")
 
 ##### Module Fields
-In the *Parameters* section, you can define *fields* of your macro module. These fields may map to existing fields of the internal network (*internalName = ...* ), but they do not need to and can also be completely new. You can reference these fields when creating a panel, to allow interactions with these fields. All fields appear in the *Automatic Panel*.
+In the *Parameters* section, you can define *fields* of your macro module. These fields may map to existing fields of the internal network (<attribute>internalName</attribute> = ...), but they do not need to and can also be completely new. You can reference these fields when creating a panel, to allow interactions with these fields. All fields appear in the *Automatic Panel*.
 
 ### 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" >}}.
@@ -186,19 +186,13 @@ You can add the module `GUIExample` to your workspace and play around with is.
 {{</alert>}}
 
 #### Access to Existing Fields of the Internal Network
-To interact with fields of the internal network in your user interface, we
-need to access these fields. To access the field of the internal module
-`Convolution`, which defines the kernel, we need to use the internal
-network name. To find the internal field name, open the internal network of the macro module `Filter` (click on the module using the middle mouse button {{< mousebutton "middle" >}}).
+To interact with fields of the internal network in your user interface, we need to access these fields. To access the field of the internal module `Convolution`, which defines the *Kernel*, we need to use the internal network name. To find the internal field name, open the internal network of the macro module `Filter` (click on the module using the middle mouse button {{< mousebutton "middle" >}}).
 
-Then, open the panel of the module `Convolution` and right-click {{< mousebutton "right" >}} the field title *Use* of the box *Predefined Kernel* and select *Copy Name*. You now copied the internal network name of the field to your clipboard. The name is made up of *ModuleName.FieldName*, in this case *Convolution.predefKernel*.
+Then, open the panel of the module `Convolution` and right-click {{< mousebutton "right" >}} the field title *Use* of the box *Predefined Kernel* and select *Copy Name*. You now copied the internal network name of the field to your clipboard. The name is made up of *ModuleName.FieldName*, in this case <field>Convolution.predefKernel</field>.
 
 ![Convolution Module](images/tutorials/basicmechanics/Convolution.png "Convolution Module")
 
-In the panel of the module `Convolution`, you can change this variable *Kernel* via a drop-down menu. In
-MDL, a drop-down menu is called a {{< docuLinks "/Resources/Documentation/Publish/SDK/MDLReference/index.html#mdl_ComboBox" "ComboBox" >}}. We can take over the field *predefKernel*, its drop-down menu and all its properties by
-creating a new field in our panel and reference to the internal
-field *Convolution.predefKernel*, which already exist in the internal network.
+In the panel of the module `Convolution`, you can change this variable *Kernel* via a drop-down menu. In MDL, a drop-down menu is called a {{< docuLinks "/Resources/Documentation/Publish/SDK/MDLReference/index.html#mdl_ComboBox" "ComboBox" >}}. We can take over the field <field>predefKernel</field>, its drop-down menu and all its properties by creating a new field in our panel and reference to the internal field <field>Convolution.predefKernel</field>, which already exist in the internal network.
 
 Changes of the properties of this field can be done in the curled brackets using tags (here, we changed the title).
 
@@ -220,7 +214,7 @@ Window MyWindowName {
 
 ![Selecting the kernel](images/tutorials/basicmechanics/SelectingKernel.png "Selecting the kernel")
 
-As an alternative, you can define the field *kernel* in the *Parameters* section, and reference the defined field by its name. The result in the panel is the same. You can see a difference in the automatic panel. All fields that are defined in the interface in the *Parameters* section appear in the automatic panel. Fields of the internal network, which are used but not declared in the section *Parameters* of the module interface, do not appear in the automatic panel.
+As an alternative, you can define the field <field>kernel</field> in the *Parameters* section, and reference the defined field by its name. The result in the panel is the same. You can see a difference in the automatic panel. All fields that are defined in the interface in the *Parameters* section appear in the automatic panel. Fields of the internal network, which are used but not declared in the section *Parameters* of the module interface, do not appear in the automatic panel.
 
 {{< highlight filename="Filter.script" >}}
 ```Stan
@@ -272,7 +266,7 @@ Window MyWindowName {
 ```
 {{</highlight>}}
 
-The *wakeupCommand* defines a Python function that is executed as soon as the Window is opened. The Button *command* is executed when the user clicks on the Button.
+The *wakeupCommand* defines a Python function that is executed as soon as the Window is opened. The Button *command* is executed when the user clicks {{< mousebutton "left" >}} on the Button.
 
 Both commands reference a Python function that is executed whenever both actions (open the Window or click the Button) are executed.
 

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

@@ -37,13 +37,7 @@ We will start by creating a help file using the built-in text editor {{< docuLin
 
 ![Edit module help file via MATE](images/tutorials/basicmechanics/GUI_07.png "Edit module help file via MATE")
 
-When creating the help file of a module, all important information of the
-module down to the field specifications are extracted and created automatically. Thus, the
-basic module information is always available in the module
-help. Additional documentation should be added by the module's author. On the left
-side, you can find the outline of the help file. Each section can be
-edited. In this example, we added the purpose of the module
-to the help file.
+When creating the help file of a module, all important information of the module down to the field specifications are extracted and created automatically. Thus, the basic module information is always available in the module help. Additional documentation should be added by the module's author. On the left side, you can find the outline of the help file. Each section can be edited. In this example, we added the purpose of the module to the help file.
 
 ![Edit module help file via MATE](images/tutorials/basicmechanics/GUI_08.png "Edit module help file via MATE")
 
@@ -69,7 +63,7 @@ Depending on the way the macro module was created, more or less features are aut
 {{</alert>}}
 
 ### Creation of an Example Network
-To add an example network to your module, you need to add a reference to the respective *.mlab* file to the module definition file (*.def*). Open the file *Filter.def*. You can find the line *exampleNetwork     = "$(LOCAL)/networks/FilterExample.mlab"*, which defines the reference to the *.mlab* file containing the example network. By default, the name of the example network is *ModulenameExample.mlab*. An *.mlab* file containing only the module *Filter* is created inside the folder *networks*.
+To add an example network to your module, you need to add a reference to the respective *.mlab* file to the module definition file (*.def*). Open the file *Filter.def*. You can find the line *exampleNetwork     = "$(LOCAL)/networks/FilterExample.mlab"*, which defines the reference to the *.mlab* file containing the example network. By default, the name of the example network is *ModulenameExample.mlab*. An *.mlab* file containing only the module `Filter` is created inside the folder *networks*.
 
 It is possible that the reference to the example network or the file *FilterExample.mlab* is missing. One reason could be that its creation was not selected when creating the macro module. In this case, add the reference and the file manually.