ui_ux
Differences
This shows you the differences between two versions of the page.
| Both sides previous revision Previous revision Next revision | Previous revision | ||
|
ui_ux [2023/03/02 18:59] yves |
ui_ux [2023/03/03 18:02] (current) yves [Panels] |
||
|---|---|---|---|
| Line 31: | Line 31: | ||
| ==== Panels ==== | ==== Panels ==== | ||
| - | ==== Viewer ==== | + | in PMA.studio (as well as PMA.vue), you can customize the position, size, and behavior of panels to create layouts that work best for various digital pathology workflows. |
| - | {{:viewer.jpg?400|Picture #1. Viewer panel with single slide loaded}} | + | The software has two basic panel types, tool panels and viewing panels . Tool panels include [[panel_explorer|Slide browser]], [[panel_info|Info panel]], [[panel_annotations|Annotations panel]], and so on. Viewing panels contain virtual slide ([[https://realdata.pathomation.com/what-whole-slide-images-wsis-are-made-of/|WSI]]) content and can either show individual slides, or grids (comprising of multiple slides). |
| - | Viewer panel consist of one or more viewports organized in grid and toolbar underneath it (only in single-slide mode). Currently selected slide is highlighted with the blue dashed border [#1 on a picture #1]. When user adds new viewer panel its grid has only 1 column and 1 row, so it's single cell grid. When changing grid size application will always ask what to do with slides that were already loaded into grid - whether application should preserve it or clear all. | + | Panels can be resized and dragged by their title bar or tab. All panels can be docked or stacked, so that it has a position and size within the webbrowser viewing area. |
| - | Toolbar is placed underneath the viewer [#2 on picture #1] Toolbar consists of (left to the right): | + | {{:panels-layout.png?|}} |
| - | - Flip horizontally | + | |
| - | - Flip vertically | + | |
| - | - Rotate counter-clockwise 90 degrees | + | |
| - | - Rotate clockwise 90 degrees | + | |
| - | - Rotate 180 degrees | + | |
| - | - Previous slide | + | |
| - | - Next slide | + | |
| - | - Magnification buttons | + | |
| - | PMA.Studio allows to load multiple slides into the grid in addition to opening multiple viewer panels with grid inside. Each slide position could be changed using [i] [#1 on picture #2] button on top of viewport - it's required to drag and drop that [i] handle to the desired position - it could be either another cell, tray or new viewer panel. In addition Column/row of grid also could change it's position - there is a handle [#2, #3, #4, #5 on picture #2] near each row or column that could be drag and dropped to the required position. | + | The appearance and initial organization of panels is being controlled by the [[admin_panels|panel layout]], which can be specified in the [[admin|Admin area]]. |
| - | + | ||
| - | {{:viewer_grid.jpg?400|Picture #2. Viewer panel with grid, 4 slides loaded}} | + | |
| - | + | ||
| - | === Navigation (Slide explorer) === | + | |
| - | + | ||
| - | {{:navigation_treemode.jpg?400|Picture #3. Navigation panel in Tree mode}} | + | |
| - | + | ||
| - | Purpose of Navigation panel is to provide an access to connected Tile servers, represent folder\slides structure and select slide to inspect. Navigation panel works in 2 modes - Tree mode and Slides mode. | + | |
| - | **Tree mode** Navigation panel in Tree mode consists of 2 main elements - button toolbar and Tile server content. Button toolbar [#1 on Picture #3] consist of 4 buttons - from the left to the right: | + | |
| - | - **Switch navigation mode** - there are 2 Navigation modes - Tree mode and Gallery mode | + | |
| - | - **Reload** - force pick latest folder\slides structure from the Tile server | + | |
| - | - **Open in new tab** - toggles mode that opens selected slide in the current selected cell or creates a new viewer panel and put selected slide there | + | |
| - | - **Show preview** - toggles visibility of slide preview on hover in Tree mode | + | |
| - | **Slides mode** | + | |
| - | {{:navigation_slidesmode.jpg?400|Picture#4. Navigation panel in Slides mode}} | + | |
| - | Navigation panel in Gallery mode consists of buttons toolbar, directory selector and directory content. Button toolbar consist of 4 buttons - from the left to the right | + | |
| - | - **Switch** - switches navigation mode to Tree mode | + | |
| - | - **Reload** - force pick latest slides in the directory | + | |
| - | - **Open in new tab** - toggles mode that opens selected slide in the current selected cell or creates a new viewer panel and put selected slide there | + | |
| - | - **Mode** - toggles presence of barcode and thumbnail on the slide | + | |
| - | + | ||
| - | More information can be found on the [[panel_explorer|Slide browser page]]. | + | |
| - | + | ||
| - | === Annotations (available in PMA.Studio) === | + | |
| - | + | ||
| - | Annotations panel displays existing annotations on the selected slide. A table contains Note, Pen Width, Color, Area and Length of every annotations. Besides this data there are buttons for remove, edit and show/hide annotation item. Annotation creating also available with Ribbon tools at Annotations tab. | + | |
| - | Available buttons: | + | |
| - | - Delete annotation | + | |
| - | - Edit annotation (opens window with caption field) | + | |
| - | - Show/hide annotation (toggles displaying of the annotation on viewport) | + | |
| - | + | ||
| - | === Color adjustments === | + | |
| - | + | ||
| - | Purpose of color adjustment panel is to prov ide tools for changing color settings for selected slide. There are 3 available settings (from top to bottom) - Brightness, Contrast and Gamma, for each setting there are 2 ways of change its value - slider and input. Slider and input are synchronized and user can adjust settings using both ways. 'Reset to default' button will reset settings to the following values - Brightness: 0, Contrast: 1, Gamma: 1. | + | |
| - | + | ||
| - | === Forms data (available in PMA.Studio) === | + | |
| - | + | ||
| - | Forms data panel purpose is to show filled forms for the slide and prov ide access to editing and filling new forms for currently selected slide. The panel consists of 2 main sections - Add button that will add a panel with specific form, and section with already filled form for the selected slide, user can collapse\expand each form with toggle control in top left corner and if user need to edit the form (s)he should click on 'Edit' button, it will open a new panel - specific form edit panel, where user can fill or edit form values and save them. | + | |
| - | + | ||
| - | === Conferencing (available in PMA.Studio) === | + | |
| - | + | ||
| - | Conferencing panel works in 3 modes: | + | |
| - | - No active conference: when there is no active conference this panel just show a placeholder that allows user to Create new conference or Join to existing conference. | + | |
| - | - Active conference, user is admin: When there is an active conference and user is admin of conference user can see: | + | |
| - | - Link to share - 'Copy' button allows to copy link to clipboard, and then this link can be used for joining a conference as participant | + | |
| - | - Conference name (specified by admin) | + | |
| - | - Owner - nickname of user who created a conference | + | |
| - | - Nickname - nickname of current user | + | |
| - | - Live mode - can be in 2 states - enabled (green circle), and disabled (red circle). When live mode is enabled conference participants can see the same ROIs as admin, when it is disabled participant cannot see | + | |
| - | - Everyone in control - indicator is the same as for Live mode, when everyone in control enabled all participants can control what is being shown in conference | + | |
| - | - Participants - list of participant nicknames | + | |
| - | - Active conference, user is participant: When user joined to a conference as participant (s)he can see a reduced list of fields that are the same to one that is described in previous list item | + | |
| - | + | ||
| - | ==== Viewer area (viewports) ==== | + | |
| - | + | ||
| - | Viewer area contains application Main page, Embedded view and Embedded directory. Main page consists consists of 2 main parts - ribbon on top and panels organized in panel stacks. | + | |
ui_ux.1677772741.txt.gz · Last modified: 2023/03/02 18:59 by yves
Page Tools
