HTML5 Zero-footprint Viewer for DICOM and PACS – Part 2

Introduction

There are many important aspects of a complete Zero-footprint DICOM Viewer built using HTML5 and JavaScript.  The latest medical imaging development product from LEADTOOLS has it all: image display, image processing, fast client-side window leveling, series stack, annotations and more.  In our first article, we introduced the viewer and highlighted its PACS query / retrieve and client-side window leveling features.  In this article, we will continue digging into the HTML5 DICOM viewer and take a closer look at its client-side annotations and markup.

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.

HTML5 Annotations for DICOM Images

Once a DICOM series has been selected and the images begin streaming to the viewer, the annotations are initialized for use.  The AnnAutomationManager object is created and attached to the viewer.  The annotations are given their own HTML5 canvas which is overlaid on top of the viewer.  This allows the annotations to be drawn in a separate layer from the image and increases efficiency and reduces the possibility for corruption of the canvas being displayed underneath.  

The great thing about the AnnAutomationManager is that it does everything for you. All the events are handled internally so mouse and touch events are correctly interpreted to draw, modify, transform and scale the annotations anytime the user interacts with the canvas or annotation objects. Additionally, it will rescale and translate the annotations accordingly whenever the viewer’s display properties such as zooming and scrolling are altered so that the annotations stay in the same logical position on the image.

To use the annotations, all one must do next is select the object you wish to draw, or use the Select tool to modify an existing annotation.  In the demo application, LEADTOOLS includes several buttons that enable the desired annotation tool.  You can enable or disable as many as you wish, but LEADTOOLS ships the demo with the most popular annotations used in the healthcare industry (Arrow, Rectangle, Ellipse, Text, Highlight, Ruler, Poly Ruler and Protractor).  The snippet below shows the Angular click commands of several buttons to give an idea of how little is needed for so many features.

commangular.command('OnAnnotationSelect', [
   'toolbarService', 'tabService', 'buttonId', function (toolbarService, tabService, buttonId) {
      return {
         execute: function () {
            setAnnTool(toolbarService, tabService, buttonId, MedicalViewerAction.AnnSelect);
         }
      };
   }]);

commangular.command('OnAnnotationArrow', [
   'toolbarService', 'tabService', 'buttonId', function (toolbarService, tabService, buttonId) {
      return {
         execute: function () {
            setAnnTool(toolbarService, tabService, buttonId, MedicalViewerAction.AnnPointer);
         }
      };
   }]);

commangular.command('OnAnnotationText', [
   'toolbarService', 'tabService', 'buttonId', function (toolbarService, tabService, buttonId) {
      return {
         execute: function () {
            setAnnTool(toolbarService, tabService, buttonId, MedicalViewerAction.AnnText);
         }
      };
   }]);

Loading and Saving Annotations Using the Web Service

The ability to load and save annotations is crucial to the workflow of medical applications.  First and foremost, they help describe, point out, or make note of something in the image.  The most important piece of information is still the image itself so annotations should have a simple method of being hidden and brought back.  DICOM viewing applications are also collaborative.  Radiologists, nurses, doctors and patients alike can look at the images and often need to get second opinions, making the ability to pass notes and annotations back and forth very handy.  Finally, this is a web application so the users of the application will need to see the image and annotations on any computer, mobile device or tablet from any location.

LEADTOOLS uses a RESTful web service to load and save the annotations.  As shown below, the first step is to get a description (e.g. "Dr. Brown’s Notes", "John please review!", etc.) and the image frame on which the annotations are drawn (SOP Instance UID).  These two pieces of information are passed to the ObjectStoreService, which takes care of the rest by saving the annotation data to the server’s database.

commangular.command('OnSaveAnnotations', [
   'seriesManagerService', 'toolbarService', 'objectStoreService', 'authenticationService', '$modal', '$translate', 'dialogs', 'tabService', 'optionsService',
   function (seriesManagerService, toolbarService, objectStoreService, authenticationService, $modal, $translate, dialogs, tabService, optionsService) {
      return {
         execute: function () {
            var tab = tabService.get_allTabs()[tabService.activeTab];

            if (toolbarService.isEnabled("SaveAnn" + tab.id)) {
               var cell = seriesManagerService.get_activeSeriesCell();

               if (cell) {
                  // Save annotations to this series
                  var seriesInstanceUID = cell.get_seriesInstanceUID();
                  var annotationsData = seriesManagerService.get_annotationsData(seriesInstanceUID);

                  if (annotationsData.length > 0) { 
                     // Get description from user
                     var modalInstance = $modal.open({
                        templateUrl: 'views/dialogs/AnnotationsSave.html',
                        controller: Controllers.AnnotationsSaveController,
                        backdrop: 'static'
                     });

                     modalInstance.result.then(function (description) {
                        objectStoreService.StoreAnnotations(seriesInstanceUID, annotationsData, description).then(function (result) {
                           seriesManagerService.add_annotationID(seriesInstanceUID, result.data);
                           dialogs.notify(notifyTitle, annotationsSaved);
                        });
                     });
                  }
               }
            }
         }
      };
   }]); 

When an image frame is loaded, the application does a quick permissions check and then retrieves an array of previously saved annotation files associated with the image. If the image has annotations, then the load button is enabled.  After the user selects an annotation file, the following code will get the annotation data from the server and add each annotation to the canvas.

commangular.command('OnLoadAnnotations', [
   'seriesManagerService', 'toolbarService', '$modal', 'eventService', 'objectRetrieveService', '$translate', 'dialogs', 'tabService',
   function (seriesManagerService, toolbarService, $modal, eventService, objectRetrieveService, $translate, dialogs, tabService) {
      return {
         execute: function () {
            var tab = tabService.get_allTabs()[tabService.activeTab];

            if (toolbarService.isEnabled("LoadAnn" + tab.id)) {
               // Get annotations from this series
               var seriesInstanceUID = seriesManagerService.get_activeSeriesCell().get_seriesInstanceUID();
               var annotations = seriesManagerService.get_annotationIDs(seriesInstanceUID);

               objectRetrieveService.GetPresentationAnnotations(sopInstanceUID, '').then(function (result) {
                  if (result.status == 200) {
                     if (result.data && result.data.length > 0) {
                        var xmlAnnotations = $.parseXML(result.data);

                        seriesManagerService.add_annotations(seriesInstanceUID, xmlAnnotations);
                     } 
                  }
               }, function (error) {
                  $translate('DIALOGS_ERROR').then(function (translation) {
                     dialogs.error(translation, error);
                  });
               });
            }
         }
      };
   }]);

As you can see in the next screenshot, the same image and annotations load perfectly from an iPhone.

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
• HTML5 Imaging with LEADTOOLS
• Zero-footprint OCR with LEADTOOLS HTML5