HTML5 DICOM Viewer

This article describes the basics of using the zero-footprint HTML5 DICOM image viewer.

Tools and Options

All tools and viewer options are outlined below.

Scroll

Scroll through the images available in the image box by dragging up and down.

1. Select the “Scroll” button on the tool bar or context menu and drag up and down on the display set with the left mouse button.
   
   

2. Scroll up and down on the display set with the mouse wheel.

3. Drag the scroll bar at the side of each display set.
   
   

Window/Level

Changes the contrast of the image. You can either use the pre-set settings when you click the button or left clicking and dragging up or down on an image will also change contrast.

1. Select the “Window/Level” button on the tool bar or context menu and drag around on the image. Dragging up increases the “level” (or window center), while dragging down decreases it. Dragging left reduces the window width and dragging right enlarges it. Combining both dragging motions will adjust both the window width and level simultaneously.
   

2. Presets may be available for certain image sets and if available then the presets option becomes available in the context menu.
   

3. Clicking on any of the available preset option will set the selected display set with the values in the selected preset.

Zoom

Allows you to zoom in and out of the images by left clicking and dragging up or down on an image.

1. Select the “Zoom” button on the tool bar or context menu and drag up and down on the image.
   

Panning

Allows you to move the images around by left clicking and dragging on an image.

1. Select the “Pan” button on the tool bar or context menu and drag around the image.
   

Hounsfield Unit

Displays the actual pixel value or Hounsfield Unit (HU) of where the cursor is clicked for the image in the bottom right overlay.

1. Click on the “HU” option in the context menu.
   

2. Click at the point on the image you wish to calculate the Hounsfield Unit. The image Hounsfield Unit is shown in the bottom right overlay. Please note that if the Hounsfield Unit is not available then the raw pixel value will be displayed.
   

Multi-Planar Reconstruction

The Multi-Planar Reconstruction (MPR) feature allows users to generate images from additional perspectives using a stack of source images in the same plane. To start the MPR viewer, the user will need to right click on a plane and then select “Multi-Planar Reconstruction” from the context menu.

Measure Length

Allows you to measure the length of the images on the screen by allowing you to draw a ruler on an image.

Adding Measurement

1. Click on the “Measure Length” button on the tool bar or context menu.
   

2. Click and hold on the image where you want the measurement to begin. Release when necessary to calculate length.
   

Modifying Measurement

1. To resize, hover the mouse over one of the anchor points the click and drag as necessary.
   

2. To move, hover the mouse over one of the lines (not the anchor point), then click and drag to the new location.
   

3. To delete, click on one of the lines or anchor point and then press the backspace button on your keyboard or click the “Clear Measurements” option on the toolbar or context menu.

Measure Angle

Allows you to measure the angle of the images on the screen by allowing you to draw rulers on an image.

Adding Measurement

1. Click on the “Measure Angle” button on the tool bar or context menu.
   

2. Click and hold on the image where you want the measurement to begin. This lays down the measurement’s first anchor point. Release when necessary.

3. Move the mouse to where you want the next anchor point to be located. Click and release again.
   

Modifying Measurement

1. You cannot add/remove anchor points.

2. To resize, hover the mouse over one of the anchor points the click and drag as necessary.
   

3. To move, hover the mouse over one of the lines (not the anchor point), then click and drag to the new location.
   

4. To delete, click on one of the lines or anchor point and then press the backspace button on your keyboard or click the “Clear Measurements” option on the toolbar or context menu.

Measure Cobb Angle

Allows you to measure the Cobb angle of the images on the screen by allowing you to draw rulers on an image.

Adding Measurement

1. Click on the “Measure Cobb Angle” button on the tool bar or context menu.
   

2. Click and hold on the image where you want the measurement to begin. This lays down the measurement’s first anchor point. Release when necessary.
   

3. Repeat step 2 for second anchor point to calculate cobb angle.
   

Modifying Measurement

1. You cannot add/remove anchor points.

2. To resize, hover the mouse over one of the anchor points the click and drag as necessary.
   

3. To move, hover the mouse over one of the lines (not the anchor point), then click and drag to the new location.
   

4. To delete, click on one of the lines or anchor point and then press the backspace button on your keyboard or click the “Clear Measurements” option on the toolbar or context menu.

Measure Polygonal ROI

Allows you add anchor points to measure the polygonal ROI.

Adding measurement

1. Click on the “Measure Polygon” button on the tool bar or context menu.
   

2. Click on the image where you want the measurement to begin. This lays down the measurement’s first anchor point. Note that you can just click and release. It is not necessary to hold.
   

3. Move the mouse to where you want the next anchor point to be located. Click and release again.
   

