diff --git a/mevislab.github.io/content/examples/basic_mechanisms/soviewportregion.mlab b/mevislab.github.io/content/examples/basic_mechanisms/soviewportregion.mlab
new file mode 100644
index 000000000..73a5e05c1
--- /dev/null
+++ b/mevislab.github.io/content/examples/basic_mechanisms/soviewportregion.mlab
@@ -0,0 +1,654 @@
+// MDL v1 utf8
+mevislabVersion = 4.1.70.3216
+network {
+  watchlist = ""
+}
+module ImageLoad {
+  internal {
+    frame = "717 437 136 72"
+    moduleGroupName = ""
+    showNetworkPanel = true
+    windows {
+      window _default {
+        geometry = "723 387 473 366"
+        relativePosition = "0.0000 -0.1305"
+        sizeHint = "473 366"
+        wasOpen = no
+      }
+    }
+  }
+  fields {
+    instanceName = ImageLoad
+    filename = $(DemoDataPath)/MRI_Head.tif
+    autoLoad = TRUE
+    readRaw = FALSE
+    rawX = 1
+    rawY = 1
+    rawZ = 1
+    rawC = 1
+    rawT = 1
+    rawU = 1
+    dataTypeRaw = "unsigned int8"
+    planarConfig = Contiguous
+    byteOrder = LittleEndian
+    dataOffset = 0
+    pageSizeHint = "0 0 0 0 0 0"
+    suppressErrorLog = FALSE
+    dicomIgnoreHalfVoxelShift = FALSE
+    enableCheckSumTests = FALSE
+  }
+}
+module OrthoReformat3 {
+  internal {
+    frame = "725 341 120 56"
+    moduleGroupName = ""
+  }
+  fields {
+    instanceName = OrthoReformat3
+    useGlobalInputImage = TRUE
+    applyModifyPatientOrientationMatrix = FALSE
+    modifyPatientOrientationMatrix = "1 0 0 0
+0 1 0 0
+0 0 1 0
+0 0 0 1"
+  }
+}
+module View2D {
+  internal {
+    frame = "589 197 120 56"
+    moduleGroupName = ""
+    windows {
+      window _default {
+        geometry = "82 206 400 400"
+        relativePosition = "-0.3531 -0.3029"
+        sizeHint = "400 400"
+        wasOpen = no
+      }
+    }
+  }
+  fields {
+    instanceName = View2D
+    inventorInputOn = TRUE
+    inventorOutputOn = FALSE
+    view2DExtensionsOn = TRUE
+    startSlice = 40
+    numSlices = 1
+    numXSlices = 1
+    sliceStep = 1
+    slab = 1
+    blendMode = BLEND_REPLACE
+    timePoint = 0
+    maxTimePoint = 0
+    filterMode = FILTER_LINEAR
+    standardKeys = TRUE
+    cineMode = CINE_ZT
+    cineDirection = CINE_FORWARD
+    cineRepeat = CINE_ONCE
+    cineSpeed = 0.1
+    cineAlwaysReset = TRUE
+    snapToCenter = TRUE
+    zoomMode = VIEW2D_AUTO_ZOOM
+    unzoomOnImageChange = FALSE
+    sliceZoom = 1
+    sliceZoomSynced = 1
+    baseColor = "1 1 1"
+    margin = "2 2"
+    sliceOrigin = "0 0"
+    useShaders = TRUE
+    useManagedInteraction = FALSE
+    lutCenter = 385.069000244141
+    lutWidth = 830.431030273438
+    annotationOn = TRUE
+    annotationMode = ANNO_MODE_AUTO
+    annotationSizeMode = ANNO_SHOW_DETAILED
+    annotationCol = "0.899999976158142 0.899999976158142 0.899999976158142"
+    annotationFontSize = ANNO_SIZE_AUTO
+    annoCoords = Voxel
+    annoCTValue = AsIs
+    borderOn = FALSE
+    borderColor = "0.899999976158142 0.899999976158142 0.899999976158142"
+    valueHighPrecision = TRUE
+    maxPrecision = 4
+    enableSlicing = TRUE
+    showColorChannelValues = FALSE
+    colorChannelSeparator = " / "
+    useRelativeLUTIfNoInputImage = TRUE
+  }
+}
+module View2D {
+  internal {
+    frame = "741 197 120 56"
+    moduleGroupName = ""
+    windows {
+      window _default {
+        geometry = "499 207 400 400"
+        relativePosition = "-0.1359 -0.3019"
+        sizeHint = "400 400"
+        wasOpen = no
+      }
+    }
+  }
+  fields {
+    instanceName = View2D1
+    inventorInputOn = TRUE
+    inventorOutputOn = FALSE
+    view2DExtensionsOn = TRUE
+    startSlice = 79
+    numSlices = 1
+    numXSlices = 1
+    sliceStep = 1
+    slab = 1
+    blendMode = BLEND_REPLACE
+    timePoint = 0
+    maxTimePoint = 0
+    filterMode = FILTER_LINEAR
+    standardKeys = TRUE
+    cineMode = CINE_ZT
+    cineDirection = CINE_FORWARD
+    cineRepeat = CINE_ONCE
+    cineSpeed = 0.1
+    cineAlwaysReset = TRUE
+    snapToCenter = TRUE
+    zoomMode = VIEW2D_AUTO_ZOOM
+    unzoomOnImageChange = FALSE
+    sliceZoom = 1
+    sliceZoomSynced = 1
+    baseColor = "1 1 1"
+    margin = "2 2"
+    sliceOrigin = "0 0"
+    useShaders = TRUE
+    useManagedInteraction = FALSE
+    lutCenter = 385.069000244141
+    lutWidth = 830.431030273438
+    annotationOn = TRUE
+    annotationMode = ANNO_MODE_AUTO
+    annotationSizeMode = ANNO_SHOW_DETAILED
+    annotationCol = "0.899999976158142 0.899999976158142 0.899999976158142"
+    annotationFontSize = ANNO_SIZE_AUTO
+    annoCoords = Voxel
+    annoCTValue = AsIs
+    borderOn = FALSE
+    borderColor = "0.899999976158142 0.899999976158142 0.899999976158142"
+    valueHighPrecision = TRUE
+    maxPrecision = 4
+    enableSlicing = TRUE
+    showColorChannelValues = FALSE
+    colorChannelSeparator = " / "
+    useRelativeLUTIfNoInputImage = TRUE
+  }
+}
+module View2D {
+  internal {
+    frame = "901 205 120 56"
+    moduleGroupName = ""
+    windows {
+      window _default {
+        geometry = "911 209 400 400"
+        relativePosition = "0.0786 -0.3000"
+        sizeHint = "400 400"
+        wasOpen = no
+      }
+    }
+  }
+  fields {
+    instanceName = View2D2
+    inventorInputOn = TRUE
+    inventorOutputOn = FALSE
+    view2DExtensionsOn = TRUE
+    startSlice = 50
+    numSlices = 1
+    numXSlices = 1
+    sliceStep = 1
+    slab = 1
+    blendMode = BLEND_REPLACE
+    timePoint = 0
+    maxTimePoint = 0
+    filterMode = FILTER_LINEAR
+    standardKeys = TRUE
+    cineMode = CINE_ZT
+    cineDirection = CINE_FORWARD
+    cineRepeat = CINE_ONCE
+    cineSpeed = 0.1
+    cineAlwaysReset = TRUE
+    snapToCenter = TRUE
+    zoomMode = VIEW2D_AUTO_ZOOM
+    unzoomOnImageChange = FALSE
+    sliceZoom = 1
+    sliceZoomSynced = 1
+    baseColor = "1 1 1"
+    margin = "2 2"
+    sliceOrigin = "0 0"
+    useShaders = TRUE
+    useManagedInteraction = FALSE
+    lutCenter = 385.069000244141
+    lutWidth = 830.431030273438
+    annotationOn = TRUE
+    annotationMode = ANNO_MODE_AUTO
+    annotationSizeMode = ANNO_SHOW_DETAILED
+    annotationCol = "0.899999976158142 0.899999976158142 0.899999976158142"
+    annotationFontSize = ANNO_SIZE_AUTO
+    annoCoords = Voxel
+    annoCTValue = AsIs
+    borderOn = FALSE
+    borderColor = "0.899999976158142 0.899999976158142 0.899999976158142"
+    valueHighPrecision = TRUE
+    maxPrecision = 4
+    enableSlicing = TRUE
+    showColorChannelValues = FALSE
+    colorChannelSeparator = " / "
+    useRelativeLUTIfNoInputImage = TRUE
+  }
+}
+module SoViewportRegion {
+  internal {
+    frame = "565 85 136 56"
+    moduleGroupName = ""
+    windows {
+      window _default {
+        geometry = "555 178 715 556"
+        relativePosition = "-0.0245 -0.3295"
+        sizeHint = "715 556"
+        wasOpen = no
+      }
+    }
+  }
+  fields {
+    instanceName = SoViewportRegion
+    on = TRUE
+    modifyVP = TRUE
+    usePreviousVP = FALSE
+    autoScaleAbsoluteValuesHiDPI = TRUE
+    cacheViewportRegion = FALSE
+    useViewportRegionDefinitionCallback = FALSE
+    xPositionMode = POSITION_MODE_MIN_AND_MAX
+    x1 = 0
+    x1ReferenceMode = REFERENCE_MODE_MIN
+    x1DomainMode = DOMAIN_MODE_RELATIVE_TO_WIDTH
+    x2 = 0.5
+    x2ReferenceMode = REFERENCE_MODE_MIN
+    x2DomainMode = DOMAIN_MODE_RELATIVE_TO_WIDTH
+    yPositionMode = POSITION_MODE_MIN_AND_MAX
+    y1 = 0.5
+    y1ReferenceMode = REFERENCE_MODE_MAX
+    y1DomainMode = DOMAIN_MODE_RELATIVE_TO_HEIGHT
+    y2 = 0
+    y2ReferenceMode = REFERENCE_MODE_MAX
+    y2DomainMode = DOMAIN_MODE_RELATIVE_TO_HEIGHT
+    projectionType = UNMODIFIED
+    renderDelayedPaths = FALSE
+    detectMouseOver = FALSE
+    forwardEvents = TRUE
+    forwardEventsInViewportOnly = TRUE
+    keepViewportWhileDragging = TRUE
+    mapEventToViewport = TRUE
+    consumeEventsInViewport = TRUE
+    enableBorder = FALSE
+    borderWidth = 1
+    borderColor = "1 1 1"
+    borderAlpha = 1
+    enableBackground = FALSE
+    backgroundColor = "1 1 1"
+    backgroundAlpha = 1
+    preset = centeredThird
+  }
+}
+module SoViewportRegion {
+  internal {
+    frame = "729 85 144 56"
+    moduleGroupName = ""
+    windows {
+      window _default {
+        geometry = "675 265 715 556"
+        relativePosition = "0.0380 -0.2467"
+        sizeHint = "715 556"
+        wasOpen = no
+      }
+    }
+  }
+  fields {
+    instanceName = SoViewportRegion1
+    on = TRUE
+    modifyVP = TRUE
+    usePreviousVP = FALSE
+    autoScaleAbsoluteValuesHiDPI = TRUE
+    cacheViewportRegion = FALSE
+    useViewportRegionDefinitionCallback = FALSE
+    xPositionMode = POSITION_MODE_MIN_AND_MAX
+    x1 = 0
+    x1ReferenceMode = REFERENCE_MODE_MAX
+    x1DomainMode = DOMAIN_MODE_RELATIVE_TO_WIDTH
+    x2 = 0.5
+    x2ReferenceMode = REFERENCE_MODE_MAX
+    x2DomainMode = DOMAIN_MODE_RELATIVE_TO_WIDTH
+    yPositionMode = POSITION_MODE_MIN_AND_MAX
+    y1 = 0.5
+    y1ReferenceMode = REFERENCE_MODE_MAX
+    y1DomainMode = DOMAIN_MODE_RELATIVE_TO_MIN
+    y2 = 0
+    y2ReferenceMode = REFERENCE_MODE_MAX
+    y2DomainMode = DOMAIN_MODE_RELATIVE_TO_MIN
+    projectionType = UNMODIFIED
+    renderDelayedPaths = FALSE
+    detectMouseOver = FALSE
+    forwardEvents = TRUE
+    forwardEventsInViewportOnly = TRUE
+    keepViewportWhileDragging = TRUE
+    mapEventToViewport = TRUE
+    consumeEventsInViewport = TRUE
+    enableBorder = FALSE
+    borderWidth = 1
+    borderColor = "1 1 1"
+    borderAlpha = 1
+    enableBackground = FALSE
+    backgroundColor = "1 1 1"
+    backgroundAlpha = 1
+    preset = centeredThird
+  }
+}
+module SoViewportRegion {
+  internal {
+    frame = "897 85 144 56"
+    moduleGroupName = ""
+    windows {
+      window _default {
+        geometry = "678 245 715 556"
+        relativePosition = "0.0396 -0.2657"
+        sizeHint = "715 556"
+        wasOpen = no
+      }
+    }
+  }
+  fields {
+    instanceName = SoViewportRegion2
+    on = TRUE
+    modifyVP = TRUE
+    usePreviousVP = FALSE
+    autoScaleAbsoluteValuesHiDPI = TRUE
+    cacheViewportRegion = FALSE
+    useViewportRegionDefinitionCallback = FALSE
+    xPositionMode = POSITION_MODE_MIN_AND_MAX
+    x1 = 0.5
+    x1ReferenceMode = REFERENCE_MODE_MAX
+    x1DomainMode = DOMAIN_MODE_RELATIVE_TO_WIDTH
+    x2 = 0
+    x2ReferenceMode = REFERENCE_MODE_MAX
+    x2DomainMode = DOMAIN_MODE_RELATIVE_TO_WIDTH
+    yPositionMode = POSITION_MODE_MIN_AND_MAX
+    y1 = 1
+    y1ReferenceMode = REFERENCE_MODE_MAX
+    y1DomainMode = DOMAIN_MODE_RELATIVE_TO_MIN
+    y2 = 0.5
+    y2ReferenceMode = REFERENCE_MODE_MAX
+    y2DomainMode = DOMAIN_MODE_RELATIVE_TO_MIN
+    projectionType = UNMODIFIED
+    renderDelayedPaths = FALSE
+    detectMouseOver = FALSE
+    forwardEvents = TRUE
+    forwardEventsInViewportOnly = TRUE
+    keepViewportWhileDragging = TRUE
+    mapEventToViewport = TRUE
+    consumeEventsInViewport = TRUE
+    enableBorder = FALSE
+    borderWidth = 1
+    borderColor = "1 1 1"
+    borderAlpha = 1
+    enableBackground = FALSE
+    backgroundColor = "1 1 1"
+    backgroundAlpha = 1
+    preset = centeredThird
+  }
+}
+module SoRenderArea {
+  internal {
+    frame = "881 -211 128 56"
+    moduleGroupName = ""
+    windows {
+      window _viewer {
+        geometry = "773 133 1020 721"
+        relativePosition = "0.1682 -0.3724"
+        sizeHint = "400 400"
+        wasOpen = yes
+      }
+    }
+  }
+  fields {
+    instanceName = SoRenderArea
+    renderCaching = AUTO
+    boundingBoxCaching = AUTO
+    renderCulling = AUTO
+    pickCulling = AUTO
+    border = FALSE
+    background = "0 0 0"
+    transparency = BLEND
+    antialiasing = FALSE
+    antialiasingNumPasses = 1
+    useSampleBuffers = FALSE
+    numSamples = 8
+    grabKeyFocus = TRUE
+    enableKeyCommands = TRUE
+    snapshotFormat = SNAPSHOT_RGB
+    outputAviFile = ""
+    autoRedrawWhenRecording = TRUE
+    frameRate = 7
+    frameRateAvi = 15
+    outputSnapshotFile = none
+    outputSnapshotFileWritten = none
+    autoIncreaseFile = TRUE
+    showSnapshotWithShell = FALSE
+    snapCount = 0
+    inputDevicesList = ""
+  }
+}
+module View3D {
+  internal {
+    frame = "1081 197 144 56"
+    moduleGroupName = ""
+    windows {
+      window _default {
+        geometry = "455 256 1005 629"
+        relativePosition = "-0.0010 -0.2552"
+        sizeHint = "1005 629"
+        wasOpen = no
+      }
+    }
+  }
+  fields {
+    instanceName = View3D
+    autoViewAll = TRUE
+    inventorInputOn = TRUE
+    inventorOutputOn = FALSE
+    lutType = Ramp
+    rendererType = Slicer
+    currentTimePoint = 0
+    staticSamplingRate = 1
+    quality = 1
+    filterVolumeData = FilterLinear
+    lutEditorColorPoints = "[ 0 0 0 0, 4095 1 1 1 ]"
+    lutEditorAlphaPoints = "[ 0 0, 4095 1 ]"
+    lutEditorRelativeLut = FALSE
+    lutEditorColorInterpolation = InterpolateRGB
+    lutEditorAlphaFactor = 1
+    orientationProjectionType = PERSPECTIVE
+    orientationLocation = LOWER_RIGHT
+    orientationOn = TRUE
+    orientationModel = CUBE
+    greyCenter = 0.409999877214432
+    greyWidth = 0.282500147819519
+    alphaFactor = 1
+    colorFactor = "1 1 1"
+    camType = TRUE
+    camPosition = "217.985748291016 -435.294525146484 62.2996253967285"
+    camOrientation = "0.934440433979034 0.240476414561272 0.262663811445236 1.54235064983368"
+    initialCameraOrientation = CAMERA_KEEP_AS_IS
+    camFar = 606.89178
+    camNear = 300.2052
+    camFocal = 453.3956
+    camHeight = 0.78539801
+    decoration = FALSE
+    annotations = TRUE
+    background = TRUE
+    mode = VolumeRendering
+    interactiveQuality = Medium
+  }
+  internalFields {
+    renderer.gradientQuality = GradientQualityAutomatic
+    renderer.enhancementAlphaMix = 0.25
+    renderer.boundaryEnhancement = FALSE
+    renderer.boundaryEnhancementFactor = 1
+    renderer.boundaryEnhancementExponent = 1
+    renderer.boundaryEnhancementGradientBias = 0
+    renderer.silhouetteEnhancement = FALSE
+    renderer.silhouetteEnhancementExponent = 1
+    renderer.silhouetteEnhancementFactor = 1
+    renderer.toneShading = FALSE
+    renderer.toneShadingWarmColor = "0.67451000213623 0.533333003520966 0.141176000237465"
+    renderer.toneShadingColdColor = "0 0 0.400000005960464"
+    renderer.toneShadingWarmDiffuse = 0.60000002
+    renderer.toneShadingColdDiffuse = 0.2
+    renderer.toneShadingAngle = 45
+    renderer.materialAmbient = 0.60000002
+    renderer.materialDiffuse = 1
+    renderer.materialSpecular = 1
+    renderer.materialSpecularity = 32
+    renderer.light1Enabled = TRUE
+    renderer.light1DiffuseIntensity = 1
+    renderer.light1SpecularIntensity = 1
+    renderer.light1Color = "1 1 1"
+    renderer.light1PolarPhi = 45
+    renderer.light1PolarRho = 0
+    renderer.light2Enabled = FALSE
+    renderer.light2DiffuseIntensity = 1
+    renderer.light2SpecularIntensity = 1
+    renderer.light2Color = "1 1 1"
+    renderer.light2PolarPhi = 0
+    renderer.light2PolarRho = 0
+    renderer.light3Enabled = FALSE
+    renderer.light3DiffuseIntensity = 1
+    renderer.light3SpecularIntensity = 1
+    renderer.light3Color = "1 1 1"
+    renderer.light3PolarPhi = -45
+    renderer.light3PolarRho = 0
+    renderer.sizeOutputX = 120
+    renderer.sizeOutputY = 86
+    renderer.sizeOutputZ = 80
+    renderer.subVolumeStartX = 0
+    renderer.subVolumeStartY = 0
+    renderer.subVolumeStartZ = 0
+    renderer.subVolumeEndX = 120
+    renderer.subVolumeEndY = 86
+    renderer.subVolumeEndZ = 80
+    clip.hideGeometry = FALSE
+    clip.on = FALSE
+    clip.left = FALSE
+    clip.right = FALSE
+    clip.top = FALSE
+    clip.bottom = FALSE
+    clip.rear = FALSE
+    clip.front = FALSE
+    clip.translation0 = "1 0 0"
+    clip.translation1 = "-1 0 0"
+    clip.translation2 = "0 1 0"
+    clip.translation3 = "0 -1 0"
+    clip.translation4 = "0 0 1"
+    clip.translation5 = "0 0 -1"
+    clip.rotation0 = "0 0 0.999999940395355 1.57079994678497"
+    clip.rotation1 = "0 0 -0.999999940395355 1.57079994678497"
+    clip.rotation2 = "0 0 -1 3.1415901184082"
+    clip.rotation3 = "0 0 1 0"
+    clip.rotation4 = "-0.999999940395355 0 0 1.57079994678497"
+    clip.rotation5 = "0.999999940395355 0 0 1.57079994678497"
+  }
+}
+module SoCameraInteraction {
+  internal {
+    frame = "1077 93 152 56"
+    moduleGroupName = ""
+    windows {
+      window _default {
+        geometry = "1465 226 260 399"
+        relativePosition = "0.3307 -0.2838"
+        sizeHint = "260 399"
+        wasOpen = no
+      }
+    }
+  }
+  fields {
+    instanceName = SoCameraInteraction
+    interactionProviderID = ""
+    headlight = TRUE
+    eventMode = SceneFirst
+    interactiveLowComplexity = Force
+    zoomSensitivity = 1
+    enableZoomWithMouseWheel = TRUE
+    cursorShapeRotate = ROTATE_XY_CURSOR
+    cursorShapePan = MOVE_ALL_CURSOR
+    cursorShapeZoom = MOVE_INOUT_CURSOR
+  }
+}
+module SoViewportRegion {
+  internal {
+    frame = "1081 -27 144 56"
+    moduleGroupName = ""
+    windows {
+      window _default {
+        geometry = "45 223 715 556"
+        relativePosition = "-0.2901 -0.2867"
+        sizeHint = "715 556"
+        wasOpen = no
+      }
+    }
+  }
+  fields {
+    instanceName = SoViewportRegion3
+    on = TRUE
+    modifyVP = TRUE
+    usePreviousVP = FALSE
+    autoScaleAbsoluteValuesHiDPI = TRUE
+    cacheViewportRegion = FALSE
+    useViewportRegionDefinitionCallback = FALSE
+    xPositionMode = POSITION_MODE_MIN_AND_MAX
+    x1 = 0
+    x1ReferenceMode = REFERENCE_MODE_MIN
+    x1DomainMode = DOMAIN_MODE_RELATIVE_TO_WIDTH
+    x2 = 0.5
+    x2ReferenceMode = REFERENCE_MODE_MIN
+    x2DomainMode = DOMAIN_MODE_RELATIVE_TO_WIDTH
+    yPositionMode = POSITION_MODE_MIN_AND_MAX
+    y1 = 1
+    y1ReferenceMode = REFERENCE_MODE_MAX
+    y1DomainMode = DOMAIN_MODE_RELATIVE_TO_MIN
+    y2 = 0.5
+    y2ReferenceMode = REFERENCE_MODE_MAX
+    y2DomainMode = DOMAIN_MODE_RELATIVE_TO_MIN
+    projectionType = UNMODIFIED
+    renderDelayedPaths = TRUE
+    detectMouseOver = FALSE
+    forwardEvents = TRUE
+    forwardEventsInViewportOnly = TRUE
+    keepViewportWhileDragging = TRUE
+    mapEventToViewport = TRUE
+    consumeEventsInViewport = TRUE
+    enableBorder = FALSE
+    borderWidth = 1
+    borderColor = "1 1 1"
+    borderAlpha = 1
+    enableBackground = FALSE
+    backgroundColor = "1 1 1"
+    backgroundAlpha = 1
+    preset = centeredThird
+  }
+}
+connections {
+  OrthoReformat3.input0 = ImageLoad.output0
+  View2D.inImage = OrthoReformat3.output0
+  View2D1.inImage = OrthoReformat3.output1
+  View2D2.inImage = OrthoReformat3.output2
+  SoViewportRegion.children = View2D.self
+  SoViewportRegion1.children = View2D1.self
+  SoViewportRegion2.children = View2D2.self
+  SoRenderArea.children = "SoViewportRegion.self SoViewportRegion1.self SoViewportRegion2.self SoViewportRegion3.self"
+  View3D.inImage = ImageLoad.output0
+  SoCameraInteraction.inScene = View3D.self
+  SoViewportRegion3.children = SoCameraInteraction.self
+}
+networkModel = ""
diff --git a/mevislab.github.io/content/tutorials/basicmechanisms/macromodules/soviewportregion.md b/mevislab.github.io/content/tutorials/basicmechanisms/macromodules/soviewportregion.md
new file mode 100644
index 000000000..4a370dc42
--- /dev/null
+++ b/mevislab.github.io/content/tutorials/basicmechanisms/macromodules/soviewportregion.md
@@ -0,0 +1,164 @@
+---
+title: "Example 6: Creating Multi-View Layouts Using SoViewportRegion"
+date: 2025-04-22
+status: "OK"
+draft: false
+weight: 460
+tags: ["Beginner", "Tutorial", "SoViewportRegion", "Layout", "Multi-View"]
+menu: 
+  main:
+    identifier: "soviewportregion"
+    title: "Creating Multi-View Layouts Using SoViewportRegion"
+    weight: 460
+    parent: "basicmechanisms"
+---
+# Example 6: Creating Multi-View Layouts Using SoViewportRegion
+
+## Introduction
+In this guide, we will show how to use the `SoViewportRegion` module to create custom layouts within the `SoRenderArea` module. This allows you to display multiple views or slices in a single window.
+
+We will demonstrate how to: 
+* Divide the render area into multiple regions. 
+* Assign different content to each region. 
+* Use alternative methods, such as SoView2D, when applicable.
+
+
+## Prepare your network
+
+### Displaying three images in one panel
+Add an `ImageLoad` module to your workspace and select a 3D image like *./MeVisLab/Resources/DemoData/MRI_Head.tif* from the MeVisLab demo data directory. Connect an `OrthoReformat3` module and add three `View2D` modules.
+
+![Image Display Setup](/images/tutorials/basicmechanics/E6_1.png "Image Display Setup")
+
+Opening the three `View2D` module panels now shows the data in 3 orthogonal views. The module `OrthoReformat3` transforms the input image (by rotating and/or flipping) into the three main views commonly used.
+
+![3 Views in 3 Viewers](/images/tutorials/basicmechanics/E6_2.png "3 Views in 3 Viewers")
+
+The module `SoViewportRegion` divides the render window into multiple areas, allowing different views or slices to be shown in the same window. It's useful in medical applications, like displaying MRI or CT images from different angles (axial, sagittal, coronal) at once, making data analysis easier and faster.
+
+Add three `SoViewportRegion` modules and connect each one to a `View2D` module. To display the hidden outputs of the `View2D` module, press {{< keyboard "SPACE" >}} and connect the output to the input of `SoViewportRegion`, as shown below. 
+
+![Connect SoViewportRegion with View2D](/images/tutorials/basicmechanics/E6_3.png "Connect SoViewportRegion with View2D")
+
+Add a `SoRenderArea` for your final result to the network and connect all three `SoViewportRegion` modules to it.
+
+The result is that all of your viewers are initially displayed on top of each other in the bottom right corner.
+
+![All three viewers on top of each other](/images/tutorials/basicmechanics/E6_4.png "All three viewers on top of each other")
+
+This happens, because all three `SoViewportRegion` modules have the same settings for position and height or width.
+
+![SoViewportRegion](/images/tutorials/basicmechanics/E6_5.png "SoViewportRegion")
+
+The `SoViewportRegion` module allows to define the X- and Y-position and the width and height of the image in the `SoRenderArea` module.
+
+Values can be in pixels or as fractions from 0 to 1:
+
+* 0 means the start of the render area (depending on the reference)
+* 0.5 means the center of the render area
+* 1 means the end of the render area  (depending on the reference)
+
+We want to create a layout with the following setting:
+* Axial view on the left side
+* Coronal view on the top right side
+* Sagittal view on the bottom right side 
+
+![Target Layout](/images/tutorials/basicmechanics/E6_6.png "Target Layout")
+
+Now open the left `SoViewportRegion` module and change settings:
+
+* **X-Position and Width**
+  * *Left Border* to 0
+  * *Right Border* to 0.5
+  * *Domain* Fraction of width
+  * *Reference* Left window border
+* **Y-Position and Height**
+  * *Lower Border* to 1
+  * *Upper Border* to 0 
+  * *Domain* Fraction of height
+  * *Reference* Upper window border
+
+![Axial View](/images/tutorials/basicmechanics/E6_7.png "Axial View")
+
+Continue with the middle `SoViewportRegion` module and change settings:
+
+* **X-Position and Width**
+  * *Left Border* to 0
+  * *Right Border* to 0.5
+  * *Domain* Fraction of width
+  * *Reference* Right window border
+* **Y-Position and Height**
+  * *Lower Border* to 0.5
+  * *Upper Border* to 0 
+  * *Domain* Fraction of smallest dimension
+  * *Reference* Upper window border
+
+![Coronal View](/images/tutorials/basicmechanics/E6_8.png "Coronal View")
+
+The right `SoViewportRegion` module should look as follows:
+
+* **X-Position and Width**
+  * *Left Border* to 0.5
+  * *Right Border* to 0
+  * *Domain* Fraction of width
+  * *Reference* Right window border
+* **Y-Position and Height**
+  * *Lower Border* to 1
+  * *Upper Border* to 0.5
+  * *Domain* Fraction of smallest dimension
+  * *Reference* Upper window border
+
+![Sagittal View](/images/tutorials/basicmechanics/E6_9.png "Sagittal View")
+
+#### Displaying four images in one panel
+In the next example, the `SoRenderArea` will display four views at the same time: axial, coronal, sagittal, and a 3D view.
+
+![3D View Layout](/images/tutorials/basicmechanics/E6_11.png "3D View Layout")
+
+These views will be arranged in a single panel, split into two sides, with each side showing two images. To add the 3D view, insert a `View3D` module and connect it to the `ImageLoad` module. Then connect the `View3D` to `SoCameraInteraction`, connect that to another `SoViewportRegion`, and finally to `SoRenderArea`.
+
+![3D View Network](/images/tutorials/basicmechanics/E6_10.png "3D View Network")
+
+Now open the left `SoViewportRegion` module and change settings:
+
+* **X-Position and Width**
+  * *Left Border* to 0
+  * *Right Border* to 0.5
+  * *Domain* Fraction of width
+  * *Reference* Left window border
+* **Y-Position and Height**
+  * *Lower Border* to **0.5**
+  * *Upper Border* to 0 
+  * *Domain* Fraction of height
+  * *Reference* Upper window border
+
+Open the right `SoViewportRegion` connected to the `SoCameraInteraction` module and change settings:
+
+* **X-Position and Width**
+  * *Left Border* to 0
+  * *Right Border* to 0.5
+  * *Domain* Fraction of width
+  * *Reference* Left window border
+* **Y-Position and Height**
+  * *Lower Border* to 1
+  * *Upper Border* to 0.5 
+  * *Domain* Fraction of height
+  * *Reference* Upper window border
+
+This setup will let you interact with the 3D view and display all four views together, as shown in the figure below.
+
+![3D View](/images/tutorials/basicmechanics/E6_12.png "3D View")
+
+You will see that the orientation cube of the 3D viewer appears in the bottom right corner of the `SoRenderArea`. To resolve this, you can check *Render delayed paths* in the `SoViewportRegion` module of the 3D viewer.
+
+![Final Network](/images/tutorials/basicmechanics/E6_13.png "Final Network")
+
+## Exercise
+You can play around with the different `SoViewportRegion` modules to create your own layouts by setting the values a little different.
+
+![Exercise](/images/tutorials/basicmechanics/E6_14.png "Exercise")
+
+## Summary
+* Own layouts can be created by using multiple `SoViewportRegion` modules
+
+{{< networkfile "examples/basic_mechanisms/soviewportregion.mlab" >}}
diff --git a/mevislab.github.io/static/images/tutorials/basicmechanics/E6_1.png b/mevislab.github.io/static/images/tutorials/basicmechanics/E6_1.png
new file mode 100644
index 000000000..fd8e85c53
Binary files /dev/null and b/mevislab.github.io/static/images/tutorials/basicmechanics/E6_1.png differ
diff --git a/mevislab.github.io/static/images/tutorials/basicmechanics/E6_10.png b/mevislab.github.io/static/images/tutorials/basicmechanics/E6_10.png
new file mode 100644
index 000000000..8ab52798e
Binary files /dev/null and b/mevislab.github.io/static/images/tutorials/basicmechanics/E6_10.png differ
diff --git a/mevislab.github.io/static/images/tutorials/basicmechanics/E6_11.png b/mevislab.github.io/static/images/tutorials/basicmechanics/E6_11.png
new file mode 100644
index 000000000..68036e321
Binary files /dev/null and b/mevislab.github.io/static/images/tutorials/basicmechanics/E6_11.png differ
diff --git a/mevislab.github.io/static/images/tutorials/basicmechanics/E6_12.png b/mevislab.github.io/static/images/tutorials/basicmechanics/E6_12.png
new file mode 100644
index 000000000..6f7873358
Binary files /dev/null and b/mevislab.github.io/static/images/tutorials/basicmechanics/E6_12.png differ
diff --git a/mevislab.github.io/static/images/tutorials/basicmechanics/E6_13.png b/mevislab.github.io/static/images/tutorials/basicmechanics/E6_13.png
new file mode 100644
index 000000000..d638ba24e
Binary files /dev/null and b/mevislab.github.io/static/images/tutorials/basicmechanics/E6_13.png differ
diff --git a/mevislab.github.io/static/images/tutorials/basicmechanics/E6_14.png b/mevislab.github.io/static/images/tutorials/basicmechanics/E6_14.png
new file mode 100644
index 000000000..e58c3a6f6
Binary files /dev/null and b/mevislab.github.io/static/images/tutorials/basicmechanics/E6_14.png differ
diff --git a/mevislab.github.io/static/images/tutorials/basicmechanics/E6_2.png b/mevislab.github.io/static/images/tutorials/basicmechanics/E6_2.png
new file mode 100644
index 000000000..75c2de002
Binary files /dev/null and b/mevislab.github.io/static/images/tutorials/basicmechanics/E6_2.png differ
diff --git a/mevislab.github.io/static/images/tutorials/basicmechanics/E6_3.png b/mevislab.github.io/static/images/tutorials/basicmechanics/E6_3.png
new file mode 100644
index 000000000..c84aa0a6e
Binary files /dev/null and b/mevislab.github.io/static/images/tutorials/basicmechanics/E6_3.png differ
diff --git a/mevislab.github.io/static/images/tutorials/basicmechanics/E6_4.png b/mevislab.github.io/static/images/tutorials/basicmechanics/E6_4.png
new file mode 100644
index 000000000..c9a70d375
Binary files /dev/null and b/mevislab.github.io/static/images/tutorials/basicmechanics/E6_4.png differ
diff --git a/mevislab.github.io/static/images/tutorials/basicmechanics/E6_5.png b/mevislab.github.io/static/images/tutorials/basicmechanics/E6_5.png
new file mode 100644
index 000000000..62e38e8f1
Binary files /dev/null and b/mevislab.github.io/static/images/tutorials/basicmechanics/E6_5.png differ
diff --git a/mevislab.github.io/static/images/tutorials/basicmechanics/E6_6.png b/mevislab.github.io/static/images/tutorials/basicmechanics/E6_6.png
new file mode 100644
index 000000000..65acc4e8f
Binary files /dev/null and b/mevislab.github.io/static/images/tutorials/basicmechanics/E6_6.png differ
diff --git a/mevislab.github.io/static/images/tutorials/basicmechanics/E6_7.png b/mevislab.github.io/static/images/tutorials/basicmechanics/E6_7.png
new file mode 100644
index 000000000..92a127219
Binary files /dev/null and b/mevislab.github.io/static/images/tutorials/basicmechanics/E6_7.png differ
diff --git a/mevislab.github.io/static/images/tutorials/basicmechanics/E6_8.png b/mevislab.github.io/static/images/tutorials/basicmechanics/E6_8.png
new file mode 100644
index 000000000..ab3cc6f1b
Binary files /dev/null and b/mevislab.github.io/static/images/tutorials/basicmechanics/E6_8.png differ
diff --git a/mevislab.github.io/static/images/tutorials/basicmechanics/E6_9.png b/mevislab.github.io/static/images/tutorials/basicmechanics/E6_9.png
new file mode 100644
index 000000000..d3ad5ffdf
Binary files /dev/null and b/mevislab.github.io/static/images/tutorials/basicmechanics/E6_9.png differ