Cross-Platform HTML5 Compliant Medical Imaging with LEADTOOLS

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.

Product Installation

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.

https://www.leadtools.com/help/leadtools/v19/dh/medical/to/displayinganimageintheleadtoolshtml5medicalwebviewer.html

The tutorial leads you through a few steps that include creating an HTML page, writing some JavaScript and copying some files that ultimately result in a single-page medical viewer application. The JavaScript creates the viewer control, authenticates with the server, then sets the URI for the image to a service call that returns the necessary data. The controls take care of the rest!

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

There are a few prerequisites for the tools that are included with the product readme. Specifically, you should have an instance of IIS Server available to run the web applications and a SQL Server instance to load the database to on Windows servers. The download unzips dozens of sample projects, files, and source code. After installing the download, you can select “LEADTOOLS Main Eval xx” (where xx is the version; this article was written using version 19) from the Start Menu. Navigate to the “DICOM” folder then to the “JavaScript” folder. Finally, open the “Medical Web Viewer” folder.

Launching the demo for the first time requires two steps. These are shortcuts in the folder to set up your environment.

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.

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.

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.

This will open a web browser and prompt you to login with the username and password you configured earlier.

Viewer Walkthrough

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.

The sample application uses the Angular JavaScript frontend framework and HTML5 Canvas elements to render images. The full source code is distributed as part of the evaluation download. There are several components involved in rendering this image. The process all starts with an instance of the JavaScript MedicalViewer component.

In Angular, directives are reusable components that apply behavior to the JavaScript Document Object Model (DOM) and optionally render web-based UI. The “LeadTools.MedicalViewer.Directive.ts” source code (in the Scripts/directives folder) defines a reusable component that leverages the MedicalViewer control.

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.

The directive for the medical viewer uses the MagnifyAction control.

When the toolbar item is pressed, the control activates.

cell.runCommand(MedicalViewerAction.Magnify);

As you can see, all of the code is pure, cross-browser compliant JavaScript.

Additional Effects

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.

Another allows you to adjust the window level for the image. The following graphic shows the result of scrolling through three different 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

The JavaScript controls provide a complete solution for rendering and manipulating image data in the browser, but an important component of the application is the services that provide the data. To understand how the information is streamed to the client, open the “Leadtools.Medical.WebViewer.WCF_2” project located in the “Examples/DotNet/PACSFramework/MedicalWebViewer/Leadtools.Medical.WebViewer.WCF” path. This contains the .NET code for the services that provide studies, layouts, and image information.

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

This call retrieves the actual data used to render the images. This data is passed to the JavaScript control to render. It comes across as an image file, but requires custom processing and rendering due to the additional data that is stored in the format. Using this file, the JavaScript control has the information it needs to render the images, pan, zoom, magnify, and adjust levels as needed.

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.

Conclusion

The DICOM standard supports incredibly information-rich images and related metadata. The LEADTOOLS® SDK offers unprecedented access to deliver interactive experiences across all devices. This is possible due to the included support for HTML5 and JavaScript standards. The example application illustrates a full patient records database implemented leveraging a standard N-tier .NET-based application with a data access layer to SQL Server, a web service layer, and a front-end Single Page Application (SPA) that leverages Angular. The example provides everything you need to understand how to instantiate and interface with the various controls.

For further information you can visit the comprehensive online documentation. The following link references the WebView overview for HTML5 and JavaScript:

https://www.leadtools.com/help/leadtools/v19/dh/medical/to/leadtoolshtml5medicalwebviewerframeworkoverview.html

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.