feat: Added documentation for OHIF-v3 (#2450)
* Added docs with new screenshots * Added doc to architecture * Added documentations to various extension modules * Added more documentation to modes * Added docs to managers * Added docs for services * Fixed deployment docs * Added white labelling documentation * Added i18n docs and measurement export
This commit is contained in:
Alireza authored and GitHub committed
1 parent
1bf651e763
commit
5643f8f6d2
142 files changed
+5251
-1523
No files matched your search
@@ -0,0 +1,10 @@
|
||||
# Hotkeys
|
||||
|
||||
To open the hotkey assignment panel, you can click on the Preferences gear on the
|
||||
top right side of the viewer.
|
||||
|
||||
|
||||
|
||||
Below, you can see the default hotkeys key bindings:
|
||||
|
||||
|
||||
@@ -0,0 +1,12 @@
|
||||
# Language
|
||||
|
||||
OHIF supports internationalization capabilities and setting the general language
|
||||
of the Viewer.
|
||||
|
||||
It should be noted that we don't have complete translations for all the components
|
||||
and all the languages; however, you can easily add the key value translation pairs
|
||||
following developer guides.
|
||||
|
||||
Summary of language changing usage can be seen below:
|
||||
|
||||
<mark>Upload
|
||||
@@ -0,0 +1,34 @@
|
||||
# Viewport
|
||||
|
||||
Image visualization happens at the viewport which contains canvas or canvases that
|
||||
renders series.
|
||||
|
||||
|
||||
|
||||
|
||||
By default you can modify:
|
||||
|
||||
- Zoom: right click dragging up or down
|
||||
- Contrast/brightness: left click dragging up/down to change contrast, and left/right for changing brightness
|
||||
- Pan: middle click dragging
|
||||
|
||||
|
||||
|
||||
# Changing Series for display
|
||||
To change the displayed series, you can drag and drop the desired series from the left panel. Start, by dragging the thumbnail of the series, and drop it on the viewport.
|
||||
|
||||
|
||||
# Changing Layout
|
||||
If you click on the layout icon on the toolbar, you can use the layout selector UI. After changing the layout, you can select studies for each new viewport by dragging and dropping in to the viewport.
|
||||
|
||||
After changing the layout from 1x1, you will see each viewport gets tagged by a letter,
|
||||
which matches its series section in the study list.
|
||||
|
||||
|
||||
|
||||
|
||||
# Overview video
|
||||
An overview of viewport layout change, and manipulation can be seen below:
|
||||
|
||||
|
||||
<div style="padding:56.25% 0 0 0;position:relative;"><iframe src="https://player.vimeo.com/video/545995881?badge=0&autopause=0&player_id=0&app_id=58479" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen style="position:absolute;top:0;left:0;width:100%;height:100%;" title="viewer-layout-2"></iframe></div><script src="https://player.vimeo.com/api/player.js"></script>
|
||||
@@ -0,0 +1,29 @@
|
||||
# Viewer
|
||||
- [Viewer](./index.md)
|
||||
- [Overview](./index.md#overview)
|
||||
- [Study Panel](./studyPanel/study-panel.md)
|
||||
- [Measurement Panel](./measurementPanel/measurement-panel.md)
|
||||
- [Toolbar](./toolbar/toolbar.md)
|
||||
- [HotKeys](./hotkeys/hotkeys.md)
|
||||
|
||||
|
||||
# Overview
|
||||
When you open a mode, viewport, toolbar and panels of the mode get shown.
|
||||
It is important to note that each mode has a different UI, which serves its purpose.
|
||||
Here we explain various components of `Basic Viewer` mode which includes measurement
|
||||
tracking functionalities.
|
||||
|
||||
Basic viewer mode (longitudinal):
|
||||
|
||||
|
||||
|
||||
Let's break different aspects of the viewer to the main components:
|
||||
|
||||
- Left Panel (study panel): displays series thumbnails with series details
|
||||
- Viewport: renders the image and displays annotations
|
||||
- Right Panel (measurements): displays annotations details
|
||||
- Toolbar: displays tools and logo
|
||||
|
||||
|
||||
|
||||
Now, we explain each component and its sub-elements in detail.
|
||||
@@ -0,0 +1,62 @@
|
||||
# Measurement panel
|
||||
|
||||
In `Basic Viewer` mode, right panel is the `Measurement Panel`. When you use an annotation tool, a pop up will show up and asks the user if they want to track measurements for the
|
||||
series on which the annotation was drawn.
|
||||
|
||||
|
||||
|
||||
If you select `yes`, the series becomes a `tracked series`, and the current drawn measurement and next measurements will get shown up on the measurement panel on the right.
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
# Renaming Measurements
|
||||
You can edit the measurement name by hovering over the measurement and selecting the edit icon.
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
Result:
|
||||
|
||||
|
||||
|
||||
|
||||
# Deleting a Measurement
|
||||
A measurement can be deleting by dragging it outside the image in the viewport. You can
|
||||
take a look at the overview video to see this behavior.
|
||||
|
||||
|
||||
# Jumping to a Measurement
|
||||
Measurements that appear on the measurement panel are linked directly to their original
|
||||
tool on the viewport. This enables the user to click on a measurement and the viewport will jump to the slice that the measurement has been drawn. You can
|
||||
take a look at the overview video to see this behavior.
|
||||
|
||||
# Prev/Next Measurement
|
||||
Measurement navigation inside the top viewport can be used to move to previous and next measurement.
|
||||
|
||||
|
||||
|
||||
# Export Measurements
|
||||
You can export the measurements by clicking on the `Export`. A CSV file will get downloaded to your local computer containing the drawn measurements.
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
If you have set up your DICOM server to be able to store instances from the viewer, then you are able to create a report by clicking on the `Create Report`.
|
||||
This will create a DICOM Structured Report (SR) from the measurements and push it
|
||||
to the server.
|
||||
|
||||
For instance, running the Viewer on a local DCM4CHEE:
|
||||
|
||||
<div style="padding:56.25% 0 0 0;position:relative;"><iframe src="https://player.vimeo.com/video/557569965?badge=0&autopause=0&player_id=0&app_id=58479" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen style="position:absolute;top:0;left:0;width:100%;height:100%;" title="DICOM SR Export"></iframe></div><script src="https://player.vimeo.com/api/player.js"></script>
|
||||
|
||||
|
||||
|
||||
# Overview video
|
||||
An overview of measurement drawing and exporting can be seen below:
|
||||
|
||||
<div style="padding:56.25% 0 0 0;position:relative;"><iframe src="https://player.vimeo.com/video/545986384?badge=0&autopause=0&player_id=0&app_id=58479" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen style="position:absolute;top:0;left:0;width:100%;height:100%;" title="measurement-report"></iframe></div><script src="https://player.vimeo.com/api/player.js"></script>
|
||||
@@ -0,0 +1,16 @@
|
||||
# Study panel
|
||||
|
||||
In `Basic Viewer` mode, the left panel includes Studies related to the current patient.
|
||||
You can see three main type of studies below
|
||||
|
||||
- Primary: The opened study from the study list
|
||||
- Recent: Other studies for this patient
|
||||
- All: Includes both primary and recent studies
|
||||
|
||||
|
||||
|
||||
This is a new feature that we have added to `OHIF-v3`, that shows all the studies that the patient with the specific MRN had and are available from the data storage.
|
||||
|
||||
|
||||
|
||||
As you can see the first picture, the dashed circle on the left side of each series demonstrates whether the series is being tracked for measurement or not.
|
||||
@@ -0,0 +1,70 @@
|
||||
|
||||
|
||||
|
||||
# Toolbar
|
||||
|
||||
The four main components of the toolbar are:
|
||||
|
||||
- Navigation back to the [Study List](../../studyList/index.md)
|
||||
- Logo and white labelling
|
||||
- [Tools](#tools)
|
||||
- [Preferences](#preferences)
|
||||
|
||||
|
||||
|
||||
|
||||
# Tools
|
||||
This section displays all the available tools inside the mode.
|
||||
|
||||
## Measurement tools
|
||||
They can be used to measure the area of interest. This measurement can be performed
|
||||
via:
|
||||
|
||||
- Length Tool: Calculated the distance between two points
|
||||
- Bidirectional Tool: A 2D Length tool in two main axis
|
||||
- Annotation: To label and point to an area
|
||||
- Ellipse: Calculates statistics on a ellipse area
|
||||
- Rectangle: Calculates statistics on a rectangle area
|
||||
- Probe: To read the intensity value at a location
|
||||
|
||||
|
||||
|
||||
|
||||
To draw a measurement you can select it from the toolbar and click and drag mouse
|
||||
to reach the desired shape, size and direction.
|
||||
|
||||
A sample tool drawing is shown below
|
||||
|
||||
|
||||
# Presets
|
||||
Preset tool enables manipulating the window level and window width of the rendered
|
||||
image, which basically modifies the contrast and brightness.
|
||||
|
||||
You can also choose from the list of pre-defined presets by clicking on the triangle.
|
||||
|
||||
|
||||
|
||||
|
||||
# Download High Quality Image
|
||||
By clicking on the Camera icon you can open the window for downloading the image as
|
||||
common image formats (png, jpg)
|
||||
|
||||
|
||||
|
||||
In the opened modal, you can set the filename, image's width and height, and filetype and press download for downloading the image to your local computer.
|
||||
|
||||
|
||||
|
||||
|
||||
# Extra tools
|
||||
Lots of other tools are also available in the last tool icon drawer. If you
|
||||
click on the triangle they will get appeared.
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
# Overview
|
||||
An overview of tool usage can been seen below:
|
||||
|
||||
<div style="padding:56.25% 0 0 0;position:relative;"><iframe src="https://player.vimeo.com/video/545989422?badge=0&autopause=0&player_id=0&app_id=58479" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen style="position:absolute;top:0;left:0;width:100%;height:100%;" title="Toolbar-annotation"></iframe></div><script src="https://player.vimeo.com/api/player.js"></script>
|
||||
Reference in new issue
Block a user