This shows you the differences between two versions of the page.
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 disappearing, as you start navigating your side. The zoomlevel at which you inspect a specific region of interest, influences 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. |