Differences

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

--- ui_ux [2023/02/10 13:17]
yves
+++ ui_ux [2023/03/03 18:02] (current)
yves [Panels]
@@ Line 10: / Line 10: @@
 ==== Ribbon ====
-Ribbon is a panel that sticks to the top of the screen and consists of tabs and controls.
+The Ribbon is a panel that sticks to the top of the screen and consists of tabs and controls.
-It is the strip of buttons and icons located above the work ([[viewport|viewport]]) area. The ribbon replaces the menus and toolbars found older software applications.
+It is the strip of buttons and icons located above the work ([[slides|viewport]]) area. The ribbon replaces the menus and toolbars found older software applications.
-Appearance of tabs and controls are being controlled by ribbon layout, which can be specified in the Admin area.
+{{:partial_ribbon.png?|}}
-=== File Menu tab ===
+The ribbon includes [[context_menu|a context menu]], and tabs labeled [[ribbon_tabs#home_tab|Home]], [[ribbon_tabs#grid_tab|Grid]], [[ribbon_tabs#annotations_tab|Annotations]], and [[ribbon_tabs#configure_tab|Configure]]. PMA.vue only has the Home tab. The ribbon in PMA.studio can be extended with optional tabs.
-This is the starting tab of PMA.studio and provides set of menu items used by the application. It is discussed in detail [[context_menu|elsewhere in this wiki]].
+When you select a tab, the area below the ribbon displays a set of groups and, within the groups, buttons representing a variety of [[ribbon_commands|commands]].
-{{:context_menu.png?|}}
+Once a tab is activatd, sets of grouped buttons appear. Each group represents a function. The Share group on the [[ribbon_tabs#home_tab|Home tab]] includes commands that relate to sharing slide viewer (viewport) content, for example. The Viewport group includes options to show or hide select widgets in the slide viewer.
-=== HOME tab ==
+Selecting a [[ribbon_tabs|command on the ribbon]] may lead to further options contained in a contextual menu or dialog box that relate to the chosen [[ribbon_commands|command]].
-HOME tab consists of different sections that contain set of controls for:
+Appearance of tabs and controls are being controlled by the [[admin_ribbon|ribbon layout]], which can be specified in the [[admin|Admin area]].
-  - Layout
-  - Viewport
-  - Navigate
-  - Grid
-  - Snap
-  - Magnify
-  - Slide
-  - Tray
-  - Share
-{{:home-tab.png?direct&600|}}
-=== GRID tab ===
-GRID tab consists of different sections that contain set of controls:
-  - Grid Size
-  - Synchronize
-  - Rows and Columns (R/C)
-  - Slide Zoom in and Zoom out
-  - Snapshot
-  - Share
-{{:grid-tab.png?direct&600|}}
-=== ANNOTATIONS tab ===
-ANNOTATIONS tab consists of different sections that contain set of controls for:
-  - Annotations
-  - Style
-  - Select Annotation
-  - Simple Shapes
-  - Polygon Shapes
-  - Export
-  - Import
-{{:annotation-tab.png?direct&600|}}
-=== PRE-SET ANNOTATIONS tab ===
-PRE-SET ANNOTATIONS tab consists of different sections that contain set of controls for:
-  - Annotations
-  - Stamps
-  - Protocols
-{{:pre-set_annotation_tab.png?direct&600|}}
-=== CONFERENCING tab ===
-ANNOTATIONS tab consists of different sections that contain set of controls for:
-  - Conferencing
-  - Broadcasting
-{{:conferencing-tab.png?direct&600|}}
-=== CONFIGURE tab ===
-CONFIGURE tab consists of different sections that contain set of controls for:
-  - Server
-  - Panels
-  - Pre-set layouts
-  - Viewport
-{{:configure-tab.png?direct&600|}}
+{{:partial_ribbon_admin.png?|}}
+The ribbon can be collapsed to increase the [[maximize_minimize_viewport|size]] of the [[panels|panels]] visible on the computer screen.
 ==== 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}}
-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.
-Toolbar is placed underneath the viewer [#2 on picture #1] Toolbar consists of (left to the right):
-  - 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.
-{{: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]].
-**Tray**
-Tray panel is a virtual store of slides, user can send slides to the Tray and keep them in Tray for the current session. User can open select slides from tray and open them in v iewer tabs or in a grid or remove them from the Tray. To make Tray persistent it's possible to export and import slides to\from tray in CSV format. Tray can present slides in 2 ways - Meta data v iew and Slides v iew. Metadata v iew displays slide information and shows all filled forms for the slide with it's values, while slides v iew shows slide contents in Gallery. Button toolbar is mostly the same for slides and metadata v iew except of 'Export to CSV' button which is available only for Metadata v iew. In both modes it's available to select slides by clicking on them, selected slides are being highlighted with blue colour, in addition slide that that is currently active in v iewer will be additionally highlighted in Metadata v iew with blue dashed border.
-Tray toolbar consist of several buttons, from the left to the right:
-  - **Switch mode** - switches between Metadata and Slides mode
-  - **Select dropdown** -
-    - All - select all slides in Tray
-    - None - deselect all slides in Tray - selection will be empty
-    - Invert - invert selection, deselect selected slides and v ice verca
-  - **Remove selected** - removes selected slides from the Tray
-  - **Clear** - removes all slides from the Tray
-  - **Open in grid** - open selected slides in one v iewer panel in Grid, it's possible to perform this action only when selected slides count is less or equal 36 (6*6 grid)
-  - **Open in tabs** - open each selected slide in separate v iewer panel
-  - **Export to CSV** - exports slides metadata information - slide info and filled forms to the csv file, download should start immediatly
-  - **Import from CSV** - opens an import wizard
-=== 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)
-=== Info ===
-Info panel displays available slide information for currently selected slide. Currently selected slide is highlighted with blue dashed border. Columns are pretty self-descriptive and only thing to mention here is that barcode and overv iew is clickable and by clicking on that images it will be opened in a new browser tab.
-=== 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) ===
+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).
-Conferencing panel works in 3 modes:
+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.
-  -  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) ====
+{{:panels-layout.png?|}}
-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.
+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]].

PMA.studio 2.1.0

User Tools

Site Tools

Differences

Page Tools