HTML5 Zero-footprint Viewer for DICOM and PACS

Introduction

The demand for zero-footprint applications is growing rapidly, especially in the healthcare industry with the increasing popularity and usage of tablets and mobile devices by healthcare providers.  There are many ways to display DICOM images and communicate with a PACS over the web or intranet in a zero-footprint manner, but not all applications are created equal.

Any zero-footprint application must do a significant portion of work at the server, but this typically causes a tradeoff in features and performance for which developers must find the proper balance.  When simplifying deployment and platform compatibility through server-side processing, the performance and user-friendliness found in a desktop or rich client application is typically lost or degraded.  Additionally, DICOM images pose a unique challenge because of the 16-bit grayscale image data typically found within them.  These images must be window leveled in order to be properly displayed on standard screens that are only capable of interpreting 8 bits of grayscale data.  The most common solution is to use AJAX to send the window level values to the server and then asynchronously get the converted image back.  Unfortunately this method is slow and unresponsive, especially with larger images.

LEADTOOLS is the only medical imaging SDK to offer full, 16-bit grayscale client-side window leveling.  LEAD’s HTML5 and JavaScript viewer control provides unparalleled speed and features in a cross-platform, zero-footprint DICOM viewing solution that can run on any desktop, tablet or mobile device.

Key HTML5 DICOM Viewer Features in LEADTOOLS SDKs

• HTML5 / JavaScript Viewer Control for cross-platform image viewing
• Supports both mouse and multi-touch (gesture) input
• Fast, client-side tools for Window Level, Series Stack, image processing and more
• View DICOM images anywhere, on your desktop, tablet or mobile device, from your local archive or a remote PACS using DICOM communication
• RESTful Web Services for performing query/retrieve and streaming DICOM metadata and image data in any format or compression
• Native HTML5 Image Annotation and Markup
• Signed and unsigned display for extended grayscale images
• Client caching of downloaded image data for fast reloads and network traffic reduction
• Full featured HTML5 DICOM Viewing application with source code, for easy customization and branding

The HTML5 DICOM Viewer Code

The LEADTOOLS HTML5 Zero-footprint DICOM viewer is a fully functional AngularJS web application that integrates directly with any PACS to stream DICOM images to the client.  The source code is provided so that developers can easily make modifications, customizations and branding changes to the application as they see fit.  In what follows below, some of the key features are explained with screenshots and code snippets to illustrate the benefits of the toolkit.

Using the RESTful Web Service to Query and Retrieve DICOM Images

The server component uses a RESTful Web Service to interface with a local archive or any remote PACS to which you have access.  This service handles all of the PACS communication (i.e. C-Find, C-Move, C-Store, etc.) and interfaces with the viewer control using JSON.

After searching the archive and selecting a patient, study and series, the images will start streaming to the viewer.  First, the server will send a JPEG compressed image to be displayed immediately, and in the background the server streams the window level data (more details to follow in the next section) and remaining image frames in the series stack.

With the MVC architecture afforded by AngularJS, querying the server is quite simple. Each input in the view is tied to a QueryOptions model. Then, the form's search button is attached to the doSearch controller function shown in the snippet below, which interacts with the database or remote PACS. Following that, the application processes incoming server responses and populates the studies and series lists.

$scope.doSearch = function () {
   // Get query options from inputs
   var queryOptions = angular.copy($scope.queryOptions);

   // Empty the currently displayed search results
   $scope.studies.length = 0;

   // Query the database directly or a remote PACS
   switch ($scope.querySource.name) {
      case 'database':
         queryArchiveService.FindStudies(queryOptions, maxStudyResults).then(function (result) {
            eventService.publish("Search/Study/Success", result.data);
            $scope.studies = result.data; // Populate the new results
         }, function (error) {
            eventService.publish("Search/Study/Failure", { error: error });
         });
         break;
      case 'pacs':
         queryPacsService.FindStudies($scope.querySource.pacs, queryPacsService.clientAETitle, queryOptions).then(function (result) {
            eventService.publish("Search/Study/Success", result.data);
            $scope.studies = result.data; // Populate the new results
         }, function (error) {
            eventService.publish("Search/Study/Failure", { error: error });
         });
         break;
   }
};