4. Repeat step 3 until the measurement is complete by bringing the mouse back to the first point.    
   

5. 
   

Modifying Measurement

1. You cannot add/remove anchor points.

2. To resize, hover the mouse over one of the anchor points the click and drag as necessary.
   

3. To move, hover the mouse over one of the lines (not the anchor point), then click and drag to the new location.
   

4. To delete, click on one of the lines or anchor point and then press the backspace button on your keyboard or click the “Clear Measurements” option on the toolbar or context menu.

Measure CTR

Allows you to measure the cardiothoracic ratio of the images on the screen by allowing you to draw rulers on an image.

Adding Measurement

1. Click on the “Measure CTR” button on the tool bar or context menu.
   

2. Click and hold on the image where you want the measurement to begin. This will create the start and end anchor points. Release where you want the measurement to end.
   

Modifying Measurement

1. To resize or rotate, hover the mouse over the start or end anchor points and then click and drag as necessary.
   

2. To move, hover the mouse over one of the lines (not the anchor point), then click and drag to the new location.
   

3. To delete, click on one of the lines or anchor point and then press the backspace button on your keyboard or click the “Clear Measurements” option on the toolbar or context menu.

Invert

1. Click on one of the display sets to select it and then press the “Invert” button on the tool bar to invert the image.

2. Invert will cause low values to become brighter and high values to become darker.
   

Zoom Fit

1. Click on the “Zoom Fit” button on the tool bar to fit to apply the correct zoom to all display sets so that the image is displayed entirely.
   

Flip Vertical & Flip Horizontal

1. Click on the “Flip Vertical” or "Flip Horizontal" button to flip the selected image box.
   

Reset

1. Click on the “Reset” button to reset the image back to the original zoom, position, geometric orientation, window/level and invert back to default.
   

Layout

Grid

1. Click on the “Grid” button to specify the image box layout.
   

2. 
   

3. 

No Split

1. Click on the “No Split” layout button to specify a 1x1 layout.
   

Split Vertical

1. Click on the “Split Vertical” layout button to specify a 1 x 2 layout.
   

Split Horizontal

1. Click on the “Split Horizontal” layout button to specify a 2 x 1 layout.
   

Split Grid

1. Click on the “Split Grid” layout button to specify a 2 x 2 layout.
   

Sync Scroll

Normal

1. Click on the “Sync Scroll” button on the tool bar and select “Enable” or “Normal” to activate sync scrolling based on image number.
   

Slice Location

1. Click on the “Sync Scroll” button on the tool bar and select “Slice Location” to activate sync scrolling based on slice location.
   

Clear Measurements

Clears the measurements on the image.

3D Cursor

Allows you to locate a point in space across all image planes.

1. Click on the “3D Cursor” button on the tool bar or context menu.
   

2. Click on the point of interest, the same point will then be marked in orange by a cross hair in the other series and the location will also be updated. The point of interest in the selected display set will be marked with a green cross hair.
   

Show/Hide Overlay

1. Click on the “Show/Hide Overlay” button on the tool bar to show or hide overlays.

   
   

Play Cine

1. Press the “Play” button to play images in a cine loop.
   

2. Clicking on “Play” will change the button to the Stop icon and will also allow you to specify the FPS.
   

Export & Share Image

Allows you to export the selected image.

Export Image

1. Click on the “Export/Share” button on the tool bar to display the Export/Share options.
   

2. Click on “Export Image” from the Export/Share options or from the context menu to download the image for the selected display set as PNG.
   

Export Image with Overlay

1. Click on the “Export/Share” button on the tool bar to display the Export/Share options.
   

2. Click on “Export Image with Overlay” from the Export/Share options or from the context menu to download the image with the overlays for the selected display set as PNG.
   

Export as DICOM

1. Click on the “Export/Share” button on the tool bar to display the Export/Share options.
   

2. Click on “Export as DICOM” from the Export/Share options to export this study in DICOM.
   

3. Enter the email address of the recipient so they can download the exported study in DICOM.
   

4. Send download code to the recipient who have requested for the study export.
   

Share via Email

1. Click on the “Export/Share” button on the tool bar to display the Export/Share options.
   

2. Click on “Share via email” to share the study with an external user.
   

3. Enter the recipient’s email address. Please note that the default expiration date for the study share is 7 days.
   
   
   

Report

1. Click on the “Report” button to display the report for the study. This button is only visible if a report is available.
   

Related Studies

1. Related/prior studies can be accessed by going to the context menu and selecting “Related Studies”.
   

2. Clicking on any of the studies from the “Related Studies” list will open the study in a new tab.