New tutorial added

mevislab.github.io/content/examples/visualization/example7/VisualizationExample7.mlab

@@ -0,0 +1,289 @@
+// MDL v1 utf8
+mevislabVersion = 3.7.1.15
+network  {
+  watchlist = ""
+}
+module OrthoView2D {
+  internal  {
+    frame = "451 84 120 56"
+    moduleGroupName = ""
+    windows  {
+      window _default {
+        geometry = "482 157 548 512"
+        sizeHint = "400 440"
+        wasOpen = yes
+      }
+    }
+  }
+  fields  {
+    instanceName = OrthoView2D
+    inventorInputOn = TRUE
+    inventorOutputOn = FALSE
+    synchronizePosition = TRUE
+    layout = LAYOUT_CUBE_EQUAL
+    filterMode = FILTER_LINEAR
+    synchronizeZoom = TRUE
+    synchronizePanning = FALSE
+    useGlobalInputImage = TRUE
+    snapToCenter = FALSE
+    alternCubeLayout = FALSE
+    timePoint = 0
+    useManagedInteraction = FALSE
+    enableSlicing = TRUE
+    borderOn = TRUE
+    borderColor = "0.899999976158142 0.899999976158142 0.899999976158142"
+    grayWidth = 816.337585449219
+    grayCenter = 685.964660644531
+    annotationOn = TRUE
+    annotationSizeMode = ANNO_SHOW_DETAILED
+    annotationFontSize = ANNO_SIZE_AUTO
+    valueHighPrecision = TRUE
+    annoCoords = Voxel
+    showCurrentPos = TRUE
+    worldPosition = "-13.3527755737305 -30.5226287841797 37.4195861816406"
+    coloredMode = FALSE
+  }
+}
+module LocalImage {
+  internal  {
+    frame = "393 589 144 72"
+    moduleGroupName = ""
+    showNetworkPanel = true
+  }
+  fields  {
+    instanceName = LocalImage
+    name = $(DemoDataPath)/BrainMultiModal/ProbandT1.dcm
+    autoLoad = TRUE
+  }
+}
+module SoViewportRegion {
+  internal  {
+    frame = "517 197 136 56"
+    moduleGroupName = ""
+    windows  {
+      window _default {
+        geometry = "897 251 696 539"
+        sizeHint = "696 539"
+        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
+    y1ReferenceMode = REFERENCE_MODE_MAX
+    y1DomainMode = DOMAIN_MODE_RELATIVE_TO_HEIGHT
+    y2 = 0.5
+    y2ReferenceMode = REFERENCE_MODE_MAX
+    y2DomainMode = DOMAIN_MODE_RELATIVE_TO_HEIGHT
+    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
+  }
+}
+module View3D {
+  internal  {
+    frame = "513 413 144 56"
+    moduleGroupName = ""
+  }
+  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.382499784231186
+    greyWidth = 0.520000040531158
+    alphaFactor = 1
+    colorFactor = "1 1 1"
+    camType = TRUE
+    camPosition = "194.42822265625 -378.746307373047 67.7337341308594"
+    camOrientation = "0.934440433979034 0.240476414561272 0.262663811445236 1.54235064983368"
+    initialCameraOrientation = CAMERA_KEEP_AS_IS
+    camFar = 546.26605
+    camNear = 264.49319
+    camFocal = 405.23923
+    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 = 109
+    renderer.sizeOutputY = 91
+    renderer.sizeOutputZ = 80
+    renderer.subVolumeStartX = 0
+    renderer.subVolumeStartY = 0
+    renderer.subVolumeStartZ = 0
+    renderer.subVolumeEndX = 109
+    renderer.subVolumeEndY = 91
+    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 = "509 293 152 56"
+    moduleGroupName = ""
+  }
+  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 StringUtils {
+  internal  {
+    frame = "845 517 104 72"
+    moduleGroupName = ""
+    showNetworkPanel = true
+    windows  {
+      window _default {
+        geometry = "506 201 532 336"
+        sizeHint = "228 223"
+        wasOpen = no
+      }
+    }
+  }
+  fields  {
+    instanceName = StringUtils
+    operationType = Compare
+    string1 = LAYOUT_CUBE_EQUAL
+    string2 = LAYOUT_CUBE_EQUAL
+    string3 = ""
+    string4 = ""
+    string5 = ""
+    string6 = ""
+    stringPrefix = [
+    stringPostfix = ]
+    toggle1 = TRUE
+    toggle2 = TRUE
+    toggle3 = FALSE
+    toggle4 = FALSE
+    toggle5 = FALSE
+    toggle6 = FALSE
+    togglePrefix = FALSE
+    togglePostfix = FALSE
+    separator = ""
+    selectSeparator = 0
+    toggleIgnoreCase = FALSE
+    inPos1 = 0
+    inPos2 = 0
+  }
+}
+connections  {
+  OrthoView2D.image = LocalImage.outImage
+  OrthoView2D.inInvPreLUT = SoViewportRegion.self
+  SoViewportRegion.on = StringUtils.boolResult
+  SoViewportRegion.children = SoCameraInteraction.self
+  View3D.inImage = LocalImage.outImage
+  SoCameraInteraction.inScene = View3D.self
+  StringUtils.string1 = OrthoView2D.layout
+}
+networkModel = ""

mevislab.github.io/content/tutorials/visualization/visualizationexample7.md

@@ -0,0 +1,61 @@
+---
+title: "Example 7: Add 3D viewer to OrthoView2D"
+date: 2023-11-21
+status: "OK"
+draft: false
+weight: 590
+tags: ["Beginner", "Tutorial", "Visualization", "3D", "OrthoView2D"]
+menu: 
+  main:
+    identifier: "visualization_example7"
+    title: "Add 3D viewer to OrthoView2D."
+    weight: 590
+    parent: "visualization"
+---
+# Example 7: Add 3D viewer to OrthoView2D {#TutorialVisualizationExample7}
+
+## Introduction
+In this example we will use the `OrthoView2D` module and add a 3D viewer to the layout *Cube*.
+
+## Steps to do
+### Develop your network
+Add the modules `LocalImage` and `OrthoView2D` to your workspace and connect them.
+
+![Network](/images/tutorials/image_processing/network_example7.png "Network")
+
+The `OrthoView2D` module allows you to select multiple layouts. Select layout *Cube Equal*. The layout shows your image in three orthogonal viewing directions. The top left segment remains empty.
+
+![OrthoView2D Layouts](/images/tutorials/image_processing/network_example7_2.png "OrthoView2D Layouts")
+
+We now want to use a 3D rendering in the top left segment, whenever the layout *Cube Equal* is chosen. Add a `View3D` and a `SoViewportRegion` module to your workspace. Connect the `LocalImage` with your `View3D`. The image is rendered in 3D. Hit {{< keyboard "SPACE" >}} on your keyboard to make the hidden output of the `View3D` module visible. Connect it with your `SoViewportRegion` and connect the `SoViewportRegion` with the *inInvPreLUT* input of the `OrthoView2D`.
+
+![Network with SoViewportRegion](/images/tutorials/image_processing/network_example7_3.png "Network with SoViewportRegion")
+
+Open the `OrthoView2D` and inspect your layout.
+
+![OrthoView2D with 3D](/images/tutorials/image_processing/network_example7_4.png "OrthoView2D with 3D")
+
+You can see your `View3D` being visible in the bottom right segment of the layout behind the coronal view of the image. Open the panel of the `SoViewportRegion` module. In section *X-Position and Width*, set *Left Border* to *0* and *Right Border* to *0.5*. In section *Y-Position and Height*, set *Lower Border* to *0* and *Upper Border* to *0.5*. Also check *Render delayed paths*.
+
+![Define viewport region](/images/tutorials/image_processing/network_example7_5.png "Define viewport region")
+
+The `View3D` image is now rendered to the top left segment of the `OrthoView2D`, because the module `SoViewportRegion` renders a sub graph into a specified viewport region (VPR). The problem is: We cannot rotate and pan the 3D object, because there is no camera interaction available after adding the `SoViewportRegion`. The camera interaction is consumed by the `View3D` module before it can be used by the viewport.
+
+Add a `SoCameraInteraction` module between the `View3D` and the `SoViewportRegion`. You can now interact with your 3D scene but the rotation is not executed on the center of the object. Trigger *ViewAll* on your `SoCameraInteraction` module.
+
+![SoCameraInteraction](/images/tutorials/image_processing/network_example7_6.png "SoCameraInteraction")
+
+You have now successfully added the `View3D` to the `OrthoView2D`, but there is still a problem remaining: If you change the layout to something different than *LAYOUT_CUBE_EQUAL*, the 3D content remains visible.
+
+We can use a `StringUtils` module to resolve that. Set *Operation* to *Compare* and draw a parameter connection from the field *OrthoView2D.layout* to the field *StringUtils.string1*. The currently selected layout is displayed as *String A*. Enter *LAYOUT_CUBE_EQUAL* as *String B*. Now, draw a parameter connection from the field *StringUtils.boolResult* to the field *SoViewportRegion.on*.
+
+![StringUtils](/images/tutorials/image_processing/network_example7_7.png "StringUtils")
+
+If the selected layout in `OrthoView2D` now matches the string *LAYOUT_CUBE_EQUAL* (the field *boolResult* of the `StringUtils` module is *TRUE*), the `SoViewportRegion` is turned *on*. In any other case, the 3D segment is not visible.
+
+![Final Network](/images/tutorials/image_processing/network_example7_8.png "Final Network")
+
+## Summary
+* The module `SoViewportRegion` renders a sub graph into a specified viewport region (VPR)
+
+{{< networkfile "examples/visualization/example5/VisualizationExample7.mlab" >}}

mevislab.github.io/layouts/index.html

@@ -29,10 +29,8 @@ <h2>Learn to use MeVisLab</h2>
     <div class="alert alert-info" role="alert">
     <h4>Recent Additions:</h4>
       <p>
-      {{ $currentIndex := 1 }}
       {{ range ( where .Site.RegularPages.ByDate.Reverse "Kind" "page" | first 5 ) }}
-        <p>[{{ .Date.Format "2006-01-01" }}]: <a href="{{ .Permalink }}" class="alert-link">{{ .Title }}</a></p>
-        {{ $currentIndex = add $currentIndex 1 }}
+        <p>[{{ .Date.Format "2006-01-02" }}]: <a href="{{ .Permalink }}" class="alert-link">{{ .Title }}</a></p>
       {{ end }}
       </p>
     </div>