Client-side DICOM Image Window Leveling

Since most DICOM Data Sets contain 16-bit grayscale image data and monitors only display 8 bits, window leveling is equally as important as the initial image display.  Why is client-side window leveling so important?  Without it, the parameters must be sent to the server, which does the window leveling, converts it to an 8-bit image and returns it to the client.  As images get larger, and healthcare professionals use more restrictive hardware such as mobile phones and tablets, the performance will degrade rapidly as large amounts of data go back and forth between server and client.

LEADTOOLS alleviates this performance degradation by streaming the original DICOM image data using lossless compression and storing it in the client’s cache.  This way, the HTML5 viewer’s window level interactive mode can interpret the mouse or touch input and resample the image colors on the client side, resulting in the same speed and responsiveness you would get from a desktop application.

When a series is selected for viewing, the controller will loop through all of the instances and frames and add them to the cell. It will set the DICOM data for the first cell and stream the remaining images as other requests are made.

DicomLoaderService.prototype.LoadImages = function (seriesInstanceUID, xmlData) {
   var instances = this._seriesManagerService.get_instances(seriesInstanceUID);
   var cell = this._seriesManagerService.get_seriesCell(seriesInstanceUID);

   for (var instanceIndex = 0; instanceIndex < instances.length; instanceIndex++) {
      var instance = instances[instanceIndex];

      for (var frameIndex = 0; frameIndex < instance.NumberOfFrames; frameIndex++) {

         // Set the DICOM data if this is the first instance, otherwise null
         cellFrame.DicomData = (instanceIndex == 0) ? xmlData : null;
         cellFrame.Instance = instance;
         cellFrame.enableDraw = true;

         cellFrame.add_imageDrawn($.proxy(this.OnImageDrawn, this));
      }
   }

   this._eventService.publish(EventNames.LoadingSeriesFrames, { seriesInstanceUID: seriesInstanceUID });
};

While all this is going on, the user may notice the viewer's window level button is initially disabled when the image is first displayed or scrolled into view. Upon initial viewing, loadFrameData triggers an asynchronous request to the server and the raw DICOM image data starts streaming to the client and after a second or two, the button is enabled and a label is displayed showing the current window level values.

DicomLoader.prototype.loadFrameData = function (cellFrame, dataSize, url) {
   var deferred = this._qService.defer();

   var dataReady = function (e) {
      cellFrame.remove_imageDataReady(dataReady);
      cellFrame.remove_imageDataError(dataError);
      deferred.resolve(e);
      this._eventService.publish(EventNames.ImageDataReady, { cellFrame: cellFrame });
   };

   cellFrame.add_imageDataReady(dataReady);
   cellFrame.setPNGDataSrc(url, dataSize.width, dataSize.height);
   return deferred.promise;
};

Conclusion

LEADTOOLS provides developers with access to the world’s best performing and most stable imaging libraries in easy-to-use, high-level programming interfaces enabling rapid development of business-critical applications.

The zero-footprint HTML5 DICOM Viewer is only one of the many technologies LEADTOOLS has to offer.  For more information on our other products, be sure to visit our home page, download a free fully functioning evaluation SDK, and take advantage of our free technical support during your evaluation.

Download the Full HTML5 DICOM Viewer Example

To get started with this example, you can preview it online where it is hosted on our website.  Or you can download a fully functional demo which includes the features discussed above.  To run this example you will need the following:

• LEADTOOLS free 60 day evaluation
• Browse to C:\LEADTOOLS 19\Shortcuts\DICOM\JavaScript
• Execute "01 - Run This First To Configure Demos and Services"
• Browse to the Medical Web Viewer folder and execute "02 - Medical Web Viewer 32-bit Demo" and click "Fix Problems" if necessary to correct any differences in versions between database and IIS requirements.

Support 

Need help getting this sample up and running?  Contact our support team for free technical support!  For pricing or licensing questions, you can contact our sales team (sales@leadtools.com) or call us at 704-332-5532.

For More Information on HTML5 Imaging with LEADTOOLS

• HTML5 Zero-footprint Viewer for DICOM and PACS – Part 2
• HTML5 Imaging with LEADTOOLS
• Zero-footprint OCR with LEADTOOLS HTML5