DICOM is the standard for storing and transmitting medical images. In the past, viewing DICOM was only possible with fat desktop clients that required local installation on specific hardware and platforms. LEADTOOLS®, the leading provider of imaging SDKs, developed a zero-footprint DICOM viewer that can be used from any browser on any platform without installing plug-ins or local software. It is the perfect way to rapidly develop a medical imaging application that can be deployed to a centralized server and accessed from anywhere.
DICOM was developed in the mid-1980s to address the issues with disparate imaging technologies. The American College of Radiology (ACR) and National Electrical Manufacturers Association (NEMA) created the ACR/NEMA 300 standard in 1985 (see this paper for background: https://uncch.pure.elsevier.com/en/publications/dicom-a-standard-for-medical-imaging). It was subsequently revised and has been on version 3.0 since 1993 with later extensions and revisions. The official web page for the standard is: http://dicom.nema.org/. This article reviews the tools released that make it possible to quickly build a fully functional, cross-platform and cross-browser application that supports advanced interactions with DICOM images.
You can quickly and easily review the tool for yourself. Navigate to the main site at: https://www.leadtools.com/ and click on the “Download” option. Expand the “Raster, Document, and Medical Evaluation Downloads” and choose the download for your platform. This article focuses on the Windows installation.
Quick Start Demo
After you’ve downloaded and installed the tool, it possible to get up and running in minutes to see and interact with the viewer control. Just follow the steps outlined in the following tutorial.
Figure 1: Quick Start App
You can take some time to view this simple example. The download contains a far more comprehensive project that provides a full application.
Deep Dive Demo
Launching the demo for the first time requires two steps. These are shortcuts in the folder to set up your environment.
Figure 2: Folder with Demos
The first step will verify whether or not your database is configured. If not, it will prompt you to connect to SQL Server and populate the required databases. After this step is completed, you will see a dialog for the various services that drive the medical viewer demos.
Figure 3: Demo Configuration (First Step)
Choose “Configure” to set up the services and verify they are operating. At any time, tap “Retest” to re-validate the services are running. Be sure to note down any usernames and passwords you set up as you will need them to access the tool later on.
Tip: If you receive a validation error, ensure that your SQL Server instance is running and that the LEADTOOLS® services are also running.
Figure 4: Services
After you verify your services are configured and running, launch the second step. You can launch this as many times as you like because it will verify the configuration and perform any set up needed each time you run it. Run the viewer from the dialog by clicking the “Launch Viewer” button.
Figure 5: Second Demo Step
This will open a web browser and prompt you to login with the username and password you configured earlier.
After logging in, you can search records and pull up the related images. As you can see, the application demonstrates more advanced interactions with the controls than the single-page quick start.
Figure 6: Main Viewing Window
This viewer instance can be passed into the constructor of the API class. The directive makes it easier for the application to interact with the viewer control and modify configuration. For example, the directive detects if the browser is on a mobile device and automatically adjusts the rows and columns for a better fit:
The directive is attached to an HTML element. You can see this in the “Viewer.html” source (“Views” folder).
Although the directive serves to provide a target for actions, a controller is needed to orchestrate the actions. The controller determines what patient is being viewed and passes the right images to the directive. To examine this code, look at “TabService.ts” in “Services” under “Scripts” that instantiates an instance of “ViewController.ts” in “Controllers.”
Magnify your Results
From the tool, click the magnifying glass with a plus sign and then click and scroll over the canvas. You will see a Magnifying effect.
Figure 7: The Magnify Effect
The directive for the medical viewer uses the MagnifyAction control.
When the toolbar item is pressed, the control activates.
The sample application provides code for additional effects as well. All of the effects are driven by commands generated when you click on the appropriate toolbar icon. For example, one effect enables you to zoom in or out.
Figure 8: Zoomed View
Another allows you to adjust the window level for the image. The following graphic shows the result of scrolling through three different levels.
Figure 9: Various Window Levels
You can see how these effects are loaded to the toolbar by inspecting the “ToolbarService.ts” source in the “Services” folder under “Scripts.” Here are a few options being added:
Pressing an item simply executes a command that generates an event that the controllers can listen to interact with the controls in an appropriate manner.
At Your Service
A typical request for a DICOM image looks like this:
Get Study Layout
This call retrieves information about the study, including the child series, rows and columns and related image data for the study.
Get Series Thumbnail
This returns a thumbnail that can be rendered by the browser to preview the study.
Get Series Stacks
The stacks represent sequences of images that are part of a study. These have unique reference numbers and are sorted in the data source. The following example is the response for a study that has two instances in the series.
Get Series Layout
The layout for a specific series has a name, template, icon, and images that are part of the series.
Get Image Tile
Get DICOM JSON
The final call retrieves all of the related information for the DICOM image in a JSON format to display on the client.
Figure 10: DICOM Information
Figure 11: Architecture Overview
The LEADTOOLS® HTML5 Zero-footprint Medical Viewer helps shorten the learning curve for developers to build applications that support DICOM. In addition to the fast, cross-platform support, the SDK is compatible with touch-enabled devices and gestures, handles image processing, works with annotations and supports both pre-defined and custom layouts. It is the perfect way to quickly get started building medical applications that are accessible from any device.