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.

Naturally, 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 12 and 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, 12/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

SDK Products that Include HTML5 DICOM Viewer Technology

• LEADTOOLS Medical HTML5 Module

The HTML5 DICOM Viewer Code

The LEADTOOLS HTML5 zero footprint DICOM viewer is actually a fully functional ASP.NET 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.

In the following code snippet, the data from the inputs is gathered and then sent to the server via JSON.  Following that, the application processes incoming server responses, parses the data and populates the studies and series lists.

function DoSearch() {
   queryOptions.PatientsOptions = {};
   queryOptions.StudiesOptions = {};
   queryOptions.PatientsOptions.PatientID = pid;
   queryOptions.PatientsOptions.PatientName = pName;
   queryOptions.StudiesOptions.AccessionNumber = accession;
   queryOptions.StudiesOptions.ReferDoctorName = RefDrName;
   queryOptions.StudiesOptions.ModalitiesInStudy = modalitiesInStudy;
 
   if (document.getElementById("QueryLocal").checked) {
      SetQueryMode(QueryMode.Local);
   }
   else {
      SetQueryMode(QueryMode.PACS);
   }
 
   searchPage.SearchStudies(queryOptions);
}
 
function OnSearchStudiesSuccess ( studies ) {
   if (null == studiesGrid) {
      InitializeStudiesGrid();
   }
 
   studiesGrid.resetActiveCell();
   studiesGrid.getOptions().autoHeight = true;
   studiesGrid.setData(studies);
   studiesGrid.updateRowCount();
   studiesGrid.render();
   $(studiesGridName).show();
 
   $('html, body').animate({
      scrollTop: $(studiesGridName).offset().top
   }, 1000);
}

Client-Side DICOM Image Window Leveling

Since most DICOM Data Sets contain 12/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 problem 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.

As you can see in the example and screenshots below, the window level button is disabled when the image is first displayed or scrolled into view.  Once displayed, a request is sent to the server and the original 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.

function LoadImages(instances, xmlData) {
 
   Clear();
   _images = [];
 
   for (var instanceIndex = 0; instanceIndex < framesLength; instanceIndex++) {
      var loadImageElement = document.createElement('img');
      var frame = new ImageFrame();
 
      frame.FrameIndex = instanceIndex;
      if (multiFrame) {
         frame.FrameNumber = instanceIndex + 1;
         frame.Instance = instances[0];
         frame.DicomData = xmlData;
         frame.ImageInformation = (instanceIndex == 0) ? DicomHelper.GetDicomImageInformation(xmlData) : _images[0].ImageInformation;
      }
      else {
         frame.FrameNumber = 1;
         frame.Instance = instances[instanceIndex];
         frame.DicomData = (instanceIndex == 0) ? xmlData : null;
         frame.ImageInformation = (instanceIndex == 0) ? DicomHelper.GetDicomImageInformation(xmlData) : null;
      }
 
      frame.ImageElement = loadImageElement;
 
      loadImageElement.src = objectRetrieveProxy.GetImageUrl(frame);
   }
}
 
function OnDrawImage() {
   var currentIndex = _stackInteractiveMode.get_frameIndex();
   
   _dicomLoader.DrawImage(currentIndex);
 
   if (!_dicomLoader.IsImageDataAvailable(currentIndex)) {
      DisableWindowLevel();
   }
   else {
      EnableWindowLevel();
   }
}

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 V17.5 (free 60 day evaluation)
• Browse to C:\LEADTOOLS 17.5\Shortcuts\HTML5\02 Medical\Medical Web Viewer
• Execute "Run This First To Config 32-bit Demos" and at the Database Configuration Wizard screen, change the default configuration of each database to use Microsoft SQL Server (e.g. SQLEXPRESS) rather than Microsoft SQL Server Compact 3.5.  Remember the user name and password supplied because those will be used at the login screen of the demo.  Use defaults for everything else.
• Execute "Run This Second To Configure the REST Services" and use the default options.
• Execute "Run 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