User Tools

Site Tools


viewport

Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Both sides previous revision Previous revision
viewport [2022/02/07 20:00]
yves
viewport [2023/11/21 16:45] (current)
chris
Line 1: Line 1:
 ===== Looking at content (PMA.UI viewport) ===== ===== Looking at content (PMA.UI viewport) =====
  
-PMA.core incorporates the [[https://​www.pathomation.com/​developers/#​js|PMA.UI framework]],​ which includes a versatile viewport for control.+PMA.core incorporates the [[https://​www.pathomation.com/​developers/#​js|PMA.UI framework]],​ which includes a versatile viewport for exploring slides.
  
 {{ :​viewport_pma_core.jpg?​direct&​400 |}} {{ :​viewport_pma_core.jpg?​direct&​400 |}}
  
-PMA.UI'​s viewport is web-based and independent;​ the front-end runs in the webbrowser of your choice. You can use it examine brighfield, fluorescent,​ and z-stacked slide content ​from the same environment.+PMA.UI'​s viewport is web-based and independent;​ the front-end runs in the webbrowser of your choice. You can use it to examine brighfield, fluorescent,​ and z-stacked slide content ​within ​the same environment.
  
-The tile server ships with a default PMA.UI configuration. When embedded in downstream ​consumers like [[https://​www.pathomation.com/​pma.studio|PMA.studio]] or [[https://​realdata.pathomation.com/​whos-in-the-drivers-seat/​|in custom scenarios]] and [[https://​www.youtube.com/​watch?​v=0XtGaQ--eUc|analytical pipelines]] however, [[https://​host.pathomation.com/​sdk/​pma.ui.examples/​advanced_viewport.html|much more customization is possible]].+The tile server ships with a default PMA.UI configuration. When embedded in downstream ​applications such as [[https://​www.pathomation.com/​pma.studio|PMA.studio]] or [[https://​realdata.pathomation.com/​whos-in-the-drivers-seat/​|in custom scenarios]] and [[https://​www.youtube.com/​watch?​v=0XtGaQ--eUc|analytical pipelines]] however, [[https://​host.pathomation.com/​sdk/​pma.ui.examples/​advanced_viewport.html|much more customization is possible]].
  
 {{ ::​viewport_config.jpg?​direct&​400 |}} {{ ::​viewport_config.jpg?​direct&​400 |}}
Line 21: Line 21:
 {{ ::​viewport_panning2.png?​direct&​400 |}} {{ ::​viewport_panning2.png?​direct&​400 |}}
  
-If you want to navigate somewhere ​quick, click anywhere ​in the overview image to immediately jump to that particular ​area at the current magnification.+If you want to navigate somewhere ​quickly, click a location ​in the overview image to immediately jump to that area at the current magnification.
  
 {{ ::​viewport_panning3.png?​direct&​400 |}} {{ ::​viewport_panning3.png?​direct&​400 |}}
  
-If you want to rotate a slide, use Alt + mouse movements. Alternatively,​ use the rotation widget in the bottom left of the screen for simpler mouse control, or to enter very precise rotation angles.+If you want to rotate a slide, use Alt + mouse click and drag. Alternatively,​ use the rotation widget in the bottom left of the screen for simpler mouse control, or to enter very precise rotation angles.
  
 {{ ::​viewport_panning4.png?​direct&​400 |}} {{ ::​viewport_panning4.png?​direct&​400 |}}
Line 32: Line 32:
 PMA.UI'​s viewport offers different ways to zoom in on a slide. PMA.UI'​s viewport offers different ways to zoom in on a slide.
  
-The simplest way is to use the scrollwheel on your mouse: pushing the scrollwheel forward (away from you) lets your zoom in; bringing it toward you (or scrolling //​backwards//​) ​zoom out again. Furthermore,​ we've optimized the speed of interaction so that you can go from the highest level of viewing to the deepest level in one smooth sweeping motion.+The simplest way is to use the scrollwheel on your mouse: pushing the scrollwheel forward (away from you) zooms in; bringing it toward you (or scrolling //​backwards//​) ​zooms out again. Furthermore,​ we've optimized the speed of interaction so that you can go from the highest level of viewing to the deepest level in one smooth sweeping motion.
  
-If you don't have a mouse, or want precision control, you can use the zoom controls in the top-left corner of the screen, too. There are plus and minus button to zoom in (increase magnification) or zoom out (reduce magnification).+If you don't have a scrollwheel, or want precision control, you can use the zoom controls in the top-left corner of the screen. There are plus and minus button to zoom in (increase magnification) or zoom out (reduce magnification).
  
 {{ ::​viewport_zooming1.png?​direct&​200 |}} {{ ::​viewport_zooming1.png?​direct&​200 |}}
  
-There is also the zoombar. You interact with that one by moving the slider up and down to control your magnification.+There is also the zoombar. You can interact with it by moving the slider up and down to control your magnification.
  
 {{ ::​viewport_zooming2.png?​direct&​200 |}} {{ ::​viewport_zooming2.png?​direct&​200 |}}
  
-The zoombar is useful even if you don't use it to control your magnification:​ it also indicates whether you are looking at content through optimal magnification or digital ​pmagnificaion.  The number of articifically added zoomlevels ​for digital zoom can be controlled in PMA.UI, or even disabled altogether.+The zoombar is useful even if you don't use it to control your magnification:​ it also indicates whether you are looking at content through optimal magnification or digital ​magnificaion.  The number of articifically added zoom levels ​for digital zoom can be controlled in PMA.UI, or even disabled altogether.
  
 {{ ::​viewport_zooming3.png?​direct&​200 |}} {{ ::​viewport_zooming3.png?​direct&​200 |}}
Line 58: Line 58:
 The thumbnail has a blue rectangle drawn on it to indicate the currently viewed region of interest. This widget is a mini-browser in its own right: clicking anywhere on the thumbnail moves the current viewport to that particular area on the slide. The blue rectangle itself can be dragged around to a new location, too. The thumbnail has a blue rectangle drawn on it to indicate the currently viewed region of interest. This widget is a mini-browser in its own right: clicking anywhere on the thumbnail moves the current viewport to that particular area on the slide. The blue rectangle itself can be dragged around to a new location, too.
  
-For smaller specimens like (needle) biopsies, the thumbnail can be enlarged ​so to easier ​identify individual objects on the slide.+For smaller specimens like (needle) biopsies, the thumbnail can be enlarged to easily ​identify individual objects on the slide.
  
 [[https://​realdata.pathomation.com/​custom-panels-and-functionality-in-pma-studio/​|Thumbnails,​ label images, and associated images in general can also be requested and presented individually]]. [[https://​realdata.pathomation.com/​custom-panels-and-functionality-in-pma-studio/​|Thumbnails,​ label images, and associated images in general can also be requested and presented individually]].
Line 67: Line 67:
 {{ ::​viewport_tracking.png?​direct&​200 |}} {{ ::​viewport_tracking.png?​direct&​200 |}}
  
-Once enabled, a gray overlay covers your slide'​s thumbnail, with pieces of it gradually ​disappearingas you start navigating ​your side. The zoomlevel at which you inspect a specific region of interestinfluences the outline color in the tracking screen. ​+Once enabled, a gray overlay covers your slide'​s thumbnail, with pieces of it disappearing as you start navigating ​through the slide. The zoomlevel at which you inspect a specific region of interest influences the outline color in the tracking screen. ​
  
 {{ :​viewport_tracking2.png?​direct&​400 |}} {{ :​viewport_tracking2.png?​direct&​400 |}}
Line 78: Line 78:
 {{ ::​viewport_color_correction.png?​direct&​400 |}} {{ ::​viewport_color_correction.png?​direct&​400 |}}
  
-Use it to control brightness, contrast, and gamma correction.+You can use it to control brightness, contrast, and gamma correction.
 ==== Fluorescent content ==== ==== Fluorescent content ====
  
Line 91: Line 91:
 {{ ::​fluo2.png?​direct&​400 |}} {{ ::​fluo2.png?​direct&​400 |}}
  
-Color ranges are supported both in 8 bit and 16 bit. Version 2.0.0 only supports ​8 bit channels, which sometimes ​lead to color bleading. This was resolved in [[what_s_new_in_version_2.0.1|version 2.0.1]] and higher.+Color ranges are supported both in 8 bit and 16 bit. Version 2.0.0 only supported ​8 bit channels, which sometimes ​led to color bleeding. This was resolved in [[what_s_new_in_version_2.0.1|version 2.0.1]] and higher.
  
  
 ==== Z-stacked content ==== ==== Z-stacked content ====
  
-Similar ​to fluorescent slides; when a slide turns out to contain ​mutliple planes / stacks, a new widget appears automatically in the left-hand side of the viewport, allowing the end-user to navigate through the various ​layers.+Similarly ​to fluorescent slides; when a slide contains ​mutliple planes / stacks, a new widget appears automatically in the left-hand side of the viewport, allowing the end-user to navigate through the layers.
  
 {{ ::​viewport_zstack.png?​direct&​200 |}} {{ ::​viewport_zstack.png?​direct&​200 |}}
  
-We have a [[https://​realdata.pathomation.com/​blur-detection-in-z-stacks/​|blog article ​on how you can analyze a z-stack]] to artifically compose a new slide that contains the sharpest tile at each position from the slide.+We have a [[https://​realdata.pathomation.com/​blur-detection-in-z-stacks/​|blog article ​that describes ​how you can analyze a z-stack]] to artifically compose a new slide that contains the sharpest tile at each position from the slide.
viewport.1644253220.txt.gz ยท Last modified: 2022/02/07 20:00 by yves